:root{--bg: #0f0f1a;--bg-card: #1a1a2e;--bg-input: #16213e;--text: #e8e8f0;--text-muted: #8888aa;--primary: #6c63ff;--primary-hover: #574bfa;--accent: #ff6b6b;--accent-hover: #ee5a5a;--success: #2ecc71;--warning: #f39c12;--danger: #e74c3c;--radius: 12px;--radius-sm: 8px;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px;position:relative}.connection-indicator{position:fixed;top:12px;right:16px;display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-muted);z-index:100}.connection-indicator .dot{width:8px;height:8px;border-radius:50%;display:inline-block}.connection-indicator .dot.online{background:var(--success);box-shadow:0 0 6px var(--success)}.connection-indicator .dot.offline{background:var(--danger);animation:pulse 1.5s infinite}.screen{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 16px;text-align:center;flex:1}h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:1.5rem;font-weight:700}h3{font-size:1.1rem;font-weight:600;color:var(--text-muted)}.subtitle{color:var(--text-muted);font-size:1rem;margin-top:-8px}.hint{color:var(--text-muted);font-size:.9rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;max-width:320px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:transparent;color:var(--text-muted);border:1px solid var(--text-muted)}.btn-secondary:hover:not(:disabled){color:var(--text);border-color:var(--text)}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover:not(:disabled){background:var(--accent-hover)}.btn-large{padding:16px 36px;font-size:1.15rem}.form-group{width:100%;max-width:320px;text-align:left}.form-group label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:6px;font-weight:500}.form-group input{width:100%;padding:14px 16px;border:2px solid transparent;border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text);font-size:1.1rem;font-family:var(--font);outline:none;transition:border-color .2s}.form-group input:focus{border-color:var(--primary)}.form-group input::placeholder{color:var(--text-muted);opacity:.6}.error-message{color:var(--danger);font-size:.9rem;font-weight:500}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:4px}.room-code-display .label{font-size:.85rem;color:var(--text-muted)}.room-code-display .code{font-size:3rem;font-weight:900;letter-spacing:.3em;color:var(--primary);font-family:monospace}.player-list{width:100%;max-width:420px}.game-settings{width:100%;max-width:420px;background:var(--bg-card);border-radius:var(--radius);padding:16px 20px;margin:12px 0}.game-settings h3{margin-bottom:12px;font-size:1rem}.setting-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.setting-row label{white-space:nowrap;font-weight:500;min-width:90px}.setting-row select{flex:1;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);background:var(--bg-input);color:var(--text);font-size:.95rem;font-family:var(--font);cursor:pointer}.setting-row select:focus{outline:none;border-color:var(--primary)}.setting-description{font-size:.8rem;color:var(--text-muted);margin-bottom:12px;padding-left:2px}.setting-description.error-text{color:#ef4444}.setting-description.success-text{color:#22c55e}.youtube-url-row{display:flex;gap:8px;margin-bottom:6px;width:100%}.youtube-url-row input{flex:3;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);background:var(--bg-input);color:var(--text);font-size:.85rem;font-family:var(--font);min-width:0}.youtube-url-row input:focus{outline:none;border-color:var(--primary)}.youtube-url-row input:disabled{opacity:.5}.youtube-url-row .btn{flex:0 0 auto;white-space:nowrap;padding:8px 14px;font-size:.85rem;min-width:unset;width:auto;max-width:none}.rounds-control{flex:1;display:flex;align-items:center;gap:12px}.rounds-control input[type=range]{flex:1;accent-color:var(--primary);cursor:pointer}.rounds-value{font-weight:700;font-size:1.2rem;min-width:28px;text-align:center;color:var(--primary)}.modifier-selection{margin-top:12px}.modifier-selection>label{display:block;font-weight:500;margin-bottom:8px}.modifier-toggles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.modifier-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.1);background:var(--bg-input);color:var(--text-muted);font-size:.85rem;font-family:var(--font);cursor:pointer;transition:all .2s;text-align:left}.modifier-toggle:hover{border-color:#6c63ff66}.modifier-toggle.active{border-color:var(--primary);background:#6c63ff26;color:var(--text)}.modifier-toggle-emoji{font-size:1.2rem;flex-shrink:0}.modifier-toggle-label{font-weight:500;line-height:1.2}.modifier-toggle.disabled-spotify{opacity:.35;cursor:not-allowed;border-color:transparent;background:#ffffff08}.modifier-toggle.disabled-spotify:hover{border-color:transparent}.rejoin-banner{width:100%;max-width:400px;padding:16px 20px;background:linear-gradient(135deg,#6c63ff33,#2ecc7126);border:1px solid rgba(108,99,255,.4);border-radius:var(--radius);text-align:center}.rejoin-banner p{margin-bottom:10px;font-size:.95rem}.rejoin-actions{display:flex;gap:10px;justify-content:center}.rejoin-actions .btn{width:auto;max-width:none;padding:10px 20px;font-size:.9rem}.player-tag{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg-card);border-radius:var(--radius-sm);margin-bottom:8px;font-weight:500;animation:slideIn .3s ease}.player-tag .dot{width:10px;height:10px;border-radius:50%;background:var(--success)}.player-list-mini{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.player-tag-mini{padding:6px 14px;background:var(--bg-card);border-radius:20px;font-size:.85rem;font-weight:500}.empty{color:var(--text-muted);font-style:italic}.round-indicator{font-size:.85rem;color:var(--text-muted);font-weight:600;padding:6px 16px;background:var(--bg-card);border-radius:20px}.modifier-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px;background:linear-gradient(135deg,#6c63ff40,#ff6b6b2e);border:1px solid rgba(108,99,255,.4);border-radius:16px;animation:modifierPop .5s ease;margin:4px 0;max-width:400px;width:100%}.modifier-emoji{font-size:1.6rem}.modifier-label{font-size:1.05rem;font-weight:700;color:var(--text)}.modifier-hint{font-size:.8rem;color:var(--text-muted);font-style:italic}.fog-phase-indicator{font-size:.75rem;color:var(--primary);font-weight:600;padding:2px 8px;background:#6c63ff33;border-radius:8px}@keyframes modifierPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.speed-bonus-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#ffd70040,#ffa50033);border:1px solid rgba(255,215,0,.5);border-radius:14px;font-size:.95rem;color:var(--text);animation:modifierPop .5s ease;margin:6px 0;max-width:400px;width:100%}.speed-bonus-banner .bonus-points{font-weight:800;color:gold;font-size:1.1rem}.song-reveal{padding:20px;background:var(--bg-card);border-radius:var(--radius);width:100%;max-width:360px}.song-reveal .song-title{font-size:1.4rem;font-weight:700;color:var(--primary)}.song-reveal .song-artist{font-size:1rem;color:var(--text-muted);margin-top:4px}.guess-feedback{padding:24px;border-radius:var(--radius);width:100%;max-width:360px}.guess-feedback.correct{background:#2ecc7126;border:2px solid var(--success)}.guess-feedback.partially_correct{background:#f39c1226;border:2px solid var(--warning)}.guess-feedback.incorrect{background:#e74c3c26;border:2px solid var(--danger)}.guess-feedback.pending{background:var(--bg-card)}.guess-feedback .points{font-size:1.5rem;font-weight:800;margin-top:8px}.guess-feedback .total{color:var(--text-muted);font-size:.9rem}.guess-feedback .guess-text{font-style:italic;color:var(--text-muted);margin-top:8px;font-size:.95rem}.guess-feedback .guess-reason{margin-top:6px;font-size:.9rem;color:var(--text-secondary, #ccc);line-height:1.4}.auto-advance-bar{width:100%;max-width:400px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin:16px 0 8px}.auto-advance-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px;animation:shrink-bar linear forwards;transform-origin:left}@keyframes shrink-bar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.scoreboard{width:100%;max-width:400px}.scoreboard h2{margin-bottom:12px}.scoreboard-list{display:flex;flex-direction:column;gap:6px}.scoreboard-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border-radius:var(--radius-sm);transition:all .3s}.scoreboard-row.first{background:linear-gradient(135deg,#ffd70033,#ffd7000d);border:1px solid rgba(255,215,0,.3)}.scoreboard-row.second{background:linear-gradient(135deg,#c0c0c026,#c0c0c00d);border:1px solid rgba(192,192,192,.2)}.scoreboard-row.third{background:linear-gradient(135deg,#cd7f3226,#cd7f320d);border:1px solid rgba(205,127,50,.2)}.scoreboard-row.disconnected{opacity:.4}.scoreboard-row .rank{font-weight:800;font-size:1rem;min-width:32px;color:var(--text-muted)}.scoreboard-row .nickname{flex:1;font-weight:600;text-align:left}.scoreboard-row .score{font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}.winner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;animation:bounceIn .6s ease}.winner .crown{font-size:3rem}.winner .winner-name{font-size:2rem;font-weight:800;background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.winner .winner-score{font-size:1.2rem;color:var(--text-muted)}.my-rank{font-size:1.3rem;font-weight:700;color:var(--primary)}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.yt-player-wrapper{position:relative;width:100%;max-width:480px;aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;background:#000}.yt-player-iframe{position:absolute;inset:0;width:100%;height:100%;z-index:1}.yt-player-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:2}.yt-overlay-label{font-size:1.1rem;color:var(--text-muted);font-weight:500}.audio-bars{display:flex;align-items:flex-end;gap:6px;height:60px}.audio-bars span{display:block;width:10px;background:var(--primary);border-radius:4px 4px 0 0;animation:audioBar 1.2s ease-in-out infinite}.audio-bars span:nth-child(1){height:20px;animation-delay:0s}.audio-bars span:nth-child(2){height:35px;animation-delay:.15s}.audio-bars span:nth-child(3){height:50px;animation-delay:.3s}.audio-bars span:nth-child(4){height:35px;animation-delay:.45s}.audio-bars span:nth-child(5){height:20px;animation-delay:.6s}@keyframes audioBar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@media(min-width:768px){h1{font-size:2.8rem}.screen{padding:40px 24px}.room-code-display .code{font-size:4rem}}.audio-source-toggle{display:flex;gap:8px}.source-btn{flex:1;padding:10px 16px;border:2px solid var(--glass-border);border-radius:12px;background:var(--glass-bg);color:var(--text-primary);font-size:.95rem;cursor:pointer;transition:all .2s;text-align:center}.source-btn.active{border-color:var(--accent);background:#a855f733;box-shadow:0 0 12px #a855f74d}.source-btn:hover:not(.active){border-color:var(--text-secondary)}.btn-spotify{background:#1db954;color:#fff;border:none;padding:12px 24px;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:8px;transition:background .2s}.btn-spotify:hover{background:#1ed760}.btn-spotify:disabled{opacity:.5;cursor:not-allowed}.spotify-user-badge{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px 12px;background:#1db9541a;border-radius:12px;border:1px solid rgba(29,185,84,.3)}.spotify-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.spotify-tabs{display:flex;gap:4px;margin-bottom:12px}.tab-btn{flex:1;padding:8px 12px;border:1px solid var(--glass-border);border-radius:8px;background:transparent;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s}.tab-btn.active{background:var(--glass-bg);color:var(--text-primary);border-color:var(--accent)}.spotify-playlist-grid{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;overflow-x:hidden;padding:2px 4px 2px 2px;max-width:100%}.spotify-playlist-card{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);cursor:pointer;transition:all .2s;text-align:left;color:var(--text-primary);width:100%;min-width:0;min-height:60px;flex-shrink:0;overflow:hidden}.spotify-playlist-card:hover{border-color:#1db954}.spotify-playlist-card.selected{border-color:#1db954;background:#1db95426;box-shadow:0 0 10px #1db95433}.spotify-playlist-card .playlist-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}.spotify-playlist-card .playlist-info{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1}.spotify-playlist-card .playlist-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-playlist-card .playlist-meta{font-size:.75rem;color:var(--text-secondary)}.spotify-settings{margin-top:4px;width:100%}.spotify-admin-section{width:100%}.admin-settings{width:100%;text-align:left}.spotify-connect{text-align:center}.spotify-url-input{margin-top:4px}.spotify-player{opacity:.8}.ff-countdown{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;margin:12px auto;background:#6c63ff26;border:2px solid var(--primary);border-radius:var(--radius);font-size:1.1rem;font-weight:700;color:var(--text);width:fit-content;transition:background .3s,border-color .3s,transform .3s}.ff-countdown.urgent{background:#e74c3c40;border-color:var(--danger);color:var(--danger);animation:ff-pulse .6s ease-in-out infinite alternate}@keyframes ff-pulse{0%{transform:scale(1)}to{transform:scale(1.06)}}.ff-countdown-icon{font-size:1.4rem}.ff-countdown-number{font-size:1.8rem;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}.ff-countdown-label{font-size:.85rem;font-weight:500;opacity:.8}