/* v18 battle UI layer. Dark translucent surfaces with gold accents; scoped to
   #game so the technique gallery keeps the shared light theme. Loaded after
   ui-game.css and before mobile.css: layout anchors stay in mobile.css. */
#game{
 --v18-ink:#0e1a2b;
 --v18-ink-2:#16263f;
 --v18-gold:#e8c26a;
 --v18-gold-hi:#ffe7a3;
 --v18-gold-lo:#8a6a2f;
 --v18-red:#c8372d;
 --v18-teal:#3fb6a8;
 --v18-text:#f4efe3;
 --v18-muted:#a9b7c6;
 --v18-panel:linear-gradient(160deg,#16263fe6,#0e1a2bd9);
 --v18-edge:1px solid #e8c26a4d;
 --v18-lift:0 4px 14px #04101c59;
}
/* Panels shared by the battle HUD. */
#game .panel{
 background:var(--v18-panel);
 border:var(--v18-edge);
 border-radius:12px;
 box-shadow:var(--v18-lift),inset 0 1px 0 #ffffff1a;
 color:var(--v18-text);
 backdrop-filter:none;
}
/* Hero status block. */
#game .hero-panel{border-radius:12px 12px 12px 4px}
#game .avatar{
 width:46px;height:46px;border:2px solid var(--v18-gold);border-radius:10px;
 background:radial-gradient(circle at 50% 38%,#2c4460,#0d1b2b);
 box-shadow:0 0 0 2px #0e1a2b,0 0 12px #e8c26a33;
}
#game .hero-line b{font-size:var(--fs-title);color:var(--v18-gold-hi);letter-spacing:1px}
#game .hero-line strong{
 color:#0e1a2b;background:linear-gradient(#ffe7a3,#e8c26a);border-radius:5px;
 padding:2px 5px;font-size:var(--fs-nano);font-weight:900;box-shadow:0 1px 0 #8a6a2f;
}
#game .hp-track{
 height:12px;background:#060f19;border:1px solid #e8c26a3d;border-radius:6px;
 box-shadow:inset 0 1px 3px #00000080;overflow:hidden;
}
#game .hp-track i{
 background:linear-gradient(#7ef0b0,#22a366 62%,#16804d);
 box-shadow:inset 0 1px 0 #ffffffa6;
}
#game .hp-track span{color:#fff;font-size:var(--fs-cap);font-weight:900;line-height:11px;text-shadow:0 1px 2px #04101c,0 0 2px #04101c}
#game .xp-track{height:4px;background:#060f19;border-radius:3px}
#game .xp-track i{background:linear-gradient(90deg,#3fb6a8,#8de6d8)}
#game #insight{color:var(--v18-muted);font-size:var(--fs-nano);letter-spacing:.2px}
/* Campaign plate and timer. */
#game #chapter-hud{
 background:var(--v18-panel);border:var(--v18-edge);border-radius:10px;
 box-shadow:var(--v18-lift);padding:5px 16px 6px;
}
#game #chapter-name{font-size:var(--fs-title);color:var(--v18-gold-hi);letter-spacing:2px}
#game #region-name{color:var(--v18-muted);font-size:var(--fs-nano);letter-spacing:1px}
#game #region-pips i{background:#36495c;border-color:#0e1a2b}
#game #region-pips i.done{background:var(--v18-teal)}
#game #region-pips i.current{background:var(--v18-gold);box-shadow:0 0 6px #e8c26a99}
#game .timer{
 background:linear-gradient(#20334dd9,#0e1a2bd9);border:1px solid #e8c26a5c;
 border-radius:9px;box-shadow:var(--v18-lift);
}
#game #timer{
 color:var(--v18-gold-hi);font-variant-numeric:tabular-nums;
 text-shadow:0 1px 4px #000000a6;
}
#game #phase{color:var(--v18-muted)}
/* Score cluster. */
#game .kills{
 background:var(--v18-panel);border:1px solid #e8c26a3d;border-radius:9px;
 box-shadow:var(--v18-lift);
}
#game .kills>span,#game .kills>small{color:var(--v18-muted);font-size:var(--fs-nano);letter-spacing:.5px}
#game .kills>b{color:var(--v18-gold);font-size:var(--fs-title);line-height:1.1;font-variant-numeric:tabular-nums}
#game .kills strong{color:var(--v18-text)}
/* Round icon buttons. */
#game #pause-btn,#game #mobile-toolbar button,#game #camera-reset{
 background:linear-gradient(#1b2f49e6,#0e1a2be6);
 border:1px solid #e8c26a52;border-radius:50%;box-shadow:var(--v18-lift);
}
#game #camera-reset{border-radius:50%}
#game #pause-btn .game-icon,#game #mobile-toolbar .game-icon,
#game #camera-reset .game-icon{filter:invert(1) brightness(1.65) sepia(.35) saturate(2.4)}
#game #camera-reset small{color:var(--v18-gold-hi);font-size:var(--fs-nano)}
#game #camera-reset .game-icon{filter:none}
/* Minimap. */
#game #map-panel{
 border:2px solid #e8c26a75;background:#0a1622;
 box-shadow:var(--v18-lift),0 0 0 3px #0e1a2bcc;
}
#game #mini-map{border-radius:50%}
/* Joystick. */
#game #touch-pad{
 background:radial-gradient(circle,#1b3550 0%,#0d1b2b66 62%,#0d1b2b1a 100%);
 border:2px solid #e8c26a42;box-shadow:inset 0 0 22px #04101c8c;
}
#game #touch-base{
 border:1px solid #e8c26a3d;background:#f4efe30f;
 box-shadow:inset 0 3px 10px #00000059;
}
#game #touch-knob{
 border:2px solid #ffe7a3a8;
 background:radial-gradient(circle at 40% 32%,#dfe9f4,#93a9bf 70%,#5d748c);
 box-shadow:0 3px 10px #04101c8c,inset 0 1px 0 #fff;
}
#game #touch-pad>span{color:#dfe9f4cc;letter-spacing:1px}
#game #touch-pad.held{background:radial-gradient(circle,#2a4a68 0%,#12283e66 62%,#0d1b2b1a 100%)}
/* Bottom objective strip. */
#game .objective{
 background:linear-gradient(180deg,#16263fe0,#0e1a2bd9);
 border:1px solid #e8c26a3d;border-radius:8px;box-shadow:var(--v18-lift);
}
#game .objective b{color:var(--v18-text);font-weight:600}
/* Skill slots. */
#game .skill-slot{
 background:linear-gradient(#1b2f49f0,#0e1a2be6);
 border:1px solid #e8c26a52;border-radius:11px;
 box-shadow:var(--v18-lift),inset 0 1px 0 #ffffff14;
}
#game .skill-slot small{
 background:#0b1624;color:var(--v18-gold-hi);border:1px solid #e8c26a66;
}
#game .skill-slot>i{background:linear-gradient(90deg,var(--v18-teal),#8de6d8)}
#game .skill-slot.cooling{filter:saturate(.7)}
#game .skill-slot.empty{
 background:#0e1a2b59;border:1px dashed #e8c26a33;box-shadow:none;opacity:.6;
}
/* Action buttons. */
#game .ability{
 border:2px solid #cfeeffd9;
 background:radial-gradient(circle at 50% 26%,#7fe0fb,#2f9fd8 62%,#1d6ea6);
 box-shadow:0 4px 0 #0d3450a6,0 6px 16px #04101c7a,inset 0 2px 0 #ffffff8c;
 color:#08202f;
}
#game .ability.ultimate{
 background:radial-gradient(circle at 50% 26%,#ffd98d,#ea7a3f 58%,#c8372d);
 border-color:#ffe7a3d9;
 box-shadow:0 4px 0 #6f241b9c,0 6px 18px #04101c8a,inset 0 2px 0 #ffffffb3;
 color:#2a1206;
}
#game .ability.jump{
 background:radial-gradient(circle at 50% 26%,#c6f2b6,#5fb56a 58%,#2f7a4b);
 border-color:#e2f7d0d9;
 box-shadow:0 4px 0 #17452c9c,0 6px 16px #04101c7a,inset 0 2px 0 #ffffffa6;
 color:#0b2b16;
}
#game .ability.jump small{color:#0b2b16}
#game .ability.jump.combo{
 box-shadow:0 0 0 3px #ffe0a0cc,0 4px 14px #b5723c80,inset 0 2px 0 #ffffffb3;
}
#game .ability b{color:inherit;font-size:var(--fs-nano);letter-spacing:.5px}
#game .ability small{color:#06283a;font-weight:900}
#game .ability.ultimate small{color:#3d1405}
#game .ability>i{background:#04101c8f}
#game .ability.ready{
 box-shadow:0 0 0 3px #ffd98d99,0 4px 14px #b5723c80,inset 0 2px 0 #ffffffb3;
}
/* Other battle surfaces. */
#game #interact-prompt{
 background:linear-gradient(180deg,#ffe7a3,#e8c26a);color:#3a2708;
 border:1px solid #b98f3c;border-radius:10px;
 box-shadow:0 3px 0 #8a6a2f,0 6px 14px #04101c66;
}
#game #extraction-panel{
 background:linear-gradient(#123c32f0,#0b2620f0);color:#bff3dd;
 border:1px solid #3fb6a88c;border-radius:10px;box-shadow:var(--v18-lift);
}
#game #extraction-panel>div{background:#06231b}
#game #extraction-fill{background:linear-gradient(90deg,#3fb6a8,#8de6d8)}
#game #extraction-panel small{color:#8fcbb8}
#game #elite-health>div{
 background:linear-gradient(#16263fe6,#0e1a2bd9);border:1px solid #e8c26a3d;
 border-radius:8px;box-shadow:var(--v18-lift);
}
#game #elite-health b{color:var(--v18-gold-hi)}
#game #elite-health span{background:#060f19}
#game #elite-health i{background:linear-gradient(90deg,#e8564b,#ff9a7d)}
#game #boundary-warning{
 background:#8f231ceb;border:1px solid #ff9a7d99;border-radius:8px;
 box-shadow:var(--v18-lift);
}
/* Buttons inside overlays. */
#game .primary{
 background:linear-gradient(#ffd184,#e8a83f);
 border:1px solid #b98f3c;color:#33210a;
 box-shadow:0 3px 0 #8a6a2f,inset 0 1px 0 #fff4ce;
}
#game .secondary{
 background:#1b2f49;border:1px solid #e8c26a3d;color:var(--v18-text);
 box-shadow:0 2px 0 #071220;
}
#game .chip-button{
 background:#16263f;border:1px solid #e8c26a33;color:var(--v18-text);
}
@media(hover:hover){
 #game .primary:enabled:hover{background:linear-gradient(#ffe0a3,#f0b552)}
 #game .secondary:enabled:hover,#game .chip-button:enabled:hover{border-color:#e8c26a8c}
}
/* Dark overlay sheets and dialogs. */
#game .overlay{background:#06101ccc;backdrop-filter:blur(3px)}
#game .dialog,#game .event-dialog,#game .book-wrap{
 background:linear-gradient(165deg,#16263ffa,#0b1624fc);
 border:1px solid #e8c26a5c;border-radius:16px;color:var(--v18-text);
 box-shadow:0 18px 50px #000000a6,inset 0 1px 0 #ffffff14;
}
#game .dialog h2,#game .event-dialog h2,#game .book-wrap h2{color:var(--v18-gold-hi)}
#game .dialog>p,#game .event-dialog>p,#game .book-wrap>p{color:var(--v18-muted)}
#game .eyebrow{color:var(--v18-gold)}
#game .eyebrow em{background:#e8c26a1f;color:var(--v18-gold-hi)}
#game .footnote{color:#8496a8}
/* Prebattle loadout. */
#game #loadout{background:#050d16d9}
#game .loadout-wrap{background:linear-gradient(180deg,#0b1624,#081120)}
#game .loadout-wrap>.loadout-top{
 background:linear-gradient(90deg,#102033,#0b1624);color:var(--v18-text);
 border-bottom:1px solid #e8c26a3d;
}
#game .loadout-wrap>.loadout-top .eyebrow{color:var(--v18-gold)}
#game .loadout-wrap>.loadout-top h2{color:var(--v18-gold-hi);letter-spacing:3px}
#game .loadout-wrap>.loadout-top .chip-button{
 color:var(--v18-text);background:#ffffff0f;border-color:#e8c26a3d;
}
#game #chapter-picker button{
 background:#ffffff0a;color:#c8d6e4;border:1px solid #e8c26a33;border-radius:9px;
}
#game #chapter-picker button.selected{
 background:linear-gradient(#2a8f86,#1b6d67);color:#fff;border-color:#3fb6a8;
 box-shadow:0 2px 0 #0f4b46;
}
#game .prebattle-layout{background:transparent}
#game .selected-hero,#game .prebattle-roster{
 background:linear-gradient(170deg,#132132e6,#0c1726e6);
 border:1px solid #e8c26a38;border-radius:12px;
 box-shadow:inset 0 1px 0 #ffffff0f;
}
#game .chosen-heading{border-bottom:1px solid #e8c26a2e}
#game .chosen-heading .eyebrow{color:var(--v18-gold)}
#game .chosen-heading h3{color:var(--v18-gold-hi);letter-spacing:2px}
#game .chosen-heading b{color:var(--v18-muted)}
#game .chosen-heading canvas{
 background:radial-gradient(circle,#24405c,#0b1624);border:1px solid #e8c26a47;
 border-radius:12px;
}
#game .hero-story{color:var(--v18-muted)}
#game .hero-stats>div{
 background:#0a1422;border:1px solid #e8c26a26;border-radius:8px;
}
#game .hero-stats span{color:var(--v18-muted)}
#game .hero-stats strong{color:var(--v18-gold-hi);font-variant-numeric:tabular-nums}
#game .hero-skills article{
 background:#0a1422;border:1px solid #e8c26a1f;border-radius:8px;
}
#game .hero-skills article>span{color:var(--v18-gold)}
#game .hero-skills b{color:var(--v18-text)}
#game .hero-skills small{color:var(--v18-muted)}
#game .hero-skills em{color:var(--v18-teal)}
#game .hero-access{
 background:#123c32;color:#bff3dd;border:1px solid #3fb6a859;border-radius:8px;
}
#game .hero-access.unavailable{background:#3a2a12;color:#f2cf94;border-color:#e8c26a4d}
#game .roster-heading h3{color:var(--v18-gold-hi);letter-spacing:2px}
#game #roster-count{background:#e8c26a1f;color:var(--v18-gold-hi)}
#game .hero-card{
 background:linear-gradient(170deg,#132132,#0b1624);
 border:1px solid #e8c26a2e;border-radius:10px;color:var(--v18-text);
}
#game .hero-card b{color:var(--v18-text)}
#game .hero-card small{color:var(--v18-muted)}
#game .hero-card em{color:var(--v18-teal)}
#game .hero-card.selected{
 border:2px solid var(--v18-gold);padding:17px 4px 6px;
 background:linear-gradient(170deg,#1b3a4d,#102233);
 box-shadow:0 0 0 1px #e8c26a33,0 0 16px #e8c26a2e;padding-right:4px;
}
#game .hero-card.selected::after{
 background:var(--v18-gold);color:#231705;font-weight:900;
}
#game .hero-card.locked{background:#0a1320;border-color:#ffffff14}
#game .hero-card.locked canvas{filter:grayscale(.85) brightness(.7);opacity:.7}
#game .hero-card.locked em{color:#7d8ea0}
#game .roster-tier{background:#22364c;color:#b7c8d8}
#game .roster-tier.normal{background:#2b3f68;color:#c6d8ff}
#game .roster-tier.super{background:#4a3512;color:#ffd98d}
#game .solo-note{color:#8496a8}
#game .solo-note b{color:var(--v18-gold)}
#game #launch-row{
 background:linear-gradient(90deg,#0b1624,#102033);border-top:1px solid #e8c26a33;
}
#game .practice-options select{
 background:#0a1422;color:var(--v18-text);border:1px solid #e8c26a3d;border-radius:8px;
}
/* Upgrade choices. */
#game #upgrade{background:#040c15e0}
#game .upgrade-wrap{color:var(--v18-text)}
#game .upgrade-wrap>.eyebrow{color:var(--v18-gold)}
#game .upgrade-wrap h2{color:var(--v18-text);letter-spacing:2px}
#game .upgrade-wrap h2 span{color:var(--v18-gold-hi)}
#game .upgrade-wrap>p{color:var(--v18-muted)}
#game .upgrade-wrap>small{color:#7d8ea0}
#game .card{
 background:linear-gradient(170deg,#16263f,#0b1624);
 border:1px solid #e8c26a47;border-radius:12px;
 box-shadow:0 6px 0 #04090f,0 10px 26px #00000066,inset 0 1px 0 #ffffff14;
 color:var(--v18-text);
}
@media (hover:hover) and (pointer:fine){
 #game .card:enabled:hover{
  border-color:var(--v18-gold);background:linear-gradient(170deg,#1d3350,#0e1d2f);
 }
}
#game .card:enabled:active{transform:translateY(3px);box-shadow:0 3px 0 #04090f}
#game .card-icon{
 background:radial-gradient(circle at 42% 32%,#24405c,#0a1422);
 border:1px solid #e8c26a40;border-radius:12px;
}
#game .card-tag{
 background:#e8c26a1f;color:var(--v18-gold-hi);border:1px solid #e8c26a33;
 border-radius:5px;
}
#game .card h3{color:var(--v18-gold-hi);letter-spacing:1px}
#game .card p{color:var(--v18-muted)}
#game .card-value{
 border-top:1px solid #e8c26a2e;color:#8de6d8;
}
#game .card-choose{color:var(--v18-gold);font-weight:800}
/* Roster variant: the label column stays put, the right side carries icon and
   one short stat, so a phone shows every row without scrolling. */
#event-panel[data-variant=roster] .event-dialog{width:min(560px,94vw)}
#event-panel[data-variant=roster] #event-options{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start;
}
#event-panel[data-variant=roster] .event-group{
 grid-column:1 / -1;margin:6px 0 0;padding:2px 0 2px 8px;font-size:var(--fs-nano);font-weight:700;
 letter-spacing:2px;color:var(--v18-gold);border-left:3px solid var(--v18-gold);
}
#event-panel[data-variant=roster] .event-group:first-child{margin-top:0}
#event-panel[data-variant=roster] .event-option{
 display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;
 align-items:center;gap:0 8px;min-height:0;padding:7px 9px;border-radius:9px;
}
#event-panel[data-variant=roster] .event-icon{grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px}
#event-panel[data-variant=roster] .event-icon .game-icon{width:30px;height:30px}
#event-panel[data-variant=roster] .event-option b{font-size:var(--fs-lead);line-height:1.35;gap:0}
#event-panel[data-variant=roster] .event-option span:not(.event-icon){font-size:var(--fs-nano);line-height:1.4;margin-top:1px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#event-panel[data-variant=roster] .event-option[disabled]{opacity:.72}
#event-panel[data-variant=roster] .event-tag{
 margin-left:auto;padding:1px 5px;border-radius:4px;font-size:var(--fs-nano);font-style:normal;
 font-weight:700;letter-spacing:0;color:var(--v18-gold-hi);background:#e8c26a1f;
 border:1px solid #e8c26a33;white-space:nowrap;
}

/* The battle clock now sits inside the chapter plate instead of floating. */
#game #chapter-hud .timer.in-chapter{
 position:static;width:auto;min-width:0;padding:0;margin-top:1px;
 background:none;border:0;box-shadow:none;transform:none;
}
#game #chapter-hud .timer.in-chapter span{display:none}
#game #chapter-hud .timer.in-chapter small{display:none}
#game #chapter-hud .timer.in-chapter b{
 font-size:var(--fs-title);line-height:20px;margin:0;letter-spacing:2px;color:var(--v18-gold-hi);
}
/* Pause, result, event and collection rows. */
#game .build-chip{
 background:#1b2f49;border:1px solid #e8c26a33;color:#c8d6e4;
}
#game .result-grid{background:#0a1422;border:1px solid #e8c26a26}
#game .result-grid span{color:var(--v18-muted)}
#game .result-grid b{color:var(--v18-text)}
#game .result-grid>div+div{border-left:1px solid #e8c26a26}
#game .result-score{background:#3a2a12;border:1px solid #e8c26a52}
#game .result-score span{color:#f2cf94}
#game .result-score strong{color:var(--v18-gold-hi)}
#game .event-option{
 background:#0a1422;border:1px solid #e8c26a2e;color:var(--v18-text);
}
#game .event-option b{color:var(--v18-text)}
#game .event-option span{color:var(--v18-muted)}
#game .event-option:disabled span{color:#6c7d8d}
#game .event-info{background:#0f1c2c}
#game .nickname-editor input{
 background:#0a1422;color:var(--v18-text);border:1px solid #e8c26a3d;
}
#game .nickname-editor span{color:#f2cf94}
#game #ranking-body{
 background:#0a1422;border:1px solid #e8c26a2e;
}
#game th{background:#132132;color:var(--v18-gold-hi)}
#game td{border-bottom:1px solid #ffffff12;color:#cfdbe7}
#game td small{color:var(--v18-muted)}
#game tr.mine{background:#123c32}
#game tbody tr:nth-child(-n+3) td:first-child{color:var(--v18-gold)}
#game .collection-grid .hero-card{color:var(--v18-text)}
#game input,#game select{color:var(--v18-text)}
#game #load-status{
 background:radial-gradient(circle at 50% 40%,#132132,#050d16);
 color:var(--v18-gold-hi);
}
#game #load-status::before{color:var(--v18-gold)}
#game #error{
 background:#1a0f14;color:#ffd8d2;border-color:var(--v18-red);
}
/* Boss health: portrait, name, bar and the exact numbers, pinned under the
   chapter plate. Two rows at most so a double boss never covers the field. */
#game #elite-health{
 /* The chapter plate ends at 84px on every landscape size; at +62 the boss bar
    sat 14px inside it and the two dark sheets read as one smeared block. */
 position:fixed;top:calc(var(--safe-top) + 88px);left:50%;transform:translateX(-50%);
 display:flex;flex-direction:column;gap:4px;
 width:min(304px,44vw);max-width:none;pointer-events:none;z-index:6;
}
#game #elite-health .boss-row{
 display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px;
 margin:0;padding:4px 8px 4px 4px;
 background:linear-gradient(90deg,#0e1a2beb,#0e1a2bd9);
 border:1px solid #e8c26a5c;border-radius:8px;
 box-shadow:0 3px 10px #04101c80,inset 0 1px 0 #ffffff12;
}
#game #elite-health .boss-face{
 display:block;width:34px;height:34px;border-radius:6px;object-fit:cover;
 object-position:50% 16%;border:1px solid #e8c26a66;background:#0a1422;
}
#game #elite-health .boss-face.empty{background:radial-gradient(circle at 50% 40%,#1b2f49,#0a1422)}
#game #elite-health .boss-body{display:grid;gap:2px;min-width:0}
#game #elite-health .boss-body>b{
 font-size:var(--fs-lead);font-weight:800;letter-spacing:.5px;color:var(--v18-gold-hi);
 /* An implicit grid row sizes to the line box. Without a line-height the
    row collapsed to 0px and the name clipped to nothing. */
 line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#game #elite-health .boss-track{
 display:block;height:6px;margin:0;background:#060f19;
 border:1px solid #ffffff1f;border-radius:4px;overflow:hidden;
}
#game #elite-health .boss-track>i{
 display:block;height:100%;border-radius:3px;
 background:linear-gradient(90deg,#e8564b,#ff9a7d);
}
#game #elite-health .boss-body>small{
 font-size:var(--fs-nano);line-height:1.3;color:#a9b7c6;
 font-variant-numeric:tabular-nums;text-align:right;
}
/* Objective tracking bar: one tracked point, icon plus distance, no centre text.
   It sits in the left column so it never covers the hero or the action buttons. */
#game #guide-bar{
 position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 78px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;
 pointer-events:none;z-index:14;
 padding:4px 10px 4px 7px;max-width:min(40vw,230px);
 background:linear-gradient(90deg,#0e1a2bd9,#0e1a2b8c 70%,#0e1a2b00);
 border-left:3px solid var(--v18-gold);border-radius:4px 10px 10px 4px;
 color:var(--v18-text);line-height:1.3;
}
#game #guide-bar.hidden{display:none}
#game #guide-icon{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0}
#game #guide-icon .game-icon{--icon-size:22px}
#game #guide-name{font-size:var(--fs-body);font-weight:700;color:var(--v18-gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game #guide-distance{font-size:var(--fs-nano);color:var(--v18-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#game #guide-arrow{
 display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;
 font-size:var(--fs-cap);color:var(--v18-ink);background:var(--v18-gold);border-radius:50%;
 transform-origin:50% 50%;transition:transform .12s linear;
}
#game #guide-bar.done{border-left-color:var(--v18-teal);opacity:.8}
#game #rotate-gate{background:radial-gradient(circle at 50% 40%,#16263f,#050d16);color:var(--v18-text)}
#game #rotate-gate h2{color:var(--v18-gold-hi)}
#game #rotate-gate small{color:var(--v18-muted)}
#game #rotate-gate img{filter:brightness(1.5)}
/* Disabled controls must remain distinct from the gold enabled state. */
#game :is(.primary,.secondary,.chip-button,.event-option):disabled,
#game .loadout-wrap>.loadout-top .chip-button:disabled{
 background:#202c3b;border-color:#465465;color:#93a2b2;
 box-shadow:none;opacity:.72;transform:none;
}

/* Clamped state: the label sits on the safe band's edge, so it gains a small
   arrow-facing nudge and a slightly stronger plate to read over the battlefield. */
#game #guide-bar.offscreen{border-left-color:var(--v18-gold-hi);box-shadow:0 3px 12px #04101c8c,inset 0 0 0 1px #e8c26a33}
#game #guide-bar.offscreen #guide-arrow{background:var(--v18-gold-hi)}

/* Squad strip. Compact by design: the field owns the middle of the screen, so
   this is two short lines under the score cluster rather than a side panel. */
#game #squad-hud{
 display:block;position:fixed;
 left:var(--safe-left);top:calc(var(--safe-top) + 104px);
 width:min(198px,40vw);max-width:none;padding:6px 9px;z-index:9;
 background:var(--v18-panel);border:var(--v18-edge);border-radius:9px;
 box-shadow:var(--v18-lift);color:var(--v18-text);pointer-events:none;
}
#game #squad-hud .squad-line{display:flex;align-items:baseline;gap:5px;min-width:0}
#game #squad-hud .formation-row{border-top:1px solid #e8c26a26;margin-top:4px;padding-top:4px}
#game #squad-hud button{min-height:0;height:20px;padding:0 6px;font-size:var(--fs-nano);line-height:1;border-radius:5px;border:1px solid #e8c26a33;background:#12213299;color:var(--v18-text);box-shadow:none;pointer-events:auto}
#game #squad-hud #formation-btn{display:none}
#game #squad-hud .squad-line{gap:3px}
#game #squad-hud #shield-status,#game #squad-hud #formation-pulse{line-height:1.25}
#game #squad-hud #deputy-name,
#game #squad-hud #formation-name{
 font-size:var(--fs-body);line-height:1.3;font-weight:700;letter-spacing:.5px;
 color:var(--v18-gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#game #squad-hud #deputy-cooldown,
#game #squad-hud #formation-pulse,
#game #squad-hud #shield-status{
 display:block;font-size:var(--fs-nano);line-height:1.4;color:var(--v18-muted);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#game #squad-hud #squad-action{
 display:block;font-size:var(--fs-nano);line-height:1.3;margin:2px 0 0;color:var(--v18-text);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Five pips are cheaper to read than "3/5" and survive a glance mid-fight. */
#game #squad-hud .guard-pips{display:inline-flex;gap:3px;margin-right:5px;vertical-align:-1px}
#game #squad-hud .guard-pips i{
 display:block;width:6px;height:6px;border-radius:50%;
 background:#36495c;border:1px solid #0e1a2b;text-indent:-99px;overflow:hidden;
}
#game #squad-hud .guard-pips i.filled{background:var(--v18-teal);box-shadow:0 0 4px #3fb6a880}
#game #squad-hud .guard-pips i.lost{background:#7a2f2f}

/* Combo stage caption. Sits just above the skill row, in the band between the
   guide bar and the slots, so it never covers the field. */
#game #combo-text{
 position:fixed;left:50%;transform:translateX(-50%);
 bottom:calc(var(--safe-bottom) + 62px);z-index:7;
 display:block;padding:2px 10px;border-radius:999px;
 background:#0e1a2bcc;border:1px solid #e8c26a33;
 color:var(--v18-gold-hi);font-size:var(--fs-cap);line-height:1.5;letter-spacing:2px;
 white-space:nowrap;pointer-events:none;
 opacity:0;transition:opacity .18s ease-out;
}
#game #combo-text.show{opacity:1}
@media(max-height:365px){
 #game #combo-text{bottom:calc(var(--safe-bottom) + 56px);font-size:var(--fs-nano);letter-spacing:1px}
}