*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #011627;--surface: #021e35;--surface2: #032d4e;--border: #0a3d5e;--accent: #2ec4b6;--accent-lit: #4dd8cc;--green: #2ec4b6;--red: #e71d36;--yellow: #ff9f1c;--text: #fdfffc;--text-muted: #7aaabf;--radius: 12px;--radius-sm: 8px;font-size:16px}[data-theme=light]{--bg: #f0f6fa;--surface: #ffffff;--surface2: #e2edf5;--border: #b8d0de;--accent: #1fa99d;--accent-lit: #2ec4b6;--green: #1fa99d;--red: #e71d36;--yellow: #ff9f1c;--text: #011627;--text-muted: #4a6a80}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.app-shell{position:relative;min-height:100%}.theme-toggle{position:fixed;bottom:.75rem;right:.75rem;z-index:100;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .1s}.theme-toggle:hover{border-color:var(--accent);background:var(--surface2)}.theme-toggle:active{transform:scale(.9)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1.2rem;border-radius:var(--radius-sm);border:none;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:not(:disabled):hover{background:var(--accent-lit)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:not(:disabled):hover{border-color:var(--accent)}.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-outline:hover{background:var(--accent);color:#fff}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{color:var(--text)}.btn-sm{padding:.3rem .75rem;font-size:.85rem}.btn-large{padding:.8rem 2rem;font-size:1.1rem;border-radius:var(--radius)}input[type=text],input[type=number]{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.55rem .9rem;font-size:.95rem;outline:none;transition:border-color .15s;width:100%}input:focus{border-color:var(--accent)}input::placeholder{color:var(--text-muted)}.loading-screen,.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100vh;color:var(--text-muted)}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:var(--red);font-size:.9rem;text-align:center}.toast-error{position:fixed;top:1rem;left:50%;transform:translate(-50%);background:var(--red);color:#fff;padding:.5rem 1.2rem;border-radius:var(--radius);font-size:.9rem;z-index:100}.toast-warn{position:fixed;top:1rem;left:50%;transform:translate(-50%);background:var(--yellow);color:#000;padding:.5rem 1.2rem;border-radius:var(--radius);font-size:.9rem;z-index:100}.home{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem}.home-logo h1{font-size:3rem;font-weight:800;letter-spacing:-1px}.home-logo p{text-align:center;color:var(--text-muted)}.home-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:360px}.home-actions .btn-large{width:100%}.divider{color:var(--text-muted);font-size:.85rem}.join-form{display:flex;flex-direction:column;gap:.6rem;width:100%}.code-input{text-align:center;font-size:1.4rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase}.lobby{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.lobby-topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border)}.lobby-brand{font-size:1.1rem;font-weight:800;letter-spacing:-.5px}.game-code-badge{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}.game-code-badge .label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}.game-code-badge .code{font-size:1.5rem;font-weight:800;letter-spacing:.2em;color:var(--accent);font-variant-numeric:tabular-nums}.lobby-body{flex:1;padding:2rem 1.5rem;max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:2.5rem}.lobby-section-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:1rem}.teams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}.team-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.25rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;transition:border-color .2s;min-height:200px}.team-card.is-mine{border-color:var(--accent);background:#2ec4b60f}.team-card-icon{width:60px;height:60px;border-radius:50%;background:var(--surface2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:var(--accent)}.team-card.is-mine .team-card-icon{border-color:var(--accent);background:#2ec4b626}.team-card-name{font-size:1.1rem;font-weight:700}.joined-badge{font-size:.8rem;font-weight:600;color:var(--accent)}.team-card-new{border-style:dashed;min-height:200px;justify-content:center;padding:1.25rem}.team-card-new.is-creating{border-style:solid;border-color:var(--accent);align-items:stretch;justify-content:flex-start}.add-team-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:600;transition:color .15s;padding:1rem;width:100%}.add-team-btn:hover{color:var(--accent)}.add-team-icon{width:36px;height:36px;border-radius:50%;border:2px dashed currentColor;display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1}.create-team-form{display:flex;flex-direction:column;gap:.75rem;width:100%}.create-team-form input{font-size:1.2rem;font-weight:600;padding:.85rem 1rem;border-color:var(--accent);background:var(--surface2);border-radius:var(--radius-sm);color:var(--text);width:100%}.form-row{display:flex;gap:.5rem;margin-top:.25rem}.form-row .btn{flex:1;padding:.65rem;font-size:.95rem}.lobby-start{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.target-score-control{display:flex;flex-direction:column;gap:.4rem}.target-score-label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.target-score-row{display:flex;align-items:center;gap:.5rem}.target-score-input{width:56px;text-align:center;padding:.4rem .5rem;font-size:1.1rem;font-weight:700}.score-adj-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;flex-shrink:0}.score-adj-btn:hover{border-color:var(--accent);background:#2ec4b61a;color:var(--accent)}.start-btn{min-width:160px}.game-page,.game{display:flex;flex-direction:column;min-height:100vh}.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.6rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);gap:.75rem}.game-header-left{display:flex;flex-direction:column;gap:.2rem}.game-code-small{font-size:.7rem;color:var(--text-muted);font-weight:700;letter-spacing:.1em}.deck-remaining{font-size:.8rem;color:var(--text-muted);text-align:right}.turn-badge{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.2rem .75rem;font-size:.8rem;font-weight:600;width:fit-content}.turn-badge.is-mine{background:var(--accent);border-color:var(--accent);color:#fff}.header-status{display:flex;align-items:center;justify-content:center;min-width:5rem}.header-result{font-size:1.4rem;font-weight:800;white-space:nowrap}.header-result.correct{color:var(--green)}.header-result.wrong{color:var(--red)}.team-scores{display:flex;gap:.5rem;padding:.75rem 1rem;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--border)}.score-card{flex:0 0 auto;min-width:100px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;display:flex;flex-direction:column;gap:.2rem;transition:border-color .2s}.score-card.is-active{border-color:var(--accent);background:#2ec4b61f;transform:scale(1.06);box-shadow:0 0 0 2px var(--accent)}.score-card.is-mine{border-color:var(--accent-lit)}.score-card .team-name{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-card .team-score{font-size:1.1rem;font-weight:700}.score-card .target{font-size:.75rem;color:var(--text-muted)}.score-bar{height:3px;background:var(--border);border-radius:2px;margin-top:.2rem}.score-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s}.play-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;gap:1.25rem;overflow-y:auto}.phase-label{font-size:1.1rem;font-weight:700;text-align:center}.reveal-phase{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:420px}.current-song-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center}.album-art-large{width:100%;aspect-ratio:1;object-fit:cover;max-height:260px}.mystery-art{width:100%;aspect-ratio:1;max-height:260px;display:flex;align-items:center;justify-content:center;font-size:5rem;background:var(--surface2)}.mystery-text{color:var(--border)!important;letter-spacing:.15em}.mystery-card-small{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:.75rem 1.25rem;color:var(--text-muted);font-size:.95rem}.mystery-icon{font-size:1.4rem}.song-meta{padding:1rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;width:100%}.song-title-large{font-size:1.1rem;font-weight:700}.song-artist-large{font-size:.9rem;color:var(--text-muted)}.song-year-hidden{font-size:1.2rem;color:var(--border);letter-spacing:.2em}.hint{font-size:.85rem;color:var(--text-muted);text-align:center}.placing-phase{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.my-timeline-wrapper,.observer-timeline{width:100%}.timeline-hint{font-size:.85rem;color:var(--text-muted);text-align:center;margin-bottom:.5rem}.timeline-label{font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}.result-phase{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%}.result-progress{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}.result-progress-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.result-progress-teams{display:flex;flex-direction:column;gap:.6rem}.rp-team{display:flex;flex-direction:column;gap:.3rem}.rp-team.rp-active .rp-name{color:var(--accent);font-weight:700}.rp-header{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem}.rp-name{font-weight:600}.rp-score{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}.rp-target{font-weight:400;color:var(--text-muted)}.rp-bar{position:relative;height:10px;background:var(--surface2);border-radius:5px;overflow:visible}.rp-fill{height:100%;background:var(--accent);border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1)}.rp-new-card{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--bg);box-shadow:0 0 0 2px var(--yellow);animation:pop .3s ease}@keyframes pop{0%{transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.3)}to{transform:translate(-50%,-50%) scale(1)}}.result-banner{font-size:1.5rem;font-weight:800;padding:.5rem 2rem;border-radius:var(--radius);text-align:center}.result-banner.correct{background:#2ec4b626;color:var(--green);border:1px solid var(--green)}.result-banner.wrong{background:#e71d3626;color:var(--red);border:1px solid var(--red)}.result-timeline{width:100%}.phase-timer{display:flex;align-items:baseline;gap:.15rem;font-variant-numeric:tabular-nums}.timer-value{font-size:2.2rem;font-weight:800;color:var(--text-muted)}.timer-label{font-size:1.1rem;color:var(--text-muted)}.phase-timer.is-urgent .timer-value{color:var(--red);animation:pulse .5s infinite alternate}@keyframes pulse{to{opacity:.5}}.song-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem}.song-card.song-card-compact{padding:.3rem .25rem;flex-direction:column;align-items:center;text-align:center;width:calc((100vw - 2rem - 352px)*.1);min-width:calc((100vw - 2rem - 352px)*.1);max-width:calc((100vw - 2rem - 352px)*.1)}.song-card .album-art{width:52px;height:52px;border-radius:6px;object-fit:cover;flex-shrink:0}.album-art-compact{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;flex-shrink:0}.song-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.song-title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-artist{font-size:.78rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-year{font-size:.85rem;font-weight:700;color:var(--accent-lit)}.song-year-compact{font-size:1rem;font-weight:800;color:var(--text);letter-spacing:.02em;line-height:1;padding:.15rem 0}.song-card-compact .song-info{width:100%}.song-card-compact .song-title{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}.song-card-compact .song-artist{font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}.timeline-wrapper{width:100%;overflow-x:auto}.timeline-legend{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;margin-bottom:.4rem;font-size:.78rem;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border)}.legend-earlier,.legend-later{color:var(--accent-lit)}.timeline{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:0;min-width:fit-content;margin:0 auto;padding-bottom:.5rem}.timeline-compact{gap:0}.timeline-item{display:flex;flex-direction:row;align-items:center;gap:0;flex-shrink:0}.timeline-slot{background:var(--accent);border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:.25rem 0;color:#fff;font-size:.7rem;font-weight:700;cursor:pointer;text-align:center;transition:background .15s,border-color .15s;writing-mode:vertical-rl;width:32px;min-width:32px;min-height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:stretch}.timeline-slot.can-place:hover,.timeline-slot.can-place:focus{border-color:var(--accent);background:#2ec4b61a;color:var(--accent-lit)}.timeline-slot.placed-correct{border-color:var(--green);background:#2ec4b61a}.timeline-slot.placed-wrong{border-color:var(--red);background:#e71d361a}.drop-indicator{pointer-events:none}.audio-player{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:var(--surface2);border-radius:var(--radius-sm)}.play-btn{background:var(--accent);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s}.play-btn:hover{background:var(--accent-lit)}.progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .2s linear}.replay-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}.replay-btn:hover{border-color:var(--accent);color:var(--accent)}.my-timeline-footer{padding:.75rem 1rem;background:var(--surface);border-top:1px solid var(--border)}.my-timeline-footer .timeline-label{font-size:.75rem;color:var(--text-muted);margin-bottom:.4rem}.finished-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;min-height:100vh;padding:2rem;text-align:center}.finished-screen h1{font-size:2.5rem}.winner-label{font-size:1.3rem;color:var(--accent-lit);font-weight:700}.final-scores{list-style:none;display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:300px}.final-scores li{display:flex;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1rem;font-size:.95rem}.final-scores li.is-mine{border-color:var(--accent)}.final-scores li:first-child{background:#2ec4b626;border-color:var(--accent)}@media(max-width:480px){.lobby-start{flex-direction:column;align-items:stretch}.lobby-start .btn-large{width:100%}.album-art-large{max-height:200px}}