:root{--ink:#535353;--paper:#f7f7f7;--pixel:"Press Start 2P", ui-monospace, monospace;--pad-top:max(14px, env(safe-area-inset-top))}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:var(--ink);font:12px/1.8 var(--pixel);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;background:#f3ead6}#game{width:100%;height:100%;display:block;position:fixed;inset:0}.hud{top:var(--pad-top);right:max(16px, env(safe-area-inset-right));z-index:2;color:var(--hud,var(--ink));pointer-events:none;gap:clamp(8px,3vw,20px);font-size:clamp(11px,3.4vw,18px);transition:color 1s;display:flex;position:fixed}.hud .hi{opacity:.7}.hud.blink #score{animation:.25s step-end 4 blink}@keyframes blink{50%{visibility:hidden}}.mute{top:var(--pad-top);left:max(12px, env(safe-area-inset-left));z-index:2;cursor:pointer;color:var(--hud,var(--ink));font:clamp(8px, 2.4vw, 10px)/1 var(--pixel);background:0 0;border:2px solid;padding:8px 10px;transition:color 1s;position:fixed}.touch-controls{display:none}.touch-btn{border:3px solid var(--hud,var(--ink));max-width:220px;min-height:84px;color:var(--hud,var(--ink));font:13px/1 var(--pixel);cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#f7f7f759;flex:1;padding:12px;transition:color 1s,border-color 1s}.touch-btn:active{background:#53535359}@media (hover:none) and (pointer:coarse){.touch-controls{z-index:2;left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));align-items:stretch;gap:12px;display:flex;position:fixed}@media (orientation:landscape){.touch-controls{justify-content:space-between;gap:40vw}}}.overlay{z-index:3;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));place-items:center;transition:opacity .2s;display:grid;position:fixed;inset:0}.overlay.hidden{opacity:0;pointer-events:none}.panel{text-align:center;border:3px solid var(--ink);background:#f7f7f7eb;width:min(460px,100%);max-height:100%;padding:clamp(18px,5vw,28px) clamp(14px,4vw,24px);overflow:auto;box-shadow:6px 6px #53535359}h1,h2{font-weight:400;line-height:1.3}h1{font-size:clamp(22px,7vw,34px)}h2{font-size:clamp(18px,5.5vw,26px)}.keys{gap:10px;margin-top:clamp(14px,4vw,22px);font-size:clamp(8px,2.5vw,10px);list-style:none;display:grid}kbd{border:2px solid var(--ink);font:inherit;background:#fff;margin:0 2px;padding:4px 6px;display:inline-block}.keys-touch{display:none}@media (hover:none) and (pointer:coarse){.keys-desktop,.desktop-only{display:none}.keys-touch{display:grid}}.new-best{margin-top:14px;font-size:clamp(9px,2.6vw,11px)}.new-best.hidden{display:none}.btn{border:3px solid var(--ink);cursor:pointer;background:var(--ink);color:var(--paper);font:clamp(9px, 2.8vw, 11px)/1.4 var(--pixel);margin-top:clamp(16px,4vw,24px);padding:12px 16px}.btn:hover,.btn:focus-visible{background:var(--paper);color:var(--ink);outline:none}.restart{place-items:center;width:64px;height:56px;padding:0;display:inline-grid}.restart svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:square;width:30px;height:30px}@media (height<=480px){.panel{gap:4px;padding:14px 18px;display:grid}.keys{gap:6px;margin-top:8px}.btn{margin-top:10px;padding:10px 14px}.touch-btn{min-height:64px}}