:root{--bg:#070b12;--panel:#0b121b;--ink:#e8f0f7;--muted:#748394;--line:#263746;--mint:#73f0b0;--rose:#ff7088}*{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(630px,100%);padding:18px 15px 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:10px}header h1{font-size:19px;letter-spacing:.14em;margin:0;white-space:nowrap}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(3,1fr);gap:7px;margin-bottom:8px}.hud div{border:1px solid var(--line);background:var(--panel);padding:7px 9px;display:flex;justify-content:space-between}.hud span{font-size:9px;color:var(--muted);letter-spacing:.1em}.hud b{font-size:11px;color:var(--mint)}.frame{position:relative;width:min(100%,500px);margin:auto;border:1px solid var(--line);padding:5px;background:#111b26;box-shadow:5px 5px #030609}.frame canvas{display:block;width:100%;height:auto;background:#071017;touch-action:none;user-select:none;-webkit-user-select:none}.overlay{position:absolute;inset:5px;background:#050910e9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;text-align:center}.overlay.hide{display:none}.overlay b{font-size:clamp(23px,6vw,40px);letter-spacing:.14em;text-shadow:3px 3px #18372b}.overlay span{font-size:9px;color:var(--muted);letter-spacing:.12em}.overlay button{border:0;background:var(--mint);color:#06110c;font:700 10px inherit;letter-spacing:.12em;min-height:44px;padding:13px 18px;box-shadow:4px 4px #2a8158;cursor:pointer}.dpad{width:210px;margin:12px auto 0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:". up ." "left down right";gap:6px;touch-action:none}.dpad button{min-height:49px;border:1px solid var(--line);background:var(--panel);color:var(--mint);font:18px inherit;box-shadow:3px 3px #030609;touch-action:none;user-select:none;-webkit-user-select:none}.dpad button:active{transform:translate(2px,2px);box-shadow:1px 1px #030609}.dpad [data-dir=up]{grid-area:up}.dpad [data-dir=left]{grid-area:left}.dpad [data-dir=down]{grid-area:down}.dpad [data-dir=right]{grid-area:right}footer{text-align:center;color:var(--muted);font-size:9px;letter-spacing:.08em;margin-top:13px}@media(max-width:520px){.page{padding:7px 8px calc(10px + env(safe-area-inset-bottom))}header{margin-bottom:6px}.hud{gap:4px}.hud div{padding:6px 5px;flex-direction:column;gap:3px}.frame{padding:3px;width:min(100%,440px)}.overlay{inset:3px}.dpad{margin-top:8px}.dpad button{min-height:45px}footer{display:none}}@media(max-height:740px) and (max-width:520px){.frame{width:min(76vw,360px)}.dpad{position:fixed;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:142px;opacity:.9}.dpad button{min-height:40px}}