.quiz-container{width:100%;height:100%;display:flex;flex-direction:column;background:var(--color-background)}.level-selector{padding:var(--spacing-xl);max-width:1000px;margin:0 auto;width:100%}.level-selector-header{text-align:center;margin-bottom:var(--spacing-2xl)}.level-selector-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0 0 var(--spacing-sm) 0}.level-selector-description{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin:0}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.level-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all var(--transition-fast);position:relative}.level-card:hover:not(.locked){transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}.level-card.locked{opacity:.5;cursor:not-allowed;background:var(--color-background)}.level-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.level-name{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text)}.level-icon{font-size:var(--font-size-2xl)}.level-description{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.level-stats{display:flex;gap:var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.level-stat{display:flex;align-items:center;gap:var(--spacing-xs)}.level-best-score{font-weight:var(--font-weight-semibold);color:var(--color-primary)}.quiz-header{background:var(--color-surface);border-bottom:2px solid var(--color-border);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.quiz-header-content{max-width:800px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.quiz-progress{display:flex;gap:var(--spacing-lg);align-items:center}.quiz-stat{display:flex;flex-direction:column;gap:var(--spacing-xs)}.quiz-stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.quiz-stat-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text)}.quiz-exit-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);color:var(--color-text);transition:all var(--transition-fast)}.quiz-exit-button:hover{background:var(--color-border-light);border-color:var(--color-text-tertiary)}.quiz-game-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);max-width:600px;margin:0 auto;width:100%}.question-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);width:100%;margin-bottom:var(--spacing-lg)}.timer-container{position:relative;height:24px;background:var(--color-border-light);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);overflow:hidden}.timer-bar{height:100%;background:var(--color-primary);transition:width .05s linear;border-radius:var(--radius-md)}.timer-bar.low{background:var(--color-error)}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}.question-prompt{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.question-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin:0}.question-audio-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.question-audio-button:hover{background:var(--color-primary);transform:scale(1.02);box-shadow:var(--shadow-sm)}.question-audio-button:active{transform:scale(.98)}.visual-prompt-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.visual-prompt-character{font-size:5rem;font-weight:var(--font-weight-bold);font-family:Noto Sans SC,SimHei,Microsoft YaHei,sans-serif;line-height:1;color:var(--color-text)}.visual-prompt-audio{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-lg);cursor:pointer;transition:all var(--transition-fast)}.visual-prompt-audio:hover{background:#4a90e21a;border-color:var(--color-primary)}.visual-prompt-audio:active{transform:scale(.95)}@media(max-width:768px){.visual-prompt-character{font-size:4rem}}.answer-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-sm);width:100%}.answer-option{padding:var(--spacing-md);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);text-align:center;min-height:56px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);position:relative}.option-hotkey{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary);background:var(--color-border-light);padding:2px 6px;border-radius:var(--radius-sm)}.answer-option:hover:not(:disabled){background:var(--color-border-light);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.answer-option:active:not(:disabled){transform:translateY(0)}.answer-option.selected{border-color:var(--color-primary);background:#4a90e21a}.answer-option.correct{border-color:var(--tone-3-color);background:#27ae601a;animation:correctPulse .5s ease}.answer-option.incorrect{border-color:var(--color-error);background:#e74c3c1a;animation:shake .5s ease}.answer-option:disabled{cursor:not-allowed}.answer-option.explorable{cursor:pointer;opacity:1}.answer-option.explorable:hover{transform:scale(1.02);box-shadow:var(--shadow-sm)}.answer-option.explorable .option-hotkey{background:var(--color-primary);color:#fff}.feedback-area{margin-top:var(--spacing-lg);min-height:180px}.feedback-spacer{height:180px}.feedback-banner{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);text-align:center;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);animation:slideDown .3s ease}.feedback-banner.correct{background:#27ae601a;color:var(--tone-3-color);border:2px solid var(--tone-3-color)}.feedback-banner.incorrect{background:#e74c3c1a;color:var(--color-error);border:2px solid var(--color-error)}.feedback-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.feedback-icon{font-size:1.5rem;line-height:1}.feedback-audio-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--color-surface);border:1px solid currentColor;border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-fast);opacity:.8}.feedback-audio-button:hover{opacity:1;transform:scale(1.05)}.feedback-hanzi{font-size:3rem;font-weight:var(--font-weight-bold);font-family:Noto Sans SC,SimHei,Microsoft YaHei,sans-serif;line-height:1;margin:var(--spacing-xs) 0}.feedback-status{display:flex;align-items:center}.feedback-pinyin{font-size:var(--font-size-xl)}.feedback-meaning{font-size:var(--font-size-base);color:var(--color-text-secondary);font-style:italic}.explored-option{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.explored-hanzi{font-size:2.5rem;font-family:Noto Sans SC,SimHei,Microsoft YaHei,sans-serif;line-height:1}.explored-pinyin{font-size:var(--font-size-lg);color:var(--color-text)}.explored-meaning{font-size:var(--font-size-base);color:var(--color-text-secondary);font-style:italic}.feedback-next-button{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-xl);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.feedback-next-button:hover{background:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.completion-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);text-align:center}.completion-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.completion-icon{font-size:40px;animation:bounceIn .6s ease}.completion-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0}.completion-score{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.completion-score.passing{color:var(--tone-3-color)}.completion-score.failing{color:var(--color-error)}.completion-stats{display:flex;gap:var(--spacing-xl);margin-bottom:var(--spacing-md)}.completion-stat{display:flex;align-items:center;gap:var(--spacing-xs)}.completion-stat-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}.completion-stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.completion-message{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:var(--font-size-base)}.completion-message.success{background:#4a90e21a;color:var(--color-primary)}.completion-message.failure{background:#e74c3c1a;color:var(--color-text-secondary)}.completion-actions{display:flex;gap:var(--spacing-sm)}.completion-button{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent}.completion-button.primary{background:var(--color-primary);color:#fff}.completion-button.primary:hover{background:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.completion-button.secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.completion-button.secondary:hover{background:var(--color-border-light);border-color:var(--color-text-tertiary)}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.level-grid{grid-template-columns:1fr}.quiz-header-content{flex-direction:column;gap:var(--spacing-md)}.quiz-progress{width:100%;justify-content:space-around}.quiz-game-area{padding:var(--spacing-lg)}.answer-options,.completion-stats{grid-template-columns:1fr}.completion-actions{flex-direction:column;width:100%}.completion-button{width:100%}}