:root{--pink:#ff2d8a;--cyan:#7cf7ff;--ink:#f4f6ff;--dim:#9aa3c7;--glass:#0e122cb8;--line:#ffffff1f}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#07091a;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#gl{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff0f;border-radius:12px;padding:10px 16px;transition:transform .12s,background .12s,border-color .12s}button:hover{background:#ffffff1f;border-color:#ffffff4d}button:active{transform:scale(.97)}button.pink{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:800}button.pink:hover{background:#ff4f9f}button.big{padding:14px 22px;font-size:17px;font-weight:800}button.ghost{background:0 0}input{font:inherit;color:var(--ink);border:1px solid var(--line);background:#00000059;border-radius:12px;outline:none;padding:10px 14px}input:focus{border-color:var(--cyan)}.screen{z-index:10;background:radial-gradient(#07091a26,#07091abf);place-items:center;padding:20px;display:grid;position:fixed;inset:0;overflow-y:auto}.panel{background:var(--glass);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:26px;width:100%;max-width:760px;padding:30px;box-shadow:0 30px 80px #00000080}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:16px;display:flex}.logo{letter-spacing:-.04em;text-align:center;color:#fff;text-shadow:0 0 30px #ff2d8a8c;margin:0;font-size:clamp(54px,11vw,104px);font-style:italic;font-weight:900;line-height:.9}.logo span{color:var(--pink);margin-left:.12em}.tag{text-align:center;color:var(--dim);margin:12px 0 22px;font-size:18px}.tag b{color:var(--ink)}.modes{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.mode{border-radius:18px;flex-direction:column;align-items:center;gap:4px;padding:20px 10px;display:flex}.mode .ico{font-size:34px}.mode .t{font-size:18px;font-weight:900}.mode .s{color:var(--dim);font-size:13px}.mode:hover{border-color:var(--pink);box-shadow:0 0 0 3px #ff2d8a40}.levels{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;display:grid}.lvl{text-align:left;border-radius:14px;padding:10px 8px}.lvl b{font-size:14px;display:block}.lvl small{color:var(--dim);margin-top:2px;font-size:11.5px;line-height:1.25;display:block}.lvl .st{color:#ffcf4a;letter-spacing:1px;font-size:11px}.lvl.on{border-color:var(--cyan);background:#7cf7ff1f}.opts{justify-content:space-between}.seg{border:1px solid var(--line);border-radius:12px;display:inline-flex;overflow:hidden}.seg button{background:0 0;border:0;border-radius:0;padding:8px 14px}.seg button.on{background:var(--cyan);color:#06121a;font-weight:800}.chk{color:var(--dim);cursor:pointer;align-items:center;gap:6px;font-size:14px;display:flex}.code{gap:6px;display:flex}.code input{text-transform:uppercase;letter-spacing:2px;width:140px}.code input::placeholder{text-transform:none;letter-spacing:0}.how{color:var(--dim);margin-top:18px;font-size:14px}.how summary{cursor:pointer;color:var(--ink);font-weight:700}.how li{margin:6px 0;line-height:1.4}.how b{color:var(--ink)}.invite{border:1px dashed var(--pink);border-radius:18px;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;padding:16px;display:flex}.setup,.lobby,.over{text-align:center;max-width:720px}.setup h2,.lobby h2{margin:0 0 6px;font-size:28px}.setup p,.lobby p{color:var(--dim);margin:0 0 16px}.cam{aspect-ratio:16/9;background:#000;border-radius:18px;position:relative;overflow:hidden}.cam canvas{width:100%;height:100%;display:block}#calibRing{background:conic-gradient(var(--cyan) calc(var(--p,0) * 1turn), #ffffff26 0);border-radius:50%;width:64px;height:64px;position:absolute;top:14px;right:14px;-webkit-mask:radial-gradient(circle,#0000 55%,#000 57%);mask:radial-gradient(circle,#0000 55%,#000 57%)}.share input{flex:1;min-width:200px}.code-big{letter-spacing:10px;color:var(--cyan);text-shadow:0 0 24px #7cf7ff80;font-size:56px;font-weight:900}.spinner{border:4px solid #ffffff26;border-top-color:var(--pink);border-radius:50%;width:42px;height:42px;margin:18px auto 0;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.over h2{letter-spacing:-.03em;margin:0;font-size:clamp(44px,9vw,80px);font-style:italic;font-weight:900}.over h2.win{color:#fff;text-shadow:0 0 30px #7cf7ffb3}.over h2.lose{color:var(--pink)}.final{margin:6px 0;font-size:44px;font-weight:900}.stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;display:grid}.stat{border:1px solid var(--line);background:#ffffff0d;border-radius:16px;padding:12px}.stat b{font-size:26px;display:block}.stat span{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-size:12px}.small{color:var(--dim);font-size:13px}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}.scoreboard{gap:4px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.side{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);align-items:center;gap:10px;padding:8px 14px;display:flex}.side.near{border-radius:16px 4px 4px 16px}.side.far{border-radius:4px 16px 16px 4px}.side b{text-align:center;font-variant-numeric:tabular-nums;min-width:44px;font-size:34px;font-weight:900}.side.near b{color:var(--cyan)}.side.far b{color:var(--pink)}.side .name{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;max-width:140px;font-size:13px;font-weight:700;overflow:hidden}.srv{background:0 0;border-radius:50%;width:10px;height:10px}.srv.on{background:#ffcf4a;box-shadow:0 0 10px #ffcf4a}#rally{color:var(--dim);letter-spacing:2px;font-size:14px;font-weight:800;position:absolute;top:80px;left:50%;transform:translate(-50%)}#hint{background:var(--glass);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;transition:opacity .3s;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}#hint:empty{opacity:0}.hud-btns{pointer-events:auto;gap:6px;display:flex;position:absolute;top:14px;right:14px}.hud-btns button{background:var(--glass);padding:7px 11px;font-size:13px}#btnRec.rec{background:#e11d48;border-color:#e11d48;animation:1s infinite pulse}@keyframes pulse{50%{opacity:.6}}#pip{border:1px solid var(--line);transform-origin:0 100%;background:#000;border-radius:14px;width:200px;height:112px;position:absolute;bottom:14px;left:14px}#net-info{color:var(--dim);font-size:12px;font-weight:600;position:absolute;top:18px;left:16px}#callouts{pointer-events:none;z-index:6;position:fixed;inset:0}.callout{text-align:center;white-space:nowrap;text-shadow:0 3px 14px #0009;font-style:italic;font-weight:900;animation:1.3s ease-out forwards pop;position:absolute;transform:translate(-50%,-100%)}.callout .l{letter-spacing:-.02em;font-size:30px}.callout .k{color:var(--cyan);font-size:15px;font-style:normal}.callout.opp .l{color:var(--pink);font-size:20px}.callout.hot .l{color:#ffcf4a;font-size:46px}@keyframes pop{0%{opacity:0;transform:translate(-50%,-60%)scale(.6)}12%{opacity:1;transform:translate(-50%,-100%)scale(1.12)}25%{transform:translate(-50%,-100%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-170%)scale(1)}}#banner{z-index:7;pointer-events:none;text-align:center;opacity:0;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}#banner.show{animation:1.6s ease-out forwards banner}#banner .big{letter-spacing:-.04em;font-size:clamp(44px,9vw,96px);font-style:italic;font-weight:900;line-height:1}#banner .sub{color:var(--dim);margin-top:6px;font-size:20px;font-weight:700}#banner.me .big{color:#fff;text-shadow:0 0 40px #7cf7ffcc}#banner.them .big{color:var(--pink);text-shadow:0 0 40px #ff2d8a99}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(1.4)}15%{opacity:1;transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-55%)}}#vignette{pointer-events:none;z-index:4;transition:box-shadow .25s;position:fixed;inset:0;box-shadow:inset 0 0 200px 60px #7cf7ff00}#vignette.slow{box-shadow:inset 0 0 220px 80px #7cf7ff59}#toast{color:#07091a;opacity:0;z-index:30;pointer-events:none;background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;transition:all .25s;position:fixed;bottom:30px;left:50%;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)}@media (width<=640px){.panel{padding:20px}.modes{grid-template-columns:1fr}.mode{flex-direction:row;justify-content:flex-start;gap:12px;padding:14px}.mode .s{margin-left:auto}.levels{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:1fr}.side b{min-width:32px;font-size:26px}.side .name{max-width:70px}#pip{width:120px;height:68px}#hint{white-space:normal;text-align:center;width:90%;font-size:13px;bottom:92px}.hud-btns{top:64px;right:10px}.scoreboard{top:10px}}.ticker{color:var(--dim);flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:-8px 0 20px;font-size:14px;display:flex}.ticker b{color:var(--ink);font-variant-numeric:tabular-nums}.ticker .live{align-items:center;gap:6px;display:inline-flex}.ticker .live i{background:#3ddc84;border-radius:50%;width:8px;height:8px;animation:2s infinite live;box-shadow:0 0 #3ddc8499}@keyframes live{70%{box-shadow:0 0 0 8px #3ddc8400}to{box-shadow:0 0 #3ddc8400}}.record{color:#ffcf4a;min-height:1.2em;margin:12px 0 0;font-size:15px;font-weight:700}.foot{text-align:center;color:var(--dim);margin:16px 0 0;font-size:13px}.foot a{color:var(--dim)}