:root{--primary:#6c63ff;--primary-light:#8b85ff;--secondary:#ff6b9d;--accent-yellow:#ffd93d;--accent-green:#6bcb77;--accent-orange:#ff8c42;--accent-cyan:#4ecdc4;--bg-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg:#ffffffed;--text-dark:#2d2b55;--text-light:#6e6b99;--shadow-sm:0 2px 8px #6c63ff1f;--shadow-md:0 8px 24px #6c63ff2e;--shadow-lg:0 16px 48px #6c63ff38;--radius-sm:14px;--radius-md:22px;--radius-lg:28px;--radius-xl:36px;--font-fun:"Fredoka", "Comic Sans MS", sans-serif;--font-body:"Comic Neue",cursive}body[data-theme=ocean]{--primary:#0097e6;--primary-light:#00a8ff;--secondary:#48dbfb;--bg-gradient:linear-gradient(135deg, #0097e6, #48dbfb, #00a8ff)}body[data-theme=jungle]{--primary:#44bd32;--primary-light:#4cd137;--secondary:#e1b12c;--bg-gradient:linear-gradient(135deg, #44bd32, #e1b12c, #8c7ae6)}body[data-theme=candy]{--primary:#e84393;--primary-light:#fd79a8;--secondary:#fdcb6e;--bg-gradient:linear-gradient(135deg, #e84393, #fdcb6e, #fd79a8)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;max-width:100vw;font-size:16px;overflow-x:hidden}body{font-family:var(--font-body);background:var(--bg-gradient);min-height:100vh;color:var(--text-dark);-webkit-font-smoothing:antialiased;width:100%;max-width:100vw;overflow-x:hidden}body.dark-mode{--bg-gradient:linear-gradient(135deg,#1a1a2e,#16213e);--card-bg:#1e1e3ceb;--text-dark:#e0e0ff;--text-light:#a0a0cc;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 8px 24px #0006;--shadow-lg:0 16px 48px #00000080}#root{flex-direction:column;align-items:center;width:100%;max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.bg-bubbles{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bubble{opacity:.12;border-radius:50%;animation:linear infinite floatBubble;position:absolute}@keyframes floatBubble{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:.12}90%{opacity:.12}to{opacity:0;transform:translateY(-10vh)scale(1)}}.dark-toggle{z-index:100;background:var(--card-bg);cursor:pointer;width:50px;height:50px;box-shadow:var(--shadow-sm);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;transition:transform .3s;display:flex;position:fixed;top:16px;right:16px}.dark-toggle:hover{transform:scale(1.15)rotate(20deg)}.top-profile-bar{z-index:50;justify-content:space-between;align-items:center;display:flex;position:absolute;top:12px;left:16px;right:16px}.profile-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;color:#fff;font-family:var(--font-fun);box-shadow:var(--shadow-sm);background:#ffffff2e;border-radius:50px;align-items:center;gap:8px;padding:6px 16px 6px 8px;font-weight:700;transition:all .2s;display:flex}.profile-pill:hover{background:#ffffff47;transform:translateY(-2px)}.profile-avatar{background:#fff3;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.6rem;display:flex}.settings-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;color:#fff;width:44px;height:44px;box-shadow:var(--shadow-sm);background:#ffffff2e;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;transition:all .2s;display:flex}.settings-btn:hover{background:#ffffff47;transform:rotate(45deg)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#00000080;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}.settings-modal{background:var(--card-bg);border-radius:var(--radius-xl);width:100%;max-width:440px;box-shadow:var(--shadow-lg);text-align:left;flex-direction:column;max-height:92vh;display:flex;overflow:hidden}.settings-modal-content{scrollbar-width:thin;scrollbar-color:#6c63ff4d transparent;flex:1;padding:24px;overflow-y:auto}.settings-modal-content::-webkit-scrollbar{width:6px}.settings-modal-content::-webkit-scrollbar-track{background:0 0;margin:16px 0}.settings-modal-content::-webkit-scrollbar-thumb{background:#6c63ff4d;border-radius:10px}.settings-modal-content::-webkit-scrollbar-thumb:hover{background:#6c63ff99}.settings-header{background:#6c63ff05;border-bottom:2px solid #6c63ff1a;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.settings-header h2{font-family:var(--font-fun);color:var(--text-dark);margin:0;font-size:1.6rem}.modal-close{cursor:pointer;width:34px;height:34px;color:var(--text-dark);background:#6c63ff1a;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex}.modal-close:hover{color:#ff4757;background:#ff475726;transform:scale(1.1)}.settings-section{margin-bottom:20px}.settings-section h3{font-family:var(--font-fun);color:var(--primary);margin-bottom:8px;font-size:1.1rem}.settings-input{border-radius:var(--radius-md);width:100%;font-family:var(--font-fun);color:var(--text-dark);background:#6c63ff08;border:2px solid #6c63ff33;outline:none;padding:12px 16px;font-size:1.1rem;transition:border-color .2s}.settings-input:focus{border-color:var(--primary)}.avatar-grid{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.avatar-btn{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:12px;padding:4px;font-size:1.8rem;transition:all .2s}.avatar-btn.selected{border-color:var(--primary);background:#6c63ff1a;transform:scale(1.1)}.avatar-btn:hover:not(.selected){background:#6c63ff0d}.theme-grid{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.theme-btn{font-family:var(--font-fun);cursor:pointer;color:var(--text-dark);background:#6c63ff0d;border:2px solid #0000;border-radius:50px;padding:8px 12px;font-size:.9rem;font-weight:600;transition:all .2s}.theme-btn.selected{border-color:var(--primary);background:#6c63ff1a}.theme-btn:hover:not(.selected){background:#6c63ff1a}.toggle-row{font-family:var(--font-fun);color:var(--text-dark);justify-content:space-between;align-items:center;padding:8px 0;font-weight:600;display:flex}.toggle-switch{cursor:pointer;background:#6c63ff33;border-radius:30px;width:50px;height:28px;transition:background .3s;position:relative}.toggle-switch.on{background:var(--accent-green)}.toggle-knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .3s;position:absolute;top:4px;left:4px;box-shadow:0 2px 4px #0003}.toggle-switch.on .toggle-knob{transform:translate(22px)}.home-screen{z-index:1;text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;width:100%;max-width:100vw;min-height:100dvh;padding:80px 12px 30px;display:flex;position:relative;overflow:hidden auto}.mascot-img{object-fit:contain;filter:drop-shadow(0 8px 20px #6c63ff59);width:110px;height:110px;animation:2s ease-in-out infinite mascotBounce}@keyframes mascotBounce{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-8px)rotate(2deg)}}.app-title{font-family:var(--font-fun);background:linear-gradient(135deg,#ffd93d,#ff6b9d,#6c63ff,#4ecdc4) 0 0/300%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.6rem;font-weight:700;line-height:1.1;animation:4s infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.app-subtitle{font-family:var(--font-fun);color:#ffffffe0;max-width:400px;margin:0;font-size:1rem}.difficulty-section{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:500px;margin-top:4px;display:flex}.difficulty-label{font-family:var(--font-fun);color:#ffffffeb;font-size:1.2rem}.difficulty-cards{scrollbar-width:none;flex-wrap:nowrap;justify-content:center;gap:10px;width:100%;padding-bottom:4px;display:flex;overflow-x:auto}.diff-card{background:var(--card-bg);border-radius:var(--radius-lg);cursor:pointer;min-width:100px;max-width:150px;box-shadow:var(--shadow-md);text-align:center;border:3px solid #0000;flex:1;padding:14px 10px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.diff-card:before{content:"";opacity:.06;border-radius:inherit;transition:opacity .3s;position:absolute;inset:0}.diff-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)scale(1.04)}.diff-card.easy{border-color:var(--accent-green)}.diff-card.easy:before{background:var(--accent-green)}.diff-card.medium{border-color:var(--accent-orange)}.diff-card.medium:before{background:var(--accent-orange)}.diff-card.hard{border-color:var(--secondary)}.diff-card.hard:before{background:var(--secondary)}.diff-card:hover:before{opacity:.14}.diff-emoji{margin-bottom:4px;font-size:2.2rem}.diff-name{font-family:var(--font-fun);color:var(--text-dark);margin-bottom:2px;font-size:1.1rem;font-weight:700}.diff-desc{color:var(--text-light);font-size:.75rem;line-height:1.2}.home-stats-container{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:500px;margin-top:4px;display:flex}.high-scores{background:var(--card-bg);border-radius:var(--radius-md);min-width:140px;box-shadow:var(--shadow-sm);flex:1;margin-top:0;padding:12px 16px}.high-scores h3{font-family:var(--font-fun);margin-bottom:6px;font-size:1rem}.score-row{color:var(--text-light);justify-content:space-between;gap:12px;padding:3px 0;font-size:.85rem;display:flex}.score-row span:last-child{color:var(--primary);font-weight:700}.game-screen{z-index:1;flex-direction:column;align-items:center;width:100%;max-width:520px;height:100dvh;padding:12px 14px;display:flex;position:relative;overflow:hidden}.game-topbar{flex-shrink:0;justify-content:space-between;align-items:center;width:100%;margin-bottom:8px;display:flex}.btn-back{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--font-fun);cursor:pointer;color:#fff;background:#ffffff2e;border:none;border-radius:50px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .2s}.btn-back:hover{background:#ffffff47}.question-counter{font-family:var(--font-fun);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff26;border-radius:50px;padding:6px 16px;font-size:1.05rem;font-weight:700}.difficulty-badge{font-family:var(--font-fun);color:#fff;border-radius:50px;padding:6px 14px;font-size:.8rem;font-weight:600}.difficulty-badge.easy{background:var(--accent-green)}.difficulty-badge.medium{background:var(--accent-orange)}.difficulty-badge.hard{background:var(--secondary)}.stats-row{flex-shrink:0;justify-content:space-between;align-items:center;width:100%;margin-bottom:6px;display:flex}.stat-item{font-family:var(--font-fun);color:#fff;align-items:center;gap:4px;font-size:1rem;font-weight:700;display:flex}.stat-val{font-size:1.2rem}.stat-val.green{color:var(--accent-yellow)}.stat-val.orange{color:var(--accent-orange)}.timer-inline{align-items:center;gap:8px;display:flex}.timer-bar-bg-sm{background:#fff3;border-radius:20px;width:120px;height:10px;overflow:hidden}.timer-bar-fill-sm{background:linear-gradient(90deg, var(--accent-green), var(--accent-cyan));border-radius:20px;height:100%;transition:background .5s}.timer-bar-fill-sm.warning{background:linear-gradient(90deg, var(--accent-orange), var(--accent-yellow))}.timer-bar-fill-sm.danger{background:linear-gradient(90deg, #ff4757, var(--accent-orange));animation:.5s infinite timerPulse}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.6}}.timer-text{font-family:var(--font-fun);color:#ffffffd9;white-space:nowrap;font-size:.85rem}.streak-bar{text-align:center;width:100%;font-family:var(--font-fun);color:#fff;background:#ff8c4240;border-radius:50px;flex-shrink:0;margin-bottom:6px;padding:5px 14px;font-size:.85rem;font-weight:600}.question-card{border-radius:var(--radius-lg);text-align:center;background:#fff;border:3px solid #6c63ff26;width:100%;margin-bottom:14px;padding:28px 20px 24px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000001f,0 2px 8px #6c63ff26}body.dark-mode .question-card{background:#282850f7;border-color:#6c63ff4d}.question-card:before{content:"";background:linear-gradient(90deg,#ffd93d,#ff6b9d,#6c63ff,#4ecdc4) 0 0/200%;height:6px;animation:3s linear infinite gradientShift;position:absolute;top:0;left:0;right:0}.question-number{font-family:var(--font-fun);color:#888;letter-spacing:.5px;margin-bottom:6px;font-size:.85rem}.question-emoji{margin-bottom:6px;font-size:2.4rem}.question-text{font-family:var(--font-fun);color:#1a1a3e;font-size:1.6rem;font-weight:700;line-height:1.3}body.dark-mode .question-text{color:#fff}.question-date{color:#ffd93d;font-family:var(--font-fun);letter-spacing:1px;background:linear-gradient(135deg,#2d2b55,#6c63ff);border:2px solid #ffd93d4d;border-radius:18px;margin-top:14px;padding:14px 32px;font-size:1.6rem;font-weight:700;display:inline-block;box-shadow:0 6px 20px #2c2b5559}body.dark-mode .question-date{color:#1a1a3e;background:linear-gradient(135deg,#ffd93d,#ff8c42)}.question-mark{font-family:var(--font-fun);color:#ff6b9d;margin-top:8px;font-size:2.2rem;font-weight:700;animation:1s ease-in-out infinite bounceMark}@keyframes bounceMark{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.options-grid{grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:12px;display:grid}.option-btn{font-family:var(--font-fun);border-radius:var(--radius-md);background:var(--card-bg);color:var(--text-dark);cursor:pointer;box-shadow:var(--shadow-sm);border:3px solid #6c63ff1f;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.option-btn .option-emoji{font-size:1.5rem}.option-btn .option-text{font-size:.95rem}.option-btn:hover:not(:disabled){box-shadow:var(--shadow-md);border-color:var(--primary-light);background:linear-gradient(135deg,#6c63ff0d,#ff6b9d0d);transform:translateY(-4px)}.option-btn:disabled{cursor:default}.option-btn.correct{color:#fff;border-color:var(--accent-green);background:linear-gradient(135deg,#6bcb77,#4ecdc4);animation:.4s correctPop;transform:scale(1.04)}.option-btn.wrong{color:#fff;background:linear-gradient(135deg,#ff4757,#ff6b81);border-color:#ff4757;animation:.4s shake}.option-btn.dimmed{opacity:.4;transform:scale(.95)}@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1.04)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.feedback-banner{border-radius:var(--radius-md);align-items:center;gap:14px;width:100%;margin-bottom:10px;padding:16px 20px;display:flex;position:relative;overflow:hidden}.feedback-banner.correct{color:#fff;background:linear-gradient(135deg,#6bcb77eb,#4ecdc4eb)}.feedback-banner.wrong{color:#fff;background:linear-gradient(135deg,#ff4757e0,#ff6b9de0)}.feedback-reaction{flex-shrink:0;font-size:2.4rem}.feedback-content{flex:1}.feedback-msg{font-family:var(--font-fun);font-size:1.2rem;font-weight:700;display:block}.feedback-answer{font-family:var(--font-fun);opacity:.9;margin-top:2px;font-size:.95rem;display:block}.auto-advance-bar{background:#ffffff40;height:4px;position:absolute;bottom:0;left:0;right:0}.auto-advance-fill{background:#ffffffb3;border-radius:0 4px 4px 0;height:100%}.badge-popup{background:var(--card-bg);border-radius:var(--radius-xl);text-align:center;z-index:200;box-shadow:var(--shadow-lg), 0 0 60px #6c63ff33;padding:36px 40px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.badge-sparkle{font-size:1.5rem}.badge-popup .badge-icon{margin:8px 0;font-size:4rem}.badge-popup .badge-title{font-family:var(--font-fun);color:var(--text-light);font-size:1rem}.badge-popup .badge-name{font-family:var(--font-fun);color:var(--primary);margin:4px 0;font-size:1.5rem;font-weight:700}.badge-popup .badge-desc{color:var(--text-light);font-size:.9rem}.results-screen{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;padding:24px;display:flex;position:relative}.results-card{background:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:40px 28px}.results-emoji{margin-bottom:8px;font-size:4.5rem}.results-title{font-family:var(--font-fun);color:var(--text-dark);margin-bottom:8px;font-size:2rem;font-weight:700}.results-score{font-family:var(--font-fun);background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3.5rem;font-weight:700;line-height:1}.results-score span{-webkit-text-fill-color:var(--text-light);font-size:1.5rem}.results-pct{font-family:var(--font-fun);color:var(--text-light);margin:8px 0 20px;font-size:1.1rem}.results-badges{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.results-badges .badge-item{font-size:2rem;animation:2s ease-in-out infinite badgeFloat}@keyframes badgeFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.results-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-family:var(--font-fun);cursor:pointer;border:none;border-radius:50px;padding:14px 32px;font-size:1rem;font-weight:700;transition:all .25s;box-shadow:0 6px 20px #6c63ff4d}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 28px #6c63ff73}.btn-secondary{background:var(--card-bg);color:var(--text-dark);border:2px solid var(--primary-light);font-family:var(--font-fun);cursor:pointer;border-radius:50px;padding:14px 32px;font-size:1rem;font-weight:700;transition:all .25s}.btn-secondary:hover{background:#6c63ff14;transform:translateY(-3px)}@media (width<=768px){.game-screen{max-width:100%;padding:12px}.question-card{padding:20px 14px 18px}}@media (width<=600px){.home-screen{justify-content:flex-start;padding-top:80px}.top-profile-bar{top:16px;left:16px;right:16px}.app-title{font-size:2.2rem}.app-subtitle{padding:0 16px;font-size:1rem}.mascot-img{width:110px;height:110px;box-shadow:var(--shadow-sm);filter:none;border-radius:24px}.difficulty-section{margin-top:12px}.difficulty-cards{scroll-snap-type:x mandatory;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;width:100%;padding:10px 4px 20px;overflow-x:auto}.difficulty-cards::-webkit-scrollbar{display:none}.diff-card{scroll-snap-align:center;flex:none;width:160px;min-width:160px;padding:20px 16px}.diff-emoji{font-size:2.2rem}.diff-name{font-size:1.2rem}.diff-desc{font-size:.8rem}.home-stats-container{flex-direction:column;gap:12px;width:90%;max-width:400px;margin-bottom:24px}.high-scores{width:100%;margin:0;padding:16px}.score-row{padding:4px 0;font-size:.9rem}.settings-modal-content{padding:16px 14px}.settings-header{padding:14px 16px}.settings-header h2{font-size:1.3rem}.modal-close{width:28px;height:28px;font-size:1rem}.settings-section{margin-bottom:16px}.settings-input{padding:8px 12px;font-size:1rem}.avatar-btn{padding:2px;font-size:1.5rem}.theme-btn{padding:6px 10px;font-size:.85rem}.toggle-row{padding:4px 0;font-size:.9rem}.game-screen{justify-content:flex-start;padding:16px 14px}.game-topbar{justify-content:space-between;align-items:center;margin-bottom:16px;position:relative}.question-counter{position:absolute;left:50%;transform:translate(-50%)}.stats-row{margin-bottom:20px;padding:8px 16px}.question-card{margin-bottom:20px;padding:24px 16px}.question-text{font-size:1.3rem}.question-date{margin-top:12px;padding:12px 24px;font-size:1.2rem}.options-grid{gap:12px;margin-bottom:16px}.option-btn{border-radius:16px;padding:20px 10px}.option-btn .option-emoji{font-size:1.6rem}.option-btn .option-text{font-size:1rem}.results-score{font-size:2.8rem}.results-card{padding:30px 20px}.feedback-banner{margin-bottom:12px;padding:16px}.feedback-reaction{font-size:2rem}.feedback-msg{font-size:1.1rem}}@media (width<=380px){.app-title{font-size:1.8rem}.mascot-img{border-radius:20px;width:90px;height:90px}.diff-card{width:140px;min-width:140px;padding:16px 12px}.diff-emoji{font-size:1.8rem}.game-topbar{margin-bottom:12px}.stats-row{margin-bottom:16px;padding:6px 12px}.question-card{padding:16px 12px}.question-text{font-size:1.15rem}.question-date{margin-top:10px;padding:10px 16px;font-size:1.1rem}.options-grid{gap:10px}.option-btn{border-radius:14px;padding:16px 8px}.option-btn .option-emoji{font-size:1.4rem}.option-btn .option-text{font-size:.9rem}}