:root{--ion-color-primary:#0054e9;--ion-color-primary-rgb:0,84,233;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#004acd;--ion-color-primary-tint:#1a65eb;--ion-color-secondary:#0163aa;--ion-color-secondary-rgb:1,99,170;--ion-color-secondary-contrast:#fff;--ion-color-secondary-contrast-rgb:255,255,255;--ion-color-secondary-shade:#015796;--ion-color-secondary-tint:#1a73b3;--ion-color-tertiary:#6030ff;--ion-color-tertiary-rgb:96,48,255;--ion-color-tertiary-contrast:#fff;--ion-color-tertiary-contrast-rgb:255,255,255;--ion-color-tertiary-shade:#542ae0;--ion-color-tertiary-tint:#7045ff;--ion-color-success:#2dd55b;--ion-color-success-rgb:45,213,91;--ion-color-success-contrast:#000;--ion-color-success-contrast-rgb:0,0,0;--ion-color-success-shade:#28bb50;--ion-color-success-tint:#42d96b;--ion-color-warning:#ffc409;--ion-color-warning-rgb:255,196,9;--ion-color-warning-contrast:#000;--ion-color-warning-contrast-rgb:0,0,0;--ion-color-warning-shade:#e0ac08;--ion-color-warning-tint:#ffca22;--ion-color-danger:#c5000f;--ion-color-danger-rgb:197,0,15;--ion-color-danger-contrast:#fff;--ion-color-danger-contrast-rgb:255,255,255;--ion-color-danger-shade:#ad000d;--ion-color-danger-tint:#cb1a27;--ion-color-light:#f4f5f8;--ion-color-light-rgb:244,245,248;--ion-color-light-contrast:#000;--ion-color-light-contrast-rgb:0,0,0;--ion-color-light-shade:#d7d8da;--ion-color-light-tint:#f5f6f9;--ion-color-medium:#636469;--ion-color-medium-rgb:99,100,105;--ion-color-medium-contrast:#fff;--ion-color-medium-contrast-rgb:255,255,255;--ion-color-medium-shade:#57585c;--ion-color-medium-tint:#737478;--ion-color-dark:#222428;--ion-color-dark-rgb:34,36,40;--ion-color-dark-contrast:#fff;--ion-color-dark-contrast-rgb:255,255,255;--ion-color-dark-shade:#1e2023;--ion-color-dark-tint:#383a3e}html.ios{--ion-default-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Roboto",sans-serif}html.md{--ion-default-font:"Roboto","Helvetica Neue",sans-serif}body.backdrop-no-scroll{overflow:hidden}html.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type,html.ios ion-modal ion-footer ion-toolbar:first-of-type,html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type{padding-top:6px}html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type{padding-bottom:6px}html.ios .modal-footer-moving ion-toolbar,html.ios ion-modal ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 8px);padding-left:calc(var(--ion-safe-area-left) + 8px)}@media screen and (min-width:768px){html.ios ion-modal.modal-card:first-of-type{--backdrop-opacity:0.18}}ion-modal.modal-default.show-modal~ion-modal.modal-default{--backdrop-opacity:0;--box-shadow:none}html.ios ion-modal.modal-card .ion-page{border-top-left-radius:var(--border-radius)}.ion-color-primary{--ion-color-base:var(--ion-color-primary, #0054e9)!important;--ion-color-base-rgb:var(--ion-color-primary-rgb, 0, 84, 233)!important;--ion-color-contrast:var(--ion-color-primary-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-primary-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-primary-shade, #004acd)!important;--ion-color-tint:var(--ion-color-primary-tint, #1a65eb)!important}.ion-color-secondary{--ion-color-base:var(--ion-color-secondary, #0163aa)!important;--ion-color-base-rgb:var(--ion-color-secondary-rgb, 1, 99, 170)!important;--ion-color-contrast:var(--ion-color-secondary-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-secondary-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-secondary-shade, #015796)!important;--ion-color-tint:var(--ion-color-secondary-tint, #1a73b3)!important}.ion-color-tertiary{--ion-color-base:var(--ion-color-tertiary, #6030ff)!important;--ion-color-base-rgb:var(--ion-color-tertiary-rgb, 96, 48, 255)!important;--ion-color-contrast:var(--ion-color-tertiary-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-tertiary-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-tertiary-shade, #542ae0)!important;--ion-color-tint:var(--ion-color-tertiary-tint, #7045ff)!important}.ion-color-success{--ion-color-base:var(--ion-color-success, #2dd55b)!important;--ion-color-base-rgb:var(--ion-color-success-rgb, 45, 213, 91)!important;--ion-color-contrast:var(--ion-color-success-contrast, #000)!important;--ion-color-contrast-rgb:var(--ion-color-success-contrast-rgb, 0, 0, 0)!important;--ion-color-shade:var(--ion-color-success-shade, #28bb50)!important;--ion-color-tint:var(--ion-color-success-tint, #42d96b)!important}.ion-color-warning{--ion-color-base:var(--ion-color-warning, #ffc409)!important;--ion-color-base-rgb:var(--ion-color-warning-rgb, 255, 196, 9)!important;--ion-color-contrast:var(--ion-color-warning-contrast, #000)!important;--ion-color-contrast-rgb:var(--ion-color-warning-contrast-rgb, 0, 0, 0)!important;--ion-color-shade:var(--ion-color-warning-shade, #e0ac08)!important;--ion-color-tint:var(--ion-color-warning-tint, #ffca22)!important}.ion-color-danger{--ion-color-base:var(--ion-color-danger, #c5000f)!important;--ion-color-base-rgb:var(--ion-color-danger-rgb, 197, 0, 15)!important;--ion-color-contrast:var(--ion-color-danger-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-danger-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-danger-shade, #ad000d)!important;--ion-color-tint:var(--ion-color-danger-tint, #cb1a27)!important}.ion-color-light{--ion-color-base:var(--ion-color-light, #f4f5f8)!important;--ion-color-base-rgb:var(--ion-color-light-rgb, 244, 245, 248)!important;--ion-color-contrast:var(--ion-color-light-contrast, #000)!important;--ion-color-contrast-rgb:var(--ion-color-light-contrast-rgb, 0, 0, 0)!important;--ion-color-shade:var(--ion-color-light-shade, #d7d8da)!important;--ion-color-tint:var(--ion-color-light-tint, #f5f6f9)!important}.ion-color-medium{--ion-color-base:var(--ion-color-medium, #636469)!important;--ion-color-base-rgb:var(--ion-color-medium-rgb, 99, 100, 105)!important;--ion-color-contrast:var(--ion-color-medium-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-medium-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-medium-shade, #57585c)!important;--ion-color-tint:var(--ion-color-medium-tint, #737478)!important}.ion-color-dark{--ion-color-base:var(--ion-color-dark, #222428)!important;--ion-color-base-rgb:var(--ion-color-dark-rgb, 34, 36, 40)!important;--ion-color-contrast:var(--ion-color-dark-contrast, #fff)!important;--ion-color-contrast-rgb:var(--ion-color-dark-contrast-rgb, 255, 255, 255)!important;--ion-color-shade:var(--ion-color-dark-shade, #1e2023)!important;--ion-color-tint:var(--ion-color-dark-tint, #383a3e)!important}.ion-page{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:column;justify-content:space-between;contain:layout size style;z-index:0}.ion-page.ion-page-overlay-passthrough{pointer-events:none}ion-modal>.ion-page{position:relative;contain:layout style;height:100%}.split-pane-visible>.ion-page.split-pane-main{position:relative}.ion-page-hidden,ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-menu-controller,ion-modal-controller,ion-nav-controller,ion-picker-controller,ion-popover-controller,ion-route,ion-route-redirect,ion-router,ion-select-option,ion-toast-controller{display:none!important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding:20px}@supports(padding-top:20px){html{--ion-safe-area-top:var(--ion-statusbar-padding)}}@supports(padding-top:env(safe-area-inset-top)){html{--ion-safe-area-top:env(safe-area-inset-top);--ion-safe-area-bottom:env(safe-area-inset-bottom);--ion-safe-area-left:env(safe-area-inset-left);--ion-safe-area-right:env(safe-area-inset-right)}}ion-card-header.ion-color .ion-inherit-color,ion-card.ion-color .ion-inherit-color{color:inherit}.menu-content{transform:translate3d(0,0,0)}.menu-content-open{cursor:pointer;touch-action:manipulation;pointer-events:none;overflow-y:hidden}.menu-content-open ion-content{--overflow:hidden}.menu-content-open .ion-content-scroll-host{overflow:hidden}.ios .menu-content-reveal{box-shadow:-8px 0 42px rgba(0,0,0,.08)}[dir=rtl].ios .menu-content-reveal{box-shadow:8px 0 42px rgba(0,0,0,.08)}.md .menu-content-push,.md .menu-content-reveal{box-shadow:4px 0 16px rgba(0,0,0,.18)}ion-accordion-group.accordion-group-expand-inset>ion-accordion:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px}ion-accordion-group.accordion-group-expand-inset>ion-accordion:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}ion-accordion-group>ion-accordion:last-of-type ion-item[slot=header]{--border-width:0px}ion-accordion.accordion-animated>[slot=header] .ion-accordion-toggle-icon{transition:transform .3s cubic-bezier(.25, .8, .5, 1)}@media(prefers-reduced-motion:reduce){ion-accordion .ion-accordion-toggle-icon{transition:none!important}}ion-accordion.accordion-expanded>[slot=header] .ion-accordion-toggle-icon,ion-accordion.accordion-expanding>[slot=header] .ion-accordion-toggle-icon{transform:rotate(180deg)}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-previous ion-item[slot=header]{--border-width:0px;--inner-border-width:0px}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanded:first-of-type,ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanding:first-of-type{margin-top:0}ion-input input::-webkit-date-and-time-value{text-align:start}.ion-datetime-button-overlay{--width:fit-content;--height:fit-content}.ion-datetime-button-overlay ion-datetime.datetime-grid{width:320px;min-height:320px}[ion-last-focus],[role=banner][tabindex="-1"]:focus,[role=heading][aria-level="1"][tabindex="-1"]:focus,[role=main][tabindex="-1"]:focus,h1[tabindex="-1"]:focus,header[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:0}.popover-viewport:has(>ion-content){overflow:hidden}@supports not selector(:has(> ion-content)){.popover-viewport{overflow:hidden}}audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:700}img{max-width:100%}hr{height:1px;border-width:0;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}input,label,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;height:auto;font:inherit;color:inherit}textarea::placeholder{padding-left:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}.ion-tappable,[tappable],[tappable] div,[tappable] ion-icon,[tappable] ion-label,[tappable] span,a,a div,a ion-icon,a ion-label,a span,button,button div,button ion-icon,button ion-label,button span,input,textarea{touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{padding:0;border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;cursor:pointer;-webkit-appearance:button}[tappable]{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{--ion-dynamic-font:-apple-system-body;--ion-font-family:var(--ion-default-font);width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:var(--ion-font-family)}html.ion-ce body{display:block}html.plt-pwa{height:100vh}body{background:var(--ion-background-color);color:var(--ion-text-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;padding:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;transform:translateZ(0);text-rendering:optimizeLegibility;overflow:hidden;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;text-size-adjust:none}@supports(-webkit-touch-callout:none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}a{background-color:transparent;color:var(--ion-color-primary,#0054e9)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:1.625rem}h2{margin-top:18px;font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}.ion-no-padding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;padding:0}.ion-padding{--padding-start:var(--ion-padding, 16px);--padding-end:var(--ion-padding, 16px);--padding-top:var(--ion-padding, 16px);--padding-bottom:var(--ion-padding, 16px);-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px);-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px);padding-top:var(--ion-padding,16px);padding-bottom:var(--ion-padding,16px)}.ion-padding-top{--padding-top:var(--ion-padding, 16px);padding-top:var(--ion-padding,16px)}.ion-padding-start{--padding-start:var(--ion-padding, 16px);-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px)}.ion-padding-end{--padding-end:var(--ion-padding, 16px);-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px)}.ion-padding-bottom{--padding-bottom:var(--ion-padding, 16px);padding-bottom:var(--ion-padding,16px)}.ion-padding-vertical{--padding-top:var(--ion-padding, 16px);--padding-bottom:var(--ion-padding, 16px);padding-top:var(--ion-padding,16px);padding-bottom:var(--ion-padding,16px)}.ion-padding-horizontal{--padding-start:var(--ion-padding, 16px);--padding-end:var(--ion-padding, 16px);-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px);-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px)}.ion-no-margin{--margin-start:0;--margin-end:0;--margin-top:0;--margin-bottom:0;margin:0}.ion-margin{--margin-start:var(--ion-margin, 16px);--margin-end:var(--ion-margin, 16px);--margin-top:var(--ion-margin, 16px);--margin-bottom:var(--ion-margin, 16px);-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px);-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px);margin-top:var(--ion-margin,16px);margin-bottom:var(--ion-margin,16px)}.ion-margin-top{--margin-top:var(--ion-margin, 16px);margin-top:var(--ion-margin,16px)}.ion-margin-start{--margin-start:var(--ion-margin, 16px);-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px)}.ion-margin-end{--margin-end:var(--ion-margin, 16px);-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px)}.ion-margin-bottom{--margin-bottom:var(--ion-margin, 16px);margin-bottom:var(--ion-margin,16px)}.ion-margin-vertical{--margin-top:var(--ion-margin, 16px);--margin-bottom:var(--ion-margin, 16px);margin-top:var(--ion-margin,16px);margin-bottom:var(--ion-margin,16px)}.ion-margin-horizontal{--margin-start:var(--ion-margin, 16px);--margin-end:var(--ion-margin, 16px);-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px);-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px)}.ion-float-left{float:left!important}.ion-float-right{float:right!important}.ion-float-start{float:left!important}:host-context([dir=rtl]) .ion-float-start{float:right!important}[dir=rtl] .ion-float-start{float:right!important}@supports selector(:dir(rtl)){.ion-float-start:dir(rtl){float:right!important}.ion-float-end:dir(rtl){float:left!important}}.ion-float-end{float:right!important}:host-context([dir=rtl]) .ion-float-end{float:left!important}[dir=rtl] .ion-float-end{float:left!important}.ion-text-center{text-align:center!important}.ion-text-justify{text-align:justify!important}.ion-text-start{text-align:start!important}.ion-text-end{text-align:end!important}.ion-text-left{text-align:left!important}.ion-text-right{text-align:right!important}.ion-text-nowrap{white-space:nowrap!important}.ion-text-wrap{white-space:normal!important}.ion-text-uppercase{text-transform:uppercase!important}.ion-text-lowercase{text-transform:lowercase!important}.ion-text-capitalize{text-transform:capitalize!important}.ion-align-content-start{align-content:flex-start!important}.ion-align-content-end{align-content:flex-end!important}.ion-align-content-center{align-content:center!important}.ion-align-content-between{align-content:space-between!important}.ion-align-content-around{align-content:space-around!important}.ion-align-content-stretch{align-content:stretch!important}.ion-align-items-start{align-items:start!important}.ion-align-items-end{align-items:end!important}.ion-align-items-center{align-items:center!important}.ion-align-items-stretch{align-items:stretch!important}.ion-align-items-baseline{align-items:baseline!important}.ion-align-self-start{align-self:start!important}.ion-align-self-end{align-self:end!important}.ion-align-self-center{align-self:center!important}.ion-align-self-stretch{align-self:stretch!important}.ion-align-self-baseline{align-self:baseline!important}.ion-align-self-auto{align-self:auto!important}@media(min-width:576px){.ion-float-sm-left{float:left!important}.ion-float-sm-right{float:right!important}.ion-float-sm-start{float:left!important}:host-context([dir=rtl]) .ion-float-sm-start{float:right!important}[dir=rtl] .ion-float-sm-start{float:right!important}@supports selector(:dir(rtl)){.ion-float-sm-start:dir(rtl){float:right!important}.ion-float-sm-end:dir(rtl){float:left!important}}.ion-float-sm-end{float:right!important}:host-context([dir=rtl]) .ion-float-sm-end{float:left!important}[dir=rtl] .ion-float-sm-end{float:left!important}.ion-text-sm-center{text-align:center!important}.ion-text-sm-justify{text-align:justify!important}.ion-text-sm-start{text-align:start!important}.ion-text-sm-end{text-align:end!important}.ion-text-sm-left{text-align:left!important}.ion-text-sm-right{text-align:right!important}.ion-text-sm-nowrap{white-space:nowrap!important}.ion-text-sm-wrap{white-space:normal!important}.ion-text-sm-uppercase{text-transform:uppercase!important}.ion-text-sm-lowercase{text-transform:lowercase!important}.ion-text-sm-capitalize{text-transform:capitalize!important}.ion-align-content-sm-start{align-content:flex-start!important}.ion-align-content-sm-end{align-content:flex-end!important}.ion-align-content-sm-center{align-content:center!important}.ion-align-content-sm-between{align-content:space-between!important}.ion-align-content-sm-around{align-content:space-around!important}.ion-align-content-sm-stretch{align-content:stretch!important}.ion-align-items-sm-start{align-items:start!important}.ion-align-items-sm-end{align-items:end!important}.ion-align-items-sm-center{align-items:center!important}.ion-align-items-sm-stretch{align-items:stretch!important}.ion-align-items-sm-baseline{align-items:baseline!important}.ion-align-self-sm-start{align-self:start!important}.ion-align-self-sm-end{align-self:end!important}.ion-align-self-sm-center{align-self:center!important}.ion-align-self-sm-stretch{align-self:stretch!important}.ion-align-self-sm-baseline{align-self:baseline!important}.ion-align-self-sm-auto{align-self:auto!important}}@media(min-width:768px){.ion-float-md-left{float:left!important}.ion-float-md-right{float:right!important}.ion-float-md-start{float:left!important}:host-context([dir=rtl]) .ion-float-md-start{float:right!important}[dir=rtl] .ion-float-md-start{float:right!important}@supports selector(:dir(rtl)){.ion-float-md-start:dir(rtl){float:right!important}.ion-float-md-end:dir(rtl){float:left!important}}.ion-float-md-end{float:right!important}:host-context([dir=rtl]) .ion-float-md-end{float:left!important}[dir=rtl] .ion-float-md-end{float:left!important}.ion-text-md-center{text-align:center!important}.ion-text-md-justify{text-align:justify!important}.ion-text-md-start{text-align:start!important}.ion-text-md-end{text-align:end!important}.ion-text-md-left{text-align:left!important}.ion-text-md-right{text-align:right!important}.ion-text-md-nowrap{white-space:nowrap!important}.ion-text-md-wrap{white-space:normal!important}.ion-text-md-uppercase{text-transform:uppercase!important}.ion-text-md-lowercase{text-transform:lowercase!important}.ion-text-md-capitalize{text-transform:capitalize!important}.ion-align-content-md-start{align-content:flex-start!important}.ion-align-content-md-end{align-content:flex-end!important}.ion-align-content-md-center{align-content:center!important}.ion-align-content-md-between{align-content:space-between!important}.ion-align-content-md-around{align-content:space-around!important}.ion-align-content-md-stretch{align-content:stretch!important}.ion-align-items-md-start{align-items:start!important}.ion-align-items-md-end{align-items:end!important}.ion-align-items-md-center{align-items:center!important}.ion-align-items-md-stretch{align-items:stretch!important}.ion-align-items-md-baseline{align-items:baseline!important}.ion-align-self-md-start{align-self:start!important}.ion-align-self-md-end{align-self:end!important}.ion-align-self-md-center{align-self:center!important}.ion-align-self-md-stretch{align-self:stretch!important}.ion-align-self-md-baseline{align-self:baseline!important}.ion-align-self-md-auto{align-self:auto!important}}@media(min-width:992px){.ion-float-lg-left{float:left!important}.ion-float-lg-right{float:right!important}.ion-float-lg-start{float:left!important}:host-context([dir=rtl]) .ion-float-lg-start{float:right!important}[dir=rtl] .ion-float-lg-start{float:right!important}@supports selector(:dir(rtl)){.ion-float-lg-start:dir(rtl){float:right!important}.ion-float-lg-end:dir(rtl){float:left!important}}.ion-float-lg-end{float:right!important}:host-context([dir=rtl]) .ion-float-lg-end{float:left!important}[dir=rtl] .ion-float-lg-end{float:left!important}.ion-text-lg-center{text-align:center!important}.ion-text-lg-justify{text-align:justify!important}.ion-text-lg-start{text-align:start!important}.ion-text-lg-end{text-align:end!important}.ion-text-lg-left{text-align:left!important}.ion-text-lg-right{text-align:right!important}.ion-text-lg-nowrap{white-space:nowrap!important}.ion-text-lg-wrap{white-space:normal!important}.ion-text-lg-uppercase{text-transform:uppercase!important}.ion-text-lg-lowercase{text-transform:lowercase!important}.ion-text-lg-capitalize{text-transform:capitalize!important}.ion-align-content-lg-start{align-content:flex-start!important}.ion-align-content-lg-end{align-content:flex-end!important}.ion-align-content-lg-center{align-content:center!important}.ion-align-content-lg-between{align-content:space-between!important}.ion-align-content-lg-around{align-content:space-around!important}.ion-align-content-lg-stretch{align-content:stretch!important}.ion-align-items-lg-start{align-items:start!important}.ion-align-items-lg-end{align-items:end!important}.ion-align-items-lg-center{align-items:center!important}.ion-align-items-lg-stretch{align-items:stretch!important}.ion-align-items-lg-baseline{align-items:baseline!important}.ion-align-self-lg-start{align-self:start!important}.ion-align-self-lg-end{align-self:end!important}.ion-align-self-lg-center{align-self:center!important}.ion-align-self-lg-stretch{align-self:stretch!important}.ion-align-self-lg-baseline{align-self:baseline!important}.ion-align-self-lg-auto{align-self:auto!important}}@media(min-width:1200px){.ion-float-xl-left{float:left!important}.ion-float-xl-right{float:right!important}.ion-float-xl-start{float:left!important}:host-context([dir=rtl]) .ion-float-xl-start{float:right!important}[dir=rtl] .ion-float-xl-start{float:right!important}@supports selector(:dir(rtl)){.ion-float-xl-start:dir(rtl){float:right!important}.ion-float-xl-end:dir(rtl){float:left!important}}.ion-float-xl-end{float:right!important}:host-context([dir=rtl]) .ion-float-xl-end{float:left!important}[dir=rtl] .ion-float-xl-end{float:left!important}.ion-text-xl-center{text-align:center!important}.ion-text-xl-justify{text-align:justify!important}.ion-text-xl-start{text-align:start!important}.ion-text-xl-end{text-align:end!important}.ion-text-xl-left{text-align:left!important}.ion-text-xl-right{text-align:right!important}.ion-text-xl-nowrap{white-space:nowrap!important}.ion-text-xl-wrap{white-space:normal!important}.ion-text-xl-uppercase{text-transform:uppercase!important}.ion-text-xl-lowercase{text-transform:lowercase!important}.ion-text-xl-capitalize{text-transform:capitalize!important}.ion-align-content-xl-start{align-content:flex-start!important}.ion-align-content-xl-end{align-content:flex-end!important}.ion-align-content-xl-center{align-content:center!important}.ion-align-content-xl-between{align-content:space-between!important}.ion-align-content-xl-around{align-content:space-around!important}.ion-align-content-xl-stretch{align-content:stretch!important}.ion-align-items-xl-start{align-items:start!important}.ion-align-items-xl-end{align-items:end!important}.ion-align-items-xl-center{align-items:center!important}.ion-align-items-xl-stretch{align-items:stretch!important}.ion-align-items-xl-baseline{align-items:baseline!important}.ion-align-self-xl-start{align-self:start!important}.ion-align-self-xl-end{align-self:end!important}.ion-align-self-xl-center{align-self:center!important}.ion-align-self-xl-stretch{align-self:stretch!important}.ion-align-self-xl-baseline{align-self:baseline!important}.ion-align-self-xl-auto{align-self:auto!important}}.ion-justify-content-start{justify-content:flex-start!important}.ion-justify-content-end{justify-content:flex-end!important}.ion-justify-content-center{justify-content:center!important}.ion-justify-content-between{justify-content:space-between!important}.ion-justify-content-around{justify-content:space-around!important}.ion-justify-content-evenly{justify-content:space-evenly!important}@media(min-width:576px){.ion-justify-content-sm-start{justify-content:flex-start!important}.ion-justify-content-sm-end{justify-content:flex-end!important}.ion-justify-content-sm-center{justify-content:center!important}.ion-justify-content-sm-between{justify-content:space-between!important}.ion-justify-content-sm-around{justify-content:space-around!important}.ion-justify-content-sm-evenly{justify-content:space-evenly!important}}@media(min-width:768px){.ion-justify-content-md-start{justify-content:flex-start!important}.ion-justify-content-md-end{justify-content:flex-end!important}.ion-justify-content-md-center{justify-content:center!important}.ion-justify-content-md-between{justify-content:space-between!important}.ion-justify-content-md-around{justify-content:space-around!important}.ion-justify-content-md-evenly{justify-content:space-evenly!important}}@media(min-width:992px){.ion-justify-content-lg-start{justify-content:flex-start!important}.ion-justify-content-lg-end{justify-content:flex-end!important}.ion-justify-content-lg-center{justify-content:center!important}.ion-justify-content-lg-between{justify-content:space-between!important}.ion-justify-content-lg-around{justify-content:space-around!important}.ion-justify-content-lg-evenly{justify-content:space-evenly!important}}@media(min-width:1200px){.ion-justify-content-xl-start{justify-content:flex-start!important}.ion-justify-content-xl-end{justify-content:flex-end!important}.ion-justify-content-xl-center{justify-content:center!important}.ion-justify-content-xl-between{justify-content:space-between!important}.ion-justify-content-xl-around{justify-content:space-around!important}.ion-justify-content-xl-evenly{justify-content:space-evenly!important}}.ion-flex-row{flex-direction:row!important}.ion-flex-row-reverse{flex-direction:row-reverse!important}.ion-flex-column{flex-direction:column!important}.ion-flex-column-reverse{flex-direction:column-reverse!important}@media(min-width:576px){.ion-flex-sm-row{flex-direction:row!important}.ion-flex-sm-row-reverse{flex-direction:row-reverse!important}.ion-flex-sm-column{flex-direction:column!important}.ion-flex-sm-column-reverse{flex-direction:column-reverse!important}}@media(min-width:768px){.ion-flex-md-row{flex-direction:row!important}.ion-flex-md-row-reverse{flex-direction:row-reverse!important}.ion-flex-md-column{flex-direction:column!important}.ion-flex-md-column-reverse{flex-direction:column-reverse!important}}@media(min-width:992px){.ion-flex-lg-row{flex-direction:row!important}.ion-flex-lg-row-reverse{flex-direction:row-reverse!important}.ion-flex-lg-column{flex-direction:column!important}.ion-flex-lg-column-reverse{flex-direction:column-reverse!important}}@media(min-width:1200px){.ion-flex-xl-row{flex-direction:row!important}.ion-flex-xl-row-reverse{flex-direction:row-reverse!important}.ion-flex-xl-column{flex-direction:column!important}.ion-flex-xl-column-reverse{flex-direction:column-reverse!important}}.ion-wrap{flex-wrap:wrap!important}.ion-nowrap{flex-wrap:nowrap!important}.ion-wrap-reverse{flex-wrap:wrap-reverse!important}.ion-flex-wrap{flex-wrap:wrap!important}.ion-flex-nowrap{flex-wrap:nowrap!important}.ion-flex-wrap-reverse{flex-wrap:wrap-reverse!important}@media(min-width:576px){.ion-flex-sm-wrap{flex-wrap:wrap!important}.ion-flex-sm-nowrap{flex-wrap:nowrap!important}.ion-flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}}@media(min-width:768px){.ion-flex-md-wrap{flex-wrap:wrap!important}.ion-flex-md-nowrap{flex-wrap:nowrap!important}.ion-flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}}@media(min-width:992px){.ion-flex-lg-wrap{flex-wrap:wrap!important}.ion-flex-lg-nowrap{flex-wrap:nowrap!important}.ion-flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}}@media(min-width:1200px){.ion-flex-xl-wrap{flex-wrap:wrap!important}.ion-flex-xl-nowrap{flex-wrap:nowrap!important}.ion-flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}}.ion-flex-1{flex:1!important}.ion-flex-auto{flex:auto!important}.ion-flex-initial{flex:initial!important}.ion-flex-none{flex:none!important}@media(min-width:576px){.ion-flex-sm-1{flex:1!important}.ion-flex-sm-auto{flex:auto!important}.ion-flex-sm-initial{flex:initial!important}.ion-flex-sm-none{flex:none!important}}@media(min-width:768px){.ion-flex-md-1{flex:1!important}.ion-flex-md-auto{flex:auto!important}.ion-flex-md-initial{flex:initial!important}.ion-flex-md-none{flex:none!important}}@media(min-width:992px){.ion-flex-lg-1{flex:1!important}.ion-flex-lg-auto{flex:auto!important}.ion-flex-lg-initial{flex:initial!important}.ion-flex-lg-none{flex:none!important}}@media(min-width:1200px){.ion-flex-xl-1{flex:1!important}.ion-flex-xl-auto{flex:auto!important}.ion-flex-xl-initial{flex:initial!important}.ion-flex-xl-none{flex:none!important}}.ion-flex-grow-0{flex-grow:0!important}.ion-flex-grow-1{flex-grow:1!important}.ion-flex-shrink-0{flex-shrink:0!important}.ion-flex-shrink-1{flex-shrink:1!important}.ion-order-first{order:-1!important}.ion-order-0{order:0!important}.ion-order-1{order:1!important}.ion-order-2{order:2!important}.ion-order-3{order:3!important}.ion-order-4{order:4!important}.ion-order-5{order:5!important}.ion-order-6{order:6!important}.ion-order-7{order:7!important}.ion-order-8{order:8!important}.ion-order-9{order:9!important}.ion-order-10{order:10!important}.ion-order-11{order:11!important}.ion-order-12{order:12!important}.ion-order-last{order:13!important}.ion-hide,.ion-hide-down,.ion-hide-up{display:none!important}@media(max-width:575.98px){.ion-hide-sm-down{display:none!important}}@media(max-width:767.98px){.ion-hide-md-down{display:none!important}}@media(max-width:991.98px){.ion-hide-lg-down{display:none!important}}@media(max-width:1199.98px){.ion-hide-xl-down{display:none!important}}.ion-display-none{display:none!important}@media(min-width:576px){.ion-flex-sm-grow-0{flex-grow:0!important}.ion-flex-sm-grow-1{flex-grow:1!important}.ion-flex-sm-shrink-0{flex-shrink:0!important}.ion-flex-sm-shrink-1{flex-shrink:1!important}.ion-order-sm-first{order:-1!important}.ion-order-sm-0{order:0!important}.ion-order-sm-1{order:1!important}.ion-order-sm-2{order:2!important}.ion-order-sm-3{order:3!important}.ion-order-sm-4{order:4!important}.ion-order-sm-5{order:5!important}.ion-order-sm-6{order:6!important}.ion-order-sm-7{order:7!important}.ion-order-sm-8{order:8!important}.ion-order-sm-9{order:9!important}.ion-order-sm-10{order:10!important}.ion-order-sm-11{order:11!important}.ion-order-sm-12{order:12!important}.ion-order-sm-last{order:13!important}.ion-display-sm-none,.ion-hide-sm-up{display:none!important}}@media(min-width:768px){.ion-flex-md-grow-0{flex-grow:0!important}.ion-flex-md-grow-1{flex-grow:1!important}.ion-flex-md-shrink-0{flex-shrink:0!important}.ion-flex-md-shrink-1{flex-shrink:1!important}.ion-order-md-first{order:-1!important}.ion-order-md-0{order:0!important}.ion-order-md-1{order:1!important}.ion-order-md-2{order:2!important}.ion-order-md-3{order:3!important}.ion-order-md-4{order:4!important}.ion-order-md-5{order:5!important}.ion-order-md-6{order:6!important}.ion-order-md-7{order:7!important}.ion-order-md-8{order:8!important}.ion-order-md-9{order:9!important}.ion-order-md-10{order:10!important}.ion-order-md-11{order:11!important}.ion-order-md-12{order:12!important}.ion-order-md-last{order:13!important}.ion-display-md-none,.ion-hide-md-up{display:none!important}}@media(min-width:992px){.ion-flex-lg-grow-0{flex-grow:0!important}.ion-flex-lg-grow-1{flex-grow:1!important}.ion-flex-lg-shrink-0{flex-shrink:0!important}.ion-flex-lg-shrink-1{flex-shrink:1!important}.ion-order-lg-first{order:-1!important}.ion-order-lg-0{order:0!important}.ion-order-lg-1{order:1!important}.ion-order-lg-2{order:2!important}.ion-order-lg-3{order:3!important}.ion-order-lg-4{order:4!important}.ion-order-lg-5{order:5!important}.ion-order-lg-6{order:6!important}.ion-order-lg-7{order:7!important}.ion-order-lg-8{order:8!important}.ion-order-lg-9{order:9!important}.ion-order-lg-10{order:10!important}.ion-order-lg-11{order:11!important}.ion-order-lg-12{order:12!important}.ion-order-lg-last{order:13!important}.ion-display-lg-none,.ion-hide-lg-up{display:none!important}}@media(min-width:1200px){.ion-flex-xl-grow-0{flex-grow:0!important}.ion-flex-xl-grow-1{flex-grow:1!important}.ion-flex-xl-shrink-0{flex-shrink:0!important}.ion-flex-xl-shrink-1{flex-shrink:1!important}.ion-order-xl-first{order:-1!important}.ion-order-xl-0{order:0!important}.ion-order-xl-1{order:1!important}.ion-order-xl-2{order:2!important}.ion-order-xl-3{order:3!important}.ion-order-xl-4{order:4!important}.ion-order-xl-5{order:5!important}.ion-order-xl-6{order:6!important}.ion-order-xl-7{order:7!important}.ion-order-xl-8{order:8!important}.ion-order-xl-9{order:9!important}.ion-order-xl-10{order:10!important}.ion-order-xl-11{order:11!important}.ion-order-xl-12{order:12!important}.ion-order-xl-last{order:13!important}.ion-display-xl-none,.ion-hide-xl-up{display:none!important}.ion-display-xl-inline{display:inline!important}}.ion-display-inline{display:inline!important}@media(min-width:576px){.ion-display-sm-inline{display:inline!important}}@media(min-width:768px){.ion-display-md-inline{display:inline!important}}@media(min-width:992px){.ion-display-lg-inline{display:inline!important}.ion-display-lg-inline-block{display:inline-block!important}}.ion-display-inline-block{display:inline-block!important}@media(min-width:576px){.ion-display-sm-inline-block{display:inline-block!important}}@media(min-width:768px){.ion-display-md-inline-block{display:inline-block!important}}@media(min-width:1200px){.ion-display-xl-inline-block{display:inline-block!important}.ion-display-xl-block{display:block!important}}.ion-display-block{display:block!important}@media(min-width:576px){.ion-display-sm-block{display:block!important}}@media(min-width:768px){.ion-display-md-block{display:block!important}}@media(min-width:992px){.ion-display-lg-block{display:block!important}.ion-display-lg-flex{display:flex!important}}.ion-display-flex{display:flex!important}@media(min-width:576px){.ion-display-sm-flex{display:flex!important}}@media(min-width:768px){.ion-display-md-flex{display:flex!important}}@media(min-width:1200px){.ion-display-xl-flex{display:flex!important}.ion-display-xl-inline-flex{display:inline-flex!important}}.ion-display-inline-flex{display:inline-flex!important}@media(min-width:576px){.ion-display-sm-inline-flex{display:inline-flex!important}}@media(min-width:768px){.ion-display-md-inline-flex{display:inline-flex!important}}@media(min-width:992px){.ion-display-lg-inline-flex{display:inline-flex!important}.ion-display-lg-grid{display:grid!important}}.ion-display-grid{display:grid!important}@media(min-width:576px){.ion-display-sm-grid{display:grid!important}}@media(min-width:768px){.ion-display-md-grid{display:grid!important}}@media(min-width:1200px){.ion-display-xl-grid{display:grid!important}.ion-display-xl-inline-grid{display:inline-grid!important}}.ion-display-inline-grid{display:inline-grid!important}@media(min-width:576px){.ion-display-sm-inline-grid{display:inline-grid!important}}@media(min-width:768px){.ion-display-md-inline-grid{display:inline-grid!important}}@media(min-width:992px){.ion-display-lg-inline-grid{display:inline-grid!important}.ion-display-lg-table{display:table!important}}.ion-display-table{display:table!important}@media(min-width:576px){.ion-display-sm-table{display:table!important}}@media(min-width:768px){.ion-display-md-table{display:table!important}}@media(min-width:1200px){.ion-display-xl-table{display:table!important}.ion-display-xl-table-cell{display:table-cell!important}}.ion-display-table-cell{display:table-cell!important}@media(min-width:576px){.ion-display-sm-table-cell{display:table-cell!important}}@media(min-width:768px){.ion-display-md-table-cell{display:table-cell!important}}@media(min-width:992px){.ion-display-lg-table-cell{display:table-cell!important}.ion-display-lg-table-row{display:table-row!important}}.ion-display-table-row{display:table-row!important}@media(min-width:576px){.ion-display-sm-table-row{display:table-row!important}}@media(min-width:768px){.ion-display-md-table-row{display:table-row!important}}@media(min-width:1200px){.ion-display-xl-table-row{display:table-row!important}}
:root{--ion-color-primary: #4d8dff;--ion-color-primary-rgb: 77, 141, 255;--ion-color-primary-contrast: #000;--ion-color-primary-contrast-rgb: 0, 0, 0;--ion-color-primary-shade: #447ce0;--ion-color-primary-tint: #5f98ff;--ion-color-secondary: #46b1ff;--ion-color-secondary-rgb: 70, 177, 255;--ion-color-secondary-contrast: #000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #3e9ce0;--ion-color-secondary-tint: #59b9ff;--ion-color-tertiary: #8482fb;--ion-color-tertiary-rgb: 132, 130, 251;--ion-color-tertiary-contrast: #000;--ion-color-tertiary-contrast-rgb: 0, 0, 0;--ion-color-tertiary-shade: #7472dd;--ion-color-tertiary-tint: #908ffb;--ion-color-success: #2dd55b;--ion-color-success-rgb: 45, 213, 91;--ion-color-success-contrast: #000;--ion-color-success-contrast-rgb: 0, 0, 0;--ion-color-success-shade: #28bb50;--ion-color-success-tint: #42d96b;--ion-color-warning: #ffce31;--ion-color-warning-rgb: 255, 206, 49;--ion-color-warning-contrast: #000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0b52b;--ion-color-warning-tint: #ffd346;--ion-color-danger: #f24c58;--ion-color-danger-rgb: 242, 76, 88;--ion-color-danger-contrast: #000;--ion-color-danger-contrast-rgb: 0, 0, 0;--ion-color-danger-shade: #d5434d;--ion-color-danger-tint: #f35e69;--ion-color-light: #222428;--ion-color-light-rgb: 34, 36, 40;--ion-color-light-contrast: #fff;--ion-color-light-contrast-rgb: 255, 255, 255;--ion-color-light-shade: #1e2023;--ion-color-light-tint: #383a3e;--ion-color-medium: #989aa2;--ion-color-medium-rgb: 152, 154, 162;--ion-color-medium-contrast: #000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #86888f;--ion-color-medium-tint: #a2a4ab;--ion-color-dark: #f4f5f8;--ion-color-dark-rgb: 244, 245, 248;--ion-color-dark-contrast: #000;--ion-color-dark-contrast-rgb: 0, 0, 0;--ion-color-dark-shade: #d7d8da;--ion-color-dark-tint: #f5f6f9}:root.ios{--ion-background-color: #000000;--ion-background-color-rgb: 0, 0, 0;--ion-text-color: #ffffff;--ion-text-color-rgb: 255, 255, 255;--ion-background-color-step-50: #0d0d0d;--ion-background-color-step-100: #1a1a1a;--ion-background-color-step-150: #262626;--ion-background-color-step-200: #333333;--ion-background-color-step-250: #404040;--ion-background-color-step-300: #4d4d4d;--ion-background-color-step-350: #595959;--ion-background-color-step-400: #666666;--ion-background-color-step-450: #737373;--ion-background-color-step-500: #808080;--ion-background-color-step-550: #8c8c8c;--ion-background-color-step-600: #999999;--ion-background-color-step-650: #a6a6a6;--ion-background-color-step-700: #b3b3b3;--ion-background-color-step-750: #bfbfbf;--ion-background-color-step-800: #cccccc;--ion-background-color-step-850: #d9d9d9;--ion-background-color-step-900: #e6e6e6;--ion-background-color-step-950: #f2f2f2;--ion-text-color-step-50: #f2f2f2;--ion-text-color-step-100: #e6e6e6;--ion-text-color-step-150: #d9d9d9;--ion-text-color-step-200: #cccccc;--ion-text-color-step-250: #bfbfbf;--ion-text-color-step-300: #b3b3b3;--ion-text-color-step-350: #a6a6a6;--ion-text-color-step-400: #999999;--ion-text-color-step-450: #8c8c8c;--ion-text-color-step-500: #808080;--ion-text-color-step-550: #737373;--ion-text-color-step-600: #666666;--ion-text-color-step-650: #595959;--ion-text-color-step-700: #4d4d4d;--ion-text-color-step-750: #404040;--ion-text-color-step-800: #333333;--ion-text-color-step-850: #262626;--ion-text-color-step-900: #1a1a1a;--ion-text-color-step-950: #0d0d0d;--ion-item-background: #000000;--ion-card-background: #1c1c1d}:root.ios ion-modal{--ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));--ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));--ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250))}:root.md{--ion-background-color: #121212;--ion-background-color-rgb: 18, 18, 18;--ion-text-color: #ffffff;--ion-text-color-rgb: 255, 255, 255;--ion-background-color-step-50: #1e1e1e;--ion-background-color-step-100: #2a2a2a;--ion-background-color-step-150: #363636;--ion-background-color-step-200: #414141;--ion-background-color-step-250: #4d4d4d;--ion-background-color-step-300: #595959;--ion-background-color-step-350: #656565;--ion-background-color-step-400: #717171;--ion-background-color-step-450: #7d7d7d;--ion-background-color-step-500: #898989;--ion-background-color-step-550: #949494;--ion-background-color-step-600: #a0a0a0;--ion-background-color-step-650: #acacac;--ion-background-color-step-700: #b8b8b8;--ion-background-color-step-750: #c4c4c4;--ion-background-color-step-800: #d0d0d0;--ion-background-color-step-850: #dbdbdb;--ion-background-color-step-900: #e7e7e7;--ion-background-color-step-950: #f3f3f3;--ion-text-color-step-50: #f3f3f3;--ion-text-color-step-100: #e7e7e7;--ion-text-color-step-150: #dbdbdb;--ion-text-color-step-200: #d0d0d0;--ion-text-color-step-250: #c4c4c4;--ion-text-color-step-300: #b8b8b8;--ion-text-color-step-350: #acacac;--ion-text-color-step-400: #a0a0a0;--ion-text-color-step-450: #949494;--ion-text-color-step-500: #898989;--ion-text-color-step-550: #7d7d7d;--ion-text-color-step-600: #717171;--ion-text-color-step-650: #656565;--ion-text-color-step-700: #595959;--ion-text-color-step-750: #4d4d4d;--ion-text-color-step-800: #414141;--ion-text-color-step-850: #363636;--ion-text-color-step-900: #2a2a2a;--ion-text-color-step-950: #1e1e1e;--ion-item-background: #1e1e1e;--ion-toolbar-background: #1f1f1f;--ion-tab-bar-background: #1f1f1f;--ion-card-background: #1e1e1e}

@font-face {
  font-family: 'MapleStory';
  src: url("assets/fonts/maplestory/maplestory-light.ttf");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'MapleStory';
  src: url("assets/fonts/maplestory/maplestory-bold.ttf");
  font-weight: 700;
  font-display: swap;
}

html,
body {
  background-color: #000;
}

.main-view {
  max-width: 500px;
  margin: 0 auto;
}

ion-modal {
  max-width: 500px;
  margin: auto;
}

* {
  font-family: 'MapleStory';
}

sl-dialog::part(panel) {
  max-height: 80% !important;
}

sl-button::part(label) {
  font-family: 'MapleStory';
}

.blocked-dialog::part(panel) {
  max-width: 420px;
}

.settings__warning {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings__warning-detail {
  font-size: 0.75rem;
  color: #888;
}

.settings__confirm-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;

  background: transparent;
  backdrop-filter: none;
}

.tutorial-box {
  width: min(560px, 96vw);
  border-radius: 16px;
  background: rgba(15, 17, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
  color: #f9fafb;

  /* ✅ 말풍선 터치 유도 */
  cursor: pointer;
  user-select: none;
}

.tutorial-box__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.tutorial-box__portrait {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.tutorial-box__speaker {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fde68a;
}

.tutorial-box__text {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-bottom: 8px;

  /* 선택: 터치 가능 힌트 */
  cursor: pointer;
  user-select: none;
}

.tutorial-box__hint {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 10px;
}

.tutorial-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  /* ✅ 버튼은 클릭(터치) 우선 */
  cursor: default;
}
.gold-not-enough-dialog::part(panel) {
  max-width: 320px;
}

.gold-not-enough-body {
  padding-top: 4px;
  padding-bottom: 8px;
}

.gold-not-enough-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.gold-not-enough-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.gem-not-enough-dialog::part(panel) {
  max-width: 320px;
}

.gem-not-enough-body {
  padding-top: 4px;
  padding-bottom: 8px;
}

.gem-not-enough-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.gem-not-enough-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.gem-store-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  @media (max-width: 485px) {
    grid-template-columns: repeat(2, 1fr);
  }

  sl-card {
    text-align: center;

    img {
      margin-top: -10px;
    }

    sl-button {
      margin-top: 12px;
      width: 100%;
    }
  }
}

.gem-store__top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.pcm__dialog::part(panel) {
  border-radius: 1rem;
  overflow: hidden;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  --sl-panel-border-width: 0;
}

.pcm__content {
  position: relative;
  text-align: center;
  padding: 24px 16px 8px;
  color: var(--sl-color-neutral-0, #fff);
}

/* ★ 가독성 강화 */
.pcm__title {
  margin: 8px 0 4px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  color: #ffffff;
}

.pcm__subtitle {
  margin: 0 0 12px;
  font-weight: 700;
  color: #e6e6e6;
}

.pcm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.pcm__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.pcm__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  background: #22c55e;
  color: #08130b;
}

.pcm__badge--muted {
  background: #e5e7eb;
  color: #111827;
}

.pcm__meta {
  margin-top: 14px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.pcm__row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 8px;
  align-items: center;
}

.pcm__row-label {
  color: #b7b7b7;
  font-size: 12px;
  font-weight: 700;
}

.pcm__row-value {
  font-weight: 800;
  color: #f5f5f5;
  word-break: break-all;
}

/* Checkmark */
.pcm__check {
  margin: 4px auto 6px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--sl-color-success-600);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(16, 185, 129, .35);
  animation: pcm-pop .34s ease-out both;
}

.pcm__check-mark {
  width: 28px;
  height: 14px;
  border-left: 4px solid white;
  border-bottom: 4px solid white;
  transform: rotate(-45deg);
  margin-top: -2px;
  animation: pcm-draw .45s .18s ease-out both;
}

@keyframes pcm-pop {
  from {
    transform: scale(.7);
    opacity: .0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes pcm-draw {
  from {
    clip-path: inset(0 100% 0 0)
  }

  to {
    clip-path: inset(0)
  }
}
.restore__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.restore__headline {
  font-weight: 800;
  font-size: 1.05rem;
}

.restore__sub {
  opacity: .75;
}

.restore__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 10px;
  padding: 10px;
}

.restore__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-color-neutral-200);
}

.restore__pid {
  font-weight: 700;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restore__meta {
  font-size: .85rem;
  opacity: .75;
}

.restore__empty {
  opacity: .75;
  padding: 6px 2px;
}

.restore__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.gpcm__dialog::part(panel) {
  border-radius: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at top, #1f1a11 0%, #0d0b08 60%, #060606 100%);
  color: #fff;
  border: 1px solid rgba(255, 223, 128, .35);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
  --sl-panel-border-width: 0;
}

.gpcm__content {
  position: relative;
  text-align: center;
  padding: 24px 16px 12px;
  color: #fff;
}

.gpcm__title {
  margin: 10px 0 4px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
  color: #fff2d4;
  letter-spacing: -.01em;
}

.gpcm__subtitle {
  margin: 0 0 12px;
  font-weight: 700;
  color: #f5e2b8;
}

.gpcm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.gpcm__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.gpcm__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffe082 0%, #ffc107 34%, #ff9800 100%);
  color: #3e2f00;
  box-shadow: 0 4px 16px rgba(255, 214, 96, .45);
  border: 1px solid rgba(255, 235, 175, .7);
}

.gpcm__hint {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 247, 229, .6);
}

/* 상단 아이콘 (골드 느낌) */
.gpcm__icon {
  margin: 0 auto 6px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffe082 0%, #d79d3e 60%, #b8741a 100%);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(255, 206, 115, .45);
  animation: gpcm-pop .34s ease-out both;
}

.gpcm__icon-mark {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #fff5db 0%, #fff 80%);
  border-radius: 6px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
}

/* 간단한 팝 애니메이션 */
@keyframes gpcm-pop {
  from {
    transform: scale(.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
.gold-store-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  @media (max-width: 485px) {
    grid-template-columns: repeat(2, 1fr);
  }

  sl-card {
    text-align: center;

    img {
      margin-top: -10px;
    }

    sl-button {
      margin-top: 12px;
      width: 100%;
    }

    .title {
      line-height: 1.2;
    }
  }
}
.hero-detail__dialog::part(panel) {
  border-radius: 16px;
  max-width: 460px;
  width: min(460px, 100vw - 24px);
}

.hero-detail__body {
  position: relative;
  /* 파티클용 */
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.hero-detail__header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hero-detail__thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.hero-detail__titlebox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hero-detail__name {
  font-size: 1.02rem;
  font-weight: 700;
}

.hero-detail__meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  align-items: center;
  opacity: 0.8;
}

/* 기본 stats (일반 모드) */
.hero-detail__stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 12px;
  padding: 10px 12px;
}

/* 카탈로그 모드에서만 grid */
.hero-detail__stats.hero-detail__stats--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 12px 14px;
}

.hero-detail__line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero-detail__line span {
  opacity: 0.8;
}

.hero-detail__line strong {
  font-weight: 700;
}

/* 일반 모드 전용 */
.hero-detail__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-detail__stat-label {
  font-size: 0.78rem;
  opacity: 0.7;
}

.hero-detail__stat-value {
  font-weight: 600;
  font-size: 0.9rem;
}

.hero-detail__hpbar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.hero-detail__hpbar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff5a52 0%, #ffba8a 100%);
}

.hero-detail__substats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.73rem;
  opacity: 0.8;
}

.hero-detail__desc {
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.9;
}

.hero-detail__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-detail__danger {
  --sl-color-primary: var(--sl-color-danger-500);
}

.hero-detail__upgrade-button::part(label) {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hero-detail__upgrade-cost {
  font-size: 0.7rem;
  color: #ffd700;
}

/* ========= 강화 이펙트 공통 ========= */
.hero-item--upgrade-burst {
  animation: hero-upgrade-burst 500ms ease-out;
}

.hero-stat-bump {
  animation: hero-stat-bump 350ms ease-out;
}

@keyframes hero-upgrade-burst {
  0% {
    box-shadow: 0 0 0 rgba(255, 233, 175, 0);
  }

  20% {
    box-shadow: 0 0 18px rgba(255, 233, 175, 0.7);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 233, 175, 0);
  }
}

@keyframes hero-stat-bump {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* 파티클 */
@keyframes hero-upgrade-particle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.15);
  }
}
.select-dialog::part(panel) {
  border-radius: 18px;
  max-width: 480px;
  width: min(480px, 100vw - 24px);
  max-height: min(75vh, 600px);
  background: #1f2127;
  border: 1px solid rgba(255, 255, 255, .03);
}

.select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 0 0;
}

.select-row {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, .01);
  border: 1px solid rgba(255, 255, 255, .015);
  border-radius: 16px;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
}

.select-row:hover {
  background: rgba(255, 255, 255, .03);
}

.select-thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .12);
  object-fit: contain;
}

.select-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.select-title-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.select-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.select-rarity {
  font-size: 0.7rem;
  font-weight: 600;
}

.select-level {
  font-size: 0.7rem;
  opacity: 0.65;
}

.select-sub,
.select-subtle {
  font-size: 0.74rem;
  opacity: 0.7;
}

.select-footer {
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.select-attack {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* 제목 줄은 이름+등급만, 간격 약간 */
.select-title-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* 능력치 줄: 뱃지들이 자동 줄바꿈되며 정돈 */
.select-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* 공통 뱃지 */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
}

/* 레벨 뱃지: 살짝 톤 강조 */
.stat-badge--level {
  background: rgba(110, 160, 255, .12);
  border-color: rgba(110, 160, 255, .18);
}

/* 보조(레벨당 증가치) 뱃지: 약간 은은하게 */
.stat-badge--sub {
  opacity: .85;
}
.hero-deploy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-deploy > h2 {
  margin: 0;
  font-size: 1.1rem;
}

.hero-deploy__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 빈 슬롯도 카드처럼 보이게 */
.hero-deploy__slot {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.15);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-deploy__slot--empty {
  cursor: pointer;
}

.hero-deploy__slot--empty span {
  font-size: 1.8rem;
  opacity: 0.5;
}

.weapon-detail__dialog::part(panel) {
  border-radius: 16px;
  max-width: 420px;
  width: min(420px, 100vw - 24px);
}

.weapon-detail__body {
  position: relative;
  /* 파티클용 */
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.weapon-detail__header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.weapon-detail__thumb {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.weapon-detail__titlebox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weapon-detail__name {
  font-size: 1rem;
  font-weight: 700;
}

.weapon-detail__meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.8;
  align-items: center;
}

.weapon-detail__stats {
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weapon-detail__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weapon-detail__stat-label {
  font-size: 0.75rem;
  opacity: 0.65;
}

.weapon-detail__stat-value {
  font-weight: 600;
  font-size: 0.92rem;
}

.weapon-detail__substats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.73rem;
  opacity: 0.8;
}

.weapon-detail__desc {
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.9;
}

.weapon-detail__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.weapon-detail__danger {
  --sl-color-primary: var(--sl-color-danger-500);
}

.weapon-detail__upgrade-button::part(label) {
  display: flex;
  gap: 6px;
  align-items: center;
}

.weapon-detail__upgrade-cost {
  font-size: 0.7rem;
  color: #ffd700;
}

/* ========= 강화 이펙트 공통 ========= */
.weapon-item--upgrade-burst {
  animation: hero-upgrade-burst 500ms ease-out;
}

.weapon-stat-bump {
  animation: hero-stat-bump 350ms ease-out;
}

@keyframes hero-upgrade-burst {
  0% {
    box-shadow: 0 0 0 rgba(255, 233, 175, 0);
  }

  20% {
    box-shadow: 0 0 18px rgba(255, 233, 175, 0.7);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 233, 175, 0);
  }
}

@keyframes hero-stat-bump {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* 파티클 (영웅과 공유) */
@keyframes hero-upgrade-particle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.15);
  }
}
/* 카드 전체 */
.hero-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 10px;
  position: relative;
}

/* 썸네일 */
.hero-item__thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* 본문 */
.hero-item__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(2px);
  min-width: 0;
}

/* 제목 줄 */
.hero-item__title-row {
  display: flex;
  align-items: center;
}

.hero-item__title {
  font-weight: 600;
  font-size: 0.9rem;
}

.hero-item__meta {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.85;
}

/* HP 바 */
.hero-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.hero-bar__label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  line-height: 1;
}

.hero-bar__track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.hero-bar__fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff5a52 0%, #ffba8a 100%);
  border-radius: inherit;
  transition: width 140ms ease-out;
}

/* 공격력 줄 */
.hero-attack-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-top: 4px;
}

.hero-attack-row__left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero-attack-row__right,
.hero-item__substats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.7rem;
  opacity: 0.6;
}

/* ===== 버튼 영역 ===== */
.hero-item__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  align-items: flex-end;
}

/* 위쪽: 무기 / 강화 (작게) */
.hero-item__actions-primary {
  display: flex;
  gap: 6px;
  align-self: flex-end;
}

.hero-item__actions-primary sl-button::part(label) {
  font-size: 0.75rem;
  padding: 0 10px;
}

/* 아래쪽: 배치 (가로 꽉, 세로 얇게) */
.hero-item__actions-secondary {
  width: 100%;
  /* 위에서 잡아준 150px 꽉 채움 */
}

.hero-item__actions-secondary sl-button {
  width: 100%;
}

.hero-item__actions-secondary sl-button::part(base) {
  min-height: 0;
  height: 24px;
}

.hero-item__actions-secondary sl-button::part(label) {
  font-size: 0.75rem;
  padding: 0;
  line-height: 22px;
}

/* 배치 모드 */
.hero-item--deployed {
  min-height: 70px;
}

/* X 버튼 */
.hero-item__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.hero-item__remove:hover {
  background: rgba(255, 255, 255, 0.25);
}

.hero-item--catalog {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.hero-item--catalog .hero-item__actions,
.hero-item--catalog .hero-bar,
.hero-item--catalog .hero-attack-row {
  display: none;
}

.hero-item--catalog .hero-item__body {
  gap: 6px;
}

.hero-item__base-row,
.hero-item__perlv-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  align-items: center;
}

.hero-item__base-row {
  opacity: 0.9;
}

.hero-item__perlv-row {
  opacity: 0.7;
  font-size: 0.74rem;
}

.hero-item__base--hp,
.hero-item__base--atk,
.hero-item__perlv {
  display: inline-flex;
  gap: 4px;
}

.hero-item__btn-weapon.hero-item__btn-weapon--icon::part(base) {
  padding-inline: 6px;
  min-width: 28px;
}

.hero-item__btn-weapon.hero-item__btn-weapon--icon::part(label) {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-item__weapon-icon {
  width: 28px;
  height: 28px;
}

.hero-item__upgrade-button::part(base) {
  width: 56px;
}

.hero-item__upgrade-button::part(label) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1em;
  padding: 0 !important;
}

.hero-item__upgrade-button .hero-item__upgrade-cost {
  font-size: 0.7rem;
  color: #ffd700;
}

/* 강화 성공 시 카드 전체 하이라이트 */
.hero-item--upgrade-burst {
  position: relative;
  animation: hero-upgrade-pop 350ms ease-out;
  box-shadow: 0 0 22px rgba(255, 221, 120, 0.4);
}

/* 빛이 한 번 퍼지는 원형 이펙트 */
.hero-item--upgrade-burst::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid rgba(255, 224, 148, 0.9);
  box-shadow: 0 0 12px rgba(255, 224, 148, 0.9);
  opacity: 0;
  animation: hero-upgrade-ring 480ms ease-out;
}

@keyframes hero-upgrade-pop {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.025);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes hero-upgrade-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* 수치가 점프하는 효과 (HP, ATK 값에 쓸 수 있음) */
.hero-stat-bump {
  animation: hero-stat-bump 320ms ease-out;
}

@keyframes hero-stat-bump {
  0% {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 4px rgba(255, 221, 120, 0.7));
  }

  100% {
    transform: translateY(0);
    filter: none;
  }
}

@keyframes hero-upgrade-particle {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translateY(-26px) scale(0.4);
    opacity: 0;
  }
}
.topbar-gem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: linear-gradient(145deg, #3a2f6e, #5a48a8) !important;
  /* 보석같은 그라디언트 */
  box-shadow:
    0 0 4px rgba(120, 90, 255, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  color: #fff;

  >img {
    width: 24px;
    height: 24px;
  }
}
.topbar-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  border-radius: 999px;

  /* 기존보다 어두운 골드 그라디언트 */
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, #6e5519, #b8860b 45%, #d1a430 65%, #8a6b1f 100%) !important;

  border: 2px solid rgba(255, 225, 150, 0.35);

  /* 광택 줄이고 그림자 살짝 더 깊게 */
  box-shadow:
    0 0 4px rgba(180, 130, 30, 0.5),
    inset 0 0 5px rgba(255, 235, 170, 0.15);

  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
  color: #fff;

  >img {
    width: 24px;
    height: 24px;
  }
}
.crm__dialog::part(panel) {
  border-radius: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at top, #171821 0%, #05060a 60%, #020308 100%);
  color: #fff;
  border: 1px solid rgba(96, 165, 250, .45);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
  --sl-panel-border-width: 0;
}

.crm__content {
  position: relative;
  text-align: center;
  padding: 24px 16px 12px;
  color: #fff;
}

/* 상단 아이콘 */
.crm__icon {
  margin: 0 auto 6px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle, #3b82f6 0%, #1d4ed8 60%, #020617 100%);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(59, 130, 246, .45);
  animation: crm-pop .34s ease-out both;
}

.crm__icon-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: radial-gradient(circle, #e0f2fe 0%, #f9fafb 80%);
  position: relative;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .16);
}

/* 안쪽에 간단한 쿠폰 모양 */
.crm__icon-mark::before,
.crm__icon-mark::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  opacity: .9;
}

.crm__icon-mark::before {
  top: 7px;
}

.crm__icon-mark::after {
  bottom: 7px;
}

/* 텍스트 */
.crm__title {
  margin: 10px 0 4px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
  color: #e5f0ff;
  letter-spacing: -.01em;
}

.crm__subtitle {
  margin: 0 0 10px;
  font-weight: 600;
  color: #bfdbfe;
  font-size: 14px;
}

/* 쿠폰 코드 */
.crm__code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(148, 163, 184, .7);
  font-size: 12px;
  color: #e5e7eb;
}

.crm__code-label {
  opacity: .72;
  font-weight: 600;
}

.crm__code-value {
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 보상 배지 */
.crm__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.crm__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

.crm__badge--gems {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #15803d 100%);
  color: #ecfdf5;
  border: 1px solid rgba(187, 247, 208, .85);
}

.crm__badge--gold {
  background: linear-gradient(135deg, #facc15 0%, #eab308 40%, #ca8a04 100%);
  color: #451a03;
  border: 1px solid rgba(252, 211, 77, .85);
}

/* 하단 힌트 & 버튼 */
.crm__hint {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(226, 232, 240, .6);
}

.crm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

/* 팝 애니메이션 */
@keyframes crm-pop {
  from {
    transform: scale(.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* 다이얼로그 패널 */
.settings__dialog::part(panel) {
  border-radius: 16px;
  max-width: 640px;
  width: min(640px, 100vw - 24px);
}

/* 모달 내부 레이아웃: 콘텐츠 스크롤 + 하단 고정 푸터 */
.settings__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 섹션 */
.settings__section {
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 12px;
  padding: 12px;
}

.settings__section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  opacity: 0.9;
}

/* 행 */
.settings__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--sl-color-neutral-200);
}

.settings__row:first-of-type {
  border-top: 0;
}

.settings__row-label {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.settings__row-control {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 계정 연동 그 줄만 감싸는 flex */
.settings__row-control .flex-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  /* 버튼이 오른쪽에 계속 남게 */
  gap: 8px;
}

.settings__row--note {
  grid-template-columns: 1fr;
  padding-top: 6px;
}

.settings__row--note .settings__row-control {
  justify-self: start;
  color: var(--sl-color-neutral-600);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--sl-color-neutral-200);
  color: var(--sl-color-neutral-900);

  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge.is-ok {
  background: var(--sl-color-success-200);
  color: var(--sl-color-success-900);
}

/* 플렉스 유틸 */
.flex-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

/* 하단 고정 푸터 */
.settings__footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--sl-color-neutral-200);
  background: var(--sl-color-neutral-0);
}

/* 작은 가로폭 대응 */
@media (max-width: 520px) {
  .settings__row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .settings__row-control {
    justify-self: start;
    margin-top: 4px;
  }
}

/* 확인 다이얼로그 안쪽 */
.settings__confirm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings__confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.main-topbar {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;

  a {
    display: flex;
    align-items: center;
    justify-content: center;

    /* 둥근 짙은 회색 버튼 스타일 */
    background: linear-gradient(145deg, #2b2b2b, #1c1c1c);
    border-radius: 999px;
    padding: 6px;
    cursor: pointer;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 120ms ease, background 120ms ease;

    &:hover {
      background: linear-gradient(145deg, #353535, #222);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
      background: linear-gradient(145deg, #1f1f1f, #111);
    }

    >img {
      width: 24px;
      height: 24px;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
      pointer-events: none;
    }
  }

  .settings-button {
    cursor: pointer;
  }
}
/* ------------------------------------------
    Coin Flying Effect
------------------------------------------- */
.gold-fx-coin {
  position: fixed;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe29f 40%, #f6b700 85%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 798;
  transform-origin: center;
  animation: gold-fx-pop 0.25s ease-out;
}

@keyframes gold-fx-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  30% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* ------------------------------------------
    Gold Text (+375 등)
------------------------------------------- */
.gold-fx-text {
  position: fixed;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 700;
  color: #ffe47a;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  opacity: 0;
  animation: gold-fx-text-anim 0.9s ease-out forwards;
  z-index: 799;
}

@keyframes gold-fx-text-anim {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }

  20% {
    transform: translate(-50%, -80%) scale(1.0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -120%) scale(1.1);
    opacity: 0;
  }
}
.battlefield-level-down-dialog::part(panel) {
  max-width: 340px;
}

.battlefield-level-down-body {
  padding-top: 4px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.battlefield-level-down-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #e5e7eb;
}

.battlefield-level-down-text--warning {
  color: #f97373;
  font-weight: 600;
}

.battlefield-level-down-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-confirm-level-down::part(base) {
  background: #991b1b;
  color: #fff;
  border-color: rgba(248, 113, 113, 0.7);
}

.btn-confirm-level-down::part(base):hover {
  filter: brightness(1.05);
}

.btn-confirm-level-down::part(base):active {
  filter: brightness(0.95);
}
/* =========================================
 * 맵 선택 모달
 * ========================================= */

ion-modal.select-battlefield {
  --width: 100%;
  --height: 100%;
  --border-radius: 0;
  --box-shadow: none;
  z-index: auto !important;
}

ion-modal.select-battlefield::part(content) {
  background: #050608;
}

/* 상단 툴바 */
.select-battlefield ion-toolbar {
  --background: #111318;
  --color: #f8fafc;
  --border-width: 0 0 1px 0;
  --border-color: rgba(255, 255, 255, 0.06);
  --min-height: 52px;
}

.select-battlefield ion-title {
  font-size: 1rem;
  font-weight: 700;
}

/* content 레이아웃 */
.select-battlefield ion-content {
  --background: transparent;
  --padding-top: 0;
  --padding-bottom: 8px;
}

.select-battlefield ion-content::part(scroll) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* =========================================
 * 위쪽: 가로 맵 카드 스크롤
 * ========================================= */

.select-battlefield .battlefield-scroll {
  --bf-card-width: 80%;

  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 16px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 양쪽 여백 */
.select-battlefield .battlefield-spacer {
  flex: 0 0 calc((100% - var(--bf-card-width)) / 2);
}

/* 스크롤바 숨기기 */
.select-battlefield .battlefield-scroll::-webkit-scrollbar {
  display: none;
}

.select-battlefield .battlefield-scroll {
  scrollbar-width: none;
}

/* =========================================
 * 카드
 * ========================================= */

.select-battlefield .battlefield-card {
  flex: 0 0 var(--bf-card-width);
  max-width: 440px;
  scroll-snap-align: center;

  background: #10131a;
  border-radius: 22px;
  border: 2px solid transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  cursor: pointer;

  transform-origin: center center;
  transform: scale(var(--card-scale, 0.9));
  opacity: var(--card-opacity, 0.6);
  filter: brightness(var(--card-brightness, 0.9));

  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    opacity 0.16s ease-out,
    filter 0.16s ease-out,
    border-color 0.16s ease-out;
}

/* 중앙 카드 강조 */
.select-battlefield .battlefield-card--active {
  border-color: #3b82f6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
}

/* 썸네일 */
.select-battlefield .battlefield-card__thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.select-battlefield .battlefield-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 카드 본문 */
.select-battlefield .battlefield-card__body {
  padding: 12px 14px 14px;
  color: #f9fafb;
}

.select-battlefield .battlefield-card__title {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.select-battlefield .battlefield-card__description {
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 8px;
  white-space: pre-line;
}

/* =========================================
 * 열기/해금 뱃지 + 보상 한 줄
 * ========================================= */

.select-battlefield .battlefield-card__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

/* 기본(잠긴 맵) 배지 */
.select-battlefield .battlefield-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(110, 160, 255, .12);
  border: 1px solid rgba(110, 160, 255, .18);
  flex-shrink: 0;
}

/* 해금된 맵 배지 색상 */
.select-battlefield .battlefield-card__badge--unlocked {
  background: rgba(52, 211, 153, .14);
  border-color: rgba(52, 211, 153, .35);
}

/* "열기" 라벨 */
.select-battlefield .battlefield-card__badge-label {
  opacity: 0.8;
}

/* 카드 하단 보상 줄 (오른쪽으로 밀어서 가운데 여백 확보) */
.select-battlefield .battlefield-card__reward {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  opacity: 0.9;
  margin-left: auto;
}

.select-battlefield .battlefield-card__reward-label {
  opacity: 0.86;
}

.select-battlefield .battlefield-card__reward-sep {
  opacity: 0.7;
}

/* =========================================
 * 하단 정보 패널
 * ========================================= */

.select-battlefield .battlefield-selected {
  flex: 0 0 auto;
  margin: 0 16px 8px;
  padding: 10px 12px 12px;

  background: #10131a;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f9fafb;

  display: flex;
  flex-direction: column;
  gap: 8px;

  transition:
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}

/* 이름 + 레벨 */
.select-battlefield .battlefield-selected__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-battlefield .battlefield-selected__name {
  font-weight: 700;
  font-size: 0.98rem;
}

.select-battlefield .battlefield-selected__level {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

/* 상태 줄 */
.select-battlefield .battlefield-selected__status-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.8rem;
}

.select-battlefield .battlefield-selected__status-label {
  font-size: 0.78rem;
  opacity: 0.7;
  flex: 0 0 auto;
}

.select-battlefield .battlefield-selected__status {
  flex: 1 1 auto;
  opacity: 0.9;
}

/* 보상 */
.select-battlefield .battlefield-selected__reward-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
}

.select-battlefield .battlefield-selected__reward-summary {
  font-weight: 600;
}

.select-battlefield .battlefield-selected__reward-detail {
  opacity: 0.75;
  font-size: 0.78rem;
}

/* 레벨 업/다운 버튼 줄 */
.select-battlefield .battlefield-selected__actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.select-battlefield .battlefield-selected__btn {
  flex: 1 1 0;
  min-width: 0;
}

.select-battlefield .battlefield-selected__btn::part(base) {
  border-radius: 999px;
  font-size: 0.82rem;
}

/* 레벨 업/다운 라벨: 한 줄로 (텍스트 + 금액) */
.select-battlefield .battlefield-selected__btn--up::part(label),
.select-battlefield .battlefield-selected__btn--down::part(label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* 버튼 내부 비용 컨테이너 */
.select-battlefield .battlefield-selected__cost {
  font-size: 0.74rem;
}

/* =========================================
 * 맨 하단 큰 버튼
 * ========================================= */

.select-battlefield .battlefield-play {
  flex: 0 0 auto;
  padding: 0 16px 4px;
}

.select-battlefield .battlefield-play__button {
  display: block;
  width: 100%;
}

.select-battlefield .battlefield-play__button::part(base) {
  width: 100%;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 700;
  height: 44px;
}

/* 버튼 안 내용 정렬 + 간격 */
.select-battlefield .battlefield-play__button::part(label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.select-battlefield .battlefield-play__label {
  display: inline-flex;
  align-items: center;
}

.select-battlefield .battlefield-play__cost {
  font-size: 0.85rem;
}

/* ✅ 상태별 버튼 색상 (열기/플레이) */
.select-battlefield .battlefield-play__button--unlock::part(base) {
  background: rgba(252, 211, 77, 0.92);
  border: 1px solid rgba(252, 211, 77, 0.55);
  color: #111827;
}

.select-battlefield .battlefield-play__button--unlock:hover::part(base) {
  filter: brightness(1.05);
}

.select-battlefield .battlefield-play__button--play::part(base) {
  background: rgba(59, 130, 246, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.55);
  color: #ffffff;
}

.select-battlefield .battlefield-play__button--play:hover::part(base) {
  filter: brightness(1.05);
}

/* =========================================
 * 재화 뱃지 공통 스타일 (골드/젬)
 * ========================================= */

.ui-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ui-cost__icon {
  font-size: 0.9em;
}

.ui-cost--gold {
  color: #facc15;
}

.ui-cost--gem {
  color: #60a5fa;
}

.ui-cost--strong {
  font-weight: 700;
}

/* =========================================
 * 반응형
 * ========================================= */

@media (max-width: 480px) {
  .select-battlefield .battlefield-scroll {
    --bf-card-width: 86%;
  }
}

/* =========================================
 * 맵 열기 / 레벨업 연출
 * (무기 강화 연출과 비슷한 느낌)
 * ========================================= */

/* 카드 레벨업 / 레벨다운 공통 팝 효과 */
.select-battlefield .battlefield-card--level-burst,
.select-battlefield .battlefield-card--level-down-burst,
.select-battlefield .battlefield-card--unlock-burst {
  position: relative;
  animation: battlefield-card-pop 360ms ease-out;
}

/* 레벨업은 살짝 파란빛, 레벨다운은 붉은빛, 해금은 황금빛 */
.select-battlefield .battlefield-card--level-burst {
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.6);
}

.select-battlefield .battlefield-card--level-down-burst {
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.55);
}

.select-battlefield .battlefield-card--unlock-burst {
  box-shadow: 0 0 30px rgba(252, 211, 77, 0.8);
}

/* 카드에서 한 번 퍼지는 링 이펙트 */
.select-battlefield .battlefield-card--level-burst::after,
.select-battlefield .battlefield-card--level-down-burst::after,
.select-battlefield .battlefield-card--unlock-burst::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -4px;
  border-radius: 26px;
  opacity: 0;
  animation: battlefield-card-ring 520ms ease-out;
}

/* 링 색상은 클래스별로 다르게 */
.select-battlefield .battlefield-card--level-burst::after {
  border: 2px solid rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.9);
}

.select-battlefield .battlefield-card--level-down-burst::after {
  border: 2px solid rgba(248, 113, 113, 0.9);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.9);
}

.select-battlefield .battlefield-card--unlock-burst::after {
  border: 2px solid rgba(252, 211, 77, 0.95);
  box-shadow: 0 0 18px rgba(252, 211, 77, 0.95);
}

/* 하단 패널 팝 / 해금 연출 */
.select-battlefield .battlefield-selected--burst {
  animation: battlefield-selected-pop 320ms ease-out;
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.32);
  border-color: rgba(96, 165, 250, 0.6);
}

.select-battlefield .battlefield-selected--unlock-burst {
  animation: battlefield-selected-pop 360ms ease-out;
  box-shadow: 0 0 18px rgba(252, 211, 77, 0.4);
  border-color: rgba(252, 211, 77, 0.8);
}

/* 숫자/보상 튀는 느낌 */
.select-battlefield .battlefield-selected__level--bump,
.select-battlefield .battlefield-selected__reward-summary--bump {
  animation: battlefield-stat-bump 320ms ease-out;
}

/* =========================================
 * keyframes
 * ========================================= */

@keyframes battlefield-card-pop {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes battlefield-card-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes battlefield-selected-pop {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes battlefield-stat-bump {
  0% {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.7));
  }

  100% {
    transform: translateY(0);
    filter: none;
  }
}
/* 배틀 탭 기본 레이아웃 */
ion-tab.battle {
  position: relative;
  height: 100%;
}

/* ion-content를 컬럼 플렉스로 만들어 위는 고정, 아래는 차지하게 */
ion-tab.battle ion-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  --background: #000;
}

/* ionic 스크롤 영역도 컬럼으로 맞춰주기 */
ion-tab.battle ion-content::part(scroll) {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* ===== 상단 헤더 고정 ===== */
ion-tab.battle header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  padding: 8px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

ion-tab.battle header>* {
  pointer-events: auto;
}

/* 맵 버튼 + 스타일 (우측 상단 아이콘) */
ion-tab.battle header a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2b2b2b, #1c1c1c);
  border-radius: 999px;
  padding: 6px;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 120ms ease, background 120ms ease;
}

ion-tab.battle header a:hover {
  background: linear-gradient(145deg, #353535, #222);
  transform: translateY(-1px);
}

ion-tab.battle header a:active {
  transform: translateY(0);
  background: linear-gradient(145deg, #1f1f1f, #111);
}

ion-tab.battle header a>img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* 좌측 상단 타이틀 컨테이너 */
ion-tab.battle .title {
  position: absolute;
  top: 16px;
  left: 16px;
  color: white;
  z-index: 6;
}

/* 메인 타이틀: "전투" */
ion-tab.battle .battle-title-main {
  display: block;
  font-size: 20px;
  font-weight: 800;
}

/* 서브 타이틀: 맵 이름 + Lv (컨테이너) */
ion-tab.battle .battle-title-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.95;
}

/* 맵 이름 */
ion-tab.battle .battle-title-sub__name {
  color: #e5e7eb;
  /* 밝은 회색 */
  font-weight: 600;
}

/* Lv 텍스트 */
ion-tab.battle .battle-title-sub__level {
  color: #facc15;
  /* 골드 느낌 */
  margin-left: 4px;
  font-weight: 700;
}

/* ===== renderer (맵) ===== */

ion-tab.battle .renderer-container {
  aspect-ratio: 240 / 180;
  position: relative;
  /* 안쪽에 버튼을 겹치기 위해 */
}

/* 맵 안쪽 하단에 붙는 레벨 업/다운 버튼 컨테이너 */
ion-tab.battle .battle-map-level-buttons {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  /* 맵 안쪽으로 살짝 올라가게 */
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  /* 기본은 막고 */
  z-index: 6;
}

/* 실제 버튼만 클릭 가능 */
ion-tab.battle .battle-map-level-button {
  pointer-events: auto;
}

/* 버튼 공통 스타일 (모달 하단 버튼과 비슷한 느낌) */
ion-tab.battle .battle-map-level-button::part(base) {
  border-radius: 999px;
  height: 28px;
  font-size: 0.78rem;
  padding: 0 12px;
  background: rgba(15, 17, 23, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f9fafb;
}

/* 좌측: 레벨 다운 */
ion-tab.battle .battle-map-level-button--down::part(base) {
  /* 필요하면 색상 차이 조금 */
}

/* 우측: 레벨 업 (살짝 강조) */
ion-tab.battle .battle-map-level-button--up::part(base) {
  color: #fde68a;
}

ion-tab.battle .battle-map-level-button::part(base):hover {
  filter: brightness(1.06);
}

ion-tab.battle .battle-map-level-button::part(base):active {
  filter: brightness(0.95);
}

/* 버튼 라벨: "레벨 업" + 비용 칩 한 줄 정렬 */
ion-tab.battle .battle-map-level-button--up::part(label),
ion-tab.battle .battle-map-level-button--down::part(label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* 비용 칩(레벨 업 버튼 안) */
ion-tab.battle .battle-map-level__cost {
  font-size: 0.74rem;
}

/* ===== 히어로 영역 ===== */

ion-tab.battle .heroes-header {
  display: flex;
  align-items: center;
  padding: 10px;
}

ion-tab.battle .heroes-header>h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #f9fafb;
}

ion-tab.battle .heroes-header .hero-list__header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* ===== 아래 영역만 스크롤 ===== */
ion-tab.battle .heroes-owned-wrap {
  padding: 0 10px 20px;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background: #06060a;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ======= WAVE BANNER ========= */

.battle-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
}

.battle-banner__inner {
  padding: 10px 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.2), transparent 60%),
    rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  text-align: center;
  animation:
    battle-banner-pop 0.4s ease-out forwards,
    battle-banner-glow 1.2s ease-in-out infinite alternate;
}

.battle-banner__title {
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffe082;
  text-shadow: 0 0 8px rgba(255, 208, 109, 0.8);
}

.battle-banner__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #f5f5f5;
  opacity: 0.8;
}

.battle-banner--fadeout .battle-banner__inner {
  animation: battle-banner-fadeout 0.5s forwards;
}

@keyframes battle-banner-pop {
  0% {
    transform: scale(0.7) translateY(10px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes battle-banner-fadeout {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  100% {
    transform: scale(0.8) translateY(-10px);
    opacity: 0;
  }
}

@keyframes battle-banner-glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 224, 130, 0.4);
  }

  100% {
    box-shadow: 0 0 18px rgba(255, 224, 130, 0.9);
  }
}

/* ======= STAGE CLEAR ========= */

.battle-clear-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.15), transparent 55%),
    radial-gradient(circle at bottom, rgba(255, 215, 0, 0.05), transparent 60%),
    rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.battle-clear-overlay--fadeout {
  opacity: 0;
}

.battle-clear-window {
  padding: 16px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg,
      rgba(40, 40, 40, 0.95),
      rgba(20, 20, 20, 0.98));
  border: 2px solid rgba(255, 215, 0, 0.7);
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.3);
  text-align: center;
  color: #fff;
  animation: battle-clear-pop 0.45s ease-out forwards;
  pointer-events: auto;
}

.battle-clear-title {
  font-size: 22px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffeb3b;
  text-shadow:
    0 0 12px rgba(255, 235, 59, 0.9),
    0 0 24px rgba(255, 215, 0, 0.7);
  margin-bottom: 8px;
}

.battle-clear-reward {
  font-size: 16px;
  color: #ffd86b;
  margin-bottom: 6px;
}

.battle-clear-message {
  font-size: 12px;
  color: #f5f5f5;
  opacity: 0.9;
}

.battle-clear__countdown {
  font-weight: 700;
  color: #ffeb3b;
}

.battle-clear-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* 즉시 재도전 버튼 */
.battle-clear-btn-retry {
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd54f, #ffa000);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 193, 7, 0.7);
  color: #1a1200;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
  pointer-events: auto;
}

.battle-clear-btn-retry:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 213, 79, 0.9);
}

.battle-clear-btn-retry:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

@keyframes battle-clear-pop {
  0% {
    transform: scale(0.7) translateY(10px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ======= 맵 레벨업/다운 연출 (배틀 탭) ======= */

/* 맵 전체 팝 + 링 이펙트 */
ion-tab.battle .renderer-container.battle-map--level-burst,
ion-tab.battle .renderer-container.battle-map--level-down-burst {
  position: relative;
  animation: battle-map-pop 360ms ease-out;
}

/* 레벨업: 파란빛, 레벨다운: 붉은빛 느낌 */
ion-tab.battle .renderer-container.battle-map--level-burst {
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.6);
}

ion-tab.battle .renderer-container.battle-map--level-down-burst {
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.55);
}

/* 맵 주변 링 */
ion-tab.battle .renderer-container.battle-map--level-burst::after,
ion-tab.battle .renderer-container.battle-map--level-down-burst::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  opacity: 0;
  animation: battle-map-ring 520ms ease-out;
}

/* 링 색상 */
ion-tab.battle .renderer-container.battle-map--level-burst::after {
  border: 2px solid rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.9);
}

ion-tab.battle .renderer-container.battle-map--level-down-burst::after {
  border: 2px solid rgba(248, 113, 113, 0.9);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.9);
}

/* 타이틀 / 버튼 숫자 튀는 느낌 */
.battle-title-label--bump {
  animation: battle-map-stat-bump 320ms ease-out;
  filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.7));
}

ion-tab.battle .battle-map-level-button--bump::part(base) {
  animation: battle-map-stat-bump 320ms ease-out;
}

/* 맵 팝 애니메이션 */
@keyframes battle-map-pop {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* 맵 링 애니메이션 */
@keyframes battle-map-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.94);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* 숫자/버튼 bump */
@keyframes battle-map-stat-bump {
  0% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ======= 재화 뱃지 공통 (모달과 공유) ======= */

.ui-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ui-cost__icon {
  font-size: 0.9em;
}

.ui-cost--gold {
  color: #facc15;
}

.ui-cost--gem {
  color: #60a5fa;
}

.ui-cost--strong {
  font-weight: 700;
}

/* =========================================
 * 반응형
 * ========================================= */

@media (max-width: 480px) {
  ion-tab.battle .battle-map-level-buttons {
    bottom: 6px;
    padding: 0 10px;
  }

  ion-tab.battle .battle-map-level-button::part(base) {
    height: 26px;
    font-size: 0.72rem;
    padding: 0 10px;
  }
}
.renderer-container {
  position: relative;
}

/* 화면 플래시(흰색) */
.renderer-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.renderer-container.battle-fx--flash::after {
  background: rgba(255, 255, 255, 0.6);
  animation: battleFlash 160ms ease-out;
}

@keyframes battleFlash {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 카메라 흔들림 */
.renderer-container.battle-fx--shake {
  animation: battleShake 220ms ease-in-out;
}

@keyframes battleShake {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2px, 1px);
  }

  40% {
    transform: translate(2px, -1px);
  }

  60% {
    transform: translate(-2px, -1px);
  }

  80% {
    transform: translate(2px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}
.hero-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 빈 상태 */
.hero-list__empty {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 0.85rem;
}
/* === 공통 모달 === */
.gacha-modal {
  position: fixed;
  z-index: 1;
  border: none;
  background: transparent;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

.gacha-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}

.gacha-modal__container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* === 공통 카드 === */
.gacha-card {
  position: relative;
  width: min(280px, 82vw);
  /* 크기 살짝 축소 */
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0.9), rgba(9, 9, 9, 0.6));
  border-radius: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.gacha-card__title {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.06em;
}

.gacha-card__rarity {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

/* === 이미지 영역 (실제 <img> 사용 기준) === */
.gacha-card__image {
  flex: 1;
  margin: 36px 16px 0 16px;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: none;
  position: relative;
}

.gacha-card__img {
  width: 160px;
  max-width: 80%;
  height: auto;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.gacha-card__subtitle {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.gacha-card__name {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.gacha-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%);
  font-size: 2rem;
  color: #fff;
  pointer-events: none;
}

/* === 닫기 버튼 === */
.gacha-modal__close {
  position: absolute;
  bottom: clamp(1.25rem, 3vh, 2rem);
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.45rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease-out;
}

.gacha-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* === 희귀도 공통 효과 === */
.gacha-card--glow::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%);
  filter: blur(18px);
  opacity: 0.3;
  /* 기존보다 약하게 */
  pointer-events: none;
}

/* 희귀도별 색감 */
.gacha-card--unique {
  border-color: rgba(255, 121, 198, 0.9);
  box-shadow: 0 0 20px rgba(255, 121, 198, 0.4);
}

.gacha-card--legendary {
  border-color: rgba(255, 215, 0, 0.9);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.gacha-card--rare {
  border-color: rgba(104, 190, 255, 0.75);
  box-shadow: 0 0 16px rgba(104, 190, 255, 0.3);
}

.gacha-card--common {
  border-color: rgba(255, 255, 255, 0.08);
}

/* === 타입별 (무기/영웅 등) === */
.gacha-card--weapon .gacha-card__title {
  color: #ffd791;
}

.gacha-card--hero .gacha-card__title {
  color: #d1f2ff;
}

.gacha-card--hero .gacha-card__image {
  background-position: top;
}
.drm__dialog::part(panel) {
  border-radius: 20px;
  max-width: 520px;
  width: min(520px, 100vw - 24px);
  max-height: min(80vh, 640px);
  background: #1f2127;
}

.drm__header {
  margin-bottom: 10px;
}

.drm__desc {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.72;
}

.drm__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.drm__row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 6px 10px;
  cursor: pointer;
}

.drm__row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.drm__thumb {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.drm__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drm__title-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.drm__title {
  font-weight: 600;
  font-size: 0.8rem;
}

.drm__rarity {
  font-size: 0.7rem;
  opacity: 0.9;
}

.drm__level {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.7;
}

.drm__reward {
  font-size: 0.7rem;
  opacity: 0.8;
}

.drm__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 6px;
}

.drm__total {
  font-size: 0.78rem;
  opacity: 0.85;
}

.drm__footer-actions {
  display: flex;
  gap: 6px;
}

@media (max-width: 520px) {
  .drm__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .drm__footer-actions {
    align-self: flex-end;
  }
}

/* 레벨/공격력 표시용 추가 스타일 */
.drm__level {
  margin-left: 0;
  font-size: 0.78rem;
  opacity: 0.75;
}

.drm__attack {
  margin-top: 2px;
  font-size: 0.82rem;
  opacity: 0.85;
}
.ggm__dialog::part(panel) {
  border-radius: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
  color: #fff;
  border: 1px solid rgba(148, 163, 184, .4);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .45);
  --sl-panel-border-width: 0;
}

.ggm__content {
  position: relative;
  text-align: center;
  padding: 22px 16px 14px;
  color: #fff;
}

.ggm__title {
  margin: 10px 0 4px;
  font-size: 20px;
  font-weight: 900;
}

.ggm__subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(226, 232, 255, .75);
}

.ggm__actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.ggm__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.ggm__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
  color: #02131f;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(99, 102, 241, .35);
  border: 1px solid rgba(240, 249, 255, .4);
}

/* 상단 젬 아이콘 */
.ggm__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #0ea5e9 0%, #1d4ed8 80%);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(14, 165, 233, .35);
  animation: ggm-pop .34s ease-out both;
}

.ggm__icon-gem {
  width: 27px;
  height: 27px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 35%, #7dd3fc 100%);
  clip-path: polygon(50% 0%, 100% 32%, 78% 100%, 22% 100%, 0% 32%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .08);
}

@keyframes ggm-pop {
  from {
    transform: scale(.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* =========================
   Heroes Tab Styles (merged)
   ========================= */

/* 탭 루트 */
ion-tab.heroes {
  position: relative;
  height: 100%;
}

/* 콘텐츠 영역을 위아래로 나누기 위해 flex 컬럼으로 */
ion-tab.heroes ion-content.heroes-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  --background: #000;
}

/* ionic 스크롤 영역도 컬럼으로 */
ion-tab.heroes ion-content.heroes-content::part(scroll) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =========================
   상단 공통 헤더
   ========================= */
ion-tab.heroes header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  pointer-events: none;
}

ion-tab.heroes header>* {
  pointer-events: auto;
}

/* =========================
   상단 비주얼 영역
   ========================= */
ion-tab.heroes .top {
  position: relative;
  flex: 0 0 200px;
  height: 200px;
  background-image: url('assets/ui/tabs/bg/heroes-top.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

/* "영웅" 타이틀 */
ion-tab.heroes .top .title {
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  z-index: 2;
}

/* =========================
   뽑기 버튼 래퍼 (중앙)
   ========================= */
ion-tab.heroes .heroes-gacha-wrap {
  position: absolute;
  top: calc(50% + 54px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

/* 버튼만 클릭 가능 */
ion-tab.heroes .heroes-gacha-wrap sl-button {
  pointer-events: auto;
}

/* 뒤쪽 골드빛 글로우 */
ion-tab.heroes .heroes-gacha-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(255, 204, 110, 0.55), rgba(3, 10, 18, 0) 70%);
  filter: drop-shadow(0 0 12px rgba(255, 210, 132, 0.55));
  opacity: 0.9;
  animation: heroes-gacha-pulse 2.4s ease-in-out infinite;
  z-index: -1;
}

/* 펄스 애니메이션 */
@keyframes heroes-gacha-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
}

/* =========================
   뽑기 버튼 본체
   ========================= */
ion-tab.heroes .heroes-gacha-btn::part(base) {
  background: linear-gradient(165deg, rgba(88, 43, 25, 0.92) 0%, rgba(27, 11, 6, 0.96) 100%);
  border: 1px solid rgba(255, 212, 163, 0.5);
  border-radius: 16px;
  color: #fff5ec;
  font-size: 16px;
  font-family: MapleStory;
  padding: 10px 36px;
  min-width: 140px;
  justify-content: center;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 233, 206, 0.1);
  backdrop-filter: blur(2px);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

/* 버튼 안 라벨 */
ion-tab.heroes .gacha-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

ion-tab.heroes .gacha-button-label>img {
  width: 24px;
  height: 24px;
}

ion-tab.heroes .heroes-gacha-btn::part(base):hover {
  filter: brightness(1.03);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(246, 174, 108, 0.4);
  transform: translateY(-1px);
}

ion-tab.heroes .heroes-gacha-btn::part(base):active {
  transform: translateY(0);
  filter: brightness(0.97);
}

ion-tab.heroes .heroes-header {
  display: flex;
  align-items: center;
  padding: 10px;

  >h2 {
    margin: 0;
    font-size: 1.1rem;
  }

  .hero-list__header-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
  }

  .hero-list__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================
   아래 영역(보유 영웅 리스트)만 스크롤
   ========================= */
ion-tab.heroes .heroes-owned-wrap {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 10px 20px;
  background: #06060a;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================
   반응형 보정
   (예전 코드에서 가져온 것)
   ========================= */
@media (max-width: 520px) {
  ion-tab.heroes .heroes-gacha-wrap::before {
    width: 140px;
    height: 140px;
  }

  ion-tab.heroes .heroes-gacha-btn::part(base) {
    padding: 8px 26px;
  }
}
.all-list__dialog::part(panel) {
  border-radius: 24px;
  max-width: 520px;
  width: min(520px, 100vw - 24px);
  max-height: min(80vh, 640px);
  background: #1f2127;
}

.all-list__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 100%;
  padding: 0 0 8px;
}

/* 확률 헤더 */
.rarity-header {
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin: 0 0 8px;
}

.rarity-header__title {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0 0 6px;
}

.rarity-header__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0;
}

.rarity-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.3;
}

.rarity-row__label {
  font-weight: 600;
}

.rarity-row__value {
  opacity: 0.85;
}

/* 전체 무기용 아이템이 안쪽에 딱 맞게 들어가도록 */
.all-list__content .weapon-item {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 18px;
}

.qrcm__dialog::part(panel) {
  border-radius: 1rem;
  overflow: hidden;
  background: radial-gradient(circle at top, #161b22 0%, #0b0f14 60%, #060606 100%);
  color: #fff;
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .72);
  --sl-panel-border-width: 0;
}

.qrcm__content {
  position: relative;
  text-align: center;
  padding: 24px 16px 14px;
  color: #fff;
}

.qrcm__title {
  margin: 10px 0 4px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
  color: #e6f0ff;
  letter-spacing: -.01em;
}

.qrcm__subtitle {
  margin: 0 0 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
}

.qrcm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.qrcm__badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

.qrcm__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 40%, #2563eb 100%);
  color: #061428;
  border: 1px solid rgba(191, 219, 254, .7);
  box-shadow: 0 4px 16px rgba(59, 130, 246, .32);
}

.qrcm__badge--gold {
  background: linear-gradient(135deg, #ffe082 0%, #ffc107 34%, #ff9800 100%);
  color: #3e2f00;
  border: 1px solid rgba(255, 235, 175, .7);
  box-shadow: 0 4px 16px rgba(255, 214, 96, .35);
}

.qrcm__badge--muted {
  background: rgba(229, 231, 235, .92);
  color: #111827;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
}

/* 상단 아이콘 */
.qrcm__icon {
  margin: 0 auto 6px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle, #93c5fd 0%, #3b82f6 60%, #1d4ed8 100%);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(59, 130, 246, .35);
  animation: qrcm-pop .34s ease-out both;
}

.qrcm__icon-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: radial-gradient(circle, #ffffff 0%, #eaf3ff 80%);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .12);
}

@keyframes qrcm-pop {
  from {
    transform: scale(.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* =========================
   Quests Tab Styles
   ========================= */

ion-tab.quests {
  position: relative;
  height: 100%;
}

/* IonContent 기본 배경 & 높이 */
ion-tab.quests ion-content.quests-content {
  height: 100%;
  --background: #000;
}

/* 스크롤 부분은 기본 block 레이아웃 (가운데 정렬 방지) */
ion-tab.quests ion-content.quests-content::part(scroll) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 루트 래퍼: 위에서부터 세로 정렬 */
ion-tab.quests .quests-root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 상단 공통 헤더 */
ion-tab.quests header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  pointer-events: none;
}

ion-tab.quests header>* {
  pointer-events: auto;
}

/* 상단 배경 영역 (높이 줄임) */
ion-tab.quests .top {
  position: relative;
  flex: 0 0 60px;
  height: 60px;
  background-image: url('assets/ui/tabs/bg/quests-top.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

/* "퀘스트" 타이틀 */
ion-tab.quests .top .title {
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  z-index: 2;
}

/* 상단 서브 탭 버튼 영역 (일간 / 주간 / 업적) */
ion-tab.quests .quests-tabs-header {
  display: flex;
  padding: 6px 10px;
  gap: 6px;
  background: #06090f;
}

ion-tab.quests .quests-tab-btn {
  flex: 1 1 0;
  border: none;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.9rem;
  background: #151b27;
  color: #cfd6ea;
  cursor: pointer;
  font-family: MapleStory, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}

ion-tab.quests .quests-tab-btn.is-active {
  background: linear-gradient(135deg, #2762ff, #8c9dff);
  color: #fff;
  transform: translateY(-1px);
}

/* 리스트 전체 스크롤 영역 */
ion-tab.quests .quests-list-wrap {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px 10px 16px;
  background: #06090f;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 패널 */
ion-tab.quests .quests-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

ion-tab.quests .quests-panel.is-active {
  display: flex;
}

/* 공통 퀘스트 아이템 리스트 */
ion-tab.quests .quest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Shoelace 카드 커스터마이징 */
ion-tab.quests sl-card.quest-item::part(base) {
  border-radius: 12px;
  background: linear-gradient(145deg,
      rgba(16, 22, 35, 0.96),
      rgba(9, 13, 21, 0.98));
  border: 1px solid rgba(108, 139, 196, 0.5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

ion-tab.quests sl-card.quest-item[data-completed='true']::part(base) {
  border-color: rgba(95, 197, 120, 0.8);
  box-shadow:
    0 0 12px rgba(95, 197, 120, 0.45),
    0 5px 14px rgba(0, 0, 0, 0.65);
}

/* 카드 내부 레이아웃 */
ion-tab.quests .quest-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 헤더 */
ion-tab.quests .quest-item__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

ion-tab.quests .quest-item__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f2f4ff;
}

/* 보상 버튼 */
ion-tab.quests .quest-item__reward-btn {
  margin-left: auto;
  font-size: 0.78rem;
}

/* 설명 */
ion-tab.quests .quest-item__desc {
  font-size: 0.8rem;
  color: #aeb6d6;
}

/* =========================
   ✅ 보상 표시 (추가)
   ========================= */

ion-tab.quests .quest-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

ion-tab.quests .quest-reward__label {
  font-size: 0.78rem;
  color: #8fabcc;
  flex: 0 0 auto;
}

ion-tab.quests .quest-reward__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

ion-tab.quests .quest-reward__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #e9eeff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(207, 214, 234, 0.18);
}

ion-tab.quests .quest-reward__chip--gems {
  border-color: rgba(140, 157, 255, 0.35);
}

ion-tab.quests .quest-reward__chip--gold {
  border-color: rgba(255, 201, 74, 0.35);
}

ion-tab.quests .quest-reward__icon {
  line-height: 1;
}

ion-tab.quests .quest-reward__empty {
  font-size: 0.78rem;
  color: #aeb6d6;
}

/* 진행도 영역 */
ion-tab.quests .quest-item__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

ion-tab.quests .quest-item__progress sl-progress-bar {
  flex: 1 1 auto;
  --height: 8px;
  min-width: 0;
}

ion-tab.quests .quest-item__progress-text {
  font-size: 0.78rem;
  color: #cfd6ea;
  white-space: nowrap;
}

/* 업적 메타 정보 */
ion-tab.quests .quest-item__meta {
  margin-top: 2px;
  font-size: 0.75rem;
  color: #8fabcc;
}

/* 반응형 */
@media (max-width: 520px) {
  ion-tab.quests .quest-item__title {
    font-size: 0.9rem;
  }
}

ion-tab.quests sl-card.quest-item[data-claimed='true'] .quest-reward {
  opacity: 0.45;
}
.weapon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
}

.weapon-item__thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.weapon-item__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.weapon-item__title-row {
  display: flex;
  align-items: center;
}

.weapon-item__title {
  font-weight: 700;
  white-space: nowrap;
}

.weapon-item__meta {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.85;
}

.weapon-attack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  margin-top: 4px;
}

.weapon-attack-row__left {
  display: flex;
  gap: 4px;
  align-items: center;
}

.weapon-attack-row__value {
  font-weight: 600;
}

.weapon-attack-row__right {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: 0.7rem;
  opacity: 0.6;
}

.weapon-item__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.weapon-item__actions sl-button::part(label) {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.weapon-item__upgrade-button::part(base) {
  width: 56px;
  height: 38px;
}

.weapon-item__upgrade-button::part(label) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1em;
  padding: 0 !important;
}

.weapon-item__upgrade-cost {
  font-size: 0.7rem;
  color: #ffd700;
}

/* 강화 성공 시 카드 전체 하이라이트 */
.weapon-item--upgrade-burst {
  position: relative;
  animation: weapon-upgrade-pop 350ms ease-out;
  box-shadow: 0 0 22px rgba(255, 221, 120, 0.4);
}

/* 빛이 한 번 퍼지는 원형 이펙트 */
.weapon-item--upgrade-burst::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid rgba(255, 224, 148, 0.9);
  box-shadow: 0 0 12px rgba(255, 224, 148, 0.9);
  opacity: 0;
  animation: weapon-upgrade-ring 480ms ease-out;
}

@keyframes weapon-upgrade-pop {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.025);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes weapon-upgrade-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

.weapon-stat-bump {
  animation: weapon-stat-bump 320ms ease-out;
}

@keyframes weapon-stat-bump {
  0% {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 4px rgba(255, 221, 120, 0.7));
  }

  100% {
    transform: translateY(0);
    filter: none;
  }
}
/* 📦 무기 리스트 전체 */
.weapon-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 🔹 리스트 아이템 컨테이너 */
.weapon-list__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 🔹 비어 있을 때 표시 */
.weapon-list__empty {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 0.85rem;
}
/* =========================
   Weapons Tab Styles
   ========================= */

ion-tab.weapons {
  position: relative;
  height: 100%;
}

/* ion-content을 flex 컨테이너로 쓰기 */
ion-tab.weapons ion-content.weapons-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  --background: #000;
}

/* 🔴 ion-content 기본 스크롤 막기
   ionic은 실제 스크롤 영역이 ::part(scroll) 안에 있어서
   거기에 overflow: hidden 을 주면 바깥 스크롤이 안 생깁니다. */
ion-tab.weapons ion-content.weapons-content::part(scroll) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 상단 공통 헤더 */
ion-tab.weapons header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  pointer-events: none;
}

ion-tab.weapons header>* {
  pointer-events: auto;
}

/* 상단 배경 영역 */
ion-tab.weapons .top {
  position: relative;
  flex: 0 0 200px;
  /* 위는 고정 높이 */
  height: 200px;
  background-image: url('assets/ui/tabs/bg/weapons-top.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

/* "무기" 타이틀 */
ion-tab.weapons .top .title {
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  z-index: 2;
}

/* ========== 무기 소환 버튼 래퍼 (중앙 정렬) ========== */
ion-tab.weapons .weapons-gacha-wrap {
  position: absolute;
  top: calc(50% + 54px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

ion-tab.weapons .weapons-gacha-wrap sl-button {
  pointer-events: auto;
}

ion-tab.weapons .weapons-gacha-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
      rgba(110, 183, 255, 0.55),
      rgba(3, 10, 18, 0) 70%);
  filter: drop-shadow(0 0 12px rgba(114, 185, 255, 0.55));
  opacity: 0.9;
  animation: weapons-gacha-pulse 2.4s ease-in-out infinite;
  z-index: -1;
}

@keyframes weapons-gacha-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
}

/* 버튼 본체 */
ion-tab.weapons .weapons-gacha-btn::part(base) {
  background: linear-gradient(165deg, rgba(25, 57, 88, 0.92) 0%, rgba(7, 17, 27, 0.96) 100%);
  border: 1px solid rgba(163, 210, 255, 0.5);
  border-radius: 16px;
  color: #f4f8ff;
  font-size: 16px;
  font-family: MapleStory;
  letter-spacing: -0.01em;
  padding: 10px 36px;
  min-width: 140px;
  justify-content: center;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(185, 223, 255, 0.1);
  backdrop-filter: blur(2px);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

ion-tab.weapons .gacha-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

ion-tab.weapons .gacha-button-label>img {
  width: 24px;
  height: 24px;
}

ion-tab.weapons .weapons-gacha-btn::part(base):hover {
  filter: brightness(1.03);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(108, 176, 246, 0.4);
  transform: translateY(-1px);
}

ion-tab.weapons .weapons-gacha-btn::part(base):active {
  transform: translateY(0);
  filter: brightness(0.97);
}

ion-tab.weapons .weapons-header {
  display: flex;
  align-items: center;
  padding: 10px;

  >h2 {
    margin: 0;
    font-size: 1.1rem;
  }

  .weapon-list__header-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
  }

  .weapon-list__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* 👇 여기만 스크롤 */
ion-tab.weapons .weapons-owned-wrap {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 10px 20px;
  background: #06090f;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 반응형 */
@media (max-width: 520px) {
  ion-tab.weapons .weapons-gacha-wrap::before {
    width: 140px;
    height: 140px;
  }

  ion-tab.weapons .weapons-gacha-btn::part(base) {
    padding: 8px 26px;
  }
}
:root {
  --ion-tab-bar-color-selected: #fff;
}

/* ----- BAR 자체를 유광 블랙으로 ----- */
ion-tab-bar {
  /* 높이·패딩을 먼저 고정 */
  height: 52px;
  padding: 0;
  display: flex;

  /* 검정 유광 그라데이션 */
  background: linear-gradient(#555 0%, #000 90%);
  /* 윗부분 얇은 빛 반사선 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.8);
}

/* ----- 버튼 공통 ----- */
ion-tab-button {
  flex: 1 1 0;
  /* 세 버튼을 같은 폭으로 */
  margin: 0;
  /* 빈 카드처럼 튀어나오는 margin 제거 */
  border-radius: 0;
  /* 모서리도 일단 제거 */
  background: none;
  /* 투명! */
  color: #d0d0d0;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
  flex-direction: column;
  position: relative;
  --ripple-color: transparent;

  >img {
    filter: grayscale(100%);
  }
}

/* ----- 선택된 버튼에만 엠보싱 + 밝은 블루 ----- */
ion-tab-button.tab-selected {
  /* 살짝 밝은 그라데이션으로 “눌린” 느낌 */
  background: linear-gradient(#4b4b4b 0%, #1e1e1e 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
  color: #ffffff;

  >img {
    filter: grayscale(0%);
  }
}

/* ----- 하이라이트 글로우 (선택 상태에서만 보이는 빛 반사) ----- */
ion-tab-button.tab-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  pointer-events: none;
}