:root{--bg: #171140;--bg-2: #0f0b2e;--panel: #3a78d8;--panel-2: #2f63bd;--panel-border: #8fc6ff;--surface: #221a52;--surface-border: #4b3aa0;--text: #ffffff;--muted: #c3d4ff;--accent: #7c5cff;--accent2: #29d0ff;--danger: #ff5a5a;--gold: #ffcf3f;--radius: 22px;--font: "Baloo 2", "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-weight:600;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font-family:inherit;cursor:pointer}.app{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px;overflow-x:hidden;overflow-y:auto}.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(143,198,255,.06) 2px,transparent 2px),linear-gradient(90deg,rgba(143,198,255,.06) 2px,transparent 2px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 30%,black,transparent 80%);mask-image:radial-gradient(circle at 50% 30%,black,transparent 80%);z-index:0}.bg-glow{position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(40% 40% at 18% 12%,rgba(124,92,255,.35),transparent 70%),radial-gradient(40% 40% at 85% 18%,rgba(41,208,255,.25),transparent 70%),radial-gradient(55% 55% at 60% 100%,rgba(255,82,176,.22),transparent 70%);filter:blur(30px);z-index:0;animation:drift 18s ease-in-out infinite alternate}@keyframes drift{to{transform:translate3d(0,-3%,0) scale(1.05)}}.footer{position:relative;z-index:1;margin-top:auto;padding-top:18px;color:var(--muted);font-size:13px;letter-spacing:.06em;opacity:.7}.play-btn,.ghost-btn,.btn{--btn: #2aa7ff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:3px solid color-mix(in srgb,var(--btn) 42%,white);border-radius:999px;padding:14px 24px;font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.28);background:linear-gradient(180deg,#ffffff80,#fff0 44%),linear-gradient(180deg,color-mix(in srgb,var(--btn) 78%,white) 0%,var(--btn) 48%,color-mix(in srgb,var(--btn) 72%,black) 100%);box-shadow:0 6px color-mix(in srgb,var(--btn) 58%,black),0 10px 16px #0006,inset 0 2px 1px #ffffff8c;transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}.play-btn:hover:not(:disabled),.ghost-btn:hover:not(:disabled),.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.play-btn:active:not(:disabled),.ghost-btn:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px color-mix(in srgb,var(--btn) 58%,black),0 4px 8px #00000059,inset 0 2px 1px #ffffff80}.play-btn:disabled,.ghost-btn:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7)}.play-btn{--btn: #2aa7ff;width:100%;margin-top:18px;font-size:19px}.ghost-btn{--btn: #7b6cf0}.ghost-btn.full{width:100%;margin-top:10px}.btn-blue{--btn: #2aa7ff}.btn-green{--btn: #3fbf57}.btn-red{--btn: #ff5a5a}.btn-pink{--btn: #ff52b0}.btn-purple{--btn: #8b5cf6}.btn-yellow{--btn: #ffb22e;color:#5a3d00;text-shadow:0 1px 0 rgba(255,255,255,.45)}.menu{position:relative;z-index:1;width:100%;max-width:1000px;margin:0 auto}.brand{text-align:center;margin:18px 0 30px}.title{font-size:clamp(40px,8vw,78px);font-weight:800;letter-spacing:.01em;margin:0;line-height:1;color:#ffe14d;-webkit-text-stroke:4px #241159;paint-order:stroke fill;text-shadow:0 7px 0 rgba(0,0,0,.32)}.title-accent{color:#ff52b0;-webkit-text-stroke:4px #241159;paint-order:stroke fill}.tagline{color:var(--muted);margin-top:14px;font-size:16px;font-weight:600}.menu-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}@media(max-width:760px){.menu-grid{grid-template-columns:1fr}}.panel{position:relative;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:4px solid var(--panel-border);border-radius:var(--radius);padding:24px;box-shadow:0 10px #121e468c,0 22px 44px #00000080,inset 0 3px #ffffff59}.field-label{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#eaf2ff;font-weight:700;margin:16px 0 8px}.text-input{width:100%;padding:14px 18px;border-radius:16px;border:3px solid color-mix(in srgb,var(--panel-border) 70%,#1a2b66);background:#0d0a2899;color:#fff;font-family:var(--font);font-weight:700;font-size:17px;outline:none;box-shadow:inset 0 3px 6px #00000059;transition:border-color .15s,box-shadow .15s}.text-input::placeholder{color:#ffffff8c;font-weight:600}.text-input:focus{border-color:var(--gold);box-shadow:inset 0 3px 6px #00000059,0 0 0 3px #ffcf3f59}.mode-cards{display:flex;flex-direction:column;gap:12px}.mode-card{position:relative;text-align:left;border-radius:16px;border:3px solid color-mix(in srgb,var(--mode-color, var(--accent)) 45%,white);background:linear-gradient(180deg,color-mix(in srgb,var(--mode-color, var(--accent)) 26%,var(--surface)),var(--surface));padding:14px 16px;color:var(--text);display:flex;flex-direction:column;gap:4px;box-shadow:0 5px #0c082480,inset 0 2px #ffffff26;transition:transform .1s ease,box-shadow .1s ease,filter .12s ease}.mode-card:hover{transform:translateY(-2px);filter:brightness(1.07)}.mode-card.selected{background:linear-gradient(180deg,color-mix(in srgb,var(--mode-color, var(--accent)) 78%,white),var(--mode-color, var(--accent)));box-shadow:0 0 0 3px #fff,0 6px color-mix(in srgb,var(--mode-color, var(--accent)) 55%,black),0 14px 26px color-mix(in srgb,var(--mode-color, var(--accent)) 45%,transparent)}.mode-classic{--mode-color: #29d0ff}.mode-hyper{--mode-color: #c084fc}.mode-steroids{--mode-color: #ff5a7a}.mode-name{font-weight:800;font-size:18px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}.mode-blurb{font-size:13px;color:#ffffffd1;font-weight:600;line-height:1.4}.mode-card:not(.selected) .mode-name{color:color-mix(in srgb,var(--mode-color) 55%,white)}.error{margin-top:14px;color:#fff;background:var(--danger);border:3px solid #ffb0b0;border-radius:14px;padding:10px 14px;font-size:14px;font-weight:700;text-align:center;box-shadow:0 4px #b02a2a}.controls-hint{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.controls-hint span{font-size:12px;font-weight:700;color:#eaf2ff;background:#0d0a2880;border:2px solid rgba(143,198,255,.4);padding:6px 11px;border-radius:999px;box-shadow:inset 0 2px 3px #00000040}.controls-hint .hint-surge{color:#5a3d00;background:linear-gradient(180deg,#ffd166,#ffb22e);border-color:#ffe7a8}.lb-head{display:flex;align-items:center;justify-content:space-between}.lb-head h2{margin:0;font-size:22px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.25)}.lb-mode{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#5a3d00;background:linear-gradient(180deg,#ffd166,#ffb22e);border:2px solid #ffe7a8;padding:4px 12px;border-radius:999px}.muted{color:var(--muted);font-size:14px;font-weight:600}.lb-table{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:12px;font-size:15px}.lb-table th{text-align:left;color:#cfe0ff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px}.lb-table td{padding:10px;font-weight:700;background:#0d0a2859}.lb-table tbody tr td:first-child{border-radius:12px 0 0 12px}.lb-table tbody tr td:last-child{border-radius:0 12px 12px 0}.lb-rank{color:var(--gold);font-weight:800}.match{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}.stage{display:flex;justify-content:center;margin-top:8px}.stage canvas{display:block}.hud{width:100%;max-width:1000px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}.hud-name{font-weight:800;font-size:19px;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.3)}.hud-right{text-align:right}.hud-stats{display:flex;gap:14px;margin-top:8px}.hud-right .hud-stats{justify-content:flex-end}.stat{display:flex;flex-direction:column;background:#0d0a2873;border:2px solid rgba(143,198,255,.3);border-radius:12px;padding:6px 12px;box-shadow:inset 0 2px 3px #00000040}.stat-label{font-size:10px;font-weight:800;letter-spacing:.1em;color:#aebfe8}.stat-value{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.stat-hot{border-color:var(--gold)}.stat-hot .stat-value{color:#ffd166;text-shadow:0 0 12px rgba(255,209,102,.7)}.hud-mode{align-self:center;font-size:13px;font-weight:800;letter-spacing:.16em;color:#5a3d00;padding:7px 16px;border-radius:999px;background:linear-gradient(180deg,#ffd166,#ffb22e);border:3px solid #ffe7a8;box-shadow:0 4px #c98a1e,inset 0 2px 1px #fff9}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#08061a9e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px}.modal{position:relative;width:min(460px,94vw);background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:4px solid var(--panel-border);border-radius:26px;padding:44px 28px 26px;text-align:center;box-shadow:0 12px #0e163899,0 30px 70px #0009,inset 0 3px #ffffff59;animation:pop .25s ease}@keyframes pop{0%{transform:scale(.9);opacity:0}}.modal-title{display:inline-block;margin:-64px 0 16px;padding:10px 30px;font-size:24px;font-weight:800;color:#5a3d00;background:linear-gradient(180deg,#ffe089,#ffc23d);border:4px solid #fff0c2;border-radius:999px;box-shadow:0 6px #c98a1e,0 10px 18px #0006,inset 0 2px 1px #fff9}.vs{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}.vs-player{flex:1;padding:14px;border-radius:16px;border:3px solid rgba(143,198,255,.4);background:#0d0a2873;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 2px 4px #0000004d;transition:border-color .2s,box-shadow .2s,transform .2s}.vs-player.ready{border-color:#5be07a;transform:translateY(-2px);box-shadow:0 0 0 2px #5be07a,0 8px 20px #5be07a59}.vs-name{font-weight:800;font-size:17px}.vs-state{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}.vs-player.ready .vs-state{color:#8bf5a3}.vs-x{font-weight:800;font-size:18px;color:var(--gold)}.share-hint{margin:0 0 14px}.modal-actions{display:flex;gap:12px;margin-top:10px;justify-content:center}.modal-actions .play-btn{margin-top:0}.countdown{font-size:clamp(90px,18vw,190px);font-weight:800;color:#ffe14d;-webkit-text-stroke:6px #241159;paint-order:stroke fill;text-shadow:0 0 60px rgba(124,92,255,.9);animation:countpop 1s ease infinite}@keyframes countpop{0%{transform:scale(.7);opacity:.2}40%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:.9}}.result{margin:0 0 8px;font-size:46px;font-weight:800;letter-spacing:.02em;-webkit-text-stroke:3px #241159;paint-order:stroke fill}.result.win{color:#6bf07f;text-shadow:0 5px 0 rgba(0,0,0,.3)}.result.lose{color:#ff7aa0;text-shadow:0 5px 0 rgba(0,0,0,.3)}.result-sub{color:#eaf2ff;font-weight:600;margin:0 0 20px}.final-stats{display:flex;justify-content:center;gap:14px;margin-bottom:22px}.final-stats>div{display:flex;flex-direction:column;gap:4px;background:#0d0a2873;border:2px solid rgba(143,198,255,.3);border-radius:14px;padding:10px 16px}.mute-btn{position:fixed;top:16px;right:16px;z-index:30;width:52px;height:52px;border-radius:50%;border:4px solid #b9e0ff;background:linear-gradient(180deg,#ffffff73,#fff0 45%),linear-gradient(180deg,#57b6ff,#2c7fe0);font-size:22px;line-height:1;box-shadow:0 5px #1e5aa8,0 9px 14px #0006,inset 0 2px 1px #fff9;transition:transform .08s ease,box-shadow .08s ease}.mute-btn:active{transform:translateY(3px);box-shadow:0 2px #1e5aa8,inset 0 2px 1px #fff9}.fun-fact{margin:18px 0 6px;padding:14px 16px;border-radius:16px;border:3px solid rgba(143,198,255,.4);background:#0d0a2866;text-align:left;box-shadow:inset 0 2px 4px #0000004d}.fun-fact-tag{font-size:11px;font-weight:800;letter-spacing:.16em;color:#5a3d00;background:linear-gradient(180deg,#ffd166,#ffb22e);border:2px solid #ffe7a8;padding:3px 10px;border-radius:999px}.fun-fact-text{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.5;color:#eaf2ff;opacity:0;transition:opacity .4s ease;min-height:2.6em}.fun-fact-text.show{opacity:.95}.spinner{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;border:6px solid rgba(143,198,255,.3);border-top-color:var(--gold);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.banner{position:absolute;top:24%;left:50%;transform:translate(-50%);z-index:20;pointer-events:none;font-size:clamp(38px,6vw,70px);font-weight:800;letter-spacing:.02em;white-space:nowrap;color:#fff;-webkit-text-stroke:4px #241159;paint-order:stroke fill;text-shadow:0 6px 24px rgba(0,0,0,.5);animation:banner-pop 1.4s cubic-bezier(.2,.9,.2,1) forwards}.banner-tetris{color:#ffe14d}.banner-perfect{color:#ff9d4d}.banner-combo,.banner-b2b{color:#ffd166}@keyframes banner-pop{0%{transform:translate(-50%) scale(.4);opacity:0}18%{transform:translate(-50%) scale(1.15);opacity:1}32%{transform:translate(-50%) scale(1)}80%{opacity:1}to{transform:translate(-50%) scale(1) translateY(-16px);opacity:0}}.menu-row{display:flex;gap:10px;margin-top:12px}.menu-row .ghost-btn{flex:1;margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.coins{font-weight:800;font-size:16px;color:#5a3d00;background:linear-gradient(180deg,#ffe089,#ffc23d);border:3px solid #fff0c2;border-radius:999px;padding:5px 14px;font-variant-numeric:tabular-nums;box-shadow:0 4px #c98a1e,inset 0 2px 1px #fff9}.shop-open-btn{padding:9px 16px;border-radius:999px;border:3px solid color-mix(in srgb,#8b5cf6 42%,white);font-family:var(--font);font-weight:800;font-size:15px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.28);background:linear-gradient(180deg,#ffffff73,#fff0 45%),linear-gradient(180deg,#a07bff,#7b4ff0);box-shadow:0 5px #5a35c0,inset 0 2px 1px #ffffff80;transition:transform .08s ease,box-shadow .08s ease}.shop-open-btn:active{transform:translateY(3px);box-shadow:0 2px #5a35c0,inset 0 2px 1px #ffffff80}.shop-modal{width:min(580px,95vw)}.shop-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}.shop-head .modal-title{margin:0}.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}@media(max-width:520px){.skin-grid{grid-template-columns:repeat(2,1fr)}}.skin-card{border:3px solid rgba(143,198,255,.4);border-radius:16px;padding:12px;background:#0d0a2866;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 2px 4px #0000004d}.skin-card.equipped{border-color:#5be07a;box-shadow:0 0 0 2px #5be07a,inset 0 2px 4px #0000004d}.skin-swatches{display:flex;gap:3px;height:24px}.swatch{flex:1;border-radius:5px;box-shadow:inset 0 2px 2px #fff6}.skin-name{font-weight:800;font-size:15px}.skin-card .play-btn,.skin-card .ghost-btn{margin-top:0;padding:9px;font-size:14px}.surge{width:min(560px,92vw);margin:0 auto 10px;text-align:center}.surge-label{font-size:12px;letter-spacing:.16em;font-weight:800;color:#ff9d4d;margin-bottom:6px;transition:color .2s}.surge.ready .surge-label{color:#ffd166;animation:surge-pulse .8s ease-in-out infinite}.surge-track{height:16px;border-radius:999px;background:#0d0a28d9;border:3px solid rgba(255,157,77,.45);overflow:hidden;box-shadow:inset 0 2px 4px #00000073}.surge-fill{height:100%;border-radius:999px;background-image:repeating-linear-gradient(-45deg,#ffffff59 0,#ffffff59 8px,#fff0 8px,#fff0 16px),linear-gradient(90deg,#ff6b4d,#ffd166);box-shadow:inset 0 2px 1px #ffffff80;transition:width .12s linear}.surge.ready .surge-track{border-color:#ffd166;box-shadow:inset 0 2px 4px #00000073,0 0 16px #ffd166b3}.surge.ready .surge-fill{background-image:repeating-linear-gradient(-45deg,#ffffff73 0,#ffffff73 8px,#fff0 8px,#fff0 16px),linear-gradient(90deg,#ffd166,#ff2bd6,#ffd166);background-size:auto,200% auto;animation:surge-flow 1s linear infinite}@keyframes surge-pulse{50%{opacity:.5}}@keyframes surge-flow{to{background-position:0 0,200% center}}.gear-btn{position:fixed;top:16px;right:16px;z-index:30;width:52px;height:52px;border-radius:50%;border:4px solid #ffe7a8;color:#5a3d00;font-size:24px;line-height:1;background:linear-gradient(180deg,#ffffff80,#fff0 45%),linear-gradient(180deg,#ffd166,#ffb22e);box-shadow:0 5px #c98a1e,0 9px 14px #0006,inset 0 2px 1px #fff9;transition:transform .12s ease,box-shadow .08s ease}.gear-btn:hover{transform:rotate(35deg)}.gear-btn:active{transform:translateY(3px);box-shadow:0 2px #c98a1e,inset 0 2px 1px #fff9}.vol-list{display:flex;flex-direction:column;gap:16px;margin:6px 0 18px}.vol-row{display:grid;grid-template-columns:84px 1fr 34px;align-items:center;gap:12px}.vol-label{font-weight:800;font-size:16px;text-align:left;text-shadow:0 2px 0 rgba(0,0,0,.25)}.vol-pct{font-weight:800;font-variant-numeric:tabular-nums;color:#ffe089;text-align:right}.vol-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:16px;border-radius:999px;outline:none;border:3px solid rgba(13,10,40,.6);background:linear-gradient(90deg,#ff8a3d 0%,#ffd166 var(--pct, 50%),rgba(13,10,40,.7) var(--pct, 50%)) no-repeat;box-shadow:inset 0 2px 4px #0006}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 35% 30%,#fff6d0,#ffc23d 60%,#e89a1c);box-shadow:0 3px 6px #00000073,inset 0 2px 1px #ffffffb3;cursor:pointer}.vol-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 35% 30%,#fff6d0,#ffc23d 60%,#e89a1c);box-shadow:0 3px 6px #00000073,inset 0 2px 1px #ffffffb3;cursor:pointer}.stage canvas{touch-action:none}.match.touch{padding-bottom:168px}.touch-controls{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}.tc-left,.tc-right{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}.tc-right{flex-wrap:wrap;justify-content:flex-end;max-width:58%}.tc-btn{pointer-events:auto;width:60px;height:60px;border-radius:16px;border:3px solid color-mix(in srgb,var(--c, #2aa7ff) 42%,white);color:#fff;font-family:var(--font);font-size:24px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.3);background:linear-gradient(180deg,#ffffff73,#fff0 45%),linear-gradient(180deg,color-mix(in srgb,var(--c, #2aa7ff) 78%,white),var(--c, #2aa7ff));box-shadow:0 4px color-mix(in srgb,var(--c, #2aa7ff) 58%,black),inset 0 2px 1px #ffffff80;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.tc-btn:active{transform:translateY(3px);box-shadow:inset 0 2px 1px #ffffff80;filter:brightness(1.1)}.tc-move{--c: #2aa7ff}.tc-rot{--c: #8b5cf6}.tc-drop{--c: #ff5a5a;width:76px}.tc-small{--c: #3fbf57;width:76px;height:48px;font-size:15px}.tc-surge{--c: #ffb22e;color:#5a3d00;text-shadow:0 1px 0 rgba(255,255,255,.4)}