/* SARGE brand kit: tokens + shared components for the site (/) and the stream overlay (/stream).
   Spec: docs/research/arcade.md. Demo of everything: /assets/kit.html.
   Rules baked in: the 20-colour palette only, pixel fonts at their crisp sizes, chrome in whole 4px art pixels,
   no radius / blur / glow / gradients on UI (hard-stop gradients below are just pixel drawing), motion in steps(). */

/* ------------------------------------------------------------------ fonts (self-hosted, see fonts/LICENSES.md) */
@font-face { font-family: "Jersey 15"; src: url("/assets/fonts/jersey15.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Silkscreen"; src: url("/assets/fonts/silkscreen.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Silkscreen"; src: url("/assets/fonts/silkscreen-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Pixel Operator"; src: url("/assets/fonts/pixel-operator.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixel Operator"; src: url("/assets/fonts/pixel-operator-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixel Operator Mono"; src: url("/assets/fonts/pixel-operator-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixel Operator Mono"; src: url("/assets/fonts/pixel-operator-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* CJK / Cyrillic / Greek / full-width tickers only; never downloaded for Latin text */
@font-face {
  font-family: "DotGothic16"; src: url("/assets/fonts/dotgothic16.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0370-03FF, U+0400-04FF, U+2E80-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FFFF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* the 20-colour palette (§3.2); --tilt is the loss / benched / alarm red */
  --ink: #0b0812; --night: #181225; --plum: #2c2340; --dusk: #9a91b8; --bone: #f4ead7;
  --tilt: #ff3b3b; --amber: #ff9e1b; --gold: #ffd23f;
  --tilt-off: #4a1520; --amber-off: #4a2a10; --gold-off: #3f3510;
  --pink: #ff6fb5; --cyan: #3ad6f0; --violet: #a47dff; --lime: #92e04a; --mint: #3fe0a0;
  --magenta: #e05cf0; --blue: #5b8cff; --copper: #d08a55; --ice: #c4e8ff;

  /* semantics: profit GOLD, loss red (--tilt), brand AMBER; agent hues are identity only */
  --bg: var(--ink); --panel: var(--night); --line: var(--plum); --text: var(--bone); --text-dim: var(--dusk);
  --brand: var(--amber); --profit: var(--gold); --loss: var(--tilt); --focus: var(--bone);

  /* fonts (§3.3) */
  --font-display: "Jersey 15", "DotGothic16", monospace;
  --font-label: "Silkscreen", "DotGothic16", monospace;
  --font-pixel-body: "Pixel Operator", "DotGothic16", monospace;
  --font-readable: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-pixel-body);
  --font-mono: "Pixel Operator Mono", "DotGothic16", monospace;

  /* type scale: only crisp sizes (Jersey 15: 27n px · Silkscreen: 8n px, never 8/12 · Pixel Operator: 16n px) */
  --fs-d1: 27px; --fs-d2: 54px; --fs-d3: 81px; --fs-d4: 108px;
  --fs-l1: 16px; --fs-l2: 24px; --fs-l3: 32px;
  --fs-b1: 16px; --lh-b1: 24px; --fs-b2: 32px; --lh-b2: 40px;

  /* pixel grid: art pixel = 4 CSS px on the site (overlay may set --ap: 6px) */
  --ap: 4px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
  --border: 4px; --ring: 0 0 0 4px var(--ink);
  --notch: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);

  /* motion (§3.5, measured Balatro timings) */
  --t-pop: 50ms; --t-cascade: 100ms; --t-travel-in: 300ms; --t-travel-out: 150ms;
  --t-idle: 600ms; --t-blink: 120ms; --t-flash: 250ms;
  --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* Readable-text toggle (§3.3): body copy swaps to system-ui at 16/24; labels and display stay pixel.
   html.readable-text forces it, html.pixel-text forces pixel, otherwise prefers-contrast: more decides. */
html.readable-text { --font-body: var(--font-readable); }
@media (prefers-contrast: more) { html:not(.pixel-text) { --font-body: var(--font-readable); } }

/* ------------------------------------------------------------------ base (zero specificity so pages can override) */
:where(html) { background: var(--bg); color: var(--text); color-scheme: dark; }
/* will-change: opacity puts the page on a non-opaque layer, which makes Chrome on Windows use grayscale instead of
   ClearType antialiasing: pixel fonts then land as solid pixels instead of red/blue fringes. Paint the page colour
   on html (as here) and keep body transparent, or the fringes come back. It doesn't affect position: fixed. */
:where(body) { margin: 0; font: var(--fs-b1)/var(--lh-b1) var(--font-body); font-synthesis: none; will-change: opacity; }
:where(.tilt-pixel, .t-d1, .t-d2, .t-d3, .t-d4, .t-l1, .t-l2, .t-l3, .t-b1, .t-b2, .t-mono, .t-mono2) {
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: none;
}
:where(a) { color: inherit; }
:where(:focus-visible) { outline: 4px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--amber); color: var(--ink); }

/* type */
.t-d1, .t-d2, .t-d3, .t-d4 { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: 0; }
.t-d1 { font-size: var(--fs-d1); } .t-d2 { font-size: var(--fs-d2); } .t-d3 { font-size: var(--fs-d3); } .t-d4 { font-size: var(--fs-d4); }
.t-l1, .t-l2, .t-l3 { font-family: var(--font-label); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.t-l1 { font-size: var(--fs-l1); } .t-l2 { font-size: var(--fs-l2); } .t-l3 { font-size: var(--fs-l3); }
.t-b1 { font: var(--fs-b1)/var(--lh-b1) var(--font-body); }
.t-b2 { font: var(--fs-b2)/var(--lh-b2) var(--font-body); }
.t-mono { font: var(--fs-b1)/var(--lh-b1) var(--font-mono); font-variant-numeric: tabular-nums; }
.t-mono2 { font: var(--fs-b2)/var(--lh-b2) var(--font-mono); font-variant-numeric: tabular-nums; }
.t-bold { font-weight: 700; }
.t-measure { max-width: 64ch; }
/* hard pixel shadow under display text (VS / WIN / K.O.): set --shadow to the matching *-OFF colour */
.t-shadow { text-shadow: var(--ap) var(--ap) 0 var(--shadow, var(--amber-off)); }
.c-ink { color: var(--ink); } .c-bone { color: var(--bone); } .c-dusk { color: var(--dusk); } .c-amber { color: var(--amber); }
.c-gold { color: var(--gold); } .c-tilt { color: var(--tilt); }
.rank-1 { color: var(--gold); } .rank-2 { color: var(--bone); } .rank-3 { color: var(--amber); } .rank-n { color: var(--dusk); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ panel / frame */
/* NIGHT panel, 4px PLUM border, 4px INK ring, corner pixels notched. --frame recolours the border. */
.px-panel {
  position: relative; background: var(--panel); border: 4px solid var(--frame, var(--plum));
  box-shadow: var(--ring); padding: var(--sp-4);
}
.px-panel::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(var(--ink) 0 0) 0 0 / 4px 4px no-repeat, linear-gradient(var(--ink) 0 0) 100% 0 / 4px 4px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 100% / 4px 4px no-repeat, linear-gradient(var(--ink) 0 0) 100% 100% / 4px 4px no-repeat;
}
.px-panel--inset { background: var(--ink); }
.px-panel--flush { padding: 0; }
.px-panel--amber { --frame: var(--amber); }
.px-panel--tilt { --frame: var(--tilt); }
.px-panel__title {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4);
  font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; color: var(--dusk);
}
.px-panel__title--display { font: var(--fs-d2)/1 var(--font-display); text-transform: none; color: var(--amber); }
/* notched clip for things without a ring (sprite frames, coin images) */
.px-notch { clip-path: var(--notch); }
/* 1 art px PLUM rule (tables) */
.px-rule { border: 0; border-top: 2px solid var(--plum); margin: 0; }

/* Celeste-style dialogue box: portrait + name + line */
.px-dialog { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.px-dialog__portrait { background: var(--ink); line-height: 0; padding: var(--sp-1); box-shadow: 0 0 0 4px var(--plum); }
.px-dialog__name { font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; margin: 0 0 var(--sp-2); color: var(--c, var(--amber)); }
.px-dialog__line { font: var(--fs-b1)/var(--lh-b1) var(--font-body); margin: 0; max-width: 64ch; }
.px-dialog__line b, .px-dialog__line strong { font-weight: 700; color: var(--bone); }

/* ------------------------------------------------------------------ buttons */
.px-btn {
  --face: var(--amber); --face-hover: var(--gold); --bevel: var(--amber-off); --label: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; min-width: 48px; padding: 0 var(--sp-4); margin: 4px 4px 12px;
  font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--label); background: var(--face); border: 0; border-radius: 0; cursor: pointer;
  box-shadow: 0 8px 0 0 var(--bevel), 0 0 0 4px var(--ink), 0 8px 0 4px var(--ink);
  -webkit-font-smoothing: none;
}
.px-btn:hover { background: var(--face-hover); }
.px-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 0 var(--bevel), 0 0 0 4px var(--ink), 0 4px 0 4px var(--ink); }
.px-btn:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.px-btn--secondary { --face: var(--plum); --face-hover: var(--plum); --bevel: var(--night); --label: var(--bone); }
.px-btn--secondary:hover { --label: var(--amber); }
.px-btn--danger { --face: var(--tilt); --face-hover: var(--tilt); --bevel: var(--tilt-off); --label: var(--ink); }
.px-btn:disabled, .px-btn[aria-disabled="true"] {
  --face: var(--plum); --face-hover: var(--plum); --label: var(--dusk); cursor: not-allowed; transform: none;
  box-shadow: 0 0 0 4px var(--ink);
}
.px-btn--icon { padding: 0 var(--sp-3); }
.px-btn--sm { min-height: 32px; min-width: 32px; padding: 0 var(--sp-2); }

/* ------------------------------------------------------------------ chips (2px border in text colour) */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2) 6px;
  font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; white-space: nowrap;
  color: var(--chip, var(--amber)); border: 2px solid currentColor; background: transparent;
}
.chip--paper { --chip: var(--amber); }
.chip--live { --chip: var(--tilt); }
.chip--dusk { --chip: var(--dusk); }
.chip--bone { --chip: var(--bone); }
.chip--gold { --chip: var(--gold); }
.chip--lg { font-size: var(--fs-l2); border-width: 4px; padding: 8px 12px; }
button.chip { cursor: pointer; }
button.chip[aria-pressed="true"] { background: var(--chip, var(--amber)); color: var(--ink); border-color: var(--chip, var(--amber)); }

/* ------------------------------------------------------------------ tags (battle log, state badges) */
.tag {
  display: inline-block; min-width: 56px; padding: 6px 6px 6px; text-align: center; white-space: nowrap;
  font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; vertical-align: middle;
  background: var(--tag-bg, var(--plum)); color: var(--tag-fg, var(--bone));
}
.tag--win { --tag-bg: var(--gold); --tag-fg: var(--ink); }
.tag--lose { --tag-bg: var(--tilt); --tag-fg: var(--ink); }
.tag--draw { --tag-bg: var(--plum); --tag-fg: var(--bone); }
.tag--ko { --tag-bg: var(--bone); --tag-fg: var(--ink); }
.tag--tilt { --tag-bg: var(--tilt-off); --tag-fg: var(--tilt); }
.tag--stun { --tag-bg: var(--plum); --tag-fg: var(--dusk); }
.tag--fee, .tag--payout { --tag-bg: var(--plum); --tag-fg: var(--amber); }
.tag--fight { --tag-bg: var(--amber); --tag-fg: var(--ink); }

/* ------------------------------------------------------------------ stat pips (Into the Breach) */
/* <span class="pips" style="--v:3;--max:5;--c:#ff6fb5"> : filled squares in --c, empty in PLUM */
.pips {
  --v: 0; --max: 5; --c: var(--amber); --ps: 12px; --pg: 4px;
  display: inline-block; vertical-align: middle; height: var(--ps);
  width: calc(var(--max) * (var(--ps) + var(--pg)) - var(--pg));
  background:
    repeating-linear-gradient(90deg, var(--c) 0 var(--ps), transparent 0 calc(var(--ps) + var(--pg))) 0 0 / calc(var(--v) * (var(--ps) + var(--pg))) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--plum) 0 var(--ps), transparent 0 calc(var(--ps) + var(--pg)));
}
.pips--sm { --ps: 8px; --pg: 4px; }

/* ------------------------------------------------------------------ segmented bars (HP / NRG) */
/* <span class="bar bar--hp" style="--seg:20;--on:13;--over:0"> ; values come from ui.js bar()/hpBar()/nrgBar() */
.bar {
  --seg: 20; --on: 0; --over: 0; --sw: 12px; --gap: 2px; --h: 16px; --c: var(--bone); --track: var(--plum);
  display: inline-block; vertical-align: middle; height: var(--h);
  width: calc(var(--seg) * (var(--sw) + var(--gap)) - var(--gap));
  background:
    repeating-linear-gradient(90deg, var(--gold) 0 var(--sw), transparent 0 calc(var(--sw) + var(--gap))) 0 0 / calc(var(--over) * (var(--sw) + var(--gap))) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 var(--sw), transparent 0 calc(var(--sw) + var(--gap))) 0 0 / calc(var(--on) * (var(--sw) + var(--gap))) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--track) 0 var(--sw), transparent 0 calc(var(--sw) + var(--gap)));
}
.bar--hp { --c: var(--bone); }
.bar--nrg { --c: var(--amber); }
.bar.is-low { --c: var(--tilt); }
.bar--sm { --sw: 8px; --h: 12px; }

/* ------------------------------------------------------------------ P&L with drawn pixel arrows (fonts lack ▲▼→) */
.pnl { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--fs-b1)/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl--up { color: var(--profit); }
.pnl--down { color: var(--loss); }
.pnl--flat { color: var(--dusk); }
.pnl--big { font: var(--fs-d2)/1 var(--font-display); gap: var(--sp-3); }
.pnl--big .px-arrow { --a: 4px; }
.px-arrow { --a: 2px; display: inline-block; flex: none; background: currentColor; }
.px-arrow--up, .px-arrow--down { width: calc(var(--a) * 7); height: calc(var(--a) * 4); }
.px-arrow--up {
  clip-path: polygon(calc(var(--a) * 3) 0, calc(var(--a) * 4) 0, calc(var(--a) * 4) var(--a), calc(var(--a) * 5) var(--a),
    calc(var(--a) * 5) calc(var(--a) * 2), calc(var(--a) * 6) calc(var(--a) * 2), calc(var(--a) * 6) calc(var(--a) * 3),
    calc(var(--a) * 7) calc(var(--a) * 3), calc(var(--a) * 7) calc(var(--a) * 4), 0 calc(var(--a) * 4), 0 calc(var(--a) * 3),
    var(--a) calc(var(--a) * 3), var(--a) calc(var(--a) * 2), calc(var(--a) * 2) calc(var(--a) * 2), calc(var(--a) * 2) var(--a),
    calc(var(--a) * 3) var(--a));
}
.px-arrow--down {
  clip-path: polygon(0 0, calc(var(--a) * 7) 0, calc(var(--a) * 7) var(--a), calc(var(--a) * 6) var(--a), calc(var(--a) * 6) calc(var(--a) * 2),
    calc(var(--a) * 5) calc(var(--a) * 2), calc(var(--a) * 5) calc(var(--a) * 3), calc(var(--a) * 4) calc(var(--a) * 3),
    calc(var(--a) * 4) calc(var(--a) * 4), calc(var(--a) * 3) calc(var(--a) * 4), calc(var(--a) * 3) calc(var(--a) * 3),
    calc(var(--a) * 2) calc(var(--a) * 3), calc(var(--a) * 2) calc(var(--a) * 2), var(--a) calc(var(--a) * 2), var(--a) var(--a), 0 var(--a));
}
.px-arrow--right {
  width: calc(var(--a) * 4); height: calc(var(--a) * 7);
  clip-path: polygon(0 0, var(--a) 0, var(--a) var(--a), calc(var(--a) * 2) var(--a), calc(var(--a) * 2) calc(var(--a) * 2),
    calc(var(--a) * 3) calc(var(--a) * 2), calc(var(--a) * 3) calc(var(--a) * 3), calc(var(--a) * 4) calc(var(--a) * 3),
    calc(var(--a) * 4) calc(var(--a) * 4), calc(var(--a) * 3) calc(var(--a) * 4), calc(var(--a) * 3) calc(var(--a) * 5),
    calc(var(--a) * 2) calc(var(--a) * 5), calc(var(--a) * 2) calc(var(--a) * 6), var(--a) calc(var(--a) * 6), var(--a) calc(var(--a) * 7), 0 calc(var(--a) * 7));
}
/* pixel icons from ui.js icon(): inherit colour, sit on the text baseline */
.px-icon { display: inline-block; vertical-align: -2px; flex: none; }

/* ------------------------------------------------------------------ alarm light (ui.js alarmHTML / setAlarm) */
/* <span class="alarm" data-alarm="off|on|ignite"> beacon svg [+ caption]. On while a trader is benched (on tilt), the
   market feed is down or the data is stale; "ignite" = just switched on, flashes 2 Hz x 3 s first. */
.alarm { display: inline-flex; align-items: center; gap: var(--sp-2); line-height: 0; vertical-align: middle; }
.alarm .af, .alarm .ar { fill: var(--tilt); } .alarm .ah { fill: var(--bone); } .alarm .ab { fill: var(--plum); } .alarm .ak { fill: var(--ink); }
.alarm[data-alarm="off"] .af { fill: var(--tilt-off); } .alarm[data-alarm="off"] .ah { fill: var(--dusk); }
.alarm[data-alarm="off"] .ar { visibility: hidden; }
.alarm[data-alarm="on"] .ar { animation: blink-2hz calc(var(--t-flash) * 4) steps(1) infinite; }
.alarm[data-alarm="ignite"] .af, .alarm[data-alarm="ignite"] .ah, .alarm[data-alarm="ignite"] .ar { animation: alarm-flash calc(var(--t-flash) * 2) steps(1) 6; }
@keyframes alarm-flash { 50% { fill: var(--tilt-off); visibility: hidden; } }
.alarm-cap { font: var(--fs-l1)/1 var(--font-label); text-transform: uppercase; white-space: nowrap; }
.alarm-on { color: var(--tilt); } .alarm-off { color: var(--dusk); }
.alarm[data-alarm="off"] .alarm-on, .alarm:not([data-alarm="off"]) .alarm-off { display: none; }

/* ------------------------------------------------------------------ text wordmark (ui.js wordmark()) */
/* The rank badge (3 chevrons, 18x14 art px at fs/27 px each) + the brand name as live text: gold-over-amber face (hard
   stop), stepped extrusion, INK outline, all in --wm-u steps. data-alarm="on" turns both red; "ignite" flashes first. */
.wordmark {
  --wm-fs: 54px; --wm-u: 4px; --wm-hi: var(--gold); --wm-face: var(--amber); --wm-x: var(--amber-off);
  --wm-b: calc(var(--wm-fs) / 27);
  position: relative; display: inline-flex; align-items: flex-start; gap: calc(var(--wm-b) * 3); line-height: 0; white-space: nowrap;
  font: var(--wm-fs)/.82 var(--font-display); text-transform: uppercase; letter-spacing: 0;
  -webkit-font-smoothing: none; font-synthesis: none; font-kerning: none;
}
.wordmark--sm { --wm-fs: 27px; --wm-u: 2px; }
.wordmark--md { --wm-fs: 54px; --wm-u: 3px; }
.wordmark--lg { --wm-fs: 108px; --wm-u: 4px; }
.wordmark__b { flex: none; width: calc(var(--wm-b) * 18); height: calc(var(--wm-b) * 14); margin-top: calc(var(--wm-fs) * .1); }
.wordmark__b .bh { fill: var(--wm-hi); } .wordmark__b .bf { fill: var(--wm-face); } .wordmark__b .bx { fill: var(--wm-x); }
.wordmark__n { position: relative; display: inline-grid; isolation: isolate; }
.wordmark__n > span { grid-area: 1 / 1; line-height: .82; padding: 0 calc(var(--wm-u) * 4) calc(var(--wm-u) * 4) var(--wm-u); }
.wordmark__x {
  color: var(--wm-x); z-index: -1;
  --u: var(--wm-u); --u2: calc(var(--wm-u) * 2); --u3: calc(var(--wm-u) * 3); --u4: calc(var(--wm-u) * 4); --n: calc(var(--wm-u) * -1);
  /* extrusion copies first (on top), then the INK ring around the face, then the INK ring around the extrusion end */
  text-shadow:
    var(--u) var(--u) 0 var(--wm-x), var(--u2) var(--u2) 0 var(--wm-x), var(--u3) var(--u3) 0 var(--wm-x),
    var(--n) var(--n) 0 var(--ink), 0 var(--n) 0 var(--ink), var(--u) var(--n) 0 var(--ink), var(--n) 0 0 var(--ink),
    var(--u) 0 0 var(--ink), var(--n) var(--u) 0 var(--ink), 0 var(--u) 0 var(--ink),
    var(--u4) var(--u4) 0 var(--ink), var(--u4) var(--u3) 0 var(--ink), var(--u3) var(--u4) 0 var(--ink),
    var(--u4) var(--u2) 0 var(--ink), var(--u2) var(--u4) 0 var(--ink), var(--u4) var(--u) 0 var(--ink), var(--u) var(--u4) 0 var(--ink);
}
.wordmark__t {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(var(--wm-hi) 0 46%, var(--wm-face) 46% 100%);
}
.wordmark[data-alarm="on"], .wordmark[data-alarm="ignite"] { --wm-hi: var(--amber); --wm-face: var(--tilt); --wm-x: var(--tilt-off); }
.wordmark[data-alarm="ignite"] .wordmark__t { animation: wm-ignite calc(var(--t-flash) * 2) steps(1) 6; }
.wordmark[data-alarm="ignite"] .wordmark__b { animation: blink-2hz calc(var(--t-flash) * 2) steps(1) 6; }
@keyframes wm-ignite { 50% { background-image: linear-gradient(var(--tilt-off) 0 0); } }

/* ------------------------------------------------------------------ DMD ticker (overlay; the only texture allowed) */
/* <div class="dmd"><div class="dmd__track"><span class="dmd__item">…</span>…(content twice)</div></div> + ui.js initDmd() */
.dmd {
  --dot: 4px; position: relative; overflow: hidden; white-space: nowrap;
  background: var(--amber-off); color: var(--amber); font: var(--fs-d2)/1 var(--font-display);
  padding: var(--sp-3) 0; box-shadow: var(--ring);
}
.dmd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 1.25px, var(--ink) 1.75px) 0 0 / var(--dot) var(--dot);
}
.dmd--flat::after { display: none; }
.dmd--sm { font-size: var(--fs-d1); padding: var(--sp-2) 0; }
.dmd__track { display: inline-flex; gap: var(--sp-16); padding-left: var(--sp-4); will-change: transform;
  animation: dmd-scroll var(--dmd-dur, 40s) steps(var(--dmd-steps, 600)) infinite; }
.dmd__item { display: inline-flex; align-items: center; gap: var(--sp-4); }
.dmd__item .gold { color: var(--gold); } .dmd__item .red { color: var(--tilt); }
.dmd .pnl { font: inherit; gap: var(--sp-3); }
.dmd .px-arrow { --a: 4px; }
@keyframes dmd-scroll { to { transform: translateX(calc(-1 * var(--dmd-dist, 50%))); } }

/* ------------------------------------------------------------------ roster cursor (1P) */
.px-cursor { position: relative; outline: 4px solid var(--amber); outline-offset: 0; }
.px-cursor::before {
  content: "1P"; position: absolute; left: -4px; top: -4px; transform: translateY(-100%); padding: 4px 6px 4px;
  font: var(--fs-l1)/1 var(--font-label); background: var(--amber); color: var(--ink);
}
.px-cursor.is-blinking { animation: blink-2hz calc(var(--t-flash) * 2) steps(1) infinite; }

/* ------------------------------------------------------------------ sprites (sprites.js spriteSVG) */
.spr { display: inline-block; vertical-align: bottom; overflow: visible; flex: none; }
.spr .f1 { visibility: hidden; }
.spr.anim .f0 { animation: tspr-a var(--loop, 1200ms) steps(1) infinite; }
.spr.anim .f1 { animation: tspr-b var(--loop, 1200ms) steps(1) infinite; }
/* blink lids: opacity (not visibility) so a hidden frame's lids can't show through */
.spr .bl { opacity: 0; }
.spr.anim .bl { animation: tspr-bl var(--blink, 4s) steps(1) infinite var(--blink-delay, 0s); }
@keyframes tspr-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes tspr-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes tspr-bl { 0% { opacity: 1; } 3% { opacity: 0; } }
/* sprite plate: INK square behind a sprite (roster cells, log rows) */
.spr-plate { display: inline-grid; place-items: center; background: var(--ink); line-height: 0; }

/* ------------------------------------------------------------------ motion utilities */
.blink-2hz { animation: blink-2hz calc(var(--t-flash) * 2) steps(1) infinite; }
@keyframes blink-2hz { 50% { visibility: hidden; } }
/* information shakes (§3.5): a benching on the alarm / agent card, K.O. on the overlay. ui.js play(el, "shake") */
.shake { animation: shake-4 300ms steps(1) 1; }
.shake-ko { animation: shake-2 150ms steps(1) 1; }
@keyframes shake-4 { 0% { transform: translateX(4px); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } 100% { transform: none; } }
@keyframes shake-2 { 0% { transform: translateX(2px); } 33% { transform: translateX(-2px); } 66% { transform: translateX(2px); } 100% { transform: none; } }
/* snap-in for number changes / tags (50 ms, 3 steps) */
.pop-in { animation: pop-in var(--t-pop) steps(3) both; }
@keyframes pop-in { from { transform: translateY(-4px); visibility: hidden; } }
/* travel: VS card / attract panels, in whole art px */
.slide-in { animation: slide-in var(--t-travel-in) steps(12) both; }
.slide-out { animation: slide-out var(--t-travel-out) steps(6) both; }
@keyframes slide-in { from { transform: translateX(48px); visibility: hidden; } 1% { visibility: visible; } }
@keyframes slide-out { to { transform: translateX(-24px); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .spr.anim .f0, .spr.anim .f1, .spr.anim .bl, .alarm .af, .alarm .ah, .alarm .ar, .wordmark .wordmark__t, .wordmark .wordmark__b,
  .dmd__track, .blink-2hz, .px-cursor.is-blinking, .shake, .shake-ko, .pop-in, .slide-in, .slide-out { animation: none !important; }
}