/* =====================================================================================================
   UI theme "Bridge Terminal", part 2: battle HUD (toolbar, top HUD, overhead plates, threat console, TIME, hand).
   Spec: docs/UI.md §4-§5. No .cas rules, no !important.
   ===================================================================================================== */
/* phase colour drives the banner */
.stage { --ph: var(--text); }
.stage.is-timestop { --ph: var(--stop); }
.stage.is-gapbt { --ph: var(--bt); }
.stage.is-hit, .stage.is-knock { --ph: var(--time); }
.stage.is-enemy-turn, .stage.is-defeat { --ph: var(--threat); }

/* before the first battle there is no battle HUD to show; while a screen is up the battle controls step back
   (in the kill-cam they leave only when the result sheet arrives) */
.stage.no-battle :is(.hud-top .unit.player, .hud-top .phase, .hud-bottom, #worldDom .phud, #worldDom .ehud) { visibility: hidden; }
.stage:has(> #overlay.show) :is(.hud-top .phase, .hud-bottom, #bigClock, #pattern, #eprompt, #prompt, #worldDom .phud, #worldDom .ehud) { visibility: hidden; }
.has-world .stage.kill-cam:has(> #overlay.show) :is(.hud-top .phase, .hud-bottom, #bigClock, #pattern, #eprompt, #prompt, #worldDom .phud, #worldDom .ehud) { animation: hudOut 0s linear .75s both; }
.stage:has(> #mapOverlay.show) :is(.hud-top .phase, #pattern, #eprompt, #bigClock) { visibility: hidden; }
.stage:has(> #overlay.show > .card.deck2) .hud-top .unit.player { visibility: hidden; }
.has-world .stage.kill-cam.kill-lose:has(> #overlay.show) :is(.hud-top .phase, .hud-bottom, #bigClock, #pattern, #eprompt, #prompt, #worldDom .phud, #worldDom .ehud) { animation-delay: 1.05s; }

/* ---------- toolbar ---------- */
.toolbar { gap: 0; padding: 0 0 0 14px; background: rgba(4, 6, 12, .72); border-bottom: 1px solid var(--hair); }
.toolbar .title { font-family: var(--f-lat); font-weight: 800; font-stretch: 125%; font-size: calc(14px * var(--fs)); letter-spacing: .04em; color: var(--text); margin-right: 12px; }
.toolbar .title .ver { font-family: var(--f-lat); font-weight: 600; font-stretch: 75%; font-size: calc(11px * var(--fs)); letter-spacing: .08em; color: var(--muted); }
.toolbar .title small, .toolbar .stepinfo { font-size: calc(12px * var(--fs)); color: var(--dim-text); }
.toolbar .tb { align-self: stretch; padding: 0 12px; gap: 7px; border: 0; border-left: 1px solid var(--hair); border-radius: 0; background: transparent; color: var(--dim-text); font-size: calc(12px * var(--fs)); }
.toolbar .tb:hover { background: rgba(238, 241, 248, .06); color: var(--text); }
.toolbar .tb.on { color: var(--text); background: transparent; border-color: var(--hair); box-shadow: inset 0 -2px 0 var(--text); }
.toolbar .tb.seed { border-color: var(--hair); font-family: var(--f-lat); }
.toolbar .tb.seed:hover { background: rgba(238, 241, 248, .06); }
.toolbar .tb.seed .lbl { font-family: var(--f-lat); font-stretch: 75%; font-size: calc(10px * var(--fs)); letter-spacing: .16em; color: var(--muted); }
.toolbar .tb.seed b, .toolbar .tb.font b { font-family: var(--f-lat); font-weight: 700; color: var(--text); }
.toolbar .tb.font .aa { font-family: var(--f-lat); font-weight: 800; }

/* ---------- top HUD: log / phase plate / gold + relics ---------- */
.hud-top { padding: 44px 28px 0; }
.unit.player .lines { margin-top: 0; padding: 4px 14px 6px 10px; border-left: 1px solid var(--hair-hi); background: linear-gradient(90deg, rgba(4, 6, 12, .72) 0 72%, rgba(4, 6, 12, 0)); color: rgba(238, 241, 248, .78); text-shadow: 0 1px 0 var(--ink-key), 0 0 4px var(--ink-key); }
.unit.player .lines div:last-child { color: var(--text); }
.unit.player .lines em { font-family: var(--f-lat); font-stretch: 75%; font-weight: 700; font-size: calc(11px * var(--fs)); letter-spacing: .06em; color: var(--muted); min-width: 2.2em; }
.unit.player { width: 360px; }
.unit.enemy { width: 222px; }   /* a narrow column at the right edge, clear of where enemy plates sit */
.hud-top .unit.enemy { grid-column: 3; }
.relics { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.relics .gold { margin: 0; }
/* during the enemy turn the camera-zoomed enemy plate can pass through the relic row: the row steps aside */
.hud-top .unit.enemy { transition: visibility 0s .35s; }   /* comes back after the attack camera has eased out */
.stage:is(.show-pattern, .is-enemy-turn) .hud-top .unit.enemy { visibility: hidden; transition-delay: 0s; }

/* the phase word: heavy compressed Mincho between two 4px rules in the phase colour, on an ink plate */
.hud-top .phase { min-width: 320px; gap: 0; padding: 10px 20px 13px; color: var(--ph);
  background:
    linear-gradient(var(--ph) 0 0) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--ph) 0 0) 0 100% / 100% 4px no-repeat,
    linear-gradient(color-mix(in srgb, var(--ph) 55%, transparent) 0 0) 0 calc(100% - 7px) / 100% 1px no-repeat,
    rgba(7, 8, 13, .72);
  box-shadow: 0 0 0 1px var(--ink-key), 4px 4px 0 1px var(--drop-c); }
.stage.is-victory .hud-top .phase { background-color: var(--void); }          /* white Mincho title card */
.stage:is(.is-enemy-turn, .is-defeat) .hud-top .phase { background-color: rgba(7, 8, 13, .94); }
#phMain { display: inline-block; font: 900 calc(32px * var(--fs))/1.08 var(--f-disp); letter-spacing: .1em; padding-left: .1em;
  color: var(--ph); transform: scaleX(.88); text-shadow: 0 2px 0 var(--ink-key); }
.stage.is-victory #phMain, .stage.is-defeat #phMain { font-size: calc(44px * var(--fs)); transform: scaleX(.84); }
/* while the attack pattern is up (enemy turn + bullet time) the plate docks as the head of the threat console,
   clear of the camera-zoomed enemy plate that sweeps through the top centre. .hud-top rides the screen's top edge
   (--bleed-t on screens taller than 16:9); the console stays beside the fight, so the plate adds the bleed back. */
.stage.show-pattern .hud-top .phase { position: absolute; left: 800px; top: calc(116px + var(--bleed-t)); width: 300px; min-width: 0; transform: translateX(-50%); animation: consoleIn 0s .45s backwards; }
/* the docked plate appears once the attack camera has settled, so the passing enemy plate never crosses it */
@keyframes consoleIn { from { visibility: hidden; } to { visibility: visible; } }
.stage.show-pattern.near .hud-top .phase { left: 1385px; }
.stage.show-pattern #phMain { font-size: calc(26px * var(--fs)); }
/* threat flanks: a crimson hex tile marked ▲ either side of the word */
.stage.is-enemy-turn #phMain::before, .stage.is-enemy-turn #phMain::after, .stage.is-defeat #phMain::before, .stage.is-defeat #phMain::after {
  content: "\25B2"; display: inline-grid; place-items: center; vertical-align: .2em; width: calc(18px * var(--fs)); height: calc(21px * var(--fs)); margin: 0 .5em 0 .2em;
  clip-path: var(--hex); background: var(--threat); color: var(--ink-key); font: 700 calc(9px * var(--fs))/1 var(--f-lat); letter-spacing: 0; text-shadow: none;
  animation: hexBlink 500ms steps(1, end) 3;
}
.stage.is-enemy-turn #phMain::after, .stage.is-defeat #phMain::after { margin: 0 .1em 0 .4em; }
.stage:is(.is-enemy-turn, .is-defeat) #phMain::before, .stage:is(.is-enemy-turn, .is-defeat) #phMain::after { transform: scaleX(1.136); }
/* defeat is a title card, never the docked console (also hides any stale pattern) */
.stage.is-defeat :is(#pattern, #eprompt, #bigClock) { visibility: hidden; }
.has-world .stage.kill-cam.kill-lose #player .phud { visibility: hidden; }
/* one-shot type-on per state (distinct names so each state restarts it, a repeated state does not) */
@keyframes phA { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phB { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phC { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phD { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phE { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phF { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes phG { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.stage.is-timestop:not(.is-gapbt) #phMain { animation: phA 160ms steps(4, end) 1; }
.stage.is-gapbt #phMain { animation: phB 160ms steps(4, end) 1; }
.stage.is-hit #phMain { animation: phC 160ms steps(4, end) 1; }
.stage.is-enemy-turn #phMain { animation: phD 160ms steps(4, end) 1; }
.stage.is-knock #phMain { animation: phE 160ms steps(4, end) 1; }
.stage.is-victory #phMain { animation: phF 160ms steps(4, end) 1; }
.stage.is-defeat #phMain { animation: phG 160ms steps(4, end) 1; }

/* ---------- overhead plates (two-band toon fill, like the models' light bands) ---------- */
.has-world .actor .tag { display: none; }
.phud, .ehud { width: 300px; gap: 4px; }
.hrow { position: relative; gap: 8px; padding: 3px 8px 3px 9px; --fill: var(--glass-hi); --fill-hi: var(--plate-hi); --band: 45%; --drop: 3px; --arm: 7px; }
#player .hrow { --bk: var(--self); --hl: rgba(83, 232, 69, .32); }
.hrow b { font: 900 calc(13px * var(--fs))/1.2 var(--zh); letter-spacing: .1em; color: var(--text); }
.hrow .hp { height: 8px; background: rgba(0, 0, 0, .6); border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--hair); }
.hrow .hp::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(4, 6, 12, .9) calc(10% - 1px) 10%); }
.hrow .hp i:first-child { border-radius: 0; background: linear-gradient(180deg, var(--self-hi) 0 1px, var(--self) 1px); }
.hrow .hp.e i:first-child { background: linear-gradient(180deg, var(--ec-hi) 0 1px, var(--ec) 1px); }
.hrow .hp i.ar, .hrow .hp.e i.ar { top: -3px; bottom: -3px; border: 0; border-radius: 0; background: repeating-linear-gradient(135deg, var(--steel-a) 0 4px, var(--steel-b) 4px 8px); box-shadow: 0 0 0 1px var(--ink-key); font: 700 calc(11px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--ink-key); }
.hrow em { font: 700 calc(14px * var(--fs))/1 var(--f-lat); font-stretch: 75%; font-variant-numeric: tabular-nums; color: var(--text); }
.hrow .hp i:first-child, .ehud .poise-row .bar.poise i { transition: width .3s steps(5, end); }
/* the enemy plate's colours come only through variables, so stopped time can grey it with the world */
#ehud { --ec: var(--threat); --ec-hi: var(--threat-hi); --pc: var(--bt); --pc-hi: var(--bt-hi); }
.has-world .stage.is-timestop #ehud { --ec: var(--frozen); --ec-hi: var(--frozen-hi); }
.has-world .stage.is-timestop:not(.is-gapbt) #ehud { --pc: var(--frozen); --pc-hi: var(--frozen-hi); }
.has-world .stage.is-gapbt #ehud .poise-row { --hl: var(--bt); }      /* poise is what you attack in bullet time */
#enemy .hrow { --bk: var(--ec); --hl: color-mix(in srgb, var(--ec) 34%, transparent); }
.hrow .cd { gap: 4px; padding-left: 7px; border-left: 1px solid var(--hair); font: 500 calc(10px * var(--fs))/1 var(--zh); letter-spacing: .1em; color: var(--dim-text); }
.hrow .cd i { display: inline-grid; place-items: center; width: calc(16px * var(--fs)); height: calc(18px * var(--fs)); clip-path: var(--hex);
  background: var(--ec); color: var(--ink-key); font: 800 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 75%; font-style: normal; }
/* 霸體 is what the player attacks in the enemy turn (bullet time knocks the enemy back at 0), so the row carries the
   same weight as the HP row: the same heavy label, larger numerals and a segmented 8px bar, in violet */
.ehud .poise-row { width: 100%; padding: 3px 8px 3px 9px; gap: 8px; --fill: var(--glass-hi); --fill-hi: var(--plate-hi); --band: 45%; --drop: 3px; --arm: 7px;
  --bk: var(--pc); --hl: color-mix(in srgb, var(--pc) 34%, transparent); }
.ehud .poise-row .lbl { font: 900 calc(13px * var(--fs))/1.2 var(--zh); letter-spacing: .1em; }
.ehud .poise-row .lbl, .ehud .poise-row b { color: var(--pc-hi); }
.ehud .poise-row b { font: 700 calc(15px * var(--fs))/1 var(--f-lat); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.ehud .poise-row b.low { color: var(--time); }
.ehud .poise-row .bar { height: 8px; border: 0; border-radius: 0; background: rgba(0, 0, 0, .6); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 45%, transparent); }
.ehud .poise-row .bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(4, 6, 12, .9) calc(10% - 1px) 10%); }
.ehud .poise-row .bar.poise i { background: linear-gradient(180deg, var(--pc-hi) 0 1px, var(--pc) 1px); }
#echips .chip.trait { --chip: var(--ec); border-style: dashed; color: var(--text); }
#echips .chip.rage, #echips .chip.trait.rage { --chip: var(--ec); background: var(--ec); color: var(--ink-key); box-shadow: none; border-style: solid; }
#echips .chip.rage b { color: var(--ink-key); }
.ehud .badges { justify-content: center; }
.ehud .chips, .phud .chips { gap: 3px; min-height: 0; justify-content: center; }
/* low HP: crimson brackets + one EMERGENCY hex tile outboard right (blinks 3× when it appears) */
#player .phud.low .hrow { --bk: var(--threat); --hl: rgba(229, 72, 77, .6); }
#player .phud.low .hrow em { color: var(--threat-hi); }
.phud.low .hrow::before { content: "\25B2"; position: absolute; left: 100%; top: 50%; margin: -11px 0 0 6px; width: 18px; height: 21px; display: grid; place-items: center;
  clip-path: var(--hex); background: var(--threat); color: var(--ink-key); font: 700 9px/1 var(--f-lat); animation: hexBlink 500ms steps(1, end) 3; }
.has-world .stage.is-victory #enemy .ehud { visibility: hidden; }

/* ---------- bullets and hit numbers ---------- */
.air .n { top: -46px; padding: 3px 7px 4px 9px; background: var(--glass-hi); box-shadow: inset 3px 0 0 var(--time), 0 0 0 1px var(--ink-key), 2px 2px 0 1px var(--drop-c);
  font: 700 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .08em; color: var(--time); text-shadow: none; }
.air .n small { margin-top: 3px; font: 500 calc(11px * var(--fs))/1.2 var(--zh); color: var(--dim-text); }
.dmg { font-family: var(--f-lat); font-weight: 800; font-variant-numeric: tabular-nums; }
.dmg small { font-family: var(--zh); }
.dmg.status, .dmg.status small, .dmg.lac { color: var(--text); }
.dmg.armor { color: var(--steel-b); }
.has-world .dmg.status, .has-world .dmg.lac, .has-world .dmg.armor { text-shadow: 0 3px 0 #000; }
.has-world .dmg.block { font-style: normal; letter-spacing: .06em; }
.has-world .dmg.block small { display: block; margin: 3px 0 0; max-width: 230px; white-space: normal; font-style: normal; }
.has-world :is(.dmg.block, .dmg.hurt) { text-shadow: 0 3px 0 var(--ink-key); }

/* ---------- threat console (enemy turn): docked banner / hex pattern / octagon keys / time ladder, one column ---------- */
.pattern { top: 196px; }
.pattern, .eprompt { width: max-content; }
.stage.near .pattern { left: 1385px; }
.pattern .row { padding: 0; gap: 3px; background: none; border: 0; border-radius: 0; flex-wrap: nowrap; justify-content: center; max-width: 360px;
  filter: drop-shadow(2px 2px 0 var(--drop-c)); }
.pattern .hit { position: relative; width: 18px; height: 21px; border: 0; border-radius: 0; clip-path: var(--hex); background: var(--threat); opacity: 1; box-shadow: none; }
.pattern .hit::after { content: ""; position: absolute; inset: 2px; clip-path: var(--hex); background: #12060A; }
.pattern .hit.done { background: rgba(229, 72, 77, .38); }
.pattern .hit.now { background: var(--threat); animation: hexBlink 500ms steps(1, end) 2; }
.pattern .hit.now::after { content: "\25B2"; inset: 0; clip-path: none; background: none; color: var(--ink-key); display: grid; place-items: center; font: 700 9px/1 var(--f-lat); }
.stage.is-gapbt .pattern .hit.now { animation: none; }   /* time is frozen, so the blink stops (at full strength) */
.pattern .gap { position: relative; width: 30px; height: 21px; margin: 0 4px; border: 0; border-radius: 0; background: var(--bt); box-shadow: none;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.pattern .gap::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: #0E0A18; }
.pattern .gap.now::before { background: rgba(167, 139, 250, .6); }

/* the block / bullet-time keys: octagon lamps (octagon = ours, the guard field) */
.eprompt { top: 228px; gap: 8px; }
.stage.near .eprompt { left: 1385px; }
.eprompt .keys { gap: 10px; filter: drop-shadow(3px 3px 0 var(--drop-c)); }
.eprompt .key { --kc: var(--text); position: relative; isolation: isolate; height: 40px; padding: 0 16px 0 12px; gap: 10px;
  border: 0; border-radius: 0; box-shadow: none; background: var(--kc); clip-path: var(--oct);
  color: var(--text); font: 700 calc(15px * var(--fs))/1 var(--zh); letter-spacing: .14em; }
.eprompt .key::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: #0A0B12;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.eprompt .key .space, .eprompt .key .shift { color: var(--kc); }
#blockKey { --kc: var(--stop); }
#btKey { --kc: var(--bt); color: #D9CCFF; cursor: pointer; }
#btKey:hover::before { background: color-mix(in srgb, var(--bt) 22%, #0A0B12); }
#blockKey.hit, #blockKey.hit .space { color: var(--ink-key); }
#blockKey.hit::before { background: var(--stop); }

/* the enemy-turn clock becomes a 20-cell time ladder with 7-segment digits (the dial paths stay, hidden, for drawClock) */
.bigclock { left: 800px; top: 280px; width: 300px; padding: 6px 10px 8px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "head head" "num bar"; column-gap: 12px; row-gap: 2px; align-items: center; transition: none;
  --fill: var(--glass-hi); --bk: var(--time); --arm: 9px; }
.stage.near .bigclock { left: 1385px; }
.bigclock .clock { display: none; }
.bigclock .head { grid-area: head; }
.bigclock .num { grid-area: num; position: static; gap: 4px; }
.bigclock::after { content: ""; grid-area: bar; align-self: end; height: 14px; margin-bottom: 5px;
  background: linear-gradient(90deg, var(--time) 0 calc((var(--t, 20) - var(--tg, 0)) * 5%), var(--gain) 0 calc(var(--t, 20) * 5%), rgba(238, 241, 248, .10) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc((100% + 3px) / 20 - 3px), transparent 0 calc((100% + 3px) / 20));
          mask: repeating-linear-gradient(90deg, #000 0 calc((100% + 3px) / 20 - 3px), transparent 0 calc((100% + 3px) / 20)); }
.time .head .lbl, .bigclock .head .lbl { font: 700 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .24em; color: var(--dim-text); }
.time .head .lbl em, .bigclock .head .lbl em { font: 800 calc(10px * var(--fs))/1 var(--f-lat); font-stretch: 125%; letter-spacing: .12em; color: var(--muted); }
.time .head .gain, .bigclock .head .gain { font: 700 calc(12px * var(--fs))/1 var(--zh); letter-spacing: .04em; color: var(--gain); }

/* 7-segment time numerals with unlit ghost segments (the only glowing type) */
:is(#tNum, #btNum) { position: relative; display: inline-block; isolation: isolate; min-width: 2ch; text-align: right;
  font-family: var(--f-seg); font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; color: var(--time);
  text-shadow: 0 0 8px rgba(230, 176, 75, .35), 0 2px 0 var(--ink-key); }
:is(#tNum, #btNum)::before { content: "88"; position: absolute; inset: 0; z-index: -1; text-align: right; color: currentColor; opacity: .13; text-shadow: none; }
#tNum { font-size: calc(38px * var(--fs)); }
#btNum { font-size: calc(30px * var(--fs)); }
.time .num small, .bigclock .num small { font: 600 calc(13px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--muted); }

/* ---------- TIME panel (side): a segmented quarter dial, one dash per time unit ---------- */
.side .time { padding: 7px 10px 8px; gap: 2px; --fill: var(--glass-hi); --bk: var(--time); --arm: 12px; }
.stage.is-timestop .side .time { --bk: var(--stop); --hl: rgba(95, 227, 255, .45); border-color: var(--hl); box-shadow: var(--frame-shadow); }
.stage.is-gapbt .side .time { --bk: var(--bt); --hl: rgba(167, 139, 250, .55); border-color: var(--hl); box-shadow: var(--frame-shadow); }
#time svg > circle:first-of-type { fill: rgba(4, 6, 12, .35); stroke: var(--hair); }
#arc-spent, #arc-left, #arc-gain { stroke-width: 12; stroke-dasharray: 5.6 1.4686; }   /* 1 time unit = 90 × 4.5° = 7.0686 */
#arc-spent { stroke: rgba(238, 241, 248, .07); }
#arc-left { stroke: var(--time); }
#arc-gain { stroke: var(--gain); }
#ticks { stroke: rgba(238, 241, 248, .42); }
#hand-line { transition: transform .2s steps(4, end); }
#hand-line line { stroke: var(--text); stroke-width: 2; }
.time .num { padding: 2px 2px 0; gap: 5px; }
.time .tele { margin-top: 6px; border-radius: 0; border: 1px solid var(--self); background: var(--self-a); color: var(--text); font: 700 calc(13px * var(--fs))/1 var(--zh); letter-spacing: .2em; }
.time .tele:hover:not(:disabled) { background: color-mix(in srgb, var(--self) 30%, transparent); border-color: var(--self-hi); }
.time .tele:focus-visible, .prompt.sel button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- hand (magazine) ---------- */
.hud-bottom { padding: 0 12px 22px; gap: 10px; }
.hand { justify-self: start; }
.hand.dim { opacity: 1; filter: none; }
.hand.dim #clip > :not(.clip-stats, .cap-lbl, #rounds), .hand.dim #rounds > * { opacity: .3; }   /* #rounds is display:contents */
.clip { padding: 8px 12px 6px; gap: 6px; min-width: 1334px; }
#clip { --fill: var(--glass); --bk: var(--time); --arm: 16px; }
/* micro-labels sit on the top hairline, bottom edge at the card tops: they never rise toward the ground line */
.clip-stats, .clip .cap-lbl { top: auto; bottom: calc(100% - 8px); margin: 0; }
.clip-stats { right: 66px; gap: 4px; }
.clip-stats .cs, .clip .cap-lbl { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border: 1px solid var(--hair-hi); border-radius: 0; background: rgba(4, 6, 12, .92); font: 500 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .1em; color: var(--dim-text); }
.clip-stats .cs b { font: 700 calc(13px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--text); }
.clip-stats .cs.streak b { color: var(--text); }
.clip-stats .cs small { font-family: var(--f-lat); font-stretch: 75%; }
.clip .cap-lbl { right: 12px; border-color: color-mix(in srgb, var(--time) 60%, transparent); font: 700 calc(11px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--time); }
.drag-hint { gap: 6px; font-size: calc(11px * var(--fs)); }
.drag-hint kbd { height: 1.45em; }
.drag-hint.up { margin-bottom: 9px; color: var(--time); }
.drag-hint.down { margin-top: 3px; color: var(--dim-text); }
.drag-hint em { font: 700 calc(14px * var(--fs))/1 var(--f-lat); font-stretch: 75%; }
.drag-hint.no { color: var(--muted); }
.drag-hint.no em { text-decoration: line-through; }
.clip .round.first { z-index: 3; }
.clip .zone-drop { --fill: transparent; --arm: 12px; border-style: dashed; font: 700 calc(14px * var(--fs))/1 var(--zh); letter-spacing: .3em; }
.clip .zone-drop.up { --bk: var(--time); --hl: rgba(230, 176, 75, .6); color: var(--time); height: 88px; margin-bottom: 6px; }
.clip .zone-drop.down { --bk: var(--text); --hl: rgba(238, 241, 248, .5); color: var(--text); top: auto; bottom: 0; margin: 0; height: 44px; z-index: 2; }
.clip.drag-up .zone-drop.up, .clip.drag-down .zone-drop.down { opacity: .7; }
.clip.armed-up .zone-drop.up { opacity: 1; --fill: rgba(230, 176, 75, .18); }
.clip.armed-down .zone-drop.down { opacity: 1; --fill: rgba(4, 6, 12, .8); }
/* END: a vertical brass spine just outside the magazine's right end (still inside #clip in the markup) */
#clip .act.end { position: absolute; left: calc(100% + 8px); right: auto; top: -1px; bottom: -1px; width: 46px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 0;
  white-space: nowrap; color: var(--ink-key); opacity: 1;
  --fill: var(--time); --bk: var(--ink-key); --hl: var(--time); --arm: 10px; --drop: 4px; }
#clip .act.end .l { display: flex; flex-direction: column; align-items: center; }
#clip .act.end .l b { writing-mode: vertical-rl; text-orientation: mixed; font: 900 calc(15px * var(--fs))/1 var(--zh); letter-spacing: .12em; }
#clip .act.end kbd { color: var(--ink-key); }
#clip .act.end:hover:not(:disabled) { --fill: #F3C468; }
#clip .act.end:active:not(:disabled) { translate: 2px 2px; --drop: 2px; }
#clip .act.end:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#clip .act.end:disabled, #clip .act.end.dim { --fill: var(--glass-hi); --bk: var(--muted); --hl: var(--hair); color: var(--muted); cursor: default; }
#clip .act.end:disabled kbd, #clip .act.end.dim kbd { color: var(--muted); }

/* ---------- selection prompt (selection only happens in stopped time: cyan) ---------- */
.prompt.sel { padding: 10px 20px 12px; gap: 6px; --fill: rgba(4, 6, 12, .88); --bk: var(--stop); --hl: rgba(95, 227, 255, .45); --arm: 12px; }
.prompt.sel .big { font: 900 calc(20px * var(--fs))/1.2 var(--zh); letter-spacing: .12em; color: var(--stop); }
.prompt.sel .note { font-size: calc(13px * var(--fs)); color: var(--text); }
.prompt .selkeys { font-family: var(--f-lat); color: var(--dim-text); }
.prompt.sel button { border-radius: 0; border: 1px solid var(--hair-hi); color: var(--text); background: transparent; }
.prompt.sel button:hover { background: rgba(238, 241, 248, .07); border-color: var(--text); }