:root{--font-display:"Baloo 2", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;--bg:#fef6e4;--bg-gradient:radial-gradient(circle at 15% 0%, #fff3d6 0%, #fef6e4 45%, #ffe8d6 100%);--surface:#fff;--surface-alt:#fff9ef;--text:#2b2140;--text-muted:#6b6280;--border:#eadfc7;--brand:#ff5252;--brand-dark:#d83a3a;--accent-yellow:#ffc93c;--accent-blue:#2e9bf0;--accent-green:#35c48f;--accent-purple:#8b5cf6;--shadow-sm:0 2px 6px #2b214014;--shadow-md:0 8px 20px #2b21401f;--shadow-lg:0 14px 32px #2b21402e;--radius-md:18px;--radius-lg:26px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#1a1531;--bg-gradient:radial-gradient(circle at 15% 0%, #241d42 0%, #1a1531 45%, #140f26 100%);--surface:#241d42;--surface-alt:#2a2250;--text:#f4f0ff;--text-muted:#b3a9d6;--border:#3a305e;--shadow-sm:0 2px 6px #0000004d;--shadow-md:0 8px 20px #00000059;--shadow-lg:0 14px 32px #00000073;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg-gradient);color:var(--text);-webkit-tap-highlight-color:transparent;min-height:100vh}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3{font-family:var(--font-display);margin:0}p{margin:0}button{font-family:var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none}img{max-width:100%}.screen{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;flex:1;align-items:center;width:100%;max-width:900px;margin:0 auto;display:flex}.screen-header{align-items:center;gap:12px;width:100%;margin-bottom:18px;display:flex}.screen-title{color:var(--text);flex:1;font-size:clamp(1.4rem,5vw,2rem)}.btn{font-family:var(--font-display);color:#fff;background:var(--brand);border-radius:var(--radius-md);min-height:56px;box-shadow:var(--shadow-md);justify-content:center;align-items:center;gap:10px;width:100%;padding:16px 22px;font-size:1.05rem;font-weight:700;transition:transform .12s,box-shadow .12s,filter .12s;display:flex}.btn:active{box-shadow:var(--shadow-sm);transform:translateY(2px)scale(.98)}.btn:hover{filter:brightness(1.05)}.btn.secondary{background:var(--surface);color:var(--text);border:2px solid var(--border);box-shadow:var(--shadow-sm)}.btn.blue{background:var(--accent-blue)}.btn.yellow{background:var(--accent-yellow);color:#4a3400}.btn.green{background:var(--accent-green)}.btn.purple{background:var(--accent-purple)}.btn.ghost{color:var(--text);box-shadow:none;border:2px dashed var(--border);background:0 0}.btn.icon-btn{border-radius:16px;flex:none;width:56px;min-height:56px;padding:0}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:18px}.stack{flex-direction:column;gap:14px;width:100%;display:flex}.center-text{text-align:center}.muted{color:var(--text-muted)}.pill{background:var(--surface-alt);color:var(--text);border:2px solid var(--border);border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:.85rem;font-weight:700;display:inline-flex}.anim-off *{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.menu-screen{justify-content:center;min-height:100vh;position:relative;overflow:hidden}.menu-bg{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.bg-shape{opacity:.18;font-size:2.6rem;animation:9s ease-in-out infinite float;position:absolute}.s1{animation-duration:8s;top:8%;left:10%}.s2{animation-duration:11s;animation-delay:.5s;top:20%;left:78%}.s3{animation-duration:9.5s;animation-delay:1s;top:65%;left:82%}.s4{animation-duration:10s;animation-delay:1.5s;top:72%;left:12%}.s5{animation-duration:12s;animation-delay:.8s;top:40%;left:4%}.s6{animation-duration:7.5s;top:45%;left:88%}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-22px)rotate(8deg)}}.menu-title-block{z-index:1;text-align:center;margin-top:8vh;margin-bottom:6vh;animation:.5s pop-in;position:relative}.menu-title{color:var(--brand);text-shadow:0 3px #00000014;letter-spacing:.5px;font-size:clamp(1.8rem,8vw,3rem)}.menu-subtitle{font-family:var(--font-display);color:var(--accent-blue);margin-top:6px;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700}.menu-buttons{z-index:1;max-width:420px;position:relative}.menu-btn{min-height:64px;font-size:1.2rem}.menu-btn.play{background:linear-gradient(135deg, var(--brand), var(--brand-dark));font-size:1.35rem;animation:2.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:var(--shadow-md)}50%{box-shadow:0 10px 26px #ff525273}}@keyframes pop-in{0%{opacity:0;transform:translateY(-14px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.menu-footer{z-index:1;margin-top:auto;padding-top:24px;font-size:.85rem;position:relative}.mode-list{max-width:560px}.mode-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:3px solid #0000;border-left:8px solid var(--mode-color);text-align:left;align-items:center;gap:16px;min-height:64px;padding:16px 18px;transition:transform .15s,box-shadow .15s;animation:.35s both card-in;display:flex}.mode-card:active{transform:scale(.98)}.mode-emoji{flex:none;font-size:2.2rem}.mode-text{flex-direction:column;gap:2px;display:flex}.mode-title{font-family:var(--font-display);color:var(--text);font-size:1.15rem;font-weight:700}.mode-desc{font-size:.9rem}@keyframes card-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.setup-section{width:100%;max-width:560px;margin-bottom:22px}.setup-heading{color:var(--text);margin-bottom:10px;font-size:1.1rem}.setup-row{flex-wrap:wrap;gap:10px;display:flex}.setup-grid{grid-template-columns:1fr;gap:10px;display:grid}@media (width>=480px){.setup-grid{grid-template-columns:1fr 1fr}}.setup-chip{font-family:var(--font-display);border:3px solid var(--border);background:var(--surface);min-height:52px;color:var(--text);border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 16px;font-size:1rem;font-weight:700;transition:transform .12s,border-color .12s,background .12s;display:flex}.setup-chip.wide{flex:none;justify-content:flex-start;width:100%}.setup-chip.active{border-color:var(--chip-color);background:color-mix(in srgb, var(--chip-color) 16%, var(--surface));transform:scale(1.02)}.chip-emoji{font-size:1.2rem}.start-btn{max-width:560px;margin-top:8px}.char-avatar-img,.char-avatar-fallback{aspect-ratio:1;border-radius:20px;width:100%;display:block}.char-avatar-img{object-fit:contain;background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--border)}.char-avatar-fallback{color:#fff;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffff40}.char-avatar-letter{font-size:clamp(2.2rem,10vw,4rem);font-weight:800;font-family:var(--font-display);text-shadow:0 3px #00000026}.char-avatar-emoji{filter:drop-shadow(0 2px 2px #00000040);font-size:clamp(1.1rem,4vw,1.8rem);position:absolute;bottom:6%;right:8%}.char-avatar-img.compact,.char-avatar-fallback.compact{border-radius:14px}.char-avatar-fallback.compact .char-avatar-letter{font-size:clamp(1.4rem,6vw,2.2rem)}.choice-question{align-items:center;width:100%;max-width:560px}.question-title{text-align:center;font-size:1.3rem}.question-image-wrap{width:min(220px,60vw);margin:4px auto;animation:.4s card-pop}.quote-card{text-align:center;width:100%}.quote-text{font-family:var(--font-display);color:var(--text);font-size:1.15rem;line-height:1.5}.options-grid{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}@media (width<=420px){.options-grid{grid-template-columns:1fr}}.option-btn{font-family:var(--font-display);border:3px solid var(--border);background:var(--surface);min-height:56px;color:var(--text);box-shadow:var(--shadow-sm);border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:12px 14px;font-size:1.05rem;font-weight:700;transition:transform .12s,border-color .12s;display:flex}.option-btn:active:not(:disabled){transform:scale(.97)}.option-btn.correct{border-color:var(--accent-green);background:color-mix(in srgb, var(--accent-green) 22%, var(--surface));animation:.4s correct-pop}.option-btn.wrong{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 16%, var(--surface));animation:.4s shake}.option-emoji{font-size:1.3rem}.feedback-card{text-align:center;border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-md);padding:18px;animation:.35s card-in-up}.feedback-card.good{background:color-mix(in srgb, var(--accent-green) 18%, var(--surface))}.feedback-card.meh{background:color-mix(in srgb, var(--accent-yellow) 20%, var(--surface))}.feedback-headline{font-family:var(--font-display);font-size:1.3rem;font-weight:800}.feedback-streak{color:var(--brand-dark);margin-top:4px;font-weight:700}.feedback-fact{margin-top:8px;font-size:.95rem}.next-btn{margin-top:14px;max-width:260px;margin-inline:auto}@keyframes card-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes correct-pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes card-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.match-puzzle{align-items:center;width:100%;max-width:640px}.match-hint{text-align:center;font-size:.9rem}.match-columns{grid-template-columns:1fr 1fr;gap:14px;width:100%;display:grid}.match-column{flex-direction:column;gap:10px;display:flex}.match-card{background:var(--surface);border:3px solid var(--border);min-height:56px;box-shadow:var(--shadow-sm);border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;transition:transform .12s,border-color .12s;display:flex;position:relative}.match-card.right{text-align:center;justify-content:center;font-size:.92rem;font-weight:700}.match-card.left .char-avatar-img,.match-card.left .char-avatar-fallback{width:56px}.match-card-label{font-family:var(--font-body);color:var(--text);font-size:.9rem;font-weight:700}.match-card.selected{border-color:var(--accent-blue);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-blue) 25%, transparent);transform:scale(1.03)}.match-card.matched{border-color:var(--accent-green);background:color-mix(in srgb, var(--accent-green) 16%, var(--surface));opacity:.85;animation:.4s matched-pop}.match-check{font-size:.9rem;position:absolute;top:4px;right:6px}.match-card.shake{border-color:var(--brand);animation:.4s match-shake}@keyframes matched-pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes match-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.quiz-screen{padding-top:14px}.quiz-topbar{align-items:center;gap:12px;width:100%;margin-bottom:18px;display:flex}.quiz-progress{flex-direction:column;flex:1;gap:4px;display:flex}.quiz-progress-track{background:var(--surface-alt);border:2px solid var(--border);border-radius:999px;height:10px;overflow:hidden}.quiz-progress-fill{background:linear-gradient(90deg, var(--accent-green), var(--accent-blue));height:100%;transition:width .3s}.quiz-progress-label{text-align:center;font-size:.8rem}.points-pill{font-family:var(--font-display);flex:none}.confetti-wrap{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;border-radius:3px;width:10px;height:14px;animation:linear forwards confetti-fall;position:absolute;top:-12px}@keyframes confetti-fall{0%{opacity:.95;transform:translateY(-10px)rotate(0)}to{opacity:0;transform:translateY(110vh)rotate(360deg)}}.summary-screen{justify-content:center}.summary-card{align-items:center;max-width:460px;animation:.4s summary-in}.summary-title{color:var(--brand);font-size:1.7rem}.summary-score{flex-direction:column;align-items:center;display:flex}.summary-score-value{font-family:var(--font-display);color:var(--accent-blue);font-size:2.6rem;font-weight:800}.summary-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;display:grid}.summary-stat{background:var(--surface-alt);border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:12px;display:flex}.summary-stat-value{font-family:var(--font-display);font-size:1.2rem;font-weight:800}.summary-actions{margin-top:10px}@keyframes summary-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.gallery-filters{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin-bottom:16px;display:flex}.filter-chip{font-family:var(--font-display);border:2px solid var(--border);background:var(--surface);min-height:44px;color:var(--text);border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:700;transition:transform .12s,border-color .12s}.filter-chip.active{border-color:var(--chip-color,var(--brand));background:color-mix(in srgb, var(--chip-color,var(--brand)) 18%, var(--surface));transform:scale(1.04)}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:14px;width:100%;display:grid}@media (width>=620px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=900px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}.gallery-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:12px;transition:transform .15s,box-shadow .15s;animation:.3s both gallery-in;display:flex}.gallery-card:active{transform:scale(.96)}.gallery-card-name{font-family:var(--font-display);margin-top:4px;font-size:1rem;font-weight:700}.gallery-card-series{font-size:.78rem}@keyframes gallery-in{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.detail-card{text-align:center;align-items:center;max-width:460px;animation:.3s card-in-up}.detail-image-wrap{width:min(240px,65vw)}.detail-description{font-size:1.05rem;line-height:1.5}.detail-facts{text-align:left;width:100%}.detail-subheading{margin-bottom:8px;font-size:1rem}.detail-fact-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.detail-fact-list li{background:var(--surface-alt);border-radius:12px;padding:10px 12px;font-size:.95rem}.results-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:480px;display:grid}.results-stat{flex-direction:column;align-items:center;gap:4px;display:flex}.results-value{font-family:var(--font-display);color:var(--brand);font-size:1.6rem;font-weight:800}.reset-section{max-width:420px;margin-top:24px}.confirm-card{gap:12px}.settings-list{max-width:480px}.settings-row{justify-content:space-between;align-items:center;width:100%;min-height:56px;display:flex}.settings-row-label{font-family:var(--font-display);color:var(--text);font-size:1.05rem;font-weight:700}.toggle-switch{background:var(--border);border-radius:999px;flex:none;width:52px;height:30px;transition:background .2s;position:relative}.toggle-switch.on{background:var(--accent-green)}.toggle-knob{width:24px;height:24px;box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle-switch.on .toggle-knob{transform:translate(22px)}.settings-reset{flex-direction:column;align-items:stretch;gap:10px;display:flex}.confirm-actions{gap:10px;width:100%;display:flex}.settings-privacy{text-align:center;max-width:480px;margin-top:20px;font-size:.85rem;line-height:1.5}