*{box-sizing:border-box;margin:0;padding:0}html,body{background:#000;height:100%;font-family:Nunito,sans-serif;overflow:hidden}#wrap{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#stage{transform-origin:50%;background:#000;flex:none;width:1080px;height:1920px;position:relative;overflow:hidden}.half{transition:width .45s cubic-bezier(.2,.9,.3,1.2);position:absolute;top:0;bottom:0;overflow:hidden}#hG{background:radial-gradient(at 70% 55%,#ff8fd8 0%,#e0508f 40%,#7a1f45 100%);left:0}#hB{background:radial-gradient(at 30% 55%,#5fc8ff 0%,#1d6fe0 40%,#0b2a7a 100%);right:0}.crowd{width:1080px;height:900px;position:absolute;bottom:380px}#hG .crowd{fill:#4a0f2c;opacity:.85;left:0}#hB .crowd{fill:#051446;opacity:.9;right:0}.floor{height:470px;position:absolute;bottom:0;left:0;right:0}#hG .floor{background:linear-gradient(#7a1f45,#3a0a20)}#hB .floor{background:linear-gradient(#0b2a7a,#04113a)}#divider{z-index:3;pointer-events:none;width:70px;margin-left:-35px;transition:left .45s cubic-bezier(.2,.9,.3,1.2);position:absolute;top:0;bottom:0}#divider svg{filter:drop-shadow(0 0 8px #fff)drop-shadow(0 0 22px #9fe8ff);width:100%;height:100%}.spot{filter:blur(20px);z-index:2;border-radius:50%;width:620px;height:160px;transition:left .45s;position:absolute;bottom:400px}#spotG{background:#ff78d28c}#spotB{background:#5ad2ff8c}#arena{z-index:5;pointer-events:none;width:1080px;height:1920px;position:absolute;top:0;left:0}#ballGlow{z-index:4;pointer-events:none;background:radial-gradient(circle,#fff6a8 0%,#fc2 30%,#ffa00000 70%);border-radius:50%;width:150px;height:150px;margin:-75px 0 0 -75px;animation:.6s infinite alternate pulse;position:absolute}@keyframes pulse{to{opacity:.75;transform:scale(1.25)}}#scores{z-index:20;justify-content:space-between;align-items:center;height:70px;display:flex;position:absolute;top:180px;left:30px;right:30px}.scoreTag{color:#fff;align-items:center;height:62px;font-family:Lilita One,sans-serif;display:flex}.scoreTag .n{background:#111;border:4px solid #fff;border-radius:6px;justify-content:center;align-items:center;min-width:66px;height:62px;font-size:40px;display:flex}.scoreTag .lbl{letter-spacing:1px;border:4px solid #fff;align-items:center;height:56px;padding:0 24px;font-size:34px;display:flex}#sG .lbl{background:linear-gradient(#ff4f8d,#e2245a);border-left:none;border-radius:0 8px 8px 0}#sB .lbl{background:linear-gradient(#36a3ff,#1468e0);border-right:none;border-radius:8px 0 0 8px}#vs{color:#fff;text-shadow:0 0 18px #fc2,0 4px #000;letter-spacing:2px;font-family:Lilita One,sans-serif;font-size:58px}#winBanner{z-index:40;color:#fff;white-space:nowrap;text-shadow:0 0 30px #fc2,0 8px #00000080;-webkit-text-stroke:4px #111;font-family:Lilita One,sans-serif;font-size:120px;transition:transform .35s cubic-bezier(.3,1.6,.5,1);position:absolute;top:900px;left:50%;transform:translate(-50%,-50%)scale(0)}#winBanner.show{transform:translate(-50%,-50%)scale(1)}#power{z-index:20;background:#1468e0;border:4px solid #fff;border-radius:26px;height:46px;position:absolute;top:268px;left:30px;right:30px;overflow:hidden;box-shadow:0 4px #00000059}#powerG{background:linear-gradient(90deg,#ff4f8d,#ff8fd8);width:50%;transition:width .35s;position:absolute;top:0;bottom:0;left:0}#power span{color:#fff;text-shadow:0 2px #0006;z-index:2;align-items:center;font-family:Lilita One,sans-serif;font-size:30px;display:flex;position:absolute;top:0;bottom:0}#ptG{left:20px}#ptB{right:20px}#powerKnob{z-index:3;width:54px;height:54px;margin:-27px 0 0 -27px;transition:left .35s;position:absolute;top:50%}#legend{z-index:20;position:absolute;top:332px;left:24px;right:24px}#legTitle{color:#3a1600;letter-spacing:1px;background:linear-gradient(90deg,#fc2,#ff8a00);border:3px solid #fff;border-radius:30px;width:max-content;margin:0 auto 10px;padding:3px 24px;font-family:Lilita One,sans-serif;font-size:28px;animation:1s ease-in-out infinite alternate bob;box-shadow:0 6px #00000059,0 0 30px #ffcc22b3}@keyframes bob{to{transform:translateY(-6px)scale(1.04)}}#cards{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.card{color:#fff;border:3px solid #fff;border-radius:16px;align-items:center;gap:6px;height:78px;padding:0 10px;display:flex;position:relative;overflow:hidden;box-shadow:0 6px #00000059}.card.g{background:linear-gradient(135deg,#ff5fa2,#d81b60)}.card.b{background:linear-gradient(135deg,#3fb4ff,#1453d6)}.card svg{filter:drop-shadow(0 4px 4px #00000059);flex:none;width:56px;height:56px}.card .t1{white-space:nowrap;letter-spacing:.5px;text-shadow:0 3px #0000004d;font-family:Lilita One,sans-serif;font-size:25px;line-height:1}.card .t2{opacity:.95;white-space:nowrap;margin-top:2px;font-size:16px;font-weight:900}.card.super:before{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff8c 50%,#0000 70%);animation:2.2s infinite shine;position:absolute;inset:0;transform:translate(-100%)}.card.super .t1{color:#fff59a}@keyframes shine{60%,to{transform:translate(100%)}}.card.hit{animation:.35s cardHit}@keyframes cardHit{40%{transform:scale(1.08);box-shadow:0 0 40px #fff}}.combos{z-index:20;flex-direction:column;gap:10px;display:flex;position:absolute;top:470px}#comboG{left:24px}#comboB{align-items:flex-end;right:24px}.combos .c{color:#fff;background:#00000073;border-radius:10px;padding:4px 12px;font-size:28px;font-weight:900;animation:.3s pop}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}#fx{z-index:12;pointer-events:none;position:absolute;inset:0}.word{color:#fff;letter-spacing:2px;-webkit-text-stroke:3px #0000004d;white-space:nowrap;font-family:Lilita One,sans-serif;font-size:64px;animation:1.3s ease-out forwards word;position:absolute}@keyframes word{0%{transform:scale(.3) rotate(var(--r));opacity:0}15%{transform:scale(1.15) rotate(var(--r));opacity:1}70%{opacity:.95}to{transform:translateY(-140px) rotate(var(--r));opacity:0}}.fly{width:100px;height:100px;animation:1.1s ease-out forwards fly;position:absolute}@keyframes fly{0%{opacity:0;transform:translate(0)scale(.4)}15%{opacity:1}to{transform:translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--rot));opacity:0}}.boom{background:radial-gradient(circle,#fff 0%,#fff096e6 25%,#ffb40000 65%);border-radius:50%;width:260px;height:260px;margin:-130px 0 0 -130px;animation:.35s ease-out forwards boom;position:absolute}@keyframes boom{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.4)}}.flash{animation:.45s forwards flash;position:absolute;inset:0}@keyframes flash{0%{opacity:.6}to{opacity:0}}.wave{border:10px solid #fff;border-radius:50%;width:200px;height:200px;margin:-100px 0 0 -100px;animation:.7s cubic-bezier(.2,.7,.3,1) forwards wave;position:absolute}@keyframes wave{0%{opacity:.9;transform:scale(.3)}to{opacity:0;border-width:2px;transform:scale(3.2)}}.charge{border-radius:50%;width:420px;height:420px;margin:-210px 0 0 -210px;animation:.45s ease-in forwards charge;position:absolute}@keyframes charge{0%{opacity:0;transform:scale(1.3)}to{opacity:1;transform:scale(.35)}}#notes{z-index:25;flex-direction:column-reverse;gap:14px;width:900px;display:flex;position:absolute;top:1180px;left:30px}.note{align-items:center;height:110px;animation:.35s cubic-bezier(.2,1.2,.4,1) slideIn;display:flex}.note .pill{background:#0006;border-radius:60px;align-items:center;gap:16px;width:400px;height:100px;padding:8px 40px 8px 8px;display:flex}.note .av{color:#fff;border:2px solid #ffffff4d;border-radius:50%;flex:none;justify-content:center;align-items:center;width:84px;height:84px;font-size:36px;font-weight:900;display:flex}.note .nm{color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:270px;font-size:32px;font-weight:800;overflow:hidden}.note .gv{color:#fffc;white-space:nowrap;font-size:22px;font-weight:700}.note .gicon{filter:drop-shadow(0 4px 6px #0006);flex:none;width:96px;height:96px;margin-left:-60px}.note .cnt{color:#fff;text-shadow:0 3px #00000059;margin-left:24px;font-family:Lilita One,sans-serif;font-size:68px;font-style:italic}.note .cnt.bump{animation:.25s bump}@keyframes bump{50%{transform:scale(1.35)}}@keyframes slideIn{0%{transform:translate(-120%)}}.note.out{animation:.4s forwards fadeOut}@keyframes fadeOut{to{opacity:0;transform:translate(-60px)}}.note .av img{object-fit:cover;border-radius:50%;width:100%;height:100%}img.gicon{object-fit:contain}
