:root{--z-hud: 10;--z-fx: 20;--z-cinematic: 30;--z-message: 40;--z-overlay: 50;--z-boot: 60;--z-chrome: 70;--z-crash: 100;--hud-gutter: 30px;--hud-top: 20px;--hud-gap: 6px;--hud-col-gap: 20px;--bar-h: 26px;--bar-font: 20px;--dot: 13px;--round-font: 24px;--ult-w: 260px;--combo-font: 42px;--banner-font: 15px}@media(max-height:720px),(max-width:900px){:root{--hud-gutter: 18px;--hud-top: 10px;--hud-gap: 4px;--hud-col-gap: 12px;--bar-h: 18px;--bar-font: 15px;--dot: 10px;--round-font: 17px;--ult-w: 200px;--combo-font: 30px;--banner-font: 12px}}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0f1a;color:#fff;font:14px Inter,system-ui,Arial,sans-serif}canvas{display:block}#hudTop{position:fixed;top:var(--hud-top);left:var(--hud-gutter);right:var(--hud-gutter);z-index:var(--z-hud);pointer-events:none;display:grid;grid-auto-rows:auto;row-gap:var(--hud-gap);text-shadow:0 2px 8px #000}.hudBars,.hudMeters{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,auto) minmax(0,1fr);column-gap:var(--hud-col-gap)}.hudBars{align-items:center}.hudMeters{align-items:start}.hudSide{display:flex;flex-direction:column;gap:6px;min-width:0}.hudSide.right{align-items:flex-end}.barWrap{display:flex;align-items:center;gap:12px;min-width:0;font-weight:900;font-size:var(--bar-font);font-style:italic;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.barWrap.right{flex-direction:row-reverse}.bar{height:var(--bar-h);flex:1;min-width:0;border:2px solid #fff;background:#120a0ad9;overflow:hidden;position:relative;transform:skew(-14deg)}.barWrap:not(.right) .bar{clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}.barWrap.right .bar{clip-path:polygon(3% 0,100% 0,100% 100%,0 100%)}.fill{height:100%;width:100%;background:linear-gradient(180deg,#bfff47,#16f27e,#00873c);transition:width .12s cubic-bezier(.25,1,.5,1)}.barWrap.right .fill{margin-left:auto}#roundText{justify-self:center;text-align:center;white-space:nowrap;font-size:var(--round-font);font-weight:900;font-style:italic;letter-spacing:2px;background:linear-gradient(180deg,#ff4141,#900);padding:4px 14px;border:2px solid #fff;transform:skew(-14deg)}.roundIndicators{display:flex;gap:10px;width:max-content}.roundDot{width:var(--dot);height:var(--dot);border:2px solid rgba(255,255,255,.35);background:#0009;transform:rotate(45deg);margin:2px 6px;transition:.3s}.roundDot.active{background:#0f6;border-color:#fff;box-shadow:0 0 14px #0f6}#p2Indicators .roundDot.active{background:#f04;border-color:#fff;box-shadow:0 0 14px #f04}#ultWrap{width:min(var(--ult-w),100%)}#ultBar{height:10px;background:#0000008c;border:2px solid rgba(255,255,255,.35);overflow:hidden}#ultFill{height:100%;width:0%;background:linear-gradient(90deg,#7c3aed,#e879f9,#facc15);transition:width .14s linear}#ultLabel{margin-top:4px;font-size:11px;font-weight:900;letter-spacing:2px;color:#ffffff8c}#ultWrap.ready #ultBar{border-color:#facc15;box-shadow:0 0 18px #facc15a6}#ultWrap.ready #ultLabel{color:#facc15;animation:ultPulse .9s infinite}@keyframes ultPulse{50%{opacity:.35}}#levelBanner{text-align:center;font-size:var(--banner-font);font-weight:900;letter-spacing:4px;color:#ffd56a;text-shadow:0 2px 12px rgba(0,0,0,.9)}#levelBanner span{color:#ffffffbf;letter-spacing:2px;font-size:.87em}#hudFx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:4px}#comboCounter{min-height:calc(var(--combo-font) + 22px);opacity:0;font-size:var(--combo-font);font-weight:900;font-style:italic;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.9),0 0 30px rgba(255,190,60,.5);line-height:1}#comboCounter span{display:block;font-size:.33em;letter-spacing:3px;color:#ffd56a;font-style:normal;margin-top:4px}#comboCounter.show{animation:comboPop .9s ease-out}@keyframes comboPop{0%{opacity:0;transform:scale(.6) translate(-14px)}18%{opacity:1;transform:scale(1.12) translate(0)}32%{transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(.96)}}#moveName{min-height:20px;opacity:0;font-size:16px;font-weight:900;letter-spacing:3px;color:#ffd56a;text-shadow:0 2px 10px rgba(0,0,0,.9)}#moveName.show{animation:moveNameFlash .8s ease-out}@keyframes moveNameFlash{0%{opacity:0;transform:translate(-10px)}20%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}#centerStage{position:fixed;inset:0;z-index:var(--z-message);pointer-events:none;display:grid;place-items:center}.centerMsg{grid-area:1 / 1;display:none;text-align:center;line-height:1.15}.centerMsg.on{display:block}#matchWinnerText{font-size:clamp(30px,7vmin,72px);font-weight:900;font-style:italic;color:#ffd93d;text-shadow:0 4px 0 #000,0 8px 25px rgba(0,0,0,.9);transform:skew(-10deg)}#countdownText{font-size:clamp(56px,16vmin,160px);font-weight:900;font-style:italic;transform:skew(-12deg);background:linear-gradient(180deg,#fff 20%,#ffea6c,#ff9000);-webkit-background-clip:text;background-clip:text;color:transparent}#ultBanner{font-size:clamp(28px,6vmin,74px);font-weight:900;font-style:italic;letter-spacing:2px;background:linear-gradient(180deg,#fff 20%,#facc15,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(0,0,0,.9))}#ultBanner.on{animation:ultBannerIn 2s ease-out}@keyframes ultBannerIn{0%{opacity:0;transform:scale(1.5) skew(-14deg)}12%{opacity:1;transform:scale(1) skew(-8deg)}70%{opacity:1}to{opacity:0;transform:scale(.98) skew(-8deg)}}#replayBtn{display:none;position:fixed;left:50%;top:62%;transform:translate(-50%,-50%) skew(-12deg);z-index:var(--z-overlay);padding:14px 44px;border:2px solid #fff;background:#fc3;color:#111;font-size:26px;font-weight:900;font-style:italic;cursor:pointer}#replayBtn:hover,#playBtn:hover{filter:brightness(1.08)}#perfOverlay{position:fixed;top:6px;right:8px;z-index:var(--z-chrome);display:none;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9ef0c0;background:#0000008c;padding:4px 8px;pointer-events:none;white-space:pre}#vignette{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;background:radial-gradient(ellipse 78% 78% at center,#0000 42%,#00000029 76%,#0000006b)}.fxLayer{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;opacity:0}#fxHurt{background:radial-gradient(ellipse at center,#f000 35%,#be00008c 78%,#780000d9)}#fxHurt.on{animation:fxHurtPulse .38s ease-out}#fxHurt.heavy{animation:fxHurtPulse .52s ease-out;filter:saturate(1.4)}#fxHurt.blocked{background:radial-gradient(ellipse at center,#78beff00 45%,#50a0ff66 85%,#286edc99);animation:fxHurtPulse .26s ease-out}#fxHurt.ko{background:radial-gradient(ellipse at center,#ff000026,#960000cc 70%,#3c0000f2);animation:fxKO .9s ease-out}@keyframes fxHurtPulse{0%{opacity:0}12%{opacity:1}to{opacity:0}}@keyframes fxKO{0%{opacity:0}15%{opacity:1}70%{opacity:.75}to{opacity:0}}#fxDeal{background:radial-gradient(circle at center,#fff0be8c,#ffbe5038 28%,#ffa02800 60%)}#fxDeal.on{animation:fxDealPulse .2s ease-out}#fxDeal.heavy{animation:fxDealPulse .28s ease-out}#fxDeal.blocked{background:radial-gradient(circle at center,#c8e6ff59,#8cbeff24,#78aaff00 60%);animation:fxDealPulse .2s ease-out}#fxDeal.levelUp{background:radial-gradient(circle at center,#ffe68c73,#ffbe3c33 40%,#ffaa1e00 72%);animation:fxLevelUp .9s ease-out}@keyframes fxDealPulse{0%{opacity:0;transform:scale(1.12)}20%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes fxLevelUp{0%{opacity:0;transform:scale(1.2)}25%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}canvas{--sdir: 1}canvas.screenShake{animation:rockLight .26s cubic-bezier(.2,.8,.3,1)}canvas.screenShakeHard{animation:rockHard .42s cubic-bezier(.2,.8,.3,1)}canvas.screenShakeKO{animation:rockKO .7s cubic-bezier(.2,.8,.3,1)}canvas.screenKick{animation:hitKick .15s ease-out}canvas.screenKickHard{animation:hitKickHard .21s ease-out}@keyframes rockLight{0%{transform:scale(1.03) translate(0) rotate(0)}12%{transform:scale(1.03) translate(calc(var(--sdir) * 16px),-7px) rotate(calc(var(--sdir) * .5deg))}30%{transform:scale(1.03) translate(calc(var(--sdir) * -12px),6px) rotate(calc(var(--sdir) * -.38deg))}50%{transform:scale(1.03) translate(calc(var(--sdir) * 8px),-4px) rotate(calc(var(--sdir) * .24deg))}70%{transform:scale(1.03) translate(calc(var(--sdir) * -5px),3px) rotate(0)}86%{transform:scale(1.02) translate(calc(var(--sdir) * 2px),-1px) rotate(0)}to{transform:scale(1) translate(0) rotate(0)}}@keyframes rockHard{0%{transform:scale(1.05) translate(0) rotate(0)}9%{transform:scale(1.05) translate(calc(var(--sdir) * 30px),-14px) rotate(calc(var(--sdir) * 1deg))}22%{transform:scale(1.05) translate(calc(var(--sdir) * -24px),12px) rotate(calc(var(--sdir) * -.8deg))}38%{transform:scale(1.05) translate(calc(var(--sdir) * 18px),-9px) rotate(calc(var(--sdir) * .6deg))}54%{transform:scale(1.04) translate(calc(var(--sdir) * -12px),6px) rotate(calc(var(--sdir) * -.4deg))}70%{transform:scale(1.04) translate(calc(var(--sdir) * 7px),-4px) rotate(calc(var(--sdir) * .22deg))}86%{transform:scale(1.02) translate(calc(var(--sdir) * -3px),2px) rotate(0)}to{transform:scale(1) translate(0) rotate(0)}}@keyframes rockKO{0%{transform:scale(1.06) translate(0) rotate(0)}8%{transform:scale(1.06) translate(calc(var(--sdir) * 38px),-18px) rotate(calc(var(--sdir) * 1.6deg))}20%{transform:scale(1.06) translate(calc(var(--sdir) * -32px),16px) rotate(calc(var(--sdir) * -1.3deg))}34%{transform:scale(1.06) translate(calc(var(--sdir) * 26px),-13px) rotate(calc(var(--sdir) * 1deg))}48%{transform:scale(1.05) translate(calc(var(--sdir) * -19px),10px) rotate(calc(var(--sdir) * -.7deg))}62%{transform:scale(1.04) translate(calc(var(--sdir) * 13px),-7px) rotate(calc(var(--sdir) * .45deg))}76%{transform:scale(1.03) translate(calc(var(--sdir) * -8px),4px) rotate(0)}90%{transform:scale(1.02) translate(calc(var(--sdir) * 3px),-2px) rotate(0)}to{transform:scale(1) translate(0) rotate(0)}}@keyframes hitKick{0%{transform:scale(1.02) translate(0)}18%{transform:scale(1.02) translate(calc(var(--sdir) * -11px),3px)}40%{transform:scale(1.02) translate(calc(var(--sdir) * 7px),-2px)}64%{transform:scale(1.02) translate(calc(var(--sdir) * -4px),1px)}84%{transform:scale(1.01) translate(calc(var(--sdir) * 2px))}to{transform:scale(1) translate(0)}}@keyframes hitKickHard{0%{transform:scale(1.03) translate(0)}14%{transform:scale(1.03) translate(calc(var(--sdir) * -19px),6px)}34%{transform:scale(1.03) translate(calc(var(--sdir) * 13px),-4px)}56%{transform:scale(1.03) translate(calc(var(--sdir) * -8px),3px)}76%{transform:scale(1.02) translate(calc(var(--sdir) * 4px),-1px)}to{transform:scale(1) translate(0)}}@media(prefers-reduced-motion:reduce){canvas.screenShake,canvas.screenShakeHard,canvas.screenShakeKO,canvas.screenKick,canvas.screenKickHard{animation:none}}#walletBar{position:fixed;bottom:14px;right:16px;z-index:var(--z-chrome);display:flex;align-items:center;gap:8px;font-size:12px}#qualityBar{position:fixed;bottom:14px;left:16px;z-index:var(--z-chrome);display:flex;align-items:center;gap:8px;font-size:12px}#qualityBar span{color:#ffffff8c;font-weight:800;letter-spacing:1px;text-transform:uppercase}#qualityBtn{padding:7px 14px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer;transform:skew(-12deg);transition:.2s;min-width:74px}#qualityBtn:hover{background:#fff3}body.q-high #qualityBtn{border-color:#ffd56a80;color:#ffd56a}body.q-low #qualityBtn{border-color:#ffffff26;color:#ffffffa6}#musicBtn{padding:7px 14px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer;transform:skew(-12deg);transition:.2s;min-width:52px}#musicBtn:hover{background:#fff3}body.music-off #musicBtn{border-color:#ffffff26;color:#ffffff73}body.cinematic #qualityBar{opacity:0;transition:opacity .2s ease}#walletDot{width:8px;height:8px;border-radius:50%;background:#6b7280;box-shadow:0 0 8px #0009}#walletBar.connected #walletDot{background:#22c55e;box-shadow:0 0 10px #22c55ecc}#walletBar.connecting #walletDot{background:#eab308;animation:walletBlink .8s infinite}@keyframes walletBlink{50%{opacity:.25}}#walletLabel{color:#ffffffd9;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums}#walletBtn{padding:7px 14px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-weight:800;font-size:12px;letter-spacing:1px;cursor:pointer;transform:skew(-12deg);transition:.2s}#walletBtn:hover{background:#fff3}#walletBar.connected #walletBtn{border-color:#ffd56a80;color:#ffd56a}#levelPips{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}.levelPip{width:34px;height:6px;background:#ffffff26;border:1px solid rgba(255,255,255,.25)}.levelPip.done{background:#22c55e;border-color:#22c55e}.levelPip.current{background:#ffd56a;border-color:#ffd56a;box-shadow:0 0 12px #ffd56a99}#leaderboard{margin-top:18px;text-align:left}#leaderboard h3{margin:0 0 8px;font-size:14px;letter-spacing:3px;color:#ffd56a}#lbTable{font-size:12px;max-height:190px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.12)}.lbRow{display:grid;grid-template-columns:26px 1fr 52px 38px 48px 46px;gap:6px;padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.06);color:#ffffffd1;font-variant-numeric:tabular-nums}.lbRow.lbHead{color:#fff6;font-size:10px;letter-spacing:1px}.lbRow.me{background:#ffd56a1f;color:#ffd56a}.lbRow span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lbEmpty{padding:14px 4px;color:#ffffff73;font-size:12px;text-transform:none}#letterbox{position:fixed;inset:0;z-index:var(--z-cinematic);pointer-events:none;opacity:0;transition:opacity .22s ease}#letterbox:before,#letterbox:after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height .32s cubic-bezier(.4,0,.2,1)}#letterbox:before{top:0}#letterbox:after{bottom:0}body.cinematic #letterbox{opacity:1}body.cinematic #letterbox:before,body.cinematic #letterbox:after{height:11vh}body.cinematic #hudTop,body.cinematic #help,body.cinematic #walletBar{opacity:0;transition:opacity .2s ease}@media(prefers-reduced-motion:reduce){#comboCounter.show,#ultBanner.on,#moveName.show{animation-duration:1ms}}