:root{--bg:#07021a;--ink:#f4f0ff;--dim:#b4a8d8;--cyan:#25e9ff;--pink:#ff2fa8;--gold:#ffd23f;--red:#ff4d6d;--panel:#160934db;--panel2:#241252;--btn:#2b1660;--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--display:"Bungee", "Arial Black", system-ui, sans-serif;--ui:"Chakra Petch", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--ink);font:600 16px/1.35 var(--ui);overscroll-behavior:none;margin:0}body{-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#root{min-height:100dvh}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}input{font:inherit;-webkit-user-select:text;user-select:text}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{background:var(--btn);min-height:48px;color:var(--ink);letter-spacing:.02em;border:0;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:10px 20px;font-size:16px;font-weight:700;transition:transform .12s,box-shadow .12s,background .2s;display:inline-flex;box-shadow:0 4px #120634,0 10px 24px #00000059}.btn:active{transform:translateY(3px);box-shadow:0 1px #120634,0 4px 12px #0000004d}.btn:disabled{opacity:.55;cursor:default}.btn small{opacity:.85;letter-spacing:0;font-size:14px;font-weight:600}.btn.primary{background:linear-gradient(#ff4fb8,#e0198a);box-shadow:0 4px #7a0848,0 10px 30px #ff2fa873}.btn.primary:active{box-shadow:0 1px #7a0848,0 4px 16px #ff2fa866}.btn.big{min-height:60px;font-family:var(--display);letter-spacing:.04em;width:100%;font-size:20px;font-weight:400}.btn.big small{font-family:var(--ui);font-size:14px}.btn.ghost{box-shadow:none;color:var(--dim);background:0 0}.btn.ghost:active{color:var(--ink);transform:none}.btn:focus-visible,.pill:focus-visible,.tile:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.pills{background:#0a031ebf;border-radius:999px;gap:8px;width:100%;padding:5px;display:flex}.pill{min-height:46px;color:var(--dim);background:0 0;border:0;border-radius:999px;flex:1;font-size:16px;font-weight:700;transition:background .2s,color .2s}.pill[aria-pressed=true]{color:#04121a;background:linear-gradient(#33f0ff,#0fb6d6);box-shadow:0 0 18px #25e9ff73}.title{font-family:var(--display);text-align:center;flex-direction:column;align-items:center;margin:0;font-weight:400;line-height:.92;display:flex}.title .t1{color:#e9fdff;text-shadow:0 0 6px var(--cyan), 0 0 22px var(--cyan), 0 0 44px #25e9ff99;font-size:clamp(44px,14vw,76px)}.title .t2{color:#fff0f9;text-shadow:0 0 6px var(--pink), 0 0 24px var(--pink), 0 0 50px #ff2fa8a6;margin-top:-2px;font-size:clamp(58px,19vw,104px)}.title span span{animation:.62s cubic-bezier(.2,1.5,.4,1) both drop,6s 1.6s infinite flicker;animation-delay:calc(var(--i) * 60ms), calc(1.6s + var(--i) * .37s);display:inline-block}.title.small .t1{font-size:30px}.title.small .t2{font-size:38px}@keyframes drop{0%{opacity:0;transform:translateY(-70px)rotate(-8deg)}to{opacity:1;transform:none}}@keyframes flicker{0%,96%,to{opacity:1}97%{opacity:.35}98%{opacity:.9}99%{opacity:.5}}.rise{animation:.5s cubic-bezier(.2,.9,.3,1.2) both rise;animation-delay:calc(var(--i,0) * 70ms + .25s)}@keyframes rise{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:none}}.reduced *,.reduced :before,.reduced :after{transition:none!important;animation-duration:1ms!important;animation-iteration-count:1!important}.landing{position:fixed;inset:0;overflow:hidden}.landing .play{opacity:.55;filter:saturate(1.2);pointer-events:none;position:absolute;inset:0}.landing:after{content:"";pointer-events:none;background:radial-gradient(at 50% 40%,#07021a40,#07021ad9 75%);position:absolute;inset:0}.landing-ui{z-index:2;overscroll-behavior:contain;height:100dvh;padding:calc(var(--st) + 64px) calc(var(--sr) + 16px) calc(var(--sb) + 18px) calc(var(--sl) + 16px);flex-direction:column;justify-content:center;align-items:center;gap:clamp(12px,2.6dvh,26px);max-width:520px;margin:0 auto;display:flex;position:relative;overflow-y:auto}.tag{text-align:center;color:var(--dim);margin:10px 0 0;font-size:16px}.modes{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.tile{background:var(--panel);color:var(--ink);border:0;border-radius:18px;flex-direction:column;align-items:center;gap:8px;min-height:128px;padding:14px 6px 12px;transition:transform .18s,background .2s,box-shadow .2s;display:flex;position:relative;box-shadow:0 8px 24px #0006}.tile.on{background:linear-gradient(#3a1a86,#200c50);transform:translateY(-3px);box-shadow:0 0 #0000,0 0 28px #ff2fa859,0 10px 26px #00000073}.tile-label{text-align:center;flex-direction:column;font-size:15px;font-weight:700;line-height:1.15;display:flex}.tile-label small{color:var(--dim);margin-top:3px;font-size:14px;font-weight:500}.tile-art{width:64px;height:50px;position:relative}.tile-art i{display:block;position:absolute}.tile-friend .ph{width:24px;height:42px;box-shadow:inset 0 0 0 3px var(--c);background:#120634;border-radius:6px;top:4px}.tile-friend .ph.a{--c:var(--cyan);left:4px;transform:rotate(-8deg)}.tile-friend .ph.b{--c:var(--pink);right:4px;transform:rotate(8deg)}.tile-friend .ph:after{content:"";background:var(--c);height:4px;box-shadow:0 0 8px var(--c);border-radius:2px;position:absolute;top:8px;left:6px;right:6px}.tile.on .ph.a{animation:1.6s ease-in-out infinite wob}.tile.on .ph.b{animation:1.6s ease-in-out .8s infinite wob}@keyframes wob{50%{transform:translateY(-4px)rotate(0)}}.tile-cpu .chipx{background:linear-gradient(#5a2bd0,#2a0f74);border-radius:10px;inset:2px 8px 0}.tile-cpu .eye{background:var(--gold);width:12px;height:12px;box-shadow:0 0 12px var(--gold);border-radius:50%;top:16px}.tile-cpu .eye.l{left:19px}.tile-cpu .eye.r{right:19px}.tile.on .eye{animation:2.4s infinite blink}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.tile-duo .half{border-radius:5px;height:21px;left:6px;right:6px}.tile-duo .half.t{background:linear-gradient(180deg, var(--pink), #8e0a5c);top:2px}.tile-duo .half.b{background:linear-gradient(0deg, var(--cyan), #0b6f88);bottom:2px}.cta{flex-direction:column;align-items:stretch;gap:12px;width:100%;min-height:158px;display:flex}.join-code{gap:10px;display:flex}.join-code.nudge{animation:.35s nudge}@keyframes nudge{25%{transform:translate(-8px)}75%{transform:translate(8px)}}.code-field{min-width:0;height:52px;color:var(--ink);font-family:var(--display);letter-spacing:.3em;text-align:center;background:#0a031ed9;border:0;border-radius:14px;flex:1;padding:0 16px;font-size:22px}.code-field::placeholder{color:#5b4c8c}.code-field:focus{box-shadow:0 0 0 3px var(--cyan);outline:0}.hint{text-align:center;color:var(--dim);margin:0;font-size:15px}.sheet{z-index:50;padding:calc(var(--st) + 16px) 16px calc(var(--sb) + 16px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:auto;background:#04010eb3;place-items:center;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet-card{background:var(--panel);border-radius:22px;flex-direction:column;gap:10px;width:min(360px,100%);max-height:100%;padding:22px;animation:.3s cubic-bezier(.2,.9,.3,1.2) rise;display:flex;overflow-y:auto;box-shadow:0 20px 60px #0000008c}.sheet-card.wide-card{width:min(460px,100%)}.sheet-card h2{font-family:var(--display);text-align:center;margin:0 0 6px;font-size:26px;font-weight:400}.lead{color:var(--dim);text-align:center;margin:0 0 6px;font-size:15px}.lead.small{font-size:14px}.powers{grid-template-columns:1fr 1fr;gap:10px 12px;margin:0 0 8px;padding:0;list-style:none;display:grid}.powers li{align-items:center;gap:10px;display:flex}.powers b{font-size:15px;display:block}.powers small{color:var(--dim);font-size:14px;font-weight:500;line-height:1.2;display:block}@keyframes fade{0%{opacity:0}}.toast{z-index:60;left:50%;bottom:calc(var(--sb) + 20px);color:#fff;background:#3a0c2c;border-radius:14px;max-width:calc(100% - 32px);padding:12px 18px;font-size:15px;animation:.25s rise;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000080}.lobby{min-height:100dvh;padding:calc(var(--st) + 66px) calc(var(--sr) + 16px) calc(var(--sb) + 24px) calc(var(--sl) + 16px);background:radial-gradient(ellipse at 50% 0%, #2a0f6a 0%, transparent 60%), repeating-linear-gradient(0deg, transparent 0 39px, #7850ff17 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #7850ff17 39px 40px), var(--bg);flex-direction:column;align-items:center;gap:14px;display:flex}.loading{color:var(--dim);margin:auto}.card{background:var(--panel);border-radius:22px;flex-direction:column;gap:14px;width:min(440px,100%);padding:20px;display:flex;box-shadow:0 20px 60px #00000080}.card h2{text-align:center;margin:0}.room-code{color:var(--dim);font-size:16px;font-weight:600}.room-code b{font-family:var(--display);letter-spacing:.2em;color:var(--ink);text-shadow:0 0 18px #25e9ff8c;font-size:44px;font-weight:400;display:block}.note{text-align:center;color:var(--gold);margin:0;font-size:15px}.join{flex-direction:column;gap:8px;display:flex}.join label{color:var(--dim);font-size:14px}.namerow{align-items:center;gap:8px;display:flex}.field{min-width:0;height:52px;color:var(--ink);background:#0a031ee6;border:0;border-radius:14px;flex:1;padding:0 14px;font-size:18px;font-weight:700}.field:focus{box-shadow:0 0 0 3px var(--cyan);outline:0}.btn.dice{width:52px;min-height:52px;color:var(--gold);padding:0}.versus{flex-direction:column;align-items:stretch;gap:8px;display:flex}.vs{font-family:var(--display);color:var(--dim);align-self:center;font-size:16px}.plate{background:linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #12073a), #12073a 70%);border-radius:16px;flex-direction:column;gap:2px;padding:12px 14px;animation:.35s rise;display:flex;position:relative}.plate.empty{background:#12073a}.plate.off{opacity:.6}.plate-wall{gap:3px;margin-bottom:6px;display:flex}.plate-wall i{background:var(--c);height:8px;box-shadow:0 0 8px var(--c);animation:.4s both drop;animation-delay:calc(var(--i) * 40ms);border-radius:2px;flex:1}.plate.empty .plate-wall i{box-shadow:none;background:#2a1a5a;animation:none}.plate-name{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.plate small{color:var(--dim);font-size:14px}.kick{color:#ffb3c2;background:#ff4d6d29;border:0;border-radius:12px;min-height:44px;padding:0 12px;font-size:14px;font-weight:700;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.invite{align-items:center;gap:14px;display:flex}.invite>div{flex-direction:column;flex:1;gap:8px;display:flex}.invite p{color:var(--dim);margin:0;font-size:15px}.qr{border-radius:10px;flex:none;width:112px;height:112px}.oftr-badge{border-radius:50%;flex:none;display:inline-block;overflow:hidden}.oftr-badge svg{width:100%;height:100%;display:block}.match{position:fixed;inset:0;overflow:hidden}.play{touch-action:none;-webkit-user-select:none;user-select:none;background:var(--bg);height:100dvh;position:fixed;inset:0;overflow:hidden}.play .arena{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.play:after{content:"";pointer-events:none;z-index:3;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 3px);position:absolute;inset:0}.hud{pointer-events:none;z-index:5;transition:opacity .3s;position:absolute;inset:0}.replaying .hud,.replaying .menu-btn{opacity:0}.strip{left:max(calc(var(--sl) + 64px), calc(50% - 300px));right:max(calc(var(--sr) + 64px), calc(50% - 300px));background:#0a031eb8;border-radius:14px;align-items:center;gap:10px;min-height:44px;padding:4px 12px;display:flex;position:absolute}.strip.top{top:calc(var(--st) + 10px)}.strip.bottom{bottom:calc(var(--sb) + 10px);left:max(calc(var(--sl) + 12px), calc(50% - 300px));right:max(calc(var(--sr) + 12px), calc(50% - 300px))}.strip.flip{transform:rotate(180deg)}.strip .who{color:var(--c);text-overflow:ellipsis;white-space:nowrap;max-width:45%;text-shadow:0 0 10px color-mix(in srgb, var(--c) 60%, transparent);flex:none;font-size:15px;font-weight:700;overflow:hidden}.bricks{flex:1;align-items:center;gap:6px;min-width:60px;display:flex}.bricks .bar{background:#ffffff1a;border-radius:4px;flex:1;height:8px;overflow:hidden}.bricks .bar i{background:var(--c);height:100%;box-shadow:0 0 10px var(--c);border-radius:4px;transition:width .3s;display:block}.bricks b{font-family:var(--display);text-align:right;min-width:2ch;font-size:18px;font-weight:400}.chips{gap:5px;display:flex;position:absolute;left:6px}.strip.top .chips{top:calc(100% + 6px)}.strip.bottom .chips{bottom:calc(100% + 6px)}.chip{background:color-mix(in srgb, var(--pc) 22%, #0b0420);width:32px;height:32px;box-shadow:0 0 12px color-mix(in srgb, var(--pc) 45%, transparent);border-radius:10px;place-items:center;animation:.3s cubic-bezier(.2,1.6,.4,1) pop;display:grid;position:relative}.chip:after{content:"";background:var(--pc);transform-origin:0;height:3px;transform:scaleX(var(--v));border-radius:2px;transition:transform .25s linear;position:absolute;bottom:2px;left:4px;right:4px}@keyframes pop{0%{transform:scale(.2)}}.wide .strip{flex-direction:column;align-items:stretch;gap:6px;width:96px;padding:10px 8px;top:50%;bottom:auto;transform:translateY(-50%)}.wide .strip.top{left:auto;right:calc(var(--sr) + 8px)}.wide .strip.bottom{right:auto;left:calc(var(--sl) + 8px)}.wide .strip .who{text-align:center;max-width:none;overflow:hidden}.wide .bricks{flex-direction:column-reverse;gap:4px;min-width:0}.wide .bricks .bar{flex:none;width:100%}.wide .bricks b{text-align:center;font-size:26px}.wide .strip .chips{flex-wrap:wrap;justify-content:center;position:static}.menu-btn{z-index:8;top:calc(var(--st) + 10px);right:calc(var(--sr) + 12px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;background:#0e0a1ca8;border:0;border-radius:999px;place-items:center;width:44px;height:44px;transition:opacity .3s;display:grid;position:absolute;box-shadow:0 8px 24px #00000059}.intro{z-index:6;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.vs-card{background:#07021ab3;border-radius:18px;flex-direction:column;align-items:center;gap:2px;padding:12px 22px;animation:.4s rise;display:flex}.vs-name{font-family:var(--display);text-shadow:0 0 18px;font-size:24px}.vs-x{color:var(--dim);font-size:15px}.count{font-family:var(--display);color:#fff;text-shadow:0 0 30px var(--pink), 0 0 60px var(--cyan);font-size:120px;line-height:1;animation:.9s cubic-bezier(.2,1.4,.4,1) both count}@keyframes count{0%{opacity:0;transform:scale(2.4)}30%{opacity:1;transform:scale(1)}85%{opacity:1}to{opacity:0;transform:scale(.8)}}.intro-tip{color:var(--dim);background:#07021ab3;border-radius:12px;margin:0;padding:8px 14px;font-size:15px}.banners{z-index:6;pointer-events:none;position:absolute;inset:0}.banner{color:var(--bc);white-space:nowrap;box-shadow:0 0 26px color-mix(in srgb, var(--bc) 40%, transparent);background:#07021acc;border-radius:16px;align-items:center;gap:10px;padding:8px 16px;animation:.32s cubic-bezier(.2,1.6,.4,1) both ban;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.banner b{font-family:var(--display);text-shadow:0 0 14px var(--bc);font-size:22px;font-weight:400;display:block}.banner small{color:var(--ink);opacity:.85;font-size:14px;display:block}.banner.at-top{top:30%}.banner.at-bottom{top:70%}.banner.flip{animation-name:banflip;transform:translate(-50%,-50%)rotate(180deg)}.banner.big{box-shadow:none;background:0 0;padding:6px 22px;top:50%}.banner.big b{color:#fff;text-shadow:0 0 12px var(--bc), 0 0 40px var(--bc), 0 0 80px var(--bc);font-size:clamp(34px,11vw,64px)}@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%)scale(2)}}@keyframes banflip{0%{opacity:0;transform:translate(-50%,-50%)rotate(180deg)scale(2)}}.wide .banner.at-top{top:50%;left:72%}.wide .banner.at-bottom{top:50%;left:28%}.replay-tag{z-index:7;left:50%;top:calc(var(--st) + 14%);pointer-events:none;flex-direction:column;align-items:center;animation:.3s fade;display:flex;position:absolute;transform:translate(-50%)}.replay-tag b{font-family:var(--display);letter-spacing:.3em;color:var(--red);font-size:26px;font-weight:400;animation:1.2s infinite flicker}.replay-tag small{color:var(--dim);font-size:14px}.result{z-index:20;padding:calc(var(--st) + 60px) 16px calc(var(--sb) + 16px);touch-action:auto;background:#04010e9e;place-items:center;animation:.4s fade;display:grid;position:absolute;inset:0;overflow-y:auto}.result-card{background:var(--panel);width:min(380px,100%);box-shadow:0 0 60px color-mix(in srgb, var(--wc) 35%, transparent), 0 30px 80px #0009;border-radius:24px;flex-direction:column;align-items:center;gap:10px;padding:24px 20px 20px;animation:.45s cubic-bezier(.2,1.3,.3,1) rise;display:flex}.kicker{color:var(--dim);margin:0;font-size:14px}.result-title{font-family:var(--display);text-align:center;color:#fff;text-shadow:0 0 14px var(--wc), 0 0 44px var(--wc);margin:0;font-size:clamp(40px,12vw,58px);font-weight:400;line-height:1;animation:.6s cubic-bezier(.2,1.5,.4,1) .15s both drop}.result-sub{color:var(--dim);text-align:center;margin:0;font-size:15px}.stats{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:6px 0;display:grid}.stats div{background:#0a031eb3;border-radius:14px;flex-direction:column;align-items:center;padding:10px 4px;display:flex}.stats dt{color:var(--dim);text-align:center;font-size:14px}.stats dd{font-family:var(--display);margin:2px 0 0;font-size:20px}.result-actions{flex-direction:column;gap:8px;width:100%;display:flex}.watching{z-index:9;left:50%;bottom:calc(var(--sb) + 70px);background:#07021acc;border-radius:12px;margin:0;padding:8px 14px;font-size:14px;position:fixed;transform:translate(-50%)}.icon{flex:none;display:block}.back-slot{display:inline-flex}@media (height<=700px){.tile{min-height:112px;padding:10px 4px}.tile-art{height:42px;transform:scale(.85)}.landing-ui{padding-top:calc(var(--st) + 58px);gap:10px}.title .t1{font-size:clamp(38px,12vw,60px)}.title .t2{font-size:clamp(48px,15vw,78px)}.cta{min-height:140px}}@media (orientation:landscape) and (height<=500px){.landing-ui{max-width:860px;padding-top:calc(var(--st) + 14px);grid-template-rows:auto auto;grid-template-columns:1fr 1fr;align-content:center;column-gap:24px;display:grid}.landing-ui header{grid-row:1/span 2;align-self:center}.title .t1{font-size:46px}.title .t2{font-size:60px}.tile{min-height:96px;padding:8px 4px}.tile-art{height:38px;transform:scale(.75)}.cta{gap:8px;min-height:0}.btn.big{min-height:54px}.count{font-size:90px}.lobby{padding-top:calc(var(--st) + 14px)}.lobby>.title{display:none}.lobby-card{columns:2;column-gap:22px;width:min(820px,100%);padding-left:76px;display:block}.lobby-card>*{break-inside:avoid;margin-bottom:12px}.lobby-card>.btn{width:100%}.room-code b{font-size:34px}.result{padding-top:calc(var(--st) + 10px)}.result-card{gap:6px;width:min(560px,100%);padding:14px 18px}.result-title{font-size:40px}.result-sub{display:none}.stats{margin:0}.stats div{padding:6px 4px}.result-actions{flex-direction:row}.result-actions .btn{flex:1}}