:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#121212;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}.tournament-setup{max-width:800px;margin:2rem auto;padding:2rem}.tournament-setup-header{text-align:center;margin-bottom:2rem}.tournament-setup-header h2{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary)}.tournament-setup-header p{color:var(--text-dim)}.tournament-setup-progress{margin-bottom:2rem}.progress-bar{width:100%;height:8px;background:var(--bg-elevated);border-radius:10px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-green));transition:width .3s ease}.progress-text{text-align:center;color:var(--text-muted);font-size:.9rem}.tournament-song-inputs{display:flex;flex-direction:column;gap:1rem}.song-input-row{display:flex;align-items:center;gap:1rem}.song-number{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border-radius:50%;font-weight:600;color:var(--text-primary)}.song-input{flex:1;padding:.75rem 1rem;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-primary);font-size:.9rem;transition:border-color .2s}.song-input:focus{outline:none;border-color:var(--accent-cyan)}.input-valid{color:var(--accent-green);font-size:1.2rem;flex-shrink:0}.input-invalid{color:var(--accent-coral);font-size:1.2rem;flex-shrink:0}.btn-submit-songs{margin-top:1rem;padding:1rem 2rem;font-size:1.1rem}.setup-help{margin-top:2rem;padding:1.5rem;background:var(--bg-elevated);border-radius:var(--radius);border-left:4px solid var(--accent-cyan)}.help-title{font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.setup-help ol{margin-left:1.5rem;color:var(--text-muted);line-height:1.8}.tournament-submitted{text-align:center;padding:3rem 2rem}.tournament-error{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);border-radius:8px;color:#ff4d4d;margin-bottom:1rem}.tournament-error svg{flex-shrink:0}.submitted-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:var(--accent-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#000}.tournament-submitted h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--text-primary)}.tournament-submitted p{color:var(--text-dim)}.tournament-voting-header{text-align:center;margin-bottom:1.5rem}.tournament-round{font-size:1.8rem;margin-bottom:.5rem;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tournament-match-info{color:var(--text-muted);font-size:.9rem}.voting-timer{margin-bottom:1rem}.timer-bar{width:100%;height:6px;background:var(--bg-elevated);border-radius:10px;overflow:hidden;margin-bottom:.5rem}.timer-fill{height:100%;background:var(--accent-cyan);transition:width .1s linear}.timer-text{display:block;text-align:center;font-size:1.2rem;font-weight:600;color:var(--text-primary)}.voting-progress{text-align:center;color:var(--text-dim);margin-bottom:2rem;font-size:.9rem}.tournament-songs{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-bottom:2rem}.tournament-song-card{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius-md);transition:all .3s ease}.tournament-song-card.voted{border-color:var(--accent-cyan);background:#4fd1c51a;box-shadow:0 0 20px #4fd1c54d}.tournament-song-card.now-playing{border-color:var(--accent-primary, var(--accent-coral));background:linear-gradient(135deg,#ff4d4d14,#00e5ff14);box-shadow:0 0 25px #ff4d4d66;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 25px #ff4d4d66}50%{box-shadow:0 0 35px #ff4d4d99}}.song-card-label{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:32px;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--text-muted);text-align:center;flex-wrap:wrap}.playing-indicator{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;background:linear-gradient(135deg,var(--accent-primary, var(--accent-coral)) 0%,var(--accent-secondary, var(--accent-cyan)) 100%);border-radius:12px;font-size:.7rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.playing-indicator svg{width:10px;height:10px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.autoplay-progress-container{margin:1rem 0;padding:0 1rem}.autoplay-progress-bar{position:relative;width:100%;height:40px;background:var(--bg-elevated);border-radius:var(--radius);overflow:hidden;display:flex;border:2px solid var(--border-subtle)}.autoplay-progress-segment{flex:1;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease}.autoplay-progress-segment.song-a-segment{background:linear-gradient(135deg,#ff4d4d26,#ff4d4d40);border-right:1px solid var(--border-subtle)}.autoplay-progress-segment.song-b-segment{background:linear-gradient(135deg,#00e5ff26,#00e5ff40)}.autoplay-segment-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);z-index:1}.autoplay-progress-indicator{position:absolute;top:0;bottom:0;width:4px;background:#fff;box-shadow:0 0 10px #fffc;transition:left .5s linear;z-index:2}.autoplay-progress-indicator.playing-a{background:linear-gradient(180deg,var(--accent-primary, var(--accent-coral)) 0%,rgba(255,77,77,.6) 100%);box-shadow:0 0 15px var(--accent-primary, var(--accent-coral))}.autoplay-progress-indicator.playing-b{background:linear-gradient(180deg,var(--accent-secondary, var(--accent-cyan)) 0%,rgba(0,229,255,.6) 100%);box-shadow:0 0 15px var(--accent-secondary, var(--accent-cyan))}.song-card-art{width:100%;aspect-ratio:1;border-radius:var(--radius);object-fit:cover}.song-card-info{text-align:center}.song-card-name{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.song-card-artist{font-size:.9rem;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.song-card-submitter{font-size:.8rem;color:var(--text-muted);margin-top:.5rem}.song-card-actions{display:flex;flex-direction:column;gap:.75rem}.btn-play{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);transition:all .2s}.btn-play.playing{background:var(--accent-green);color:#000;border-color:var(--accent-green)}.btn-vote{padding:1rem;font-size:1rem;font-weight:600}.tournament-vs{font-size:1.5rem;font-weight:700;color:var(--accent-coral);background:#ff69b41a;padding:1rem;border-radius:var(--radius)}.voting-warning{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#ffaa001a;border:1px solid rgba(255,170,0,.3);border-radius:var(--radius);color:#fa0;font-size:.9rem;text-align:center}.tournament-match-result{max-width:800px;margin:0 auto;padding:2rem;text-align:center}.match-result-header h2{font-size:2rem;margin-bottom:2rem;color:var(--text-primary)}.match-result-winner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;background:var(--bg-surface);border-radius:var(--radius-md);border:2px solid var(--accent-green);margin-bottom:2rem}.winner-album-art{width:200px;height:200px;border-radius:var(--radius);object-fit:cover;box-shadow:0 8px 24px #0006}.winner-info{width:100%}.winner-song-name{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.winner-song-artist{font-size:1.1rem;color:var(--text-dim);margin-bottom:.5rem}.winner-submitter{font-size:.9rem;color:var(--text-muted)}.match-result-votes{margin-bottom:2rem}.vote-bars{display:flex;flex-direction:column;gap:1rem}.vote-bar{position:relative;height:50px;background:var(--bg-surface);border-radius:var(--radius);overflow:hidden}.vote-bar-fill{height:100%;transition:width .5s ease}.vote-bar-a .vote-bar-fill{background:linear-gradient(90deg,transparent,rgba(79,209,197,.5))}.vote-bar-b .vote-bar-fill{background:linear-gradient(90deg,transparent,rgba(186,104,200,.5))}.vote-bar-label{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-weight:600;color:var(--text-primary);z-index:1}.match-result-players h3{font-size:1.2rem;margin-bottom:1rem;color:var(--text-primary)}.player-votes-list{display:flex;flex-direction:column;gap:.5rem}.player-vote-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-surface);border-radius:var(--radius)}.player-vote-name{color:var(--text-primary)}.player-vote-badge{padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:600}.vote-a{background:#4fd1c533;color:var(--accent-cyan)}.vote-b{background:#ba68c833;color:var(--accent-purple)}.match-result-footer{margin-top:2rem;color:var(--text-dim)}.tournament-winner{max-width:600px;margin:0 auto;padding:2rem;text-align:center;position:relative;overflow:hidden}.winner-celebration{margin-bottom:3rem;position:relative;z-index:2}.winner-trophy{margin:0 auto 2rem;color:gold;animation:trophy-float 3s ease-in-out infinite}@keyframes trophy-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.winner-title{font-size:2.5rem;margin-bottom:2rem;background:linear-gradient(90deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.winner-song-card{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;background:var(--bg-surface);border:3px solid #ffd700;border-radius:var(--radius-md);box-shadow:0 0 30px #ffd7004d}.winner-song-art{width:250px;height:250px;border-radius:var(--radius);object-fit:cover;box-shadow:0 8px 32px #00000080}.winner-song-info{width:100%}.winner-actions{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;position:relative;z-index:2}.fireworks{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.firework{position:absolute;width:4px;height:4px;border-radius:50%;animation:firework-explode 2s ease-out infinite}.firework:nth-child(1){left:20%;top:30%;animation-delay:0s}.firework:nth-child(2){left:80%;top:40%;animation-delay:.5s}.firework:nth-child(3){left:50%;top:20%;animation-delay:1s}.firework:nth-child(4){left:30%;top:60%;animation-delay:1.5s}.firework:nth-child(5){left:70%;top:70%;animation-delay:.75s}@keyframes firework-explode{0%{box-shadow:0 0 0 4px #ff6b6b,0 0 0 4px #ee5a6f,0 0 0 4px #c06c84;opacity:1;transform:scale(0)}20%{box-shadow:0 -50px #ff6b6b,40px -30px #ee5a6f,40px 30px #c06c84,0 50px #f9ca24,-40px 30px #f0932b,-40px -30px #eb4d4b,30px 0 #6c5ce7,-30px 0 #a29bfe,0 -30px 0 4px gold,20px -20px 0 4px #ffed4e,20px 20px 0 4px #ffa502,0 30px 0 4px #ff6348,-20px 20px 0 4px #ff4757,-20px -20px 0 4px #5f27cd;opacity:1;transform:scale(1)}80%{box-shadow:0 -150px 0 -4px #ff6b6b,120px -90px 0 -4px #ee5a6f,120px 90px 0 -4px #c06c84,0 150px 0 -4px #f9ca24,-120px 90px 0 -4px #f0932b,-120px -90px 0 -4px #eb4d4b,90px 0 0 -4px #6c5ce7,-90px 0 0 -4px #a29bfe,0 -90px 0 -4px gold,60px -60px 0 -4px #ffed4e,60px 60px 0 -4px #ffa502,0 90px 0 -4px #ff6348,-60px 60px 0 -4px #ff4757,-60px -60px 0 -4px #5f27cd;opacity:0;transform:scale(1.5)}to{opacity:0;transform:scale(1.5)}}@media(max-width:768px){.tournament-songs{grid-template-columns:1fr;gap:1.5rem}.tournament-vs{order:0;margin:0 auto}.tournament-song-card{order:1}.winner-song-art{width:180px;height:180px}.winner-title{font-size:2rem}}.tournament-total{margin-top:.5rem;font-size:.85rem;color:var(--accent-cyan);font-weight:600}.tournament-voting{max-width:1200px;margin:0 auto;padding:2rem}.playback-controls{margin-top:2rem;padding:1.5rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.playback-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.now-playing-label{font-size:.9rem;color:var(--text-dim);font-weight:500}.playback-buttons{display:flex;gap:.5rem}.playback-progress{display:flex;align-items:center;gap:1rem}.playback-time{font-size:.85rem;color:var(--text-muted);min-width:45px;text-align:center}.playback-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--bg-elevated);border-radius:10px;outline:none;cursor:pointer}.playback-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-cyan);border-radius:50%;cursor:pointer;transition:all .2s ease}.playback-slider::-webkit-slider-thumb:hover{background:var(--accent-purple);transform:scale(1.2)}.playback-slider::-moz-range-thumb{width:16px;height:16px;background:var(--accent-cyan);border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.playback-slider::-moz-range-thumb:hover{background:var(--accent-purple);transform:scale(1.2)}.tournament-bracket{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1.5rem;max-height:calc(100vh - 4rem);overflow-y:auto}.bracket-round{display:flex;flex-direction:column;min-width:280px;flex-shrink:0}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #4fd1c566}50%{box-shadow:0 0 25px #4fd1c599}}@keyframes blink{0%,to{opacity:1}50%{opacity:.6}}.tournament-bracket-view{position:fixed;inset:0;width:100vw;height:100vh;display:flex;flex-direction:column;z-index:40;padding-top:70px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));transition:width .5s ease;box-shadow:0 0 10px var(--accent-cyan)}.progress-text{font-size:.75rem;color:var(--text-muted);text-align:center;font-weight:500}.bracket-view-main{flex:1;overflow-x:auto;overflow-y:auto;display:flex;align-items:center;padding:2rem}.admin-page{width:100%;max-width:1000px;margin:0 auto;padding:2rem 1rem;min-height:calc(100vh - 120px)}.admin-container{background:#ffffff0d;border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.1)}.admin-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.admin-header h1{font-size:2rem;margin:0 0 .5rem;background:linear-gradient(135deg,var(--accent-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.admin-subtitle{color:#fff9;margin:0;font-size:.95rem}.admin-section{margin-bottom:2rem}.admin-section h2{font-size:1.3rem;margin:0 0 1rem;color:#ffffffe6}.admin-empty{text-align:center;padding:2rem;color:#ffffff80;background:#0003;border-radius:12px;border:1px dashed rgba(255,255,255,.1)}.admin-user-card{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:all .2s ease}.admin-user-card:hover{background:#ffffff0d;border-color:#ffffff26}.admin-user-info{flex:1}.admin-user-name{font-size:1.05rem;font-weight:600;margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}.admin-you-badge{display:inline-block;padding:.15rem .5rem;background:var(--accent-color);color:var(--bg-color);border-radius:6px;font-size:.75rem;font-weight:700}.admin-user-id{font-size:.85rem;color:#ffffff80;margin-bottom:.25rem;font-family:Courier New,monospace}.admin-user-date{font-size:.8rem;color:#fff6}.admin-remove-btn{padding:.5rem;background:#ff3b301a;color:#ff3b30;border:1px solid rgba(255,59,48,.2);border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.admin-remove-btn:hover:not(:disabled){background:#ff3b3033;border-color:#ff3b3066}.admin-remove-btn:disabled{opacity:.3;cursor:not-allowed}.admin-add-form{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem}.admin-form-group{margin-bottom:1.25rem}.admin-form-group label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.9rem;color:#fffc}.admin-input{width:100%;padding:.75rem;background:#0000004d;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;font-size:.95rem;transition:all .2s ease}.admin-input:focus{outline:none;border-color:var(--accent-color);background:#0006}.admin-input::placeholder{color:#ffffff4d}.admin-input-hint{margin:.5rem 0 0;font-size:.8rem;color:#fff6}.admin-error{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#ff3b301a;border:1px solid rgba(255,59,48,.3);border-radius:8px;color:#ff3b30;font-size:.9rem;margin-bottom:1rem}.admin-add-btn{width:100%;padding:.75rem;background:var(--accent-color);color:var(--bg-color);border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease}.admin-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1ed76066}.admin-info{background:#1ed7600d;border:1px solid rgba(30,215,96,.2);border-radius:12px;padding:1.5rem}.admin-info h2{color:var(--accent-color)}.admin-info-content p{margin:0 0 .75rem;line-height:1.6}.admin-info-content p:last-child{margin-bottom:0}.admin-info-content strong{color:#ffffffe6}.admin-info-text{color:#fff9;font-size:.9rem}.admin-back-btn{width:100%;padding:.75rem;background:#ffffff0d;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;margin-top:1rem}.admin-back-btn:hover{background:#ffffff1a;border-color:#ffffff40}.admin-initial-setup{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 2rem;min-height:400px}.admin-initial-setup svg{color:var(--accent-color);margin-bottom:1.5rem}.admin-initial-setup h1{font-size:1.8rem;margin:0 0 1rem;color:#ffffffe6}.admin-initial-setup>p{color:#fff9;margin:0 0 2rem;font-size:1rem;max-width:500px}.admin-initial-info{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;margin-bottom:2rem;max-width:400px;width:100%}.admin-initial-info p{margin:.5rem 0;color:#ffffffb3;font-size:.9rem}.admin-initial-info strong{color:#ffffffe6}.admin-initial-buttons{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:300px}.admin-access-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 2rem;min-height:400px}.admin-access-denied svg{color:#ff3b30;margin-bottom:1.5rem}.admin-access-denied h1{font-size:1.8rem;margin:0 0 1rem;color:#ffffffe6}.admin-access-denied p{color:#fff9;margin:0 0 2rem;font-size:1rem}.admin-access-denied .admin-back-btn{max-width:300px}@media(max-width:768px){.admin-page{padding:1rem}.admin-container{padding:1.5rem}.admin-header h1{font-size:1.5rem}.admin-user-card{flex-direction:column;align-items:flex-start;gap:.75rem}.admin-remove-btn{align-self:flex-end}}.daily-activity-section{width:100%;max-width:1200px;margin:0 auto 1.5rem;padding:0 1rem}.activity-title{font-size:.9rem;font-weight:600;margin-bottom:.75rem;color:var(--text-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px}.activity-bars-container{position:relative}.activity-bars{display:flex;gap:.5rem;justify-content:center;align-items:flex-end;height:80px;padding:.5rem;background:transparent}.activity-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;transition:transform .2s ease}.activity-bar-wrapper:hover{transform:translateY(-2px)}.activity-bar-container{width:100%;height:50px;display:flex;align-items:flex-end;justify-content:center}.activity-bar{width:100%;max-width:20px;background:#ffffff0d;border-radius:4px 4px 0 0;position:relative;transition:all .3s ease}.activity-bar-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--accent-coral) 0%,var(--accent-cyan) 100%);border-radius:4px 4px 0 0;opacity:.8}.activity-bar-wrapper:hover .activity-bar-fill{opacity:1;box-shadow:0 0 12px #ff4d4d80}.activity-day-label{font-size:.65rem;color:var(--text-muted);text-align:center;white-space:nowrap}.activity-tooltip{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.75rem;min-width:200px;box-shadow:0 4px 12px #0000004d;z-index:10}.tooltip-date{font-size:.85rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.tooltip-stats{display:flex;flex-direction:column;gap:.3rem}.tooltip-stat{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}.stat-label{color:var(--text-muted)}.stat-value{color:var(--accent-cyan);font-weight:600}@media(max-width:600px){.activity-bars{gap:.3rem}.activity-bar{max-width:16px}.activity-day-label{font-size:.55rem}}.admin-dashboard{width:100%;max-width:1200px;margin:0 auto}.admin-dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}.admin-dashboard-title{display:flex;align-items:center;gap:.75rem}.admin-dashboard-title h1{font-size:1.8rem;font-weight:600;background:linear-gradient(135deg,var(--accent-coral),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.admin-dashboard-title svg{color:var(--accent-coral);filter:drop-shadow(0 0 8px rgba(255,77,77,.5))}.admin-users-list{display:flex;flex-direction:column;gap:.75rem}.admin-user-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem;display:flex;align-items:center;justify-content:space-between;transition:all .2s ease}.admin-user-card:hover{border-color:#ffffff1a;background:#1c1c1c}.admin-user-card.banned{opacity:.6;border-color:#ff4d4d4d;background:#ff4d4d0d}.admin-user-info{display:flex;align-items:center;gap:1rem;flex:1}.admin-user-name{font-weight:600;font-size:1rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-user-badge{padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.admin-user-badge.admin{background:#ffc10733;color:#ffc107}.admin-user-badge.banned{background:#ff4d4d33;color:var(--accent-coral)}.admin-activity-time{font-size:.8rem;color:var(--text-muted)}.admin-btn{padding:.75rem 1.5rem;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.admin-btn:hover{background:#222;border-color:#ffffff26}.admin-btn-danger{background:var(--danger);color:#fff;border-color:transparent}.admin-btn-danger:hover{background:#f66}.admin-btn-warning{background:#ffc107;color:#000;border-color:transparent;font-weight:600}.admin-btn-warning:hover{background:#ffcd38}.admin-empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.admin-empty svg{font-size:3rem;margin-bottom:1rem;opacity:.3}.admin-empty h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary)}.admin-empty p{font-size:.9rem}@media(max-width:768px){.admin-user-card{flex-direction:column;align-items:flex-start;gap:1rem}}.legal-page{width:100%;max-width:800px;margin:0 auto;padding:2rem 1rem}.legal-back-btn{background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;cursor:pointer;transition:all .2s ease;margin-bottom:1rem}.legal-back-btn:hover{background:var(--bg-surface);color:var(--accent-cyan);border-color:var(--accent-cyan)}.legal-content{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:2.5rem}.legal-content h1{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary);background:linear-gradient(135deg,var(--accent-coral),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.legal-updated{font-size:.9rem;color:var(--text-muted);margin-bottom:2rem}.legal-content section{margin-bottom:2rem}.legal-content h2{font-size:1.3rem;margin-bottom:.75rem;color:var(--text-primary);border-bottom:1px solid var(--border-subtle);padding-bottom:.5rem}.legal-content h3{font-size:1.1rem;margin:1rem 0 .5rem;color:var(--accent-cyan)}.legal-content p{line-height:1.7;color:var(--text-primary);margin-bottom:1rem}.legal-content ul{list-style:none;padding-left:0;margin:1rem 0}.legal-content li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;line-height:1.6;color:var(--text-primary)}.legal-content li:before{content:"•";position:absolute;left:.5rem;color:var(--accent-coral);font-weight:700}@media(max-width:768px){.legal-content{padding:1.5rem}.legal-content h1{font-size:1.5rem}.legal-content h2{font-size:1.1rem}}html{font-size:clamp(14px,.45vw + 12px,20px)}:root{--bg-deep: #0a0a0a;--bg-surface: #141414;--bg-elevated: #1a1a1a;--border-subtle: rgba(255, 255, 255, .06);--accent-coral: #FF4D4D;--accent-cyan: #00E5FF;--accent-green: #1DB954;--text-primary: #E8E8E8;--text-muted: #808080;--text-dim: #505050;--danger: #FF4D4D;--glow-coral: 0 0 20px rgba(255, 77, 77, .4);--glow-cyan: 0 0 20px rgba(0, 229, 255, .4);--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;background-image:radial-gradient(ellipse at 20% 50%,rgba(255,77,77,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(0,229,255,.03) 0%,transparent 50%)}#root{max-width:min(1000px,92vw);margin:0 auto;min-height:100vh}.app{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}.header-left,.header-right{display:flex;align-items:center;gap:1rem;min-width:200px}.header-right{justify-content:flex-end}.header-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-green)}.header-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:var(--text-muted);font-weight:600;font-size:.9rem}@media(max-width:600px){.header-left,.header-right{min-width:auto}}.btn{border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;font-family:inherit;padding:.75rem 1.5rem;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);transition:all .2s ease}.btn:hover{background:#222;border-color:#ffffff1a}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-green);color:#000;font-weight:600;border-color:transparent}.btn-primary:hover{background:#1ed760}.btn-small{font-size:.8rem;padding:.4rem .8rem}.btn-back{font-size:.9rem;padding:.5rem .8rem;background:transparent;border-color:transparent}.btn-back:hover{background:var(--bg-elevated)}.btn-hero{font-size:1.1rem;padding:1rem 2rem;border-radius:var(--radius);font-weight:600;width:100%;max-width:360px;letter-spacing:.01em}.btn-create{background:var(--accent-coral);color:#fff;border-color:transparent;box-shadow:var(--glow-coral)}.btn-create:hover{background:#f66;box-shadow:0 0 30px #ff4d4d80}.btn-join{background:var(--bg-elevated);border:1px solid var(--accent-cyan);color:var(--accent-cyan)}.btn-join:hover{background:#00e5ff14;box-shadow:var(--glow-cyan)}.btn-start{background:var(--accent-green);color:#000;border-color:transparent;box-shadow:0 0 20px #1db9544d}.btn-start:hover{background:#1ed760;box-shadow:0 0 30px #1db95480}.btn-error{background:var(--danger)!important;color:#fff!important;box-shadow:0 0 20px #ff4d4d4d!important}.btn-error:hover{background:#ff6b6b!important;box-shadow:0 0 30px #ff4d4d80!important}.btn-solo{background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);padding:.75rem 2rem;font-size:.95rem}.btn-solo:hover{color:var(--text-primary);border-color:#ffffff26}.btn-control{font-size:1.1rem;padding:.8rem 2rem}.loading{color:var(--text-muted);text-align:center;margin-top:4rem}.error-banner{background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);color:var(--accent-coral);padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;width:100%;text-align:center}.premium-warning{display:flex;align-items:flex-start;gap:1rem;background:linear-gradient(135deg,#ffc10726,#ff98001a);border:2px solid rgba(255,193,7,.4);border-radius:12px;padding:1.25rem;margin:1rem 0;width:100%;max-width:600px;box-shadow:0 4px 12px #ffc10733}.premium-warning svg{flex-shrink:0;color:#ffc107;margin-top:.25rem}.premium-warning-content{flex:1;color:#fffffff2}.premium-warning-content strong{display:block;font-size:1.05rem;margin-bottom:.5rem;color:#ffc107}.premium-warning-content p{margin:0;font-size:.9rem;line-height:1.5;color:#fffc}.error{color:var(--danger);font-size:.9rem}.login-page{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem 0 3rem;width:100%;max-width:480px;margin:0 auto}.login-hero{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.login-title{font-size:3rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,var(--accent-coral) 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.login-subtitle{color:var(--text-muted);font-size:1.1rem;margin:0}.login-features{display:flex;flex-direction:column;gap:1rem;width:100%}.login-feature{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);transition:all .2s}.login-feature:hover{border-color:#ffffff1a;background:var(--bg-elevated)}.login-feature-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(135deg,#ff4d4d26,#00e5ff26);border-radius:10px;color:var(--accent-cyan);flex-shrink:0}.login-feature-text{display:flex;flex-direction:column;gap:.25rem}.login-feature-title{font-weight:600;font-size:.95rem;color:var(--text-primary)}.login-feature-desc{font-size:.85rem;color:var(--text-muted)}.login-spotify-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1rem 2rem;background:#1db954;color:#000;border:none;border-radius:50px;font-size:1.1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #1db9544d}.login-spotify-btn:hover{background:#1ed760;transform:translateY(-2px);box-shadow:0 6px 25px #1db95466}.login-spotify-btn:active{transform:translateY(0)}.login-spotify-btn svg{flex-shrink:0}.login-how-it-works{width:100%;padding:1.5rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius)}.login-how-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin:0 0 1rem;text-align:center}.login-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.login-step{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.login-step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--accent-coral);color:#fff;border-radius:50%;font-size:.75rem;font-weight:700}.login-step-arrow{color:var(--text-dim);display:flex}.login-footer-note{font-size:.8rem;color:var(--text-dim);margin:0;text-align:center}.login{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-top:20vh}.login h1{font-size:2.8rem;letter-spacing:-.03em;font-weight:700}.login p{color:var(--text-muted)}.home-page{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;padding-top:2rem}.home-hero{display:flex;flex-direction:column;align-items:center;gap:1rem}.home-title{font-size:2.8rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,var(--accent-coral) 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-subtitle{color:var(--text-muted);font-size:1rem}.home-actions{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;margin-bottom:5vh}.join-form{display:flex;gap:.5rem;width:100%;max-width:320px}.join-input{flex:1;background:var(--bg-elevated);border:1px solid var(--accent-cyan);border-radius:var(--radius-sm);color:var(--accent-cyan);font-family:Courier New,monospace;font-size:1.2rem;padding:.75rem 1rem;text-align:center;letter-spacing:.15em;outline:none}.join-input::placeholder{color:var(--text-dim);letter-spacing:.1em;font-size:.9rem}.join-input:focus{box-shadow:var(--glow-cyan)}.home-divider{display:flex;align-items:center;width:100%;max-width:320px;gap:1rem;color:var(--text-dim);font-size:.8rem}.home-divider:before,.home-divider:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.party-code{display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;padding:.75rem 1.5rem;border-radius:var(--radius);background:var(--bg-surface);border:1px solid var(--border-subtle);transition:all .2s}.party-code:hover{border-color:#00e5ff4d;box-shadow:var(--glow-cyan)}.party-code-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim)}.party-code-value{font-family:Courier New,monospace;font-size:2rem;font-weight:700;letter-spacing:.2em;color:var(--accent-cyan);text-shadow:0 0 15px rgba(0,229,255,.5)}.party-code-hint{font-size:.7rem;color:var(--text-dim)}.lobby-page{width:100%;display:flex;flex-direction:column;gap:1.5rem}.lobby-share-hint{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.lobby-share-hint svg{opacity:.6}.lobby-content-grid{display:flex;flex-direction:column;gap:1.5rem}@media(min-width:1100px){.lobby-content-grid{position:relative}.lobby-players-section{position:absolute;right:calc(100% + 1.5rem);top:0;width:260px}.lobby-settings-section{width:100%}}.lobby-section{display:flex;flex-direction:column}.lobby-section-title{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.lobby-section-title svg{opacity:.7}.lobby-player-count{margin-left:auto;font-size:.75rem;background:var(--bg-elevated);padding:.2rem .5rem;border-radius:10px;color:var(--text-dim)}.lobby-party-code-section{margin-bottom:1.5rem}.lobby-party-code-section .lobby-share-hint{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);margin-top:.5rem}.lobby-party-code-section .lobby-share-hint svg{opacity:.6}.lobby-players-list{display:flex;flex-direction:column;gap:.5rem}.lobby-player-card{display:flex;align-items:center;gap:.75rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.5rem .75rem;animation:slideInLeft .3s ease-out backwards;position:relative}@keyframes slideInLeft{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.lobby-player-card .player-avatar{flex-direction:row;gap:.75rem}.lobby-player-card .avatar-name{font-size:.9rem;max-width:none}.lobby-player-host{border-color:#ff4d4d4d;background:#ff4d4d0d}.lobby-player-disconnected{opacity:.45}.lobby-player-settings{position:relative;margin-left:auto;display:flex;align-items:center}.lobby-player-settings-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s;opacity:0}.lobby-player-card:hover .lobby-player-settings-btn{opacity:1}.lobby-player-settings-btn:hover{background:#ffffff0d;color:var(--text-primary)}.lobby-player-settings-btn.active{opacity:1;background:#ffffff14;color:var(--text-primary)}.lobby-player-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:0 4px 16px #00000080;min-width:120px;z-index:10;animation:dropdown-slidein .15s ease-out;overflow:hidden}@keyframes dropdown-slidein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.lobby-player-dropdown-item{width:100%;background:none;border:none;color:var(--text-primary);cursor:pointer;padding:.6rem .75rem;text-align:left;font-size:.85rem;transition:all .15s;display:flex;align-items:center;gap:.5rem}.lobby-player-dropdown-item:hover{background:#ff4d4d1a;color:var(--accent-coral)}.lobby-player-dropdown-item:active{background:#ff4d4d26}.lobby-player-dc-badge{font-size:.7rem;color:var(--text-dim);font-style:italic}.lobby-player-you-badge{font-size:.65rem;font-weight:700;color:var(--accent-green);background:#2ed5731f;padding:.25rem .5rem;border-radius:10px;letter-spacing:.05em;margin-left:.5rem}.lobby-player-badges{display:flex;align-items:center;gap:.5rem;margin-left:auto}.lobby-player-empty{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-dim);font-size:.8rem}.lobby-player-empty-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-elevated);opacity:.5}.lobby-waiting-banner{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;margin-top:1rem;background:var(--bg-elevated);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.85rem}.lobby-waiting-dots{display:flex;gap:4px}.lobby-waiting-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);animation:waitingPulse 1.4s infinite ease-in-out both}.lobby-waiting-dots span:nth-child(1){animation-delay:0s}.lobby-waiting-dots span:nth-child(2){animation-delay:.16s}.lobby-waiting-dots span:nth-child(3){animation-delay:.32s}@keyframes waitingPulse{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.lobby-actions{display:flex;flex-direction:column-reverse;gap:1rem;margin-bottom:1rem}@media(min-width:480px){.lobby-actions{flex-direction:row;justify-content:space-between;align-items:center}}.btn-leave{display:flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);font-size:1.1rem;padding:1rem 2rem;border-radius:var(--radius);font-weight:600;width:100%;max-width:320px}.btn-leave:hover{border-color:var(--danger);color:var(--danger);background:#ff4d4d1a}.btn-start{display:flex;align-items:center;justify-content:center;gap:.5rem}.lobby-start-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--text-dim);font-size:.8rem;text-align:center}.section-title{font-size:1rem;color:var(--text-muted);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:500}.player-avatar{display:flex;flex-direction:column;align-items:center;gap:.4rem}.player-avatar-sm .avatar-ring{width:40px;height:40px}.player-avatar-md .avatar-ring{width:60px;height:60px}.player-avatar-lg .avatar-ring{width:80px;height:80px}.avatar-ring{border-radius:50%;overflow:hidden;border:2px solid var(--border-subtle);transition:border-color .3s,box-shadow .3s}.player-answered .avatar-ring{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);font-weight:600;font-size:1.2rem;color:var(--text-muted)}.avatar-name{font-size:.75rem;color:var(--text-muted);text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.host-badge{display:inline-block;background:var(--accent-coral);color:#fff;font-size:.65rem;padding:.25rem .5rem;border-radius:10px;font-weight:700;letter-spacing:.05em}.settings-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.settings-title{font-size:1rem;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.settings-panel-modern{gap:1.25rem}.settings-panel-modern .settings-title{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle);margin-bottom:.25rem}.settings-panel-modern .settings-title svg{opacity:.7}.setting-section{display:flex;flex-direction:column;gap:.75rem}.setting-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;position:relative}.setting-label svg{opacity:.6}.setting-more-btn{margin-left:auto;background:#00e5ff14;border:1px solid rgba(0,229,255,.2);color:var(--accent-cyan);padding:.3rem .6rem;border-radius:6px;font-size:.7rem;cursor:pointer;display:flex;align-items:center;gap:.3rem;transition:all .15s;text-transform:none;letter-spacing:0;font-weight:500}.setting-more-btn:hover{background:#00e5ff26;border-color:#00e5ff66;transform:translateY(-1px)}.setting-more-btn svg{opacity:1}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:480px){.setting-grid{grid-template-columns:1fr}}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:480px){.mode-cards{grid-template-columns:1fr}}.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;text-align:left;font-family:inherit}.mode-card:hover:not(:disabled){border-color:#ffffff26;background:#1e1e1e}.mode-card:disabled{cursor:default}.mode-card-active{border-color:var(--accent-coral);background:#ff4d4d1a}.mode-card-active:hover:not(:disabled){border-color:var(--accent-coral);background:#ff4d4d26}.mode-card-icon{color:var(--text-muted);transition:color .2s}.mode-card-active .mode-card-icon{color:var(--accent-coral)}.mode-card-title{font-size:.95rem;font-weight:600;color:var(--text-primary)}.mode-card-desc{font-size:.75rem;color:var(--text-dim);line-height:1.4}.setting-chips{display:flex;flex-wrap:wrap;gap:.5rem}.setting-chip{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-muted);padding:.5rem 1rem;border-radius:20px;font-size:.85rem;cursor:pointer;transition:all .2s;font-family:inherit;min-width:48px;text-align:center}.setting-chip:hover:not(:disabled){border-color:#ffffff26;color:var(--text-primary)}.setting-chip:disabled{cursor:default}.setting-chip-active{background:var(--accent-coral);border-color:var(--accent-coral);color:#fff;font-weight:600}.setting-chip-active:hover:not(:disabled){background:#f66;border-color:#f66}.setting-chip-wide{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem}.setting-chip-wide svg{flex-shrink:0}.setting-chips-with-input{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.setting-custom-input{width:108px;background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.85rem;text-align:center;outline:none;font-family:inherit;transition:border-color .15s}.setting-custom-input:focus{border-color:var(--accent-cyan)}.setting-custom-input::placeholder{color:var(--text-dim)}.setting-custom-input:disabled{opacity:.5;cursor:default}.setting-info{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 1rem;background:#00e5ff14;border:1px solid rgba(0,229,255,.2);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-muted);line-height:1.4}.setting-info svg{flex-shrink:0;color:var(--accent-cyan);margin-top:1px}.setting-warning{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.25);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text-primary);line-height:1.5;margin-top:.75rem}.setting-warning svg{flex-shrink:0;color:var(--accent-coral);margin-top:2px}.setting-warning strong{display:block;color:var(--accent-coral);margin-bottom:.5rem;font-size:.9rem}.setting-warning p{margin:0 0 .75rem;color:var(--text-muted)}.setting-warning-detail{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#0003;border-radius:var(--radius-sm);margin-top:.5rem}.setting-warning-detail>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);font-weight:600}.player-list-compact{display:flex;flex-wrap:wrap;gap:.5rem}.player-chip{display:inline-flex;align-items:center;padding:.25rem .75rem;background:#00e5ff26;border:1px solid rgba(0,229,255,.3);border-radius:12px;font-size:.8rem;color:var(--accent-cyan);font-weight:500}.playlist-modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:2rem;animation:playlist-modal-fadein .15s ease-out}@keyframes playlist-modal-fadein{0%{opacity:0}to{opacity:1}}.playlist-modal{width:100%;max-width:500px;max-height:70vh;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 8px 32px #0009;animation:playlist-modal-slidein .2s ease-out;overflow:hidden}@keyframes playlist-modal-slidein{0%{transform:scale(.95) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.playlist-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border-subtle)}.playlist-modal-title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;margin:0;color:var(--text-primary)}.playlist-modal-title svg{color:var(--accent-cyan)}.playlist-modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;border-radius:6px;transition:all .15s;font-family:inherit}.playlist-modal-close:hover{color:var(--text-primary);background:#ffffff14}.playlist-modal-search{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border-subtle);color:var(--text-dim)}.playlist-modal-search input{flex:1;background:none;border:none;color:var(--text-primary);font-size:.9rem;outline:none;font-family:inherit}.playlist-modal-search input::placeholder{color:var(--text-dim)}.playlist-modal-list{flex:1;overflow-y:auto;padding:.25rem 0}.playlist-modal-empty{padding:2rem;text-align:center;color:var(--text-dim);font-size:.85rem}.playlist-modal-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6rem 1.25rem;background:none;border:none;color:var(--text-primary);cursor:pointer;text-align:left;font-family:inherit;transition:background .12s}.playlist-modal-item:hover{background:#ffffff0d}.playlist-modal-item-active{background:#00e5ff14;border-left:3px solid var(--accent-cyan);padding-left:calc(1.25rem - 3px)}.playlist-modal-img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0}.playlist-modal-img-placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:var(--text-dim)}.playlist-modal-info{display:flex;flex-direction:column;min-width:0;flex:1}.playlist-modal-name{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-modal-count{font-size:.75rem;color:var(--text-dim);margin-top:.15rem}.playlist-modal-check{color:var(--accent-cyan);flex-shrink:0}.playlist-modal-checkbox{width:24px;height:24px;border:2px solid var(--border-subtle);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;background:var(--bg-surface)}.playlist-modal-item-active .playlist-modal-checkbox{border-color:var(--accent-cyan);background:var(--accent-cyan)}.playlist-modal-checkbox svg{color:var(--bg-deep)}.playlist-modal-select-all{border-bottom:1px solid var(--border-subtle);margin-bottom:.25rem}.playlist-modal-select-all:hover{background:#ffffff14}.player-host-badge{display:inline-block;margin-left:.5rem;padding:.15rem .4rem;font-size:.65rem;font-weight:600;color:var(--accent-coral);background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);border-radius:4px;letter-spacing:.03em}.setting-label-toggle{display:flex;align-items:center;justify-content:space-between;width:100%}.setting-label-text{display:flex;align-items:center;gap:.5rem}.setting-toggle{position:relative;width:44px;height:24px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:12px;cursor:pointer;transition:all .2s ease;padding:0;flex-shrink:0;font-family:inherit}.setting-toggle:disabled{opacity:.5;cursor:default}.setting-toggle-active{background:var(--accent-green);border-color:var(--accent-green)}.setting-toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease}.setting-toggle-active .setting-toggle-knob{transform:translate(20px)}.vinyl{border-radius:50%;background:conic-gradient(from 0deg,#111,#1a1a1a,#111,#1a1a1a,#111,#1a1a1a,#111,#1a1a1a,#111,#1a1a1a,#111,#1a1a1a,#111 360deg);position:relative;box-shadow:0 0 0 3px #222,0 0 30px #00000080;flex-shrink:0}.vinyl-spinning{animation:spin 2s linear infinite}.vinyl-grooves{position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(255,255,255,.03);box-shadow:inset 0 0 0 8px #ffffff05,inset 0 0 0 16px #ffffff03,inset 0 0 0 24px #ffffff05}.vinyl-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;border-radius:50%;overflow:hidden;background:var(--bg-elevated);border:2px solid #333}.vinyl-art{width:100%;height:100%;object-fit:cover}.vinyl-dot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,var(--accent-coral) 0%,var(--bg-elevated) 70%)}.countdown-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000e6;z-index:100}.countdown-number{font-size:8rem;font-weight:900;color:var(--accent-cyan);text-shadow:0 0 40px rgba(0,229,255,.6),0 0 80px rgba(0,229,255,.3);animation:countdown-pop 1s ease-out;letter-spacing:-.05em}@keyframes countdown-pop{0%{transform:scale(2);opacity:0}50%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:1}}.game-page{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.game-header{width:100%;display:flex;justify-content:space-between;align-items:center}.round-indicator{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.answered-count{font-size:.8rem;color:var(--text-dim)}.timer-bar{width:100%;height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden;position:relative}.timer-bar-fill{height:100%;border-radius:3px;transition:width .05s linear,background-color .05s linear;box-shadow:0 0 8px #00e5ff66}.timer-bar-fill.timer-urgent{box-shadow:0 0 8px #ff4d4d99;animation:timer-pulse 1s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.85}}.timer-text{position:absolute;right:0;top:12px;font-size:.75rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.game-playing{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}.multi-select-hint{color:var(--text-muted);font-size:.85rem;text-align:center;margin:0}.btn-confirm-answer{margin-top:.5rem}.year-track-preview{display:flex;align-items:center;gap:1rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem;max-width:450px;margin-left:auto;margin-right:auto}.year-track-art{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0}.year-track-art-placeholder{width:80px;height:80px;border-radius:8px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}.year-track-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}.year-track-name{font-size:1rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.year-track-artist{font-size:.85rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.year-guess-hint{font-size:1rem;color:var(--text-muted);text-align:center;margin-bottom:1.5rem;font-weight:500}.year-input-container{display:flex;flex-direction:column;align-items:center;gap:.75rem}.year-input{width:300px;text-align:center;font-size:1.5rem;font-weight:700;padding:.875rem 1.5rem;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-primary);outline:none;font-family:inherit;-moz-appearance:textfield}.year-input::-webkit-outer-spin-button,.year-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.year-input:focus{border-color:var(--accent-cyan)}.year-input:disabled{opacity:.6}.year-submitted-label{color:var(--accent-green);font-weight:600;font-size:.9rem}.result-correct-year{font-size:1.1rem;font-weight:700;color:var(--accent-cyan)}.hol-container{display:flex;align-items:center;gap:1rem;width:100%}.hol-song{flex:1;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);text-align:center}.hol-album-art{width:120px;height:120px;border-radius:var(--radius-sm);object-fit:cover}.hol-song-info{display:flex;flex-direction:column;gap:.25rem}.hol-song-name{font-weight:600;font-size:.95rem;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hol-song-artist{font-size:.8rem;color:var(--text-muted)}.hol-popularity{display:flex;flex-direction:column;align-items:center;gap:.15rem}.hol-popularity-number{font-size:2rem;font-weight:700;color:var(--accent-cyan);line-height:1}.hol-popularity-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.hol-vs{font-size:1.2rem;font-weight:700;color:var(--accent-coral);flex-shrink:0}.hol-buttons{display:flex;gap:1rem;width:100%}.hol-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem}.hol-btn-higher{background:#1db95426;border-color:#1db95466;color:#1db954}.hol-btn-higher:hover:not(:disabled){background:#1db95440}.hol-btn-lower{background:#ff4d4d26;border-color:#ff4d4d66;color:var(--accent-coral)}.hol-btn-lower:hover:not(:disabled){background:#ff4d4d40}.hol-btn-selected{opacity:.6}.hol-result-container{display:flex;align-items:center;gap:2rem;justify-content:center;width:100%;margin-bottom:1rem}.hol-result-song{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;flex:1;max-width:200px}.hol-result-art{width:120px;height:120px;border-radius:var(--radius-sm);object-fit:cover;box-shadow:0 4px 12px #0000004d}.hol-result-info{display:flex;flex-direction:column;gap:.25rem;width:100%}.hol-result-name{font-size:.9rem;font-weight:600;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hol-result-artist{font-size:.75rem;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.hol-result-popularity{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem;background:#4fd1c51a;border:2px solid var(--accent-cyan);border-radius:var(--radius-sm);margin-top:.5rem}.hol-result-popularity-revealed{background:#1db95426;border-color:var(--accent-green);animation:hol-reveal .5s ease-out}.hol-result-pop-number{font-size:2rem;font-weight:700;color:var(--accent-cyan)}.hol-result-popularity-revealed .hol-result-pop-number{color:var(--accent-green)}.hol-result-pop-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:600}@keyframes hol-reveal{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.hol-result-vs{font-weight:700;color:var(--accent-coral);font-size:1.2rem;padding:.5rem 1rem;background:#ff69b41a;border-radius:var(--radius-sm)}@media(max-width:768px){.hol-result-container{flex-direction:column;gap:1rem}.hol-result-song{max-width:100%}.hol-result-art{width:100px;height:100px}.hol-result-pop-number{font-size:1.6rem}.hol-result-vs{font-size:1rem}}@media(max-width:480px){.hol-container{flex-direction:column;gap:.5rem}.hol-vs{font-size:1rem}.hol-album-art{width:80px;height:80px}.hol-song{padding:1rem;flex-direction:row;text-align:left;gap:.75rem}.hol-song-info{flex:1;min-width:0}.hol-popularity-number{font-size:1.5rem}.hol-buttons{flex-direction:column;gap:.5rem}.hol-result-art{width:80px;height:80px}.hol-result-pop-number{font-size:1.4rem}}@media(max-width:480px){.options-grid{grid-template-columns:1fr}}.option-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;text-align:left;color:var(--text-primary);font-family:inherit;font-size:.95rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.option-card:hover:not(:disabled){border-color:#ffffff26;background:#ffffff0a}.option-card:disabled{cursor:default}.option-selected{border-color:var(--accent-cyan);background:#00e5ff14;box-shadow:var(--glow-cyan)}.option-correct{border-color:var(--accent-cyan)!important;background:#00e5ff1f!important;box-shadow:0 0 25px #00e5ff4d!important;animation:glow-pulse 1s ease-in-out 2}@keyframes glow-pulse{0%,to{box-shadow:0 0 15px #00e5ff4d}50%{box-shadow:0 0 35px #00e5ff80}}.option-wrong{border-color:var(--accent-coral)!important;background:#ff4d4d14!important}.option-dimmed{opacity:.35}.option-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.option-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.option-label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-sublabel{font-size:.8rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.round-result{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.result-track{display:flex;align-items:center;gap:1rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1rem;width:100%}.result-album-art{width:64px;height:64px;border-radius:6px;object-fit:cover}.result-track-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.result-track-name{font-weight:600;font-size:1rem}.result-track-artist{color:var(--text-muted);font-size:.85rem}.result-owner{color:var(--accent-coral);font-size:.8rem}.result-my-answer{padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-weight:600;text-align:center;width:100%}.result-correct{background:#00e5ff1a;border:1px solid rgba(0,229,255,.3);color:var(--accent-cyan)}.result-wrong{background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);color:var(--accent-coral)}.result-players{width:100%;display:flex;flex-direction:column;gap:.5rem}.result-player-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--bg-surface);border-radius:var(--radius-sm)}.result-player-name{font-size:.9rem}.result-player-status{font-weight:700;font-size:.9rem}.result-player-status.correct{color:var(--accent-cyan)}.result-player-status.wrong{color:var(--text-dim)}.scoreboard{width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1rem}.scoreboard-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.75rem}.scoreboard-list{display:flex;flex-direction:column;gap:.4rem}.scoreboard-row{display:flex;align-items:center;gap:.75rem;padding:.4rem .5rem;border-radius:6px;font-size:.9rem}.scoreboard-me{background:#00e5ff0f}.scoreboard-rank{width:2rem;text-align:center;color:var(--text-dim);font-size:.85rem}.scoreboard-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard-score{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-cyan)}.results-page{width:100%;display:flex;flex-direction:column;align-items:center;gap:2rem;padding-top:2rem}.results-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem}.winner-crown{font-size:3rem;filter:drop-shadow(0 0 15px rgba(255,200,0,.4))}.winner-name{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--accent-cyan);text-shadow:0 0 20px rgba(0,229,255,.4)}.winner-score{color:var(--text-muted);font-size:1.1rem;font-variant-numeric:tabular-nums}.final-scoreboard{width:100%;display:flex;flex-direction:column;gap:.5rem}.final-score-row{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:all .2s}.final-score-winner{border-color:#00e5ff4d;background:#00e5ff0d}.final-score-me{border-color:#ff4d4d4d}.final-rank{width:2.5rem;text-align:center;font-weight:700;color:var(--text-dim);font-size:.9rem}.final-player-info{flex:1;min-width:0}.final-player-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.final-player-score{font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums;color:var(--accent-cyan)}.results-actions{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.source-picker{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.source-option{width:100%;max-width:400px;display:flex;align-items:center;gap:.75rem;font-size:1.1rem;padding:1rem 1.5rem}.source-icon{font-size:1.5rem}.divider{color:var(--text-dim);font-size:.9rem;margin:.5rem 0}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:100%}.playlist-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem;text-align:center}.playlist-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}.playlist-name{font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.playlist-count{font-size:.7rem;color:var(--text-dim)}.player{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.player-loading{margin-top:4rem;text-align:center}.hint{color:var(--text-dim);font-size:.85rem;margin-top:.5rem}.now-playing{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem}.album-art{width:260px;height:260px;border-radius:var(--radius);object-fit:cover;box-shadow:0 8px 32px #0009}.track-info{text-align:center}.track-name{font-size:1.3rem;font-weight:700;margin-bottom:.2rem}.track-artist{color:var(--text-muted);font-size:1rem}.track-album{color:var(--text-dim);font-size:.85rem;margin-top:.2rem}.controls{display:flex;gap:1rem;margin-top:.5rem}.device-selector{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem;width:100%;max-width:500px;margin:0 auto}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.device-selected{display:flex;align-items:center;justify-content:space-between;background:var(--accent-green);color:#000;padding:1rem 1.25rem;border-radius:var(--radius-sm);font-weight:600}.device-info{display:flex;align-items:center;gap:.75rem;font-size:1rem}.device-icon{font-size:1.5rem}.device-empty{text-align:center;padding:2rem 1rem;background:var(--bg-elevated);border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted)}.device-empty p{margin:0;font-size:.9rem}.device-empty-hint{color:var(--text-dim);font-size:.8rem;margin-top:.5rem}.device-list{display:flex;flex-direction:column;gap:.5rem}.device-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;text-align:left;font-size:1rem;justify-content:flex-start}.device-item:hover{border-color:var(--accent-green);color:var(--accent-green)}.header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;position:sticky;top:0;background:var(--bg-deep);z-index:50;border-bottom:1px solid var(--border-subtle)}.header-right-group{display:flex;align-items:center;gap:.75rem}.header-user-wrapper{position:relative}.header-left{display:flex;align-items:center;gap:.75rem}.header-back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-primary);cursor:pointer;transition:all .2s}.header-back:hover{background:var(--bg-surface);border-color:#ffffff26}.header-logo{display:flex;align-items:center;gap:.5rem}.header-logo-icon{display:flex;color:var(--accent-coral)}.header-logo-text{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent-coral) 0%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-right{position:relative}.header-user{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem .4rem .75rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:24px;cursor:pointer;transition:all .2s;color:var(--text-primary);font-family:inherit}.header-user:hover{background:var(--bg-surface);border-color:#ffffff26}.header-user-name{font-size:.85rem;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--bg-surface)}.header-avatar-img{width:100%;height:100%;object-fit:cover}.header-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;color:var(--text-muted);background:var(--bg-surface)}.header-chevron{color:var(--text-muted);transition:transform .2s}.header-chevron-open{transform:rotate(180deg)}.header-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);box-shadow:0 8px 32px #0006;overflow:hidden;animation:dropdown-enter .15s ease-out}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.header-dropdown-profile{display:flex;align-items:center;gap:.75rem;padding:1rem}.header-dropdown-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--bg-surface)}.header-dropdown-avatar img{width:100%;height:100%;object-fit:cover}.header-dropdown-avatar span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text-muted)}.header-dropdown-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.header-dropdown-name{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-dropdown-email{font-size:.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-dropdown-divider{height:1px;background:var(--border-subtle)}.header-dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-primary);font-size:.9rem;font-family:inherit;cursor:pointer;transition:background .15s;text-align:left}.header-dropdown-item:hover{background:#ffffff0d}.header-dropdown-logout{color:var(--accent-coral)}.header-dropdown-logout:hover{background:#ff4d4d1a}.header-device{position:relative}.header-device-btn{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem .4rem .75rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:20px;cursor:pointer;transition:all .2s;color:var(--text-primary);font-family:inherit;font-size:.85rem}.header-device-btn:hover{background:var(--bg-surface);border-color:#ffffff26}.header-device-icon{display:flex;color:var(--accent-green)}.header-device-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}.header-chevron-small{color:var(--text-dim);transition:transform .2s}.header-device-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);box-shadow:0 8px 32px #0006;overflow:hidden;animation:dropdown-enter .15s ease-out;z-index:100}.header-device-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-subtle);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.header-device-refresh{display:flex;align-items:center;justify-content:center;padding:.25rem;background:none;border:none;color:var(--text-muted);cursor:pointer;transition:color .15s;border-radius:4px}.header-device-refresh:hover{color:var(--text-primary);background:#ffffff0d}.header-device-refresh:disabled{opacity:.5;cursor:not-allowed}.header-device-dropdown-list{max-height:240px;overflow-y:auto}.header-device-empty{padding:1.5rem 1rem;text-align:center;color:var(--text-muted);font-size:.85rem}.header-device-empty-hint{color:var(--text-dim);font-size:.75rem;margin-top:.25rem}.header-device-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-primary);font-size:.9rem;font-family:inherit;cursor:pointer;transition:background .15s;text-align:left}.header-device-item:hover{background:#ffffff0d}.header-device-item-active{background:#1db9541a}.header-device-item-active:hover{background:#1db95426}.header-device-item-icon{display:flex;color:var(--text-muted)}.header-device-item-active .header-device-item-icon{color:var(--accent-green)}.header-device-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-device-item svg:last-child{color:var(--accent-green);flex-shrink:0}.server-offline,.room-not-found{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;padding:3rem 1.5rem;max-width:400px;margin:0 auto}.offline-icon{color:var(--accent-coral);animation:offline-pulse 2s ease-in-out infinite}.offline-icon-circle{stroke:var(--accent-coral);opacity:.3}.offline-icon-x{stroke:var(--accent-coral)}@keyframes offline-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}.offline-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin:0}.offline-message{color:var(--text-muted);font-size:.95rem;line-height:1.5;margin:0}.offline-status{min-height:32px;display:flex;align-items:center;justify-content:center}.offline-retrying{display:flex;align-items:center;gap:.75rem;color:var(--accent-cyan);font-size:.9rem}.offline-spinner{width:20px;height:20px;border:2px solid var(--border-subtle);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin .8s linear infinite}.offline-countdown{color:var(--text-muted);font-size:.9rem;margin:0}.offline-countdown-number{color:var(--accent-cyan);font-weight:700;font-variant-numeric:tabular-nums}.offline-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.offline-retry-btn{width:100%;max-width:200px}.offline-auto-toggle{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.85rem;cursor:pointer}.offline-auto-toggle input{accent-color:var(--accent-green);width:16px;height:16px}.offline-tips{padding:1rem 1.25rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);width:100%;text-align:left}.offline-tips-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 .75rem}.offline-tips ul{margin:0;padding-left:1.25rem;color:var(--text-muted);font-size:.85rem;line-height:1.8}.offline-tips li::marker{color:var(--text-dim)}.kicked-page{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;max-width:500px;margin:3rem auto;padding:2rem}.kicked-icon{color:var(--accent-coral);animation:kicked-pulse 2s ease-in-out infinite}.kicked-icon-circle{stroke:var(--accent-coral);opacity:.3}.kicked-icon-slash{stroke:var(--accent-coral)}@keyframes kicked-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.kicked-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin:0}.kicked-reason{color:var(--accent-coral);font-size:1rem;font-weight:600;margin:0;padding:.75rem 1.5rem;background:#ff4d4d14;border:1px solid rgba(255,77,77,.2);border-radius:var(--radius)}.kicked-message{color:var(--text-muted);font-size:.95rem;line-height:1.6;margin:0}.kicked-actions{display:flex;gap:1rem;margin-top:1rem}.kicked-home-btn{display:flex;align-items:center;gap:.5rem}.kicked-info{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle);width:100%}.kicked-info-title{font-size:.9rem;font-weight:600;color:var(--text-primary);margin:0 0 .75rem}.kicked-info ul{margin:0;padding-left:1.25rem;color:var(--text-muted);font-size:.85rem;line-height:1.8;text-align:left}.kicked-info li::marker{color:var(--text-dim)}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.75rem;z-index:1000;max-width:360px;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);box-shadow:0 8px 32px #0006;animation:toast-enter .2s ease-out;position:relative;overflow:hidden;pointer-events:auto}.toast-exit{animation:toast-exit .2s ease-in forwards}@keyframes toast-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toast-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast-icon{display:flex;flex-shrink:0;margin-top:1px}.toast-message{flex:1;font-size:.9rem;color:var(--text-primary);line-height:1.4}.toast-dismiss{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-dim);cursor:pointer;transition:color .15s;flex-shrink:0}.toast-dismiss:hover{color:var(--text-primary)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:currentColor;opacity:.3;transition:width .05s linear}.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 0%,var(--bg-surface) 50%,var(--bg-elevated) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1rem;width:100%;max-width:200px}.skeleton-avatar{border-radius:50%}.skeleton-card{height:80px;width:100%;border-radius:var(--radius)}.skeleton-button{height:44px;width:120px;border-radius:var(--radius-sm)}.skeleton-playlist-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem}.skeleton-playlist-img{width:100%;aspect-ratio:1;border-radius:6px}.skeleton-playlist-name{height:.9rem;width:80%}.skeleton-playlist-count{height:.7rem;width:50%}.skeleton-device-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.skeleton-device-icon{width:24px;height:24px;border-radius:4px}.skeleton-device-name{height:1rem;width:150px}.error-banner-enhanced{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:#ff4d4d1a;border:1px solid rgba(255,77,77,.3);border-radius:var(--radius);width:100%;animation:error-banner-enter .2s ease-out}@keyframes error-banner-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.error-banner-icon{display:flex;flex-shrink:0;color:var(--accent-coral)}.error-banner-message{flex:1;color:var(--accent-coral);font-size:.9rem}.error-banner-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.error-banner-retry{padding:.4rem .8rem;background:var(--accent-coral);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}.error-banner-retry:hover{background:#f66}.error-banner-dismiss{display:flex;align-items:center;justify-content:center;padding:.25rem;background:none;border:none;color:var(--accent-coral);opacity:.7;cursor:pointer;transition:opacity .15s}.error-banner-dismiss:hover{opacity:1}.footer{margin-top:auto;padding:2rem 0 1rem;width:100%}.footer-content{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.75rem;color:var(--text-dim)}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1.5rem}.loading-text{color:var(--text-muted);font-size:.95rem;margin:0}.app-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.error-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;max-width:500px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:3rem 2rem}.error-content svg{color:var(--danger);opacity:.9}.error-content h2{font-size:1.5rem;margin:0;color:var(--text-primary)}.error-message{color:var(--text-muted);font-size:1rem;line-height:1.6;margin:0}.error-actions{display:flex;gap:1rem;margin-top:1rem}.error-actions .btn{min-width:120px}.game-chat{position:fixed;bottom:1rem;left:1.5rem;z-index:1000;width:340px;display:flex;flex-direction:column;pointer-events:none}.game-chat:hover{pointer-events:auto}.game-chat-messages{display:flex;flex-direction:column;gap:.25rem;max-height:250px;overflow-y:hidden;padding:.5rem;border-radius:var(--radius) var(--radius) 0 0;transition:background .2s ease,max-height .3s ease;pointer-events:none}.game-chat:hover .game-chat-messages{background:#000000b3;overflow-y:auto;max-height:300px;pointer-events:auto}.game-chat-msg{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem;font-size:.8rem;line-height:1.4;padding:.15rem .4rem;border-radius:3px;background:#0000008c;transition:opacity .5s ease}.game-chat:hover .game-chat-msg{background:transparent}.game-chat-msg-faded{opacity:0;transition:opacity 1s ease}.game-chat:hover .game-chat-msg-faded{opacity:1;transition:opacity .2s ease}.game-chat-msg-system{justify-content:center}.game-chat-msg-system-text{color:var(--text-dim);font-style:italic;font-size:.75rem}.game-chat-msg-sender{font-weight:600;color:var(--accent-cyan);flex-shrink:0}.game-chat-msg-sender:after{content:":"}.game-chat-msg-text{color:var(--text-primary);word-break:break-word;text-shadow:0 1px 2px rgba(0,0,0,.8)}.game-chat-input-row{display:flex;gap:.5rem;padding:.4rem;background:#0000008c;border-radius:0 0 var(--radius) var(--radius);pointer-events:auto}.game-chat-input{flex:1;background:#0006;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);color:var(--text-primary);padding:.4rem .6rem;font-size:.8rem;outline:none;font-family:inherit}.game-chat-input:focus{border-color:var(--accent-cyan);background:#0009}.game-chat-input::placeholder{color:var(--text-dim)}.game-chat-send{background:var(--accent-cyan);border:none;border-radius:var(--radius-sm);color:var(--bg-deep);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s;flex-shrink:0;font-family:inherit}.game-chat-send:disabled{opacity:.4;cursor:default}.game-chat-send:hover:not(:disabled){opacity:.8}.game-chat-toggle,.game-chat-header{display:none}@media(max-width:768px){.game-chat-toggle{position:fixed;bottom:1rem;left:1rem;z-index:1001;width:56px;height:56px;border-radius:50%;background:var(--accent-coral);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #0006;transition:opacity .2s,transform .2s}.game-chat-toggle:active{transform:scale(.95)}.game-chat-toggle-hidden{opacity:0;pointer-events:none}.game-chat-badge{position:absolute;top:-4px;right:-4px;background:#ff3b3b;color:#fff;font-size:.7rem;font-weight:600;padding:.15rem .4rem;border-radius:10px;min-width:20px;text-align:center;box-shadow:0 2px 6px #0000004d}.game-chat{position:fixed;bottom:0;left:0;right:0;width:100%;max-height:60vh;pointer-events:auto;transition:transform .3s ease}.game-chat-collapsed{transform:translateY(100%);pointer-events:none}.game-chat-expanded{transform:translateY(0)}.game-chat-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#000000e6;border-top:2px solid var(--accent-cyan);font-weight:600;color:var(--text-primary)}.game-chat-close{background:transparent;border:none;color:var(--text-dim);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.game-chat-close:hover{color:var(--text-primary)}.game-chat-messages{background:#000000d9;max-height:calc(60vh - 120px);overflow-y:auto;pointer-events:auto}.game-chat:hover .game-chat-messages{background:#000000d9}.game-chat-input-row{background:#000000e6;padding:.75rem 1rem}}@media(max-width:768px){#root{padding:1rem .75rem}.header-user-name,.header-device-name{display:none}.header-device-btn{padding:.4rem .5rem}.header-right-group{gap:.5rem}.header-logo-text{font-size:1rem}.login-title{font-size:2.4rem}.login-features{gap:.75rem}.login-feature{padding:.875rem 1rem}.login-feature-icon{width:40px;height:40px}.login-steps{flex-direction:column;gap:.75rem}.login-step-arrow{transform:rotate(90deg)}.home-title{font-size:2.2rem}.btn-hero{font-size:1rem;padding:.875rem 1.5rem}.device-selector,.settings-panel{padding:1rem}.toast-container{left:1rem;right:1rem;bottom:1rem;max-width:none}.game-chat{bottom:.5rem;left:.5rem;width:260px}.header-dropdown{min-width:200px}}@media(max-width:480px){#root{padding:.75rem .5rem}.header{padding:.5rem 0}.header-back,.header-avatar{width:32px;height:32px}.login-page{padding:1rem 0 2rem;gap:1.5rem}.login-title{font-size:2rem}.login-subtitle{font-size:1rem}.login-feature-title{font-size:.9rem}.login-feature-desc{font-size:.8rem}.login-spotify-btn{font-size:1rem;padding:.875rem 1.5rem}.home-page{gap:1.5rem;padding-top:1rem}.home-title{font-size:1.8rem}.home-subtitle{font-size:.9rem}.btn-hero{font-size:.95rem;padding:.75rem 1.25rem}.join-input{font-size:1.1rem;padding:.625rem .75rem}.device-selector{padding:.875rem}.device-header h3{font-size:.9rem}.device-item{padding:.875rem 1rem;font-size:.9rem}.party-code-value{font-size:1.6rem}.lobby-page{gap:1rem}.settings-panel{padding:.875rem}.option-card{padding:.75rem 1rem;font-size:.9rem}.scoreboard{padding:.75rem}.scoreboard-row{font-size:.85rem}.results-page{padding-top:1rem;gap:1.5rem}.winner-name{font-size:1.6rem}.final-score-row{padding:.625rem .75rem}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.playlist-card{padding:.4rem}.source-option{padding:.875rem 1rem;font-size:1rem}.album-art{width:200px;height:200px}.track-name{font-size:1.1rem}.footer{padding:1.5rem 0 .75rem}.footer-content{font-size:.7rem;gap:.5rem}}.admin-panel{position:fixed;bottom:1.5rem;right:1.5rem;z-index:100;-webkit-user-select:none;user-select:none}.admin-panel-toggle{width:48px;height:48px;border-radius:50%;background:#ff4d4de6;border:2px solid rgba(255,77,77,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0006,0 0 20px #ff4d4d4d;transition:all .2s}.admin-panel-toggle:hover{background:#ff4d4d;box-shadow:0 6px 20px #00000080,0 0 24px #ff4d4d80;transform:scale(1.05)}.admin-panel-toggle:active{transform:scale(.95)}.admin-panel-content{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);box-shadow:0 8px 32px #0009;width:280px;max-height:70vh;overflow-y:auto;animation:admin-panel-slidein .2s ease-out}@keyframes admin-panel-slidein{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.admin-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-subtle);background:#ff4d4d0d}.admin-panel-title{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--accent-coral);text-transform:uppercase;letter-spacing:.05em}.admin-panel-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.admin-panel-close:hover{background:#ffffff0d;color:var(--text-primary)}.admin-panel-section{padding:1rem;border-bottom:1px solid var(--border-subtle)}.admin-panel-section:last-child{border-bottom:none}.admin-panel-section-title{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.admin-panel-players{display:flex;flex-direction:column;gap:.5rem}.admin-panel-player-btn{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:all .2s;font-size:.85rem}.admin-panel-player-btn:hover{background:#ff4d4d1a;border-color:#ff4d4d4d}.admin-panel-player-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-panel-player-kick{font-size:.75rem;color:var(--accent-coral);font-weight:600}.admin-panel-action-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:all .2s;font-size:.85rem;font-weight:600;margin-bottom:.5rem}.admin-panel-action-btn:last-child{margin-bottom:0}.admin-panel-action-btn:hover{background:#00e5ff1a;border-color:#00e5ff4d;color:var(--accent-cyan)}.admin-panel-action-danger:hover{background:#ff4d4d1a;border-color:#ff4d4d4d;color:var(--accent-coral)}.lobby-browser{max-width:900px;margin:0 auto;padding:2rem 1rem}.lobby-browser-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem}.lobby-browser-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin:0;flex:1;text-align:center}.lobby-browser-refresh{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.lobby-browser-refresh-icon{animation:lobby-refresh-spin 2s linear infinite}@keyframes lobby-refresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lobby-browser-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4rem 2rem;color:var(--text-muted)}.lobby-browser-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:4rem 2rem;color:var(--text-muted)}.lobby-browser-empty svg{opacity:.3}.lobby-browser-empty h3{font-size:1.3rem;color:var(--text-primary);margin:0}.lobby-browser-empty p{max-width:400px;font-size:.95rem;line-height:1.5;margin:0}.lobby-browser-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.lobby-browser-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:all .2s;animation:lobby-card-fadein .3s ease-out}@keyframes lobby-card-fadein{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.lobby-browser-card:hover{border-color:#00e5ff4d;box-shadow:0 4px 16px #0000004d}.lobby-browser-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.lobby-browser-card-code{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;color:var(--accent-cyan);font-family:Courier New,monospace;letter-spacing:.1em}.lobby-browser-card-phase{font-size:.75rem;font-weight:600;padding:.3rem .6rem;border-radius:10px;text-transform:uppercase;letter-spacing:.05em}.lobby-browser-phase-playing,.lobby-browser-card-info{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.lobby-browser-card-row{display:flex;align-items:center;justify-content:space-between;font-size:.9rem}.lobby-browser-card-label{color:var(--text-muted);font-weight:500}.lobby-browser-card-value{color:var(--text-primary);font-weight:600}.lobby-browser-join-btn{width:100%;margin-top:.5rem}.lobby-browser-join-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.lobby-browser-list{grid-template-columns:1fr}.lobby-browser-header{flex-wrap:wrap}.lobby-browser-title{order:-1;width:100%;text-align:left}}.result-genre-info{display:flex;flex-direction:column;gap:1rem;margin-top:.75rem;padding:1.25rem;background:var(--bg-elevated);border-radius:var(--radius);border-left:4px solid var(--accent-cyan)}.genre-section{display:flex;flex-direction:column;gap:.5rem}.genre-section-title{font-size:.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.genre-tags-container{display:flex;flex-wrap:wrap;gap:.5rem}.genre-tag{display:inline-block;padding:.4rem .85rem;border-radius:14px;font-size:.85rem;font-weight:600;transition:all .2s ease}.genre-tag-correct{background:#1ed76033;border:2px solid var(--accent-green);color:var(--accent-green)}.genre-tag-parent{background:#ffc10733;border:2px solid #ffc107;color:#ffc107}.genre-tag-spotify{background:var(--bg-surface);border:2px solid var(--border-subtle);color:var(--text-primary)}.genre-tag-spotify:hover{border-color:var(--accent-cyan);transform:translateY(-2px)}:root{--gap-x: 60px;--line: #282828}.master-container{display:flex;align-items:stretch;gap:var(--gap-x);padding:20px}.side-bracket{display:flex;gap:var(--gap-x)}.side-bracket.right{flex-direction:row-reverse}.round{display:flex;flex-direction:column;width:150px}.round-title{text-align:center;font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:15px;font-weight:800}.match-slot{display:flex;align-items:center;position:relative;flex-grow:1}.card{background:var(--bg-elevated);width:100%;padding:10px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:.2s;border:1px solid transparent;z-index:10}.card:hover{background:#ffffff0d;border-color:#333}.card.winner{border-color:var(--accent-green);background:#1ed7601a;box-shadow:0 0 20px #1ed75426}.icon-box{width:32px;height:32px;background:#222;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon-box svg{width:18px;fill:var(--accent-green);opacity:.8}.name{font-size:.75rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:#fff}.match-slot:after,.match-slot:before{content:"";position:absolute;width:calc(var(--gap-x) * .5 + 2px);border-color:var(--line);border-style:solid;border-width:0;z-index:1}.left .match-slot:after{right:calc(var(--gap-x) * -.5 - 2px);border-right-width:2px}.left .match-slot:before{left:calc(var(--gap-x) * -.5);border-top-width:2px}.left .match-slot.branch-down:after{top:50%;height:50%;border-top-width:2px;border-top-right-radius:12px}.left .match-slot.branch-up:after{bottom:50%;height:50%;border-bottom-width:2px;border-bottom-right-radius:12px}.right .match-slot:after{left:calc(var(--gap-x) * -.5 - 2px);border-left-width:2px}.right .match-slot:before{right:calc(var(--gap-x) * -.5);border-top-width:2px}.right .match-slot.branch-down:after{top:50%;height:50%;border-top-width:2px;border-top-left-radius:12px}.right .match-slot.branch-up:after{bottom:50%;height:50%;border-bottom-width:2px;border-bottom-left-radius:12px}.round:first-child .match-slot:before{display:none}.match-slot.glow:after{border-color:var(--accent)!important;z-index:5}.finals-area{display:flex;flex-direction:column;justify-content:center;width:180px}.import-progress{position:fixed;top:1.5rem;right:1.5rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:1rem;min-width:280px;max-width:350px;box-shadow:0 8px 32px #00000080;z-index:9999;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.import-progress-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;color:var(--accent-cyan)}.import-progress-header svg{flex-shrink:0;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.import-progress-title{font-size:.95rem;font-weight:600;color:var(--text-primary)}.import-progress-details{display:flex;flex-direction:column;gap:.5rem}.import-progress-bar{width:100%;height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden}.import-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-coral));transition:width .3s ease-out;animation:shimmer 2s linear infinite;background-size:200% 100%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.import-progress-text{font-size:.85rem;color:var(--text-muted);text-align:center}.import-complete-stats{display:flex;flex-direction:column;gap:.5rem}.import-stat{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-primary)}.import-stat svg{color:var(--accent-green);flex-shrink:0}.import-stat span{color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius);max-width:600px;width:90vw;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}.modal-large{max-width:1100px}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-subtle)}.modal-header h2{font-size:1.4rem;font-weight:600;color:var(--text-primary);margin:0}.modal-close{background:none;border:none;font-size:2rem;color:var(--text-muted);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.modal-close:hover{background:var(--bg-surface);color:var(--text-primary)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--border-subtle);display:flex;gap:1rem;justify-content:flex-end}.library-settings-hint{color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem;line-height:1.5}.library-stats-bar{display:flex;gap:1.5rem;margin-bottom:2rem;padding:1.25rem;background:linear-gradient(135deg,#00e5ff0d,#ff4d4d0d);border:1px solid rgba(0,229,255,.15);border-radius:var(--radius)}.library-stat-item{display:flex;align-items:center;gap:.75rem;flex:1}.library-stat-item svg{color:var(--accent-cyan);flex-shrink:0}.library-stat-info{display:flex;flex-direction:column;gap:.25rem}.library-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.library-stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.library-sources-section{margin-bottom:2rem}.library-sources-divider{padding:.75rem 0;margin:1.5rem 0 1rem;font-size:.85rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center}.library-sources-divider-left{display:flex;flex-direction:column;gap:.25rem;flex:1}.library-sources-hint{font-size:.75rem;color:var(--text-dim);text-transform:none;font-weight:400;letter-spacing:0}.library-bulk-actions{display:flex;gap:.5rem}.library-bulk-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.4rem .75rem;font-size:.75rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem;text-transform:none;letter-spacing:normal}.library-bulk-btn:hover{background:var(--bg-elevated);border-color:var(--accent-cyan);color:var(--accent-cyan)}.library-bulk-btn svg{flex-shrink:0}.library-sources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.library-card{background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);padding:1rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.library-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .2s ease}.library-card:hover{background:var(--bg-elevated);border-color:#ffffff26;transform:translateY(-2px)}.library-card-active{border-color:var(--accent-cyan)}.library-card-active:before{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-pink))}.library-card-active .library-card-status svg{color:var(--accent-cyan)}.library-card-excluded{opacity:.5}.library-card-excluded:hover{opacity:.7}.library-card-excluded .library-card-status svg{color:var(--text-muted)}.library-card-liked{grid-column:1 / -1}.library-card-liked .library-card-icon svg{color:var(--accent-pink)}.library-card-status{flex-shrink:0;display:flex;align-items:center;justify-content:center}.library-card-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent-cyan)}.library-card-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.library-card-name{font-size:.95rem;font-weight:600;color:var(--text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}.library-card-count{font-size:.8rem;color:var(--text-muted)}.library-card-refresh{flex-shrink:0;width:32px;height:32px;border:none;background:var(--bg-elevated);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--accent-cyan);margin-left:auto}.library-card-refresh:hover:not(:disabled){background:var(--accent-cyan);color:var(--bg-deep);transform:scale(1.1)}.library-card-refresh:disabled{opacity:.5;cursor:not-allowed}.refresh-spinner{display:inline-block;animation:spin 1s linear infinite;font-size:18px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.library-refresh-progress{background:linear-gradient(135deg,#00e5ff14,#ff4d4d14);border:1px solid rgba(0,229,255,.3);border-radius:var(--radius);padding:1rem;margin-bottom:1.5rem}.refresh-progress-content{display:flex;align-items:center;gap:1rem}.refresh-progress-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border-radius:50%;color:var(--accent-cyan);font-size:24px}.refresh-progress-text{display:flex;flex-direction:column;gap:.25rem;flex:1}.refresh-progress-stage{font-size:.95rem;font-weight:600;color:var(--text-primary)}.refresh-progress-count{font-size:.85rem;color:var(--text-muted)}.library-empty-message{text-align:center;color:var(--text-muted);padding:2rem;line-height:1.6}.loading-spinner{text-align:center;padding:2rem;color:var(--text-muted)}.playlist-detail-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;padding:2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.playlist-detail-modal{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);width:100%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}.playlist-detail-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-subtle)}.playlist-detail-header h3{font-size:1.3rem;margin:0;color:var(--text-primary)}.playlist-detail-body{flex:1;overflow-y:auto;padding:1.5rem}.playlist-detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 1rem;color:var(--text-muted)}.playlist-detail-stats{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle);color:var(--text-muted);font-size:.9rem}.playlist-songs-list{display:flex;flex-direction:column;gap:.5rem}.playlist-song-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--bg-elevated);border-radius:var(--radius-sm);transition:all .2s ease}.playlist-song-item:hover{background:var(--bg-surface);border-color:#ffffff1a;transform:translate(4px)}.playlist-song-number{width:30px;text-align:center;color:var(--text-muted);font-size:.85rem;font-variant-numeric:tabular-nums;flex-shrink:0}.playlist-song-artwork{width:48px;height:48px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--bg-deep)}.playlist-song-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.playlist-song-name{font-size:.95rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-song-artist{font-size:.85rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-song-duration{font-size:.85rem;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;width:50px;text-align:right}.playlist-detail-empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}@media(max-width:600px){.playlist-detail-modal{max-height:90vh}.playlist-song-number{width:24px;font-size:.8rem}.playlist-song-artwork{width:40px;height:40px}.playlist-song-name{font-size:.9rem}.playlist-song-artist{font-size:.8rem}.playlist-song-duration{font-size:.8rem;width:45px}}.setting-chip-wide{min-width:140px;display:flex;align-items:center;justify-content:center;gap:.4rem}.setting-chip-wide svg{width:14px;height:14px;opacity:.7}.setting-chip-active svg{opacity:1}.customization-panel{max-width:950px;width:95vw}.customization-section{margin-bottom:2rem}.customization-section-title{display:flex;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.customization-section-title svg{color:var(--accent-primary, var(--accent-cyan))}.customization-mode-toggle{display:flex;gap:1rem}.mode-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-muted);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mode-toggle-btn:hover{background:var(--bg-elevated);border-color:#ffffff26}.mode-toggle-btn.active{background:linear-gradient(135deg,var(--accent-primary, var(--accent-coral)) 0%,var(--accent-secondary, var(--accent-cyan)) 100%);border-color:transparent;color:#fff}.mode-toggle-btn svg{width:20px;height:20px}.customization-mode-special{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:.75rem}.mode-special-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.875rem .5rem;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-muted);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mode-special-btn:hover{background:var(--bg-elevated);border-color:#ffffff26;transform:translateY(-1px)}.mode-special-btn.active{background:var(--bg-elevated);border-color:var(--accent-primary, var(--accent-cyan));color:var(--accent-primary, var(--accent-cyan));box-shadow:0 0 15px rgba(var(--accent-primary),.2)}.mode-special-btn svg{width:18px;height:18px}.mode-special-midnight.active{background:linear-gradient(135deg,#1a1433,#251f47);border-color:#8a63ff;color:#e8e4ff;box-shadow:0 0 20px #8a63ff66}.mode-special-midnight.active svg{filter:drop-shadow(0 0 8px rgba(138,99,255,.6))}.customization-themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.theme-card{display:flex;flex-direction:column;gap:.75rem;padding:0;background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;overflow:hidden}.theme-card:hover{border-color:#fff3;transform:translateY(-2px)}.theme-card.active{border-color:var(--accent-primary, var(--accent-cyan));box-shadow:0 0 20px #00e5ff4d}.theme-preview{width:100%;height:80px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);position:relative}.theme-preview svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.theme-name{padding:.75rem;font-size:.9rem;font-weight:500;color:var(--text-primary);text-align:center}.theme-card.active .theme-name{color:var(--accent-primary, var(--accent-cyan))}@media(max-width:600px){.customization-themes-grid{grid-template-columns:repeat(2,1fr)}.customization-mode-toggle{flex-direction:column}.customization-mode-special{grid-template-columns:repeat(2,1fr)}.customization-panel{width:100vw;max-width:100vw}}.result-correct-artist{display:block;font-size:.95rem;color:var(--accent-primary, var(--accent-coral));font-weight:600;margin-top:.5rem}.result-imposter-info{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem;padding:.75rem;background:#ff4d4d1a;border-left:3px solid var(--accent-primary, var(--accent-coral));border-radius:var(--radius-sm)}.imposter-theme{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600}.imposter-answer{font-size:1rem;color:var(--accent-primary, var(--accent-coral));font-weight:600}.result-mixed-mode{display:inline-block;padding:.25rem .75rem;background:linear-gradient(135deg,var(--accent-primary, var(--accent-coral)) 0%,var(--accent-secondary, var(--accent-cyan)) 100%);color:#fff;border-radius:12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem}.footer{width:100%;margin-top:auto;padding:2rem 0 1.5rem;border-top:1px solid var(--border-subtle);background:var(--bg-base)}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.footer-links{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}.footer-link{font-size:.85rem;color:var(--text-muted);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;transition:color .2s ease}.footer-link:hover{color:var(--accent-cyan);text-decoration:underline}.footer-separator{color:var(--text-dim);font-size:.85rem}.footer-info{display:flex;align-items:center;gap:.5rem}.footer-text{font-size:.8rem;color:var(--text-dim)}.login-footer-link{font-size:.8rem;color:var(--text-muted);text-decoration:none;transition:color .2s ease}.login-footer-link:hover{color:var(--accent-cyan);text-decoration:underline}.login-footer-link-inline{color:var(--accent-cyan);text-decoration:none;transition:color .2s ease}.login-footer-link-inline:hover{text-decoration:underline;color:var(--accent-coral)}