:root{--bg:#0e2a33;--bg-2:#143b46;--surface:#1b4a57;--line:#ffffff1a;--text:#f2fbfc;--dim:#9fc6cc;--accent:#ffd166;--bad:#ef476f;--good:#06d6a0;--ink:#0b2027;--radius:18px;--font:-apple-system, "SF Pro Rounded", ui-rounded, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--text);font:16px/1.4 var(--font);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0}body[data-screen=play]{overflow:hidden}#app{min-height:100%;min-height:100dvh}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit}h1,h2,h3,p{margin:0}.dim{color:var(--dim)}.center{text-align:center}.row{gap:10px;display:flex}.row>*{flex:1}.btn{border:1px solid var(--line);background:var(--surface);min-height:48px;color:var(--text);border-radius:14px;padding:10px 18px;font-weight:600;transition:transform 80ms}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);color:var(--ink);border-color:#0000}.btn.ghost{background:0 0}.btn.big{min-height:58px;font-size:19px}.page{max-width:520px;padding:calc(var(--sat) + 28px) 20px calc(var(--sab) + 28px);flex-direction:column;gap:18px;min-height:100dvh;margin:0 auto;display:flex}.title h1{letter-spacing:-.02em;font-size:44px;line-height:1}.title .tag{color:var(--dim);margin-top:6px;font-size:18px}.howto{background:var(--bg-2);border-radius:var(--radius);gap:10px;padding:16px;display:grid}.howto div{align-items:baseline;gap:12px;display:flex}.howto b{color:var(--accent);flex:none;min-width:3.6em}.best{color:var(--dim)}.spacer{flex:1}.play{touch-action:none;background:#7fb8c0;position:fixed;inset:0}.play canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hud{padding:calc(var(--sat) + 10px) 14px 0;pointer-events:none;text-shadow:0 1px 2px #0000008c,0 0 12px #00000059;justify-content:space-between;align-items:flex-start;font-size:20px;font-weight:700;display:flex;position:absolute;top:0;left:0;right:0}.hud .score{font-size:28px}.hud .time{font-variant-numeric:tabular-nums}.hud .strikes{letter-spacing:2px;font-size:18px}.hud .strikes .on{color:var(--bad)}.hud .streak{color:var(--accent);font-size:14px}.hud .quit{pointer-events:auto;right:12px;top:calc(var(--sat) + 96px);color:#fff;width:40px;height:40px;top:calc(var(--sat) + 96px);background:#00000059;border:0;border-radius:20px;font-size:18px;position:absolute}.play .weapon{left:14px;bottom:calc(var(--sab) + 34px);touch-action:none;background:#0b20278c;border:2px solid #fff9;border-radius:28px;place-items:center;width:56px;height:56px;font-size:26px;display:grid;position:absolute}.play .weapon:active{transform:scale(.94)}.flash{pointer-events:none;transition:box-shadow .5s;position:absolute;inset:0;box-shadow:inset 0 0 #ef476f00}.flash.on{transition:none;box-shadow:inset 0 0 60px 20px #ef476fbf}.oops{opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:8px;transition:opacity .12s,transform .12s;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)scale(.5)rotate(-6deg)}.oops.show{opacity:1;animation:.5s .12s oops-shake;transform:translate(-50%,-50%)scale(1)rotate(0)}.oops img{object-fit:cover;border:5px solid #fff;border-radius:50%;width:min(46vw,220px);height:min(46vw,220px);box-shadow:0 10px 30px #00000073}.oops-text{color:#fff;white-space:nowrap;white-space:normal;text-align:center;background:#ef476feb;border-radius:14px;max-width:92vw;padding:8px 16px;font-size:20px;font-weight:800}.oops.zach .oops-text{color:var(--ink);background:#06d6a0f0}@keyframes oops-shake{0%,to{transform:translate(-50%,-50%)scale(1)rotate(0)}25%{transform:translate(-50%,-50%)scale(1.04)rotate(3deg)}75%{transform:translate(-50%,-50%)scale(1.04)rotate(-3deg)}}.toast{color:#fff;opacity:0;pointer-events:none;white-space:nowrap;background:#0b2027d9;border-radius:14px;padding:10px 18px;font-size:18px;font-weight:700;transition:opacity .15s,transform .15s;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)scale(.92)}.toast.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.toast-bad{background:#ef476feb}.toast-ok{color:var(--ink);background:#06d6a0eb}.sheet-wrap{background:#0512178c;place-items:end center;display:grid;position:fixed;inset:0}.sheet{background:var(--bg-2);width:100%;max-width:520px;padding:22px 20px calc(var(--sab) + 22px);border-radius:24px 24px 0 0;flex-direction:column;gap:14px;animation:.25s up;display:flex}@keyframes up{0%{opacity:0;transform:translateY(40px)}}.sheet .verdict{align-items:center;gap:14px;display:flex}.sheet .verdict img{object-fit:cover;border:3px solid #fff;border-radius:50%;flex:none;width:72px;height:72px}.sheet .verdict p+p{font-weight:700}.sheet .big-score{font-size:56px;font-weight:800;line-height:1}.sheet .stats{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.sheet .stat{background:var(--surface);text-align:center;border-radius:12px;padding:10px}.sheet .stat b{font-size:22px;display:block}.sheet .stat span{color:var(--dim);font-size:13px}.newbest{color:var(--accent);font-weight:700}.dbg{left:0;right:0;top:calc(var(--sat) + 60px);z-index:99;color:#fff;pointer-events:none;white-space:pre;background:#0009;max-height:40vh;margin:0;padding:6px 8px;font:11px/1.3 ui-monospace,Menlo,monospace;position:fixed;overflow:hidden}.page-top{align-items:center;gap:10px;display:flex}.page-top h1{text-align:center;flex:1;font-size:26px}.icon-btn{background:var(--surface);width:44px;height:44px;color:var(--text);border:0;border-radius:22px;place-items:center;font-size:20px;display:grid}.board-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.board-row{background:var(--bg-2);border-radius:12px;grid-template-columns:40px 1fr auto;grid-template-areas:"rank name score""rank meta score";align-items:center;gap:2px 10px;padding:10px 12px;display:grid}.board-row.me{outline:2px solid var(--accent)}.board-row .rank{text-align:center;grid-area:rank;font-size:18px;font-weight:700}.board-row .name{grid-area:name;font-weight:600}.board-row .name small{color:var(--dim);font-weight:400}.board-row .score{font-variant-numeric:tabular-nums;color:var(--accent);grid-area:score;font-size:20px;font-weight:700}.board-row .meta{color:var(--dim);grid-area:meta}.board-gap{text-align:center;color:var(--dim);list-style:none}.sheet .standing{min-height:1.4em}.sheet .namerow input{border:1px solid var(--line);background:var(--bg);min-height:48px;color:var(--text);border-radius:12px;flex:2;padding:8px 14px}
