:root{--paper: #FAF8F3;--paper-soft: #FFFFFF;--cream: #FFF8EC;--ink: #2C1A08;--ink-soft: #6B4C2A;--amber: #FF7A45;--amber-soft: #FFD3BD;--sertao: #8B4513;--sertao-dark: #5C2D0A;--sertao-light: #C4813A;--forest: #2D6A4F;--forest-soft: #D6E7DD;--danger: #B23A2E;--danger-soft: #F4D8D3;--bg-sertao: #8B4513;--bg-cerrado: #6B7B3A;--bg-mata-atlantica: #2D5016;--bg-amazonia: #1A4A2E;--bg-litoral: #1A6080;--radius-card: 20px;--radius-pill: 999px;--shadow-card: 0 1px 2px rgba(60, 28, 8, .18), 0 12px 32px rgba(60, 28, 8, .28);--shadow-soft: 0 8px 24px rgba(60, 28, 8, .16);--font-display: "Fredoka", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}html{background:var(--sertao-dark)}body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation}button{font-family:inherit;cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.app{position:fixed;inset:0;z-index:1;display:flex;align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);background:radial-gradient(80% 60% at 60% 0%,rgba(255,160,60,.15),transparent 60%),linear-gradient(180deg,var(--sertao-dark) 0%,var(--sertao) 55%,var(--sertao-light) 100%)}.scene-root{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,40px);background:radial-gradient(60% 60% at 50% 50%,#3c1c084d,#140a02b8);animation:overlay-in .28s ease-out}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.panel{background:var(--paper);color:var(--ink);border-radius:var(--radius-card);padding:clamp(24px,5vw,40px);box-shadow:var(--shadow-card);max-width:540px;width:100%;text-align:center;animation:panel-in .36s cubic-bezier(.2,.8,.2,1)}@keyframes panel-in{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.panel h1,.panel h2{font-family:var(--font-display);margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}.panel h1{font-size:clamp(1.5rem,5vw,2.2rem)}.panel h2{font-size:clamp(1.2rem,4vw,1.6rem)}.panel p{margin:0 0 16px;color:var(--ink-soft);font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.55}.panel-mascot{width:96px;height:96px;margin:0 auto 12px;display:block}.panel-kicker{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;color:var(--amber);margin-bottom:6px}.btn-primary{background:var(--amber);color:var(--paper);border:none;font-family:var(--font-display);font-weight:500;font-size:1.125rem;padding:14px 28px;min-height:52px;border-radius:var(--radius-pill);box-shadow:0 6px 16px #ff7a4559;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.btn-primary:hover{background:#ff8a5a}.btn-primary:active{transform:translateY(1px);box-shadow:0 3px 10px #ff7a454d}.btn-primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.btn-secondary{background:transparent;color:var(--ink-soft);border:none;font-family:var(--font-body);font-size:.95rem;padding:10px 14px;margin-top:8px;text-decoration:underline;text-underline-offset:3px}.btn-secondary:hover{color:var(--ink)}.btn-secondary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}.card-backdrop{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,24px);background:#140a028c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlay-in .22s ease-out;overflow-y:auto}.card{background:var(--cream);color:var(--ink);border-radius:var(--radius-card);padding:clamp(18px,4vw,32px);box-shadow:var(--shadow-card);max-width:580px;width:100%;animation:panel-in .32s cubic-bezier(.2,.8,.2,1)}.card-subject-chip{display:inline-flex;align-items:center;gap:4px;background:var(--forest-soft);color:var(--forest);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:10px}.card-subject-chip.is-matematica{background:var(--amber-soft);color:var(--sertao-dark)}.card-front{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2.4rem);text-align:center;letter-spacing:.02em;color:var(--ink);margin:8px 0 20px;line-height:1.2}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.opt{background:var(--paper-soft);color:var(--ink);border:2px solid transparent;border-radius:14px;padding:14px 12px;min-height:56px;font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,2.6vw,1.15rem);box-shadow:0 2px 6px #3c1c080f;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.opt:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #3c1c081a;border-color:var(--amber-soft)}.opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.opt:disabled{cursor:default;opacity:.85}.opt.is-correct{background:var(--forest-soft);border-color:var(--forest);color:var(--forest)}.opt.is-wrong{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.opt.is-faded{opacity:.55}.feedback{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.95rem;line-height:1.5;animation:bubble-in .24s ease-out}@keyframes bubble-in{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-correct{background:var(--forest-soft);color:var(--forest)}.feedback-wrong{background:var(--danger-soft);color:var(--danger)}.feedback strong{font-family:var(--font-display);font-weight:500}.card-actions{display:flex;justify-content:flex-end;margin-top:16px}.flip{perspective:1200px;margin:8px 0 4px}.flip-inner{position:relative;transform-style:preserve-3d;transition:transform .56s cubic-bezier(.2,.8,.2,1);min-height:132px}.flip.is-flipped .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:6px}.flip-back{transform:rotateY(180deg)}.flip-hint{font-size:.82rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px}.flip-back-label{font-family:var(--font-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--forest)}.flip-answer{font-size:clamp(1rem,3vw,1.25rem);line-height:1.45;color:var(--ink);text-align:center}.chip-streak{background:linear-gradient(135deg,#ff7a45,#ff9e4a);color:var(--paper);border:1px solid rgba(255,220,150,.5);transition:transform .18s cubic-bezier(.2,.8,.2,1)}.chip-streak[hidden]{display:none}.chip-streak.is-pop{transform:scale(1.18)}.streak-flame{font-size:1rem;line-height:1}.intro-trail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:14px 0 6px}.intro-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 6px;min-width:52px;border-radius:14px;background:#8b45130f;border:2px solid transparent;opacity:.55;transition:opacity .2s ease,border-color .2s ease,background .2s ease}.intro-step.has-cards{opacity:1;background:var(--amber-soft);border-color:var(--amber)}.intro-step.is-litoral.has-cards{background:var(--forest-soft);border-color:var(--forest)}.intro-step-emoji{font-size:1.4rem;line-height:1}.intro-step-count{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--sertao-dark)}.intro-step.is-litoral.has-cards .intro-step-count{color:var(--forest)}.intro-link{color:var(--ink-soft);font-size:1.1rem;opacity:.5}.box-indicator{display:flex;gap:6px;justify-content:center;margin:12px 0 0}.box-pip{width:28px;height:8px;border-radius:4px;background:#fff3;transition:background .3s ease}.box-pip.is-active{background:var(--amber)}.box-pip.is-done{background:var(--forest)}.leo-hud{position:absolute;left:max(clamp(12px,3vw,28px),env(safe-area-inset-left));bottom:max(clamp(12px,3vw,28px),env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:12px;z-index:4;pointer-events:none;max-width:min(440px,80vw)}.leo-avatar{width:clamp(64px,12vw,96px);height:clamp(64px,12vw,96px);flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(60,28,8,.45));transition:transform .22s cubic-bezier(.5,0,.2,1)}.leo-avatar.is-bounce{animation:leo-bounce .7s cubic-bezier(.5,0,.2,1)}@keyframes leo-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.05)}to{transform:translateY(0) scale(1)}}.leo-bubble{background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:18px 18px 18px 6px;box-shadow:var(--shadow-soft);font-size:clamp(.875rem,2.2vw,1rem);line-height:1.4;max-width:320px;animation:bubble-in .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}.top-hud{position:absolute;top:max(clamp(10px,2.5vw,20px),env(safe-area-inset-top));right:max(clamp(12px,3vw,28px),env(safe-area-inset-right));display:flex;gap:8px;z-index:4;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}.chip{background:#3c1c0899;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);font-family:var(--font-display);font-weight:500;font-size:.95rem;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid rgba(255,200,80,.2);display:inline-flex;align-items:center;gap:6px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}.stat{background:var(--paper-soft);border-radius:14px;padding:12px 8px}.stat-value{font-family:var(--font-display);font-size:1.6rem;color:var(--amber);line-height:1.1}.stat-label{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}.result-actions{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:18px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.trail-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}@media (prefers-reduced-motion: reduce){.overlay,.panel,.card-backdrop,.card,.leo-bubble,.feedback,.result-actions,.leo-avatar.is-bounce{animation:none!important}.btn-primary,.opt,.box-pip,.flip-inner,.chip-streak{transition:none!important}}