/* OP: Next Mission — BUNK OPS · Season 01 design system (W1).
   Contents: tokens · tier selectors · reset · background layer · layout + focus · type · topbar + HUD odometer ·
   buttons · panel · brackets · kicker · chips + toggle · fields, select, checkbox · hazard · tier chip · hex ·
   XP rail · slider base · spinner · toast · tooltip + .term · patch/art/icons · utilities · FX layers · screen
   travel · keyframe library · reduced-motion + lowpower globals · legacy bridge.
   Rules: only transform + opacity animate; nothing decorative sits above content (.bg is z -1); no clip-path on
   focusable elements (chamfers live on pseudos); iOS Safari 15 safe (no :has, @property, color-mix, nesting). */

/* ================================================================ tokens */
:root {
  color-scheme: dark;

  /* surfaces (dark only) */
  --void: #07090A;
  --night: #0D1210;
  --panel: #141B18;
  --raised: #1B2420;
  --steel: #2A3530;
  --olive: #3D4A2A;
  --olive-deep: #2B3420;
  --khaki: #E8E0C4;
  --field-line: #5E6E66;

  /* text */
  --bone: #EDE6D3;
  --dust: #9AA593;
  --dim: #7E8A80;
  --ink: #0A0D0B;

  /* brand + system */
  --signal: #F0561D;
  --signal-text: #FF6A33;
  --signal-hot: #FF7A3D;
  --signal-deep: #A8320A;
  --intel: #5EE6D0;
  --confirm: #4ADE80;
  --alert: #FF5466;
  --kopi: #FFB35C;
  --kopi-wash: rgba(255, 179, 92, .10);
  --kopi-line: rgba(255, 179, 92, .32);
  --tg: #2AABEE;
  --wa: #25D366;

  /* rarity tiers (honest server labels) */
  --tier-classic: #A9BAC6;
  --tier-uncommon: #3DB8FF;
  --tier-rare: #FFC53D;
  --metal-classic: linear-gradient(135deg, #E4EBF1 0%, #7D8A95 28%, #39424A 50%, #7D8A95 72%, #E4EBF1 100%);
  --metal-uncommon: linear-gradient(135deg, #BFE8FF 0%, #2A8FD6 28%, #0E4A7A 50%, #2A8FD6 72%, #BFE8FF 100%);
  --metal-rare: linear-gradient(135deg, #FFE9A6 0%, #E0A526 28%, #8A5A10 50%, #E0A526 72%, #FFE9A6 100%);
  --tier: var(--tier-classic);
  --metal: var(--metal-classic);

  /* per-context, set inline by JS */
  --pc: #F0561D;
  --pc-ink: #0A0D0B;
  --scene: #F0561D;
  --heat: #5EE6D0;

  /* phase scene colours */
  --ph-1: #2F6D8C;
  --ph-2: #6A5A2A;
  --ph-3: #8C3F2A;
  --ph-4: #5A3F8C;
  --ph-5: #F0561D;

  /* lines */
  --line: rgba(237, 230, 211, .08);
  --line-2: rgba(237, 230, 211, .14);
  --line-3: rgba(237, 230, 211, .24);

  /* gradients + textures */
  --grad-panel: linear-gradient(180deg, #141B18 0%, #0D1210 100%);
  --grad-signal: linear-gradient(90deg, #F0561D 0%, #FF7A3D 100%);
  --grad-scrim-bottom: linear-gradient(0deg, #07090A 0%, rgba(7, 9, 10, .92) 55%, rgba(7, 9, 10, 0) 100%);
  --bg-glow-top: radial-gradient(60% 40% at 50% 0%, rgba(240, 86, 29, .12), rgba(240, 86, 29, 0) 70%);
  --bg-glow-bottom: radial-gradient(50% 35% at 50% 100%, rgba(94, 230, 208, .06), rgba(94, 230, 208, 0) 70%);
  --bg-vignette: radial-gradient(120% 80% at 50% 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .5) 100%);
  --bg-grid: linear-gradient(rgba(237, 230, 211, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 230, 211, .03) 1px, transparent 1px);
  --bg-grid-size: 48px 48px;
  --tex-topo: url('/static/img/fx/topo.webp');
  --tex-grain: url('/static/img/fx/grain.png');
  --hazard: repeating-linear-gradient(-45deg, #F0561D 0 8px, rgba(240, 86, 29, 0) 8px 16px);
  --hazard-dim: repeating-linear-gradient(-45deg, rgba(237, 230, 211, .07) 0 8px, rgba(237, 230, 211, 0) 8px 16px);
  --sheen: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .22) 47%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, 0) 65%);
  --glow-signal: radial-gradient(closest-side, rgba(240, 86, 29, .5), rgba(240, 86, 29, 0));
  --glow-intel: radial-gradient(closest-side, rgba(94, 230, 208, .35), rgba(94, 230, 208, 0));
  --glow-pc: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0));
  /* NOTE: --glow-pc resolves --pc here at :root (always signal orange). For an archetype-coloured glow write the radial-gradient inline on the element. */
  --scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  --gunmetal: linear-gradient(145deg, #C9CFC8 0%, #7D857C 50%, #B9C0B7 100%);

  /* typography */
  --f-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --f-hud: 'Chakra Petch', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-micro: 11px;
  --t-label: 12px;
  --t-hud: 13px;
  --t-small: 14px;
  --t-body: 17px;
  --t-lede: 19px;
  --t-opt: 17px;
  --t-btn: 18px;
  --t-btn-xl: 20px;
  --t-input: 18px;
  --t-q: clamp(22px, 6vw, 30px);
  --t-h3: clamp(24px, 6.4vw, 32px);
  --t-h2: clamp(34px, 9vw, 48px);
  --t-hero: clamp(48px, 13.5vw, 104px);
  --t-phase: clamp(64px, 19vw, 120px);
  --t-name: clamp(52px, 15vw, 104px);
  --t-num-s: 26px;
  --t-num-m: 40px;
  --t-num-l: 56px;
  --lh-display: .9;
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --track-btn: .08em;
  --track-hud: .14em;
  --track-micro: .22em;

  /* shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --cut-sm: 8px;
  --cut-md: 12px;
  --cut-lg: 16px;
  --cut-card: 28px;
  --bk-size: 14px;
  --bk-w: 2px;
  --bk: var(--signal);
  /* chamfers: top-right + bottom-left cuts (pseudos only, never the focusable element) */
  --chamfer-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --chamfer-md: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --chamfer-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));

  /* elevation (static; never animated) */
  --hl-top: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-1: 0 8px 24px -12px rgba(0, 0, 0, .8);
  --shadow-2: 0 24px 48px -20px rgba(0, 0, 0, .9);
  --shadow-card: 0 30px 60px -18px rgba(0, 0, 0, .85);
  --ring-focus: 0 0 0 3px rgba(240, 86, 29, .28);
  --focus: #EDE6D3;

  /* spacing + layout */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --gutter: 16px;
  --maxw: 560px;
  --maxw-mid: 680px;
  --maxw-wide: 1080px;
  --topbar-h: 56px;
  --tabbar-h: 44px;
  --tap: 44px;
  --opt-h: 64px;
  --cta-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* z-index */
  --z-bg: -1;
  --z-base: 1;
  --z-raised: 2;
  --z-sticky: 20;
  --z-tabbar: 24;
  --z-topbar: 30;
  --z-sticky-cta: 32;
  --z-toast: 70;
  --z-tip: 72;
  --z-overlay: 80;
  --z-letterbox: 84;
  --z-fx: 90;
  --z-skip: 99;

  /* motion */
  --d-tap: 90ms;
  --d-micro: 160ms;
  --d-exit: 160ms;
  --d-enter: 280ms;
  --d-ui: 320ms;
  --d-pop: 420ms;
  --d-count: 800ms;
  --d-gauge: 900ms;
  --d-cine-max: 2400ms;
  --e-out: cubic-bezier(.2, .9, .1, 1);
  --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-impact: cubic-bezier(.2, 1.4, .4, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-gauge: cubic-bezier(.2, .8, .2, 1);
  --e-scan: cubic-bezier(.08, .6, .1, 1);
  --stagger: 50ms;
}

/* rarity tiers: anything carrying data-tier re-points --tier / --metal for its subtree */
[data-tier="classic"] { --tier: var(--tier-classic); --metal: var(--metal-classic); }
[data-tier="uncommon"] { --tier: var(--tier-uncommon); --metal: var(--metal-uncommon); }
[data-tier="rare"] { --tier: var(--tier-rare); --metal: var(--metal-rare); }

/* scene tints (NM.scene sets body[data-scene]; an explicit colour arrives inline as --scene) */
body[data-scene="landing"], body[data-scene="declassify"] { --scene: var(--signal); }
body[data-scene="briefing"], body[data-scene="processing"] { --scene: var(--intel); }
body[data-scene="phase-1"] { --scene: var(--ph-1); }
body[data-scene="phase-2"] { --scene: var(--ph-2); }
body[data-scene="phase-3"] { --scene: var(--ph-3); }
body[data-scene="phase-4"] { --scene: var(--ph-4); }
body[data-scene="phase-5"] { --scene: var(--ph-5); }
body[data-scene="notfound"] { --scene: var(--alert); }

/* ================================================================ reset (zero specificity: everything overrides it) */
:where(*, *::before, *::after) { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--void); /* propagates to the canvas, so .bg (z -1) paints above it */
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; border-radius: 0; }
:where(button:disabled) { cursor: not-allowed; }
:where(a) { color: inherit; }
:where(ul, ol) { margin: 0 0 var(--s-3); padding-left: 1.25em; }
:where(dl, dd) { margin: 0; }
:where(p) { margin: 0 0 var(--s-3); }
:where(hr) { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
:where(details > summary) { cursor: pointer; }
:where(strong, b) { font-weight: 700; }
::selection { background: rgba(240, 86, 29, .45); color: var(--bone); }
[hidden] { display: none !important; }

/* ================================================================ background layer (.bg, z -1, never above content) */
.bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-color: var(--void);
  background-image: var(--bg-vignette), var(--bg-glow-top), var(--bg-glow-bottom), var(--bg-grid), var(--tex-topo);
  background-size: 100% 100%, 100% 100%, 100% 100%, var(--bg-grid-size), var(--bg-grid-size), 1024px 1024px;
  background-position: 0 0, 0 0, 0 0, 50% 0, 50% 0, 50% 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
}
/* scene tint: the colour follows body --scene; each change replays a short opacity fade (NM.scene) */
.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 45% at 50% 0%, var(--scene), rgba(0, 0, 0, 0) 70%);
  opacity: .16;
}
.bg.scene-in::before { animation: fx-scene-in 600ms var(--e-out) both; }
/* grain: static tile, alpha baked into the png */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tex-grain) 0 0 / 128px 128px repeat;
}

/* ================================================================ layout + focus */
.stage {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter) calc(96px + var(--safe-b));
}
.stage.wide { max-width: var(--maxw-wide); }
.stage:focus { outline: none; }
.noscript { padding: 40px 0; color: var(--dust); }

:focus { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* headings core.render() focuses after a screen swap (and [data-autofocus] targets): announced, not controls, so no ring */
:where(h1, h2, h3)[tabindex="-1"]:focus, [data-autofocus][tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute;
  left: 8px;
  top: -120px;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  background: var(--signal);
  color: var(--ink);
  font: 700 14px/1 var(--f-hud);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: calc(8px + var(--safe-t)); }
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================ type */
:where(h1, h2, h3, h4) { margin: 0 0 var(--s-3); line-height: var(--lh-tight); font-weight: 700; }
:where(h1, h2) {
  font-family: var(--f-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: var(--lh-display);
  text-wrap: balance;
}
:where(h1) { font-size: var(--t-h2); overflow-wrap: anywhere; }
:where(h2) { font-size: var(--t-h2); }
:where(h3) { font-family: var(--f-hud); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
:where(h4) { font-family: var(--f-hud); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-hud); color: var(--dust); }
.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: var(--lh-display);
  overflow-wrap: anywhere;
}
:where(h1.display) { font-size: var(--t-hero); }
[class*="anton"] { font-family: var(--f-display); font-weight: 400; font-synthesis: none; }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--dust); max-width: 34em; }
.small { font-size: var(--t-small); line-height: 1.45; }
.tiny { font-size: 13px; line-height: 1.45; }
.muted { color: var(--dust); }
.dim { color: var(--dim); }
.hud-type, .micro {
  font-family: var(--f-hud);
  font-weight: 600;
  text-transform: uppercase;
}
.hud-type { font-size: var(--t-hud); letter-spacing: var(--track-hud); }
.micro { font-size: var(--t-micro); letter-spacing: var(--track-micro); }
.tnum { font-variant-numeric: tabular-nums; }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
/* no one-word last lines ('ORD.' alone, 'careers.') and evenly broken headings. The longhand only sets the line-break
   style, never the wrap mode, so a nowrap anywhere still wins; zero specificity, so any component rule overrides it.
   Progressive: ignored where unsupported (iOS 15 wraps as before). */
:where(p, li, dd, figcaption, .lede, .hint, .err, .tier-ratio) { text-wrap-style: pretty; }
:where(.display, h1, h2, h3) { text-wrap-style: balance; }

/* ================================================================ topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--gutter) 0;
  background: rgba(7, 9, 10, .92);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--signal);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  @media (min-width: 768px) {
    html:not(.lowpower) .topbar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--tap);
  color: var(--bone);
  text-decoration: none;
}
.brand-logo { width: 32px; height: 32px; flex: none; }
.brand-name {
  font: 700 14px/1 var(--f-hud);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================ HUD chip + ORD odometer (core.setHud) */
.hud {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex: none;
  height: 36px;
  --bk: var(--intel);
  --bk-size: 8px;
}
.hud::before { /* intel brackets on the two uncut corners */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-w) var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-w) var(--bk-size) no-repeat;
}
.hud::after { /* one sheen sweep on the first ORD LOH */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%;
  width: 60%;
  z-index: 2;
  pointer-events: none;
  background: var(--sheen);
  transform: translateX(-120%);
}
.hud.sweep::after { animation: fx-sheen 720ms var(--e-out) 200ms 1 both; }
.hud-count {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  color: var(--heat);
  white-space: nowrap;
}
.hud-count::before, .hud-count::after {
  content: '';
  position: absolute;
  z-index: -3;
  clip-path: var(--chamfer-sm);
}
.hud-count::before { inset: 0; background: var(--line-2); }
.hud-count::after { inset: 1px; z-index: -2; background: var(--night); }
.hud-l {
  font: 600 var(--t-micro)/1 var(--f-hud);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--heat);
}
.hud-n {
  position: relative;
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
  font: 400 var(--t-num-s)/1 var(--f-display);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--heat);
}
.hud-count.hot .hud-n::after { /* the quiz screen's only loop: glow behind the digits at <= 5 left */
  content: '';
  position: absolute;
  inset: -10px -12px;
  z-index: -1;
  background: var(--glow-signal);
  opacity: .35;
  animation: fx-pulse 1.6s ease-in-out infinite alternate;
}
.hud-count.done .hud-l, .hud-count.done .hud-n {
  font: 400 22px/1 var(--f-display);
  letter-spacing: .02em;
  color: var(--tier-rare);
  min-width: 0;
}
.hud-count.done { gap: 6px; }
.odo { position: relative; display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.odo i { display: block; font-style: normal; height: 1em; line-height: 1; }
.odo .old { position: absolute; top: 0; right: 0; animation: fx-odo-out 240ms var(--e-out) forwards; }
.odo .new { animation: fx-odo-in 240ms var(--e-out) both; }
.odo.back .old { animation-name: fx-odo-out-back; }
.odo.back .new { animation-name: fx-odo-in-back; }

/* ================================================================ buttons */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* keeps the sheen inside; the focus outline is not clipped by its own overflow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--t-btn)/1.1 var(--f-hud);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--d-tap) var(--e-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--chamfer-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%), var(--signal);
}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%;
  width: 60%;
  z-index: 0;
  pointer-events: none;
  background: var(--sheen);
  transform: translateX(-120%);
}
.btn.sweep::after { animation: fx-sheen 520ms var(--e-out) 1; }
.btn:active { transform: translateY(2px) scale(.985); }
@media (hover: hover) {
  .btn:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), var(--signal); }
}
.btn.block { display: flex; width: 100%; min-height: var(--cta-h); font-size: var(--t-btn-xl); }
.btn .chev { margin-left: -2px; letter-spacing: -.12em; }
.btn .ico, .btn .ic { flex: none; width: 20px; height: 20px; font-size: 20px; line-height: 1; }
.btn > * { position: relative; z-index: 1; }

.btn.olive { color: var(--bone); }
.btn.olive::before { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%), var(--olive); }
.btn.paper-btn { color: var(--bone); }
.btn.paper-btn::before { clip-path: none; background: transparent; border: 1px solid var(--line-3); border-radius: var(--r-xs); }
.btn.tg::before { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%), var(--tg); }
.btn.wa::before { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%), var(--wa); }
.btn.kopi::before { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%), var(--kopi); }
.btn.tg, .btn.wa, .btn.kopi { color: var(--ink); }
@media (hover: hover) {
  .btn.olive:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--olive); }
  .btn.paper-btn:hover::before { background: var(--olive); }
  .btn.tg:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--tg); }
  .btn.wa:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), var(--wa); }
  .btn.kopi:hover::before { background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 55%), var(--kopi); }
}
.btn.sm { min-height: 48px; padding: 0 16px; font-size: 15px; gap: 8px; }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--dim); cursor: not-allowed; transform: none; }
.btn:disabled::before, .btn[aria-disabled="true"]::before { background: var(--hazard-dim), var(--raised); }
.btn.paper-btn:disabled::before { background: var(--hazard-dim); }
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--dust);
  font: 600 var(--t-small)/1.2 var(--f-hud);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.linkbtn:hover, .linkbtn:focus-visible { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }

.spinner {
  position: relative;
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: middle;
  animation: fx-spin 700ms linear infinite;
}
.spinner::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  opacity: .25;
}

/* ================================================================ panel */
.panel {
  position: relative;
  padding: 20px 18px;
  background: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  box-shadow: var(--hl-top), var(--shadow-1);
}
.panel + .panel { margin-top: var(--s-4); }
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font: 600 var(--t-label)/1.3 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--dust);
}
.panel-head > :last-child:not(:first-child) { font-weight: 500; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }
@media (min-width: 600px) { .panel { padding: 24px; } }

/* ================================================================ corner brackets (::before overlay) */
:where(.bk, .bk4) { position: relative; }
.bk::before, .bk4::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-w) var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-w) var(--bk-size) no-repeat;
}
.bk4::before {
  background:
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / var(--bk-w) var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / var(--bk-w) var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / var(--bk-w) var(--bk-size) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-size) var(--bk-w) no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / var(--bk-w) var(--bk-size) no-repeat;
}
.bk-in::before { animation: fx-bk-in var(--d-micro) var(--e-impact) both; } /* snap-in: opacity + scale only */
.bk-intel { --bk: var(--intel); }
.bk-pc { --bk: var(--pc); }
.bk-tier { --bk: var(--tier); }
.bk-bone { --bk: var(--bone); }
.bk-kopi { --bk: var(--kopi); }

/* ================================================================ kicker ('// ' is part of the copy) */
.kicker {
  display: block;
  margin: 0 0 var(--s-3);
  font: 600 var(--t-label)/1.35 var(--f-hud);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--intel);
}
.kicker.live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 0 0;
  vertical-align: .12em;
  background: var(--intel);
  animation: fx-blink 1s linear 3;
}

/* ================================================================ chips + segmented toggle */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --chip-on: var(--signal);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--bone);
  font: 600 var(--t-small)/1.15 var(--f-hud);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform var(--d-tap) var(--e-out);
}
.chip::before, .chip::after { content: ''; position: absolute; z-index: -1; clip-path: var(--chamfer-sm); }
.chip::before { inset: 0; background: var(--line-2); }
.chip::after { inset: 1px; background: var(--panel); }
.chip:active { transform: scale(.97); }
@media (hover: hover) { .chip:hover::before { background: var(--line-3); } }
.chip[aria-pressed="true"] { color: var(--ink); }
.chip[aria-pressed="true"]::before, .chip[aria-pressed="true"]::after { background: var(--chip-on); }
.chip .tick { display: none; width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chip[aria-pressed="true"] .tick { display: block; animation: fx-tick-in var(--d-micro) var(--e-impact) both; }
:where(#coffee, .coffee-box, .kopi-box) .chip { --chip-on: var(--kopi); }

.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggle button {
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--panel);
  color: var(--bone);
  font: 700 15px/1.15 var(--f-hud);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  transition: transform var(--d-tap) var(--e-out);
}
.toggle button:active { transform: scale(.98); }
.toggle button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.toggle button[data-coffee="1"][aria-pressed="true"] { background: var(--kopi); border-color: var(--kopi); color: var(--ink); }
.toggle button[data-coffee="0"][aria-pressed="true"] { background: var(--raised); border-color: var(--line-3); color: var(--bone); }

/* ================================================================ fields, select, date, checkbox */
.field { display: grid; gap: 8px; margin: 0 0 18px; }
.field > label, .field > .lbl {
  font: 600 var(--t-hud)/1.3 var(--f-hud);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--dust);
}
.field .opt-tag { color: var(--dim); font-weight: 500; letter-spacing: .08em; }
.field .hint { font-size: var(--t-small); line-height: 1.45; color: var(--dust); }
.err, .field .err { font: 600 var(--t-small)/1.4 var(--f-body); color: var(--alert); }
.err::before { content: '\26A0\FE0E  '; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"],
input[type="url"], input[type="password"], input[type="date"], input:not([type]), select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-xs);
  background-color: var(--night);
  color: var(--bone);
  font: 500 var(--t-input)/1.2 var(--f-body);
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}
textarea { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239AA593' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
input[type="date"] { line-height: 50px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
::placeholder { color: var(--dim); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--signal); box-shadow: var(--ring-focus); }
input[readonly] { color: var(--dust); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--alert); }
.field.invalid input, .field.invalid select { animation: fx-shake 200ms var(--e-out) 1; }
.prefix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.prefix > span {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 0 14px;
  background: var(--raised);
  clip-path: var(--chamfer-sm);
  font: 700 15px/1 var(--f-hud);
  letter-spacing: .06em;
  color: var(--bone);
}
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--field-line);
  border-radius: 2px;
  background: var(--night) no-repeat center / 18px 18px;
  cursor: pointer;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  border-color: var(--signal);
  background-color: var(--signal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230A0D0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================================================================ hazard band */
.hazard { background-color: var(--void); background-image: var(--hazard); }
.hazard.moving { position: relative; overflow: hidden; background-image: none; }
.hazard.moving::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: var(--hazard);
  animation: fx-hazard 600ms linear infinite;
  pointer-events: none;
}

/* ================================================================ tier chip */
.tier-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  color: var(--ink);
  font: 700 var(--t-label)/1 var(--f-hud);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-chip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tier); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.tier-chip::after { content: ''; position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; background: var(--sheen); transform: translateX(-120%); pointer-events: none; }
.tier-chip.sweep::after { animation: fx-sheen 600ms var(--e-out) 1; }
.tier-chip.lg { min-height: 32px; padding: 0 14px; font-size: 16px; }
.tier-ratio { font: 600 var(--t-small)/1.3 var(--f-hud); letter-spacing: .08em; text-transform: uppercase; color: var(--tier); }

/* ================================================================ hexagon badge (decorative) */
.hex {
  --hx: 40px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--hx);
  height: var(--hx);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--signal);
  color: var(--ink);
  font: 700 14px/1 var(--f-hud);
  letter-spacing: .04em;
  text-align: center;
}
.hex.md { --hx: 64px; font-size: 13px; }
.hex.lg { --hx: 96px; font-size: 20px; }
.hex.outline { color: var(--bone); }
.hex.outline::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: var(--night); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* ================================================================ XP rail (.progress: one <i><b style="width:N%"> per phase) */
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0 0 18px; padding: 0 3px; }
.progress i { position: relative; display: block; height: 6px; background: var(--steel); transform: skewX(-20deg); }
.progress i b { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--signal); }
.progress i b:not([style*="width:100%"]):not([style*="width:0%"])::after { /* static leading-edge glow on the active segment */
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: -3px;
  width: 6px;
  background: var(--signal-hot);
  box-shadow: 0 0 10px 1px rgba(255, 122, 61, .6);
}

/* ================================================================ slider base (native input.range; W3 owns the dial) */
.range {
  --fill: 0%;
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.range::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent calc(25% - 1.5px), var(--void) calc(25% - 1.5px) calc(25% + 1.5px), transparent calc(25% + 1.5px) calc(50% - 1.5px), var(--void) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px) calc(75% - 1.5px), var(--void) calc(75% - 1.5px) calc(75% + 1.5px), transparent calc(75% + 1.5px)),
    linear-gradient(90deg, var(--signal) 0 var(--fill), var(--steel) var(--fill));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -8px;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--signal);
  box-shadow: 0 0 0 8px rgba(240, 86, 29, .18);
  transform: rotate(45deg);
}
.range::-moz-range-track { height: 14px; border-radius: 2px; background: var(--steel); }
.range::-moz-range-progress { height: 14px; border-radius: 2px; background: var(--signal); }
.range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--signal);
  box-shadow: 0 0 0 8px rgba(240, 86, 29, .18);
  transform: rotate(45deg);
}
.range:focus { outline-offset: 6px; }

/* ================================================================ toast: kill-feed line, top right (bottom-centre at 1100px+) */
.toast {
  position: fixed;
  top: calc(64px + var(--safe-t));
  right: 12px;
  z-index: var(--z-toast);
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 14px 10px 16px;
  background: var(--night);
  border: 1px solid var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); /* not focusable, so allowed */
  color: var(--bone);
  font: 600 15px/1.3 var(--f-hud);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateX(24px);
  /* hide: fade only, then park off to the right once invisible */
  transition: opacity var(--d-exit) var(--e-in), transform 0s linear var(--d-exit);
}
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); }
.toast.show { opacity: 1; transform: none; transition: opacity var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-out); }

/* ================================================================ tooltip callout (#tip) + glossary term */
.tip {
  position: fixed;
  z-index: var(--z-tip);
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--intel);
  /* intel corner brackets drawn as background layers, so ::after stays free for the pointer */
  background:
    linear-gradient(var(--intel), var(--intel)) top left / 10px 2px no-repeat,
    linear-gradient(var(--intel), var(--intel)) top left / 2px 10px no-repeat,
    linear-gradient(var(--intel), var(--intel)) bottom right / 10px 2px no-repeat,
    linear-gradient(var(--intel), var(--intel)) bottom right / 2px 10px no-repeat,
    var(--night);
  color: var(--bone);
  font: 400 var(--t-small)/1.4 var(--f-body);
  box-shadow: var(--shadow-1);
  transform-origin: var(--tip-x, 50%) 100%;
  animation: fx-tip 140ms var(--e-out) both;
  pointer-events: none;
}
.tip.below { transform-origin: var(--tip-x, 50%) 0; }
.tip::before {
  content: '// NS DICTIONARY';
  display: block;
  margin-bottom: 4px;
  font: 600 var(--t-micro)/1.3 var(--f-hud);
  letter-spacing: .2em;
  color: var(--intel);
}
.tip::after { /* 6px diamond pointer */
  content: '';
  position: absolute;
  left: var(--tip-x, 50%);
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--night);
  border-right: 1px solid var(--intel);
  border-bottom: 1px solid var(--intel);
  transform: translateX(-50%) rotate(45deg);
}
.tip.below::after { bottom: auto; top: -4px; border: 0; border-left: 1px solid var(--intel); border-top: 1px solid var(--intel); }
.term {
  position: relative;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--intel);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
  -webkit-text-decoration-color: var(--intel);
}
.term::after { content: ''; position: absolute; inset: -10px -4px; } /* 44px hit area */

/* ================================================================ patch fallback, art, icons */
.patch {
  --pc: var(--olive);
  display: grid;
  place-items: center;
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--night);
  box-shadow: inset 0 0 0 3px var(--pc), inset 0 0 0 6px var(--night), inset 0 0 0 7px var(--line-3);
  font-size: 40px;
  line-height: 1;
}
.art { display: block; object-fit: contain; }
.ic { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; }

/* ================================================================ utilities */
.tabs-num, .num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-4); }
.nowrap { white-space: nowrap; }
.clip { overflow: hidden; }

/* [data-in]: below-the-fold entry, once (FX.mount adds .in); --i staggers lists, capped at 8 */
[data-in] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out);
  transition-delay: calc(min(var(--i, 0), 8) * var(--stagger));
}
[data-in].in { opacity: 1; transform: none; }
/* [data-loop]: FX.mount toggles .paused while off-screen */
[data-loop].paused, [data-loop].paused *, [data-loop].paused::before, [data-loop].paused::after,
[data-loop].paused *::before, [data-loop].paused *::after { animation-play-state: paused !important; }
/* hidden tab pauses everything (FX.every intervals stop too) */
html.tab-hidden *, html.tab-hidden *::before, html.tab-hidden *::after { animation-play-state: paused !important; }
/* .fx-done jumps every animation and transition inside it to its end state (tap-to-finish) */
.fx-done *, .fx-done *::before, .fx-done *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
.fx-type-rest { visibility: hidden; }
/* FX.scrambleLoop redaction: the sweeping scan cell and brief flicker cells (colour + opacity only, width never moves) */
.fx-rd-hot { color: var(--intel); text-shadow: 0 0 6px rgba(94, 230, 208, .55); }
.fx-rd-dim { opacity: .45; }

/* keyframe helpers (screens may use these instead of redefining) */
.fx-fade-up { animation: fx-fade-up var(--d-ui) var(--e-out) both; }
.fx-pop { animation: fx-pop var(--d-pop) var(--e-impact) both; }
.fx-impact { animation: fx-impact var(--d-pop) var(--e-impact) both; }
.fx-shake { animation: fx-shake 260ms var(--e-out) 1; }
.fx-slide-r { animation: fx-slide-r var(--d-micro) var(--e-out) both; }
.fx-float { animation: fx-float 4s ease-in-out infinite alternate; }
.fx-ring { animation: fx-ring 900ms var(--e-out) both; }
.rm-fade { /* reduced-motion opt-in target; normal motion is whatever the component sets */ }
html.lowpower .lp-off { display: none !important; }

/* ================================================================ FX layers (created by fx.js on <body>, never inside .screen) */
.fx-letterbox {
  position: fixed;
  left: 0;
  right: 0;
  height: 8vh;
  z-index: var(--z-letterbox);
  background: var(--void);
  pointer-events: none;
}
.fx-letterbox.top { top: 0; animation: fx-lb-top 240ms var(--e-inout) both; }
.fx-letterbox.bot { bottom: 0; animation: fx-lb-bot 240ms var(--e-inout) both; }
.fx-letterbox.top.out { animation: fx-lb-top-out 240ms var(--e-inout) forwards; }
.fx-letterbox.bot.out { animation: fx-lb-bot-out 240ms var(--e-inout) forwards; }
.fx-canvas { position: fixed; left: 0; top: 0; z-index: var(--z-fx); pointer-events: none; }
.fx-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); }
/* one-shot glitch (FX.glitch): static clip slices, only transform + opacity move */
:where(.fx-glitch) { position: relative; }
.fx-glitch::before, .fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  white-space: pre-line;
  text-align: inherit;
  pointer-events: none;
  opacity: 0;
}
.fx-glitch::before { color: rgba(94, 230, 208, .7); clip-path: inset(10% 0 55% 0); animation: fx-glitch-a 420ms steps(3, end) 1 both; }
.fx-glitch::after { color: rgba(255, 122, 61, .7); clip-path: inset(60% 0 8% 0); animation: fx-glitch-b 420ms steps(3, end) 1 both; }

/* ================================================================ screen travel (render() swaps DOM; no exit animation) */
.screen { animation: fx-enter var(--d-enter) var(--e-out) backwards; transform-origin: 50% 0; }
.screen.back { animation-name: fx-enter-back; }

/* ================================================================ keyframe library */
@keyframes fx-enter { from { opacity: 0; transform: translateX(24px) skewX(-4deg); } }
@keyframes fx-enter-back { from { opacity: 0; transform: translateX(-24px) skewX(4deg); } }
@keyframes fx-fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-impact { from { opacity: 0; transform: translateY(-40px) scale(1.6); } }
@keyframes fx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes fx-glitch-a { 0% { opacity: 1; transform: translateX(-3px); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes fx-glitch-b { 0% { opacity: 1; transform: translateX(3px); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes fx-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes fx-ring { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes fx-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fx-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-slide-r { from { opacity: 0; transform: translateX(24px); } }
@keyframes fx-hazard { from { transform: translateX(0); } to { transform: translateX(-22.63px); } }
@keyframes fx-lb-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes fx-lb-bot { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fx-lb-top-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes fx-lb-bot-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fx-pulse { from { opacity: .35; } to { opacity: .8; } }
@keyframes fx-bk-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes fx-tick-in { from { opacity: 0; transform: scale(.5); } }
@keyframes fx-tip { from { opacity: 0; transform: scale(.94); } }
@keyframes fx-scene-in { from { opacity: 0; } to { opacity: .16; } }
@keyframes fx-rm-fade { from { opacity: 0; } }
@keyframes fx-odo-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes fx-odo-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fx-odo-out-back { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes fx-odo-in-back { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ================================================================ reduced motion: final states, 150ms opacity fades */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .screen, .screen.back { animation: fx-rm-fade 150ms ease-out backwards !important; }
  .rm-fade { animation: fx-rm-fade 150ms ease-out both !important; }
  [data-in] { transform: none !important; transition: opacity 150ms ease-out !important; }
  .toast, .toast.show { transform: none !important; transition: opacity 150ms linear !important; }
  .fx-float, .fx-glitch::before, .fx-glitch::after, .fx-letterbox, .fx-canvas { animation: none !important; }
  .fx-glitch::before, .fx-glitch::after { display: none; }
  .btn:active, .chip:active, .toggle button:active { transform: none; }
}

/* ================================================================ lowpower (html.lowpower, set by FX) */
html.lowpower .fx-float { animation: none; }
html.lowpower .fx-canvas { display: none; }

@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ================================================================ desktop HUD alignment (1100px and up)
   --bar-in is the topbar's inline inset: the gutter on phones, and on desktop whatever lines the brand and #hud up
   with the 1080 content container instead of the window edges, so the odometer reads as game HUD rather than
   browser chrome. Anything docked beside the HUD (the quiz's reaction line in quiz.css) can position against it:
   right: calc(var(--bar-in, var(--gutter)) + 118px). Off the quiz, the toast moves to bottom-centre on desktop,
   under the column the eye is on (it rises from 16px below). It sits above the bottom-bar lane on results, and
   anywhere else a bottom bar is showing (.lift, set by core.toast).
   Transform + opacity only; the reduced-motion block above already makes it a plain fade. */
:root { --bar-in: var(--gutter); }
@media (min-width: 1100px) {
  :root { --bar-in: max(var(--gutter), calc(50% - 540px + var(--gutter))); }
  .topbar { padding-left: var(--bar-in); padding-right: var(--bar-in); }
  .topbar::after { left: var(--bar-in); }
  body:not([data-scene="quiz"]) .toast {
    top: auto;
    bottom: calc(28px + var(--safe-b));
    left: 0;
    right: 0;
    width: max-content;
    max-width: min(460px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 12px 18px 12px 20px;
    transform: translateY(16px);
  }
  /* results always reserves the bottom bar's lane (its sticky CTA / visitor bar can slide in under a live toast) */
  body:not([data-scene="quiz"]) .toast.lift, body[data-scene="results"] .toast { bottom: calc(108px + var(--safe-b)); }
  body:not([data-scene="quiz"]) .toast.show { transform: none; }
  /* the quiz's docked reaction line follows the HUD to its aligned position */
  html body[data-scene="quiz"] .toast { right: calc(var(--bar-in) + 118px); }
}

/* ================================================================ LEGACY BRIDGE
   What is left of the pre-Season-01 bridge: zero-specificity (:where) defaults that rebuilt markup still leans on
   (W10 checked every other bridge rule against the new markup on every screen at 360, 768 and 1280: unused, deleted).
   Any rule a screen stylesheet writes still wins. */
:where(.section-head p) { color: var(--dust); max-width: 36em; }
:where(.q-meta) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font: 600 var(--t-label)/1.3 var(--f-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--dust); }
:where(.processing) { display: grid; gap: 24px; justify-items: center; padding-top: 24px; text-align: center; }
:where(.processing > .radar) { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-3); background: radial-gradient(circle, transparent 0 32%, var(--line-2) 32.5% 33%, transparent 33.5% 65%, var(--line-2) 65.5% 66%, transparent 66.5%), var(--night); }
:where(.kopi-h) { display: flex; align-items: center; gap: 10px; }
:where(.radar-list) { display: grid; gap: 8px; margin-top: 14px; }
:where(.radar-list > div) { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); font: 600 15px/1.3 var(--f-hud); text-transform: uppercase; }