:root{--bg:#0f1115;--bg-panel:#171a21;--bg-raised:#1f2430;--border:#2b313d;--text:#eef1f6;--text-muted:#a3adbd;--accent:#1db954;--accent-contrast:#05240f;--danger:#ef5350;--warning:#f0b429;--focus:#7cc0ff;--radius:10px;--space:1rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3{margin:0 0 .5rem;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1rem}p{margin:0 0 .75rem}code{background:var(--bg-raised);word-break:break-all;border-radius:4px;padding:.1em .35em;font-size:.9em}a{color:var(--focus)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{flex-direction:column;gap:1rem;max-width:60rem;margin:0 auto;padding:1.5rem 1rem 3rem;display:flex}.app__header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.app__tagline{color:var(--text-muted);margin:0;font-size:.9rem}.app__main{flex-direction:column;gap:1rem;display:flex}.app__footer{color:var(--text-muted);border-top:1px solid var(--border);padding-top:1rem;font-size:.8rem}.app__footer p{margin:0}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.panel__header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.panel__header h2{margin:0}.empty{color:var(--text-muted);margin:0}.button{font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.55rem .9rem;font-weight:600;transition:background-color .12s,border-color .12s,opacity .12s}.button:hover:not(:disabled){background:#29303e}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.button--primary:hover:not(:disabled){background:#24d066}.button--ghost{background:0 0}.button--danger{background:var(--danger);border-color:var(--danger);color:#2a0a0a}.button--large{width:100%;padding:.75rem 1.25rem;font-size:1rem}.button--play{align-items:center;gap:.5rem;display:inline-flex}.field{flex-direction:column;gap:.3rem;margin-bottom:.75rem;display:flex}.field--grow{flex:16rem;margin-bottom:0}.field--rounds{max-width:12rem}.field__label{color:var(--text-muted);font-size:.85rem;font-weight:600}.field__optional{opacity:.75;font-weight:400}.field__hint{color:var(--text-muted);margin:.15rem 0 0;font-size:.8rem}.input,.textarea{font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:.55rem .7rem}.input--title{font-size:1.1rem;font-weight:600}.input--number{max-width:8rem}.textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem}.fieldset{border:none;margin:0 0 1rem;padding:0}.fieldset legend{margin-bottom:.4rem;padding:0}.login{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.login__status{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.9rem;display:inline-flex}.login__dot{background:var(--text-muted);border-radius:50%;width:.55rem;height:.55rem}.login__dot--online{background:var(--accent)}.tabs{gap:.4rem;display:flex}.tab{font:inherit;color:var(--text-muted);border-radius:var(--radius);cursor:pointer;background:0 0;border:1px solid #0000;padding:.45rem .9rem;font-weight:600}.tab--active{color:var(--text);background:var(--bg-panel);border-color:var(--border)}.welcome__steps{color:var(--text-muted);margin:0 0 1rem;padding-left:1.2rem}.notice{border:1px solid var(--danger);border-radius:var(--radius);background:#ef535014;border-left-width:4px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin:.75rem 0;padding:.75rem 1rem;display:flex}.notice--warning{border-color:var(--warning);background:#f0b42914}.notice__body{flex:20rem}.notice__title{margin-bottom:.25rem;display:block}.notice__message{margin:0}.notice__details{color:var(--text-muted);margin:.5rem 0 0;padding-left:1.1rem;font-size:.85rem}.notice__actions{gap:.4rem;display:flex}.flash{color:var(--accent);margin:.75rem 0 0;font-size:.85rem}.loading{color:var(--text-muted);align-items:center;gap:.6rem;padding:.75rem 0;display:flex}.loading--inline{padding:.25rem 0;font-size:.85rem}.loading__spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex:none;width:1.1rem;height:1.1rem;animation:.7s linear infinite spin}.loading__detail{opacity:.8;font-size:.8rem;display:block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading__spinner{animation-duration:3s}}.progress{background:var(--bg-raised);border-radius:999px;height:.4rem;overflow:hidden}.progress__fill{background:var(--accent);height:100%;transition:width .2s}.sets{grid-template-columns:minmax(15rem,20rem) 1fr;align-items:start;gap:1rem;display:grid}.sets__create{align-items:flex-end;gap:.5rem;margin-bottom:1rem;display:flex}.set-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.set-list__item{width:100%;font:inherit;text-align:left;color:var(--text);background:var(--bg-raised);border-radius:var(--radius);cursor:pointer;border:1px solid #0000;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .75rem;display:flex}.set-list__item--active{border-color:var(--accent)}.set-list__count{color:var(--text-muted);flex:none;font-size:.8rem}.set-editor__header{flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-bottom:.5rem;display:flex}.set-editor__header-actions{gap:.5rem;display:flex}.set-editor__meta{color:var(--text-muted);font-size:.8rem}.set-editor__add{flex-wrap:wrap;align-items:flex-start;gap:.5rem;margin:1rem 0;display:flex}.set-editor__add .button{margin-top:1.35rem}.set-editor__footer{border-top:1px solid var(--border);margin-top:1rem;padding-top:.75rem}.confirm{flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.source-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.source{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.source__image{object-fit:cover;border-radius:6px;flex:none;width:3rem;height:3rem}.source__image--empty{background:var(--bg-panel);color:var(--text-muted);place-items:center;display:grid}.source__meta{flex:1;min-width:0}.source__name{overflow-wrap:anywhere;margin:0;font-weight:600}.source__detail{color:var(--text-muted);margin:0;font-size:.8rem}.tag{text-transform:uppercase;letter-spacing:.04em;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:.1rem .4rem;font-size:.7rem;font-weight:700;display:inline-block}.tag--artist{color:#8ecdff}.tag--playlist{color:#c8a2ff}.tag--correct{color:var(--accent);border-color:var(--accent)}.tag--incorrect,.tag--lost{color:var(--danger);border-color:var(--danger)}.modal-backdrop{z-index:10;background:#0009;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);width:min(42rem,100%);max-height:90vh;padding:1.25rem;overflow-y:auto}.modal__header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.modal__header h2{margin:0}.modal__actions{flex-wrap:wrap;gap:.5rem;margin-top:.75rem;display:flex}.game-setup__load{margin:1rem 0}.game-setup__summary{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);margin-bottom:1rem;padding:.85rem 1rem}.game-setup__count{margin:0 0 .35rem}.game-setup__details summary{cursor:pointer;color:var(--text-muted);font-size:.85rem}.report-list{flex-direction:column;gap:.3rem;margin:.5rem 0 0;padding:0;font-size:.85rem;list-style:none;display:flex}.report-list__error{color:var(--danger)}.mode-options{gap:.5rem;display:grid}.mode-option{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);cursor:pointer;align-items:flex-start;gap:.6rem;padding:.7rem .85rem;display:flex}.mode-option:has(input:checked){border-color:var(--accent)}.mode-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}.mode-option--disabled{opacity:.55;cursor:not-allowed}.mode-option__body{flex-direction:column;gap:.15rem;display:flex}.mode-option__title{font-weight:600}.mode-option__description,.mode-option__disabled-reason{color:var(--text-muted);font-size:.85rem}.mode-option__disabled-reason{color:var(--warning)}.hud{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.hud__row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.hud__stats{flex-wrap:wrap;gap:1.25rem;display:flex}.hud__stat{flex-direction:column;display:flex}.hud__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.7rem}.hud__value{font-size:1.1rem;font-weight:700}.hud__detail{color:var(--text-muted);margin:0;font-size:.85rem}.audio{margin:1rem 0}.audio__status{color:var(--text-muted);margin:.5rem 0 0;font-size:.85rem}.excerpt-track{flex-wrap:wrap;gap:.4rem;margin:0 0 .5rem;padding:0;list-style:none;display:flex}.excerpt-track__step{border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:.2rem .55rem;font-size:.8rem;font-weight:600}.excerpt-track__step--current{border-color:var(--accent);color:var(--accent)}.excerpt-track__step--used{opacity:.45;text-decoration:line-through}.options{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.option{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);cursor:pointer;align-items:center;gap:.6rem;padding:.7rem .85rem;display:flex}.option--selected{border-color:var(--accent)}.option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}.options--revealed .option{cursor:default;justify-content:space-between}.option--correct{border-color:var(--accent);background:#1db9541f}.option--wrong{border-color:var(--danger);background:#ef53501f}.option__text{overflow-wrap:anywhere}.option__badge{color:var(--text-muted);flex:none;font-size:.75rem}.feedback{min-height:1.5rem;color:var(--warning);font-size:.9rem}.guess-form__actions{flex-wrap:wrap;gap:.5rem;margin-top:.75rem;display:flex}.combo{flex-direction:column;gap:.3rem;display:flex;position:relative}.combo__list{z-index:5;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);max-height:17rem;margin:.25rem 0 0;padding:.25rem;list-style:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 12px 28px #00000073}.combo__option{cursor:pointer;border-radius:6px;flex-direction:column;gap:.1rem;padding:.45rem .6rem;display:flex}.combo__option--active{background:var(--accent);color:var(--accent-contrast)}.combo__title{overflow-wrap:anywhere;font-weight:600}.combo__artist{color:var(--text-muted);overflow-wrap:anywhere;font-size:.8rem}.combo__option--active .combo__artist{color:var(--accent-contrast);opacity:.8}.combo__empty{z-index:5;color:var(--text-muted);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);margin:.25rem 0 0;padding:.6rem;font-size:.85rem;position:absolute;top:100%;left:0;right:0}.attempts{color:var(--text-muted);margin-top:1rem;font-size:.85rem}.attempts summary{cursor:pointer}.attempts__list{margin:.5rem 0 0;padding-left:1.1rem}.attempts__excerpt{color:var(--text);font-weight:700}.reveal{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);border-left-width:4px;margin:1rem 0;padding:1rem}.reveal--correct{border-left-color:var(--accent)}.reveal--incorrect{border-left-color:var(--danger)}.reveal__headline{margin:0 0 .75rem;font-size:1.1rem;font-weight:700}.reveal__body{align-items:flex-start;gap:1rem;display:flex}.reveal__art{object-fit:cover;border-radius:8px;flex:none;width:5.5rem;height:5.5rem}.reveal__art--empty{background:var(--bg-panel);color:var(--text-muted);place-items:center;font-size:2rem;display:grid}.reveal__meta{min-width:0}.reveal__title{overflow-wrap:anywhere;margin:0;font-weight:700}.reveal__artist,.reveal__album{color:var(--text-muted);overflow-wrap:anywhere;margin:0;font-size:.9rem}.reveal__link{margin-top:.4rem;font-size:.85rem;display:inline-block}.reveal__detail{color:var(--text-muted);margin:.75rem 0 0;font-size:.9rem}.reveal__points{color:var(--accent);margin:.35rem 0 0;font-weight:700}.reveal__points--none{color:var(--text-muted)}.results__summary{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.75rem;margin:0 0 1.5rem;display:grid}.results__stat{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem}.results__stat dt{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.7rem}.results__stat dd{margin:.15rem 0 0;font-size:1.2rem;font-weight:700}.results__score{color:var(--accent)}.results__rounds{flex-direction:column;gap:.4rem;margin:0 0 1.5rem;padding:0;list-style:none;display:flex}.results__round{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);border-left-width:3px;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.results__round--correct{border-left-color:var(--accent)}.results__round--incorrect,.results__round--lost{border-left-color:var(--danger)}.results__round-number{color:var(--text-muted);flex:none;width:1.5rem;font-weight:700}.results__round-track{flex-direction:column;flex:1;min-width:0;display:flex}.results__round-title{overflow-wrap:anywhere;font-weight:600}.results__round-artist{color:var(--text-muted);overflow-wrap:anywhere;font-size:.8rem}.results__round-meta{color:var(--text-muted);flex-wrap:wrap;flex:none;justify-content:flex-end;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.results__round-points{color:var(--text);font-weight:700}.results__actions{flex-wrap:wrap;gap:.5rem;display:flex}.results__actions .button{flex:14rem}@media (width<=48rem){.sets{grid-template-columns:1fr}.app__header{flex-direction:column;align-items:stretch}.set-editor__add .button,.sets__create .button{width:100%;margin-top:0}.set-editor__add,.sets__create{flex-direction:column;align-items:stretch}.set-editor__add .field--grow,.sets__create .field--grow{flex:none}.hud__row{align-items:flex-start}.results__round{flex-wrap:wrap}.results__round-meta{justify-content:flex-start;width:100%;padding-left:2.25rem}}