:root{--bg: #160508;--surface: #220c10;--surface-2: #2d1018;--surface-3: #3e1622;--accent: #c4a8e0;--accent-dim: #9e7fc4;--text: #ede0f4;--text-dim: #8b7898;--danger: #e05575;--radius: 8px;--gap: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:15px;min-height:100vh}a{color:var(--accent);text-decoration:none}button{cursor:pointer;border:none;border-radius:var(--radius);padding:10px 20px;font-size:14px;font-weight:600;transition:opacity .15s,transform .1s}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#160508}.btn-primary:hover:not(:disabled){background:#d8bff0}.btn-secondary{background:var(--surface-3);color:var(--text)}.btn-secondary:hover:not(:disabled){background:#4e1c2c}.btn-danger{background:var(--danger);color:#fff}input,select{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--radius);color:var(--text);font-size:14px;padding:10px 14px;outline:none;width:100%}input:focus,select:focus{border-color:var(--accent)}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.card{background:var(--surface);border-radius:12px;padding:28px;width:100%;max-width:480px}.card h1{font-size:22px;margin-bottom:20px}.form-group{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}label{font-size:13px;color:var(--text-dim);font-weight:500}.divider{height:1px;background:var(--surface-3);margin:20px 0}.error-msg{color:var(--danger);font-size:13px;margin-top:8px}.lobby-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;max-width:900px;width:100%;margin:0 auto;padding:24px;min-height:100vh;align-content:start}.lobby-code{font-size:32px;font-weight:700;letter-spacing:4px;color:var(--accent);margin-bottom:4px}.player-list{list-style:none;display:flex;flex-direction:column;gap:8px}.player-item{background:var(--surface-2);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:8px}.host-badge{font-size:11px;background:var(--accent);color:#160508;border-radius:4px;padding:2px 6px;font-weight:700;margin-left:auto}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}.playlist-card{background:var(--surface-2);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:opacity .15s;position:relative}.playlist-card:hover{opacity:.85}.playlist-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.playlist-card .no-img{width:100%;aspect-ratio:1;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:28px}.playlist-card-info{padding:8px}.playlist-card-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-card-owner{font-size:11px;color:var(--text-dim);margin-top:2px}.playlist-card .remove-btn{position:absolute;top:4px;right:4px;background:#0009;color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:14px;padding:0;line-height:1;display:flex;align-items:center;justify-content:center}.genre-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.genre-chip{background:var(--surface-2);color:var(--text-dim);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}.genre-chip:hover{background:var(--surface-3);color:var(--text)}.genre-chip.active{background:transparent;border-color:var(--accent);color:var(--accent)}.search-results{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:260px;overflow-y:auto}.search-result-item{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:var(--radius);padding:8px 12px;cursor:pointer;transition:background .15s}.search-result-item:hover{background:var(--surface-3)}.search-result-item img{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.search-result-info{flex:1;min-width:0}.search-result-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result-owner{font-size:11px;color:var(--text-dim)}.game-wrapper{display:flex;flex-direction:column;height:100vh}.game-topbar{height:48px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--surface-3);display:flex;align-items:center;padding:0 16px;gap:12px}.volume-control{display:flex;align-items:center;gap:8px;margin-left:auto}.volume-control input[type=range]{width:90px;padding:0;border:none;background:transparent;accent-color:var(--accent);cursor:pointer}.game-layout{display:grid;grid-template-columns:220px 1fr 300px;gap:16px;flex:1;min-height:0;padding:16px;max-width:1200px;width:100%;margin:0 auto}.game-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.song-counter{font-size:13px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}.guess-categories{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.guess-cat-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px;transition:color .2s,border-color .2s,background .2s}.guess-cat-chip.solved{color:#0a0a0e;border-color:var(--accent);background:var(--accent)}.guess-cat-chip.unavailable{opacity:.4;text-decoration:line-through}.album-art{width:220px;height:220px;border-radius:12px;object-fit:cover;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:60px}.album-art.hidden-art{filter:blur(40px)}.progress-bar-wrap{width:100%;max-width:320px;height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent);transition:width .5s linear}.guess-toast{position:fixed;top:64px;left:50%;transform:translate(-50%);background:var(--accent);color:#160508;font-weight:700;font-size:14px;padding:8px 18px;border-radius:20px;pointer-events:none;z-index:100;white-space:nowrap}.song-reveal{text-align:center;animation:fadeIn .4s ease}.song-reveal .song-title{font-size:24px;font-weight:700}.song-reveal .song-artist{font-size:16px;color:var(--text-dim);margin-top:4px}.chat-panel{display:flex;flex-direction:column;background:var(--surface);border-radius:12px;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}.chat-divider{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--text-dim);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.chat-divider:before,.chat-divider:after{content:"";flex:1;height:1px;background:var(--surface-3)}.chat-msg{font-size:13px;line-height:1.4;padding:4px 0}.chat-msg .chat-username{font-weight:700;margin-right:6px}.chat-system{border-radius:4px;padding:4px 8px;font-size:12px;text-align:center}.chat-system-title{background:#4fc3f71f;color:#4fc3f7}.chat-system-artist{background:#a78bfa1f;color:#a78bfa}.chat-system-year{background:#fbbf241f;color:#fbbf24}.chat-system-both{background:#c4a8e024;color:var(--accent)}.chat-system-close{background:#fb923c1f;color:#fb923c}.chat-input-row{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--surface-3)}.chat-input-row input{flex:1;height:40px}.scoreboard-panel{background:var(--surface);border-radius:12px;padding:16px;overflow-y:auto}.scoreboard-panel h3{font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.score-list{display:flex;flex-direction:column;gap:8px}.score-item{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:var(--radius);padding:10px 12px}.score-rank{font-size:12px;color:var(--text-dim);width:20px;text-align:center;flex-shrink:0}.score-rank.top{color:gold;font-weight:700}.score-main{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.score-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.score-username{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;min-width:0}.score-categories{display:flex;gap:4px}.score-cat-badge{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px;background:var(--surface);color:var(--text-dim);border:1px solid transparent;transition:color .2s,border-color .2s}.score-cat-badge.solved{color:var(--accent);border-color:var(--accent)}.score-cat-pts{font-size:10px;font-weight:700}.score-pts{font-weight:700;font-size:15px;color:var(--accent);flex-shrink:0;white-space:nowrap}.game-over{width:100%;max-width:860px}.game-over h1{font-size:36px;margin-bottom:24px;text-align:center}.game-over-columns{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}.songs-played-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}.songs-played-item{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--radius);padding:8px 12px}.songs-played-num{font-size:12px;color:var(--text-dim);width:20px;text-align:center;flex-shrink:0}.songs-played-art{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.songs-played-art-placeholder{background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:18px}.songs-played-info{flex:1;min-width:0}.songs-played-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.songs-played-artist{font-size:11px;color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.songs-played-deezer-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:transparent;color:var(--text-dim);text-decoration:none;transition:background .15s,color .15s}.songs-played-deezer-btn:hover{background:var(--surface2);color:#a238ff}.waiting-msg{color:var(--text-dim);font-size:14px;text-align:center;padding:16px}.section-title{font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}