/* site.css: the site's own pages (the landing page, legal, privacy, contact
   and the 404 page). The same palette, font and bevelled panels as the app
   shell (index.html), so walking from the title screen into /watch feels
   like one game. Whole pixels everywhere: no gradients on the art, no
   rounded sprites, borders drawn as box-shadows. */

:root {
  --bg: #10121c;
  --panel: #1a1e2e;
  --panel-light: #2a3150;
  --panel-dark: #07080e;
  --ink: #f4efe4;
  --muted: #a9a7ba;
  --made: #4cc26e;
  --miss: #e0483a;
  --gold: #f2c84b;
  --amber: #f09a2a;
  --court: #c9803f;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --body: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.6 var(--body);
  /* A faint 4px floor grid, like the arena's boards. */
  background-color: var(--bg);
  background-image:
    linear-gradient(#ffffff06 1px, transparent 1px),
    linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size: 4px 4px;
}
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
img.pixel, canvas.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.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;
}
.skip { position: absolute; left: 16px; top: 12px; z-index: 10; transform: translateY(-200%); }
.skip:focus { transform: none; }
[hidden] { display: none !important; }

h1, h2, h3, .px { font-family: var(--pixel); letter-spacing: 1px; line-height: 1.5; text-shadow: 2px 2px 0 #000; }
h2 { font-size: 0.875rem; color: var(--gold); margin: 0 0 16px; }
h3 { font-size: 0.625rem; color: var(--ink); margin: 0 0 10px; }
p, li { margin: 0 0 10px; }

.wrap { width: min(100% - 32px, 1040px); margin-inline: auto; }
.title-screen .wrap { width: min(100% - 32px, 1012px); }
.panel {
  background: var(--panel);
  box-shadow: inset 2px 2px 0 var(--panel-light), inset -2px -2px 0 var(--panel-dark), 0 4px 0 #000;
  padding: 20px;
}

/* Buttons: the art's bevelled button, bigger. */
.btn {
  font-family: var(--pixel); font-size: 0.625rem; color: var(--ink); background: #3b3a4c; border: 0; cursor: pointer;
  padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: inset 2px 2px 0 #f6f4ee55, inset -2px -2px 0 #1a1826, 0 0 0 2px #000, 0 4px 0 2px #000;
  text-decoration: none; text-shadow: 1px 1px 0 #000;
}
.btn:hover { background: #4b4a5c; }
.btn:active { transform: translateY(2px); box-shadow: inset 2px 2px 0 #1a1826, inset -2px -2px 0 #f6f4ee33, 0 0 0 2px #000, 0 2px 0 2px #000; }
.btn.gold { background: var(--gold); color: #1a1826; text-shadow: none; box-shadow: inset 2px 2px 0 #fff6, inset -2px -2px 0 #a8801d, 0 0 0 2px #000, 0 4px 0 2px #000; }
.btn.gold:hover { background: #ffd968; }
.btn img { width: 24px; height: 24px; }

/* ---- Header -------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 5; background: #10121ce6; box-shadow: 0 2px 0 #000; backdrop-filter: blur(4px); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 56px; flex-wrap: wrap; padding-block: 6px; }
.brand { font-family: var(--pixel); font-size: 0.75rem; color: var(--gold); text-decoration: none; text-shadow: 2px 2px 0 #000; display: inline-flex; gap: 10px; align-items: center; }
.brand .ball { width: 12px; height: 12px; background: var(--amber); box-shadow: 0 0 0 2px #000, inset -3px -3px 0 #b8641a; }
.site-nav { display: flex; gap: 6px 18px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.site-nav a { font-family: var(--pixel); font-size: 0.5625rem; color: var(--ink); text-decoration: none; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::before { content: "\25B6\00a0"; }
.site-nav .btn { font-size: 0.5625rem; padding: 8px 12px; min-height: 36px; color: #1a1826; }
.freeplay { font-family: var(--pixel); font-size: 0.5rem; color: var(--miss); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Title screen (the landing page's hero) ------------------------------ */
.title-screen { text-align: center; padding: 40px 0 24px; }
.wordmark { display: block; margin: 0 auto 8px; width: min(420px, 80vw); height: auto; }
.title-screen .wordmark + h1 { /* the wordmark says it; the heading stays for screen readers */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.title-screen h1 { font-size: clamp(1.25rem, 5vw, 2.25rem); color: var(--gold); margin: 0; text-shadow: 4px 4px 0 #000, -2px -2px 0 #7a4a12; }
.title-screen .tagline { font-family: var(--pixel); font-size: clamp(0.5625rem, 1.6vw, 0.75rem); line-height: 2; color: var(--ink); margin: 16px auto 28px; max-width: 46ch; }
.title-screen .tagline em { color: var(--gold); font-style: normal; }

/* The TV: a chunky 80s set around the live /embed/attract demo. 1012px
   leaves the screen 968px wide: room for the 480x270 scene at 2x. */
.tv { position: relative; width: min(100%, 1012px); margin: 52px auto 0; padding: 22px 22px 40px; background: #2b2a36;
  box-shadow: inset 4px 4px 0 #4a4858, inset -4px -4px 0 #15141c, 0 0 0 4px #000, 0 10px 0 4px #000; }
.tv::before { /* the antenna */
  content: ""; position: absolute; left: 50%; top: -38px; width: 120px; height: 34px; transform: translateX(-50%);
  background:
    linear-gradient(60deg, transparent 47%, #000 47%, #000 53%, transparent 53%) left / 50% 100% no-repeat,
    linear-gradient(-60deg, transparent 47%, #000 47%, #000 53%, transparent 53%) right / 50% 100% no-repeat;
}
.tv-screen { position: relative; background: #000; box-shadow: 0 0 0 4px #000, 0 0 0 8px #15141c; aspect-ratio: 480 / 298; overflow: hidden; }
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tv-screen::after { /* scanlines and a little glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(#0000 0 2px, #0000002e 2px 3px),
    radial-gradient(120% 90% at 50% 40%, #0000 60%, #0007 100%);
}
.tv-badge { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: var(--pixel); font-size: 0.5rem; padding: 4px 6px; background: var(--miss); color: var(--ink); box-shadow: 0 0 0 2px #000; pointer-events: none; }
.tv-foot { position: absolute; left: 22px; right: 22px; bottom: 10px; display: flex; align-items: center; gap: 12px; font-family: var(--pixel); font-size: 0.5rem; color: #b3b0c4; }
.tv-foot .led { width: 8px; height: 8px; background: var(--made); box-shadow: 0 0 0 2px #000, 0 0 8px var(--made); }
.tv-foot .dial { margin-left: auto; width: 18px; height: 18px; background: #15141c; box-shadow: inset 2px 2px 0 #4a4858, 0 0 0 2px #000; }
.tv-foot .dial + .dial { margin-left: 0; }

.press-start { margin-top: 36px; display: grid; justify-items: center; gap: 14px; }
.press-start .btn { font-size: clamp(0.75rem, 2.4vw, 1rem); padding: 16px 28px; }
.press-start .btn .arrow { animation: blink 1s steps(1) infinite; }
.press-start .hint { font-family: var(--pixel); font-size: 0.5rem; color: var(--muted); margin: 0; }
kbd { font-family: var(--pixel); font-size: 0.5rem; color: var(--ink); background: #000; padding: 3px 6px; box-shadow: 0 0 0 2px var(--panel-light); }

/* The players running the baseline under the TV. */
.baseline { position: relative; height: 72px; margin: 28px auto 0; width: min(100%, 1012px); overflow: hidden;
  background: linear-gradient(var(--court), var(--court)) bottom / 100% 6px no-repeat; }
.baseline canvas { position: absolute; bottom: 6px; }

/* ---- Sections --------------------------------------------------------------- */
.section { padding: 56px 0 8px; }
.section > .wrap > h2 { font-size: clamp(0.75rem, 2.4vw, 1.125rem); text-align: center; margin-bottom: 8px; }
.section .lede { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 28px; }
.stage-label { display: block; text-align: center; font-family: var(--pixel); font-size: 0.5rem; color: var(--amber); margin-bottom: 12px; }

/* Tonight's games, as a high-score table. */
.scores { padding: 0; overflow: hidden; }
.scores ol { list-style: none; margin: 0; padding: 8px 0; }
.scores li .row, .scores .empty {
  display: grid; grid-template-columns: 2.5em 1fr auto 1fr auto; gap: 12px; align-items: center; padding: 12px 20px;
  font-family: var(--pixel); font-size: 0.625rem; color: var(--ink); text-decoration: none;
}
.scores li:nth-child(even) .row { background: #ffffff05; }
.scores li a:hover, .scores li a:focus-visible { background: #f2c84b1a; color: var(--gold); outline-offset: -3px; }
.scores .rank { color: var(--muted); }
.scores .team { display: flex; align-items: center; gap: 8px; }
.scores .team.home { justify-content: flex-end; }
.scores .chip { width: 10px; height: 10px; flex: none; box-shadow: 0 0 0 2px #000, 0 0 0 3px #4b4a5c; }
.scores .at { color: var(--muted); }
.scores .status { min-width: 9ch; text-align: right; font-size: 0.5rem; color: var(--muted); }
.scores .live .status { color: #ff7a6b; } /* --miss, lifted to 4.5:1 on the panel */
.scores .live .status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--miss); box-shadow: 0 0 0 1px #000; animation: blink 1s steps(1) infinite; }
.scores .final .status { color: var(--gold); }
.scores .empty { display: block; text-align: center; color: var(--muted); line-height: 2; }
.scores-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 12px 20px; font-family: var(--pixel); font-size: 0.5rem; color: var(--muted); box-shadow: inset 0 2px 0 var(--panel-dark); }

/* How to play: three numbered stages. */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; counter-reset: stage; }
.stage { position: relative; padding-top: 44px; }
.stage::before {
  counter-increment: stage; content: "STAGE " counter(stage);
  position: absolute; top: 14px; left: 20px; font-family: var(--pixel); font-size: 0.5rem; color: var(--amber);
}
.stage p { color: var(--muted); margin: 0; }
.stage .sprite { float: right; margin: -24px 0 6px 12px; }

/* Power-ups: what the viewer can do. */
.powerups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.powerups li { margin: 0; display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-content: start; }
.powerups .icon { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; background: #000; box-shadow: inset 0 0 0 2px var(--panel-light); }
.powerups .icon img { width: 24px; height: 24px; }
.powerups .icon span { font-family: var(--pixel); font-size: 0.625rem; color: var(--gold); }
.powerups h3 { margin: 4px 0 0; }
.powerups p { grid-column: 2; margin: 0; font-size: 0.875rem; color: var(--muted); }

/* Controls. */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; margin: 0; }
.controls div { display: flex; gap: 12px; align-items: baseline; }
.controls dt { flex: none; min-width: 7em; }
.controls dd { margin: 0; font-family: var(--pixel); font-size: 0.5rem; color: var(--muted); line-height: 1.8; }

/* The "insert coin" call to action. */
.continue { text-align: center; padding: 64px 0 48px; }
.continue h2 { font-size: clamp(0.875rem, 3vw, 1.25rem); }
.continue p { color: var(--muted); }

/* ---- Prose pages (legal, privacy, contact) -------------------------------- */
.page { padding: 32px 0 48px; }
.page .wrap { max-width: 46rem; display: grid; gap: 20px; }
.page h1 { font-size: clamp(0.875rem, 3vw, 1.25rem); color: var(--gold); margin: 0 0 8px; }
.page ul { padding-left: 1.25rem; margin: 0; }
.muted { color: var(--muted); font-size: 0.875rem; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--pixel); font-size: 0.5rem; margin: 12px 0 0; padding: 0; list-style: none; }
.toc li { margin: 0; }

/* Contact: three "cartridges", one per kind of message. */
.carts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cart { position: relative; padding-top: 32px; display: grid; gap: 10px; align-content: start; }
.cart::before { /* the cartridge's label notch */
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 12px; background: var(--panel-dark);
  box-shadow: inset 0 -2px 0 var(--panel-light);
}
.cart h2 { margin: 0; font-size: 0.6875rem; }
.cart p { margin: 0; color: var(--muted); }
.cart .btn { justify-self: start; margin-top: 6px; }
.mail { font-family: var(--pixel); font-size: 0.625rem; overflow-wrap: anywhere; }

/* ---- 404: game over ------------------------------------------------------- */
.game-over { min-height: calc(100vh - 220px); display: grid; place-content: center; text-align: center; gap: 18px; padding: 48px 16px; }
.game-over h1 { font-size: clamp(1.5rem, 8vw, 3.5rem); color: var(--miss); margin: 0; text-shadow: 4px 4px 0 #000; }
.game-over .count { font-family: var(--pixel); font-size: clamp(0.75rem, 3vw, 1.25rem); color: var(--gold); margin: 0; }
.game-over .count b { display: inline-block; min-width: 2ch; }
.game-over .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.game-over p { margin: 0; color: var(--muted); }

/* ---- Footer ------------------------------------------------------------- */
.site-foot { margin-top: 40px; padding: 28px 0 36px; background: #07080e; box-shadow: 0 -2px 0 #000; }
.site-foot .wrap { display: grid; gap: 14px; justify-items: center; text-align: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.site-foot nav a { font-family: var(--pixel); font-size: 0.5rem; color: var(--ink); text-decoration: none; }
.site-foot nav a:hover { color: var(--gold); }
.site-foot .fine { font-family: var(--pixel); font-size: 0.5rem; line-height: 2; color: var(--muted); max-width: 70ch; margin: 0; }

/* A cheat code's toast. */
.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px);
  font-family: var(--pixel); font-size: 0.5625rem; line-height: 1.8; text-align: center; padding: 12px 16px;
  background: #000; color: var(--made); box-shadow: 0 0 0 2px var(--made), 0 4px 0 2px #000; }

@media (max-width: 600px) {
  .site-head .wrap { gap: 8px 12px; }
  .site-nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .freeplay { margin-left: auto; }
  .tv { padding: 12px 12px 34px; }
  .tv-foot { left: 12px; right: 12px; }
  .scores li .row { grid-template-columns: 1fr auto 1fr; padding: 12px; row-gap: 6px; }
  .scores .rank { display: none; }
  .scores .status { grid-column: 1 / -1; text-align: center; }
  .scores-foot { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .freeplay, .press-start .btn .arrow, .scores .live .status::before { animation: none; }
}