:root{--color-primary: #7C3AED;--color-primary-light: #A78BFA;--color-primary-dark: #5B21B6;--color-accent: #FBBF24;--color-correct: #10B981;--color-wrong: #EF4444;--color-bg: #EDE9FE;--color-surface: #ffffff;--color-text: #1F2937;--color-text-light: #6B7280;--color-border: #DDD6FE;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 6px rgba(0,0,0,.08);--shadow-md: 0 4px 16px rgba(0,0,0,.12);--shadow-lg: 0 8px 32px rgba(0,0,0,.16);--font-display: "Fredoka One", cursive;--font-body: "Nunito", sans-serif}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes popIn{0%{transform:scale(.7);opacity:0}80%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes slideDown{0%{transform:translateY(-60px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-80px);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.feedback-correct .question-card{animation:bounce .4s ease}.feedback-wrong .question-card{animation:shake .4s ease}.toast-in{animation:slideDown .35s cubic-bezier(.34,1.56,.64,1) forwards}.toast-out{animation:slideUp .3s ease-in forwards}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;justify-content:center;align-items:flex-start}#root{width:100%;max-width:480px;min-height:100vh;background:var(--color-surface);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.btn{font-family:var(--font-body);font-weight:700;font-size:1rem;border:none;cursor:pointer;border-radius:var(--radius-full);padding:14px 24px;min-height:56px;transition:transform .1s,box-shadow .1s;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 0 var(--color-primary-dark)}.btn-secondary{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-ghost{background:transparent;color:var(--color-text-light)}.btn-danger{background:var(--color-wrong);color:#fff}.btn-large{font-size:1.2rem;padding:16px 32px;min-height:64px}.btn-block{width:100%}.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s}.modal-box{background:var(--color-surface);border-radius:var(--radius-lg);padding:28px 24px;width:min(90%,360px);position:relative;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-lg)}.modal-title{font-family:var(--font-display);font-size:1.4rem;margin-bottom:12px;color:var(--color-primary)}.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--color-text-light)}.modal-box p{margin-bottom:10px;line-height:1.5}.mode-btns{margin-top:16px}.progress-track{width:100%;background:#e5e7eb;border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);transition:width .4s ease}.form-label{font-weight:700;font-size:1rem;display:block;margin-bottom:8px}.name-input{width:100%;padding:14px 16px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:1rem;outline:none;margin-bottom:16px;transition:border-color .2s}.name-input:focus{border-color:var(--color-primary)}.form-error{color:var(--color-wrong);font-weight:600;margin-bottom:12px;font-size:.9rem}.back-btn{background:none;border:none;font-size:1rem;font-weight:700;color:var(--color-primary);cursor:pointer;padding:6px 0}.logout-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:.85rem;padding:6px 14px;cursor:pointer;color:var(--color-text-light)}.screen-header{display:flex;align-items:center;gap:12px;padding:20px 20px 8px}.screen-title{font-family:var(--font-display);font-size:1.5rem;color:var(--color-primary)}.section-title{font-family:var(--font-display);font-size:1.2rem;color:var(--color-primary);margin-bottom:12px}.home-screen{padding:40px 24px;display:flex;flex-direction:column;gap:32px;min-height:100vh}.home-hero{text-align:center}.home-title{font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);color:var(--color-primary);line-height:1.1}.home-subtitle{font-size:1.1rem;color:var(--color-text-light);margin-top:8px}.home-form{display:flex;flex-direction:column}.home-saved{text-align:center}.saved-label{font-size:.9rem;color:var(--color-text-light);margin-bottom:10px}.saved-names{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.saved-name-btn{background:var(--color-bg);border:2px solid var(--color-primary);border-radius:var(--radius-full);padding:8px 18px;font-weight:700;color:var(--color-primary);cursor:pointer;font-family:var(--font-body)}.main-screen{padding:0 0 32px}.main-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0}.main-greeting{font-family:var(--font-display);font-size:1.4rem;color:var(--color-primary)}.main-level-card{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;margin:16px;border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-md)}.main-stats-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.9rem;font-weight:600;opacity:.9}.main-actions{padding:0 20px}.main-play-btn{background:var(--color-accent)!important;color:var(--color-text)!important;font-size:1.3rem!important;box-shadow:0 4px #d97706!important}.main-nav-row{display:flex;gap:12px;margin-top:12px}.nav-btn{flex:1;background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:14px;font-weight:700;font-size:1rem;cursor:pointer;font-family:var(--font-body)}.main-recent{margin:24px 20px 0}.recent-title{font-weight:700;margin-bottom:8px;color:var(--color-text-light)}.recent-row{display:flex;justify-content:space-between;padding:8px 12px;background:var(--color-bg);border-radius:var(--radius-sm);margin-bottom:6px;font-size:.9rem}.topic-screen{padding-bottom:32px}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 20px}.topic-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 12px;border-radius:var(--radius-lg);border:3px solid var(--topic-color, var(--color-primary));background:color-mix(in srgb,var(--topic-color, var(--color-primary)) 10%,white);cursor:pointer;font-family:var(--font-body);transition:transform .15s,box-shadow .15s;min-height:120px}.topic-card.unlocked:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.topic-card.locked{opacity:.55;cursor:default}.topic-emoji{font-size:2.2rem}.topic-label{font-weight:800;font-size:1rem;color:var(--color-text)}.topic-unlock-hint{font-size:.8rem;color:var(--color-text-light)}.quiz-screen{display:flex;flex-direction:column;min-height:100vh;padding-bottom:24px}.quiz-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;gap:12px}.timer-row{display:flex;justify-content:center;padding:8px 0}.quiz-body{flex:1;padding:0 20px;display:flex;flex-direction:column;justify-content:center}.question-card{text-align:center}.question-text{font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);color:var(--color-text);margin-bottom:28px;line-height:1.1}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-btn{font-family:var(--font-display);font-size:clamp(1.4rem,5vw,2rem);font-weight:400;min-height:72px;border-radius:var(--radius-md);border:3px solid var(--color-border);background:var(--color-bg);cursor:pointer;transition:transform .1s,background .2s}.answer-btn:not(:disabled):hover{background:var(--color-border);transform:scale(1.03)}.answer-btn.correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.answer-btn.wrong{background:var(--color-wrong);border-color:var(--color-wrong);color:#fff}.answer-btn.dimmed{opacity:.4}.feedback-banner{text-align:center;padding:12px;font-weight:800;font-size:1.1rem;margin:12px 20px 0;border-radius:var(--radius-md);animation:popIn .3s}.correct-banner{background:#d1fae5;color:#065f46}.wrong-banner{background:#fee2e2;color:#991b1b}.quiz-progress{text-align:center}.quiz-progress-label{font-size:.85rem;font-weight:700;color:var(--color-text-light);display:block;margin-bottom:4px}.quiz-progress-dots{display:flex;gap:4px;justify-content:center}.dot{width:8px;height:8px;border-radius:50%;background:var(--color-border)}.dot.done{background:var(--color-primary)}.dot.active{background:var(--color-accent)}.score-display{display:flex;align-items:center;gap:8px}.score-points{font-family:var(--font-display);font-size:1.1rem;color:var(--color-accent)}.score-streak{font-family:var(--font-display);font-size:1.1rem;color:var(--color-wrong)}.result-screen{padding:32px 24px;display:flex;flex-direction:column;gap:24px}.result-hero{text-align:center}.result-stars{font-size:2.5rem}.result-score{font-family:var(--font-display);font-size:3rem;color:var(--color-primary)}.result-label{font-size:1.2rem;color:var(--color-text-light)}.result-stats{background:var(--color-bg);border-radius:var(--radius-md);padding:16px}.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--color-border)}.stat-row:last-child{border-bottom:none}.stat-key{color:var(--color-text-light)}.stat-val{font-weight:700}.profile-screen{padding-bottom:40px}.profile-hero{padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff}.profile-name{font-family:var(--font-display);font-size:1.6rem}.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px}.stat-card{background:var(--color-bg);border-radius:var(--radius-md);padding:16px;text-align:center}.stat-big{font-family:var(--font-display);font-size:1.8rem;color:var(--color-primary)}.stat-small{font-size:.85rem;color:var(--color-text-light)}.profile-streak{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 20px}.streak-caption{font-size:.85rem;color:var(--color-text-light)}.profile-badges{padding:0 20px}.profile-danger{text-align:center;margin-top:24px}.reset-link{background:none;border:none;color:var(--color-wrong);font-size:.85rem;cursor:pointer;text-decoration:underline}.level-badge{display:flex;align-items:center;gap:10px}.level-badge-lg .level-emoji{font-size:2.5rem}.level-badge-md .level-emoji{font-size:1.8rem}.level-emoji{font-size:1.5rem}.level-num{font-family:var(--font-display);font-size:1.2rem;display:block}.level-label{font-size:.85rem;opacity:.8}.xp-bar-wrap{width:100%}.xp-bar-labels{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:4px;opacity:.85}.streak-counter{display:flex;align-items:center;gap:8px}.streak-flame{font-size:2rem}.streak-xl .streak-flame{font-size:2.8rem;animation:pulse .8s infinite}.streak-lg .streak-flame{font-size:2.4rem}.streak-current{font-family:var(--font-display);font-size:2rem}.streak-best{font-size:.8rem;color:var(--color-text-light);display:block}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.badge-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--color-bg);border-radius:var(--radius-sm);text-align:center}.badge-cell.locked{opacity:.4}.badge-emoji{font-size:1.6rem}.badge-name{font-size:.65rem;font-weight:700;line-height:1.2;color:var(--color-text-light)}.toast-stack{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:200;width:min(90vw,320px)}.badge-toast{display:flex;align-items:center;gap:12px;background:var(--color-primary);color:#fff;border-radius:var(--radius-lg);padding:14px 20px;box-shadow:var(--shadow-lg)}.toast-emoji{font-size:2rem}.toast-title{font-size:.8rem;opacity:.85}.toast-name{font-family:var(--font-display);font-size:1.1rem}.leaderboard-screen{padding-bottom:32px}.leaderboard-list{padding:0 20px}.lb-row{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:8px;background:var(--color-bg);font-size:.9rem}.lb-top{background:color-mix(in srgb,var(--color-accent) 15%,white)}.lb-medal{font-size:1.2rem;width:28px}.lb-name{flex:1;font-weight:700}.lb-topic{color:var(--color-text-light)}.lb-acc{color:var(--color-correct);font-weight:700}.lb-score{font-family:var(--font-display);font-size:1rem;color:var(--color-primary);min-width:60px;text-align:right}.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;color:var(--color-text-light);text-align:center}.empty-emoji{font-size:3rem}.quiz-timer{display:flex;justify-content:center}.result-xp{padding:0 4px}.auth-screen{padding:40px 24px;display:flex;flex-direction:column;gap:28px;min-height:100vh}.auth-hero{text-align:center}.auth-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:28px 24px}.auth-title{font-family:var(--font-display);font-size:1.5rem;color:var(--color-primary);margin-bottom:20px}.auth-form{display:flex;flex-direction:column;gap:4px}.field-group{margin-bottom:4px}.auth-switch{text-align:center;margin-top:16px;font-size:.9rem;color:var(--color-text-light)}.auth-switch-btn{background:none;border:none;color:var(--color-primary);font-weight:700;cursor:pointer;font-size:.9rem;text-decoration:underline}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px;color:var(--color-text-light);font-size:1rem}.loading-spinner{font-size:3rem;animation:bounce .8s infinite}