@import url('https://fonts.googleapis.com/css2?family=Bungee&family=DM+Mono:wght@400;500&display=swap');

:root { --ink:#11120f; --acid:#dfff00; --paper:#f1efe4; --hot:#ff4d22; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0; color:var(--ink); background:var(--paper);
  font-family:'DM Mono',monospace;
  background-image:linear-gradient(rgba(17,18,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,15,.045) 1px,transparent 1px);
  background-size:28px 28px;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.shell { width:min(1120px,calc(100% - 28px)); margin:auto; padding:28px 0 18px; }
.masthead { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:4px solid var(--ink); padding-bottom:14px; }
.eyebrow { margin:0 0 5px; font-size:11px; letter-spacing:.17em; font-weight:500; }
h1 { margin:0; font:clamp(42px,8vw,96px)/.86 'Bungee',sans-serif; letter-spacing:-.05em; }
h1 span { color:var(--hot); }
.status { display:flex; gap:9px; align-items:center; font-size:11px; letter-spacing:.08em; }
.status i { width:11px;height:11px;background:var(--acid);border:2px solid var(--ink);border-radius:50%;box-shadow:0 0 0 4px var(--acid);animation:pulse 1.6s infinite; }
.game-wrap { display:grid; grid-template-columns:145px minmax(280px,620px) 100px; justify-content:center; gap:22px; padding:30px 0 24px; align-items:start; }
.scoreboard { border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:var(--acid); }
.scoreboard div { padding:16px 14px; border-bottom:3px solid var(--ink); }
.scoreboard div:last-child { border:0; }
.scoreboard small { display:block;font-size:10px;letter-spacing:.13em;margin-bottom:4px; }
.scoreboard strong { display:block;font:30px/1 'Bungee',sans-serif; }
.screen { position:relative; aspect-ratio:1; border:5px solid var(--ink); background:var(--ink); box-shadow:12px 12px 0 var(--hot); overflow:hidden; touch-action:none; }
canvas { display:block;width:100%;height:100%; }
.scanlines { position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(223,255,0,.035) 5px); }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--paper); background:rgba(17,18,15,.84); backdrop-filter:blur(3px); transition:.25s ease; }
.overlay.hidden { opacity:0; pointer-events:none; transform:scale(1.03); }
.overlay p { color:var(--acid);letter-spacing:.24em;font-size:11px;margin:0 0 12px; }
.overlay h2 { margin:0 0 22px;font:clamp(35px,6vw,68px)/.94 'Bungee';letter-spacing:-.04em; }
.overlay button { border:0;background:var(--acid);color:var(--ink);padding:14px 24px;font:16px 'Bungee';box-shadow:6px 6px 0 var(--hot);cursor:pointer;transition:.12s; }
.overlay button:hover { transform:translate(3px,3px);box-shadow:3px 3px 0 var(--hot); }
.overlay small { margin-top:20px;opacity:.7;font-size:9px;letter-spacing:.12em; }
.controls { display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.controls button { aspect-ratio:1;border:2px solid var(--ink);background:transparent;font:22px 'DM Mono';cursor:pointer; }
.controls button:active { background:var(--acid);transform:translateY(2px); }
.controls [data-dir=up] { grid-column:2; }.controls [data-dir=left]{grid-column:1}.controls [data-dir=down]{grid-column:2}.controls [data-dir=right]{grid-column:3}
footer { border-top:2px solid var(--ink); padding-top:12px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(223,255,0,.25); } }
@media(max-width:760px){ .shell{padding-top:18px}.status{display:none}.game-wrap{grid-template-columns:1fr;padding-top:20px}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);box-shadow:5px 5px 0 var(--ink)}.scoreboard div{border-bottom:0;border-right:2px solid var(--ink);padding:10px}.scoreboard strong{font-size:22px}.controls{width:190px;margin:4px auto 0}footer span:nth-child(2){display:none}.screen{box-shadow:7px 7px 0 var(--hot)} }