:root{--bg:#070b12;--panel:#0b111a;--ink:#e8f0f7;--muted:#748394;--line:#243241;--cyan:#64e6e0;--gold:#ffb45c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:12px ui-monospace,monospace}body{display:flex;justify-content:center}.page{width:min(620px,100%);padding:22px 16px max(22px,env(safe-area-inset-bottom))}header{height:44px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:12px}header h1{font-size:22px;letter-spacing:.16em;margin:0}header a,header button{color:var(--muted);background:none;border:0;text-decoration:none;font:10px inherit;letter-spacing:.1em;padding:12px 0;cursor:pointer;min-height:44px}header button{text-align:right}.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:570px;margin:0 auto 10px;background:var(--panel);border:1px solid var(--line)}.stats div{padding:8px 5px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats span{display:block;color:var(--muted);font-size:8px;letter-spacing:.1em;margin-bottom:3px}.stats b{color:var(--cyan);font-size:11px}.frame{position:relative;max-width:570px;margin:auto;padding:5px;background:var(--line);box-shadow:5px 5px #111820}.frame canvas{display:block;width:100%;height:auto;background:#0b111a;touch-action:none;user-select:none;-webkit-user-select:none}.overlay{position:absolute;inset:5px;background:#070b12e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.overlay.hide{display:none}.overlay b{font-size:28px;letter-spacing:.12em}.overlay span{max-width:80%;color:var(--muted);font-size:9px;letter-spacing:.1em;line-height:1.7}.overlay button,.tools button,.dpad button{border:0;background:var(--cyan);color:#071014;padding:12px 16px;font:700 10px inherit;letter-spacing:.1em;cursor:pointer;box-shadow:3px 3px #2a8d8a;min-height:44px}.tools{max-width:570px;margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.tools button{background:#71685f;color:#fff;box-shadow:3px 3px #454039}.dpad{display:none;width:210px;margin:15px auto 0;grid-template-columns:repeat(3,1fr);gap:8px}.dpad i{display:block}.dpad button{height:52px;padding:0;font-size:16px;touch-action:none}footer{text-align:center;color:var(--muted);font-size:9px;letter-spacing:.09em;margin-top:20px}@media(max-width:600px){.page{padding:10px 10px max(16px,env(safe-area-inset-bottom))}header{margin-bottom:8px}.frame{box-shadow:3px 3px #111820}.dpad{display:grid}.tools{margin-top:12px}.tools button{padding:10px 4px}.overlay b{font-size:23px}footer{margin-top:14px}}@media(max-height:690px){.dpad{width:178px;margin-top:10px;gap:6px}.dpad button{height:42px}.tools{margin-top:9px}.tools button{min-height:38px;padding:8px}.stats{margin-bottom:6px}footer{display:none}}