:root{--bg-page: #101014;--bg-raised: #16161b;--bg-inset: #1c1c22;--border-subtle: #2a2a32;--text-primary: #ffffff;--text-secondary: #e4e4e7;--text-muted: #8b8b95;--accent: #4ade80;--accent-tint: rgba(74, 222, 128, .15);--accent-glow: 0 0 12px rgba(74, 222, 128, .3);--on-accent: #0a0a0c;--danger-bg: #4c1d24;--danger-border: #7f1d2b;--danger-text: #fecdd3;--warn-bg: #4c3d1d;--warn-border: #7f6a1d;--warn-text: #fef3cd;--radius-pill: 999px;--radius-card: 16px;--radius-inner: 10px;--shadow-soft: 0 4px 16px rgba(0, 0, 0, .35);--font-stack: system-ui, -apple-system, "Segoe UI", sans-serif;--kicker-tracking: .14em}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-stack);background:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0 0 .5em}button,input,select{font:inherit;color:inherit}a{color:var(--accent)}.page{display:flex;flex-direction:column;gap:1rem;max-width:480px;margin:0 auto;padding:1.25rem 1rem 2rem;min-height:100%}.panel,.card{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:1.25rem}.kicker{color:var(--accent);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:var(--kicker-tracking);margin:0 0 .35em}.kicker--muted{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.6em 1.4em;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--bg-inset);color:var(--text-secondary);font-weight:600;cursor:pointer;text-decoration:none;transition:transform .1s ease,background-color .15s ease,filter .15s ease}.btn:active{transform:scale(.97)}.btn:disabled{background:var(--bg-inset);border-color:var(--border-subtle);color:var(--text-muted);cursor:not-allowed}.btn--primary,.btn-primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}.btn--primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn--danger,.btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger-text)}.btn--vote{min-width:56px;min-height:56px;font-size:1.5rem;border-radius:var(--radius-inner)}.btn--vote.is-selected{background:var(--accent-tint);border-color:var(--accent);box-shadow:var(--accent-glow)}.btn-small{min-height:32px;padding:.3em .8em}.error-banner{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-text);border-radius:var(--radius-inner);padding:.75em 1em}.reconnecting-banner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--radius-inner);padding:.75em 1em;margin-bottom:.75em}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.code-input{display:flex;gap:.5rem;justify-content:center}.code-input-box{width:3rem;height:3.5rem;text-align:center;font-size:1.5rem;font-weight:800;text-transform:uppercase;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner);color:var(--text-primary);caret-color:var(--accent)}.code-input-box:focus{outline:none;border-color:var(--accent);box-shadow:var(--accent-glow)}.home{justify-content:center;gap:1.25rem;text-align:center}.home-hero{margin-bottom:.5rem}.home-wordmark{font-size:clamp(2.2rem,8vw,3rem);font-weight:800;letter-spacing:.02em;margin:0}.home-wordmark-note{color:var(--accent)}.home-headline{color:var(--text-muted);margin:.25em 0 0}.home-create{min-height:56px;font-size:1.1rem}.home-join{display:flex;flex-direction:column;gap:1rem}.home-join h2{margin:0;font-size:1rem;color:var(--text-secondary)}.home-actions{display:flex;gap:.6rem;justify-content:center}.home-actions .btn{flex:1}.home-lang{display:flex;gap:.5rem;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}.lobby-header{text-align:center}.lobby-code{font-size:2.4rem;font-weight:800;letter-spacing:.2em;font-variant-numeric:tabular-nums}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.player-card{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-inner)}.player-card.is-me{border-color:var(--accent)}.player-avatar{font-size:1.4rem}.player-name{flex:1;color:var(--text-secondary)}.ready-badge{color:var(--text-muted);font-size:.85rem}.ready-badge.is-ready{color:var(--accent);font-weight:600}.lobby-settings{display:flex;flex-direction:column;gap:.8rem}.lobby-settings h2{margin:0;font-size:1rem}.segmented{display:flex;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:3px}.segment{flex:1;min-height:38px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);font-weight:600;font-size:.85rem;cursor:pointer}.segment.is-active{background:var(--accent);color:var(--on-accent)}.lobby-field{display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:var(--text-secondary)}.lobby-field input{width:5.5rem;min-height:40px;padding:.3em .6em;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner);color:var(--text-primary);text-align:center}.lobby-ready,.lobby-start{min-height:52px;font-size:1.05rem}.lobby-waiting{text-align:center;color:var(--text-muted)}.tv-hint{font-size:.85rem;color:var(--text-muted);word-break:break-all}.bottom-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:flex-end;background:#101014b3}.bottom-sheet__panel{width:100%;max-height:92vh;overflow-y:auto;background:var(--bg-raised);border-top:1px solid var(--accent);border-radius:var(--radius-card) var(--radius-card) 0 0;box-shadow:var(--accent-glow),var(--shadow-soft);padding:1.25rem 1rem 2rem;animation:sheet-up .25s ease}.bottom-sheet__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.bottom-sheet__title{color:var(--accent);font-size:1.1rem}.bottom-sheet__close{flex-shrink:0;background:transparent;border:none;color:var(--accent);font-size:1.25rem;line-height:1;padding:.25rem;cursor:pointer}@keyframes sheet-up{0%{transform:translateY(30%);opacity:0}to{transform:translateY(0);opacity:1}}.standings--list{display:flex;flex-direction:column;gap:.4rem}.standings--list .standings-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner)}.standings--chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.standings--chips .standings-row{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-pill)}.standings-rank{color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:1.2em}.standings--chips .standings-rank{display:none}.standings-name{flex:1;color:var(--text-secondary)}.standings-score{color:var(--text-primary);font-variant-numeric:tabular-nums}.standings-row.is-on-deck{border-color:var(--accent)}.standings-row.is-away{opacity:.45}.player-game{position:relative}.countdown-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#101014eb}.countdown-text{font-size:1.6rem;font-weight:800;animation:pulse 1s ease infinite}.np-card{display:flex;flex-direction:column;gap:.35rem}.song-title{font-size:1.25rem;font-weight:800;margin:0}.song-artist{color:var(--text-secondary);margin:0}.picked-by{color:var(--text-muted);font-size:.85rem;margin:0 0 .5rem}.vote-bar p{color:var(--text-muted);font-size:.85rem}.vote-buttons{display:flex;gap:.5rem;justify-content:center}.vote-buttons .btn--vote{flex:1}.joker-btn{width:100%;min-height:44px;margin-top:.6rem;background:transparent;border:1px dashed var(--accent);border-radius:var(--radius-inner);color:var(--accent);font-weight:700;cursor:pointer}.joker-btn:disabled{border-color:var(--border-subtle);color:var(--text-muted);cursor:not-allowed}.joker-btn.is-armed{background:var(--accent-tint);box-shadow:var(--accent-glow);animation:joker-flip .4s ease}.pick-card{display:flex;flex-direction:column;gap:.6rem}.pick-locked{color:var(--accent);font-weight:600;margin:0}.skip-card{display:flex;gap:.6rem}.skip-card .btn{flex:1}.song-search input{width:100%;min-height:48px;padding:.5em .9em;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner);color:var(--text-primary)}.song-search input:focus{outline:none;border-color:var(--accent)}.search-results{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.search-result{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title button" "artist button";gap:0 .75rem;align-items:center;padding:.6rem .75rem;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner)}.search-result .song-title{grid-area:title;font-size:1rem}.search-result .song-artist{grid-area:artist;font-size:.85rem}.search-result .btn{grid-area:button}.locked-banner{color:var(--accent);font-size:.9rem}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes joker-flip{0%{transform:rotateY(180deg)}to{transform:rotateY(0)}}.results{text-align:center}.results-over{font-size:1.1rem}.results-title{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800}.podium-columns{display:flex;align-items:flex-end;justify-content:center;gap:.75rem;min-height:12rem}.podium-col{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:clamp(5.5rem,18vw,9rem)}.podium-avatar{font-size:1.6rem}.podium-name{color:var(--text-secondary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.podium-bar{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner) var(--radius-inner) 0 0;animation:podium-rise .6s ease backwards}.podium-col--1 .podium-bar{height:9rem;border-color:var(--accent);box-shadow:var(--accent-glow);animation-delay:.4s}.podium-col--2 .podium-bar{height:6.5rem;animation-delay:.2s}.podium-col--3 .podium-bar{height:4.5rem;animation-delay:0s}.podium-col--1 .podium-score{color:var(--accent);font-size:1.4rem}.podium-medal{font-size:1.4rem}.podium-rest{list-style:none;margin:1rem auto 0;padding:0;max-width:26rem;display:flex;flex-direction:column;gap:.4rem}.podium-rest-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .75rem;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-inner)}.podium-rest-rank{color:var(--text-muted);min-width:1.6em}.podium-rest .podium-name{flex:1;text-align:left}.results-subtitle{margin-top:1.5rem}.playlist{list-style:none;margin:0 auto;padding:0;max-width:40rem;display:flex;flex-direction:column;gap:.4rem;text-align:left}.playlist-row{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"title title points" "artist picker points";gap:.1rem .75rem;padding:.5rem .75rem;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-inner)}.playlist-title{grid-area:title;font-weight:600}.playlist-artist,.playlist-picker{color:var(--text-muted);font-size:.85rem}.playlist-artist{grid-area:artist;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-picker{grid-area:picker;white-space:nowrap}.playlist-points{grid-area:points;align-self:center;color:var(--accent);font-weight:600}.results-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.25rem}@keyframes podium-rise{0%{transform:translateY(40%) scaleY(.4);opacity:0}to{transform:translateY(0) scaleY(1);opacity:1}}.join-form{justify-content:center;text-align:center}.join-title{font-size:2rem;font-weight:800}.join-panel{display:flex;flex-direction:column;gap:1rem}.join-nickname{min-height:48px;padding:.5em .9em;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-inner);color:var(--text-primary);text-align:center;font-size:1.1rem}.join-nickname:focus{outline:none;border-color:var(--accent)}.avatar-row{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem .25rem;scrollbar-width:none}.avatar{flex:0 0 auto;font-size:1.8rem;width:3.25rem;height:3.25rem;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);cursor:pointer;transition:transform .15s ease,border-color .15s ease}.avatar.is-selected{border-color:var(--accent);box-shadow:var(--accent-glow);transform:scale(1.15)}.join-submit{min-height:52px;font-size:1.05rem}.tv-page{position:relative;display:flex;flex-direction:column;gap:1.25rem;max-width:1100px;margin:0 auto;padding:2rem 1.5rem;min-height:100vh;overflow:hidden}.viewer-lobby{align-items:center;justify-content:center;text-align:center}.tv-code{font-size:clamp(4rem,14vw,9rem);font-weight:800;letter-spacing:.15em;margin:0;line-height:1}.tv-code-accent{color:var(--accent)}.tv-qr{width:clamp(140px,22vw,240px)}.tv-qr .qr-code{width:100%;height:auto;border-radius:var(--radius-inner)}.tv-qr.is-pulsing{animation:qr-pulse 2s ease infinite}.tv-join{color:var(--text-muted)}.tv-join span{color:var(--accent)}.tv-player-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75em;justify-content:center;font-size:clamp(1.1rem,2vw,1.5rem)}.tv-player-list li{background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:.4em 1em;animation:chip-pop .3s ease}.tv-start-party{min-height:60px;font-size:1.3rem;padding:.6em 2em}.viewer-countdown{align-items:center;justify-content:center}.tv-countdown-text{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin:0}.tv-countdown-number{font-size:clamp(5rem,16vw,10rem);font-weight:800;margin:.1em 0 0;font-variant-numeric:tabular-nums;color:var(--accent);animation:countdown-pulse 1s ease infinite}.tv-banner{text-align:center}.tv-banner .kicker{font-size:clamp(.8rem,1.4vw,1.1rem)}.tv-song-title{font-size:clamp(1.6rem,4vw,3rem);font-weight:800;margin:.1em 0}.tv-song-artist{color:var(--text-secondary);font-size:clamp(1rem,2vw,1.4rem);margin:0}.youtube-player{aspect-ratio:16 / 9;width:100%;background:#000;border-radius:var(--radius-inner);overflow:hidden}.tv-bottom{display:flex;flex-direction:column;gap:.5rem;align-items:center}.tv-bottom .standings--chips{font-size:clamp(.95rem,1.8vw,1.3rem)}.tv-status{color:var(--text-muted);font-size:clamp(.85rem,1.5vw,1.1rem);margin:0}.tv-lock-badge{color:var(--accent);font-weight:600}.reveal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#101014f0;z-index:10}.reveal-title{font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:800;margin:.2em 0;animation:reveal-rise .5s ease}.reveal-artist{color:var(--text-secondary);font-size:clamp(1rem,2vw,1.5rem)}.reveal-points{margin-top:.75em;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;color:var(--accent)}.sound-badge{position:absolute;top:1rem;right:1rem;z-index:15;min-height:44px;padding:.4em 1em;border:1px solid var(--accent);border-radius:var(--radius-pill);background:var(--bg-raised);color:var(--accent);font-weight:700;cursor:pointer;box-shadow:var(--accent-glow)}.emoji-rain{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:20}.emoji-drop{position:absolute;top:-10%;font-size:2em;animation:emoji-fall 3s linear forwards}@keyframes emoji-fall{0%{top:-10%;opacity:1}to{top:110%;opacity:0}}@keyframes chip-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes qr-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes countdown-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes reveal-rise{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}