:root{--bg:#070b12;--panel:#0b121b;--ink:#e8f0f7;--muted:#748394;--line:#263746;--cyan:#63e6df;--amber:#ffb45c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:12px ui-monospace,SFMono-Regular,Consolas,monospace}body{display:flex;justify-content:center}.page{width:min(760px,100%);padding:18px 16px calc(20px + env(safe-area-inset-bottom))}header{height:45px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:12px}header h1{font-size:20px;letter-spacing:.15em;margin:0;text-align:center}header a,header button{border:0;background:none;color:var(--muted);font:10px inherit;letter-spacing:.1em;text-decoration:none;min-height:44px;cursor:pointer}header button{text-align:right}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px}.hud div{border:1px solid var(--line);background:var(--panel);padding:7px 9px;display:flex;justify-content:space-between;gap:6px}.hud span{font-size:9px;color:var(--muted);letter-spacing:.1em}.hud b{color:var(--cyan);font-size:11px}.frame{position:relative;border:1px solid var(--line);padding:5px;background:#111b26;box-shadow:5px 5px #030609}.frame canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:#050910;touch-action:none;user-select:none;-webkit-user-select:none}.overlay{position:absolute;inset:5px;background:#050910e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px}.overlay.hide{display:none}.overlay b{font-size:clamp(24px,6vw,46px);letter-spacing:.16em;color:var(--ink);text-shadow:3px 3px #19343e}.overlay span{font-size:10px;color:var(--muted);letter-spacing:.14em}.overlay button{border:0;background:var(--cyan);color:#061114;font:700 10px inherit;letter-spacing:.12em;padding:13px 20px;min-height:44px;box-shadow:4px 4px #267b79;cursor:pointer}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;touch-action:none}.controls button{min-height:58px;border:1px solid var(--line);background:var(--panel);color:var(--cyan);font:22px inherit;box-shadow:3px 3px #030609;touch-action:none;user-select:none;-webkit-user-select:none}.controls button.active{transform:translate(2px,2px);box-shadow:1px 1px #030609;background:#14232d}.controls small{display:block;color:var(--muted);font-size:8px;letter-spacing:.1em;margin-top:3px}.controls .fire{color:var(--amber)}footer{text-align:center;color:var(--muted);font-size:9px;letter-spacing:.08em;margin-top:14px}@media(max-width:520px){.page{padding:8px 8px calc(12px + env(safe-area-inset-bottom))}header{margin-bottom:7px}.hud{gap:4px}.hud div{padding:6px 5px;flex-direction:column}.frame{padding:3px}.overlay{inset:3px}.controls{gap:5px;margin-top:8px}.controls button{min-height:54px}footer{display:none}}@media(min-width:800px) and (pointer:fine){.controls{max-width:520px;margin:12px auto 0}}