@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/atkinson-hyperlegible-next.378aea0f5c1d.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --surface-950: #0e1313;
  --surface-900: #111818;
  --surface-850: #182020;
  --surface-780: #232d2d;
  --text-100: #f3f2ec;
  --text-400: #a9b0ac;
  --focus-400: #7cb8ff;
  --capture-400: #52cfa4;
  --warning-500: #dda94b;
  --danger-500: #d96657;
  --rule: #606a67;
  --scale: 1;
  --s1: calc(4px * var(--scale));
  --s2: calc(8px * var(--scale));
  --s3: calc(12px * var(--scale));
  --s4: calc(16px * var(--scale));
  --s6: calc(24px * var(--scale));
  --s8: calc(32px * var(--scale));
  color-scheme: dark;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-size: calc(16px * var(--scale));
  line-height: 1.45;
  background: var(--surface-950);
  color: var(--text-100);
}

[data-ui-scale="140"] { --scale: 1.4; }
[data-high-contrast="true"] {
  --surface-900: #000;
  --surface-850: #090909;
  --surface-780: #1b1b1b;
  --text-400: #f3f2ec;
  --rule: #f3f2ec;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; background: var(--surface-950); color: var(--text-100); }
a { color: var(--text-100); text-underline-offset: 0.2em; }
a:hover { color: var(--focus-400); }
:focus { outline: none; }
:focus-visible {
  outline: calc(2px * var(--scale)) solid var(--focus-400);
  outline-offset: calc(3px * var(--scale));
  box-shadow: 0 0 0 calc(1px * var(--scale)) var(--surface-950);
}

.skip-link {
  position: fixed;
  inset: var(--s2) auto auto var(--s2);
  z-index: 10;
  min-height: calc(44px * var(--scale));
  display: inline-flex;
  align-items: center;
  padding: var(--s2) var(--s3);
  background: var(--text-100);
  color: var(--surface-950);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.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;
}

.site-header {
  min-height: calc(40px * var(--scale));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s6);
  padding: var(--s2) var(--s6);
  border-bottom: 1px solid var(--rule);
}
.site-header p, .fixture-label { margin: 0; color: var(--text-400); font-size: calc(14px * var(--scale)); }
.fixture-label { letter-spacing: 0.08em; text-transform: uppercase; }
.wordmark {
  min-height: calc(44px * var(--scale));
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  width: fit-content;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wordmark small { color: var(--text-400); }
.wordmark-mark {
  width: var(--s4);
  height: var(--s6);
  display: inline-block;
  border: 1px solid var(--text-100);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.shell {
  width: min(100%, 120rem);
  min-height: calc(100vh - calc(40px * var(--scale)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(calc(300px * var(--scale)), calc(380px * var(--scale))) minmax(0, 1fr);
}
.truth-rail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--s6);
  padding: var(--s8);
  border-right: 1px solid var(--rule);
  background: var(--surface-900);
}
.eyebrow {
  margin: 0 0 var(--s2);
  color: var(--text-400);
  font-size: calc(13px * var(--scale));
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: calc(30px * var(--scale)); line-height: 1.15; font-weight: 400; }
h2 { margin: 0; font-size: calc(24px * var(--scale)); line-height: 1.2; font-weight: 400; }
.lede { max-width: 42ch; margin: var(--s3) 0 0; color: var(--text-400); }

.boot-chain { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.boot-chain li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: calc(48px * var(--scale));
  padding: var(--s2) var(--s3);
  border-left: calc(3px * var(--scale)) solid var(--rule);
  background: var(--surface-850);
}
.boot-chain li[data-state="ready"] { border-color: var(--capture-400); }
.boot-chain li[data-state="blocked"] { border-color: var(--warning-500); }
.boot-chain li[data-state="error"] { border-color: var(--danger-500); }
.boot-chain span, .boot-chain output { color: var(--text-400); font-size: calc(14px * var(--scale)); }
.boot-chain strong { font-weight: 400; }

.truth-list { margin: 0; border-block: 1px solid var(--rule); }
.truth-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--surface-780);
}
.truth-list div:last-child { border-bottom: 0; }
.truth-list dt { color: var(--text-400); }
.truth-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.route-links { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.route-links a {
  min-height: calc(44px * var(--scale));
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  text-decoration: none;
}

.viewport { min-width: 0; display: grid; align-content: start; gap: var(--s4); padding: var(--s8); }
.viewport-header { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); }
.backend-badge {
  flex: 0 1 auto;
  margin: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  color: var(--text-400);
}
.canvas-frame { position: relative; min-width: 0; border: 1px solid var(--rule); background: var(--surface-900); }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-900); pointer-events: none; }
.canvas-caption {
  position: absolute;
  inset: auto var(--s3) var(--s3) var(--s3);
  margin: 0;
  padding: var(--s2) var(--s3);
  background: rgba(14, 19, 19, 0.92);
  border-left: calc(3px * var(--scale)) solid var(--focus-400);
  color: var(--text-100);
}
.candidate-note { min-height: calc(54px * var(--scale)); padding: var(--s3) var(--s4); border: 1px solid var(--rule); color: var(--text-400); }
.candidate-note[data-state="ready"] { border-color: var(--capture-400); color: var(--text-100); }
.candidate-note[data-state="blocked"] { border-color: var(--warning-500); color: var(--text-100); }
.candidate-note[data-state="error"] { border-color: var(--danger-500); color: var(--text-100); }
.command-dock {
  width: min(100%, calc(640px * var(--scale)));
  min-height: calc(48px * var(--scale));
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule);
  border-radius: calc(6px * var(--scale));
  background: var(--surface-850);
  color: var(--text-400);
  font-size: calc(14px * var(--scale));
}
.command-dock strong { color: var(--text-100); font-weight: 400; text-align: center; }
.command-dock span:last-child { text-align: right; }

.return-shell {
  width: min(calc(720px * var(--scale)), calc(100% - var(--s8)));
  margin: clamp(var(--s8), 8vh, calc(96px * var(--scale))) auto;
  display: grid;
  gap: var(--s6);
  padding: var(--s8);
  border: 1px solid var(--rule);
  background: var(--surface-900);
}
.return-shell .lede { margin: 0; }
.return-shell .candidate-note { display: flex; align-items: center; }
.return-shell .candidate-note p { margin: 0; }

[data-presentation="reduced"] * { animation: none !important; transition: none !important; }
[data-presentation="reduced"] .canvas-caption { position: static; border-left: 0; border-top: calc(3px * var(--scale)) solid var(--focus-400); }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header p { display: none; }
  .shell { grid-template-columns: 1fr; }
  .truth-rail { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-height: 760px) and (min-width: 961px) and (max-width: 1360px) {
  .truth-rail, .viewport { padding-block: var(--s4); }
  .truth-rail { gap: var(--s3); }
  .lede { margin-top: var(--s2); }
  .boot-chain, .route-links { gap: var(--s1); }
  .boot-chain li { min-height: calc(44px * var(--scale)); }
  .truth-list div { padding-block: var(--s1); }
  :root[data-ui-scale="100"] .truth-list div { padding-block: 0; line-height: 1.3; }
}

@media (max-width: 560px) {
  .site-header, .truth-rail, .viewport { padding-inline: var(--s4); }
  .fixture-label { display: none; }
  .viewport-header { align-items: start; flex-direction: column; }
  .canvas-caption { position: static; }
  .command-dock { grid-template-columns: 1fr; text-align: center; }
  .command-dock span:last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* MVP-06 Build 3: the live-match battle HUD (client/web/src/index.html's
   #battle-hud, driven entirely by app.js's bootLiveMatch). Layout invariants
   from PRODUCT.md's "Browser battle layout and service states": the newest
   binding readback is never covered by the canvas, connection/capture state
   is never color-only (every state carries a text label), and keyboard focus
   moves among typed input, ticker, captions, and settings without the canvas
   trapping it. */
.battle-hud {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  min-height: 100vh;
  gap: var(--s2);
  padding: var(--s3);
}

.battle-topstrip {
  display: flex;
  gap: var(--s4);
  align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  background: var(--surface-900);
  font-variant-numeric: tabular-nums;
}
.battle-connection[data-state="ready"]::before { content: "Connected — "; }
.battle-connection[data-state="disarmed"]::before { content: "Disarmed — "; }
.battle-connection[data-state="degraded"]::before { content: "Degraded — "; }

.battle-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: var(--s3);
  min-height: 0;
}

.battle-viewport {
  position: relative;
  min-width: 0;
  min-height: 320px;
  border: 1px solid var(--rule);
  background: var(--surface-900);
}
.battle-viewport canvas { display: block; width: 100%; height: 100%; }

.battle-ticker {
  border: 1px solid var(--rule);
  background: var(--surface-900);
  padding: var(--s2) var(--s3);
  overflow-y: auto;
  min-height: 0;
}
.battle-ticker h2 { margin: 0 0 var(--s2); font-size: 0.95em; color: var(--text-400); }
.battle-ticker-active, .battle-ticker-settled { list-style: none; margin: 0; padding: 0; }
.battle-ticker-active li {
  padding: var(--s2);
  margin-bottom: var(--s1);
  border-left: calc(3px * var(--scale)) solid var(--focus-400);
  background: var(--surface-850);
}
.battle-ticker-active li[data-phase="Clarification"] { border-left-color: var(--warning-500); }
.battle-ticker-active li[data-phase="Belayed"],
.battle-ticker-active li[data-phase="Cancelled"] { border-left-color: var(--danger-500); }
.battle-ticker-settled li {
  padding: var(--s1) var(--s2);
  color: var(--text-400);
  font-size: 0.9em;
  border-bottom: 1px solid var(--surface-780);
}
.battle-ticker li .ticker-order-id { color: var(--text-400); }
.battle-ticker li .ticker-phase { font-weight: 600; }

.battle-captions {
  min-height: calc(24px * var(--scale));
  padding: var(--s1) var(--s2);
  color: var(--text-100);
}

.battle-dock {
  border: 1px solid var(--rule);
  background: var(--surface-900);
  padding: var(--s3);
  display: grid;
  gap: var(--s1);
}
.battle-dock[data-state="disarmed"] { border-color: var(--rule); }
.battle-dock[data-state="capturing"] { border-color: var(--capture-400); }
.battle-dock[data-state="clarification"] { border-color: var(--warning-500); }
.battle-dock[data-state="binding-readback"] { border-color: var(--focus-400); }
.battle-dock .dock-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85em; color: var(--text-400); }
.battle-dock .dock-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.battle-dock .dock-options li { padding: var(--s1) var(--s2); background: var(--surface-850); }

.battle-command-line { display: flex; align-items: center; gap: var(--s3); }
.battle-command-line input {
  flex: 1;
  min-width: 0;
  padding: var(--s2) var(--s3);
  background: var(--surface-850);
  border: 1px solid var(--rule);
  color: var(--text-100);
  font: inherit;
}
.battle-command-line input:disabled { opacity: 0.5; }
.battle-ptt-hint { color: var(--text-400); font-size: 0.9em; white-space: nowrap; }

.battle-replay-download {
  justify-self: start;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule);
  background: var(--surface-850);
}

@media (max-width: 720px) {
  .battle-body { grid-template-columns: 1fr; }
  .battle-ticker { max-height: 30vh; }
}

/* --- MVP-08 Build B: lobby-flow shell (see lobby.js) ---------------------- */

.lobby-shell {
  width: min(100%, 46rem);
  margin: var(--s8) auto;
  padding: 0 var(--s4);
  display: grid;
  gap: var(--s4);
}
.lobby-screen {
  border: 1px solid var(--rule);
  background: var(--surface-900);
  padding: var(--s6);
  display: grid;
  gap: var(--s3);
}
.lobby-screen h1 { margin: 0; font-size: 1.4em; }
.lobby-screen h2 { margin: var(--s2) 0 0; font-size: 1.05em; }
.lobby-screen p { margin: 0; }
.lobby-eyebrow { color: var(--text-400); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8em; }
.lobby-note, .lobby-privacy { color: var(--text-400); font-size: 0.92em; }
/* Every waiting/blocked state renders through this block: what is
   happening, what is safe, and the next action — never a bare spinner. */
.lobby-state {
  border-left: calc(3px * var(--scale)) solid var(--focus-400);
  background: var(--surface-850);
  padding: var(--s2) var(--s3);
  display: grid;
  gap: var(--s1);
}
.lobby-state[data-tone="blocked"] { border-left-color: var(--danger-500); }
.lobby-state[data-tone="warning"] { border-left-color: var(--warning-500); }
.lobby-state[data-tone="ok"] { border-left-color: var(--capture-400); }
.lobby-state strong { text-transform: none; }

.lobby-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.lobby-trust li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) var(--s2); background: var(--surface-850); }
.lobby-trust li span:first-child { color: var(--text-400); }

.lobby-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.lobby-actions button, .lobby-shell a.lobby-button {
  min-height: calc(44px * var(--scale));
  padding: var(--s2) var(--s4);
  font: inherit;
  color: var(--text-100);
  background: var(--surface-850);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.lobby-actions button.primary { border-color: var(--focus-400); }
.lobby-actions button:disabled { opacity: 0.5; cursor: default; }
/* The two consent actions are equally weighted by contract: same class,
   same size, no visual primary between them. */
.lobby-actions.equal button { border-color: var(--focus-400); flex: 1 1 12rem; }

.lobby-form { display: grid; gap: var(--s2); }
.lobby-form label { color: var(--text-400); font-size: 0.92em; }
.lobby-form input, .lobby-form select {
  padding: var(--s2) var(--s3);
  background: var(--surface-850);
  border: 1px solid var(--rule);
  color: var(--text-100);
  font: inherit;
}
.lobby-form .field-error { color: var(--danger-500); }

.lobby-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.lobby-roster li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-850); }
.lobby-roster .seat-name { font-weight: 600; }
.lobby-roster .seat-stage { color: var(--text-400); }
.lobby-roster li[data-stage="ready"] .seat-stage { color: var(--capture-400); }
.lobby-roster li[data-stage="declined"] .seat-stage,
.lobby-roster li[data-stage="failed"] .seat-stage,
.lobby-roster li[data-stage="disconnected"] .seat-stage { color: var(--danger-500); }

.lobby-share { display: grid; gap: var(--s2); border: 1px solid var(--rule); padding: var(--s3); }
.lobby-share input { width: 100%; padding: var(--s2); background: var(--surface-850); border: 1px solid var(--rule); color: var(--text-100); font: inherit; }

.drill-transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.drill-transcript li { padding: var(--s1) var(--s2); background: var(--surface-850); }

/* MVP-08 Build D: draft army review and deploy sector picker. */
.draft-army { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.draft-army th, .draft-army td { text-align: left; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--surface-780); }
.draft-army th { color: var(--text-400); font-weight: 600; }
.lobby-roster li[data-stage="reviewing"] .seat-stage { color: var(--text-400); }
.deploy-sectors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.deploy-sectors li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-850); }
.deploy-sectors li[data-mine="true"] { outline: 1px solid var(--capture-400); }
.deploy-sectors .seat-stage { color: var(--capture-400); }

.aftermath-log { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.aftermath-log th, .aftermath-log td { text-align: left; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--surface-780); vertical-align: top; }
.aftermath-log th { color: var(--text-400); font-weight: 600; }