/* Approved 2026-11-11 component family. This final migration layer replaces
   the old raster skins. Two #game IDs keep old per-screen styles from reviving
   them; :where leaves variants and states simple to override here. */
#game{
 --bold-primary:url('./assets/ui/bold/primary.svg');
 --bold-primary-down:url('./assets/ui/bold/primary-pressed.svg');
 --bold-secondary:url('./assets/ui/bold/secondary.svg');
 --bold-secondary-down:url('./assets/ui/bold/secondary-pressed.svg');
 --bold-danger:url('./assets/ui/bold/danger.svg');
 --bold-danger-down:url('./assets/ui/bold/danger-pressed.svg');
 --bold-disabled:url('./assets/ui/bold/disabled.svg');
 --v18-ink:#111827;--v18-ink-2:#1b2942;--v18-gold:#ffce00;
 --v18-gold-hi:#fff0a3;--v18-text:#f7f8fc;--v18-muted:#b8c5d7;
 --v18-teal:#3db8cc;--v18-red:#df4b37;--ui-focus:#ffdf56;
 --v18-panel:linear-gradient(160deg,#24334bed,#111b2eee);
 color-scheme:dark;
}
#game#game :is(button,a.ui-button):where(:not(.login-hit,.hero-card,.card,.ability,.skill-slot)){
 border:12px solid transparent;border-image:var(--button-face,var(--bold-secondary)) 20 fill / 12px / 0 stretch;
 background:none;border-radius:0;box-shadow:none;color:var(--button-ink,#fff);
 font-family:var(--ui-font);font-weight:850;line-height:1.25;text-align:center;text-decoration:none;
 text-shadow:var(--button-shadow,0 1px 2px #000,1px 0 1px #152032,-1px 0 1px #152032);
 padding:0 7px;min-height:44px;touch-action:manipulation;vertical-align:middle;
 transition:filter .12s,transform .08s;cursor:pointer;filter:none;
}
#game#game :is(.primary,#nickname-save,#interact-prompt,#abandon-cancel,#resume-run){
 --button-face:var(--bold-primary);--button-down:var(--bold-primary-down);--button-ink:#121723;--button-shadow:none;
}
#game#game :is(#restart-pause,#resume-abandon,#abandon-confirm){
 --button-face:var(--bold-danger);--button-down:var(--bold-danger-down);--button-ink:#fff;--button-shadow:0 1px 2px #34070b;
}
#game#game :is(button,a.ui-button):where(:not(.login-hit,.hero-card,.card,.ability,.skill-slot)):active:where(:not(:disabled,[aria-disabled=true])){
 border-image-source:var(--button-down,var(--bold-secondary-down));transform:translateY(2px);filter:none;
}
#game#game :is(button,a.ui-button):where(:not(.login-hit,.hero-card,.card,.ability,.skill-slot)):is(:disabled,[aria-disabled=true]){
 border-image-source:var(--bold-disabled);color:#bfc3ca;opacity:1;filter:none;text-shadow:0 1px 1px #343a43;
 transform:none;cursor:not-allowed;
}
#game#game :is(button,a.ui-button,input,select):focus-visible{outline:3px solid #fff2a3;outline-offset:2px;filter:drop-shadow(0 0 3px #0a152b)}
@media(hover:hover){
 #game#game :is(button,a.ui-button):where(:not(.login-hit)):hover:where(:not(:disabled,[aria-disabled=true])){filter:brightness(1.1)}
}
#game#game :is(.primary,.secondary){font-size:16px}
#game#game .chip-button{font-size:13px}
#game#game :is(.primary,.secondary,.chip-button) .game-icon{flex-shrink:0}
#game#game #chapter-picker button{font-size:12px;gap:5px;padding:0 4px;min-height:44px}
#game#game #chapter-picker button.selected{
 --button-face:var(--bold-primary);--button-down:var(--bold-primary-down);--button-ink:#121723;--button-shadow:none;
}
#game#game #chapter-picker button small{font-size:10px;color:inherit;opacity:1}
#game#game :is(.loadout-top,.pause-tools) .chip-button{min-height:44px}
#game#game .loadout-wrap>.loadout-top .chip-button{font-size:12px;padding:0 3px}
#game#game :is(#resume-choice,#abandon-dialog) .dialog{display:grid;gap:10px;max-width:540px}
#game#game :is(#resume-choice,#abandon-dialog) .dialog :is(h2,p){margin:0 0 4px}
#game#game :is(#resume-choice,#abandon-dialog) .dialog button{width:100%}

/* Quiet navy panels make the saturated action colours carry the hierarchy. */
#game#game :is(.dialog,.event-dialog,.book-wrap,.selected-hero,.prebattle-roster,.panel,#chapter-hud,#squad-hud){
 background:var(--v18-panel);border:2px solid #060b15;border-radius:9px;
 box-shadow:inset 0 0 0 1px #60728a80,0 4px 0 #050b16b3;color:var(--v18-text);
}
#game#game .loadout-wrap{background:#111827}
#game#game :is(.loadout-wrap>.loadout-top,#launch-row){background:#1b2942;border-color:#52637b}
#game#game :is(.dialog,.event-dialog,.book-wrap) h2{color:#fff1b7}
#game#game :is(.dialog,.event-dialog,.book-wrap)>p{color:#c3cfe0}
#game#game :is(.hero-card,.card){
 background:linear-gradient(#273950,#19263c);border:3px solid #080f1c;border-radius:7px;
 box-shadow:inset 0 0 0 1px #7f94ad,0 3px 0 #050a14;color:#f7f8fc;
}
#game#game :is(.hero-card,.card):enabled:active{transform:translateY(2px);filter:brightness(.86)}
#game#game .hero-card.selected{border-color:#ffcf24;background:linear-gradient(#3a4353,#243449);box-shadow:inset 0 0 0 1px #fff0b0,0 3px 0 #6a4b12}
#game#game .hero-card.selected::after{background:#ffcf24;color:#131927}
#game#game .hero-card.locked{background:#202937;border-color:#0b1220}
#game#game .hero-card.locked em{color:#a9b5c6}
#game#game .hero-card :is(b,small){color:#f1f5fc}
#game#game .card :is(h3,.card-value){color:#fff0a3}
#game#game .card p{color:#d1daea}
#game#game .card-tag{background:#3e526d;color:#fff;border-color:#90a5c1}
#game#game .card-choose{align-self:stretch;text-align:center;background:linear-gradient(#ffcb00 50%,#ffe331 50%);border:2px solid #080c16;border-radius:4px;padding:5px 8px;color:#111827;font-size:12px;box-shadow:inset 0 0 0 1px #fff09b;text-shadow:none}
#game#game button.event-option{padding:4px 5px;text-align:left;min-height:66px}
#game#game button.event-option :is(b,span){color:inherit;text-shadow:inherit}
#game#game button.event-option>span:not(.event-icon){font-weight:500;color:#e5edf8}
#game#game button.event-option:disabled>span:not(.event-icon){color:#c0c5cf}
#game#game .event-info{background:#172238;border:1px solid #506179;border-radius:6px;color:#d7e0ef;box-shadow:none}
#game#game #event-panel[data-variant=roster] button.event-option{padding:1px 3px;min-height:52px}
#game#game .event-tag{background:#1b2942;color:#f9e593;border-color:#6a7b91}
#game#game :is(input:not([type=range]):not([type=checkbox]),select){background:#19273e;border:2px solid #71869f;border-radius:5px;color:#fff;min-height:44px}
#game#game input[type=range]{accent-color:#ffce00}
#game#game :is(.result-grid,#ranking-body){background:#172238;border:1px solid #52637b;border-radius:6px}
#game#game .result-score{background:#3b321b;border:2px solid #cba644;border-radius:6px}
#game#game .result-score strong{color:#ffda43}
#game#game th{background:#2b3d57;color:#fff0a3}
#game#game td{border-color:#3f5067;color:#e8edf6}
#game#game .build-chip{background:#34475f;border-color:#7790ad;border-radius:4px;color:#edf2fa}

/* Health, experience and timed progress retain their real runtime widths. */
#game#game :is(.hp-track,.xp-track,.boss-track,#extraction-panel>div){
 background:#1b2c4a;border:2px solid #dfbf7f;border-radius:999px;overflow:hidden;
 box-shadow:0 0 0 1px #101524,inset 0 1px 3px #060f27;box-sizing:border-box;
}
#game#game .hp-track{height:16px}
#game#game .hp-track i,#game#game #elite-health .boss-track>i{background:linear-gradient(#f76b45 0%,#e95637 48%,#d54530 50%,#bd352d 100%);border-radius:999px;box-shadow:inset 0 1px 1px #ffa47b}
#game#game .hp-track span{font-size:10px;line-height:12px;font-weight:900;color:#fff;text-shadow:0 1px 2px #541c1b}
#game#game .xp-track{height:8px;border-width:1px;margin-top:3px}
#game#game .xp-track i{background:linear-gradient(#51d2e4,#32b4cc 50%,#2a9ab9 51%);height:100%;border-radius:999px}
#game#game #extraction-panel>div{height:12px}
#game#game #extraction-fill{background:linear-gradient(#857dd6,#6258b0 50%,#53479d 51%);height:100%;border-radius:999px}
#game#game #elite-health .boss-track{height:10px;border-width:1px}
#game#game :is(#pause-btn,#mobile-toolbar button,#camera-reset){border-width:9px;border-image-width:9px;padding:0;min-height:44px;min-width:44px;border-radius:0}
#game#game :is(#pause-btn,#mobile-toolbar) .game-icon{width:24px;height:24px}
#game#game #camera-reset{padding:0;gap:0}
#game#game #camera-reset .game-icon{width:20px;height:20px}
#game#game #camera-reset small{color:#fff;font-size:9px;text-shadow:0 1px 2px #000}
#game#game #interact-prompt{text-align:left;gap:5px;padding:2px 5px}
#game#game #interact-prompt :is(b,small){color:#141b29;text-shadow:none}
#game#game .skill-slot{background:linear-gradient(#405975,#243950);border:3px solid #07101e;border-radius:7px;box-shadow:inset 0 0 0 1px #a2b6cf,0 2px 0 #030812}
#game#game .skill-slot small{background:#17253b;color:#fff;border-color:#d9bd83}
#game#game .skill-slot>i{background:#40bed4}
#game#game .skill-slot.empty{background:#1b273a;border-style:dashed;box-shadow:none;opacity:.6}
#game#game .ability{border:3px solid #07101e;background:linear-gradient(#57718d 0%,#435d79 50%,#354d6a 51%);box-shadow:inset 0 0 0 2px #b4c7da,0 4px 0 #020812;color:#fff;text-shadow:0 1px 2px #000}
#game#game .ability.jump{background:linear-gradient(#4f94a3,#316f83 50%,#285b74 51%);color:#fff}
#game#game .ability.ultimate{background:linear-gradient(#ffd52a,#ffc900 50%,#ffe335 51%);box-shadow:inset 0 0 0 2px #fff0a2,0 4px 0 #755017;color:#172031;text-shadow:none}
#game#game .ability :is(b,small){color:inherit;text-shadow:inherit}
#game#game .ability>i{background:#111b32b8}
#game#game .ability.ready{box-shadow:inset 0 0 0 2px #fff6b7,0 0 0 3px #ffe95780,0 4px 0 #755017}
#game#game .ability:active{transform:translateY(2px);filter:brightness(.86)}
#game#game #squad-hud #army-btn{font-size:10px;border-width:6px;border-image-width:6px;padding:0 4px;min-height:28px;height:28px;white-space:nowrap}
#game#game #squad-hud #army-btn::after{content:'';position:absolute;inset:-8px 0;min-height:44px}
#game#game #squad-hud #army-btn{position:relative}

/* The login footer is a real command strip. It covers the baked-in footer in
   the approved picture and keeps its 44px controls clear of the main art UI. */
#game#game #login-extra-actions{position:absolute;z-index:4;inset:auto 0 0;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;margin:0;padding:10px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));height:70px;border:0;border-top:2px solid #d9bd83;background:linear-gradient(#25354ceF,#111b2efa);box-shadow:0 -3px 12px #12233844;pointer-events:auto}
#game#game #login-extra-actions::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(#9a90e4,#6256ae);pointer-events:none}
#game#game #account-status{flex:1;max-width:240px;width:auto;margin:0;font:12px/1.45 var(--ui-font);color:#c8d6e8;text-shadow:none;text-align:left;max-height:3em;overflow:hidden}
#game#game #login-extra-actions .login-link{display:inline-flex;align-items:center;justify-content:center;min-width:126px;height:44px;min-height:44px;margin:0;padding:0 5px;font-size:14px;font-weight:850;line-height:1.2;text-decoration:none;white-space:nowrap;color:var(--button-ink,#fff);background:none;box-shadow:none;border-radius:0}
#game#game #login-extra-actions .login-link{width:auto;flex:0 0 auto}
#game#game #login-extra-actions #signin{min-width:172px}
#game#game #login-extra-actions #resume-run{min-width:184px}
#game#game #intro .login-loader{position:absolute;inset:auto 0 0;height:70px;padding:12px 9%;z-index:6;color:#fff;background:linear-gradient(#25354c,#111b2e);border-top:2px solid #d9bd83}
#game#game #intro .login-loader progress{height:12px;border:2px solid #d9bd83;background:#1b2c4a}
#game#game #intro .login-loader progress::-webkit-progress-bar{background:#1b2c4a}
#game#game #intro .login-loader progress::-webkit-progress-value{background:linear-gradient(#8c82da,#6153ad)}
#game#game #intro .login-loader progress::-moz-progress-bar{background:linear-gradient(#8c82da,#6153ad)}
#game#game #intro:has(#login-stage[data-ready=true]) .login-loader{display:none}
#game#game .login-settings-dialog{background:linear-gradient(#25354c,#111b2e);border:2px solid #7b8ba4;border-radius:9px;box-shadow:0 12px 50px #050b17b3;color:#fff}
#game#game .login-settings-dialog button{background:none;box-shadow:none;border-radius:0;padding:0 6px;font-size:14px}
#game#game .login-settings-dialog #login-settings-close{--button-face:var(--bold-primary);--button-down:var(--bold-primary-down);--button-ink:#111827;--button-shadow:none}
#game#game .login-settings-dialog h2{color:#fff0a3}
#game#game #login-retry{min-height:32px;border-width:7px;border-image-width:7px;font-size:12px}
@media(max-width:740px){
 #game#game #login-extra-actions{gap:8px;padding-left:12px;padding-right:12px}
 #game#game #account-status{font-size:11px;max-width:180px}
 #game#game #login-extra-actions .login-link{min-width:112px;font-size:13px}
 #game#game #login-extra-actions #signin{min-width:156px}
 #game#game #login-extra-actions #resume-run{min-width:172px}
 #game#game #chapter-picker button{gap:3px;font-size:11px}
 #game#game #chapter-picker .game-icon{width:18px;height:18px}
 #game#game #chapter-picker small{display:none}
}
@media(max-height:360px){#game#game #login-extra-actions,#game#game #intro .login-loader{height:58px;padding-top:6px;padding-bottom:6px}}