/* Memory Arena arcade: dark CRT palette, one phosphor per cabinet, bevelled
   panels, uppercase mono labels. The era styling and local display font live in arcade.css. */
:root {
  color-scheme: dark;
  --bg: #050708;
  --bg-2: #0a0d10;
  --cab-hi: #333c44;
  --cab-mid: #171c21;
  --cab-lo: #07090b;
  --panel: #10151a;
  --panel-deep: #0a0e11;
  --screen: #060a08;
  --line: #262e35;
  --text: #dfe6e2;
  --muted: #8a978f;
  --green: #4dff91;
  --amber: #ffb02e;
  --cyan: #5ee3ff;
  --violet: #c99bff;
  --red: #ff6464;
  --phosphor: var(--green);
  --a: var(--green);
  --b: var(--amber);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.cab-training, body[data-screen="training"] .cabinet-frame { --phosphor: var(--amber); }
.cab-arena { --phosphor: var(--green); }
.cab-duel { --phosphor: var(--cyan); }
.cab-workshop { --phosphor: var(--violet); }
.player-a { --player: var(--a); }
.player-b { --player: var(--b); }

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top, #0b1014 0%, var(--bg) 60%); color: var(--text); font: 13px/1.5 var(--mono); overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-transform: uppercase; letter-spacing: .12em; }
h1 { font-size: 18px; font-weight: 800; }
h2 { font-size: 11px; font-weight: 800; color: var(--phosphor); text-shadow: 0 0 8px color-mix(in srgb, var(--phosphor) 45%, transparent); }
h3 { font-size: 12px; font-weight: 700; }
code, .mono { font-family: var(--mono); }
code { color: var(--phosphor); font-size: .95em; }
.muted { color: var(--muted); }
.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; }
[hidden] { display: none !important; }
a { color: var(--phosphor); }
main { max-width: 1800px; margin: 0 auto; padding: 22px 24px 32px; }
.screen:focus { outline: none; }

/* ---------------------------------------------------------------- controls */
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, canvas, summary { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, canvas:focus-visible, summary:focus-visible { outline: 2px solid var(--phosphor); }
button {
  cursor: pointer;
  font: 700 11px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(#2b333a, #1a2026);
  border: 2px solid;
  border-color: #3d474f var(--cab-lo) var(--cab-lo) #3d474f;
  border-radius: 3px;
  padding: 9px 14px;
  min-height: 40px;
  white-space: nowrap;
  box-shadow: 0 2px 0 #000;
}
button:hover:enabled { background: linear-gradient(#364049, #222a30); border-top-color: #505b64; border-left-color: #505b64; }
button:active:enabled { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
button:disabled { opacity: .42; cursor: default; }
button.primary { background: linear-gradient(color-mix(in srgb, var(--phosphor) 90%, #fff), color-mix(in srgb, var(--phosphor) 72%, #000)); color: #06100a; border-color: color-mix(in srgb, var(--phosphor) 60%, #fff) color-mix(in srgb, var(--phosphor) 35%, #000) color-mix(in srgb, var(--phosphor) 35%, #000) color-mix(in srgb, var(--phosphor) 60%, #fff); text-shadow: none; }
button.primary:hover:enabled { background: linear-gradient(color-mix(in srgb, var(--phosphor) 75%, #fff), color-mix(in srgb, var(--phosphor) 85%, #000)); }
button.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
button.quiet:hover:enabled { color: var(--text); background: #182026; border-color: transparent; }
button.tiny { font-size: 9px; padding: 4px 8px; min-height: 28px; box-shadow: none; color: var(--player, var(--text)); }
input, select, textarea { color: var(--text); background: var(--panel-deep); border: 2px solid; border-color: var(--cab-lo) #2c353d #2c353d var(--cab-lo); border-radius: 3px; padding: 8px 10px; min-width: 0; min-height: 40px; }
input[type=number] { width: 110px; }
input[type=checkbox] { accent-color: var(--phosphor); width: auto; min-height: 0; }
select { max-width: 100%; }
textarea { min-height: 120px; }
label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- chrome */
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 40; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .17) 2px 3px); }
.scanlines::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, .035) 50%, transparent 100%) no-repeat; background-size: 100% 180px; animation: roll 9s linear infinite; }
body.scanlines-off .scanlines { display: none; }
@keyframes roll { from { background-position: 0 -180px; } to { background-position: 0 100vh; } }
@keyframes blink { 50% { opacity: .15; } }

.marquee { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: linear-gradient(#1c232a, #0d1115); border-bottom: 3px solid var(--cab-lo); box-shadow: inset 0 -1px 0 var(--cab-hi), 0 3px 0 #000; }
.marquee-title { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 14px; }
.marquee-mark { font-size: 30px; line-height: 1; color: var(--green); text-shadow: 0 0 12px var(--green); }
.marquee-name { display: block; font-size: 20px; letter-spacing: .3em; font-weight: 800; color: #fff; text-shadow: 0 0 10px rgba(77, 255, 145, .7), 0 0 26px rgba(77, 255, 145, .35); }
.marquee-title small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .18em; color: var(--muted); }
.marquee-nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.connection { padding: 6px 24px; color: var(--muted); font-size: 10px; letter-spacing: .14em; border-bottom: 1px solid var(--line); }
.connection.connected { display: none; }
.error-banner { margin: 16px 24px 0; padding: 12px 16px; background: #3a1717; border: 2px solid; border-color: #7a3a3a #1a0808 #1a0808 #7a3a3a; color: #ffc4c4; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.error-banner button { padding: 0 8px; background: none; border: 0; box-shadow: none; color: inherit; font-size: 22px; min-height: 0; }
.help-panel { padding: 16px 24px 22px; background: #111a1f; border-bottom: 3px solid var(--cab-lo); }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; color: #b9c6c9; font-size: 12px; }
.help-grid strong { color: var(--text); }
.help-panel.inline { padding: 0 0 14px; border-top: 2px solid var(--cab-lo); border-bottom: 0; }
.help-panel.inline .section-heading { padding-inline: 14px; }
.help-panel.inline .help-grid { grid-template-columns: 1fr; gap: 10px; padding: 0 14px; }
.notes-link { min-height: 0; padding: 4px 6px; border: 0; background: none; box-shadow: none; color: var(--phosphor); font-size: 9px; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.notes-link:hover:enabled { background: none; color: var(--text); }
.editor-footer { align-items: center; }

.ticker { position: relative; overflow: hidden; border-top: 3px solid var(--cab-lo); box-shadow: inset 0 1px 0 var(--cab-hi); background: #0a0d10; display: flex; align-items: center; padding: 10px 0; font-size: 10px; letter-spacing: .14em; color: var(--green); text-shadow: 0 0 6px rgba(77, 255, 145, .5); }
.ticker-track { flex: 1; display: inline-flex; white-space: nowrap; animation: ticker 45s linear infinite; }
.ticker-text { flex: none; padding-right: 96px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.engine-label { flex: none; padding: 0 18px; border-left: 1px solid var(--line); color: var(--muted); text-shadow: none; white-space: nowrap; }

/* ---------------------------------------------------------------- lights & pills */
.lights { display: flex; flex-wrap: wrap; gap: 8px; }
.light { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 4px 9px; border: 1px solid #2b343b; background: #0b0f12; color: var(--muted); border-radius: 2px; text-transform: uppercase; white-space: nowrap; }
.light::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2a3238; box-shadow: inset 0 0 2px #000; flex: none; }
.light.on { color: var(--text); }
.light.live.on::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.light.recorded.on::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.light.ai.on::before { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.light.cyan.on::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.light.amber.on::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.status-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border: 1px solid #3a454d; border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; background: #151b20; color: #b4c3ca; }
.status-pill.live { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 50%, #000); background: color-mix(in srgb, var(--phosphor) 12%, #0b0f12); }
.status-pill.finished { color: var(--amber); border-color: #8c674c; background: #2b2117; }
.tag { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; border: 1px solid #3a454d; color: var(--muted); white-space: nowrap; }
.tag.ai { color: var(--violet); border-color: #5b4a7a; background: #1a1424; }
.tag.builtin { color: #9fb0a8; }

/* ---------------------------------------------------------------- lobby */
.lobby-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lobby-head h1 { font-size: 14px; letter-spacing: .3em; color: var(--muted); }
.lobby-hint { font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.cabinets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cabinet { position: relative; display: grid; gap: 12px; padding: 14px 16px 18px; background: linear-gradient(180deg, #1c2228, #12171b); border: 4px solid; border-color: var(--cab-hi) var(--cab-lo) var(--cab-lo) var(--cab-hi); box-shadow: inset 0 0 0 2px #0b0f12, inset 0 0 0 3px #232a31, 0 12px 30px rgba(0, 0, 0, .6); }
.cabinet.selected { box-shadow: inset 0 0 0 2px #0b0f12, inset 0 0 0 3px color-mix(in srgb, var(--phosphor) 60%, #232a31), 0 0 28px color-mix(in srgb, var(--phosphor) 30%, transparent), 0 12px 30px rgba(0, 0, 0, .6); }
.title-plate { font-size: 19px; font-weight: 800; letter-spacing: .28em; color: var(--phosphor); text-align: center; padding: 9px 8px; background: #05070a; border: 2px solid; border-color: #0b0f12 #2c353d #2c353d #0b0f12; text-shadow: 0 0 10px currentColor, 0 0 22px color-mix(in srgb, var(--phosphor) 45%, transparent); text-transform: uppercase; }
.cabinet-screen { position: relative; min-height: 150px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--phosphor) 10%, #060a08) 0%, #040706 75%); border: 6px solid #0a0d10; border-radius: 12px; box-shadow: inset 0 0 34px rgba(0, 0, 0, .85), inset 0 0 10px color-mix(in srgb, var(--phosphor) 25%, transparent); padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 5px; color: var(--phosphor); text-shadow: 0 0 6px currentColor; overflow: hidden; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.cabinet-screen.attract { justify-content: space-between; padding: 8px 12px; }
.attract canvas { width: 100%; height: auto; image-rendering: pixelated; display: block; border: 1px solid #0f2418; }
.attract-overlay { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.attract-flash { color: var(--amber); animation: blink 1s steps(2) infinite; }
.attract-label { font-size: 9px; color: #9fb7a8; letter-spacing: .06em; text-transform: none; text-shadow: none; }
.preview-line { display: block; }
.preview-line.dim { color: #7f9a8a; text-transform: none; }
.preview-code { display: block; font-size: 10px; letter-spacing: .04em; text-transform: none; }
.preview-code.hot { color: var(--amber); }
.preview-blink { margin-top: 6px; animation: blink 1.2s steps(2) infinite; }
.pitch { font-size: 12px; color: #b9c6bf; line-height: 1.5; }
.start { justify-self: stretch; font-size: 14px; letter-spacing: .3em; min-height: 48px; background: linear-gradient(#4a1f1f, #2a0f0f); border-color: #7a3a3a #140606 #140606 #7a3a3a; color: #ffdede; text-shadow: 0 0 8px #ff6b6b; }
.start:hover:enabled { background: linear-gradient(#5c2727, #351414); }
.cabinet.selected .start { animation: blink 1.6s steps(2) infinite; }

/* ---------------------------------------------------------------- cabinet frames */
.cabinet-frame { background: #0d1115; border: 4px solid; border-color: var(--cab-hi) var(--cab-lo) var(--cab-lo) var(--cab-hi); box-shadow: inset 0 0 0 2px #0b0f12, inset 0 0 0 3px #232a31, 0 12px 30px rgba(0, 0, 0, .6); padding: 0 0 18px; }
.cabinet-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; margin: 3px 3px 16px; background: linear-gradient(#1f262d, #12171b); border-bottom: 3px solid var(--cab-lo); }
.cabinet-name { flex: 1; font-size: 18px; letter-spacing: .3em; color: var(--phosphor); text-shadow: 0 0 10px currentColor, 0 0 24px color-mix(in srgb, var(--phosphor) 40%, transparent); }
.back-to-lobby { min-height: 40px; }
.cabinet-frame > .toolbar, .cabinet-frame > .deck, .cabinet-frame > .training, .cabinet-frame > .arena-grid, .cabinet-frame > .duel-grid, .cabinet-frame > .workshop-grid { margin-left: 16px; margin-right: 16px; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.transport { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.speed { display: flex; align-items: center; gap: 4px; }
.speed > .muted { font-size: 9px; letter-spacing: .12em; margin-right: 4px; }
.speed button { min-width: 48px; padding-left: 8px; padding-right: 8px; }
.speed button.selected { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 60%, #000) var(--cab-lo) var(--cab-lo) color-mix(in srgb, var(--phosphor) 60%, #000); background: color-mix(in srgb, var(--phosphor) 14%, #1a2026); }
.seed-control { display: flex; align-items: center; gap: 8px; }
.replay-control { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.replay-note { flex-basis: 100%; font-size: 11px; line-height: 1.5; color: #b4c3ca; }
.panel { background: var(--panel); border: 2px solid; border-color: #2c353d var(--cab-lo) var(--cab-lo) #2c353d; box-shadow: inset 0 0 0 1px #151b20; overflow: hidden; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border-bottom: 2px solid var(--cab-lo); background: linear-gradient(#1a2026, #12171b); box-shadow: inset 0 -1px 0 var(--line); }
.section-heading > .mono { font-size: 9px; letter-spacing: .08em; }
.inline-actions { display: flex; align-items: center; gap: 6px; }
.small-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
.table-note { font-size: 9px; letter-spacing: .06em; color: var(--muted); padding: 8px 14px; }
.empty-state { color: var(--muted); font-size: 12px; padding: 26px 16px; }

/* ---------------------------------------------------------------- training */
.training { --phosphor: var(--amber); margin-bottom: 16px; padding: 12px 16px 16px; background: #14110a; border: 3px solid; border-color: #4a3a1a #120d04 #120d04 #4a3a1a; box-shadow: inset 0 0 0 1px #211a0c; }
.training-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.training-head h2 { font-size: 15px; letter-spacing: .22em; color: var(--amber); }
.training-teach { color: #e8d7b3; font-size: 12px; line-height: 1.6; max-width: 90ch; }
.objectives { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.objective { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: #f1e3c4; }
.objective-mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #6b5420; border-radius: 3px; font-size: 11px; font-weight: 800; color: var(--amber); }
.objective.done { color: #9fb7a8; }
.objective.done .objective-mark { background: var(--green); border-color: var(--green); color: #06100a; }
.training-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.training-actions button { white-space: normal; max-width: 100%; }
.training-result { margin-top: 12px; padding: 8px 12px; border-left: 4px solid var(--amber); background: #1d170b; color: #f1e3c4; font-size: 12px; line-height: 1.5; }
.training-result.pass { border-left-color: var(--green); background: #0d1a12; color: #c9efd5; }
.training-result.fail { border-left-color: var(--red); background: #241010; color: #ffd2c8; }

/* ---------------------------------------------------------------- spectator deck */
.deck { margin-bottom: 16px; padding: 12px 14px 14px; background: #0b1410; border: 3px solid; border-color: #1f3a2b #061009 #061009 #1f3a2b; box-shadow: inset 0 0 0 1px #10221a; }
.deck-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deck-summary { font-size: 10px; color: #9fb7a8; letter-spacing: .06em; }
.deck-detail { margin-top: 6px; font-size: 11px; color: #a9c2b3; }
.deck-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.deck-callout { margin-top: 12px; padding: 10px 12px; background: #1a1204; border-left: 4px solid var(--amber); color: #ffe2a8; font-size: 12px; line-height: 1.55; display: grid; gap: 4px; }
.deck-callout strong { color: var(--amber); letter-spacing: .04em; overflow-wrap: anywhere; }
.deck-callout.draw { border-left-color: var(--cyan); background: #08161a; color: #bfeaf4; }
.deck-callout.draw strong { color: var(--cyan); }
.deck-callout.none { border-left-color: #8a978f; background: #14181a; color: #cdd6d1; }
.deck-callout.none strong { color: #e6ede9; }
.deck-callout.searching { border-left-color: var(--green); background: #08170f; color: #bfeccf; }
.deck-callout.searching strong { color: var(--green); }
.deck-position { color: #d3c39b; font-size: 11px; }

/* ---------------------------------------------------------------- arena */
.arena-grid { display: grid; grid-template-columns: minmax(240px, .92fr) minmax(380px, 1.9fr) minmax(247px, .98fr); gap: 16px; align-items: start; }
.program-panel + .program-panel { margin-top: 16px; }
.player-badge { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 6px; border: 1px solid var(--player); border-radius: 3px; color: var(--player); font-size: 11px; vertical-align: middle; }
.program-panel h2 { color: var(--player); text-shadow: 0 0 8px color-mix(in srgb, var(--player) 45%, transparent); }
.program-panel > select { display: block; width: calc(100% - 28px); margin: 14px 14px 8px; font-size: 12px; }
.bot-description { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 0 15px 12px; min-height: 32px; }
.source-editor { display: block; resize: vertical; min-height: 168px; max-height: 650px; width: 100%; height: 190px; border: 0; border-radius: 0; background: #070b09; padding: 14px; color: var(--player, var(--phosphor)); font: 11px/1.8 var(--mono); tab-size: 2; white-space: pre; overflow: auto; text-shadow: 0 0 5px color-mix(in srgb, var(--player, var(--phosphor)) 35%, transparent); }
.source-editor:focus-visible { outline-offset: -2px; }
.editor-error { margin: 0; padding: 9px 14px; background: #3a1717; border-top: 2px solid #7a3a3a; color: #ffc4c4; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.editor-footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 14px; font-size: 8px; letter-spacing: .1em; color: var(--muted); border-top: 1px solid var(--line); }
.programs-column > .small-note { margin: 12px 3px; }
.machine-column { display: grid; gap: 16px; }
.arena-readout { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; gap: 12px; }
.readout-label { display: block; font-size: 9px; letter-spacing: .14em; color: var(--muted); margin-bottom: 2px; }
.arena-readout strong { font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--phosphor); text-shadow: 0 0 10px color-mix(in srgb, var(--phosphor) 50%, transparent); }
.arena-readout small { font-size: 12px; color: var(--muted); letter-spacing: 0; text-shadow: none; }
.machine-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 10px; }
.memory-surface { margin: 0 14px; border: 4px solid #0a0d10; border-radius: 6px; padding: 5px; background: #040806; box-shadow: inset 0 0 20px rgba(0, 0, 0, .8); }
#memory-map { width: 100%; height: auto; display: block; cursor: crosshair; image-rendering: pixelated; }
.memory-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 14px; font-size: 10px; color: var(--muted); }
.memory-legend > span { display: flex; align-items: center; gap: 5px; }
.swatch { width: 7px; height: 7px; display: inline-block; background: #283239; }
.swatch.a { background: var(--a); }
.swatch.b { background: var(--b); }
.swatch.untouched { background: #3a4a42; }
.swatch.pc { background: transparent; border: 1px solid #fff; }
.swatch.written { background: transparent; border: 2px solid #ff5a3c; }
.memory-selection { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: #0b1010; border-top: 1px solid var(--line); font-size: 11px; }
.memory-selection > span:first-child { color: var(--phosphor); }
.memory-selection > span:last-child { margin-left: auto; font-size: 10px; }
.check-label { display: flex; gap: 4px; align-items: center; font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.check-label input { margin: 0; }
.code-table-head, .instruction { display: grid; grid-template-columns: 57px 76px minmax(0, 1fr); gap: 9px; align-items: center; }
.code-table-head { padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 8px; letter-spacing: .12em; color: #83949e; }
.instruction-list, .event-list { background: #070b09; }
.instruction { border: 0; border-bottom: 1px solid #10181a; border-radius: 0; padding: 7px 14px; min-height: 0; width: 100%; background: transparent; text-align: left; font: 11px/1.4 var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; position: relative; }
.instruction:hover:enabled { background: #10201a; border-color: #10201a; }
.instruction.selected { background: color-mix(in srgb, var(--phosphor) 14%, #070b09); box-shadow: inset 3px 0 0 var(--phosphor); }
.instruction .address { color: var(--muted); }
.instruction .word { color: #b1c0c6; }
.instruction .assembly { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.instruction .pc-marker { font-size: 8px; font-weight: 700; background: var(--player); color: #061008; padding: 1px 4px; border-radius: 2px; margin-right: 5px; }
.instruction.changed .word { color: var(--amber); }
.instruction.changed::after { content: ""; position: absolute; right: 6px; top: 14px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }
.cpu-summary { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 10px; }
.cpu-summary-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cpu-summary .pc-value { font-size: 19px; color: var(--player); text-shadow: 0 0 8px color-mix(in srgb, var(--player) 45%, transparent); }
.cpu-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; letter-spacing: .06em; }
.fault-message { color: var(--red); font-size: 11px; margin-top: 8px; overflow-wrap: anywhere; }
.segmented { display: flex; gap: 1px; border: 1px solid #3a464d; border-radius: 3px; padding: 2px; }
.segmented button { font-size: 10px; padding: 3px 9px; min-height: 26px; border: 0; box-shadow: none; background: transparent; color: var(--muted); }
.segmented button.selected { color: var(--player); background: #2c383f; }
.register-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 10px 4px; gap: 1px 11px; }
.register { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 4px; align-items: center; padding: 4px 3px; font-size: 9px; line-height: 1.7; border-bottom: 1px solid #1b2328; }
.register-label { color: var(--muted); white-space: nowrap; }
.register-label small { font-size: 8px; display: inline-block; margin-left: 3px; color: #70818c; }
.register-value { color: #cdd9de; text-align: right; }
.register.changed { background: color-mix(in srgb, var(--phosphor) 14%, #0f1a15); border-color: color-mix(in srgb, var(--phosphor) 40%, #000); }
.register.changed .register-value { color: var(--phosphor); }
.events-panel { grid-column: 1 / -1; }
.event-list { max-height: 205px; overflow: auto; scrollbar-color: #44525a transparent; }
.event-row { display: grid; grid-template-columns: 53px 29px 58px minmax(130px, .8fr) minmax(170px, 1.4fr); gap: 10px; align-items: baseline; border-bottom: 1px solid #10181a; padding: 7px 14px; font-size: 10px; line-height: 1.6; }
.event-turn, .event-pc { color: var(--muted); }
.event-player { color: var(--player); font-weight: 700; }
.event-detail { color: #a9babf; overflow-wrap: anywhere; }
.event-row.fault { background: #2a1414; }
.event-row.fault .event-detail { color: var(--red); }
.outcome { padding: 12px 14px; border-top: 2px solid #6f5c48; background: #2a2116; color: #f2cca1; font-size: 12px; }
.outcome strong { display: block; margin-bottom: 3px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- duel */
.challenge-picker { display: flex; align-items: center; gap: 10px; }
.challenge-picker select { min-width: 210px; }
.stage-tag { margin-left: auto; border: 1px solid #3d5c62; border-radius: 2px; color: var(--cyan); padding: 6px 10px; font-size: 9px; letter-spacing: .14em; }
.stage-tag.attack { color: var(--amber); border-color: #8e694d; }
.duel-grid { display: grid; grid-template-columns: minmax(430px, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.contract-panel { grid-column: 1 / -1; }
.contract-panel > .muted { padding: 13px 18px 0; font-size: 12px; }
.contract-text { margin: 12px 18px 13px; white-space: pre-wrap; font: 14px/1.6 var(--mono); color: var(--phosphor); text-shadow: 0 0 8px color-mix(in srgb, var(--phosphor) 40%, transparent); overflow-wrap: anywhere; }
.rules { padding: 0 18px 14px; color: #c0cdd3; font-size: 12px; }
.harness-note { display: flex; gap: 35px; padding: 10px 18px; border-top: 1px solid var(--line); background: #0d1418; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.harness-note b { color: #c1d0d5; font-weight: 400; margin-left: 8px; }
.duel-code-panel .instruction { font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
.duel-code-panel .instruction-list { max-height: 380px; overflow: auto; }
.duel-code-panel .code-table-head, .duel-code-panel .instruction { grid-template-columns: 65px 90px minmax(0, 1fr); }
.patch-editor { padding: 16px; background: #0c1418; border-top: 2px solid var(--cab-lo); }
.patch-editor > label { display: block; font-size: 11px; margin-bottom: 8px; text-transform: none; letter-spacing: 0; color: var(--text); }
.patch-editor > label span { color: var(--phosphor); }
.patch-input-row { display: flex; gap: 8px; }
.patch-input-row input { flex: 1; width: 100%; font-size: 12px; }
.patch-editor .small-note { margin-top: 8px; }
.grade-result { padding: 22px 20px 16px; }
.grade-icon { display: block; color: #93aeb5; font-size: 29px; margin-bottom: 14px; }
.grade-result h3 { font-size: 18px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.grade-result > p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.grade-result.passed .grade-icon, .grade-result.passed h3 { color: var(--green); text-shadow: 0 0 10px rgba(77, 255, 145, .5); }
.grade-result.failed .grade-icon, .grade-result.failed h3 { color: var(--amber); }
.grade-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.grade-stat strong { display: block; font-size: 19px; color: #dbe6eb; }
.grade-stat span { font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.check-progress { margin: 0 20px 14px; padding: 12px 14px; background: #06161c; border: 2px solid; border-color: #0b3640 #03161a #03161a #0b3640; color: var(--cyan); font-size: 11px; letter-spacing: .06em; text-shadow: 0 0 8px rgba(94, 227, 255, .5); position: relative; overflow: hidden; }
.check-progress::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--cyan); animation: sweep 1.2s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(150%); } }
.grade-actions { padding: 0 20px 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.grade-actions .primary { width: 100%; }
.grade-actions .quiet { font-size: 11px; padding-left: 0; }
.attack-action { width: 100%; color: var(--amber); border-color: #74553e #1a0f06 #1a0f06 #74553e; background: linear-gradient(#3a2a1a, #221710); }
.submit-note { width: 100%; font-size: 11px; line-height: 1.5; color: var(--muted); }
.submit-note.refused { color: #ffc4a8; }
.challenge-picker label small { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.grade-examples:not(:empty) { border-top: 1px solid var(--line); padding: 15px 20px; }
.grade-examples h3 { font-size: 10px; margin-bottom: 10px; color: var(--muted); font-weight: 600; }
.failure-example { width: 100%; background: #151c22; border-color: #2c363e var(--cab-lo) var(--cab-lo) #2c363e; padding: 9px 10px; text-align: left; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 9px; font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 40px; }
.failure-example span:first-child { white-space: normal; }
.failure-example span:last-child { color: var(--phosphor); font-weight: 700; letter-spacing: .08em; }
.trace-panel { grid-column: 1 / -1; }
.trace-toolbar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.trace-toolbar > .transport { margin-left: auto; }
.trace-readout { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #0b1114; }
.trace-metric { padding: 13px 16px; border-right: 1px solid var(--line); }
.trace-metric:last-child { border: 0; }
.trace-metric > span { display: block; font-size: 9px; color: var(--muted); letter-spacing: .12em; margin-bottom: 6px; }
.trace-metric strong { font-size: 18px; font-weight: 500; }
.trace-metric strong.matches { color: var(--green); }
.trace-metric strong.differs { color: var(--amber); }
.trace-detail { display: grid; grid-template-columns: 1.5fr 1fr; }
.trace-detail > div + div { border-left: 1px solid var(--line); }
.subheading { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.subheading h3 { font-size: 10px; font-weight: 700; color: var(--muted); }
.subheading span { font-size: 9px; }
.trace-events { max-height: 371px; }
.trace-events .event-row { grid-template-columns: 25px 58px minmax(140px, 1fr); gap: 8px; padding: 8px 14px; }
.trace-events .event-player { display: none; }
.trace-events .event-detail { grid-column: 3; font-size: 9px; line-height: 1.3; margin-top: -5px; }
.compact { grid-template-columns: repeat(2, 1fr); padding: 6px 12px 12px; column-gap: 15px; }
.compact .register { font-size: 10px; padding: 3px; }

/* ---------------------------------------------------------------- workshop */
.workshop-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.fame-panel { grid-column: 1 / -1; }
.roster-note { padding: 12px 14px 0; }
.roster { display: grid; gap: 10px; padding: 12px 14px 14px; }
.contestant { padding: 10px 12px; background: #0c1114; border: 2px solid; border-color: var(--cab-lo) #262e35 #262e35 var(--cab-lo); }
.contestant.ai { border-left: 3px solid var(--violet); }
.contestant-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.contestant-head h3 { color: var(--text); }
.contestant-description { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.contestant details { margin-top: 8px; }
.contestant summary { cursor: pointer; font-size: 9px; letter-spacing: .12em; color: var(--phosphor); min-height: 28px; display: flex; align-items: center; }
.author-note { margin: 8px 0; font-size: 11px; color: #d7c8ee; line-height: 1.5; padding: 8px 10px; background: #17111f; border-left: 3px solid var(--violet); }
.contestant-source { margin: 8px 0 0; padding: 10px; background: #070b09; color: var(--green); font-size: 10px; line-height: 1.6; overflow: auto; text-shadow: 0 0 5px rgba(77, 255, 145, .35); }
.contestant-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.contestant-actions button { min-height: 40px; padding: 6px 10px; font-size: 10px; }
.editor-fields { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr); gap: 10px; padding: 12px 14px 8px; }
.editor-fields label { display: grid; gap: 4px; }
.editor-fields input { width: 100%; }
.editor-panel .source-editor { height: 240px; color: var(--phosphor); }
.editor-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 4px; }
.editor-panel > .small-note { padding: 8px 14px 12px; }
.fame-status:not(:empty) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; color: #d7c8ee; font-size: 12px; border-bottom: 1px solid var(--line); }
.table-scroll { overflow-x: auto; }
.fame-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fame-table th { text-align: left; font-size: 9px; letter-spacing: .12em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fame-table td { padding: 7px 12px; border-bottom: 1px solid #10181a; vertical-align: middle; }
.fame-table td.name { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fame-table td.reason { color: var(--muted); font-size: 10px; min-width: 220px; }
.verify-cell { white-space: nowrap; }
.verify-cell button { min-height: 40px; padding: 5px 10px; font-size: 9px; }
.verify-result { display: inline-block; margin-left: 10px; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.verify-result.live { color: var(--green); }
.verify-result.match { color: var(--green); font-weight: 700; }
.verify-result.mismatch { color: var(--red); font-weight: 700; }
.match-browser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 2px solid var(--cab-lo); border-bottom: 1px solid var(--line); background: #0d1115; }
.match-browser label { display: flex; align-items: center; gap: 6px; }
.match-browser select { min-width: 140px; }
.match-browser > .muted { font-size: 10px; }
/* Under 600 px the Hall of Fame's rows become cards: no sideways scrolling,
   every number labelled, and the VERIFY LIVE answer under its button. */
@media (max-width: 599px) {
  .fame-panel > .section-heading { flex-wrap: wrap; }
  .fame-panel > .section-heading h2 { white-space: nowrap; }
  .fame-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .fame-table, .fame-table tbody { display: block; }
  .fame-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #fame-matches tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fame-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .fame-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
  .fame-table td.rank { grid-column: 1; align-self: center; }
  .fame-table td.name { grid-column: 2 / -1; }
  .fame-table td.name .tag { white-space: normal; max-width: 100%; }
  .fame-table td.reason { grid-column: 1 / -1; min-width: 0; }
  .fame-table td.reason::before { content: none; }
  #fame-matches tr { gap: 6px 12px; padding-block: 10px; }
  .fame-table td.verify-cell { grid-column: 1 / -1; white-space: normal; }
  .verify-cell button { width: 100%; }
  .verify-result { display: block; margin: 6px 0 0; overflow-wrap: anywhere; }
}

/* THE GAUNTLET: the challengers' log under the hall of fame. A card per
   session, the roster's card; opening it lists the attempts, and opening an
   attempt shows its table against the field, the hall's table, which becomes
   cards under 600 px in the same way. */
.gauntlet-panel { grid-column: 1 / -1; }
.gauntlet-rule { padding: 12px 14px 0; max-width: 120ch; }
.gauntlet-subhead { padding: 16px 14px 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.gauntlet-fields { list-style: none; margin: 0; padding: 8px 14px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.gauntlet-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 9px 12px; background: #0c1114; border: 2px solid; border-color: var(--cab-lo) #262e35 #262e35 var(--cab-lo); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.gauntlet-field strong { flex-basis: 100%; color: var(--text); font-size: 13px; letter-spacing: .04em; }
.gauntlet-players { display: grid; gap: 10px; padding: 8px 14px 14px; }
.gauntlet-players > *, .gauntlet-attempts > * { min-width: 0; }
.gauntlet-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0 0; }
.gauntlet-facts > div { display: flex; gap: 6px; align-items: baseline; }
.gauntlet-facts dt { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.gauntlet-facts dd { margin: 0; font-size: 12px; color: var(--text); }
.gauntlet-verdict { margin-top: 6px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.gauntlet-verdict strong { letter-spacing: .08em; }
.gauntlet-verdict.promoted strong, .attempt-verdict.promoted { color: var(--green); }
.gauntlet-verdict.refused strong, .attempt-verdict.refused { color: var(--amber); }
.gauntlet-player .gauntlet-summary, .gauntlet-summary { cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; list-style: none; font-size: 11px; letter-spacing: .1em; color: var(--phosphor); }
.gauntlet-summary::-webkit-details-marker { display: none; }
.gauntlet-sign { font-size: 18px; line-height: 1; transition: transform .15s; }
details[open] > .gauntlet-summary > .gauntlet-sign { transform: rotate(45deg); }
.gauntlet-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.gauntlet-account { padding: 10px 12px; background: #11161a; border-left: 3px solid #4a555d; }
.gauntlet-account.story { background: #17111f; border-left-color: var(--violet); }
.gauntlet-account h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.gauntlet-account.story h4 { color: var(--violet); }
.gauntlet-account p { font-size: 12px; line-height: 1.6; color: #d4dbd7; }
.gauntlet-account.story p { color: #d7c8ee; }
.gauntlet-players h4.gauntlet-subhead { padding-inline: 0; }
.gauntlet-attempts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gauntlet-attempt > details { margin: 0; background: #0a0e11; border: 1px solid #222a30; }
.gauntlet-attempt > details > .gauntlet-summary { display: grid; grid-template-columns: 18px 3em minmax(5em, 1fr) 7em minmax(10em, 1.3fr) minmax(0, 2.4fr) 4.5em; grid-template-areas: "sign n name bytes score verdict entry"; gap: 4px 12px; padding: 6px 10px; letter-spacing: .04em; color: var(--text); }
.gauntlet-attempt .gauntlet-sign { grid-area: sign; color: var(--phosphor); }
.attempt-n { grid-area: n; color: var(--muted); }
.attempt-name { grid-area: name; overflow-wrap: anywhere; }
.attempt-bytes { grid-area: bytes; color: var(--muted); }
.gauntlet-attempt .gauntlet-score { grid-area: score; }
.attempt-verdict { grid-area: verdict; letter-spacing: 0; overflow-wrap: anywhere; }
.gauntlet-attempt .tag.entry { grid-area: entry; justify-self: start; }
.tag.entry { color: var(--orange, var(--amber)); border-color: #7a4a2c; }
.gauntlet-score { display: flex; align-items: center; gap: 8px; }
.score-number { min-width: 3em; text-align: right; font-family: var(--mono); }
.score-bar { position: relative; flex: 1; min-width: 70px; height: 8px; background: #1d252b; }
.score-fill { position: absolute; inset: 0 auto 0 0; background: #6b7a72; }
.score-bar.above .score-fill { background: var(--green); }
.score-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--cream, #f1e6cf); }
.gauntlet-attempt > details > :not(summary) { margin-inline: 10px; }
.gauntlet-attempt > details > :last-child:not(summary) { margin-bottom: 12px; }
.gauntlet-reasons { padding-top: 2px; }
.gauntlet-lines th[scope="colgroup"] { text-align: center; border-bottom: 0; }
.gauntlet-lines .opponent-name { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.gauntlet-lines td.points { white-space: nowrap; }
.gauntlet-lines td.gauntlet-watch { white-space: normal; }
.gauntlet-lines .tag { white-space: normal; }
.gauntlet-replay { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gauntlet-replay button { white-space: normal; max-width: 100%; }
.gauntlet-replay + .gauntlet-replay { margin-top: 6px; }
.gauntlet-replay .verify-result { margin-left: 0; }
.verify-result.recorded { color: var(--amber); }
.gauntlet-source .contestant-source { max-height: 340px; }
@media (max-width: 900px) {
  .gauntlet-attempt > details > .gauntlet-summary { grid-template-columns: 18px auto minmax(0, 1fr) auto; grid-template-areas: "sign n name entry" ". bytes bytes bytes" ". score score score" ". verdict verdict verdict"; }
}
/* An attempt's table turns into cards below 760 px, where its columns no
   longer fit beside the replay buttons; the hall's rules, one size earlier. */
@media (max-width: 760px) {
  .gauntlet-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .gauntlet-lines, .gauntlet-lines tbody { display: block; }
  .fame-table.gauntlet-lines tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .gauntlet-lines td { display: block; padding: 0; border: 0; min-width: 0; }
  .gauntlet-lines td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
  .gauntlet-lines td.opponent, .gauntlet-lines td.points, .gauntlet-lines td.verify-cell { grid-column: 1 / -1; }
  .gauntlet-lines .verify-cell button { width: 100%; }
  .gauntlet-lines .verify-result { display: block; margin: 6px 0 0; overflow-wrap: anywhere; }
}
@media (max-width: 599px) {
  .gauntlet-panel > .section-heading { flex-wrap: wrap; }
  .gauntlet-panel > .section-heading h2 { white-space: nowrap; }
  .gauntlet-players { padding-inline: 10px; }
  .gauntlet-attempt > details > :not(summary) { margin-inline: 6px; }
}

/* ---------------------------------------------------------------- golf */
/* GOLF: the holes across the top, then the hole, the routine and its check
   side by side on a wide screen, the hole above the other two below 1,100 px,
   one column on a phone. The result is the duel's grade card; par and the
   record are labelled RECORDED, the check LIVE. */
.golf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.golf-holes-panel { grid-column: 1 / -1; }
.golf-holes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; padding: 12px 14px 14px; }
.golf-pick { display: grid; align-content: start; justify-items: start; gap: 4px; width: 100%; padding: 8px 12px; text-align: left; white-space: normal; text-transform: none; letter-spacing: .02em; font-size: 12px; font-weight: 400; }
.golf-pick-title { font-weight: 700; color: var(--text); }
.golf-pick-par { font-size: 11px; color: var(--muted); }
.golf-pick[aria-pressed="true"] { border-color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 18%, #1a1418); box-shadow: inset 4px 0 0 var(--phosphor); }
.golf-pick[aria-pressed="true"] .golf-pick-par { color: var(--text); }
.golf-hole-card { display: grid; gap: 12px; padding: 16px 18px 14px; }
.golf-hole-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.golf-hole-title { font: 24px/1.1 var(--display, inherit); letter-spacing: .02em; text-transform: none; color: var(--cream, var(--text)); }
.golf-contract { font: 16px/1.5 Arial, sans-serif; color: var(--cream, var(--text)); }
.golf-scores { margin: 0; display: grid; gap: 12px; }
.golf-score-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.golf-score-row dt { display: grid; gap: 2px; }
.golf-score-row dt strong { font-size: 12px; letter-spacing: .12em; color: var(--phosphor); }
.golf-recorded { font-size: 11px; letter-spacing: .1em; color: var(--amber); }
.golf-score-row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.golf-score-value { font-size: 13px; color: var(--text); }
.golf-score-note { flex-basis: 100%; font: 12px/1.5 Arial, sans-serif; color: var(--muted); }
.golf-editor .source-editor { height: 300px; }
#golf-screen .golf-result { padding-top: 4px; }
#golf-screen .grade-icon { margin-bottom: 4px; font-size: 24px; }
#golf-screen .grade-actions { padding-top: 16px; }
#golf-screen .grade-actions .primary { width: 100%; }
.golf-result .golf-live { margin-top: 8px; font-size: 11px; letter-spacing: .08em; color: var(--green); }
.golf-result .golf-failures { margin-top: 14px; display: grid; gap: 4px; }
.golf-failures h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.golf-result .golf-failures p { margin: 0; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.golf-result .golf-unscored { margin-top: 12px; font-size: 12px; line-height: 1.55; }
.golf-stale { margin: 0 20px 18px; font-size: 12px; line-height: 1.55; color: var(--amber); }
.golf-result .golf-standings { margin-top: 16px; display: grid; gap: 10px; }
.golf-standings h4 { margin: 0; font-size: 11px; letter-spacing: .12em; color: var(--amber); }
.golf-result .golf-standing { margin: 0; font: 13px/1.55 Arial, sans-serif; color: var(--text); }
.golf-relation { display: inline-block; margin-right: 8px; padding: 1px 7px; font: 700 11px/1.6 var(--mono); letter-spacing: .1em; border: 1px solid currentColor; }
.golf-standing.better .golf-relation { color: var(--green); }
.golf-standing.equal .golf-relation { color: var(--cyan); }
.golf-standing.worse .golf-relation { color: var(--amber); }
@media (max-width: 1100px) {
  .golf-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .golf-hole-panel { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .golf-grid { grid-template-columns: minmax(0, 1fr); }
  .golf-editor .source-editor { height: 220px; }
}

/* ---------------------------------------------------------------- responsive */
@media (min-width: 1550px) {
  .source-editor { height: 218px; font-size: 12px; }
  .instruction { font-size: 12px; padding-top: 8px; padding-bottom: 8px; }
  .register { font-size: 11px; padding: 5px 3px; grid-template-columns: 42px 1fr; }
  .cpu-summary .pc-value { font-size: 23px; }
  .arena-grid { grid-template-columns: minmax(270px, .92fr) minmax(480px, 1.9fr) minmax(285px, .98fr); }
}
@media (max-width: 1180px) {
  .marquee { padding: 10px 16px; gap: 12px; }
  .marquee-name { font-size: 16px; letter-spacing: .22em; }
  main { padding: 18px 16px 28px; }
  .toolbar { gap: 10px; }
  .arena-grid { grid-template-columns: minmax(228px, .85fr) minmax(350px, 1.55fr); gap: 14px; }
  .cpu-panel { grid-column: 1; }
  .machine-column { grid-column: 2; grid-row: 1 / 3; }
  .programs-column { grid-column: 1; }
  .events-panel { grid-row: 3; }
  .source-editor { height: 150px; min-height: 130px; font-size: 10px; }
  .bot-description { min-height: 0; }
  .memory-surface { margin: 0 12px; }
  .duel-grid { grid-template-columns: minmax(390px, 1.4fr) minmax(295px, 1fr); }
  .patch-input-row { flex-wrap: wrap; }
  .patch-input-row input { flex-basis: 100%; }
  .trace-detail { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 900px) {
  .cabinets { grid-template-columns: 1fr; gap: 16px; }
  .workshop-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .marquee { flex-wrap: wrap; padding: 12px 14px; }
  .marquee-title small { font-size: 8px; }
  .marquee-nav { width: 100%; justify-content: flex-start; }
  main { padding: 14px 12px 24px; }
  .cabinet-frame > .toolbar, .cabinet-frame > .deck, .cabinet-frame > .training, .cabinet-frame > .arena-grid, .cabinet-frame > .duel-grid, .cabinet-frame > .workshop-grid { margin-left: 10px; margin-right: 10px; }
  .cabinet-head { padding: 10px 12px; gap: 10px; }
  .cabinet-name { font-size: 15px; letter-spacing: .2em; }
  .toolbar { gap: 10px; }
  .transport { gap: 5px; }
  .transport button { padding: 8px 10px; }
  .seed-control { width: 100%; }
  .seed-control input { flex: 1; }
  .replay-control { margin-left: 0; width: 100%; }
  .arena-grid { grid-template-columns: 1fr; }
  .machine-column { grid-column: 1; grid-row: 1; }
  .programs-column { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .program-panel + .program-panel { margin-top: 0; }
  .programs-column > .small-note { grid-column: 1 / -1; margin: 0; }
  .cpu-panel { grid-column: 1; grid-row: 3; }
  .events-panel { grid-row: 4; }
  .register-grid { grid-template-columns: repeat(4, 1fr); }
  .cpu-panel .register { font-size: 9px; grid-template-columns: 34px 1fr; }
  .cpu-meta { justify-content: flex-start; gap: 28px; }
  .event-row { grid-template-columns: 38px 23px 48px minmax(110px, 1fr); gap: 7px; padding: 8px 12px; }
  .event-detail { grid-column: 4; }
  .help-grid { grid-template-columns: 1fr 1fr; }
  .help-panel { padding: 12px 14px 20px; }
  .error-banner { margin: 12px 12px 0; }
  .duel-grid { grid-template-columns: 1fr; }
  .contract-panel, .trace-panel { grid-column: 1; }
  .challenge-picker { width: 100%; }
  .challenge-picker select { flex: 1; }
  .duel-code-panel .instruction-list { max-height: 360px; }
  .patch-input-row { flex-wrap: nowrap; }
  .patch-input-row input { flex-basis: auto; }
  .harness-note { gap: 12px; flex-wrap: wrap; font-size: 8px; }
  .contract-text { font-size: 12px; }
  .stage-tag { font-size: 8px; }
  .trace-detail { grid-template-columns: 1fr; }
  .trace-detail > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .trace-events { max-height: 250px; }
  .compact { grid-template-columns: repeat(4, 1fr); }
  .trace-metric { padding: 12px; }
  .trace-metric strong { font-size: 16px; }
  .grade-actions .primary { width: auto; }
  .grade-actions .attack-action { width: 100%; }
  .challenge-picker { flex-wrap: wrap; }
  .grade-result { padding-top: 18px; }
  .grade-icon { margin-bottom: 9px; font-size: 24px; }
  .editor-fields { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .marquee-name { font-size: 14px; letter-spacing: .18em; }
  .marquee-title small { display: none; }
  .marquee-mark { font-size: 24px; }
  .marquee-nav button { padding: 8px 9px; font-size: 10px; }
  .lobby-head h1 { font-size: 12px; letter-spacing: .2em; }
  .title-plate { font-size: 16px; letter-spacing: .2em; }
  .cabinet { padding: 12px 12px 14px; }
  .cabinet-screen { min-height: 120px; padding: 10px 12px; font-size: 10px; }
  .programs-column { grid-template-columns: 1fr; }
  .source-editor { height: 175px; font-size: 11px; }
  .register-grid, .compact { grid-template-columns: repeat(2, 1fr); }
  .memory-legend { gap: 12px; font-size: 9px; }
  .memory-selection { gap: 10px; font-size: 10px; }
  .memory-selection > span:last-child { font-size: 9px; }
  .inline-actions { gap: 4px; }
  .check-label { font-size: 9px; }
  .section-heading { padding: 8px 12px; gap: 8px; }
  .section-heading h2 { font-size: 10px; }
  .section-heading > .mono { font-size: 8px; }
  .code-table-head, .instruction { grid-template-columns: 48px 67px 1fr; gap: 6px; padding-left: 12px; padding-right: 12px; }
  .instruction { font-size: 10px; }
  .duel-code-panel .instruction { font-size: 10px; }
  .duel-code-panel .code-table-head, .duel-code-panel .instruction { grid-template-columns: 50px 76px 1fr; }
  .patch-input-row { flex-wrap: wrap; }
  .patch-input-row input { flex-basis: 100%; }
  .help-grid { grid-template-columns: 1fr; }
  .trace-toolbar > .transport { width: 100%; margin-left: 0; }
  .trace-readout { grid-template-columns: repeat(2, 1fr); }
  .trace-metric { border-bottom: 1px solid var(--line); }
  .trace-metric:nth-child(2) { border-right: 0; }
  .trace-metric:nth-child(3) { border-bottom: 0; }
  .trace-events .event-row { grid-template-columns: 22px 52px 1fr; font-size: 9px; }
  .stage-tag { margin-left: 0; }
  .harness-note b { margin-left: 4px; }
  .event-row { grid-template-columns: 30px 20px 45px 1fr; font-size: 9px; }
  .event-detail { font-size: 9px; }
  .grade-stat strong { font-size: 17px; }
  .deck-actions button, .training-actions button, .transport button, .editor-actions button { flex: 1 1 auto; }
  .speed { width: 100%; }
  .speed button { flex: 1; }
  .ticker { font-size: 9px; }
  .engine-label { padding: 0 10px; }
  .arena-readout strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .scanlines::after, .ticker-track, .start, .attract-flash, .preview-blink, .check-progress::after { animation: none !important; }
  .scanlines::after { display: none; }
}

/* ---------------------------------------------------------------- spectating */
/* The memory view switch, the page map and the countdown chip in the arena,
   and the HEAD TO HEAD panel in the Workshop. Every size is at least 11 px so
   the phone floor needs no exception; buttons keep the 40 px of the rest. */
.memory-views { gap: 10px; }
.memory-views .segmented { padding: 1px; }
.memory-views .segmented button { min-height: 24px; padding: 2px 10px; }
.memory-views .segmented button.selected { color: var(--phosphor); }
.arena-readout { flex-wrap: wrap; }
.countdown { flex: 1 1 250px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #08161a; border-left: 4px solid var(--cyan); }
.play-stage .arena-readout .countdown-number, .arena-readout .countdown-number { flex: none; min-width: 1.4ch; font-size: 28px; font-weight: 500; line-height: 1; text-align: right; color: var(--cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 50%, transparent); }
.countdown-text { display: grid; gap: 2px; min-width: 0; }
.play-stage .arena-readout .countdown-label, .arena-readout .countdown-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-shadow: none; color: var(--cyan); overflow-wrap: anywhere; }
.countdown-detail { font-size: 11px; line-height: 1.4; color: #a9cfd9; overflow-wrap: anywhere; }
.countdown[data-phase="done"] { background: #1a1204; border-left-color: var(--amber); }
.play-stage .arena-readout .countdown[data-phase="done"] .countdown-number, .play-stage .arena-readout .countdown[data-phase="done"] .countdown-label { color: var(--amber); text-shadow: none; }
.countdown[data-phase="done"] .countdown-detail { color: #e9d3a4; }
.swatch.fatal { background: transparent; border: 2px solid var(--cyan); }
.page-view { margin: 0 14px; container-type: inline-size; }
.page-distance { padding: 10px 0 8px; font-size: 12px; line-height: 1.5; color: #cdd9d1; }
.page-ruler { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.ruler-cell { text-align: center; font: 700 11px/1 var(--mono); padding: 6px 0; background: #0b1410; border: 1px solid #1d2a24; color: var(--muted); }
.ruler-cell.a { background: var(--a); border-color: var(--a); color: #061008; }
.ruler-cell.b { background: var(--b); border-color: var(--b); color: #061008; }
.ruler-cell.between { background: #14261d; border-style: dashed; border-color: #3b5a49; color: #cfe8d8; }
.page-map { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 5px; background: #040806; border: 4px solid #0a0d10; border-radius: 6px; box-shadow: inset 0 0 20px rgba(0, 0, 0, .8); }
.page-map:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 3px; }
.page-tile { margin: 0; min-width: 0; padding: 3px; background: #07100c; border: 2px solid #17231d; }
.page-tile.start-a { border-color: var(--a); }
.page-tile.start-b { border-color: var(--b); }
.page-tile.has-target { box-shadow: 0 0 0 1px var(--cyan); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 18px; font: 700 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--muted); }
.page-name { white-space: nowrap; }
.page-flags { display: flex; gap: 2px; }
.page-flag { padding: 0 4px; font-size: 11px; font-weight: 800; color: #061008; border-radius: 2px; }
.page-flag.a { background: var(--a); }
.page-flag.b { background: var(--b); }
.page-tile canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; cursor: crosshair; }
.page-key { padding: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.page-lesson-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0 12px; }
.page-lesson { flex: 1 1 260px; font-size: 12px; line-height: 1.5; color: #cdd9d1; }
/* Eight pages a row while a tile is wide enough for its name and its flag, four below. */
@container (max-width: 620px) { .page-map { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* HEAD TO HEAD: the standings and the matrix are the hall of fame's tables and
   become cards under 600 px in the same way; the featured matches are the
   roster's cards with the gauntlet's replay buttons. */
.h2h-panel { grid-column: 1 / -1; }
.h2h-rule { padding: 12px 14px 0; max-width: 120ch; }
.h2h-facts { padding: 12px 14px 0; margin: 0; }
.h2h-panel .table-scroll { margin: 8px 14px 0; border: 1px solid #1d252b; }
.h2h-standings td.score { min-width: 190px; }
.h2h-standings td.field { color: var(--muted); }
.h2h-matrix th, .h2h-matrix td { text-align: center; padding-inline: 6px; }
.h2h-matrix thead th:not(:first-child) { vertical-align: bottom; writing-mode: vertical-rl; transform: rotate(180deg); padding-block: 10px 6px; text-align: left; font-size: 10px; }
.h2h-matrix thead th:first-child, .h2h-matrix th.h2h-row-name { text-align: left; }
.h2h-matrix th.h2h-row-name { font-size: 11px; letter-spacing: .06em; color: var(--text); padding-inline: 12px; }
.h2h-matrix td.lead { color: var(--green); font-weight: 700; }
.h2h-matrix td.trail { color: var(--red); }
.h2h-matrix td.level { color: var(--muted); }
.h2h-matrix td.self { color: #3c4a44; }
.h2h-matrix td small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.h2h-depth { padding: 8px 14px 0; display: grid; gap: 8px; max-width: 120ch; font-size: 12px; line-height: 1.6; color: #d4dbd7; }
.h2h-depth p { margin: 0; }
.h2h-cycles { margin: 0; padding-left: 18px; }
.h2h-featured { padding: 0 14px 14px; display: grid; gap: 4px; }
.h2h-kind-title { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--phosphor); }
.h2h-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 8px; }
.h2h-cards > * { min-width: 0; }
.h2h-card-title { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--text); }
.h2h-why { font-size: 12px; line-height: 1.55; }
.h2h-card .gauntlet-replay { margin-top: 10px; }
.h2h-card .gauntlet-replay + .gauntlet-replay { margin-top: 6px; }
.h2h-none { padding: 4px 0; }
/* The standings table has seven columns and a long tag, wider than the box
   below 1,100 px, so its rows are cards from there down, as the hall of fame's
   are under 600. The matrix keeps its table: its headings run sideways. */
@media (max-width: 1099px) {
  .h2h-standings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .h2h-standings, .h2h-standings tbody { display: block; }
  .h2h-standings tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .h2h-standings td { display: block; padding: 0; border: 0; min-width: 0; }
  .h2h-standings td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
  .h2h-standings td.rank { grid-column: 1; align-self: center; }
  .h2h-standings td.name { grid-column: 2 / -1; }
  .h2h-standings td.name .tag { white-space: normal; max-width: 100%; }
  .h2h-standings td.score, .h2h-standings td.field { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 599px) {
  .h2h-panel > .section-heading { flex-wrap: wrap; }
  .h2h-panel > .section-heading h2 { white-space: nowrap; }
  .h2h-panel .table-scroll { margin-inline: 10px; border: 0; }
  .h2h-standings tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h2h-standings td.score, .h2h-standings td.field { grid-column: 1 / -1; }
  .h2h-standings td.field::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
  .h2h-standings td.score { min-width: 0; }
  .h2h-matrix tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2h-matrix th.h2h-row-name { grid-column: 1 / -1; display: block; padding: 0; }
  .h2h-matrix td { text-align: left; }
  .h2h-matrix td.self { display: none; }
  .h2h-cards { grid-template-columns: minmax(0, 1fr); }
  .h2h-card .gauntlet-replay button { width: 100%; }
  .h2h-card .verify-result { display: block; margin: 6px 0 0; overflow-wrap: anywhere; }
}
.cabinet-frame > .workshop-jumps { margin: 0 16px 12px; }
.workshop-jumps button { text-align: left; white-space: normal; color: var(--phosphor); }