:root{--bg: #111827;--surface: #1f2937;--surface-hover: #273548;--border: #374151;--text: #f9fafb;--text-muted: #9ca3af;--accent-host: #f59e0b;--accent-host-dim: rgba(245, 158, 11, .12);--accent-player: #818cf8;--accent-player-dim: rgba(129, 140, 248, .12);font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100dvh;display:flex;flex-direction:column}#root{flex:1;display:flex;flex-direction:column}.entry-screen{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;gap:3rem}.logo-area{display:flex;flex-direction:column;align-items:center;gap:.75rem}.logo-icon{width:72px;height:72px;color:var(--accent-host)}.app-title{font-size:2.25rem;font-weight:700;letter-spacing:-.5px;color:var(--text)}.app-subtitle{font-size:1rem;color:var(--text-muted);letter-spacing:.02em}.entry-web-hint{font-size:.8rem;color:var(--text-muted);text-align:center;opacity:.7;margin-bottom:.5rem}.entry-exit-btn{margin-top:-1.5rem;opacity:.5}.role-buttons{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:340px}.role-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;padding:1.25rem 1.5rem;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;transition:background .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent}.role-btn:active{transform:scale(.98)}.role-btn--host:hover,.role-btn--host:focus-visible{background:var(--accent-host-dim);border-color:var(--accent-host);outline:none}.role-btn--player:hover,.role-btn--player:focus-visible{background:var(--accent-player-dim);border-color:var(--accent-player);outline:none}.role-btn__label{font-size:1.1rem;font-weight:600}.role-btn--host .role-btn__label{color:var(--accent-host)}.role-btn--player .role-btn__label{color:var(--accent-player)}.back-btn{align-self:flex-start;margin-bottom:.5rem}.screen-timeout-btn{opacity:.5;font-size:.75rem;align-self:center}.dev-token-btn{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);background:none;border:none;color:var(--text-muted);font-size:.7rem;opacity:.4;cursor:pointer;padding:.25rem .5rem}.dev-token-btn:hover{opacity:.8}.dev-token-box{width:100%;max-width:340px;height:6rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:monospace;font-size:.75rem;padding:.5rem;resize:none;word-break:break-all}.role-btn__desc{font-size:.875rem;color:var(--text-muted)}.screen{flex:1;display:flex;flex-direction:column;padding:2rem 1.5rem;gap:2rem;width:100%;max-width:400px;margin:0 auto}.screen--centered{align-items:center;justify-content:center;text-align:center}.screen-title{font-size:1.75rem;font-weight:700;color:var(--text)}.lobby-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.25rem}.lobby-label em{text-transform:none;letter-spacing:0;font-weight:400;font-size:.85rem}.lobby-header{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}.room-code{font-size:3.5rem;font-weight:800;letter-spacing:.15em;color:var(--accent-host);line-height:1;margin:.25rem 0}.muted-text{font-size:.875rem;color:var(--text-muted)}.error-text{font-size:.875rem;color:#f87171}.player-list{display:flex;flex-direction:column;gap:.5rem;width:100%}.player-item{padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.95rem;color:var(--text)}.avatar-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;width:100%}.avatar-btn{aspect-ratio:1;font-size:1.4rem;background:var(--surface);border:2px solid var(--border);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s;line-height:1}.avatar-btn--selected{border-color:var(--accent-player);background:color-mix(in srgb,var(--accent-player) 15%,var(--surface))}.player-avatar{font-style:normal}.playlist-list{display:flex;flex-direction:column;gap:.5rem;width:100%}.playlist-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.95rem;color:var(--text)}.playlist-item__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item__img{width:2.5rem;height:2.5rem;border-radius:6px;object-fit:cover;flex-shrink:0}.playlist-item__remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:0 .25rem;flex-shrink:0}.playlist-item__remove:hover{color:var(--text)}.player-round-header{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%}.player-round-header__name{font-size:.85rem}.player-category-img{width:7rem;height:7rem;border-radius:12px;object-fit:cover}.player-category-label{font-size:.95rem;font-weight:600;color:var(--accent-player);text-align:center}.btn{width:100%;padding:.9rem 1.5rem;border-radius:12px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn--primary{background:var(--accent-host);color:#111827}.btn--player{background:var(--accent-player);color:#111827}.btn--spotify{background:#1db954;color:#000}.btn--ghost{background:transparent;color:var(--text-muted);border:1.5px solid var(--border)}.btn--ghost:hover{color:var(--text);border-color:var(--text-muted)}.pass-btn{margin-top:.5rem;opacity:.7}.spotify-login-buttons{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px}.spotify-status{display:flex;align-items:center;gap:.5rem}.spotify-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .3s}.spotify-dot--ready{background:#1db954}.now-playing{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.now-playing__art{width:52px;height:52px;border-radius:6px;object-fit:cover;flex-shrink:0}.now-playing__info{display:flex;flex-direction:column;gap:.2rem;overflow:hidden}.now-playing__title{font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing__artist{font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-header{display:flex;flex-direction:column;gap:.25rem}.picker-search{width:100%}.picker-section{display:flex;flex-direction:column;gap:.75rem;width:100%}.picker-list-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;text-align:left;color:var(--text);transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}.picker-list-item:hover{background:var(--accent-host-dim);border-color:var(--accent-host)}.picker-list-item__img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}.picker-list-item__name{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-sections{display:flex;flex-direction:column;gap:1.5rem;width:100%}.picker-section-block{display:flex;flex-direction:column;gap:.6rem}.picker-section-title{font-size:1rem;font-weight:700;color:var(--text);letter-spacing:.01em}.picker-section-empty{font-size:.85rem;padding:.25rem 0}.picker-shelf{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch}.shelf-card-slot{position:relative;flex:0 0 130px}.shelf-card__star{position:absolute;top:5px;right:5px;width:26px;height:26px;background:#0000008c;border:none;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;color:#9ca3af;display:flex;align-items:center;justify-content:center;padding:0;transition:color .15s;-webkit-tap-highlight-color:transparent}.shelf-card__star--on{color:var(--accent-host)}.shelf-card{flex:none;width:100%;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;color:var(--text);transition:border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent}.shelf-card:hover,.shelf-card:focus-visible{border-color:var(--accent-host);outline:none}.shelf-card:active{transform:scale(.97)}.shelf-card__img{width:130px;height:130px;object-fit:cover;display:block;flex-shrink:0}.shelf-card__img-placeholder{width:130px;height:130px;background:linear-gradient(135deg,#1e3a5f,#2d1b69);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem}.shelf-card__img-placeholder:after{content:"🎵"}.shelf-card__img-placeholder--1950s{background:linear-gradient(135deg,#1c1917,#44403c)}.shelf-card__img-placeholder--1960s{background:linear-gradient(135deg,#14532d,#166534)}.shelf-card__img-placeholder--1970s{background:linear-gradient(135deg,#7c2d12,#c2410c)}.shelf-card__img-placeholder--1980s{background:linear-gradient(135deg,#4a1d96,#7c3aed)}.shelf-card__img-placeholder--1990s{background:linear-gradient(135deg,#0c4a6e,#0369a1)}.shelf-card__img-placeholder--2000s{background:linear-gradient(135deg,#064e3b,#0d9488)}.shelf-card__img-placeholder--2010s{background:linear-gradient(135deg,#831843,#db2777)}.shelf-card__img-placeholder--2020s{background:linear-gradient(135deg,#78350f,#d97706)}.shelf-card__img-placeholder--rock:after{content:"🎸"}.shelf-card__img-placeholder--pop:after{content:"🎤"}.shelf-card__img-placeholder--rap:after{content:"🎙️"}.shelf-card__img-placeholder--before2000{background:linear-gradient(135deg,#1a1a2e,#16213e)}.shelf-card__img-placeholder--after2000{background:linear-gradient(135deg,#0f2027,#203a43)}.shelf-card__img-placeholder--philippines-before2000:after,.shelf-card__img-placeholder--philippines-after2000:after{content:"🇵🇭"}.shelf-card__img-placeholder--philippines-before2000{background:linear-gradient(135deg,#1e3a5f,#ce1127)}.shelf-card__img-placeholder--philippines-after2000{background:linear-gradient(135deg,#ce1127,#1e3a5f)}.shelf-card__img-placeholder--norway-before2000:after,.shelf-card__img-placeholder--norway-after2000:after{content:"🇳🇴"}.shelf-card__img-placeholder--norway-before2000{background:linear-gradient(135deg,#c8102e,#003087)}.shelf-card__img-placeholder--norway-after2000{background:linear-gradient(135deg,#003087,#c8102e)}.shelf-card__name-wrap{padding:.4rem .5rem .5rem;overflow:hidden}.shelf-card__name{font-size:.72rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.mode-grid{display:flex;flex-direction:column;gap:1rem;width:100%}.mode-card{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;background:var(--surface);border:2px solid var(--border);border-radius:14px;cursor:pointer;text-align:left;color:var(--text);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}.mode-card:hover,.mode-card:focus-visible{border-color:var(--accent-host);outline:none}.mode-card--selected{border-color:var(--accent-host);background:var(--accent-host-dim)}.mode-card__icon{display:inline;font-size:1rem;margin-right:.3rem}.mode-card__name{font-size:1.1rem;font-weight:700}.mode-card__desc{font-size:.85rem;color:var(--text-muted);line-height:1.5}.mode-card--locked{border-color:var(--accent-host)}.mode-card__lock{font-size:.85rem;margin-left:.4rem;opacity:.7}.mode-card__limit{font-size:.78rem;color:var(--accent-host);font-weight:500}.upgrade-spotify-note{font-size:.8rem;color:var(--text-muted);text-align:center;line-height:1.5;border-top:1px solid var(--border);padding-top:1rem;width:100%}.spotify-reminder{font-size:.78rem;color:var(--text-muted);text-align:center}.setup-item{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}.setup-item__title{font-weight:700;font-size:1rem}.setup-item__desc{font-size:.85rem;color:var(--text-muted);line-height:1.5}.upgrade-option{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}.upgrade-option__header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.upgrade-option__name{font-weight:700;font-size:1.05rem}.upgrade-option__price{font-size:.8rem;color:var(--accent-host);font-weight:500}.upgrade-option__desc{font-size:.85rem;color:var(--text-muted);line-height:1.5}.lobby-mode-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;width:100%}.lobby-mode-info{display:flex;flex-direction:column;gap:.2rem}.lobby-mode-name{font-size:.95rem;font-weight:600;color:var(--text)}.btn--sm{padding:.6rem .75rem;font-size:.8rem}.song-timer{display:flex;flex-direction:column;align-items:center;gap:.1rem}.song-timer__value{font-size:3rem;font-weight:700;color:var(--accent-player);line-height:1;font-variant-numeric:tabular-nums}.song-timer__label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.speed-counter{display:flex;flex-direction:column;align-items:center;gap:.1rem}.speed-counter__value{font-size:5rem;font-weight:800;color:var(--accent-host);line-height:1;font-variant-numeric:tabular-nums}.speed-counter__label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.btn--buzz{width:100%;padding:1.25rem;font-size:1.4rem;font-weight:800;background:var(--accent-host);color:#000;border:none;border-radius:14px;cursor:pointer;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent;letter-spacing:.02em}.btn--buzz:active{transform:scale(.97)}.btn--buzz:disabled{opacity:.35;cursor:default}.speed-buzz-status{padding:1rem;background:var(--accent-host-dim);border:1px solid var(--accent-host);border-radius:10px;text-align:center;display:flex;flex-direction:column;gap:.4rem}.speed-buzz-status__text{font-size:1rem}.speed-result{padding:.9rem 1rem;border-radius:10px;font-size:.95rem;font-weight:600;text-align:center}.speed-result--correct{background:#34d39926;border:1px solid #34d399;color:#34d399}.speed-result--wrong{background:#f8717126;border:1px solid #f87171;color:#f87171}.speed-buzzed-points{font-size:1rem;color:var(--accent-host);text-align:center}.answer-progress{display:flex;align-items:center;gap:.75rem}.answer-progress-dots{display:flex;gap:.4rem;flex-wrap:wrap}.answer-progress-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:background .2s}.answer-progress-dot--done{background:#34d399}.inline-scores{width:100%;display:flex;flex-direction:column;gap:.4rem}.inline-score-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:8px}.inline-score-item--me{border-color:var(--accent-player);background:var(--accent-player-dim)}.inline-score-item--correct{border-color:#34d399;background:#34d3991f}.inline-score-item--wrong{border-color:#f87171;background:#f871711f}.inline-score-item__rank{font-size:.75rem;color:var(--text-muted);width:1.75rem;flex-shrink:0}.inline-score-item__name{flex:1;font-size:.9rem;font-weight:500}.inline-score-item__score{font-size:.9rem;font-weight:700;color:var(--accent-host)}.game-round-header{display:flex;justify-content:space-between;align-items:center}.advance-row{display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap}.host-track-card{display:flex;gap:1rem;align-items:center;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:14px}.host-track-card__art{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0}.host-track-card__info{display:flex;flex-direction:column;gap:.25rem;overflow:hidden}.host-track-card__artist{font-size:1.1rem;font-weight:700;color:var(--accent-host);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-track-card__title{font-size:.9rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-controls{display:flex;flex-direction:column;gap:.6rem}.answer-list{display:flex;flex-direction:column;gap:.5rem;width:100%}.answer-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--surface)}.answer-item--correct{border-color:#34d399;background:#34d3991a}.answer-item--wrong{border-color:#f87171;background:#f871711a}.answer-item--none{opacity:.5}.answer-item__name{font-size:.85rem;color:var(--text-muted);flex-shrink:0}.answer-item__answer{flex:1;font-size:.95rem;font-weight:500;color:var(--text)}.answer-item__icon{font-size:1rem;flex-shrink:0}.score-list{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:360px}.score-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}.score-item--me{border-color:var(--accent-player);background:var(--accent-player-dim)}.score-item__rank{font-size:.8rem;color:var(--text-muted);width:2rem;flex-shrink:0}.score-item__name{flex:1;font-weight:600}.score-item__score{font-size:.9rem;color:var(--accent-host);font-weight:700}.player-guess-area{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%}.player-submitted-answer{font-size:.875rem;color:var(--text-muted)}.player-reveal{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.player-reveal__art{width:140px;height:140px;border-radius:12px;object-fit:cover}.player-reveal__correct{font-size:1.5rem;font-weight:700;color:var(--text)}.player-reveal__track{font-size:.9rem;color:var(--text-muted)}.player-result{padding:.6rem 1.25rem;border-radius:99px;font-weight:600;font-size:.95rem}.player-result--correct{background:#34d39926;color:#34d399}.player-result--wrong{background:#f8717126;color:#f87171}.join-form{display:flex;flex-direction:column;gap:1.25rem;width:100%;max-width:320px}.field{display:flex;flex-direction:column;gap:.4rem}.field-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.field-input{padding:.75rem 1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:1rem;font-family:inherit;transition:border-color .15s}.field-input:focus{outline:none;border-color:var(--accent-player)}.field-input--code{font-size:1.5rem;font-weight:700;letter-spacing:.2em;text-align:center;text-transform:uppercase}.waiting-indicator{display:flex;flex-direction:column;align-items:center;gap:1rem}.waiting-dots{display:flex;gap:.5rem}.waiting-dots span{width:10px;height:10px;border-radius:50%;background:var(--accent-player);animation:dot-pulse 1.4s ease-in-out infinite}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.rewind-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}.rewind-range-card{background:var(--surface);border:2px solid transparent;border-radius:12px;padding:1.25rem 1rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:border-color .15s}.rewind-range-card:hover:not(:disabled){border-color:var(--accent-host)}.rewind-range-card--loading{border-color:var(--accent-host);opacity:.7}.rewind-range-card:disabled{cursor:default}.rewind-range-card__range{font-size:1.4rem;font-weight:700;color:var(--accent-host)}.rewind-range-card__label{font-size:.75rem;color:var(--text-muted);text-align:center}.timeline-howtoplay{margin-top:1.5rem;background:var(--surface);border-radius:12px;padding:1rem 1.25rem;text-align:left;max-width:320px}.timeline-howtoplay__title{font-weight:700;font-size:.9rem;color:var(--accent-player);margin:0 0 .6rem}.timeline-howtoplay__list{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--text-muted);line-height:1.4}.timeline-howtoplay__list strong{color:var(--text)}.timeline-demo{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--surface);border-radius:12px;max-width:320px;min-height:110px;overflow:hidden;position:relative}.timeline-demo__mystery{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;min-height:56px;background:var(--surface-2, #374151);border:2px dashed var(--accent-player);border-radius:8px;opacity:0;transform:translateY(-12px);transition:opacity .35s ease,transform .35s ease;gap:2px;padding:4px}.timeline-demo__mystery--visible{opacity:1;transform:translateY(0)}.timeline-demo__mystery--placed{border-style:solid;border-color:#4ade80;background:#4ade8014}.timeline-demo__row{display:flex;align-items:center;gap:4px}.timeline-demo__card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;min-height:60px;background:var(--surface-2, #374151);border:1.5px solid var(--border, #374151);border-radius:8px;padding:4px 2px;gap:2px;transition:border-color .3s,background .3s}.timeline-demo__card--baseline{border-color:#4ade80;background:#1c2a1c}.timeline-demo__card--correct{border-color:#4ade80;background:#4ade801f;animation:demo-pop .3s ease}.timeline-demo__zone{width:28px;height:52px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-muted);border:1.5px solid var(--border, #374151);border-radius:6px;transition:border-color .25s,background .25s,color .25s}.timeline-demo__zone--pulse{border-color:var(--accent-host);background:#f59e0b2e;color:var(--accent-host);animation:demo-pulse .5s ease infinite alternate}.timeline-demo__check{font-size:1rem;font-weight:700;color:#4ade80}@keyframes demo-pulse{0%{box-shadow:0 0 #f59e0b66}to{box-shadow:0 0 6px 3px #f59e0b26}}@keyframes demo-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.mode-howtoplay{margin-top:1.25rem;background:var(--surface);border-radius:12px;padding:1rem 1.25rem;text-align:left;width:100%;max-width:360px}.mode-howtoplay__title{font-weight:700;font-size:.9rem;margin:0 0 .5rem;color:var(--accent-player)}.mode-howtoplay__list{margin:0;padding-left:1.25rem;font-size:.85rem;color:var(--text-muted);line-height:1.7}.mode-howtoplay__list strong{color:var(--text)}.mode-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--surface);border-radius:14px;padding:18px 20px;width:100%;max-width:320px;min-height:110px;margin-top:1.25rem}.mode-demo__note{font-size:2rem;animation:demo-note-pulse 1.4s ease infinite alternate;transition:opacity .4s}.mode-demo__note--dim{opacity:.25}.mode-demo__question{font-size:.9rem;font-weight:600;color:var(--text);margin:0;animation:demo-pop .25s ease}.mode-demo__counter{display:flex;flex-direction:column;align-items:center}.mode-demo__counter-val{font-size:2rem;font-weight:800;color:var(--accent-host);line-height:1;transition:color .3s}.mode-demo__counter-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.mode-demo__input-row{display:flex;flex-direction:column;gap:8px;width:100%;animation:demo-pop .25s ease}.mode-demo__input-mock{background:var(--bg);border:1px solid #374151;border-radius:8px;padding:7px 10px;font-size:.85rem;color:var(--text);text-align:left}.mode-demo__cursor{color:var(--accent-player);animation:demo-blink .75s step-end infinite}.mode-demo__submit-btn{background:var(--accent-player);color:#fff;border-radius:8px;padding:7px 12px;font-size:.8rem;font-weight:600;text-align:center}.mode-demo__buzz-btn{background:var(--accent-host);color:#111827;border-radius:8px;padding:7px 12px;font-size:.8rem;font-weight:700;text-align:center}.mode-demo__waiting{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted);animation:demo-pop .25s ease}.mode-demo__waiting p{margin:0}.mode-demo__reveal{font-size:.9rem;font-weight:700;color:#4ade80;background:#4ade801a;border:1px solid rgba(74,222,128,.3);border-radius:8px;padding:8px 14px;animation:demo-pop .3s ease}@keyframes demo-note-pulse{0%{transform:scale(1)}to{transform:scale(1.12)}}@keyframes demo-blink{50%{opacity:0}}.rewind-player-screen{display:flex;flex-direction:column;gap:.75rem;padding-bottom:1rem}.rewind-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .25rem}.rewind-score{font-weight:700;font-size:1rem;color:var(--accent-host)}.rewind-timer{font-size:1.5rem;font-weight:700;color:var(--text);min-width:3rem;text-align:right}.rewind-timer--urgent{color:#ef4444}.rewind-status{font-size:.85rem;color:var(--muted)}.rewind-result{font-weight:600;font-size:.9rem}.rewind-result--correct{color:#4ade80}.rewind-result--wrong{color:#f87171}.rewind-new-card-area{display:flex;flex-direction:column;align-items:center;gap:.25rem}.rewind-genre-label{font-size:.7rem;letter-spacing:.1em;color:var(--muted);margin:0}.rewind-card{border-radius:10px;padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:100px;text-align:center;-webkit-user-select:none;user-select:none}.rewind-card--new{background:var(--accent-host);color:#000;cursor:grab;touch-action:none;width:140px}.rewind-card--new:active{cursor:grabbing}.rewind-card--dragging{opacity:.4}.rewind-card--submitted{opacity:.6;cursor:default}.rewind-card--overlay{background:var(--accent-host);color:#000;width:120px;box-shadow:0 8px 24px #0006}.rewind-card--placed{background:var(--surface);border:1px solid #374151;width:90px;font-size:.8rem;flex-shrink:0}.rewind-card--baseline{background:#1c2a1c;border-color:#4ade80}.rewind-card__question{font-size:1.8rem;font-weight:700}.rewind-card__hint{font-size:.65rem;opacity:.7}.rewind-card__year{font-size:1.1rem;font-weight:700;color:var(--accent-host)}.rewind-card__name{font-size:.7rem;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rewind-card__artist{font-size:.65rem;color:var(--text-muted)}.rewind-card__baseline-label{font-size:.6rem;font-weight:700;color:#4ade80;text-transform:uppercase;letter-spacing:.05em}.rewind-timeline-wrap{overflow-x:auto;padding:.5rem 0;width:100%}.rewind-timeline{display:flex;align-items:center;gap:0;padding:0 .5rem;width:max-content;margin:0 auto}.rewind-timeline-slot{display:flex;align-items:center}.rewind-zone{width:52px;height:88px;border:2px dashed #374151;border-radius:8px;background:transparent;color:var(--text-muted);font-size:1.2rem;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,background .15s}.rewind-zone:hover:not(.rewind-zone--impossible){border-color:var(--accent-host);color:var(--accent-host)}.rewind-zone--over{border-color:var(--accent-host);background:#f59e0b26}.rewind-zone--selected{border-color:#4ade80;background:#4ade8026;color:#4ade80}.rewind-zone--impossible{opacity:.25;cursor:not-allowed;border-style:dashed}.rewind-reveal-banner{text-align:center;padding:.75rem;background:var(--surface);border-radius:12px}.rewind-reveal-year{font-size:2rem;font-weight:700;color:var(--accent-host);margin:0}.rewind-reveal-name{font-size:1rem;font-weight:600;margin:.2rem 0 0}.rewind-reveal-artist{font-size:.85rem;color:var(--muted);margin:0}.rewind-host-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.rewind-room-code{font-size:1.1rem;font-weight:700;letter-spacing:.1em;color:var(--text-muted)}.rewind-range-badge{background:var(--surface);border:1px solid var(--accent-host);color:var(--accent-host);border-radius:6px;padding:.2rem .6rem;font-weight:700;font-size:.85rem}.rewind-score-list{display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0}.rewind-score-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);padding:.5rem .75rem;border-radius:8px}.rewind-score-val{font-weight:700;color:var(--accent-host)}.rewind-round-info{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--surface);border-radius:12px}.rewind-genre-badge{font-size:.7rem;letter-spacing:.1em;color:var(--muted);margin:0}.rewind-round-results{display:flex;flex-direction:column;gap:.4rem}.rewind-result-row{display:flex;justify-content:space-between;padding:.5rem .75rem;border-radius:8px;font-weight:600}.rewind-result-row--correct{background:#4ade8026;color:#4ade80}.rewind-result-row--wrong{background:#f871711a;color:#f87171}.rewind-final-scores{display:flex;flex-direction:column;gap:.4rem;width:100%;margin:1rem 0}.rewind-final-score-row{display:flex;justify-content:space-between;padding:.5rem .75rem;background:var(--surface);border-radius:8px;font-weight:600}