/* Snake — arcade look: black field, pixel font, bright green */
:root{--arcade-bg:#000000;--arcade-green:#39FF14;--arcade-green-dim:#1F7A12;--arcade-red:#FF2D95;--arcade-ink:#e8ffef}
html,body{background:#000000}
body{color:#d9ffe4;font-family:"Press Start 2P",monospace}
main{padding-block:var(--s-5) var(--s-8);display:grid;gap:var(--s-6)}
.top{display:grid;gap:var(--s-2);justify-items:center;text-align:center}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:6px;background:#39FF14;color:#000000;font:400 15px/1 "Press Start 2P",monospace;image-rendering:pixelated}
h1{font-size:clamp(20px,4vw,32px);margin:0;font-family:"Press Start 2P",monospace;font-weight:400;letter-spacing:.04em;color:#39FF14;text-shadow:3px 3px 0 #0a3d0a}
.tag{margin:0;color:#7fae8d;font-size:10px;font-family:"Press Start 2P",monospace;line-height:1.7}
.stage{display:grid;gap:var(--s-4);justify-items:center}
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);width:100%;max-width:520px}
.stat{display:grid;gap:6px}
.lbl{font:400 8px/1 "Press Start 2P",monospace;letter-spacing:.08em;text-transform:uppercase;color:#7fae8d}
.num{font:400 16px/1 "Press Start 2P",monospace;color:#e8ffef;font-variant-numeric:tabular-nums}
#best{color:#FF2D95}
.hud-btns{margin-left:auto;display:flex;gap:var(--s-2)}
#pause,#mute{min-height:44px;font-family:"Press Start 2P",monospace;font-size:9px;color:#d9ffe4;border-color:#1F7A12;background:#0A0A0A}
#pause:hover:not(:disabled),#mute:hover{background:#111111}
#mute[aria-pressed="true"]{color:#5b6f61;text-decoration:line-through}
.board-wrap{position:relative;width:100%;max-width:520px;aspect-ratio:1;border:2px solid #39FF14;border-radius:8px;background:#000000;overflow:hidden;touch-action:none;box-shadow:0 0 0 4px #0A0A0A,0 0 32px rgba(57,255,20,.18)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s-4);background:rgba(0,0,0,.85)}
.overlay[hidden]{display:none}
.panel{display:grid;justify-items:center;gap:var(--s-4);max-width:360px;padding:var(--s-5);border:2px solid #39FF14;border-radius:8px;background:#0A0A0A;box-shadow:0 0 24px rgba(57,255,20,.25);text-align:center}
.panel h2{margin:0;font-size:16px;font-family:"Press Start 2P",monospace;font-weight:400;color:#39FF14;line-height:1.6}
.panel p{margin:0;color:#d9ffe4;font-size:9px;font-family:"Press Start 2P",monospace;line-height:1.9}
.panel .btn{min-height:48px;padding-inline:var(--s-5);font-family:"Press Start 2P",monospace;font-size:10px}
.btn-primary{background:#39FF14;color:#000000;border-color:#39FF14}
.btn-primary:hover{background:#6BFF45}
.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px);gap:var(--s-2);justify-content:center}
@media (min-width:720px){.pad{display:none}}
.dir{min-width:64px;min-height:64px;border:2px solid #1F7A12;border-radius:8px;background:#0A0A0A;color:#39FF14;font-size:18px;cursor:pointer}
.dir:active{background:#111111}
.dir[data-dir=up]{grid-column:2;grid-row:1}
.dir[data-dir=left]{grid-column:1;grid-row:2}
.dir[data-dir=down]{grid-column:2;grid-row:2}
.dir[data-dir=right]{grid-column:3;grid-row:2}
.how{max-width:520px;width:100%;justify-self:center;border-top:1px solid #1F7A12;padding-top:var(--s-4)}
.how h2{font-size:11px;margin:0 0 var(--s-3);font-family:"Press Start 2P",monospace;font-weight:400;color:#39FF14}
.how ul{margin:0;padding-left:1.4em;color:#7fae8d;font-size:9px;font-family:"Press Start 2P",monospace;line-height:2;display:grid;gap:var(--s-2)}