@font-face { font-family: 'PS2P'; src: url(fonts/press-start-2p-latin.woff2) format('woff2'); font-display: swap; }
:root { --bg: #07030f; --panel: #120a24; --pink: #ff2bd6; --cyan: #00f0ff; --yellow: #fff200; --green: #39ff14; --text: #e9e4ff; --muted: #8c83b3; --px: 'PS2P', ui-monospace, 'Courier New', monospace; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #2a0f4d 0%, transparent 60%),
    linear-gradient(transparent 0 calc(100% - 1px), rgba(255,43,214,.10) 0) 0 0 / 100% 48px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(0,240,255,.07) 0) 0 0 / 48px 100%, var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color: var(--cyan); }
/* CRT scanlines + vignette, never blocks clicks */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.top { text-align: center; padding: 40px 16px 20px; }
.coin { font: 10px/1 var(--px); color: var(--yellow); letter-spacing: 2px; margin: 0 0 18px; }
.blink { animation: blink 1s steps(1) infinite; color: var(--pink); }
@keyframes blink { 50% { opacity: 0; } }
.logo { font: clamp(26px, 6.4vw, 60px)/1.25 var(--px); margin: 0; letter-spacing: 2px; }
.logo span { display: inline-block; }
.l1 { color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 22px rgba(255,43,214,.7), 4px 4px 0 #4a0a40; }
.l2 { color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 22px rgba(0,240,255,.7), 4px 4px 0 #063c48; }
.l3 { color: var(--yellow); text-shadow: 0 0 6px var(--yellow), 0 0 22px rgba(255,242,0,.6), 4px 4px 0 #4a4400; }
.sub { color: var(--muted); margin: 18px auto 0; max-width: 36em; }
main { max-width: 1180px; margin: 0 auto; padding: 8px 16px 24px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.sec { font: 13px/1.4 var(--px); color: var(--green); text-shadow: 0 0 8px rgba(57,255,20,.6); margin: 8px 0 16px; letter-spacing: 1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--cyan); box-shadow: 0 0 0 3px #000, 0 0 18px rgba(0,240,255,.35), inset 0 0 22px rgba(0,240,255,.08); }
.card.live { grid-column: 1 / -1; border-color: var(--pink); box-shadow: 0 0 0 3px #000, 0 0 24px rgba(255,43,214,.45), inset 0 0 22px rgba(255,43,214,.1); }
.card .shot { display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-bottom: 3px solid currentColor; color: var(--pink); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; transition: transform .25s; }
.card.live:hover .shot img, .card.live:focus-within .shot img { transform: scale(1.03); }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h3 { font: 16px/1.4 var(--px); margin: 0; color: var(--yellow); text-shadow: 2px 2px 0 #000; }
.card.live h3 { font-size: clamp(18px, 3vw, 26px); }
.card p { margin: 0; color: var(--text); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font: 9px/1 var(--px); padding: 6px 7px; border: 2px solid; letter-spacing: 1px; }
.tag.live { color: var(--green); border-color: var(--green); }
.tag.live::before { content: ''; display: inline-block; width: 6px; height: 6px; background: currentColor; margin-right: 6px; vertical-align: 0; animation: blink 1s steps(1) infinite; }
.btn.play::before { content: ''; display: inline-block; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-right: 10px; vertical-align: -1px; }
.tag.lb { color: var(--cyan); border-color: var(--cyan); }
.tag.soon { color: var(--yellow); border-color: var(--yellow); }
.tag.plays { color: var(--pink); border-color: var(--pink); }
.tag[hidden] { display: none; }
.btn { align-self: flex-start; display: inline-block; font: 14px/1 var(--px); color: #000; background: var(--green); padding: 14px 18px; text-decoration: none; border: 0; box-shadow: 0 0 0 3px #000, 4px 4px 0 3px #0b5a00, 0 0 18px rgba(57,255,20,.5); margin-top: auto; }
.btn:hover, .btn:focus-visible { background: var(--yellow); outline: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px #000, 1px 1px 0 3px #0b5a00; }
.btn.small { font-size: 11px; padding: 11px 14px; margin-top: 14px; }
/* coming soon: locked, not clickable, clearly placeholder */
.card.soon { border-color: #3a2f66; box-shadow: 0 0 0 3px #000; cursor: not-allowed; user-select: none; }
.card.soon .shot { aspect-ratio: 16 / 7; color: #3a2f66; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #0d0719 0 12px, #150b2a 12px 24px); }
.card.soon .lock { font: 11px/1.8 var(--px); color: var(--yellow); text-align: center; text-shadow: 0 0 8px rgba(255,242,0,.5); }
.card.soon .lock b { display: block; font-size: 30px; line-height: 1.2; filter: grayscale(.2); }
.card.soon h3 { color: #bdb4e6; }
.card.soon p { color: var(--muted); }
.card.soon .locked { font: 10px/1 var(--px); color: #6e6499; margin-top: auto; }
.scores { background: var(--panel); border: 3px solid var(--yellow); box-shadow: 0 0 0 3px #000, 0 0 18px rgba(255,242,0,.25); padding: 16px; position: sticky; top: 16px; }
.scores { transition: box-shadow .15s, border-color .15s; }
/* the whole TOP SCORES panel (header + entries) is one link to the full in-game leaderboard */
.scores-link { display: block; color: inherit; text-decoration: none; cursor: pointer; margin: -8px -8px 0; padding: 8px; outline: none; border-radius: 0; transition: background .15s, box-shadow .15s; }
.scores-link:hover, .scores-link:focus-visible { background: rgba(255,242,0,.05); box-shadow: inset 0 0 0 2px rgba(255,242,0,.35), 0 0 18px rgba(255,242,0,.25); }
.scores-link:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 18px rgba(0,240,255,.45); }
.scores:has(.scores-link:hover), .scores:has(.scores-link:focus-visible) { box-shadow: 0 0 0 3px #000, 0 0 30px rgba(255,242,0,.55); }
.scores-link:hover .sec, .scores-link:focus-visible .sec { text-shadow: 0 0 12px rgba(255,242,0,.95); }
.scores-more { display: block; margin-top: 10px; font: 9px/1.4 var(--px); color: var(--cyan); letter-spacing: 1px; text-align: right; }
.scores-link:hover .scores-more, .scores-link:focus-visible .scores-more { color: var(--yellow); text-shadow: 0 0 8px rgba(255,242,0,.7); }
a.tag { text-decoration: none; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
a.tag.lb:hover, a.tag.lb:focus-visible { background: var(--cyan); color: #000; box-shadow: 0 0 12px rgba(0,240,255,.6); outline: none; }
.scores .sec { color: var(--yellow); text-shadow: 0 0 8px rgba(255,242,0,.5); margin-top: 0; }
.scores-game { font: 9px/1.4 var(--px); color: var(--muted); margin: -6px 0 12px; }
.board { list-style: none; margin: 0; padding: 0; font: 12px/1 var(--px); }
.board li { display: grid; grid-template-columns: 2.2em 3.6em 1fr; align-items: center; padding: 9px 0; border-bottom: 1px dashed #2c2150; }
.board li .r { color: var(--pink); }
.board li .n { color: var(--cyan); }
.board li .s { text-align: right; color: var(--text); }
.board li .s small { color: var(--yellow); font-size: 8px; margin-left: 4px; }
.board li:first-child .s, .board li:first-child .n { color: var(--yellow); text-shadow: 0 0 8px rgba(255,242,0,.6); }
.board li.muted { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; }
.muted { color: var(--muted); }
.foot { text-align: center; padding: 28px 16px 40px; border-top: 3px solid #1d1338; font-size: 13px; }
.foot p { margin: 6px 0; }
.foot p:first-child { font: 10px/1.6 var(--px); color: var(--pink); }
.note { color: var(--muted); }
/* sidebar column: sitewide plays label on the SELECT GAME row, TOP SCORES box level with the first card.
   The label uses .sec (same green/font/size/spacing/margins) and always keeps its line box, so the box aligns even when empty. */
.side { align-self: stretch; min-width: 0; }
.side-sec { white-space: nowrap; height: calc(13px * 1.4); line-height: calc(13px * 1.4); } /* = .sec line box; fixed so a shrunk huge number keeps the row */
.side-sec:not(.on) { visibility: hidden; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } .scores { position: static; } .side-sec:not(.on) { display: none; } }
@media (max-width: 420px) { .top { padding-top: 28px; } .grid { grid-template-columns: 1fr; } .btn { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .blink, .tag.live::before { animation: none; } .card .shot img, .scores, .scores-link, a.tag { transition: none; } }