/* ==========================================================================
   ARCADE — one page. Loaded on a/arcade.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A cabinet screen that is never idle: the attract loop above (stars, a
   bobbing ship, a walking sprite, INSERT COIN blinking), the record below
   set as the machine's own screens. Motion is steps() only; nothing eases.
   The CRT scanlines and vignette sit on the hero and the record as their
   own absolute overlays, never fixed, so the shell (rail, top bar, action
   cluster, community drawer) is never covered or restyled: every rule here
   is scoped to .ar-hero or .ar-rec.
   ========================================================================== */
@font-face {
  font-family: "PressStart2PX";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SpaceMonoX";
  src: url("fonts/space-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.ar-page {
  --ar-bk: #060608; --ar-cy: #29D9D9; --ar-mg: #E24AC4; --ar-yl: #F2D22E; --ar-rd: #E23D28;
  --ar-gn: #35D948; --ar-wh: #EDEDF2; --ar-nv: #101018; --ar-dim: #8a8a9c; --ar-rule: #2a2a36;
  --ar-mono: "SpaceMonoX", "Space Mono", ui-monospace, Menlo, monospace;
  --ar-pix: "PressStart2PX", "Press Start 2P", monospace;
  background: var(--paper);
}
.ar-page main { background: var(--ar-bk); color: var(--ar-wh); }
.ar-hero, .ar-rec { position: relative; isolation: isolate; font: 400 17px/1.65 var(--ar-mono); color: var(--ar-wh); font-synthesis: weight style; }
.ar-px { font-family: var(--ar-pix); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.ar-hero a, .ar-rec a { color: var(--ar-cy); }
.ar-hero a:hover, .ar-rec a:hover { color: var(--ar-yl); }
.ar-hero :focus-visible, .ar-rec :focus-visible { outline: 4px solid var(--ar-yl); outline-offset: 3px; }

/* ---- CRT: scanlines and vignette, absolute inside each root ---- */
.ar-hero::before, .ar-rec::before { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 4px); }
.ar-hero::after { content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%); }
.ar-rec::after { content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.5)); }

/* ---- HUD furniture, pinned while the hero is on screen ---- */
.ar-hud { position: sticky; top: 0; z-index: 6; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px 32px; padding: 10px clamp(12px, 3vw, 28px); background: var(--ar-bk); border-bottom: 4px solid var(--ar-nv); font-size: clamp(12px, 1.4vw, 14px); }
.ar-hud__l { color: var(--ar-rd); }
.ar-hud__h { color: var(--ar-yl); }
.ar-hud__c { color: var(--ar-cy); }
.ar-hud b { color: var(--ar-wh); font-weight: 400; }
@media (min-width: 48.01rem) { .ar-hud { padding-right: clamp(200px, 30vw, 380px); } }

/* ---- ATTRACT ---- */
.ar-attract { position: relative; min-height: min(86vh, 820px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 16px 110px; overflow: hidden; background: radial-gradient(circle at 50% 120%, #1b0f2e 0%, transparent 60%), var(--ar-bk); }
.ar-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #EDEDF2 50%, transparent 51%), radial-gradient(2px 2px at 70% 20%, #29D9D9 50%, transparent 51%), radial-gradient(2px 2px at 40% 80%, #F2D22E 50%, transparent 51%), radial-gradient(2px 2px at 85% 60%, #EDEDF2 50%, transparent 51%), radial-gradient(2px 2px at 10% 70%, #E24AC4 50%, transparent 51%), radial-gradient(2px 2px at 60% 50%, #EDEDF2 50%, transparent 51%); background-size: 340px 340px; opacity: 0.8; animation: ar-twk 1.2s steps(2) infinite; }
@keyframes ar-twk { 50% { opacity: 0.35; } }
.ar-title { position: relative; margin: 0; font-size: clamp(40px, 10vw, 120px); color: var(--ar-yl); text-shadow: 0.08em 0.08em 0 var(--ar-rd), 0.16em 0.16em 0 var(--ar-mg); letter-spacing: 0.02em; text-transform: uppercase; }
.ar-sub { position: relative; max-width: 36ch; margin: 28px auto 0; font-size: clamp(12px, 1.5vw, 14px); line-height: 2; color: var(--ar-cy); }
.ar-coinbtn { position: relative; display: inline-block; margin-top: 40px; background: none; border: 0; color: var(--ar-wh); font-family: var(--ar-pix); font-size: clamp(14px, 2.2vw, 22px); line-height: 1.5; cursor: pointer; min-height: 44px; padding: 8px 14px; animation: ar-blink 1s steps(1) infinite; }
span.ar-coinbtn { cursor: default; }
.ar-coinbtn:hover { color: var(--ar-yl); }
@keyframes ar-blink { 50% { opacity: 0; } }
.ar-lane { position: absolute; left: 0; right: 0; bottom: 30px; height: 64px; }
.ar-walker { position: absolute; bottom: 0; width: 72px; height: 60px; animation: ar-walk 12s steps(48) infinite; }
.ar-walker svg { position: absolute; inset: 0; width: 72px; height: 60px; }
.ar-walker .ar-fb { animation: ar-fr 0.5s steps(1) infinite; }
.ar-walker .ar-fa { animation: ar-fr 0.5s steps(1) infinite reverse; }
@keyframes ar-fr { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ar-walk { from { left: -80px; } to { left: 100%; } }
.ar-ship { position: absolute; right: 8%; top: 22%; width: 54px; height: 42px; animation: ar-bob 1.6s steps(2) infinite; }
@keyframes ar-bob { 50% { transform: translateY(-8px); } }

/* ---- SCREENS ---- */
.ar-wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 40px); }
.ar-screen { margin: clamp(70px, 10vw, 120px) 0; border: 4px solid var(--ar-cy); box-shadow: 0 0 0 4px var(--ar-bk), 0 0 0 8px var(--ar-mg); padding: clamp(18px, 4vw, 40px); background: var(--ar-nv); }
.ar-screen h2 { margin: 0 0 24px; font-family: var(--ar-pix); font-weight: 400; font-size: clamp(18px, 3.4vw, 34px); line-height: 1.4; letter-spacing: 0; color: var(--ar-yl); }
.ar-screen h2::before { content: "▶ "; color: var(--ar-mg); animation: ar-blink 1s steps(1) infinite; }
.ar-screen p { margin: 0 0 14px; }
.ar-screen > p:last-child { margin-bottom: 0; }
.ar-rec em { font-style: normal; color: var(--ar-yl); }
.ar-dim { color: var(--ar-dim); }
.ar-ev { color: var(--ar-dim); }

/* player stats */
.ar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 30px; margin: 0; }
.ar-stats div { border-bottom: 2px dashed var(--ar-rule); padding: 8px 0; }
.ar-stats dt { font-family: var(--ar-pix); font-size: 12px; line-height: 1.5; color: var(--ar-cy); margin-bottom: 8px; text-transform: uppercase; }
.ar-stats dd { margin: 0; font-weight: 700; }
.ar-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ar-bar i { width: 18px; height: 14px; background: var(--ar-gn); }
.ar-bar i.ar-off { background: var(--ar-rule); }
.ar-bar--r i { background: var(--ar-mg); }

/* menu list: what carries the look */
.ar-menu { list-style: none; margin: 0; padding: 0; }
.ar-menu li { display: grid; grid-template-columns: minmax(0, 230px) 1fr; gap: 10px 20px; padding: 12px 0 12px 28px; border-bottom: 2px solid #1c1c28; position: relative; }
.ar-menu li:hover::before, .ar-menu li:focus-within::before { content: "▶"; position: absolute; left: 0; top: 12px; color: var(--ar-mg); font-family: var(--ar-pix); font-size: 12px; }
.ar-rec .ar-menu > li > a { font-family: var(--ar-pix); font-size: 13px; color: var(--ar-wh); text-decoration: none; line-height: 1.6; text-transform: uppercase; }
.ar-rec .ar-menu > li > a:hover { color: var(--ar-yl); }
.ar-menu .ar-tag { display: block; font-family: var(--ar-mono); font-size: 13px; color: var(--ar-gn); text-transform: none; }
.ar-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ar-rec .ar-tags a { border: 2px solid var(--ar-wh); padding: 2px 8px; text-decoration: none; color: var(--ar-wh); }
.ar-rec .ar-tags a:hover { background: var(--ar-wh); color: var(--ar-bk); }
.ar-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-pal span { width: 78px; height: 62px; display: flex; align-items: flex-end; padding: 4px; font-size: 12px; font-weight: 700; border: 2px solid var(--ar-rule); }
.ar-spec { font-family: var(--ar-mono); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--ar-cy); }

/* dialog box: what it argues */
.ar-dialog { position: relative; background: var(--ar-bk); border: 4px solid var(--ar-wh); box-shadow: inset 0 0 0 4px var(--ar-bk), inset 0 0 0 8px var(--ar-wh); padding: 28px; }
.ar-dialog p { margin: 0 0 16px; }
.ar-dialog p:last-of-type { margin-bottom: 0; }
.ar-big { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.55; font-weight: 700; }
.ar-more { position: absolute; right: 18px; bottom: 8px; color: var(--ar-yl); animation: ar-blink 0.8s steps(1) infinite; }
.ar-refuse { margin-top: 22px; display: flex; gap: 16px; align-items: flex-start; background: var(--ar-rd); color: var(--ar-bk); padding: 18px; font-weight: 700; }
.ar-refuse .ar-px { font-size: 13px; white-space: nowrap; padding-top: 4px; }

/* recognise */
.ar-recog { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; }
.ar-recog p { margin: 0 0 14px; }
.ar-dx { border: 4px solid var(--ar-gn); padding: 18px; color: var(--ar-gn); font-weight: 700; align-self: start; }
.ar-dx .ar-px { display: block; font-size: 12px; margin-bottom: 10px; color: var(--ar-yl); }

/* high-score table: rules, and the lives ledger */
.ar-tw { overflow-x: auto; }
.ar-hs { width: 100%; min-width: 560px; border-collapse: collapse; }
.ar-hs caption { font-family: var(--ar-pix); font-size: 14px; line-height: 1.5; color: var(--ar-rd); text-align: left; padding-bottom: 14px; }
.ar-hs th, .ar-hs td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 2px dashed var(--ar-rule); }
.ar-hs thead th { font-family: var(--ar-pix); font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--ar-cy); text-transform: uppercase; }
.ar-hs .ar-rk { font-family: var(--ar-pix); font-size: 12px; white-space: nowrap; }
.ar-hs tbody tr:nth-child(1) .ar-rk { color: var(--ar-yl); }
.ar-hs tbody tr:nth-child(2) .ar-rk { color: var(--ar-cy); }
.ar-hs tbody tr:nth-child(3) .ar-rk { color: var(--ar-mg); }
.ar-hs .ar-area { font-family: var(--ar-pix); font-size: 12px; width: 13em; }
.ar-k { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 6px; margin-bottom: 4px; }
.ar-k--req { background: var(--ar-yl); color: var(--ar-bk); }
.ar-k--per { background: var(--ar-cy); color: var(--ar-bk); }
.ar-k--our { background: var(--ar-mg); color: var(--ar-bk); }
.ar-hs td p { margin: 0; }
.ar-ctx { margin-top: 20px; border: 2px dashed #3a3a4a; padding: 16px; color: #c6c6d4; }
.ar-ctx__h { font-size: 12px; font-weight: 400; text-transform: uppercase; }
.ar-ctx .ar-ctx__note { margin: 8px 0 6px; }
.ar-ctx p:last-child { margin: 0; }

/* behind: the lives ledger */
.ar-behind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 30px; }
.ar-behind p { margin: 0 0 12px; }
.ar-warn { font-family: var(--ar-pix); font-size: 14px; color: var(--ar-yl); line-height: 1.8; text-transform: uppercase; }
.ar-lives td .ar-hrt { width: 21px; height: 18px; vertical-align: middle; }
.ar-lives td.ar-ev { font-size: 15px; color: var(--ar-wh); }
.ar-lives th[scope=row] { font-weight: 700; color: var(--ar-wh); }
.ar-firm { grid-column: 1 / -1; color: var(--ar-cy); font-weight: 700; }

/* player select: often confused with */
.ar-sel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ar-rec .ar-sel a, .ar-sel__plain { display: block; border: 4px solid var(--ar-mg); padding: 20px; text-decoration: none; color: var(--ar-wh); background: var(--ar-bk); }
.ar-sel b { display: block; font-family: var(--ar-pix); font-weight: 400; font-size: 15px; color: var(--ar-mg); margin-bottom: 6px; text-transform: uppercase; }
.ar-sel small { display: block; color: var(--ar-gn); margin-bottom: 10px; font-size: 14px; }
.ar-rec .ar-sel a:hover, .ar-rec .ar-sel a:focus { border-color: var(--ar-yl); background: #1a1a26; color: var(--ar-wh); }
.ar-rec .ar-sel a:hover b { color: var(--ar-yl); }

/* start buttons: use it */
.ar-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ar-rec .ar-starts a { display: block; padding: 24px; text-decoration: none; color: var(--ar-bk); background: var(--ar-yl); box-shadow: 8px 8px 0 var(--ar-rd); }
.ar-rec .ar-starts a:nth-child(2) { background: var(--ar-cy); box-shadow: 8px 8px 0 var(--ar-mg); }
.ar-rec .ar-starts a:nth-child(3) { background: var(--ar-gn); box-shadow: 8px 8px 0 var(--ar-cy); }
.ar-starts a b { display: block; font-family: var(--ar-pix); font-weight: 400; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.6; margin-bottom: 10px; }
.ar-rec .ar-starts a:active { transform: translate(8px, 8px); box-shadow: none; }
.ar-rec .ar-starts a:hover { background: var(--ar-wh); color: var(--ar-bk); }
.ar-screen .ar-mach-h { font-size: 12px; color: var(--ar-cy); margin: 34px 0 0; text-transform: uppercase; }
.ar-mach { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* continue? ... game over */
.ar-over { text-align: center; padding: 80px 16px 60px; }
.ar-go { display: block; font-size: clamp(22px, 5vw, 48px); color: var(--ar-rd); }
.ar-cnt { color: var(--ar-yl); font-size: clamp(14px, 2.2vw, 22px); margin: 20px 0 30px; min-height: 1.5em; }
.ar-over p { margin: 8px 0; }

@media (max-width: 760px) {
  .ar-recog, .ar-behind { grid-template-columns: 1fr; }
  .ar-menu li { grid-template-columns: 1fr; }
  .ar-refuse { flex-direction: column; gap: 8px; }
}
/* Below 600px the high-score table cannot hold three columns: drop the floor
   and stack each row as rank + area over the rule, still inside the dashed rules. */
@media (max-width: 600px) {
  .ar-hs { min-width: 0; }
  .ar-hs:not(.ar-lives), .ar-hs:not(.ar-lives) tbody, .ar-hs:not(.ar-lives) caption { display: block; }
  .ar-hs:not(.ar-lives) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ar-hs:not(.ar-lives) tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 2px dashed var(--ar-rule); }
  .ar-hs:not(.ar-lives) td { padding: 0; border-bottom: 0; }
  .ar-hs:not(.ar-lives) td:last-child { grid-column: 1 / -1; }
  .ar-hs .ar-area { width: auto; }
  /* the lives ledger keeps three columns: its header drops to the mono face, the cells tighten */
  .ar-lives thead th { font-family: var(--ar-mono); font-weight: 700; }
  .ar-lives th, .ar-lives td { padding-inline: 4px; }
  .ar-lives th[scope=row], .ar-lives td.ar-ev { font-size: 14px; }
}
@media (max-width: 48rem) {
  /* the site's action cluster docks to the bottom edge here; keep the footer clear of it */
  .ar-over { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-hero *, .ar-rec *, .ar-hero *::before, .ar-rec *::before { animation: none !important; transition: none !important; }
  .ar-walker { left: 40%; }
}