: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;gap:.4rem;padding:.7rem 1.4rem;border-radius:10px;border:1px solid var(--border);font-size:.95rem;font-weight:500;font-family:var(--font-ui);cursor:pointer;transition:all .2s;text-decoration:none;background:transparent;color:var(--text);white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--burgundy),#5a3040);border-color:#c9a96140;color:var(--cream);box-shadow:0 2px 12px #6b3a4a59}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#7d4456,#6b3a4a);transform:translateY(-1px)}.btn-secondary{background:var(--bg-elevated);border-color:var(--border);color:var(--cream)}.btn-secondary:hover:not(:disabled){border-color:var(--gold-dim);color:var(--gold)}.btn-accent{background:linear-gradient(135deg,#c9a96133,#c9a96114);border-color:var(--gold-dim);color:var(--gold)}.btn-accent:hover:not(:disabled){background:#c9a9612e;border-color:var(--gold)}.btn-ghost{background:transparent}.btn-ghost:hover:not(:disabled){border-color:var(--gold-dim);color:var(--gold);background:#c9a9610f}.btn-lg{padding:.9rem 2rem;font-size:1.05rem;border-radius:12px}.btn-sm{padding:.45rem .9rem;font-size:.85rem}.btn-block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.input,.search-input,.field input[type=text],.field input:not([type]){width:100%;padding:.7rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-family:var(--font-ui);font-size:.95rem;transition:border-color .2s}.input:focus,.search-input:focus,.field input:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px #c9a9611a}.input::placeholder,.search-input::placeholder{color:var(--text-muted);opacity:.7}.input-code{font-size:1.15rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;font-variant-numeric:tabular-nums}.card{padding:1.5rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border)}.card-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1rem}.alert{padding:.85rem 1.1rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem}.alert-error{background:#9a4a4a26;border:1px solid var(--danger);color:#e8b0b0}.page-footer-actions{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.back-link{display:inline-block;font-size:.88rem;color:var(--text-muted);margin-bottom:.5rem}.back-link:hover{color:var(--gold)}.section-title{font-size:1.15rem;margin:1.25rem 0 .75rem;color:var(--cream)}.mode-entry{max-width:640px;margin:0 auto}.mode-entry-actions{display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem}.tab-back{margin-bottom:.5rem}.modes-grid-simple .mode-card{min-height:280px}.track-picker{margin-top:.5rem}.room-player-empty{border-style:dashed;opacity:.6}.room-player-empty .room-player-avatar{background:var(--bg-elevated);color:var(--text-muted)}.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(3,1fr);gap:1.25rem;margin-bottom:2rem}.mode-card{padding:0;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);transition:all .25s;display:flex;flex-direction:column;overflow:hidden}.mode-card:hover{border-color:var(--gold-dim);transform:translateY(-2px);box-shadow:var(--shadow)}.mode-card-top{padding:1.75rem 1.75rem 1rem;flex:1}.mode-icon{font-size:2rem;display:block;margin-bottom:.75rem}.mode-card h2{font-size:1.6rem;margin-bottom:.5rem}.mode-card p{color:var(--text-muted);line-height:1.5;font-size:.95rem}.mode-card-actions{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.75rem 1.75rem;border-top:1px solid var(--border);background:#00000026}.mode-cta{color:var(--gold);font-size:.9rem}.online-promo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem 2.25rem;margin-bottom:3rem;border-radius:var(--radius);background:linear-gradient(135deg,#6b3a4a40,#c9a96114);border:1px solid rgba(201,169,97,.2)}.online-promo h2{font-size:1.6rem;margin-bottom:.35rem}.online-promo p{color:var(--text-muted);font-size:.95rem}.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:10px;border:1px solid var(--border);background:var(--bg-panel);color:var(--text)}.field select{padding:.7rem 1rem;border-radius:10px;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:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.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-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}.voice-status{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin-bottom:1rem}.voice-pill{font-size:.78rem;padding:.35rem .7rem;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted)}.voice-pill.on{border-color:#5cb87a;color:#9fd4b0}.voice-pill.singing{border-color:var(--gold-dim);color:var(--gold)}.voice-pill.muted{opacity:.85}.voice-hint{font-size:.72rem;color:var(--text-muted);opacity:.8}.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:900px){.modes-grid{grid-template-columns:1fr}.online-promo{flex-direction:column;text-align:center}}@media(max-width:640px){.app-header{flex-direction:column;gap:1rem;padding:1rem 1.25rem}.main-nav{flex-wrap:wrap;justify-content:center}.hero h1{font-size:2.2rem}.app-main{padding:1.25rem}.online-join-row{grid-template-columns:1fr}.online-join-btn{width:100%}.room-header{flex-direction:column;align-items:stretch}.room-lobby-actions .btn{flex:1}}.online-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem;align-items:start}.online-highlight{animation:highlight-pulse 1.5s ease 2}@keyframes highlight-pulse{0%,to{box-shadow:none}50%{box-shadow:0 0 0 3px #c9a96159;border-radius:var(--radius)}}.online-card{padding:1.75rem;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border);display:flex;flex-direction:column;gap:.25rem}.online-card-battle{border-color:#c9a96138}.online-card-quick{background:linear-gradient(160deg,var(--bg-panel),rgba(107,58,74,.12))}.online-card-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.online-card-icon{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;font-size:1.5rem;border-radius:12px;background:#c9a9611a;border:1px solid var(--border)}.online-card-head h2{font-size:1.35rem;margin-bottom:.25rem}.online-card-head p{font-size:.88rem;color:var(--text-muted);line-height:1.4}.online-join-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end;margin-top:.5rem}.online-join-field{margin-bottom:0}.online-join-btn{height:46px;min-width:90px}.online-quick-actions{display:flex;flex-direction:column;gap:.6rem}.online-matchmaking{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}.online-matchmaking-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}.online-matchmaking h3{font-size:1rem;color:var(--gold);font-family:var(--font-ui);font-weight:600}.online-matchmaking-desc{font-size:.85rem;color:var(--text-muted);margin-bottom:.85rem}.online-live-badge{font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:#6b3a4a73;color:var(--cream);white-space:nowrap}.match-waiting{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.85rem 1rem;border-radius:10px;background:#0003;color:var(--text-muted);font-size:.9rem}.match-spinner{width:18px;height:18px;flex-shrink:0;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room-page{max-width:900px}.room-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}.room-header-main{display:flex;align-items:center;gap:1rem}.room-mode-badge{width:52px;height:52px;display:grid;place-items:center;font-size:1.4rem;border-radius:14px;background:#c9a9611a;border:1px solid var(--border)}.room-title{font-size:1.6rem;margin-bottom:.25rem}.room-code{color:var(--gold);font-family:var(--font-ui);font-weight:600;letter-spacing:.14em;font-size:1.1rem}.room-status{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--text-muted);font-size:.88rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.status-dot.online{background:var(--success);box-shadow:0 0 8px #5a8a6a99}.room-phase{padding:.15rem .5rem;border-radius:4px;background:var(--bg-elevated);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.room-track-name{color:var(--gold-dim)}.room-players{margin-bottom:1.25rem}.room-players-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.room-player{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border)}.room-player.offline{opacity:.55}.room-player-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:600;font-size:1rem;background:linear-gradient(135deg,var(--burgundy),rgba(201,169,97,.3));color:var(--cream)}.room-player-name{font-weight:500;display:block;margin-bottom:.25rem}.room-player-tags{display:flex;flex-wrap:wrap;gap:.3rem}.room-tag{font-size:.68rem;padding:.15rem .45rem;border-radius:4px;background:#00000040;color:var(--text-muted);border:1px solid var(--border)}.room-tag.host{color:var(--gold);border-color:var(--gold-dim)}.room-tag.ready{color:#a8d4b8;border-color:var(--success)}.room-tag.grade{color:var(--gold);border-color:var(--gold-dim);font-weight:600}.room-tag.offline{color:var(--text-muted)}.room-lobby{margin-bottom:1.25rem}.room-track-picker h2{font-size:1.2rem;margin-bottom:1rem}.room-track-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;max-height:320px;overflow-y:auto;margin:1rem 0;padding-right:.25rem}.room-track-list::-webkit-scrollbar{width:6px}.room-track-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.room-track-item{text-align:left;padding:.85rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;color:var(--text);transition:all .2s;font-family:var(--font-ui)}.room-track-item:hover{border-color:var(--gold-dim);background:#c9a9610d}.room-track-item.selected{border-color:var(--gold);background:#c9a9611a;box-shadow:0 0 0 1px #c9a96133}.room-track-item strong{display:block;font-size:.92rem;margin-bottom:.2rem;color:var(--cream)}.room-track-item span{font-size:.8rem;color:var(--text-muted)}.room-lobby-actions{display:flex;gap:.75rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);flex-wrap:wrap}.room-wait{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2.5rem 1rem;color:var(--text-muted);text-align:center}.room-results{text-align:center;margin-bottom:1.25rem}.room-results h2{font-size:1.6rem;margin-bottom:1.5rem}.room-game{margin-bottom:1.25rem}.brand-logo{height:48px;width:auto;object-fit:contain;display:block}.hero-logo{height:140px;width:auto;margin:0 auto 1.25rem;display:block;object-fit:contain}.online-hero-head{display:flex;gap:1rem;align-items:center}.online-hero-icon{border-radius:50%;box-shadow:0 0 0 1px var(--border)}.game-launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;align-items:stretch}.game-launch-panel{display:flex;flex-direction:column;gap:.85rem}.game-launch-panel h3{font-size:1.3rem}.game-launch-panel p{color:var(--text-muted);font-size:.92rem;flex:1}