/* Shared component skin: silver thorns, amethyst crystal, butterfly light. */
:root{--component-panel:url('../assets/ui/components/panel.png');--component-thumb:url('../assets/ui/components/thumb.png');--component-butterfly:url('../assets/ui/components/butterfly.png');--component-arrow:url('../assets/ui/components/arrow.png');--component-check:url('../assets/ui/components/check.png')}
/* Keep OS/native wheel, touch and thumb dragging. Chromium supports painted scrollbar parts. */
html body,html body *{scrollbar-width:auto;scrollbar-color:#ad85ce #17121f}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#100c17,#2b2037,#100c17);border:1px solid #a790b44f;border-radius:7px}
::-webkit-scrollbar-thumb{min-height:38px;min-width:38px;border:3px solid transparent;border-radius:7px;background:var(--component-thumb) center/28px 40px no-repeat,linear-gradient(#685076,#cba3e1,#685076);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:#dcb6f3;box-shadow:inset 0 0 7px #ead5ff}
::-webkit-scrollbar-corner{background:#100c17}
.modal-body,.starter-gallery,.event-card-picker,.flow-picker,.fan-hand{scrollbar-gutter:stable}
/* Nine-slice the generated rectangular frame so corners never cover live text. */
#ui-tooltip,#toast,.modal-notice{border:12px solid transparent!important;border-image:var(--component-panel) 26% 12% fill / 12px / 0 stretch!important;background:#17101ff5!important;box-shadow:0 9px 28px #03010890!important;color:#eadcf3;line-height:1.85;overflow-wrap:anywhere}
#ui-tooltip{padding:10px 14px!important;max-width:min(310px,calc(100vw - 24px));font-size:12px}
#ui-tooltip:before{content:''!important;display:none!important}
#toast,.modal-notice{padding:10px 16px 10px 43px!important;position:relative}
#toast{position:fixed;max-width:min(560px,calc(100vw - 28px))}
#toast:before,.modal-notice:before{content:''!important;position:absolute;left:9px;top:calc(50% - 12px);width:24px;height:24px;background:var(--component-butterfly) center/contain no-repeat}
:is(#toast,.modal-notice)[data-tone=success]{color:#cdebdc;border-image:none!important;border:1px solid #80c4a17d!important;background:linear-gradient(100deg,#152721fa,#13151ef5)!important}
:is(#toast,.modal-notice)[data-tone=error]{color:#ffcad8;border-image:none!important;border:1px solid #e975987d!important;background:linear-gradient(100deg,#351724fa,#17111ff5)!important}
:is(#toast,.modal-notice)[data-tone=success]:before{background-image:var(--component-check)}
:is(#toast,.modal-notice)[data-tone=error]:before{filter:hue-rotate(55deg) saturate(1.5)}
/* Switch and selection states have a shape distinction as well as a color distinction. */
:is(#app,#modal) button.setting-switch[data-button-family=toggle]{position:relative;width:62px!important;min-width:62px;height:32px!important;min-height:32px;border-radius:18px!important;border:1px solid #d1bddb8c!important;background:#15101e!important;box-shadow:inset 0 0 9px #07050c,0 0 0 3px #ba97d211!important;padding:0!important}
:is(#app,#modal) .setting-switch>i{position:absolute!important;left:4px!important;top:4px!important;width:22px!important;height:22px!important;border-radius:50%;background:#9988a6!important;box-shadow:0 0 5px #c4a2db66!important;transform:none!important;transition:left .18s}
:is(#app,#modal) .setting-switch[aria-checked=true]{border-color:#d7b3f0!important;background:#36223e!important}
:is(#app,#modal) .setting-switch[aria-checked=true]>i{left:34px!important;background:var(--component-butterfly) center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 4px #dabaff)}
.setting-switch:before,.setting-switch:after{display:none!important}
:is(.settings-tabs,.catalog-tabs,.relic-filters) button[aria-pressed=true]{text-shadow:0 0 10px #c89be5}
input[type=checkbox]{appearance:none;width:22px;height:22px;border:1px solid #b59acb;background:#17101f;vertical-align:middle}
input[type=checkbox]:checked{background:var(--component-check) center/contain no-repeat;border-color:transparent}
input[type=radio]{appearance:none;width:20px;height:20px;border:1px solid #c3a7d9;border-radius:50%;background:#17101f;vertical-align:middle}
input[type=radio]:checked{background:radial-gradient(circle,#dcb8f4 45%,#3a2848 52%,#17101f 68%);box-shadow:0 0 7px #c48ae75c}
/* Page controls remain separate real buttons; normal page scrolling is untouched. */
.component-scroll-nav{flex:none;display:flex;align-items:center;justify-content:center;gap:18px;margin:0 22px 9px;padding:8px 0 0;border-top:1px solid #ab8db22e}
.component-scroll-nav[hidden]{display:none}
.component-scroll-nav output,.component-gallery-position{min-width:50px;text-align:center;color:#c9afd9;font:12px Georgia;letter-spacing:2px}
:is(#app,#modal) button.component-control[data-button-family],:is(#app,#modal) .gallery-navigation button[data-button-family]{position:relative;flex:none;width:38px;min-width:38px;height:38px;min-height:38px;padding:0!important;background:var(--component-arrow) center/contain no-repeat!important;border:0!important;box-shadow:none!important}
button.component-control>span,.gallery-navigation button{font-size:0!important}
.component-control[data-ui-action=scroll-down]{transform:rotate(180deg)}
.gallery-navigation button[data-id=prev]{transform:rotate(-90deg)}
.gallery-navigation button[data-id=next]{transform:rotate(90deg)}
.gallery-navigation>div{align-items:center}
.component-control:hover:not(:disabled){filter:brightness(1.3) drop-shadow(0 0 5px #bd8de07a)}
.component-control:disabled{opacity:.35!important}
/* Native range input preserves drag, touch, arrows, Home and End. */
.component-range{display:flex;align-items:center;gap:9px;flex:1;min-width:0;max-width:330px}
.component-range input[type=range]{appearance:none;min-width:55px!important;width:100%!important;height:32px!important;padding:0!important;border:0!important;background:transparent!important;cursor:pointer;flex:1}
input[type=range]::-webkit-slider-runnable-track{height:6px;border:1px solid #b6a1ca80;border-radius:5px;background:linear-gradient(90deg,#ae7dcd var(--range-fill,70%),#302338 var(--range-fill,70%))}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:32px;margin-top:-14px;background:var(--component-thumb) center/50px 40px no-repeat;border:0;filter:drop-shadow(0 0 4px #c997e880)}
input[type=range]::-moz-range-track{height:5px;background:#302338;border:1px solid #b6a1ca80;border-radius:4px}
input[type=range]::-moz-range-progress{background:#ae7dcd;height:5px}
input[type=range]::-moz-range-thumb{width:22px;height:32px;background:var(--component-thumb) center/50px 40px no-repeat;border:0}
:is(#app,#modal) .component-range button.component-control[data-button-family]{width:30px;min-width:30px;height:34px;min-height:34px;background:var(--button-seal) center/contain no-repeat!important;color:#e4c9f5}
.component-range button.component-control>span{font:19px Georgia!important}
.volume-setting output{min-width:39px;white-space:nowrap;color:#e1c7ef!important;font-variant-numeric:tabular-nums}
.journey-seed input,select,textarea{border:1px solid #b497c880!important;border-radius:2px!important;background:linear-gradient(110deg,#211629,#13101a)!important;color:#eadcf3!important;padding:12px 14px!important;box-shadow:inset 0 0 0 3px #ad8cc00b}
.journey-seed input:focus,select:focus,textarea:focus{outline:1px solid #d4adf0!important;outline-offset:3px;box-shadow:0 0 13px #ad72d33b}
input::placeholder,textarea::placeholder{color:#9887a5!important}
input[aria-invalid=true]{border-color:#ee7997!important}
.composition-row i,.route-progress [role=progressbar]{border:1px solid #b99bce57!important;border-radius:4px;background:#160f1e!important;overflow:visible}
.composition-row em,.route-progress [role=progressbar]>i{background:linear-gradient(90deg,#4c345f,#b98ed4)!important;position:relative;border-radius:3px}
.component-painted-icon{object-fit:contain;pointer-events:none}
@media(max-width:600px){.component-range{gap:4px;max-width:220px}.volume-setting{gap:9px!important;flex-wrap:wrap}.volume-setting>span:first-child:not(.component-range){flex-basis:100%}.component-gallery-position{min-width:36px;font-size:10px;letter-spacing:0}.gallery-navigation>div{gap:4px!important}.component-scroll-nav{margin:0 16px 8px;gap:15px}#toast{padding:9px 12px 9px 36px!important;font-size:11px}.modal-notice{margin:0 16px 9px}#ui-tooltip{font-size:11px}.component-range button.component-control{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){.setting-switch>i{transition:none!important}}
.reduce-effects .setting-switch>i{transition:none!important}

@supports selector(::-webkit-scrollbar){html body,html body *{scrollbar-color:auto}}
.starter-gallery{scroll-padding-inline:10px}
:is(#app,#modal) button.component-control[data-button-family],:is(#app,#modal) .gallery-navigation button[data-button-family]{background-size:140% 140%!important}
:is(#app,#modal) .component-range button.component-control[data-button-family]{background-size:contain!important}
:is(#app,#modal) .setting-switch[aria-checked=true]>i{background-size:145% 145%!important}
:is(#toast,.modal-notice)[data-tone=success]{border:12px solid transparent!important;border-image:var(--component-panel) 26% 12% fill / 12px / 0 stretch!important;box-shadow:inset 3px 0 #87cba466,0 9px 28px #03010890!important}
:is(#toast,.modal-notice)[data-tone=error]{border:12px solid transparent!important;border-image:var(--component-panel) 26% 12% fill / 12px / 0 stretch!important;box-shadow:inset 3px 0 #ef87a066,0 9px 28px #03010890!important}
:is(#toast,.modal-notice)[data-tone=success]:before{background-size:200% 200%}
#toast,.modal-notice{background-clip:padding-box!important}

/* Preserve selection semantics and plaque styling without corner checkboxes. */
:is(#app,#modal) button[data-selection-control]:not(.hand-card){position:relative}





:is(#app,#modal) .roster-card[data-selection-control]{clip-path:none}
.roster-card[data-selection-control]>i{display:none}
body.in-battle .fan-hand .card-surface[data-action=swap] .card-bottom{display:none}

/* Pointed, transparent-edged choice plaques reuse the generated star-thorn artwork. */
#app :is(.discipline,.journey-difficulty button)[data-selection-control]{--choice-art:var(--button-silver);position:relative;isolation:isolate;border:0!important;border-image:none!important;border-radius:0;background:transparent!important;box-shadow:none!important;padding:32px 46px 38px!important;min-height:116px;text-align:center;transition:filter .18s;color:#d8c7e4}
#app :is(.discipline,.journey-difficulty button)[data-selection-control]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--choice-art) center/100% 160% no-repeat;opacity:.75}
#app :is(.discipline,.journey-difficulty button)[aria-pressed=true]{--choice-art:var(--button-primary);color:#f2ddff}
#app :is(.discipline,.journey-difficulty button)[aria-pressed=true]::before{opacity:1;filter:drop-shadow(0 0 7px #bb80dc40)}
#app :is(.discipline,.journey-difficulty button):hover:not(:disabled)::before{opacity:1;filter:brightness(1.15) drop-shadow(0 0 6px #bd8ee04d)}
#app .discipline b{font-size:14px;line-height:1.6;letter-spacing:1px}
#app .discipline small{font-size:10px;line-height:1.6;letter-spacing:0;margin-top:7px}
#app .journey-difficulty small{line-height:1.8;margin-top:8px;text-align:left}
#app .discipline-options{flex-direction:column;gap:6px}
#app .discipline[data-selection-control]{padding:26px 46px 32px!important;min-height:106px}

@media(max-width:900px){#app .discipline-options,#app .journey-difficulty{flex-direction:column;gap:4px}#app :is(.discipline,.journey-difficulty button)[data-selection-control]{width:100%;min-height:108px;padding:28px 45px 34px!important}#app .discipline b{font-size:13px}#app .journey-difficulty small{font-size:10px}}