/* =====================================================================================================
   UI theme "Bridge Terminal", part 1: tokens, the ink plate frame, key badge, buttons, chips, tooltip.
   The HUD is the command terminal of the clock-tower bridge: black plates outlined in the same ink as the toon
   models, rimmed in tower bronze with role-coloured L-brackets, casting the same hard, unblurred drop as the 3D
   characters. Evangelion grammar (heavy compressed Mincho between thick rules, 7-segment numerals, hex threat
   tiles, octagon guard fields, hard stepped blinks) with this game's own vocabulary. Spec: docs/UI.md.
   Loads after 99-world.css. Never put .cas rules here (cards live only in 99-cards-test.css); no !important.
   ===================================================================================================== */
:root {
  /* surfaces (no backdrop-filter anywhere) */
  --void: #04060C;
  --glass: rgba(7, 8, 13, .72);
  --glass-hi: rgba(7, 8, 13, .86);
  --sheet: rgba(8, 9, 15, .95);
  --plate-hi: rgba(24, 26, 40, .90);        /* toon lit band (top of the overhead plates) */
  --ink-key: #05060B;                       /* ink outline = the 3D inverted-hull outline */
  --drop-c: rgba(5, 6, 11, .62);            /* hard drop */
  /* structure = clock-tower metal */
  --bronze: #8C6A33;  --bronze-hi: #C49A52;
  --hair: rgba(196, 154, 82, .30);
  --hair-hi: rgba(214, 178, 112, .62);
  --rule-heavy: 5px double var(--bronze-hi);
  --dim-text: #C2C9D8;
  /* roles: the same hexes the 3D world uses (docs/VISUAL.md) */
  --time: #E6B04B;   --time-a: rgba(230, 176, 75, .16);
  --stop: #5FE3FF;   --stop-a: rgba(95, 227, 255, .14);
  --threat: #E5484D; --threat-a: rgba(229, 72, 77, .16);  --threat-hi: #FF9A9D;
  --bt: #A78BFA;     --bt-a: rgba(167, 139, 250, .16);    --bt-hi: #C9B6FF;
  --gain: #6EE7A0;   --gain-a: rgba(110, 231, 160, .14);
  --self: #53E845;   --self-a: rgba(83, 232, 69, .16);    --self-hi: #9BF58F;
  --coin: #E8DFC4;   --coin-a: rgba(232, 223, 196, .12);
  --shop: #F5D33B;                                         /* the merchant on the map */
  --frozen: #9AA0AB; --frozen-hi: #C3C8D2;               /* enemy UI while time is stopped */
  --steel-a: #EEF2FB; --steel-b: #C9D1E3;                /* armour stripes */
  --spectrum: linear-gradient(180deg, rgba(62,117,145,.26) 0%, rgba(107,79,160,.16) 52%, rgba(158,42,69,.26) 100%);
  /* type */
  --f-lat: "Archivo", "Noto Sans TC", system-ui, sans-serif;
  --f-disp: "Noto Serif TC", "Noto Sans TC", serif;
  --f-seg: "DSEG7 Classic", "Archivo", monospace;
  /* shapes: hexagon = theirs (threat), octagon = ours (guard, time, safe places) */
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --oct: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --spine: 56px;
}
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- the ink plate: 1px hairline + four L-brackets as background layers, an ink keyline and a hard drop.
   State changes only touch --bk / --hl / --fill / --fill-hi / --band / --drop. ---------- */
#clip, .side .time, .bigclock, .hrow, .ehud .poise-row, .prompt.sel, .tip, .tut-plate,
:is(#overlay, #mapOverlay, #subOverlay) > .card,
:is(#overlay, #mapOverlay, #subOverlay) :is(button.ghost, #btnInv, #btnBack, #btnFill, #btnReset, #seedRand, #seedCancel, #invClose, #mapClose),
.overlay .relicpick .rp-item, .overlay .camp .camp-opt, .overlay .shop .shop-relic,
.overlay .deck2 .dk-row.top, .overlay .deck2 .dk-row.bot, .overlay .next-enemy, .overlay .next-enemy.is-elite, .relic-new,
.overlay .summary .sum-relic, .clip .act.end, .clip .zone-drop {
  --bk: var(--bronze-hi); --arm: 12px; --bw: 3px; --hl: var(--hair);
  --fill: var(--glass-hi); --fill-hi: var(--fill); --band: 0px; --drop: 4px;
  --frame-shadow: 0 0 0 1px var(--ink-key), var(--drop) var(--drop) 0 1px var(--drop-c);
  border: 1px solid var(--hl); border-radius: 0; box-shadow: var(--frame-shadow);
  background:
    linear-gradient(var(--bk) 0 0) 0 0 / var(--arm) var(--bw),        linear-gradient(var(--bk) 0 0) 0 0 / var(--bw) var(--arm),
    linear-gradient(var(--bk) 0 0) 100% 0 / var(--arm) var(--bw),     linear-gradient(var(--bk) 0 0) 100% 0 / var(--bw) var(--arm),
    linear-gradient(var(--bk) 0 0) 0 100% / var(--arm) var(--bw),     linear-gradient(var(--bk) 0 0) 0 100% / var(--bw) var(--arm),
    linear-gradient(var(--bk) 0 0) 100% 100% / var(--arm) var(--bw),  linear-gradient(var(--bk) 0 0) 100% 100% / var(--bw) var(--arm),
    linear-gradient(180deg, var(--fill-hi) 0 var(--band), var(--fill) var(--band));
  background-repeat: no-repeat; background-origin: border-box;
}
.clip .zone-drop { box-shadow: none; }   /* drop targets carry no plate shadow */

/* ---------- key badge: the ONE style for every kbd-like glyph ---------- */
.toolbar .tb kbd, .act kbd, .act.end kbd, .drag-hint kbd, .prompt .selkeys kbd, .eprompt .key .shift, .eprompt .key .space,
.overlay .card.seed .row-btn button kbd, .overlay .hexmap .hm-head button kbd, .overlay .card.tut .row-btn button kbd, .tut-plate button kbd {
  display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.9em; height: 1.6em; margin: 0; padding: 0 .4em;
  font: 700 calc(11px * var(--fs))/1 var(--f-lat); font-stretch: 100%; letter-spacing: .02em; text-transform: none;
  color: inherit; background: rgba(238, 241, 248, .06); opacity: 1;
  border: 1px solid color-mix(in srgb, currentColor 65%, transparent); border-bottom-width: 2px; border-radius: 2px;
}
.eprompt .key .space { width: 56px; }

/* ---------- buttons ---------- */
/* primary: a white slab with ink text and a hard drop (Eva title-card white on black) */
:is(#overlay, #mapOverlay, #subOverlay) :is(#btnConfirm, #btnNext, #mapGo, #btnLeave, #btnAgain, #seedGo, #evNext, #tutGo) {
  clip-path: none; border: 0; border-radius: 0; background: var(--text); color: var(--ink-key); opacity: 1;
  font: 900 calc(15px * var(--fs))/1.2 var(--zh); letter-spacing: .16em; padding: 11px 26px; min-width: 0; width: auto;
  box-shadow: 0 0 0 1px var(--ink-key), 3px 3px 0 1px var(--drop-c);
}
:is(#overlay, #mapOverlay, #subOverlay) :is(#btnConfirm, #btnNext, #mapGo, #btnLeave, #btnAgain, #seedGo, #evNext, #tutGo):hover:not(:disabled) { background: #FFFFFF; }
:is(#overlay, #mapOverlay, #subOverlay) :is(#btnConfirm, #btnNext, #mapGo, #btnLeave, #btnAgain, #seedGo, #evNext, #tutGo):active:not(:disabled) { background: #C9D2E6; translate: 2px 2px; box-shadow: 0 0 0 1px var(--ink-key), 1px 1px 0 1px var(--drop-c); }
:is(#overlay, #mapOverlay, #subOverlay) :is(#btnConfirm, #btnNext, #mapGo, #btnLeave, #btnAgain, #seedGo, #evNext, #tutGo):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
:is(#overlay, #mapOverlay, #subOverlay) :is(#btnConfirm, #btnNext, #mapGo, #btnLeave, #btnAgain, #seedGo, #evNext, #tutGo):disabled {
  cursor: not-allowed; color: var(--dim-text); box-shadow: inset 0 0 0 1px var(--hair-hi);
  background: repeating-linear-gradient(135deg, rgba(139, 148, 174, .18) 0 2px, transparent 2px 7px), rgba(7, 8, 13, .86);
}
/* ghost: a light plate (hairline + brackets), transparent */
:is(#overlay, #mapOverlay, #subOverlay) :is(button.ghost, #btnInv, #btnBack, #btnFill, #btnReset, #seedRand, #seedCancel, #invClose, #mapClose) {
  --fill: transparent; --hl: var(--hair-hi); --arm: 6px; --drop: 2px; color: var(--text); opacity: 1;
  font: 500 calc(13px * var(--fs))/1.2 var(--zh); letter-spacing: .12em; padding: 8px 16px; width: auto; min-width: 0;
}
:is(#overlay, #mapOverlay, #subOverlay) :is(button.ghost, #btnInv, #btnBack, #btnFill, #btnReset, #seedRand, #seedCancel, #invClose, #mapClose):hover:not(:disabled) { --fill: rgba(238, 241, 248, .07); --bk: var(--text); --hl: var(--text); }
:is(#overlay, #mapOverlay, #subOverlay) :is(button.ghost, #btnInv, #btnBack, #btnFill, #btnReset, #seedRand, #seedCancel, #invClose, #mapClose):active:not(:disabled) { --fill: rgba(238, 241, 248, .14); translate: 1px 1px; }
:is(#overlay, #mapOverlay, #subOverlay) :is(button.ghost, #btnInv, #btnBack, #btnFill, #btnReset, #seedRand, #seedCancel, #invClose, #mapClose):disabled { --bk: var(--muted); color: var(--muted); cursor: not-allowed; }
/* page arrows and filter tabs */
.overlay .card button.dk-nav { border-radius: 0; background: transparent; border: 1px solid var(--hair); color: var(--text); font: 400 calc(22px * var(--fs))/1 var(--f-lat); padding: 0; }
.overlay .card button.dk-nav:hover:not(:disabled) { background: rgba(238, 241, 248, .07); border-color: var(--hair-hi); }
.overlay .card button.dk-nav:disabled { opacity: .25; cursor: default; border-color: transparent; }

/* ---------- chips / status stamps (square, hairline, 3px role tab on the left) ---------- */
#chips .chip, #echips .chip, .relics .relic, .relics .gold, .relic-strip .relic {
  --chip: var(--hair-hi);
  display: inline-flex; align-items: center; gap: 5px; height: calc(19px * var(--fs)); padding: 0 7px 0 9px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--chip) 70%, transparent); border-radius: 0;
  background: var(--glass-hi); box-shadow: inset 3px 0 0 var(--chip);
  color: var(--text); font: 700 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .08em; white-space: nowrap;
}
#chips .chip b, #echips .chip b, .relics .relic b, .relic-strip .relic b, .relic .cnt {
  font: 700 calc(13px * var(--fs))/1 var(--f-lat); font-stretch: 75%; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: .02em;
}
.relics .relic b, .relic-strip .relic b { font: 700 calc(12px * var(--fs))/1 var(--zh); letter-spacing: .08em; }
#chips .chip { --chip: var(--self); }                         /* the player's own states */
#echips .chip { --chip: var(--text); }                        /* marks the player put on the enemy (易傷 / 裂傷 / 虛弱) */
.relics .gold { --chip: var(--coin); color: var(--coin); }
.relics .gold i { font: 500 calc(10px * var(--fs))/1 var(--zh); font-style: normal; letter-spacing: .14em; color: var(--dim-text); }
.relics .gold { font: 700 calc(14px * var(--fs))/1 var(--f-lat); font-stretch: 75%; }
.relic-strip .relic.new { --chip: var(--text); border-color: var(--text); }
.relic-strip .rs-h { font: 500 calc(10px * var(--fs))/1 var(--zh); letter-spacing: .2em; color: var(--muted); }
.relic-strip.empty { font-size: calc(11px * var(--fs)); color: var(--muted); }

/* ---------- tooltip (the frame supplies the hard drop) ---------- */
.tip { --fill: rgba(4, 6, 12, .95); --hl: var(--hair-hi); --arm: 8px; --drop: 4px; padding: 10px 12px; font-size: calc(12px * var(--fs)); }
.tip .tip-h { font: 700 calc(12px * var(--fs))/1.3 var(--zh); letter-spacing: .14em; color: var(--text); margin: 0 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--hair); }
.tip .kw div, .tip .tip-none { color: var(--dim-text); }
.tip .tc-h { font: 600 calc(10px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .14em; color: var(--muted); }
.tip:has(> .tip-cards:not(.wide) + .kw) { display: grid; grid-template-columns: auto 200px; column-gap: 12px; align-items: start; max-width: none; }
.tip:has(> .tip-cards:not(.wide) + .kw) > .tip-cards { margin: 0; }

/* ---------- motion primitives (hard, stepped, finite; every keyframe ends visible) ---------- */
@keyframes hexBlink { 50% { opacity: .15; } }
@keyframes sheetBoot { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes hudOut { from { visibility: visible; } to { visibility: hidden; } }