:root{--bg:#050508;--bg-2:#0b0b12;--card:#101018c7;--stroke:#ffffff1f;--pink:#ff2ec4;--blue:#00d4ff;--purple:#8b5cff;--gold:#ffd166;--text:#f7f7fb;--muted:#f7f7fba3;--danger:#ff4d6d;--ok:#3dff9a;--shadow:0 0 40px #ff2ec42e;--font:"Inter", system-ui, sans-serif;--display:"Bebas Neue", "Inter", sans-serif;--logo:"Lilita One", "Bebas Neue", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{background:#000}body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;background:#000;overflow:hidden}button,input{font-family:inherit}input{min-width:0;max-width:100%}button{cursor:pointer}img{max-width:100%;display:block}.app-root{background:#000;place-items:center;min-height:100%;display:grid}.phone{width:min(430px,100%);height:100dvh;max-height:100dvh;color:var(--text);background:radial-gradient(120% 60% at 10% -10%,#ff2ec447,#0000 55%),radial-gradient(90% 50% at 110% 0,#00d4ff38,#0000 50%),linear-gradient(#120818 0%,#050508 42% 100%);position:relative;overflow:hidden}.phone:before{content:"";pointer-events:none;background:linear-gradient(#0000,#00000073);height:34%;position:absolute;inset:auto 0 0}.crowd{pointer-events:none;background:radial-gradient(circle at 50% 118%,#ff2ec429,#0000 36%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='10' cy='70' r='14'/%3E%3Ccircle cx='38' cy='74' r='16'/%3E%3Ccircle cx='68' cy='72' r='13'/%3E%3Ccircle cx='96' cy='76' r='17'/%3E%3Ccircle cx='126' cy='71' r='14'/%3E%3Ccircle cx='150' cy='75' r='12'/%3E%3C/g%3E%3C/svg%3E") bottom/100% no-repeat;position:absolute;inset:0}.screen{z-index:1;height:100%;padding:calc(10px + var(--safe-top)) 14px calc(10px + var(--safe-bottom));-webkit-overflow-scrolling:touch;flex-direction:column;display:flex;position:relative;overflow:hidden auto}.screen.pin-cta{overflow:hidden}.scroll-fill{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow:auto}.pin-bar{flex-shrink:0;padding-top:8px}.row{align-items:center;gap:10px;display:flex}.space{justify-content:space-between}.grow{flex:1}.center{text-align:center}.muted{color:var(--muted)}.tiny{letter-spacing:.12em;text-transform:uppercase;font-size:11px}.hidden{display:none}.logo{text-align:center;line-height:.85}.logo .pass{font-family:var(--logo);letter-spacing:.08em;font-size:28px;display:block}.logo .aux{font-family:var(--logo);background:linear-gradient(90deg, var(--blue), var(--pink));color:#0000;text-shadow:0 0 24px #ff2ec447;-webkit-background-clip:text;background-clip:text;font-size:64px;display:inline-block;position:relative}.logo .bolt{color:var(--blue);-webkit-text-fill-color:var(--blue);vertical-align:8px;filter:drop-shadow(0 0 8px var(--blue));background:0 0;font-size:.7em}.logo.small .pass{font-size:11px}.logo.small .aux{font-size:22px}.logo.hero .pass{font-size:30px}.logo.hero .aux{font-size:64px}.icon-btn{border:1px solid var(--stroke);color:#fff;background:#ffffff0a;border-radius:50%;flex-shrink:0;place-items:center;width:34px;height:34px;display:grid}.btn{appearance:none;color:#fff;letter-spacing:.08em;text-transform:uppercase;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px 16px;font-weight:800;display:flex;position:relative}.btn .sub{letter-spacing:.04em;text-transform:none;opacity:.86;font-size:11px;font-weight:600;display:block}.btn-primary{background:linear-gradient(90deg, var(--pink), var(--blue));box-shadow:0 8px 28px #ff2ec447}.btn-primary:disabled{opacity:.45;box-shadow:none}.btn-ghost{background:0 0;border:1px solid #ffffff29}.btn-card{text-align:left;background:#08080eb3;background-image:linear-gradient(#08080edb, #08080edb), linear-gradient(90deg, var(--blue), var(--pink));color:#fff;background-origin:border-box;background-clip:padding-box,border-box;border:1.5px solid #0000;border-radius:18px;align-items:center;gap:12px;width:100%;padding:16px;display:flex}.btn-card .title{letter-spacing:.08em;font-weight:800}.btn-card .desc{color:var(--muted);margin-top:2px;font-size:13px}.grid3{grid-template-columns:1fr 1fr 1fr;gap:10px;display:grid}.mini-card{border:1px solid var(--stroke);text-align:center;color:#fff;background:#ffffff08;border-radius:16px;padding:12px 8px}.mini-card .ico{margin-bottom:6px;font-size:20px}.mini-card .t{letter-spacing:.08em;font-size:10px;font-weight:800}.mini-card .d{color:var(--muted);margin-top:4px;font-size:11px}.profile-card{border:1px solid var(--stroke);background:#0a0a10cc;border-radius:20px;align-items:center;gap:12px;margin-top:auto;padding:12px;display:flex}.avatar{object-fit:cover;border:2px solid var(--pink);background:#1b1b24;border-radius:50%;width:48px;height:48px}.avatar.sm{width:36px;height:36px}.avatar.lg{border-width:3px;border-color:var(--gold);width:92px;height:92px}.xp{background:#ffffff1a;border-radius:99px;height:7px;margin-top:6px;overflow:hidden}.xp>span{background:linear-gradient(90deg, var(--blue), var(--pink));height:100%;display:block}.hex{text-align:center;min-width:58px;color:var(--pink);font-size:10px;font-weight:700}h1,h2,.display{font-family:var(--display);letter-spacing:.06em;margin:0}h1{font-size:32px}h2{font-size:22px}.pink{color:var(--pink)}.gold{color:var(--gold)}.grad-text{background:linear-gradient(90deg, var(--pink), var(--blue));color:#0000;-webkit-background-clip:text;background-clip:text}.card{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:12px}.card.glow{background-image:linear-gradient(#0a0a10e0, #0a0a10e0), linear-gradient(135deg, var(--pink), var(--blue));box-shadow:var(--shadow);background-origin:border-box;background-clip:padding-box,border-box;border:1px solid #0000}.stepper{justify-content:center;align-items:center;gap:28px;margin:8px 0 4px;display:flex}.stepper b{font-size:64px;font-family:var(--display)}.round-btn{border:2px solid var(--purple);color:#fff;background:0 0;border-radius:50%;width:48px;height:48px;font-size:24px}.round-btn.plus{border-color:var(--blue)}.dots{justify-content:center;gap:6px;display:flex}.dots i{background:#fff3;border-radius:50%;width:7px;height:7px}.dots i.on{background:var(--pink);box-shadow:0 0 8px var(--pink)}.segments{gap:5px;display:flex}.segments i{background:#ffffff1f;border-radius:99px;flex:1;height:6px}.segments i.on{background:var(--pink);box-shadow:0 0 8px var(--pink)}.code{letter-spacing:.18em;background:linear-gradient(90deg, var(--blue), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:800}.player-row,.open-slot{background:#ffffff0a;border-radius:999px;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;display:flex}.host-tag{letter-spacing:.12em;border:1px solid var(--pink);color:var(--pink);border-radius:999px;margin-left:auto;padding:3px 8px;font-size:10px}.open-slot{color:var(--muted);background:0 0;border:1px dashed #ffffff2e;justify-content:center}.search{border:1px solid var(--stroke);color:#fff;background:#ffffff0d;border-radius:14px;outline:none;width:100%;padding:13px 14px 13px 40px}.search-wrap{position:relative}.search-wrap .mag{opacity:.6;position:absolute;top:13px;left:14px}.track{color:inherit;text-align:left;background:0 0;border:0;grid-template-columns:48px 1fr auto auto;align-items:center;gap:10px;width:100%;padding:8px 0;display:grid}.track img{object-fit:cover;border-radius:10px;width:48px;height:48px}.track .meta b{font-size:14px;display:block}.track .meta span{color:var(--muted);font-size:12px}.art-xl{aspect-ratio:1;object-fit:cover;border-radius:14px;width:min(46vw,188px);margin:6px auto;box-shadow:0 0 0 2px #00d4ff80,0 12px 32px #00000073}.reactions{z-index:6;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;display:grid;position:relative}.reactions button{border:1.5px solid var(--stroke);color:#fff;background:#00000059;border-radius:14px;padding:6px 0 5px}.reactions .e{font-size:20px}.reactions .l{letter-spacing:.08em;margin-top:2px;font-size:8px;font-weight:800}.float-layer{pointer-events:none;z-index:5;position:absolute;inset:0 0 7.5rem;overflow:hidden}.floater{filter:drop-shadow(0 8px 14px #00000073);will-change:transform, opacity;font-size:clamp(33px,9.75vw,60px);line-height:1;animation:5s ease-out forwards drift;position:absolute;bottom:40%}.floater-phrase{max-width:180px;font-size:15px}.phrase-bubble{letter-spacing:0;text-transform:none;background:#0a0a10db;border:1px solid #ffffff29;border-radius:16px;padding:8px 10px;font-size:13px;font-weight:700}.floater-drift{animation-name:drift}.floater-bounce{animation-name:bounce-up}.floater-spin{animation-name:spin-up}.floater-burst{animation-name:burst-up}@keyframes drift{0%{opacity:1;transform:translateY(16px)scale(.55)rotate(0)}84%{opacity:1}to{transform:translate(var(--dx,80px), var(--dy,-280px)) scale(var(--scale,1.05)) rotate(calc(var(--rot,40deg) * .45));opacity:0}}@keyframes bounce-up{0%{opacity:1;transform:translateY(12px)scale(.45)}22%{transform:translate(calc(var(--dx,20px) * .35), -70px) scale(1.01);opacity:1}38%{transform:translate(calc(var(--dx,20px) * .5), -40px) scale(.79);opacity:1}84%{opacity:1}to{transform:translate(var(--dx,40px), var(--dy,-300px)) scale(var(--scale,.94));opacity:0}}@keyframes spin-up{0%{opacity:1;transform:translateY(10px)rotate(0)scale(.5)}84%{opacity:1}to{transform:translate(var(--dx,-90px), var(--dy,-290px)) rotate(var(--rot,420deg)) scale(var(--scale,1.09));opacity:0}}@keyframes burst-up{0%{opacity:1;transform:translate(0)scale(.15)}14%{transform:translate(calc(var(--dx,10px) * .15), -30px) scale(1.16);opacity:1}84%{opacity:1}to{transform:translate(var(--dx,110px), var(--dy,-260px)) rotate(var(--rot,70deg)) scale(var(--scale,.83));opacity:0}}.song-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.song-tile{border:1.5px solid var(--stroke);color:#fff;text-align:left;background:#0c0c12;border-radius:14px;padding:0 0 6px;position:relative;overflow:hidden}.song-tile.selected{border-color:var(--pink);box-shadow:0 0 16px #ff2ec459}.song-tile.mine{opacity:.55}.song-tile img{aspect-ratio:1;object-fit:cover;width:100%}.song-tile .pad{padding:6px 8px 0}.song-tile b{font-size:13px;display:block}.song-tile span{color:var(--muted);font-size:11px}.yours{background:#8b5cffe6;border-radius:999px;padding:3px 7px;font-size:10px;position:absolute;top:8px;right:8px}.vote-row{text-align:left;width:100%;color:inherit;border:1.5px solid var(--stroke);background:#0c0c12b8;border-radius:12px;grid-template-columns:44px 1fr;align-items:center;gap:10px;margin-bottom:6px;padding:6px 8px;display:grid}.vote-row img{object-fit:cover;border-radius:8px;width:44px;height:44px}.vote-row .meta{min-width:0}.vote-row .meta b{white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.2;display:block;overflow:hidden}.vote-row .meta span{color:var(--muted);font-size:11px}.vote-row.selected{border-color:var(--pink);box-shadow:0 0 14px #ff2ec452}.vote-row.mine{opacity:.55}.bar{background:#ffffff1a;border-radius:99px;height:6px;overflow:hidden}.bar>i{border-radius:inherit;height:100%;display:block}.confetti{pointer-events:none;opacity:.45;background-image:radial-gradient(circle,#ffd166 1.5px,#0000 2px),radial-gradient(circle,#ff2ec4 1.5px,#0000 2px),radial-gradient(circle,#00d4ff 1.5px,#0000 2px);background-position:0 0,12px 18px,24px 8px;background-size:42px 42px,36px 36px,50px 50px;animation:6s linear infinite fall;position:absolute;inset:0}@keyframes fall{0%{background-position:0 0,12px 18px,24px 8px}to{background-position:0 80px,12px 98px,24px 88px}}.tabbar{grid-template-columns:repeat(5,1fr);gap:4px;margin-top:auto;padding-top:10px;display:grid}.tabbar button{color:var(--muted);letter-spacing:.06em;background:0 0;border:0;font-size:10px;font-weight:700}.tabbar button.on{color:var(--purple)}.code-inputs{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%;max-width:100%;display:grid}.code-inputs input{text-align:center;border:1px solid var(--stroke);color:#fff;text-transform:uppercase;appearance:none;background:#12121a;border-radius:12px;width:100%;min-width:0;height:52px;padding:0;font-size:16px;font-weight:800}.notice{color:var(--ok);font-size:14px;font-weight:700}.error{color:var(--danger);min-height:18px;font-size:13px}.countdown{font-family:var(--display);letter-spacing:.2em;background:linear-gradient(90deg, var(--pink), var(--purple), var(--blue));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:48px}.mystery{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mystery .q{aspect-ratio:.78;color:#fff;background-image:linear-gradient(#14141c, #14141c), linear-gradient(135deg, var(--pink), var(--blue));background-origin:border-box;background-clip:padding-box,border-box;border:1.5px solid #0000;border-radius:16px;place-items:center;font-size:36px;font-weight:800;display:grid}.vinyl-stack{justify-content:center;height:132px;display:flex;position:relative}.vinyl{width:118px;height:118px;transform:rotate(calc(var(--i) * 12deg)) translateX(calc((var(--i) - 1.5) * 18px));background:radial-gradient(circle,#1a1a22 14%,#0000 15%),repeating-radial-gradient(circle,#111 0 3px,#1c1c24 4px 7px);border-radius:50%;animation:1.6s ease-in-out both vinyl-shuffle;position:absolute;box-shadow:0 10px 24px #00000073,0 0 0 2px #ff2ec440}.vinyl i{background:linear-gradient(135deg,#2a2a36,#0c0c12);border:2px solid #ffffff1f;border-radius:50%;position:absolute;inset:38%}@keyframes vinyl-shuffle{0%{transform:rotate(calc(var(--i) * -20deg)) translate(0, 10px) scale(.86)}40%{transform:rotate(calc(var(--i) * 28deg)) translateX(calc((var(--i) - 1.2) * 26px))}to{transform:rotate(calc(var(--i) * 10deg)) translateX(calc((var(--i) - 1.5) * 16px))}}.ready-pill{letter-spacing:.1em;color:var(--muted);border:1px solid #ffffff29;border-radius:999px;flex-shrink:0;margin-left:auto;padding:3px 7px;font-size:9px}.ready-pill.on{border-color:var(--ok);color:var(--ok)}.kick-btn{width:28px;height:28px;color:var(--danger);background:0 0;border:1px solid #ff4d6d66;border-radius:50%;flex-shrink:0;font-size:12px}.host-tag{margin-left:0}.player-row{flex-wrap:wrap}.sheet{z-index:20;background:#0000008c;place-items:end center;padding:18px;display:grid;position:absolute;inset:0}.sheet-card{border:1px solid var(--stroke);background:#101018;border-radius:22px;width:100%;margin-bottom:8px;padding:16px}.winner-pop{animation:.7s cubic-bezier(.2,1.4,.3,1) both winner-pop}@keyframes winner-pop{0%{filter:blur(6px);transform:scale(.82)}to{filter:blur();transform:scale(1)}}.preview-btn{color:var(--blue);font-weight:800}.share-card{background:#050508;background-image:linear-gradient(#050508, #050508), linear-gradient(90deg, var(--pink), var(--blue));text-align:center;background-origin:border-box;background-clip:padding-box,border-box;border:2px solid #0000;border-radius:24px;padding:18px}.stat-row{text-align:center;grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.stat-row b{font-size:28px;font-family:var(--display);display:block}.podium{justify-content:center;align-items:end;gap:10px;display:flex}.podium .p{text-align:center;width:90px}.podium .p img{margin:0 auto 6px}.toast{border:1px solid var(--stroke);z-index:8;background:#0a0a10eb;border-radius:12px;padding:10px 12px;font-size:13px;position:absolute;bottom:88px;left:18px;right:18px}.timer-ring{width:210px;height:210px;margin:8px auto;position:relative}.timer-ring svg{transform:rotate(-90deg)}.timer-copy{text-align:center;place-items:center;display:grid;position:absolute;inset:0}.timer-copy b{font-size:42px;font-family:var(--display)}@media (width>=500px){.phone{border:1px solid #ffffff14;border-radius:32px;height:min(900px,100dvh);box-shadow:0 30px 80px #ff2ec41f}}@media (height<=740px){.art-xl{width:min(38vw,150px)}h1{font-size:26px}h2{font-size:18px}.reactions .l{display:none}.logo.hero .aux{font-size:54px}.code{font-size:28px}}