@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap";:root{--color-bg: #0b0b0b;--color-surface: #141414;--color-surface-raised: #1c1c1c;--color-border: #2a2a2a;--color-border-light: #333;--color-primary: #c41010;--color-primary-hover: #dc1414;--color-primary-muted: rgba(196, 16, 16, .15);--color-accent: #c9a02e;--color-accent-muted: rgba(201, 160, 46, .15);--color-success: #22c55e;--color-success-muted: rgba(34, 197, 94, .15);--color-error: #ef4444;--color-error-muted: rgba(239, 68, 68, .15);--color-warning: #f59e0b;--color-text-primary: #f0f0f0;--color-text-secondary: #a8a8a8;--color-text-muted: #666;--font-family: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", monospace;--text-xs: clamp(.69rem, .65rem + .2vw, .75rem);--text-sm: clamp(.8rem, .76rem + .2vw, .875rem);--text-base: clamp(.94rem, .88rem + .3vw, 1rem);--text-lg: clamp(1.06rem, .98rem + .4vw, 1.125rem);--text-xl: clamp(1.19rem, 1.08rem + .55vw, 1.35rem);--text-2xl: clamp(1.4rem, 1.25rem + .75vw, 1.75rem);--text-3xl: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.4);--shadow-lg: 0 8px 32px rgba(0,0,0,.5);--shadow-glow: 0 0 20px rgba(196, 16, 16, .15)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%}#root{display:flex;flex-direction:column}body{background:var(--color-bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(196,16,16,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(201,160,46,.02) 0%,transparent 50%);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--text-base);line-height:1.5;overflow-y:auto}header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}header h1{font-size:var(--text-lg);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);display:flex;align-items:center;gap:var(--space-2)}header .meta{display:flex;align-items:center;gap:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted)}header .counter{font-variant-numeric:tabular-nums}header .counter span{color:var(--color-text-secondary);font-weight:600}header .points-display{display:flex;align-items:center;gap:var(--space-1);font-variant-numeric:tabular-nums;font-weight:700;color:var(--color-primary)}header .points-display .pts-icon{font-size:var(--text-xs);opacity:.7}main{flex:1;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:var(--space-8) var(--space-6)}#quiz-content{width:100%;max-width:740px;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);margin-top:auto;margin-bottom:auto}#question-text{font-size:var(--text-2xl);font-weight:600;text-align:center;color:var(--color-text-primary);line-height:1.3}#hint-area{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}#hint-area .hint-img{max-width:100%;max-height:55vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);object-fit:contain;animation:fade-slide-in .35s var(--ease-out) both}#hint-area .hint-text{font-size:var(--text-xl);font-style:italic;text-align:center;color:var(--color-text-secondary);line-height:1.6;max-width:620px;white-space:pre-line}#hint-area .hint-audio{width:100%;max-width:420px}#hint-area .hint-audio audio{width:100%}.audio-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.audio-player{width:100%;max-width:420px}.audio-player audio{width:100%;height:52px;border-radius:var(--radius-md);outline:none}.placeholder{color:var(--color-text-muted);font-size:var(--text-lg);opacity:.4}.lyric-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.lyric-part{font-size:var(--text-xl);font-style:italic;text-align:center;color:var(--color-text-primary);line-height:1.7;max-width:620px;white-space:pre-line;transition:filter .5s var(--ease-out),color .5s}.lyric-part.blurred{filter:blur(7px);color:var(--color-text-muted);-webkit-user-select:none;user-select:none}.hint-line{font-size:var(--text-base);text-align:center;color:var(--color-accent);font-weight:600;display:none;white-space:pre-line;animation:fade-slide-up .35s var(--ease-out) both}.hint-line.visible{display:block}.reveal-line{font-size:var(--text-xl);text-align:center;color:var(--color-primary);font-weight:700;display:none;white-space:pre-line;animation:fade-slide-up .4s var(--ease-spring) both}.reveal-line.visible{display:block}footer{flex-shrink:0;padding:var(--space-4) var(--space-6);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#hint-dots{display:flex;gap:var(--space-2)}.dot{width:10px;height:10px;border-radius:50%;background:var(--color-border);transition:background .3s var(--ease-out),transform .3s var(--ease-spring),box-shadow .3s}.dot.revealed{background:var(--color-primary);transform:scale(1.2);box-shadow:0 0 8px var(--color-primary-muted)}#controls{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;align-items:center}.btn{padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .2s,transform .15s var(--ease-spring),box-shadow .2s,opacity .2s;font-family:var(--font-family);letter-spacing:.02em}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.3;cursor:default;transform:none}.btn-hint{background:var(--color-surface-raised);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-hint:hover:not(:disabled){background:var(--color-border);color:var(--color-text-primary)}.btn-hint:not(:disabled){box-shadow:var(--shadow-sm)}.btn-reveal{background:var(--color-primary);color:#fff}.btn-reveal:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-glow)}.btn-correct{background:var(--color-success);color:#fff}.btn-correct:hover{box-shadow:0 0 16px var(--color-success-muted);filter:brightness(1.1)}.btn-incorrect{background:var(--color-error);color:#fff}.btn-incorrect:hover{box-shadow:0 0 16px var(--color-error-muted);filter:brightness(1.1)}.btn-next{background:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-next:hover{background:var(--color-border)}.btn-restart{background:var(--color-primary);color:#fff;border:none;padding:var(--space-4) var(--space-10);font-size:var(--text-lg);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:background .2s,transform .15s var(--ease-spring),box-shadow .2s;font-family:var(--font-family)}.btn-restart:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-glow)}.btn-restart:active{transform:scale(.96)}.btn-primary{background:var(--color-primary);color:#fff;border:none}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-glow)}#stage2-area{width:100%;max-width:400px;display:none;flex-direction:column;align-items:center;gap:var(--space-3);animation:fade-slide-in .35s var(--ease-out) both}#stage2-area.show{display:flex}#stage2-question{font-size:var(--text-base);color:var(--color-text-secondary);text-align:center}.stage2-input-group{display:flex;gap:var(--space-2);width:100%}#stage2-input{flex:1;padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-lg);font-family:var(--font-family);outline:none;transition:border-color .2s,box-shadow .2s}#stage2-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-muted)}#stage2-input::placeholder{color:var(--color-text-muted)}#summary{display:none;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center;animation:fade-slide-in .4s var(--ease-out) both}#summary.show{display:flex}#summary h2{font-size:var(--text-3xl);color:var(--color-primary);text-transform:uppercase;letter-spacing:.06em;font-weight:800}#summary .points-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}#summary .points-label{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}#summary .points-num{font-size:clamp(3.5rem,10vw,5rem);font-weight:800;font-family:var(--font-mono);line-height:1;color:var(--color-primary);text-shadow:0 0 30px var(--color-primary-muted);animation:count-pop .5s var(--ease-spring) both}#summary .stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-8)}#summary .stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}#summary .stat .num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;font-family:var(--font-mono);line-height:1;animation:count-pop .5s var(--ease-spring) both}#summary .stat:nth-child(1) .num{animation-delay:.1s}#summary .stat:nth-child(2) .num{animation-delay:.15s}#summary .stat:nth-child(3) .num{animation-delay:.2s}#summary .stat .num.correct-count{color:var(--color-success)}#summary .stat .num.incorrect-count{color:var(--color-error)}#summary .stat .num.hints-count{color:var(--color-accent)}#summary .stat .label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}#summary .total-label{font-size:var(--text-sm);color:var(--color-text-muted)}.unplayed-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}.unplayed-album{font-size:var(--text-xl);font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:.04em}.unplayed-songs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);width:100%;max-width:600px}.unplayed-song{padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);text-align:center;cursor:pointer;transition:background .2s var(--ease-out),border-color .2s,color .2s;font-family:var(--font-family)}.unplayed-song:hover:not(:disabled){background:var(--color-border);color:var(--color-text-primary)}.unplayed-song.selected{background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-text-primary)}.unplayed-song.correct{background:var(--color-success-muted);border-color:var(--color-success);color:var(--color-success)}.unplayed-song.incorrect{background:var(--color-error-muted);border-color:var(--color-error);color:var(--color-error)}.unplayed-song.missed{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent);opacity:.8}.unplayed-song:disabled{cursor:default}.multi-input-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}.multi-field{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.multi-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}.multi-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-family);outline:none;transition:border-color .2s,box-shadow .2s}.multi-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-muted)}.multi-input::placeholder{color:var(--color-text-muted)}.multi-input.correct{border-color:var(--color-success);box-shadow:0 0 0 2px var(--color-success-muted)}.multi-input.incorrect{border-color:var(--color-error);box-shadow:0 0 0 2px var(--color-error-muted)}.multi-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);width:100%}.multi-option{padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);text-align:center;cursor:pointer;transition:background .2s var(--ease-out),border-color .2s,color .2s;font-family:var(--font-family)}.multi-option:hover:not(:disabled){background:var(--color-border);color:var(--color-text-primary)}.multi-option.selected{background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-text-primary)}.multi-option.correct{background:var(--color-success-muted);border-color:var(--color-success);color:var(--color-success)}.multi-option.incorrect{background:var(--color-error-muted);border-color:var(--color-error);color:var(--color-error)}.multi-option.missed{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent);opacity:.8}.multi-option:disabled{cursor:default}.multi-group-row{display:flex;align-items:center;gap:var(--space-3);width:100%}.multi-group-number{font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);min-width:2ch;text-align:right;flex-shrink:0}.multi-group-inputs{display:flex;gap:var(--space-2);flex:1;min-width:0}.multi-group-inputs .multi-input{flex:1;min-width:0}.multi-feedback{font-size:var(--text-sm);font-weight:600;animation:fade-slide-in .3s var(--ease-out) both}.multi-feedback.correct{color:var(--color-success)}.multi-feedback.incorrect{color:var(--color-error)}@keyframes fade-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes count-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media(max-width:640px){header{padding:var(--space-3) var(--space-4)}header h1{font-size:var(--text-sm);letter-spacing:.04em}header .meta{gap:var(--space-3);font-size:var(--text-xs)}#question-text{font-size:var(--text-xl)}#hint-area{min-height:200px}#hint-area .hint-text,.lyric-part,.reveal-line{font-size:var(--text-lg)}.btn{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}footer{padding:var(--space-3) var(--space-4)}main{padding:var(--space-4)}#summary .stats{gap:var(--space-4)}.unplayed-songs,.multi-options{grid-template-columns:1fr}.multi-group-row{flex-wrap:wrap;gap:var(--space-2)}.multi-group-number{min-width:1.5ch}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}