:root{--bg: #0a0a0a;--surface: #181818;--surface-2: #232323;--border: #2e2e2e;--accent: #3b82f6;--accent-dim: #2563eb;--text: #f0f0f0;--text-muted: #888;--correct: #22c55e;--wrong: #ef4444;--warn: #ff9500;font-family:Inter,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100dvh;display:flex;align-items:center;justify-content:center}#root{width:100%}h1,h2,h3{font-family:Bebas Neue,sans-serif;letter-spacing:.04em}.app{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:1rem}.screen{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1.5rem;background:var(--surface);border-radius:1.25rem;border:1px solid var(--border);box-shadow:0 0 60px #3b82f60f}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 2rem;border:none;border-radius:.5rem;font-family:Bebas Neue,sans-serif;font-size:1.15rem;letter-spacing:.08em;cursor:pointer;transition:transform .1s,opacity .15s;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.35;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#000}.btn-primary:not(:disabled):hover{background:var(--accent-dim)}.btn-secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}.btn-secondary:not(:disabled):hover{background:#f5c5181a}.btn-ghost{background:transparent;color:var(--text-muted);border:2px solid var(--border)}.btn-ghost:not(:disabled):hover{color:var(--text);border-color:#555}.btn-large{padding:1rem 3rem;font-size:1.35rem;width:100%}.share-row{width:100%;margin-bottom:.5rem}.share-row .btn{width:100%;font-size:1rem}.welcome-screen{text-align:center}.welcome-logo-img{width:100%;max-width:340px;height:auto;mix-blend-mode:screen;filter:drop-shadow(0 0 24px rgba(180,160,255,.35));margin-bottom:-.5rem}.game-subtitle{color:var(--text-muted);font-size:.95rem}.welcome-rules{width:100%;display:flex;flex-direction:column;gap:.6rem;text-align:left;background:var(--surface-2);border-radius:.75rem;padding:1.25rem}.rule-item{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--text)}.rule-icon{font-size:1.1rem;flex-shrink:0}.high-score-badge{display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border:1px solid var(--border);border-radius:2rem;padding:.4rem 1rem;font-size:.9rem}.high-score-label{color:var(--text-muted)}.high-score-value{font-family:Bebas Neue,sans-serif;font-size:1.25rem;color:var(--accent);letter-spacing:.05em}.game-round-screen{gap:1.25rem}.round-header{width:100%;display:flex;justify-content:space-between;align-items:center}.round-indicator{font-family:Bebas Neue,sans-serif;font-size:1.3rem;color:var(--accent);letter-spacing:.06em}.round-total{color:var(--text-muted)}.running-score{font-size:.9rem;color:var(--text-muted)}.audio-section{width:100%;min-height:2.5rem;display:flex;align-items:center;justify-content:center}.audio-playing{font-size:.95rem;color:var(--correct);letter-spacing:.02em}.audio-error{color:var(--wrong);font-size:.9rem}.audio-loading{display:flex;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.9rem}.loading-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:pulse 1s ease-in-out infinite}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}.loading-text{margin-left:.25rem}.timer-section{position:relative;display:flex;align-items:center;justify-content:center}.timer-ring{overflow:visible}.timer-track{fill:none;stroke:var(--surface-2);stroke-width:8}.timer-progress{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .9s linear,stroke .4s ease}.timer-label{position:absolute;font-family:Bebas Neue,sans-serif;font-size:2.75rem;letter-spacing:.02em;transition:color .4s ease}.guess-form{width:100%;display:flex;flex-direction:column;gap:.75rem}.guess-fields{display:flex;flex-direction:column;gap:.5rem}.guess-field-group{display:flex;flex-direction:column;gap:.3rem}.guess-label{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:0 .25rem}.guess-label-pts{font-family:Bebas Neue,sans-serif;font-size:.85rem;color:var(--accent);letter-spacing:.06em}.guess-input{width:100%;background:var(--surface-2);border:1.5px solid var(--border);border-radius:.5rem;padding:.7rem 1rem;color:var(--text);font-size:1rem;font-family:Inter,sans-serif;outline:none;transition:border-color .2s}.guess-input:focus{border-color:var(--accent)}.guess-input::placeholder{color:var(--text-muted)}.guess-input:disabled{opacity:.5}.hint-text{font-size:.8rem;color:var(--text-muted);min-height:1rem;text-align:center}.result-screen{gap:1.25rem}.result-header{width:100%}.result-badge{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;border-radius:.75rem;font-family:Bebas Neue,sans-serif;font-size:1.5rem;letter-spacing:.05em}.result-correct{background:#22c55e26;color:var(--correct)}.result-partial{background:#3b82f61f;color:var(--accent)}.result-wrong{background:#ef444426;color:var(--wrong)}.result-timeout{background:#ff950026;color:var(--warn)}.result-icon{font-size:1.4rem}.result-song-card{width:100%;display:flex;gap:1rem;align-items:center;background:var(--surface-2);border-radius:.75rem;padding:1rem;border:1px solid var(--border)}.album-art{width:80px;height:80px;border-radius:.5rem;object-fit:cover;flex-shrink:0}.album-art-placeholder{display:flex;align-items:center;justify-content:center;background:var(--border);font-size:2rem}.song-info{display:flex;flex-direction:column;gap:.25rem}.song-title{font-family:Bebas Neue,sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--text);line-height:1.1}.song-artist{font-size:.95rem;color:var(--accent);font-weight:500}.song-year{font-size:.8rem;color:var(--text-muted)}.field-breakdown{width:100%;display:flex;flex-direction:column;gap:.4rem}.field-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:.5rem;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem}.field-icon{font-size:.9rem;font-weight:700;width:1.1rem;flex-shrink:0}.field-correct .field-icon,.icon-correct{color:var(--correct)}.field-wrong .field-icon,.icon-wrong{color:var(--wrong)}.field-skipped .field-icon{color:var(--text-muted)}.field-info{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}.field-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.field-guess{font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-guess-correct{color:var(--correct);font-style:italic}.field-guess-wrong{color:var(--wrong);font-style:italic}.field-answer-reveal{color:var(--text-muted);font-size:.82rem}.field-answer-reveal em{color:var(--text);font-style:normal}.field-pts{font-family:Bebas Neue,sans-serif;font-size:1rem;letter-spacing:.04em;flex-shrink:0}.pts-earned{color:var(--correct)}.pts-missed{color:var(--text-muted)}.points-row{width:100%;display:flex;gap:1rem}.points-earned,.total-score-display{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;background:var(--surface-2);border-radius:.75rem;padding:.9rem;border:1px solid var(--border)}.points-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.points-value{font-family:Bebas Neue,sans-serif;font-size:2rem;letter-spacing:.04em;color:var(--text)}.points-positive{color:var(--correct)}.points-zero{color:var(--text-muted)}.round-progress{font-size:.82rem;color:var(--text-muted)}.final-screen{gap:1.25rem}.final-title{font-size:2rem;color:var(--text-muted);letter-spacing:.12em}.final-score-display{display:flex;align-items:baseline;gap:.4rem}.final-score-number{font-family:Bebas Neue,sans-serif;font-size:clamp(4rem,16vw,6rem);color:var(--accent);letter-spacing:.02em;line-height:1}.final-score-max{font-family:Bebas Neue,sans-serif;font-size:2rem;color:var(--text-muted);letter-spacing:.04em}.performance-label{font-family:Bebas Neue,sans-serif;font-size:1.5rem;color:var(--text);letter-spacing:.06em}.percentage-bar-wrapper{width:100%;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}.percentage-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .8s ease}.percentage-text{font-size:.85rem;color:var(--text-muted)}.round-history{width:100%}.history-title{font-size:1.1rem;color:var(--text-muted);margin-bottom:.6rem;letter-spacing:.06em}.history-list{display:flex;flex-direction:column;gap:.35rem;max-height:260px;overflow-y:auto;padding-right:.25rem}.history-list::-webkit-scrollbar{width:4px}.history-list::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.history-row{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.85rem;background:var(--surface-2);border-left:3px solid transparent}.history-correct{border-left-color:var(--correct)}.history-wrong{border-left-color:var(--wrong)}.history-round{color:var(--text-muted);flex-shrink:0;min-width:2rem}.history-song{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-artist{color:var(--text-muted)}.history-points{font-family:Bebas Neue,sans-serif;font-size:1.1rem;letter-spacing:.04em;flex-shrink:0;color:var(--correct)}.history-wrong .history-points{color:var(--text-muted)}.history-icons{display:flex;gap:.3rem;flex-shrink:0;font-size:.72rem;font-weight:700;letter-spacing:.03em}.history-icons .icon-correct{color:var(--correct)}.history-icons .icon-wrong{color:var(--wrong)}@media (max-width: 480px){.screen{padding:1.5rem 1rem;border-radius:0;border-left:none;border-right:none}.guess-form{flex-direction:column}.btn{width:100%}}