:root{--bg-deep: #12151c;--bg-panel: #1a1f2a;--bg-elevated: #222836;--border: rgba(201, 169, 97, .18);--gold: #c9a961;--gold-dim: #8a7344;--cream: #e8e0d0;--text: #d4cfc4;--text-muted: #8a8578;--burgundy: #6b3a4a;--success: #5a8a6a;--danger: #9a4a4a;--radius: 12px;--shadow: 0 8px 32px rgba(0, 0, 0, .35);--font-ui: "Onest", system-ui, sans-serif;--font-display: "Cormorant Garamond", Georgia, serif;--font-lyrics: "Literata", "Cormorant Garamond", Georgia, serif;font-family:var(--font-ui);color:var(--text);background:var(--bg-deep)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(ellipse at 20% 0%,rgba(107,58,74,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(201,169,97,.08) 0%,transparent 50%),var(--bg-deep)}h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--cream)}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2rem;border-bottom:1px solid var(--border);background:#1a1f2ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:1rem}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;font-size:1.4rem;color:var(--gold)}.brand-title{font-family:var(--font-display);font-size:1.5rem;color:var(--cream)}.brand-sub{font-size:.8rem;color:var(--text-muted)}.main-nav{display:flex;gap:.5rem}.nav-link{padding:.5rem 1rem;border-radius:8px;color:var(--text-muted);transition:all .2s}.nav-link:hover,.nav-link.active{color:var(--gold);background:#c9a96114}.app-main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}.app-footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-muted)}.page-head{margin-bottom:2rem}.page-head h1{font-size:2.5rem;margin-bottom:.5rem}.page-head p{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.4rem;border-radius:8px;border:1px solid var(--border);font-size:.95rem;cursor:pointer;transition:all .2s;background:transparent;color:var(--text)}.btn-primary{background:var(--burgundy);border-color:var(--burgundy);color:var(--cream)}.btn-primary:hover{background:#7d4456}.btn-ghost:hover{border-color:var(--gold-dim);color:var(--gold)}.btn-lg{padding:.85rem 2rem;font-size:1.05rem}.btn:disabled{opacity:.5;cursor:not-allowed}.hero{text-align:center;padding:3rem 1rem 4rem}.hero-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--gold-dim);margin-bottom:1rem}.hero h1{font-size:3.2rem;line-height:1.15;margin-bottom:1.25rem}.hero-lead{max-width:560px;margin:0 auto 2rem;color:var(--text-muted);line-height:1.6}.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin-bottom:3rem}.mode-card{padding:1.75rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);transition:all .25s;display:flex;flex-direction:column;gap:.75rem}.mode-card:hover{border-color:var(--gold-dim);transform:translateY(-2px);box-shadow:var(--shadow)}.mode-icon{font-size:2rem}.mode-card h2{font-size:1.6rem}.mode-card p{color:var(--text-muted);line-height:1.5;flex:1}.mode-cta{color:var(--gold);font-size:.9rem}.features-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;padding:2rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.feature-item{display:flex;gap:1rem;align-items:flex-start}.feature-icon{font-size:1.5rem}.feature-item h3{font-size:1.1rem;margin-bottom:.25rem}.feature-item p{color:var(--text-muted);font-size:.9rem;line-height:1.5}.filters-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.search-input,.filters-bar select{padding:.6rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-panel);color:var(--text)}.field select{padding:.55rem .75rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text)}.search-input{flex:1;min-width:200px}.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.track-card{display:flex;gap:1rem;padding:1rem;text-align:left;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-panel);cursor:pointer;transition:all .2s;width:100%}.track-card:hover{border-color:var(--gold-dim);box-shadow:var(--shadow)}.track-card-cover{width:64px;height:64px;border-radius:8px;flex-shrink:0;background:var(--card-accent, var(--bg-elevated));display:grid;place-items:center}.track-card-note{font-size:1.5rem;color:#ffffff80}.track-card-body h3{font-size:1.1rem;margin-bottom:.2rem}.track-artist{color:var(--text-muted);font-size:.9rem;margin-bottom:.5rem}.track-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.75rem;color:var(--text-muted)}.duet-badge{color:var(--gold);border:1px solid var(--gold-dim);padding:0 .4rem;border-radius:4px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.settings-section{padding:1.5rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.settings-section h2{font-size:1.3rem;margin-bottom:1rem}.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}.field span{font-size:.9rem;color:var(--text-muted)}.field input[type=text],.field input:not([type]){padding:.55rem .75rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text)}.field input[type=range]{accent-color:var(--gold)}.field.checkbox{flex-direction:row;align-items:center;gap:.6rem}.game-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.turn-badge{padding:.5rem 1rem;border-radius:8px;background:#6b3a4a4d;border:1px solid var(--burgundy);color:var(--cream);font-size:.9rem}.countdown-overlay{text-align:center;padding:4rem 2rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.countdown-num{font-family:Cormorant Garamond,serif;font-size:6rem;color:var(--gold);display:block}.pitch-visualizer{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin-bottom:1rem}.pitch-visualizer.pitch-lanes{margin-top:.5rem;box-shadow:inset 0 1px #ffffff0a}.pitch-visualizer canvas{width:100%;height:auto;display:block}.live-stats{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}.stat-pill{padding:.45rem .9rem;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border);font-size:.9rem}.stat-pill.in-tune{border-color:var(--success);color:#a8d4b8}.stat-pill.off-tune{border-color:var(--danger);color:#d4a8a8}.game-controls{display:flex;justify-content:space-between;align-items:center}.timer{color:var(--text-muted);font-variant-numeric:tabular-nums}.battle-results{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}.vs-badge{font-family:Cormorant Garamond,serif;font-size:2rem;color:var(--gold-dim)}.winner-text{text-align:center;font-size:1.3rem;color:var(--gold);margin-bottom:1.5rem}.results-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.score-panel{padding:1.5rem 2rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);min-width:240px;text-align:center}.score-panel.highlight{border-color:var(--gold);box-shadow:0 0 24px #c9a96126}.score-grade{font-family:Cormorant Garamond,serif;font-size:3rem;color:var(--gold)}.score-total{font-size:2rem;color:var(--cream);margin-bottom:1rem}.score-bars{display:flex;flex-direction:column;gap:.6rem;text-align:left}.score-bar-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-muted)}.score-bar-track{height:6px;border-radius:3px;background:var(--bg-elevated);overflow:hidden}.score-bar-fill{height:100%;background:linear-gradient(90deg,var(--burgundy),var(--gold-dim));border-radius:3px}.score-accuracy{margin-top:.75rem;font-size:.85rem;color:var(--text-muted)}.loading-text,.error-text{color:var(--text-muted);margin-top:1rem}.error-text{color:#d4a8a8}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.mode-card-actions{display:flex;gap:.75rem;margin-top:.5rem}.mode-card{cursor:default}.mode-hint{margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);max-width:520px}.game-launch-panel{display:flex;gap:1rem;flex-wrap:wrap}.how-to-play{margin-bottom:3rem;padding:2rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.how-to-play h2{font-size:1.8rem;margin-bottom:1.25rem}.steps-list{padding-left:1.25rem;color:var(--text-muted);line-height:1.8}.steps-list li{margin-bottom:.5rem}.steps-list strong{color:var(--cream)}.api-error-banner{padding:1rem 1.25rem;margin-bottom:1.25rem;border-radius:var(--radius);background:#9a4a4a33;border:1px solid var(--danger);color:#d4a8a8}.api-error-banner code{display:block;margin-top:.5rem;font-size:.85rem;color:var(--cream)}.mode-banner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;margin-bottom:1.25rem;border-radius:8px;background:#6b3a4a33;border:1px solid var(--burgundy);color:var(--cream)}.mode-banner-note{font-size:.85rem;color:var(--text-muted)}.genre-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.chip{padding:.4rem .85rem;border-radius:999px;border:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted);cursor:pointer;font-size:.85rem;transition:all .2s}.chip:hover,.chip.active{border-color:var(--gold-dim);color:var(--gold);background:#c9a96114}.live-score-meter{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.live-score-main{display:flex;align-items:baseline;gap:.5rem}.live-score-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.live-score-value{font-family:Cormorant Garamond,serif;font-size:2rem;color:var(--gold)}.live-score-details{display:flex;gap:1rem;font-size:.85rem;color:var(--text-muted);flex-wrap:wrap}.live-score-bar{flex:1;min-width:120px;height:6px;border-radius:3px;background:var(--bg-elevated);overflow:hidden}.live-score-fill{height:100%;background:linear-gradient(90deg,var(--burgundy),var(--gold-dim));border-radius:3px;transition:width .3s}.lyrics-display{text-align:center;padding:1.5rem 1rem;margin-bottom:1.5rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:.5rem}.lyric-line{font-family:Cormorant Garamond,serif;font-size:1.4rem;transition:all .3s;margin:0}.lyric-line.active{font-size:1.9rem;color:var(--cream)}.lyric-line.inactive{font-size:1.1rem;color:var(--text-muted);opacity:.5}.lyric-line.singer-a.active{color:#c9b8a0}.lyric-line.singer-b.active{color:#b8a0b0}.lyric-line.singer-both.active{color:var(--gold)}.lyric-singer-tag{display:block;font-family:"Source Sans 3",sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dim);margin-bottom:.2rem}.turn-badge.singer-A{border-color:var(--gold-dim)}.turn-badge.singer-B{border-color:#8a6a7a}.turn-badge.singer-both{border-color:var(--gold)}.duet-results{margin-top:1.5rem}.track-progress{height:4px;border-radius:2px;background:var(--bg-elevated);margin-bottom:.5rem;overflow:hidden}.track-progress-fill{height:100%;background:linear-gradient(90deg,var(--burgundy),var(--gold-dim));transition:width .1s linear}.audio-hint{font-size:.8rem;color:var(--text-muted);margin-bottom:1rem;text-align:center}.audio-hint-note{color:var(--gold-dim)}.audio-hint-error{color:#e8a0a0}.karaoke-lyrics{text-align:center;padding:1.5rem 1rem 2rem;margin-bottom:1.5rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;overflow:hidden}.karaoke-line{transition:all .35s ease;transform-origin:center bottom}.karaoke-line.line-past{opacity:.35;transform:scale(.92)}.karaoke-line.line-preview{opacity:.55;transform:scale(.96)}.karaoke-line.line-active{opacity:1;transform:scale(1)}.karaoke-line-text{font-family:var(--font-lyrics);margin:0;line-height:1.55;letter-spacing:.01em}.line-active .karaoke-line-text{font-size:2rem;color:var(--cream)}.line-preview .karaoke-line-text{font-size:1.3rem;color:var(--text-muted)}.line-past .karaoke-line-text{font-size:1.1rem}.karaoke-word{display:inline;white-space:pre;transition:color .1s,opacity .2s,transform .15s}.word-past{color:var(--gold-dim)}.word-preview{color:var(--text-muted)}.word-future{color:#d4cfc440}.word-current{color:var(--gold)}.word-hidden{opacity:0}.word-active .karaoke-char{animation:char-pulse .3s ease}.karaoke-char{display:inline-block;transition:color .08s,transform .08s,opacity .08s}.char-past{color:var(--gold-dim)}.char-current{color:#fff;transform:scale(1.15);text-shadow:0 0 12px rgba(201,169,97,.6)}.char-future{color:#d4cfc433}.karaoke-line.singer-a.line-active .char-current{color:#e8dcc8}.karaoke-line.singer-b.line-active .char-current{color:#d8c0d0}.karaoke-line.singer-both.line-active .char-current{color:var(--gold)}@keyframes char-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1.15)}}@media(max-width:640px){.app-header{flex-direction:column;gap:1rem}.hero h1{font-size:2.2rem}.app-main{padding:1.25rem}}.online-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.online-card{padding:1.75rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.online-card-featured{border-color:#c9a96159}.online-badge{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:.75rem}.online-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.online-hint{margin:1.5rem 0;padding:1rem;border-radius:8px;background:#6b3a4a26;color:var(--text-muted);font-size:.9rem}.online-hint code{color:var(--gold-dim)}.mode-card-online{border-color:#c9a96140}.room-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.room-code{color:var(--gold);font-family:var(--font-ui);letter-spacing:.12em}.room-status{color:var(--text-muted);font-size:.9rem}.room-players{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.room-player{padding:.6rem 1rem;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;gap:.5rem}.room-player.offline{opacity:.5}.room-player-name{font-weight:500}.room-tag{font-size:.7rem;padding:.15rem .45rem;border-radius:4px;background:var(--bg-elevated);color:var(--text-muted)}.room-tag.ready{color:var(--success);border:1px solid var(--success)}.room-track-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;max-height:280px;overflow-y:auto;margin:1rem 0}.room-track-item{text-align:left;padding:.75rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;color:var(--text);transition:border-color .2s}.room-track-item:hover,.room-track-item.selected{border-color:var(--gold)}.room-track-item strong{display:block;font-size:.95rem;margin-bottom:.2rem}.room-track-item span{font-size:.8rem;color:var(--text-muted)}.room-lobby-actions{display:flex;gap:1rem;margin-top:1rem}.room-code-input{font-size:1.4rem;letter-spacing:.2em;text-transform:uppercase}.room-results{padding:2rem;text-align:center}.room-wait{color:var(--text-muted);margin:2rem 0;text-align:center}.brand-logo{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--border)}.hero-logo{margin:0 auto 1rem;border-radius:50%;display:block}.mode-card-has-online{grid-column:span 1}.online-panel{margin-top:1rem;padding:1.25rem;border-radius:var(--radius);background:#0e121c99;border:1px solid var(--border)}.online-panel-compact{margin-top:.75rem;padding:1rem}.online-panel-head{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}.online-panel-head h3{font-size:1.15rem;margin-bottom:.25rem}.online-panel-head p{font-size:.85rem;color:var(--text-muted);line-height:1.4}.online-panel-icon{font-size:1.5rem}.online-panel-actions{display:flex;flex-direction:column;gap:.75rem}.online-join-inline{display:flex;gap:.5rem}.online-matchmaking{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.online-matchmaking-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.online-matchmaking h4{font-size:1rem;color:var(--gold)}.online-live-badge{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:#6b3a4a66;color:var(--cream)}.match-waiting{display:flex;align-items:center;gap:.75rem;color:var(--text-muted);font-size:.9rem}.match-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn-match{width:100%;margin-top:.5rem}.btn-sm{padding:.4rem .9rem;font-size:.85rem}.online-panel-more{display:inline-block;margin-top:.75rem;font-size:.85rem;color:var(--gold-dim)}.online-grid-v2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.online-hero-head{display:flex;gap:1rem;align-items:center}.online-hero-icon{border-radius:50%}.room-tag.grade{color:var(--gold);border-color:var(--gold-dim);font-weight:600}.game-launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;align-items:start}.game-launch-panel{padding:2rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:1rem}.game-launch-panel h3{font-size:1.3rem}