:root{--bg: #0b2224;--panel: #10302f;--ink: #f4ecd8;--muted: #8fb3ac;--accent: #ffc94a}*{box-sizing:border-box}html,body{height:100%;margin:0;background:radial-gradient(120% 80% at 50% 0%,#17403d 0%,var(--bg) 60%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));gap:10px}header{display:flex;align-items:stretch;gap:8px}.stat,.next{flex:1;min-width:0;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;justify-content:center}.stat span,.next span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.stat b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}.next{flex:1.2;align-items:flex-start}.next canvas{width:72px;height:48px}.btns{width:44px;display:flex;flex-direction:column;gap:6px}.btns button.off{color:var(--muted);opacity:.55;text-decoration:line-through}.btns button{flex:1;min-height:26px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:var(--panel);color:var(--ink);font-weight:800;font-size:14px;cursor:pointer}#stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}#board{border-radius:14px;box-shadow:0 18px 40px #00000073,inset 0 0 0 1px #ffffff0f;touch-action:none;display:block}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#061415b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:14px}#overlay[hidden]{display:none}.card{width:min(340px,92%);background:#143836;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 20px 18px;text-align:center;box-shadow:0 24px 60px #00000080}.card h1{margin:0 0 6px;font-size:34px;letter-spacing:.12em;color:var(--accent)}.card p{margin:0 0 12px;color:var(--muted);font-size:14px}.card p:empty{display:none}.card ul{list-style:none;margin:0 0 16px;padding:0;text-align:left;font-size:13.5px;line-height:1.45}.card li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}.card li i{color:var(--muted);font-style:normal}.card button{width:100%;padding:13px;border:0;border-radius:12px;background:var(--accent);color:#2a1d00;font-size:16px;font-weight:800;cursor:pointer}.card button.ghost{margin-top:8px;background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.16)}.card button.link{margin-top:6px;padding:8px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline}.card button[hidden],#lb[hidden]{display:none}#lb{margin:0 0 14px;text-align:left}.lb-tabs{display:flex;gap:6px;margin-bottom:8px}.card .lb-tabs button{flex:1;padding:7px;font-size:12.5px;font-weight:700;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.1);border-radius:9px}.card .lb-tabs button.on{background:#ffc94a24;color:var(--accent);border-color:#ffc94a66}#lb-list{list-style:none;margin:0;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums}#lb-list li{display:flex;gap:8px;padding:5px 6px;border-radius:7px}#lb-list li.me{background:#ffc94a24;color:var(--accent);font-weight:700}#lb-list .rank{width:22px;color:var(--muted)}#lb-list .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card #lb-me{margin:8px 0 0;font-size:12.5px;min-height:1.3em}.card .keys{margin:12px 0 0;font-size:11px;line-height:1.5}#pad{display:none;gap:8px}#pad button{flex:1;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--panel);color:var(--ink);font-size:20px;touch-action:manipulation}#pad button:active{background:#1b4a47}@media(pointer:coarse){#pad{display:flex}}