body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #2563eb;--primary-hover: #1d4ed8;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--background: #f8fafc;--surface: #ffffff;--text: #1e293b;--text-secondary: #64748b;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}[data-theme=dark]{--primary: #3b82f6;--primary-hover: #2563eb;--success: #22c55e;--danger: #f87171;--warning: #fbbf24;--background: #0f172a;--surface: #1e293b;--text: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--shadow: 0 4px 6px -1px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4)}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--text);line-height:1.6}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.container{width:100%;max-width:900px;margin:0 auto}.start-screen{text-align:center}.title-section{margin-bottom:2.5rem}.title-section h1{font-size:2.5rem;font-weight:800;color:var(--text);margin-bottom:.5rem}.subtitle{color:var(--text-secondary);font-size:1rem}.mode-selection{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}.mode-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:1.5rem;cursor:pointer;transition:all .2s ease;text-align:left}.mode-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.mode-icon{font-size:2rem;margin-bottom:.5rem}.mode-card h2{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.mode-card p{color:var(--text-secondary);font-size:.9rem;margin-bottom:.75rem}.mode-card ul{list-style:none;font-size:.85rem;color:var(--text-secondary)}.mode-card ul li:before{content:"•";margin-right:.5rem;color:var(--primary)}.best-score{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border);font-size:.9rem;font-weight:600;color:var(--primary)}.info-section{background:var(--surface);border-radius:12px;padding:1rem;border:1px solid var(--border)}.info-section h3{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.quiz-types{display:flex;flex-wrap:wrap;gap:.5rem}.quiz-types span{background:var(--background);padding:.25rem .75rem;border-radius:100px;font-size:.8rem;color:var(--text-secondary)}.game-screen{display:flex;flex-direction:column;gap:1.5rem;position:relative}.game-back-button{position:absolute;top:0;left:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.4rem .8rem;font-size:.85rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;z-index:10}.game-back-button:hover{border-color:var(--danger);color:var(--danger);background:#ef44441a}.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.timer{flex:1}.timer-bar{height:8px;background:var(--border);border-radius:100px;overflow:hidden;margin-bottom:.25rem}.timer-fill{height:100%;background:var(--primary);border-radius:100px;transition:width 1s linear}.timer-low .timer-fill{background:var(--danger);animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.timer-text{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.timer-low .timer-text{color:var(--danger)}.lives{display:flex;gap:.25rem;font-size:1.5rem}.heart-empty{opacity:.3}.score-container{display:flex;align-items:center;gap:1rem}.score{text-align:right}.score-label{display:block;font-size:.75rem;color:var(--text-secondary)}.score-value{font-size:1.5rem;font-weight:800;color:var(--text)}.combo{background:linear-gradient(135deg,var(--warning),#f97316);color:#fff;padding:.25rem .75rem;border-radius:100px;animation:bounce .3s ease}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.combo-value{font-weight:800;font-size:1.1rem}.combo-label{font-size:.7rem;margin-left:.25rem}.quiz{background:var(--surface);border-radius:20px;padding:2rem;box-shadow:var(--shadow);transition:all .3s ease}.quiz-correct{animation:correctFlash .5s ease}.quiz-wrong{animation:wrongShake .5s ease}@keyframes correctFlash{0%,to{background:var(--surface)}50%{background:#d1fae5}}[data-theme=dark] .quiz-correct{animation:correctFlashDark .5s ease}@keyframes correctFlashDark{0%,to{background:var(--surface)}50%{background:#166534}}@keyframes wrongShake{0%,to{transform:translate(0);background:var(--surface)}20%,60%{transform:translate(-5px);background:#fee2e2}40%,80%{transform:translate(5px);background:#fee2e2}}[data-theme=dark] .quiz-wrong{animation:wrongShakeDark .5s ease}@keyframes wrongShakeDark{0%,to{transform:translate(0);background:var(--surface)}20%,60%{transform:translate(-5px);background:#991b1b}40%,80%{transform:translate(5px);background:#991b1b}}.question-type{display:inline-block;background:var(--background);padding:.25rem .75rem;border-radius:100px;font-size:.8rem;color:var(--text-secondary);margin-bottom:1rem}.question h2{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;text-align:center}.hint-display{background:#fef3c7;color:#92400e;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem;text-align:center}[data-theme=dark] .hint-display{background:#78350f;color:#fef3c7}.options{display:grid;gap:.75rem}.option{display:flex;align-items:center;gap:1rem;background:var(--background);border:2px solid transparent;border-radius:12px;padding:1rem;cursor:pointer;transition:all .15s ease;font-size:1rem;text-align:left;width:100%}.option:hover:not(:disabled){border-color:var(--primary);background:#eff6ff}[data-theme=dark] .option:hover:not(:disabled){background:#1e3a5f}[data-theme=dark] .option,[data-theme=dark] .option .option-text{color:var(--text)}.option:disabled{cursor:default}.option.selected{border-color:var(--primary)}.option.correct{background:#d1fae5;border-color:var(--success);color:#065f46}.option.wrong{background:#fee2e2;border-color:var(--danger);color:#991b1b}[data-theme=dark] .option.correct{background:#166534;color:#d1fae5}[data-theme=dark] .option.wrong{background:#991b1b;color:#fee2e2}.option-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:8px;font-weight:600;font-size:.9rem;color:var(--text-secondary);flex-shrink:0}.option.correct .option-number{background:var(--success);color:#fff}.option.wrong .option-number{background:var(--danger);color:#fff}.option-text{flex:1;font-weight:500}.hint-button{width:100%;margin-top:1rem;padding:.75rem;background:transparent;border:1px dashed var(--border);border-radius:8px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .15s ease}.hint-button:hover{border-color:var(--warning);color:var(--warning)}.game-footer{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-secondary)}.keyboard-hint{opacity:.7}.result{text-align:center}.result-header{margin-bottom:2rem}.result-header h1{font-size:2rem;font-weight:800;margin-bottom:.5rem}.game-mode{color:var(--text-secondary)}.grade-section{margin-bottom:2rem}.grade{font-size:5rem;font-weight:900;line-height:1;margin-bottom:.5rem}.grade-message{font-size:1.1rem;color:var(--text-secondary)}.stats{background:var(--surface);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow)}.main-stat{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.main-stat .stat-value{font-size:3rem;font-weight:800;color:var(--primary)}.main-stat .stat-label{font-size:1rem}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stat-item{text-align:center}.stat-value{display:block;font-size:1.5rem;font-weight:700;color:var(--text)}.stat-label{font-size:.8rem;color:var(--text-secondary)}.hints-used{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.9rem;color:var(--text-secondary)}.leaderboard{background:var(--surface);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;text-align:left;box-shadow:var(--shadow)}.leaderboard h3{font-size:1rem;font-weight:700;margin-bottom:1rem}.leaderboard-list{display:flex;flex-direction:column;gap:.5rem}.leaderboard-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:var(--background);border-radius:8px;font-size:.9rem}.leaderboard-item.rank-1{background:#fef3c7;color:#78350f}.leaderboard-item.rank-2{background:#f1f5f9;color:#334155}.leaderboard-item.rank-3{background:#fed7aa;color:#9a3412}[data-theme=dark] .leaderboard-item.rank-1{background:#78350f;color:#fef3c7}[data-theme=dark] .leaderboard-item.rank-2{background:#334155;color:#f1f5f9}[data-theme=dark] .leaderboard-item.rank-3{background:#9a3412;color:#fed7aa}.rank{width:2rem;text-align:center}.entry-score{font-weight:700;color:var(--text)}.entry-detail{flex:1;color:var(--text-secondary);font-size:.8rem}.entry-date{color:var(--text-secondary);font-size:.75rem}.result-actions{display:flex;gap:1rem}.btn{flex:1;padding:1rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s ease}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--background);color:var(--text);border:2px solid var(--border)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}@media(max-width:480px){.title-section h1{font-size:2rem}.question h2{font-size:1.25rem}.stat-grid{grid-template-columns:repeat(2,1fr)}.game-footer{flex-direction:column;gap:.25rem;text-align:center}}.back-button{position:absolute;top:1rem;left:1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.5rem 1rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.back-button:hover{border-color:var(--primary);color:var(--primary)}.start-screen{position:relative;text-align:center}.selected-mode{display:inline-block;background:var(--primary);color:#fff;padding:.4rem 1rem;border-radius:100px;font-size:.9rem;font-weight:600;margin-bottom:.75rem}.category-selection{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:700px;margin:0 auto}.category-card{display:flex;align-items:center;gap:1rem;background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:1rem 1.25rem;cursor:pointer;transition:all .2s ease;text-align:left}.category-card:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-1px)}.category-icon{font-size:1.75rem;flex-shrink:0}.category-info h3{font-size:1rem;font-weight:700;margin-bottom:.1rem}.category-info p{font-size:.85rem;color:var(--text-secondary);margin:0}.game-mode{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.category-tag{background:var(--primary);color:#fff;padding:.2rem .6rem;border-radius:100px;font-size:.75rem;font-weight:600}.flashcard-container{position:relative;text-align:center;max-width:500px;margin:0 auto}.flashcard-container .back-button{position:static;margin-bottom:1.5rem}.flashcard-header{margin-bottom:1.5rem}.card-number{background:var(--surface);padding:.5rem 1rem;border-radius:100px;font-size:.9rem;font-weight:600;color:var(--text-secondary);border:1px solid var(--border)}.flashcard{perspective:1000px;margin-bottom:1.5rem;cursor:pointer}.flashcard-inner{position:relative;width:100%;height:300px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;box-shadow:var(--shadow-lg)}.flashcard-front{background:var(--surface);border:2px solid var(--border)}.flashcard-back{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff!important;transform:rotateY(180deg)}.flashcard-back *{color:#fff!important}.flashcard-back .card-label{color:#fffc!important}.card-label{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.flashcard-back .card-label{color:#fffc}.card-content{font-size:3rem;font-weight:800;margin-bottom:.5rem}.card-content.answer{color:#fff}.card-hint{margin-top:1rem;font-size:.85rem;color:var(--text-secondary)}.card-extra{margin-top:1rem}.element-info{background:#fff3;border-radius:12px;padding:.75rem 1.5rem;display:flex;gap:1rem;font-size:.9rem}.element-info span{opacity:.9}.flashcard-controls{margin-bottom:1rem}.btn-large{padding:1rem 2rem;font-size:1.1rem}.flashcard-shortcuts{display:flex;justify-content:center;gap:2rem;color:var(--text-secondary);font-size:.8rem}.selected-category{display:inline-block;background:var(--background);color:var(--text-secondary);padding:.3rem .8rem;border-radius:100px;font-size:.85rem;margin-bottom:.5rem}.count-selection{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.count-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:1.5rem 1rem;cursor:pointer;transition:all .2s ease;text-align:center}.count-card:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-2px)}.count-number{font-size:2.5rem;font-weight:800;color:var(--primary);margin-bottom:.25rem}.count-info{display:flex;flex-direction:column;gap:.1rem}.count-label{font-size:.9rem;font-weight:600;color:var(--text)}.count-time{font-size:.8rem;color:var(--text-secondary)}.test-screen .game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.test-progress{flex:1}.test-progress-text{display:block;font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.25rem}.test-progress-bar{height:8px;background:var(--border);border-radius:100px;overflow:hidden}.test-progress-fill{height:100%;background:var(--primary);border-radius:100px;transition:width .3s ease}.test-timer{display:flex;align-items:baseline;gap:.25rem;background:var(--surface);padding:.5rem 1rem;border-radius:12px;border:2px solid var(--border)}.test-timer-value{font-size:1.5rem;font-weight:800;color:var(--text)}.test-timer-label{font-size:.9rem;color:var(--text-secondary)}.test-timer.timer-warning{border-color:var(--danger);background:#fef2f2}.test-timer.timer-warning .test-timer-value{color:var(--danger);animation:pulse .5s ease-in-out infinite}.test-result{text-align:center}.test-score-section{margin-bottom:2rem}.test-score-circle{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c3aed);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:var(--shadow-lg)}.test-score-value{font-size:3.5rem;font-weight:900;color:#fff;line-height:1}.test-score-unit{font-size:1.2rem;font-weight:600;color:#fffc}.test-score-message{font-size:1.2rem;font-weight:600;color:var(--text)}.test-stat-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:600px){.count-selection,.test-stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1100px){.mode-selection{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.mode-selection{grid-template-columns:repeat(2,1fr)}.topic-selection{grid-template-columns:1fr}}@media(max-width:480px){.mode-selection{grid-template-columns:1fr}}.theme-toggle{position:absolute;top:1rem;right:1rem;background:var(--surface);border:2px solid var(--border);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:1.25rem}.theme-toggle:hover{border-color:var(--primary);transform:scale(1.05)}[data-theme=dark] .flashcard-front{background:var(--surface)}.landing-page{text-align:center;position:relative}.landing-header{margin-bottom:2.5rem}.landing-header h1{font-size:2.5rem;font-weight:800;color:var(--text);margin-bottom:.5rem}.landing-subtitle{color:var(--text-secondary);font-size:1.1rem}.topic-selection{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.topic-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:1.5rem 1rem;cursor:pointer;transition:all .2s ease;text-align:center;position:relative}.topic-card:hover:not(.topic-disabled){border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.topic-card.topic-disabled{opacity:.6;cursor:not-allowed}.topic-icon{font-size:2.5rem;flex-shrink:0}.topic-content h2{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}.topic-subtitle{font-size:.8rem;color:var(--primary);font-weight:600;margin-bottom:.25rem}.topic-description{font-size:.75rem;color:var(--text-secondary);margin:0}.coming-soon-badge{position:absolute;top:1rem;right:1rem;background:var(--warning);color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:100px}.topic-badge{font-size:3rem;margin-bottom:.5rem}.topic-card:first-child{background:linear-gradient(135deg,#f0f9ff,#e0f2fe)}.topic-card:first-child:hover{border-color:#0ea5e9}[data-theme=dark] .topic-card:first-child{background:linear-gradient(135deg,#1e3a5f,#1e40af)}[data-theme=dark] .topic-card:first-child .topic-subtitle{color:#93c5fd}[data-theme=dark] .coming-soon-badge{background:#b45309}[data-theme=dark] .test-timer.timer-warning{background:#450a0a}.coefficient-quiz{text-align:center;padding:1.5rem}.reaction-equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;font-size:1.25rem}.reactants-side,.products-side{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}.coefficient-term{display:inline-flex;align-items:center;gap:.25rem;position:relative}.coefficient-input{width:48px;height:48px;text-align:center;font-size:1.25rem;font-weight:700;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);transition:all .15s ease}.coefficient-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f633}.coefficient-input:disabled{opacity:.7}.coefficient-input.correct{border-color:var(--success);background:#dcfce7}.coefficient-input.wrong{border-color:var(--danger);background:#fee2e2}[data-theme=dark] .coefficient-input.correct{background:#166534}[data-theme=dark] .coefficient-input.wrong{background:#991b1b}.coefficient-input::-webkit-outer-spin-button,.coefficient-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.coefficient-input[type=number]{-moz-appearance:textfield}.formula{font-weight:600;color:var(--text)}.correct-coefficient{position:absolute;top:-8px;right:-8px;background:var(--success);color:#fff;font-size:.75rem;font-weight:700;padding:.15rem .4rem;border-radius:100px}.operator{color:var(--text-secondary);font-weight:600;margin:0 .25rem}.arrow{color:var(--primary);font-size:1.5rem;font-weight:700;margin:0 .75rem}.reaction-hint{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem}.reaction-hint .hint-label{color:var(--primary);font-weight:600}.correct-answer-display{background:var(--success);color:#fff;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem}.correct-answer-display .answer-label{font-weight:700;margin-right:.5rem}.correct-answer-display .answer-text{font-family:monospace}.submit-btn{margin-top:1rem;margin-bottom:1rem}.coefficient-instructions{display:flex;justify-content:center;gap:1.5rem;color:var(--text-secondary);font-size:.8rem}.coefficient-quiz.feedback-correct{animation:pulse-success .5s ease}.coefficient-quiz.feedback-wrong{animation:shake .5s ease}.coefficient-flashcard .card-content{font-size:1.5rem;font-family:monospace}.coefficient-flashcard .reaction-content{color:var(--text)}.coefficient-flashcard .reaction-answer{color:#fff!important}.card-hint-badge{background:var(--primary);color:#fff;padding:.25rem .75rem;border-radius:100px;font-size:.8rem;margin-left:.5rem}.card-instruction{color:var(--text-secondary);font-size:.85rem;margin-top:1rem}.reaction-type-info{background:#fff3;border-radius:8px;padding:.5rem 1rem;font-size:.9rem}.formula-content{font-family:monospace}.compound-info{background:#fff3;border-radius:12px;padding:.75rem 1.5rem;display:flex;gap:.75rem;font-size:.9rem;align-items:center}.compound-info span{opacity:.9}@media(max-width:600px){.reaction-equation{font-size:1rem}.coefficient-input{width:40px;height:40px;font-size:1rem}.arrow{font-size:1.25rem;margin:0 .5rem}.coefficient-instructions{flex-wrap:wrap;gap:.75rem}}.molecule-quiz{padding:2rem;position:relative}.molecule-question{text-align:center;margin-bottom:2rem}.reaction-display{font-size:1.5rem;font-family:Courier New,Courier,monospace;padding:1.5rem;background:var(--background);border-radius:12px;display:inline-block}.reaction-part{color:var(--text)}.reaction-blank{display:inline-block;background:var(--primary);color:#fff;padding:.25rem .75rem;border-radius:8px;font-weight:700;margin:0 .25rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.hint-badge{display:inline-block;background:var(--surface);color:var(--text-secondary);padding:.25rem .75rem;border-radius:20px;font-size:.85rem;margin-bottom:1rem;border:1px solid var(--border)}.molecule-options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:500px;margin:0 auto}.molecule-option{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border:2px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:all .2s;font-size:1.1rem}.molecule-option:hover:not(:disabled){border-color:var(--primary);background:var(--background);transform:translateY(-2px)}[data-theme=dark] .molecule-option:hover:not(:disabled){background:#1e3a5f}[data-theme=dark] .molecule-option,[data-theme=dark] .molecule-option .option-text{color:var(--text)}.molecule-option.selected{border-color:var(--primary);background:#2563eb1a}.molecule-option.correct{border-color:var(--success);background:#10b98126;color:#065f46}.molecule-option.wrong{border-color:var(--danger);background:#ef444426;opacity:.6;color:#991b1b}[data-theme=dark] .molecule-option.correct{background:#166534;color:#d1fae5}[data-theme=dark] .molecule-option.wrong{background:#991b1b;color:#fee2e2}.molecule-option:disabled{cursor:default}.molecule-option .option-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--background);border-radius:50%;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.molecule-option .option-text{font-family:Courier New,Courier,monospace;font-weight:600}.keyboard-hint{text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--text-secondary)}.molecule-flashcard .blank-box{display:inline-block;background:var(--primary);color:#fff;padding:.25rem .75rem;border-radius:8px;font-weight:700;margin:0 .25rem}.molecule-flashcard .molecule-answer{font-size:3rem;font-family:Courier New,Courier,monospace;color:var(--primary)}.molecule-flashcard .complete-reaction{font-family:Courier New,Courier,monospace;font-size:1.1rem;color:var(--text-secondary);padding:.75rem 1rem;background:var(--background);border-radius:8px;margin-top:1rem}.molecule-category-selection{grid-template-columns:repeat(2,1fr);max-width:700px}.molecule-category-selection .category-card{padding:1rem 1.25rem}.molecule-category-selection .category-icon{font-size:1.5rem}.molecule-category-selection .category-info h3{font-size:1rem}.molecule-category-selection .category-info p{font-size:.8rem}@media(max-width:600px){.reaction-display{font-size:1.1rem;padding:1rem}.molecule-options{grid-template-columns:1fr}.molecule-option{padding:.875rem 1rem;font-size:1rem}.molecule-category-selection{grid-template-columns:1fr}}.coefficient-quiz-mc{padding:1.5rem;max-width:900px;margin:0 auto}.coefficient-question{text-align:center;margin-bottom:2rem}.coefficient-question .question-title{font-size:1.1rem;color:var(--text-secondary);font-weight:500;margin-bottom:1rem}.unbalanced-reaction{font-size:1.5rem;font-family:Courier New,Courier,monospace;font-weight:600;color:var(--text);padding:1rem 1.5rem;background:var(--background);border-radius:12px;display:inline-block}.reaction-hint-badge{display:inline-block;background:var(--surface);color:var(--text-secondary);padding:.25rem .75rem;border-radius:20px;font-size:.85rem;margin-top:1rem;border:1px solid var(--border)}.coefficient-options{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:1.5rem}.coefficient-option{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border:2px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;transition:all .2s;font-size:.95rem;min-width:160px;flex:0 1 auto}.coefficient-option:hover:not(:disabled){border-color:var(--primary);background:var(--background);transform:translateY(-2px)}[data-theme=dark] .coefficient-option:hover:not(:disabled){background:#1e3a5f}[data-theme=dark] .coefficient-option,[data-theme=dark] .coefficient-option .option-reaction{color:var(--text)}.coefficient-option.selected{border-color:var(--primary);background:#2563eb1a}.coefficient-option.correct{border-color:var(--success);background:#10b98126;color:#065f46}.coefficient-option.wrong{border-color:var(--danger);background:#ef444426;color:#991b1b}[data-theme=dark] .coefficient-option.correct{background:#166534;color:#d1fae5}[data-theme=dark] .coefficient-option.wrong{background:#991b1b;color:#fee2e2}.coefficient-option:disabled{cursor:default}.coefficient-option .option-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--background);border-radius:50%;font-size:.8rem;font-weight:600;color:var(--text-secondary);flex-shrink:0}.coefficient-option .option-reaction{font-family:Courier New,Courier,monospace;font-weight:500;white-space:nowrap}.coefficient-quiz-mc.feedback-correct{animation:pulse-success .5s ease}.coefficient-quiz-mc.feedback-wrong{animation:shake .5s ease}@media(max-width:768px){.coefficient-options{flex-direction:column;align-items:stretch}.coefficient-option{min-width:auto;width:100%;justify-content:flex-start}.unbalanced-reaction{font-size:1.2rem;padding:.75rem 1rem}}@media(max-width:480px){.coefficient-option{padding:.625rem .875rem;font-size:.85rem}.coefficient-option .option-reaction{font-size:.85rem}.unbalanced-reaction{font-size:1rem}}.nickname-screen{text-align:center;padding:2rem}.nickname-header{margin-bottom:2rem}.nickname-header h1{font-size:2rem;color:var(--text);margin-bottom:.5rem}.nickname-subtitle{color:var(--text-secondary);font-size:1rem}.nickname-form{max-width:400px;margin:0 auto}.nickname-input-wrapper{margin-bottom:1.5rem}.nickname-input{width:100%;padding:1rem 1.5rem;font-size:1.5rem;text-align:center;border:3px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:600;letter-spacing:.1em;transition:all .2s ease}.nickname-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #2563eb1a}.nickname-input::placeholder{color:var(--text-secondary);font-weight:400}.nickname-limit{color:var(--text-secondary);font-size:.875rem;margin-top:.5rem}.nickname-actions{display:flex;flex-direction:column;gap:.75rem}.nickname-actions .btn{padding:1rem 2rem;font-size:1.1rem}.nickname-mode-badge{display:inline-block;background:var(--primary);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;margin-top:1.5rem}.nickname-container{max-width:400px;margin:0 auto}.nickname-icon{font-size:4rem;margin-bottom:1rem}.nickname-title{font-size:1.75rem;font-weight:700;color:var(--text);margin-bottom:.5rem;line-height:1.3}.nickname-mode{color:var(--primary);font-size:1rem;font-weight:600;margin-bottom:2rem}.nickname-hint{color:var(--text-secondary);font-size:.875rem;margin-top:.5rem;margin-bottom:1.5rem}.nickname-submit{width:100%}.nickname-submit:disabled{opacity:.5;cursor:not-allowed}.nickname-shortcuts{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;color:var(--text-secondary);font-size:.8rem}.hall-of-fame{background:var(--surface);border-radius:16px;padding:1.5rem;margin-top:1.5rem;border:2px solid var(--border)}.hall-title{text-align:center;font-size:1.5rem;color:var(--text);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--border)}.hall-empty{text-align:center;padding:2rem;color:var(--text-secondary);font-size:1rem;line-height:1.6}.hall-list{display:flex;flex-direction:column;gap:.5rem}.hall-entry{display:grid;grid-template-columns:2.5rem 1fr auto auto;gap:.75rem;align-items:center;padding:.75rem 1rem;background:var(--background);border-radius:8px;transition:all .2s ease}.hall-entry.top-3{background:linear-gradient(135deg,var(--surface),var(--background));border:1px solid var(--primary)}.hall-entry.current-player{background:linear-gradient(135deg,#2563eb26,#2563eb0d);border:2px solid var(--primary);animation:highlight-pulse 2s ease-in-out infinite}@keyframes highlight-pulse{0%,to{box-shadow:0 0 #2563eb66}50%{box-shadow:0 0 0 6px #2563eb00}}.hall-rank{font-weight:700;font-size:1rem;color:var(--text);text-align:center}.hall-nickname{font-weight:600;font-size:1rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hall-score{font-weight:700;font-size:.95rem;color:var(--primary);text-align:right}.hall-date{font-size:.75rem;color:var(--text-secondary);text-align:right;white-space:nowrap}.hall-expand-btn{width:100%;padding:.75rem;margin-top:.5rem;background:transparent;border:1px dashed var(--border);border-radius:8px;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .2s ease}.hall-expand-btn:hover{background:var(--background);border-color:var(--primary);color:var(--primary)}.hall-rest{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;max-height:300px;overflow-y:auto;padding-right:.5rem}.hall-rest::-webkit-scrollbar{width:6px}.hall-rest::-webkit-scrollbar-track{background:var(--background);border-radius:3px}.hall-rest::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.hall-rest::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}[data-theme=dark] .hall-entry.top-3{background:linear-gradient(135deg,rgba(59,130,246,.1),transparent)}[data-theme=dark] .hall-entry.current-player{background:linear-gradient(135deg,#3b82f633,#3b82f61a)}@media(max-width:600px){.hall-entry{grid-template-columns:2rem 1fr auto;gap:.5rem;padding:.625rem .75rem}.hall-date{display:none}.hall-nickname{font-size:.9rem}.hall-score{font-size:.85rem}.nickname-input{font-size:1.25rem;padding:.875rem 1rem}}.leaderboard-screen{text-align:center;padding:1rem}.leaderboard-header{margin-bottom:2rem}.leaderboard-header h1{font-size:2rem;color:var(--text);margin-bottom:.5rem}.leaderboard-subtitle{color:var(--text-secondary);font-size:1rem}.leaderboard-topic-tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.topic-tab{padding:.6rem 1rem;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .2s ease}.topic-tab:hover{border-color:var(--primary);color:var(--text)}.topic-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.leaderboard-tabs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1000px;margin:0 auto}.leaderboard-section{text-align:left}.leaderboard-section h3{font-size:1.25rem;color:var(--text);margin-bottom:1rem;text-align:center}@media(max-width:768px){.leaderboard-tabs{grid-template-columns:1fr;gap:2rem}}.mode-card.leaderboard-card{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b}.mode-card.leaderboard-card:hover{border-color:#d97706;box-shadow:0 8px 25px #f59e0b4d}[data-theme=dark] .mode-card.leaderboard-card{background:linear-gradient(135deg,#f59e0b33,#d9770626);border-color:#f59e0b}[data-theme=dark] .mode-card.leaderboard-card:hover{border-color:#fbbf24;box-shadow:0 8px 25px #f59e0b33}.landing-leaderboard-section{margin:2rem auto;padding:1.5rem;max-width:500px;background:linear-gradient(135deg,#f59e0b1a,#d977060d);border:2px solid rgba(245,158,11,.3);border-radius:16px;box-shadow:0 4px 15px #f59e0b1a}[data-theme=dark] .landing-leaderboard-section{background:linear-gradient(135deg,#f59e0b26,#d977061a);border-color:#f59e0b66}.leaderboard-section-title{text-align:center;font-size:1.3rem;font-weight:700;margin-bottom:1rem;color:#d97706}[data-theme=dark] .leaderboard-section-title{color:#fbbf24}.leaderboard-tabs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.tab-row{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}.tab-btn{padding:.4rem .8rem;border:2px solid #e5e7eb;border-radius:20px;background:#fff;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s ease;color:#374151}.tab-btn:hover{border-color:#f59e0b;background:#f59e0b1a}.tab-btn.active{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#f59e0b;color:#fff}[data-theme=dark] .tab-btn{background:#374151;border-color:#4b5563;color:#e5e7eb}[data-theme=dark] .tab-btn:hover{border-color:#f59e0b;background:#f59e0b33}[data-theme=dark] .tab-btn.active{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#f59e0b;color:#fff}.mode-row{justify-content:center}.mode-btn{padding:.35rem 1rem}.leaderboard-content{min-height:120px}.hall-of-fame.compact{padding:.3rem;background:transparent;border:none;box-shadow:none}.hall-of-fame.compact .hall-list{display:flex;flex-direction:column;gap:.4rem}.hall-of-fame.compact .hall-entry{padding:.5rem .75rem;font-size:.9rem;border-radius:8px;background:#fff9;border:1px solid #e5e7eb;grid-template-columns:2rem 1fr auto auto}.hall-of-fame.compact .hall-entry .entry-rank{font-size:.85rem;min-width:1.5rem}.hall-of-fame.compact .hall-entry .entry-nickname{font-size:.9rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hall-of-fame.compact .hall-entry .entry-score{font-size:.85rem;font-weight:600}.hall-of-fame.compact .hall-entry .hall-date{font-size:.75rem;color:#6b7280}[data-theme=dark] .hall-of-fame.compact .hall-entry{background:#37415199;border-color:#4b5563}.hall-of-fame.compact .hall-entry.top-3{background:linear-gradient(135deg,#ffd70033,#ffc10726);border-color:#ffc10766}[data-theme=dark] .hall-of-fame.compact .hall-entry.top-3{background:linear-gradient(135deg,#ffd70040,#ffc10733);border-color:#ffc10780}.hall-of-fame.compact .hall-loading,.hall-of-fame.compact .hall-error,.hall-of-fame.compact .hall-empty{padding:.75rem;font-size:.8rem}.hall-loading,.hall-error{text-align:center;padding:2rem 1rem;color:#6b7280;font-size:.95rem}[data-theme=dark] .hall-loading,[data-theme=dark] .hall-error{color:#9ca3af}.hall-error{color:#ef4444}[data-theme=dark] .hall-error{color:#f87171}@media(max-width:600px){.landing-leaderboard-section{margin:1rem;padding:1rem}.leaderboard-section-title{font-size:1.1rem}.tab-btn{padding:.35rem .6rem;font-size:.75rem}}