:root { color-scheme: dark; --ink:#f8f5ff; --muted:#aaa3b8; --panel:#171024; --line:#312640; --purple:#8b5cf6; --pink:#ec4899; --gold:#fbbf24; --green:#34d399; --bg:#090414; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 70% -10%,#2b0f4a 0,transparent 36%),var(--bg); color:var(--ink); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:76px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); background:rgba(9,4,20,.84); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; color:white; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; font-weight:1000; background:linear-gradient(145deg,var(--purple),var(--pink)); box-shadow:0 8px 30px #8b5cf655; }
.brand strong,.brand small { display:block; }.brand small { color:var(--muted); margin-top:2px; }
nav { display:flex; gap:8px; } nav a { color:#d8d1e3; text-decoration:none; padding:10px 14px; border-radius:10px; } nav a:hover { background:#ffffff0c; color:white; }
.page-shell { width:min(1240px,calc(100% - 32px)); margin:0 auto; padding:46px 0 80px; }
.hero { min-height:560px; display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:50px; }
.eyebrow { color:#d8b4fe; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:900; }
.hero h1 { margin:18px 0; max-width:800px; font-size:clamp(3.4rem,7vw,6.8rem); letter-spacing:-.065em; line-height:.88; }
.hero h1 em,.tv-stage h1 em { color:transparent; background:linear-gradient(90deg,var(--purple),#c084fc,var(--pink)); background-clip:text; font-style:normal; }
.hero p { max-width:660px; color:#c8c1d1; font-size:1.22rem; line-height:1.65; }
.hero-actions { display:flex; gap:12px; margin-top:30px; }
.button { display:inline-flex; justify-content:center; align-items:center; border:0; text-decoration:none; border-radius:14px; min-height:54px; padding:0 22px; font-weight:850; cursor:pointer; }
.primary { color:white; background:linear-gradient(120deg,var(--purple),var(--pink)); box-shadow:0 10px 35px #8b5cf644; }.secondary { color:white; background:#ffffff0d; border:1px solid #ffffff24; }
.hero-logo { display:block; width:min(620px,48vw); height:auto; filter:drop-shadow(0 24px 55px #a21caf3d); }
.feature-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#120b1e; }.feature-strip article { padding:24px; border-right:1px solid var(--line); }.feature-strip article:last-child { border:0; }.feature-strip strong,.feature-strip span { display:block; }.feature-strip strong { font-size:1.5rem; }.feature-strip span { color:var(--muted); margin-top:6px; }
.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; }.dashboard-head h1 { font-size:clamp(2.2rem,4vw,4rem); margin:8px 0; letter-spacing:-.045em; }.dashboard-head p { color:var(--muted); margin:0; }.dashboard-head p strong { color:var(--gold); font-size:1.2em; letter-spacing:.1em; }
.status-pill { text-transform:capitalize; border:1px solid #ffffff20; border-radius:999px; padding:10px 16px; font-weight:800; }.status-pill.voting { color:#101; background:var(--green); }
.host-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }.panel { border:1px solid var(--line); border-radius:20px; padding:22px; background:linear-gradient(145deg,#191126,#120c1d); box-shadow:0 18px 60px #0003; }.control-panel { min-height:430px; }.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }.panel-title span { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; }.panel-title h2 { margin:6px 0 0; font-size:1.35rem; }.mini-link { color:#d8b4fe; text-decoration:none; }.muted,.empty { color:var(--muted); line-height:1.5; }
.mega-action { width:100%; min-height:82px; border:0; border-radius:17px; background:linear-gradient(120deg,var(--purple),var(--pink)); color:white; font-size:1.2rem; font-weight:900; cursor:pointer; margin-top:20px; }.mega-action.hot { background:linear-gradient(120deg,#e11d48,#f97316); }.mega-action:hover { filter:brightness(1.1); transform:translateY(-1px); }
.form-grid { display:grid; gap:14px; }.form-grid label { display:grid; gap:7px; color:var(--muted); font-size:.85rem; }.form-grid input,.form-grid select,.join-card input { width:100%; padding:15px; border:1px solid #443653; border-radius:12px; color:white; background:#0e0916; outline:none; }.form-grid input:focus,.form-grid select:focus,.join-card input:focus { border-color:#a78bfa; box-shadow:0 0 0 3px #8b5cf633; }
.wheel-ready { padding:4px 0 20px; }.wheel-availability { display:grid; grid-template-columns:auto 1fr; align-items:end; column-gap:10px; padding:18px; border:1px solid #433255; border-radius:16px; background:#0e0916; }.wheel-availability strong { grid-row:1/3; color:#d8b4fe; font-size:3rem; line-height:.9; }.wheel-availability span { font-weight:900; }.wheel-availability small { color:var(--muted); margin-top:4px; }.wheel-action { background:linear-gradient(120deg,#7c3aed,#db2777,#f59e0b); }.mega-action:disabled { cursor:wait; filter:saturate(.35); opacity:.7; transform:none; }.manual-pick { padding-top:20px; border-top:1px solid #ffffff12; }.manual-pick>span { display:block; margin-bottom:9px; color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.manual-row { display:grid; grid-template-columns:1fr auto; gap:9px; }.manual-row select { min-width:0; padding:13px; border:1px solid #443653; border-radius:12px; color:white; background:#0e0916; }.manual-row button,.full-width { padding:12px 16px; border:1px solid #554467; border-radius:12px; background:#251735; color:white; font-weight:800; cursor:pointer; }.full-width { width:100%; margin-top:10px; }.wheel-host-state,.selected-singer { padding:32px 22px; border:1px solid #563b70; border-radius:18px; text-align:center; background:radial-gradient(circle at top,#7c3aed55,transparent 62%),#0f0918; }.wheel-host-state span,.selected-singer span { color:#d8b4fe; font-size:.75rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.wheel-host-state h3,.selected-singer h3 { margin:10px 0 6px; font-size:clamp(2rem,4vw,3.7rem); }.wheel-host-state p,.selected-singer small { color:var(--muted); }.song-form { margin-top:18px; }
.now-card { padding:32px; border-radius:18px; background:radial-gradient(circle at top right,#7c3aed55,transparent 45%),#0f0918; text-align:center; }.now-card span { color:#c4b5fd; text-transform:uppercase; letter-spacing:.15em; font-weight:900; }.now-card h3 { font-size:3rem; margin:12px 0 4px; }.now-card p { color:var(--muted); font-size:1.1rem; }
.vote-live { display:flex; flex-direction:column; align-items:center; padding:28px; }.vote-live strong { font-size:7rem; line-height:1; color:var(--green); }.vote-live span { color:var(--muted); text-transform:uppercase; letter-spacing:.15em; margin-top:10px; }
.result-card { text-align:center; padding:20px; }.result-card>strong { display:block; font-size:7rem; line-height:1; color:var(--gold); }.result-card>span { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; }.result-actions { display:flex; gap:10px; }.result-actions button,.small-button,.sound-toggle { flex:1; padding:12px 14px; border:1px solid #554467; border-radius:12px; background:#251735; color:white; font-weight:800; cursor:pointer; }
.result-actions button:disabled { cursor:default; opacity:.55; }.end-night-action { width:100%; margin-top:20px; padding:14px; border:1px solid #fb718544; border-radius:12px; color:#fecdd3; background:#88133722; font-weight:900; cursor:pointer; }.final-host-card { display:grid; justify-items:center; text-align:center; gap:7px; padding:12px 20px 24px; }.final-host-card img { width:100px; height:100px; object-fit:contain; filter:drop-shadow(0 12px 25px #f59e0b55); }.final-host-card>span { color:#d8b4fe; font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.final-host-card h3 { margin:0; font-size:clamp(2.5rem,5vw,4.5rem); }.final-host-card>strong { color:var(--gold); font-size:2rem; }.final-host-card p,.final-host-card small { color:var(--muted); margin:6px 0 0; }.final-host-card p b { color:#fb923c; }
.final-host-card .reset-demo { margin-top:14px; flex:none; color:#c7bfce; }
.playoff-requirement { margin:18px 0 0; padding:13px 15px; border:1px solid #ffffff15; border-radius:12px; color:var(--muted); font-size:.85rem; line-height:1.45; }.playoff-card { display:grid; gap:12px; }.playoff-card>span,.playoff-result-card>span { color:#d8b4fe; font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.playoff-card h3 { margin:0 0 5px; font-size:2rem; }.playoff-pair { padding:16px; border:1px solid #ffffff18; border-radius:15px; background:#ffffff06; }.playoff-pair small,.playoff-pair strong,.playoff-pair p { display:block; }.playoff-pair small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }.playoff-pair strong { margin-top:8px; font-size:1.35rem; }.playoff-pair strong em { color:var(--muted); font-style:normal; font-size:.7em; }.playoff-pair p { margin:7px 0 0; color:var(--muted); font-size:.85rem; }.boot-pair { border-color:#fb923c44; }.boot-pair strong { color:#fdba74; }.mic-pair { border-color:#c084fc44; }.mic-pair strong { color:#e9d5ff; }.playoff-selected { margin-bottom:16px; }.playoff-now { border-color:#c084fc66; }.playoff-result-card { display:grid; justify-items:center; gap:5px; padding:28px; text-align:center; }.playoff-result-card h3 { margin:8px 0 0; font-size:3.4rem; }.playoff-result-card>strong { color:var(--gold); font-size:3rem; }.playoff-result-card p { margin:0; color:var(--muted); }.versus-score { width:100%; display:flex; justify-content:space-between; margin-top:16px; padding:13px 15px; border:1px solid #ffffff16; border-radius:12px; color:var(--muted); }.playoff-result-card.boot>strong { color:#fb923c; }
.cue-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.cue-grid button { text-align:left; border:1px solid #3b2c49; border-radius:12px; background:#100a19; color:#e8e2ef; padding:13px; cursor:pointer; }.cue-grid button span { margin-right:8px; color:var(--pink); }.sound-toggle { flex:initial; color:var(--green); }
.queue-row,.leader-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid #ffffff0c; }.avatar { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#312044; color:#d8b4fe; font-weight:900; }.queue-row strong,.queue-row small,.leader-row span,.leader-row small { display:block; }.queue-row small,.leader-row small { color:var(--muted); margin-top:3px; }.queue-actions { display:grid; justify-items:end; gap:5px; }.queue-actions>span { color:#a7f3d0; font-size:.75rem; }.queue-actions button { padding:5px 8px; border:1px solid #fb718533; border-radius:8px; color:#fda4af; background:#88133722; font-size:.72rem; font-weight:800; cursor:pointer; }.trophy { font-size:1.8rem!important; }.leader-row>b { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#2a1b37; }.leader-row>strong { color:var(--gold); font-size:1.3rem; }
.add-singer-form { display:grid; gap:8px; margin-bottom:12px; }.add-singer-form label { color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.add-singer-form>div { display:grid; grid-template-columns:1fr auto; gap:9px; }.add-singer-form input { min-width:0; padding:13px 14px; border:1px solid #443653; border-radius:12px; color:white; background:#0e0916; outline:none; }.add-singer-form input:focus { border-color:#a78bfa; box-shadow:0 0 0 3px #8b5cf633; }.add-singer-form button { min-width:92px; border:0; border-radius:12px; color:white; background:linear-gradient(120deg,var(--purple),var(--pink)); font-weight:900; cursor:pointer; }.singer-empty { padding:20px 4px 4px; border-top:1px solid #ffffff0c; }
.saved-song-label { display:grid; gap:8px; margin:0 0 15px; color:var(--muted); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.saved-song-label select { width:100%; padding:13px; border:1px solid #5b4570; border-radius:12px; color:white; background:#130c1d; text-transform:none; letter-spacing:0; }
.host-leaderboards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.mini-board { min-width:0; padding:14px; border:1px solid #ffffff12; border-radius:16px; background:#0d0815; }.mini-board-title { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding-bottom:10px; }.mini-board-title span { color:white; font-weight:900; }.mini-board-title small { color:var(--muted); text-align:right; }.mini-board .leader-row { font-size:.88rem; gap:8px; }.mini-board .leader-row>b { width:27px; height:27px; }.mini-board .leader-row>strong { font-size:1.05rem; }.boot-board { border-color:#f9731633; background:linear-gradient(145deg,#23110c,#0d0815 70%); }.boot-board .mini-board-title span,.boot-row>strong { color:#fb923c; }.boot-row>b { font-size:.85rem; background:#7c2d1233; }
.award-icons { display:flex; align-items:center; gap:7px; }.award-icons>span { font-size:1.65rem; }.mic-trophy-icon { display:block; width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 10px #f59e0b44); }.tv-mic-trophy { width:clamp(58px,6vw,86px); height:clamp(58px,6vw,86px); }
.phone-wrap { min-height:calc(100vh - 150px); display:grid; place-items:center; }.phone-card { width:min(460px,100%); border:1px solid var(--line); border-radius:28px; padding:30px; background:radial-gradient(circle at top right,#7c3aed33,transparent 38%),#151020; box-shadow:0 30px 90px #0008; }.phone-card h1 { font-size:2.35rem; margin:12px 0; letter-spacing:-.04em; }.phone-card p { color:#b9b1c5; line-height:1.55; }.join-card form { display:grid; gap:12px; margin:24px 0 16px; }.code-input { text-align:center; font-size:2rem!important; letter-spacing:.3em; font-weight:900; }.full { width:100%; }.joined { display:flex; justify-content:space-between; margin-bottom:30px; color:var(--muted); }.joined b { color:var(--gold); letter-spacing:.12em; }.slider-row { display:block; margin:23px 0; }.slider-row span { display:flex; justify-content:space-between; font-weight:800; }.slider-row output { color:#d8b4fe; font-size:1.25rem; }.slider-row input { width:100%; accent-color:var(--pink); margin-top:12px; }.checkmark,.pulse-mic { width:110px; height:110px; margin:30px auto 0; display:grid; place-items:center; border-radius:50%; background:#34d39922; color:var(--green); font-size:4rem; }.pulse-mic { background:#8b5cf622; animation:pulse 1.8s infinite; }
.registered-chip { padding:12px 14px; border:1px solid #34d39944; border-radius:12px; color:#a7f3d0; background:#064e3b22; text-align:center; font-weight:850; }.player-songs { margin-top:22px; padding-top:20px; border-top:1px solid #ffffff14; }.player-songs-title { display:flex; justify-content:space-between; align-items:center; }.player-songs-title span { color:#d8b4fe; font-size:.8rem; font-weight:900; }.player-song { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center; margin-top:10px; padding:11px; border:1px solid #ffffff12; border-radius:12px; background:#ffffff06; }.player-song>b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#d8b4fe; background:#6d28d944; }.player-song span,.player-song small { display:block; }.player-song small { margin-top:3px; color:var(--muted); }.player-songs form { display:grid; gap:10px; margin-top:14px; }.player-songs form label { display:grid; gap:6px; color:var(--muted); font-size:.82rem; }.player-songs input { width:100%; padding:13px; border:1px solid #443653; border-radius:12px; color:white; background:#0e0916; }.song-limit { display:block; margin-top:13px; color:var(--muted); line-height:1.45; }
@keyframes pulse { 50% { transform:scale(1.08); box-shadow:0 0 50px #8b5cf655; } }
.screen-shell { min-height:calc(100vh - 76px); }.tv-stage { min-height:calc(100vh - 76px); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:5vh 5vw; background:radial-gradient(circle at center,#32105a 0,#0b0514 58%,#050208 100%); }.tv-stage h1 { margin:12px 0; line-height:.88; font-size:clamp(4rem,10vw,9rem); letter-spacing:-.055em; }.tv-stage>p { font-size:clamp(1rem,2vw,1.7rem); color:#c7bfce; }.screen-join { display:grid; place-items:center; margin-top:36px; }.screen-join span,.screen-join small { color:#a9a0b2; text-transform:uppercase; letter-spacing:.15em; }.screen-join strong { margin-top:7px; font-size:clamp(1.3rem,2.3vw,2.2rem); }.screen-join b { color:var(--gold); font-size:clamp(4rem,8vw,7rem); letter-spacing:.12em; line-height:1.1; }.sound-screen { position:absolute; bottom:20px; color:#8b8294; text-decoration:none; font-size:.8rem; }.spot { position:absolute; top:-10%; width:8vw; height:130%; background:linear-gradient(#f0abfc44,transparent); transform:rotate(20deg); filter:blur(8px); }.spot-one { left:20%; }.spot-two { right:20%; transform:rotate(-20deg); }.live-chip { border-radius:999px; padding:10px 16px; color:#fecdd3; background:#e11d4822; border:1px solid #fb718544; font-weight:900; letter-spacing:.15em; }.performance-tv h2 { margin:12px 0 0; font-size:clamp(2rem,4vw,4rem); }.equalizer { display:flex; gap:8px; height:80px; align-items:center; margin-top:30px; }.equalizer i { width:8px; height:calc(15px + (var(--i) % 7) * 8px); border-radius:99px; background:linear-gradient(var(--pink),var(--purple)); animation:eq .8s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -80ms); } @keyframes eq { to { height:25px; opacity:.45; } }
.screen-mode .topbar { display:none; }.screen-mode .screen-shell,.screen-mode .tv-stage { min-height:100vh; }.screen-code-logo { width:min(320px,58vw); max-height:26vh; object-fit:contain; margin:1vh 0; filter:drop-shadow(0 18px 42px #c026d344); }.screen-code-tv h1 { font-size:clamp(3rem,7vw,6.5rem); }.screen-code-tv>p { margin:8px 0 20px; }.screen-code-tv form { width:min(430px,88vw); display:grid; grid-template-columns:1fr auto; gap:12px; }.screen-code-tv input { min-width:0; padding:15px; border:1px solid #6d5a7d; border-radius:14px; color:white; background:#12091d; }.screen-code-tv button { border:0; }.lobby-tv { padding:1.5vh 4vw; }.tv-logo { width:min(470px,39vw); max-height:34vh; object-fit:contain; margin:.25vh 0 0; filter:drop-shadow(0 22px 52px #c026d344); }.tv-stage .showdown-title { font-size:clamp(2rem,3.7vw,4rem); margin:0; letter-spacing:-.04em; }.lobby-tv>p { margin:.45rem 0; }.join-panel { display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,42px); margin-top:1.2vh; }.qr-frame { width:clamp(128px,13vw,176px); aspect-ratio:1; padding:7px; border-radius:14px; background:#fff; box-shadow:0 14px 42px #0008,0 0 34px #c026d333; }.qr-frame img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; }.lobby-tv .screen-join { margin:0; justify-items:start; text-align:left; }.lobby-tv .screen-join strong { font-size:clamp(1.1rem,2vw,1.8rem); }.lobby-tv .screen-join .code-label { margin-top:.65rem; }.lobby-tv .screen-join b { font-size:clamp(3.5rem,6vw,5.5rem); }
.wheel-tv { padding:2vh 4vw; }.wheel-tv h1 { font-size:clamp(2.8rem,5.5vw,5.5rem); margin:1vh 0; }.destiny-wheel { position:relative; width:min(48vh,470px); aspect-ratio:1; margin:1vh auto; filter:drop-shadow(0 22px 60px #000a); }.wheel-disc { position:absolute; inset:3%; border:10px solid #f8f5ff; border-radius:50%; overflow:hidden; background:var(--wheel-segments); box-shadow:inset 0 0 0 5px #160a23,0 0 0 5px #f59e0b55; }.wheel-disc::after { content:""; position:absolute; inset:41%; border:5px solid #ffffffaa; border-radius:50%; background:radial-gradient(circle,#f59e0b,#7c2d12); box-shadow:0 6px 25px #0009; }.wheel-disc>b { position:absolute; z-index:3; inset:44%; display:grid; place-items:center; color:white; font-size:clamp(.55rem,1vw,.8rem); letter-spacing:.08em; }.wheel-pointer { position:absolute; z-index:5; top:-2%; left:50%; translate:-50% 0; color:var(--gold); font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; filter:drop-shadow(0 5px 4px #000); }.wheel-name { position:absolute; z-index:2; top:50%; left:50%; width:31%; color:white; font-size:clamp(.75rem,1.5vw,1.15rem); font-weight:1000; line-height:1; text-shadow:0 2px 5px #000; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(18vh,170px))) rotate(calc(-1 * var(--angle))); }.wheel-name small { display:block; margin-top:4px; color:#ddd4e4; font-size:.46em; letter-spacing:.08em; }.wheel-name.is-blocked { color:#a29aa8; text-decoration:line-through; opacity:.8; }.wheel-name.is-winner { color:#fff7d6; text-shadow:0 0 10px #fbbf24,0 2px 5px #000; }.is-spinning .wheel-disc { animation:wheel-spin 4.2s cubic-bezier(.12,.72,.12,1) forwards; }.is-spinning .wheel-name { animation:counter-spin 4.2s cubic-bezier(.12,.72,.12,1) forwards; }.wheel-reveal { min-height:64px; display:grid; place-items:center; }.wheel-reveal span { color:#c7bfce; text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:900; }.wheel-reveal strong { color:var(--gold); font-size:clamp(1.8rem,3.5vw,3.2rem); }.wheel-empty { padding:50px; border:1px solid #ffffff22; border-radius:20px; color:var(--muted); }.next-up-tv .pulse-mic { margin-top:16px; }
@keyframes wheel-spin { from { transform:rotate(0); } to { transform:rotate(var(--final-rotation)); } }
@keyframes counter-spin { from { rotate:0deg; } to { rotate:calc(-1 * var(--final-rotation)); } }
.is-settled .wheel-disc { transform:rotate(var(--final-rotation)); }
.is-spinning .wheel-name { animation:none; }
.is-settled .wheel-name { rotate:0deg; }
.wheel-name { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(13vh,125px))) rotate(calc(-1 * var(--angle))); }
.is-spinning .wheel-name { opacity:0; }
.wheel-hub { position:absolute; z-index:7; top:50%; left:50%; width:18%; aspect-ratio:1; translate:-50% -50%; display:grid; place-items:center; border:5px solid #ffffffaa; border-radius:50%; color:white; background:radial-gradient(circle,#f59e0b,#7c2d12); box-shadow:0 6px 25px #0009; font-size:clamp(.55rem,1vw,.8rem); letter-spacing:.08em; }
.wheel-disc::after { display:none; }
.wheel-pointer { top:-16%; width:clamp(52px,6vw,74px); height:clamp(94px,11vw,132px); object-fit:contain; transform:none; transform-origin:center; filter:drop-shadow(0 7px 8px #000b) drop-shadow(0 0 12px #f59e0b77); }
.wheel-tv .destiny-wheel { margin-top:clamp(52px,7vh,78px); }
.wheel-hub { width:23%; height:23%; aspect-ratio:1; padding:0; border:4px solid #fff4d0; object-fit:cover; background:none; box-shadow:0 8px 30px #000b,0 0 24px #f59e0b88; animation:disco-glow 1.8s ease-in-out infinite alternate; }
@keyframes disco-glow { to { filter:brightness(1.15) saturate(1.15); box-shadow:0 8px 30px #000b,0 0 34px #ec489999; } }
.tv-presenter { display:flex; align-items:center; gap:12px; color:#d8b4fe; font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }.tv-presenter b { padding:6px 9px; border:1px solid #c084fc55; border-radius:999px; color:white; background:#ffffff0a; font-size:.65rem; letter-spacing:.13em; }
.corner-code { position:absolute; right:3vw; bottom:3vh; color:#afa5b7; }.corner-code strong { color:var(--gold); font-size:1.5em; margin-left:8px; letter-spacing:.12em; }.big-count { width:clamp(130px,16vw,220px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; border:8px solid var(--green); color:var(--green); font-size:clamp(5rem,11vw,10rem); font-weight:1000; margin:20px; box-shadow:0 0 80px #34d39944; }.category-pills { display:flex; gap:10px; }.category-pills span { padding:10px 16px; border-radius:99px; background:#ffffff0d; border:1px solid #ffffff18; }.score-reveal { font-size:clamp(8rem,19vw,17rem); line-height:.8; color:var(--gold); text-shadow:0 0 80px #f59e0b55; }.category-results { display:grid; grid-template-columns:repeat(4,1fr); width:min(1000px,92vw); margin-top:40px; gap:12px; }.category-results span { padding:18px; border-radius:14px; background:#ffffff0b; color:#bdb5c5; }.category-results b { display:block; color:white; font-size:1.8rem; margin-top:6px; }.fair-note { font-size:1rem!important; }.tv-leaderboards { width:min(1120px,92vw); display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); margin-top:2vh; }.tv-board { min-width:0; text-align:left; padding:clamp(18px,2vw,28px); border:1px solid #ffffff18; border-radius:22px; background:#ffffff08; }.tv-board-title { display:flex; align-items:center; gap:14px; margin-bottom:12px; }.tv-board-title>span { font-size:clamp(2rem,4vw,3.8rem); }.tv-board-title small { color:#b8afc1; text-transform:uppercase; letter-spacing:.14em; }.tv-board-title h2 { margin:3px 0 0; font-size:clamp(1.25rem,2.4vw,2.1rem); }.tv-board .leader-row { padding:clamp(11px,1.5vh,18px); margin:8px 0; border:1px solid #ffffff18; border-radius:14px; background:#ffffff0a; font-size:clamp(1rem,1.6vw,1.3rem); }.boot-tv-board { border-color:#fb923c44; background:linear-gradient(145deg,#3a180f99,#ffffff06); }.boot-tv-board .tv-board-title h2,.boot-tv-board .leader-row>strong { color:#fb923c; }.leaderboard-tv h1 { font-size:clamp(3rem,6vw,6rem); }.leaderboard-rule { margin:2vh 0 0!important; font-size:clamp(.8rem,1.3vw,1rem)!important; }.leaderboard-tv .empty { padding:20px 0; }
.result-waiting-tv h1 { font-size:clamp(4rem,10vw,9rem); }.result-waiting-tv>p { max-width:760px; }.final-tv { background:radial-gradient(circle at 35% 40%,#5b167b 0,transparent 38%),radial-gradient(circle at 70% 55%,#71310f 0,transparent 34%),#07030e; }.final-awards { width:min(1100px,92vw); display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(20px,4vw,54px); align-items:center; }.final-awards article { display:grid; justify-items:center; padding:clamp(24px,4vw,48px); border:1px solid #ffffff22; border-radius:28px; background:#ffffff08; box-shadow:0 25px 80px #0006; }.final-awards article>span:not(.final-boot-icon) { color:#d8b4fe; text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:900; }.final-mic img { width:clamp(120px,15vw,210px); height:clamp(120px,15vw,210px); object-fit:contain; filter:drop-shadow(0 20px 35px #f59e0b55); }.final-awards .final-mic h1 { margin:8px 0; font-size:clamp(3.5rem,7vw,7rem); }.final-awards strong { color:var(--gold); font-size:clamp(2rem,4vw,4rem); }.final-awards small { color:#c7bfce; margin-top:8px; font-size:1rem; }.final-boot { border-color:#fb923c44!important; background:#7c2d1222!important; }.final-boot-icon { font-size:clamp(5rem,9vw,8rem); }.final-boot h2 { margin:12px 0; font-size:clamp(2.2rem,4vw,4rem); }.final-boot strong { color:#fb923c; }.final-player { text-align:center; }.final-player img { width:150px; height:150px; object-fit:contain; }.final-player h1 { color:var(--gold); }
.playoff-lineup-tv { background:radial-gradient(circle at 25% 55%,#7c2d1244,transparent 34%),radial-gradient(circle at 75% 45%,#6d28d944,transparent 34%),#08030f; }.playoff-lineup-tv h1 { font-size:clamp(3.5rem,7vw,7rem); }.tv-playoff-pairs { width:min(1100px,92vw); display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); }.tv-playoff-pairs article { padding:clamp(20px,3vw,36px); border:1px solid #ffffff20; border-radius:24px; background:#ffffff08; }.tv-playoff-pairs small { color:#c7bfce; text-transform:uppercase; letter-spacing:.15em; }.tv-playoff-pairs strong { display:block; margin-top:14px; font-size:clamp(1.8rem,3.5vw,3.4rem); }.tv-playoff-pairs strong em { color:#9f96a8; font-style:normal; font-size:.6em; }.tv-playoff-pairs p { color:#b9b1c5; }.tv-playoff-pairs .boot { border-color:#fb923c55; }.tv-playoff-pairs .boot strong { color:#fdba74; }.tv-playoff-pairs .mic { border-color:#c084fc55; }.tv-playoff-pairs .mic strong { color:#e9d5ff; }.playoff-winner-tv { background:radial-gradient(circle,#52206d 0,#090310 65%); }.playoff-winner-tv.boot { background:radial-gradient(circle,#71310f 0,#090310 65%); }.playoff-award-icon { height:clamp(110px,18vh,190px); display:grid; place-items:center; font-size:clamp(6rem,11vw,10rem); }.playoff-award-icon img { width:clamp(120px,15vw,190px); height:100%; object-fit:contain; }.playoff-winner-tv h1 { font-size:clamp(4rem,9vw,8rem); }.playoff-winner-tv>strong { color:var(--gold); font-size:clamp(4rem,7vw,7rem); }.playoff-winner-tv.boot>strong { color:#fb923c; }.playoff-winner-tv>small { margin-top:14px; color:#aaa3b8; font-size:1.1rem; }
.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,30px); opacity:0; pointer-events:none; padding:14px 20px; border-radius:12px; background:#f8f5ff; color:#190d24; font-weight:800; transition:.2s; z-index:50; box-shadow:0 12px 40px #0008; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:800px) { .topbar { height:auto; padding:14px 18px; align-items:flex-start; }.brand small { display:none; } nav { flex-wrap:wrap; justify-content:flex-end; } nav a { padding:8px; font-size:.85rem; }.hero { grid-template-columns:1fr; min-height:auto; padding:50px 0; }.hero-logo { width:100%; max-width:600px; margin:12px auto 0; }.feature-strip { grid-template-columns:1fr 1fr; }.feature-strip article:nth-child(2) { border-right:0; }.feature-strip article:nth-child(-n+2) { border-bottom:1px solid var(--line); }.host-grid,.host-leaderboards,.tv-leaderboards { grid-template-columns:1fr; }.dashboard-head { align-items:flex-start; gap:15px; }.dashboard-head .status-pill { margin-top:25px; }.cue-grid { grid-template-columns:1fr; }.page-shell { padding-top:28px; }.category-results { grid-template-columns:1fr 1fr; }.category-pills { display:grid; grid-template-columns:1fr 1fr; }.screen-join b { font-size:4rem; }.tv-logo { width:min(720px,78vw); }.leaderboard-tv { justify-content:flex-start; padding-top:4vh; }.leaderboard-tv .corner-code { position:static; margin-top:20px; }.manual-row { grid-template-columns:1fr; }.wheel-tv { justify-content:flex-start; padding-top:3vh; }.destiny-wheel { width:min(72vw,46vh); }.wheel-name { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(17vh,29vw))) rotate(calc(-1 * var(--angle))); }.wheel-tv .corner-code { position:static; margin-top:10px; } }
@media(max-width:800px) { .wheel-name { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(12vh,20vw))) rotate(calc(-1 * var(--angle))); } }
@media(max-width:800px) { .final-awards { grid-template-columns:1fr; }.final-tv { justify-content:flex-start; padding-top:4vh; }.final-mic img { width:100px; height:100px; }.final-awards article { padding:20px; }.final-boot-icon { font-size:4rem; } }
@media(max-width:800px) { .tv-playoff-pairs { grid-template-columns:1fr; }.playoff-lineup-tv { justify-content:flex-start; padding-top:4vh; }.tv-playoff-pairs article { padding:18px; } }
@media(max-width:560px) { .screen-code-tv form { grid-template-columns:1fr; }.screen-code-tv h1 { font-size:2.7rem; } }

/* Host HQ product-family marketing frame */
.marketing-hero { min-height:650px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:clamp(34px,6vw,78px); padding:54px 0 64px; }
.marketing-copy h1 { margin:18px 0; max-width:760px; font-size:clamp(3.7rem,7vw,7rem); letter-spacing:-.07em; line-height:.86; }
.marketing-copy h1 em { color:transparent; background:linear-gradient(90deg,var(--purple),#c084fc,var(--pink)); background-clip:text; font-style:normal; }
.marketing-copy>p { max-width:660px; color:#c8c1d1; font-size:1.18rem; line-height:1.65; }
.hero-proof { display:flex; flex-wrap:wrap; gap:12px 22px; margin:27px 0 0; padding:0; list-style:none; color:#d8d1e3; font-size:.92rem; font-weight:750; }
.karaoke-stage { position:relative; min-height:530px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; border:1px solid #ffffff1a; border-radius:32px; background:radial-gradient(circle at 50% 36%,#64179b 0,transparent 38%),radial-gradient(circle at 75% 80%,#b5176766 0,transparent 35%),#0d0616; box-shadow:0 35px 100px #0008,0 0 70px #8b5cf622; }
.karaoke-stage::before,.karaoke-stage::after { content:""; position:absolute; top:-15%; width:12%; height:90%; background:linear-gradient(#f0abfc55,transparent); filter:blur(10px); transform:rotate(20deg); }
.karaoke-stage::before { left:16%; }.karaoke-stage::after { right:16%; transform:rotate(-20deg); }
.karaoke-stage>img { position:relative; z-index:1; width:min(310px,72%); max-height:190px; object-fit:contain; filter:drop-shadow(0 18px 42px #c026d344); }
.stage-topline { position:absolute; z-index:2; top:22px; left:24px; right:24px; display:flex; justify-content:space-between; color:#d9cce7; font-size:.68rem; font-weight:900; letter-spacing:.13em; }
.stage-topline b { color:#fda4af; }.stage-performance { position:relative; z-index:2; width:90%; display:grid; justify-items:center; margin-top:10px; padding:18px; border:1px solid #ffffff16; border-radius:18px; background:#ffffff0a; backdrop-filter:blur(8px); }
.stage-performance small,.stage-score span { color:#d8b4fe; font-size:.65rem; font-weight:900; letter-spacing:.16em; }.stage-performance strong { margin:5px 0 2px; font-size:2rem; }.stage-performance span { color:#c4b9ce; }
.stage-score { position:relative; z-index:2; width:90%; display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:14px 20px; border:1px solid #f59e0b33; border-radius:16px; background:#f59e0b0d; }.stage-score b { color:var(--gold); font-size:2.2rem; }
.marketing-section { padding:92px 0; }.section-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; margin-bottom:38px; }
.section-heading h2,.fair-scoring h2,.host-hq-band h2,.final-cta h2 { max-width:720px; margin:11px 0 0; font-size:clamp(2.2rem,4.2vw,4.2rem); line-height:.98; letter-spacing:-.055em; }.section-heading>p { margin:0; color:#bdb5c6; font-size:1.05rem; line-height:1.65; }
.benefit-grid,.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.benefit-grid article,.step-grid article { padding:28px; border:1px solid #ffffff14; border-radius:22px; background:linear-gradient(145deg,#ffffff09,#ffffff03); }
.benefit-grid article>span { color:#d8b4fe; font-size:.7rem; font-weight:900; letter-spacing:.16em; }.benefit-grid h3,.step-grid h3 { margin:16px 0 8px; font-size:1.35rem; }.benefit-grid p,.step-grid p { margin:0; color:#aaa3b8; line-height:1.6; }
.showdown-band { width:100vw; margin-left:calc(50% - 50vw); padding:18px 5vw; display:flex; justify-content:center; flex-wrap:wrap; gap:16px 28px; border-block:1px solid #ffffff12; color:#bdb5c6; background:linear-gradient(90deg,#4c1d9522,#be185d22,#b4530922); font-size:.75rem; font-weight:900; letter-spacing:.14em; }.showdown-band strong { color:white; }
.step-grid { grid-template-columns:repeat(4,1fr); }.step-grid article>b { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#e9d5ff; background:#7c3aed33; }
.fair-scoring { display:grid; grid-template-columns:1fr .8fr; gap:54px; align-items:center; margin:20px 0 92px; padding:clamp(30px,5vw,64px); border:1px solid #c084fc24; border-radius:30px; background:radial-gradient(circle at 90% 20%,#7c3aed33,transparent 38%),#130a1d; }.fair-scoring p,.host-hq-band p,.final-cta p { color:#bdb5c6; line-height:1.65; }
.score-demo { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center; gap:12px; }.score-demo strong { grid-column:2; grid-row:1 / span 2; color:var(--gold); font-size:clamp(4rem,8vw,7rem); line-height:1; }.score-demo s { color:#766c7d; font-size:1.45rem; }.score-demo span { color:#95899e; font-size:.62rem; font-weight:900; letter-spacing:.12em; }
.host-hq-band { width:100vw; margin-left:calc(50% - 50vw); padding:74px max(5vw,calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; gap:36px; background:linear-gradient(120deg,#160a24,#32105a); border-block:1px solid #ffffff12; }.host-hq-band p { max-width:760px; margin-bottom:0; }
.final-cta { display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; padding:76px 0 20px; }.final-cta img { width:130px; height:130px; object-fit:contain; filter:drop-shadow(0 16px 30px #f59e0b44); }.final-cta h2 { font-size:clamp(2rem,4vw,3.5rem); }.final-cta p { margin-bottom:0; }
@media(max-width:800px) { .marketing-hero { grid-template-columns:1fr; min-height:auto; padding:50px 0; }.marketing-copy h1 { font-size:clamp(3.2rem,15vw,5rem); }.karaoke-stage { min-height:480px; }.section-heading,.fair-scoring { grid-template-columns:1fr; gap:24px; }.benefit-grid,.step-grid { grid-template-columns:1fr 1fr; }.host-hq-band { align-items:flex-start; flex-direction:column; }.final-cta { grid-template-columns:auto 1fr; }.final-cta .button { grid-column:1 / -1; } }
@media(max-width:560px) { .benefit-grid,.step-grid { grid-template-columns:1fr; }.hero-actions { align-items:stretch; flex-direction:column; }.karaoke-stage { min-height:430px; padding-inline:16px; }.stage-topline { font-size:.57rem; }.final-cta { grid-template-columns:1fr; justify-items:start; }.final-cta .button { grid-column:auto; }.final-cta img { width:96px; height:96px; } }