:root{--bg:#0a0416;--bg2:#1a0936;--neon:#21e6ff;--neon2:#ff2d95;--hi:#ff2350;--lo:#2b8bff;--ok:#2bff9b;--warn:#ffc83a;--txt:#eaf6ff;--panel:#16082c8c;--font-disp:"Tektur","Segoe UI",system-ui,sans-serif;--font-body:"JetBrains Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace}*{box-sizing:border-box;margin:0;padding:0}.hidden{display:none!important}html,body,#root{height:100%}body{background:var(--bg);color:var(--txt);font-family:var(--font-body);-webkit-user-select:none;user-select:none;overflow:hidden}#wrap{position:fixed;inset:0;overflow:hidden}#game{z-index:0;width:100%;height:100%;display:block;position:absolute;inset:0}#cam{opacity:0;pointer-events:none;width:2px;height:2px;position:absolute;top:0;left:0}#bgfx{z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 6%,#ff2d9533,#0000 55%),linear-gradient(#05030f 0%,#160a32 40%,#2a0c46 56%,#0a0416 80%);position:fixed;inset:0;overflow:hidden}#bgfx .sun{aspect-ratio:1;background:linear-gradient(#ffe24a 0%,#ff9b3d 34%,#ff3d77 60%,#c01bff 100%);border-radius:50%;width:min(330px,64vw);position:absolute;top:10%;left:50%;transform:translate(-50%);box-shadow:0 0 70px #ff4d778c,0 0 150px #c01bff66}#bgfx .horizon{background:#eafdff;height:2px;position:absolute;top:46%;left:0;right:0;box-shadow:0 0 22px 5px #21e6ffb3,0 0 60px 14px #ff2d9573}#bgfx .grid{transform-origin:top;background-image:repeating-linear-gradient(90deg,#21e6ff73 0 2px,#0000 2px 66px),repeating-linear-gradient(0deg,#ff2d9580 0 2px,#0000 2px 66px);animation:1.8s linear infinite gridflow;position:absolute;inset:46% -60% -14%;transform:perspective(340px)rotateX(64deg);-webkit-mask:linear-gradient(#0000,#000 22%);mask:linear-gradient(#0000,#000 22%)}@keyframes gridflow{0%{background-position:0 0,0 0}to{background-position:0 0,0 66px}}.scan{pointer-events:none;z-index:6;mix-blend-mode:multiply;opacity:.45;background:repeating-linear-gradient(#00000029 0 1px,#0000 1px 3px);animation:6s steps(50,end) infinite flicker;position:absolute;inset:0}@keyframes flicker{0%,to{opacity:.42}48%{opacity:.5}50%{opacity:.34}52%{opacity:.48}}.vig{pointer-events:none;z-index:6;position:absolute;inset:0;box-shadow:inset 0 0 200px #080114e6,inset 0 0 70px #780a5a40}#hud{z-index:10;pointer-events:none;font-weight:700;position:absolute;inset:0}.topbar{justify-content:space-between;align-items:flex-start;gap:12px;padding:0 18px;display:flex;position:absolute;top:14px;left:0;right:0}.pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(#1c0a34b8,#0c041cb8);border:1px solid #21e6ff59;border-radius:14px;flex-direction:column;padding:8px 14px;line-height:1.05;display:flex;box-shadow:0 0 18px #21e6ff2e,inset 0 0 14px #ff2d950f}.pill .lbl{letter-spacing:.2em;opacity:.9;color:var(--neon2);text-shadow:0 0 10px #ff2d9599;margin-bottom:2px;font-size:10px;font-weight:800}.pill .val{font-family:var(--font-disp);font-variant-numeric:tabular-nums;text-shadow:0 0 12px #21e6ff80;font-size:23px;font-weight:700}.lives{align-items:center;gap:5px;display:inline-flex}.heart{shape-rendering:crispedges;width:20px;height:18px;margin-top:4px;display:block}.heart rect{fill:currentColor}.heart.on{color:var(--hi);filter:drop-shadow(0 0 5px #ff2350d9)}.heart.off{color:#8c96b4}.combo{color:var(--warn);text-shadow:0 0 14px #ffc83acc}#stateBox{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(#18082e9e,#0a03189e);border:1px solid #ff2d9559;border-radius:16px;width:min(440px,88vw);padding:10px 14px 12px;position:absolute;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 0 26px #ff2d9533}#stateText{letter-spacing:.06em;text-align:center;margin-bottom:8px;font-size:14px;font-weight:600}#stateText b{font-family:var(--font-disp);font-size:16px}#adaptTag{color:var(--warn);text-align:center;letter-spacing:.08em;opacity:.9;margin-bottom:6px;font-size:11px}.bar{background:linear-gradient(90deg,#ff235080,#14082880 50%,#2b8bff80);border:1px solid #ffffff1f;border-radius:9px;height:16px;position:relative;overflow:hidden}.bar .zoneDn{border-right:2px dashed #ff235099;width:36%;position:absolute;top:0;bottom:0;left:0}.bar .zoneUp{border-left:2px dashed #2b8bff99;width:36%;position:absolute;top:0;bottom:0;right:0}#knob{width:22px;height:22px;box-shadow:0 0 16px var(--neon),0 0 6px #fff;background:#fff;border-radius:50%;transition:background .1s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.barlabels{letter-spacing:.15em;opacity:.75;justify-content:space-between;margin-top:6px;font-size:10px;font-weight:700;display:flex}.screen{z-index:20;text-align:center;background:radial-gradient(at 50% 38%,#0a041880,#05020cdb);justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.card{z-index:2;width:100%;max-width:640px;position:relative}h1{font-family:var(--font-disp);letter-spacing:.06em;margin-bottom:8px;font-size:clamp(34px,7vw,72px);font-weight:900;line-height:.95}h1.logo{font-family:var(--font-disp);letter-spacing:.02em;font-size:clamp(46px,9vw,92px);font-weight:700}h1 .t-red{color:var(--hi);text-shadow:0 0 8px var(--hi),0 0 22px #ff2f5726,0 0 48px #ff2f5726}h1 .t-blue{color:var(--lo);text-shadow:0 0 8px var(--lo),0 0 22px #34c6ff26,0 0 48px #34c6ff26}h1 .t-dot{color:#fff;text-shadow:0 0 14px #fff,0 0 30px var(--neon2)}.over-title{color:#ff2f57;text-shadow:0 0 10px #ff2f57,0 0 30px #ff2f5740,0 0 60px #ff2f5740;font-size:clamp(28px,min(8vw,8vh),60px)}.sub{font-family:var(--font-disp);letter-spacing:.32em;opacity:.9;color:#fff;text-shadow:0 0 14px #21e6ff8c;margin-bottom:22px;font-size:13px;font-weight:600}.rules{grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:0 auto 24px;display:grid}.rule{text-align:left;background:linear-gradient(#1c0a3480,#0a041a80);border:1px solid #21e6ff38;border-radius:16px;padding:16px 14px;box-shadow:inset 0 0 20px #ff2d950d}.rule.hi{border-color:#ff23506b;box-shadow:0 0 22px #ff23501f}.rule.lo{border-color:#2b8bff6b;box-shadow:0 0 22px #2b8bff1f}.rule .obIcon{width:64px;height:64px;margin:0 0 4px -8px;display:block;overflow:visible}.rule .obIcon polygon{fill:currentColor}.rule .obIcon .hole{fill:#0a0416}.rule.hi .obIcon{color:var(--hi);filter:drop-shadow(0 0 9px #ff2350d9)}.rule.lo .obIcon{color:var(--lo);filter:drop-shadow(0 0 9px #2b8bffd9)}.rule h3{font-family:var(--font-disp);letter-spacing:.02em;text-transform:uppercase;margin-bottom:5px;font-size:14px;font-weight:700}.rule.hi h3{color:var(--hi);text-shadow:0 0 12px #ff235099}.rule.lo h3{color:var(--lo);text-shadow:0 0 12px #2b8bff99}.rule p{opacity:.86;font-size:13.5px;font-weight:500;line-height:1.4}.btn{pointer-events:auto;cursor:pointer;font-family:var(--font-disp);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#ff2d95,#b026ff 50%,#21e6ff);border:none;border-radius:13px;padding:15px 28px;font-size:15px;font-weight:700;transition:transform 80ms,filter .15s,box-shadow .15s;box-shadow:0 0 24px #ff2d9580,0 0 42px #21e6ff38}.btn:hover{filter:brightness(1.12);box-shadow:0 0 30px #ff2d95b3,0 0 56px #21e6ff66}.btn:active{transform:scale(.97)}.btn.ghost{color:var(--neon);text-shadow:0 0 10px #21e6ff80;background:#0a041a66;border:1px solid #21e6ff80;padding:12px 20px;font-size:13px;box-shadow:0 0 16px #21e6ff33}.btn.ghost:hover{background:#21e6ff1a;box-shadow:0 0 24px #21e6ff66}.btnrow{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;display:flex}.note{opacity:.62;margin-top:18px;font-size:12px;font-weight:500;line-height:1.5}.err{color:var(--hi);text-shadow:0 0 12px #ff235099;font-weight:700}#screen-onboard{flex-direction:column;justify-content:safe center;align-items:center;overflow-y:auto}#screen-onboard .card{margin:0}.ob-dots{justify-content:center;gap:9px;margin-bottom:22px;display:flex}.ob-dot{cursor:pointer;pointer-events:auto;background:#ffffff38;border:none;border-radius:50%;width:9px;height:9px;padding:0;transition:width .25s,background .25s,box-shadow .25s}.ob-dot.on{background:linear-gradient(90deg,var(--neon),var(--neon2));width:26px;box-shadow:0 0 12px var(--neon);border-radius:6px}.ob-step{animation:.3s both obIn}@keyframes obIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.ob-h{background:linear-gradient(90deg,var(--neon),var(--neon2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:.1em 0 .5em;font-size:clamp(28px,6.5vw,48px);line-height:1}.ob-frame{aspect-ratio:4/3;background:#ffffff08;border:2px solid #19f0d073;border-radius:18px;justify-content:center;align-items:center;max-width:300px;margin:0 auto 18px;display:flex;position:relative;box-shadow:inset 0 0 36px #19f0d029}.ob-frame .ob-body{filter:drop-shadow(0 0 12px #7a5cff99);font-size:clamp(46px,16vw,74px)}.ob-frame .ob-phone{font-size:28px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.ob-tick{border:2px solid var(--neon);opacity:.9;width:18px;height:18px;position:absolute}.ob-tick.tl{border-bottom:0;border-right:0;border-radius:6px 0 0;top:8px;left:8px}.ob-tick.tr{border-bottom:0;border-left:0;border-radius:0 6px 0 0;top:8px;right:8px}.ob-tick.bl{border-top:0;border-right:0;border-radius:0 0 0 6px;bottom:8px;left:8px}.ob-tick.br{border-top:0;border-left:0;border-radius:0 0 6px;bottom:8px;right:8px}.ob-rules{margin-bottom:14px}.ob-rules .rule{padding-bottom:44px;position:relative}.ob-chip{letter-spacing:.08em;background:#ffffff0f;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;position:absolute;bottom:12px;left:14px}.ob-chip.hi{color:var(--hi);box-shadow:inset 0 0 0 1px #ff3b6b80}.ob-chip.lo{color:var(--lo);box-shadow:inset 0 0 0 1px #36b6ff80}@property --obDeg{syntax:"<angle>";inherits:false;initial-value:0deg}.ob-ring{aspect-ratio:1;background:conic-gradient(var(--neon) var(--obDeg,260deg),#ffffff14 0);border-radius:50%;justify-content:center;align-items:center;width:clamp(130px,34vw,168px);margin:0 auto 18px;animation:2.4s ease-in-out infinite obFill;display:flex}@keyframes obFill{0%{--obDeg:0deg}60%{--obDeg:360deg}to{--obDeg:360deg}}.ob-ring-in{aspect-ratio:1;background:#05060eeb;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:78%;font-size:clamp(34px,9vw,46px);line-height:1;display:flex}.ob-ring-in small{letter-spacing:.22em;opacity:.75;margin-top:4px;font-size:11px;font-weight:800}@media (prefers-reduced-motion:reduce){.ob-step{animation:none}.ob-ring{--obDeg:300deg;animation:none}}#flashMsg{z-index:9;font-family:var(--font-disp);letter-spacing:.04em;opacity:0;pointer-events:none;text-shadow:0 0 18px,0 0 44px #00000080;font-size:clamp(40px,9vw,84px);font-weight:900;position:absolute;top:18%;left:50%;transform:translate(-50%)}#arm{z-index:15;cursor:pointer;background:radial-gradient(#08021652,#080216a3);flex-direction:column;justify-content:center;align-items:center;gap:20px;display:none;position:absolute;inset:0}.armTitle{font-family:var(--font-disp);letter-spacing:.05em;color:var(--neon);text-align:center;text-shadow:0 0 18px #21e6ff99;padding:0 16px;font-size:clamp(18px,4vw,28px);font-weight:700}.armRing{aspect-ratio:1;background:conic-gradient(var(--neon) 0deg, #ffffff14 0);border-radius:50%;justify-content:center;align-items:center;width:clamp(150px,40vw,210px);display:flex;box-shadow:0 0 40px #21e6ff66}.armInner{aspect-ratio:1;background:#0a0318eb;border-radius:50%;justify-content:center;align-items:center;width:78%;display:flex}.armInner span{font-family:var(--font-disp);color:var(--neon);text-shadow:0 0 26px var(--neon),0 0 60px var(--neon2);font-size:clamp(54px,14vw,92px);font-weight:900;line-height:1}.replayProg{max-width:460px;margin:10px auto 0}.rpText{letter-spacing:.02em;text-align:center;color:var(--neon);text-shadow:0 0 12px #21e6ff80;margin-bottom:8px;font-size:14px;font-weight:700}.rpBar{background:#ffffff14;border:1px solid #21e6ff33;border-radius:7px;height:12px;overflow:hidden}.rpFill{background:linear-gradient(90deg,var(--neon2),var(--neon));width:0;height:100%;transition:width 80ms linear;box-shadow:0 0 14px #21e6ff99}.stats{flex-wrap:wrap;justify-content:center;gap:26px;margin:18px 0 26px;display:flex}.stat .n{font-family:var(--font-disp);text-shadow:0 0 16px #21e6ff66;font-size:38px;font-weight:900}.stat .l{letter-spacing:.2em;opacity:.65;font-size:11px;font-weight:700}.best{color:var(--warn);text-shadow:0 0 14px #ffc83a99}.roomBanner{opacity:.96;background:linear-gradient(#b026ff29,#ff2d951a);border:1px solid #b026ff80;border-radius:14px;max-width:460px;margin:14px auto 0;padding:12px 14px;font-size:13px;font-weight:500;box-shadow:0 0 22px #b026ff33}.roomBanner b{color:var(--neon);letter-spacing:.08em;text-shadow:0 0 10px #21e6ff99}.roomLinkRow{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:flex}.btn.sm{border-radius:11px;padding:9px 16px;font-size:12px}.lb{text-align:left;max-width:460px;margin:8px auto 18px}.lbTabs{justify-content:center;gap:8px;margin-bottom:10px;display:flex}.lbTab{pointer-events:auto;cursor:pointer;color:var(--txt);letter-spacing:.02em;background:#0a041a80;border:1px solid #21e6ff40;border-radius:11px;padding:8px 14px;font-size:13px;font-weight:700}.lbTab.on{background:linear-gradient(90deg,var(--neon2),var(--neon));color:#0a0416;border-color:#0000;box-shadow:0 0 18px #ff2d9566}.lbName{justify-content:center;gap:8px;margin-bottom:10px;display:flex}.lbName input{color:var(--txt);background:#0a041a99;border:1px solid #21e6ff4d;border-radius:11px;outline:none;width:220px;padding:10px 12px;font-size:15px;font-weight:600}.lbName input:focus{border-color:var(--neon);box-shadow:0 0 16px #21e6ff59}.lbList{background:#0a041a66;border:1px solid #21e6ff26;border-radius:12px;max-height:min(264px,38vh);list-style:none;overflow:auto}.lbList li{border-bottom:1px solid #ffffff0f;align-items:center;gap:10px;padding:9px 14px;font-size:15px;display:flex}.lbList li:last-child{border-bottom:none}.lbList .rk{opacity:.85;font-variant-numeric:tabular-nums;width:46px;font-weight:800}.lbList .nm{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:700;overflow:hidden}.lbList .sc{font-family:var(--font-disp);color:var(--warn);font-variant-numeric:tabular-nums;font-weight:700}.lbList li.me{background:#21e6ff24;outline:1px solid #21e6ff80}.lbYou{background:#21e6ff24;border-radius:12px;outline:1px solid #21e6ff80;align-items:center;gap:10px;margin-top:8px;padding:10px 14px;font-size:15px;font-weight:800;display:flex}.lbYou:empty{display:none}.lbYou .rk{font-variant-numeric:tabular-nums;width:46px}.lbYou .nm{flex:1}.lbYou .sc{color:var(--warn)}.lbStatus{opacity:.65;text-align:center;min-height:16px;margin-top:8px;font-size:12px;font-weight:600}#toast{z-index:40;opacity:0;pointer-events:none;background:#0e0420f2;border:1px solid #21e6ff66;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;bottom:30px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 0 24px #21e6ff4d}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}#screen-over{flex-direction:column;justify-content:safe center;align-items:center;overflow-y:auto}#screen-over .card{margin:0}.shareCard{background:linear-gradient(#b026ff24,#ff2d9514);border:1px solid #b026ff80;border-radius:18px;max-width:460px;margin:4px auto 14px;padding:16px;box-shadow:0 0 26px #b026ff2e}.shareCard h3{text-align:center;margin-bottom:2px;font-size:16px;font-weight:700}.shareClip{aspect-ratio:9/16;background:#0a0416;border:1px solid #21e6ff33;border-radius:12px;max-height:34vh;margin:12px auto;display:block}.clipWait{opacity:.75;text-align:center;margin:16px 0;font-size:13px}.clipWait .spin{animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.shareBtns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;display:flex}.netLabel{opacity:.65;text-align:center;letter-spacing:.04em;margin-top:14px;font-size:11px}.netRow{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.netRow a{letter-spacing:.04em;min-width:46px;height:40px;color:var(--txt);cursor:pointer;background:#0a041a80;border:1px solid #21e6ff40;border-radius:11px;justify-content:center;align-items:center;padding:0 12px;font-size:13px;font-weight:700;text-decoration:none;display:flex}.netRow a:hover{background:#21e6ff1f;box-shadow:0 0 16px #21e6ff4d}@media (width<=520px){.rules{grid-template-columns:1fr}}.overGrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"stats""clip""board""replay""btns";display:grid}.overGrid>*{min-width:0}.overGrid>.stats{grid-area:stats}.overGrid>.shareCard{grid-area:clip}.overGrid>.lb{grid-area:board}.overGrid>.replayProg{grid-area:replay}.overGrid>.btnrow{grid-area:btns}@media (width>=880px){.overCard{max-width:980px}.overGrid.has-clip{text-align:left;grid-template-columns:minmax(0,1fr) clamp(260px,30vw,360px);grid-template-areas:"stats clip""board clip""replay clip""btns clip";align-items:start;column-gap:26px}.overGrid.has-clip>.stats{justify-content:flex-start}.overGrid.has-clip>.lb{max-width:none;margin-left:0;margin-right:0}.overGrid.has-clip>.btnrow{justify-content:flex-start}.overGrid.has-clip>.shareCard{align-self:start;width:100%;max-width:none;margin-top:0}}@media (height<=760px){.screen{padding:16px}.stats{gap:20px;margin:8px 0 12px}.stat .n{font-size:30px}.shareCard{padding:12px}.shareClip{max-height:26vh;margin:8px auto}.shareCard h3{font-size:14px}.netLabel{margin-top:8px}.netRow{margin-top:6px}.lb{margin:6px auto 10px}.replayProg{margin-top:6px}.rpText{margin-bottom:5px}.btnrow{margin-top:4px}}@media (height<=600px){.over-title{margin-bottom:2px}.stats{margin:4px 0 8px}.stat .n{font-size:24px}.shareClip{max-height:22vh}.btn{padding:11px 20px;font-size:13px}.btn.ghost{padding:9px 16px}}