:root{--bg: #0a0a0f;--bg-2: #12121a;--fg: #e8e8f0;--muted: #6b7280;--accent: #f5c542;--seeker: #36d1dc;--danger: #ff4d6d;--radius: 14px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--app-h: 100%;--app-top: 0px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app,.app{position:fixed;inset:0;overflow:hidden}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.screen--game{background:var(--bg)}.screen--game canvas{display:block;touch-action:none}.hidden{display:none!important}.screen--splash,.screen--menu{top:var(--app-top, 0px);bottom:auto;height:var(--app-h, 100%);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.screen--splash>.splash__inner,.screen--menu>.menu__inner{margin:auto}.screen--splash{background:radial-gradient(1200px 600px at 50% -10%,#1b1b2b 0%,transparent 60%),linear-gradient(180deg,#0c0c14,#08080d);padding:calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom))}.splash__inner{text-align:center;max-width:420px;width:100%}.splash__title{font-size:clamp(40px,13vw,72px);line-height:.92;letter-spacing:-.02em;font-weight:800;margin:0;background:linear-gradient(180deg,#fff,#b9b9c9);-webkit-background-clip:text;background-clip:text;color:transparent}.splash__title .amp{color:var(--accent);-webkit-text-fill-color:var(--accent)}.splash__tag{color:var(--muted);margin:16px 0 36px;font-size:16px}.splash__actions{display:flex;flex-direction:column;gap:12px}.splash__join{display:flex;gap:10px;margin-top:14px}.splash__join .input{flex:1 1 0;min-width:0}.screen--menu{background:radial-gradient(1000px 500px at 50% -10%,#181826 0%,transparent 60%),linear-gradient(180deg,#0c0c14,#08080d);padding:calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom))}.menu__inner{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}.menu__title{font-size:28px;font-weight:800;margin:8px 0 0;letter-spacing:-.01em}.menu__sub{color:var(--muted);margin:0 0 8px;font-size:15px}.back{align-self:flex-start;background:transparent;border:0;color:var(--muted);font-size:26px;line-height:1;padding:4px 8px 4px 0;cursor:pointer}.btn{appearance:none;border:0;border-radius:var(--radius);padding:16px 20px;font-size:17px;font-weight:700;cursor:pointer;transition:transform .06s ease,filter .15s ease}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.4;cursor:default}.btn--primary{background:var(--accent);color:#1a1500}.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px #2a2a38}.input{flex:1;border-radius:var(--radius);border:0;padding:16px;background:var(--bg-2);color:var(--fg);font-size:20px;font-weight:700;text-align:center;letter-spacing:.3em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px #2a2a38}.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}.input--url{text-transform:none;letter-spacing:normal;text-align:left;font-size:16px;font-weight:500}.lobby{align-items:stretch}.lobby__label{color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-size:12px;margin:6px 0 0;text-align:center}.lobby__code{font-size:clamp(44px,16vw,64px);font-weight:900;letter-spacing:.18em;text-align:center;color:var(--fg);background:transparent;border:0;cursor:pointer;padding:4px 0 18px;position:relative}.lobby__code:after{content:"tap to copy link";position:absolute;left:0;right:0;bottom:0;font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:600}.lobby__code.copied:after{content:"link copied ✓";color:var(--accent)}.lobby__arena{text-align:center;color:var(--seeker);font-weight:700;font-size:15px;margin:6px 0 4px}.roster{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:8px}.roster__item{display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px #20202c}.roster__item .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none}.roster__name{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:#1c1c28;border-radius:999px;padding:3px 8px}.tag--host{color:#1a1500;background:var(--accent)}.lobby__hint{text-align:center;color:var(--muted);font-size:14px;margin:6px 0 0}.stick{pointer-events:none;touch-action:none}.stick--base{position:absolute;bottom:calc(32px + var(--safe-bottom));width:132px;height:132px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:#ffffff0a;z-index:40;transition:border-color .12s ease,background .12s ease}.stick--left{left:28px}.stick--right{right:28px}.stick--base.stick--active{border-color:#fff6;background:#ffffff12}.stick--thumb{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:#ffffff24}.hud{position:absolute;inset:0;pointer-events:none;z-index:30}.hud__top{position:absolute;top:calc(14px + var(--safe-top));left:0;right:0;text-align:center}.hud__timer{font-size:44px;font-weight:900;line-height:1;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.65);font-variant-numeric:tabular-nums}.hud__timer--urgent{color:var(--danger)}.hud__hint{margin-top:4px;font-size:14px;font-weight:700;color:#ffffffd9;text-shadow:0 1px 8px rgba(0,0,0,.7)}.hud__lock{position:absolute;left:50%;bottom:calc(46px + var(--safe-bottom));transform:translate(-50%);pointer-events:auto;appearance:none;border:0;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:800;letter-spacing:.06em;color:#1a1500;background:var(--accent);box-shadow:0 6px 20px #0006;cursor:pointer}.hud__lock:active{transform:translate(-50%) translateY(1px) scale(.98)}.hud__lock--done{color:#062b15;background:#4ade80}.hud__blank{position:absolute;inset:0;z-index:45;background:#06060a;display:flex;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:0 24px}.hud__blank-timer{font-size:72px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}.hud__blank-msg{margin-top:14px;font-size:17px;font-weight:700;color:#ffffff9e}.hud__result{position:absolute;inset:0;z-index:46;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:#06060ad6;pointer-events:none}.hud__result-title{font-size:clamp(34px,11vw,64px);font-weight:900;color:#fff;text-align:center;text-shadow:0 6px 30px rgba(0,0,0,.6)}.hud__result-btn{pointer-events:auto;appearance:none;border:0;border-radius:999px;padding:15px 34px;font-size:18px;font-weight:800;color:#1a1500;background:var(--accent);cursor:pointer}.hud__result-btn:active{transform:scale(.98)}.hud__result-wait{color:#fff9;font-weight:600}.hud__scores{position:absolute;top:calc(8px + var(--safe-top));left:10px;z-index:44;display:flex;flex-direction:column;gap:3px;pointer-events:none;max-width:46vw}.hud__score{display:flex;justify-content:space-between;gap:12px;padding:2px 8px;border-radius:7px;background:#08080e80;color:#e8e8f0;font-size:12px;font-weight:700;white-space:nowrap}.hud__score-name{overflow:hidden;text-overflow:ellipsis}.hud__score-pts{color:var(--accent);font-variant-numeric:tabular-nums}.hud__score--safe{color:var(--accent);box-shadow:inset 0 0 0 1px #f5c54280}.hud__score--tagged{opacity:.4}.hud__result-board{display:flex;flex-direction:column;gap:5px;width:min(280px,80vw)}.hud__result-board .hud__score{font-size:15px;padding:6px 12px}.kbd-hint{position:absolute;left:50%;bottom:calc(14px + var(--safe-bottom));transform:translate(-50%);pointer-events:none;z-index:35;font-size:13px;font-weight:600;color:#fff9;background:#0006;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:opacity .6s ease}.kbd-hint--fade{opacity:0}.announce{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:50;padding:0 24px;text-align:center;font-size:clamp(40px,12vw,96px);font-weight:900;letter-spacing:-.01em;line-height:.95;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.4,.4,1)}.announce:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 50%,rgba(0,0,0,.55),transparent 70%);z-index:-1}.announce--in{opacity:1;transform:scale(1)}