*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body,#app{width:100%;height:100%;overflow:hidden}:root{--bg-1: #fef3c7;--bg-2: #fde68a;--accent: #f59e0b;--accent-shadow: #b45309;--accent-deep: #92400e;--text: #4a2511;--card: #ffffff;--card-border: #fde047;--card-shadow: #d97706}body[data-scene=start],body[data-scene=map]{--bg-1: #fef3c7;--bg-2: #fcd34d;--accent: #f59e0b;--accent-shadow: #b45309}body[data-scene=farm]{--bg-1: #ecfccb;--bg-2: #bef264;--accent: #65a30d;--accent-shadow: #3f6212;--accent-deep: #365314;--card-border: #a3e635;--card-shadow: #4d7c0f}body[data-scene=home]{--bg-1: #dbeafe;--bg-2: #93c5fd;--accent: #2563eb;--accent-shadow: #1d4ed8;--accent-deep: #1e3a8a;--card-border: #60a5fa;--card-shadow: #1d4ed8}body[data-scene=park]{--bg-1: #d9f99d;--bg-2: #fbcfe8;--accent: #db2777;--accent-shadow: #9d174d;--accent-deep: #831843;--card-border: #f472b6;--card-shadow: #be185d}body[data-scene=food]{--bg-1: #fee2e2;--bg-2: #fca5a5;--accent: #dc2626;--accent-shadow: #991b1b;--accent-deep: #7f1d1d;--card-border: #f87171;--card-shadow: #b91c1c}body[data-scene=colors]{--bg-1: #fae8ff;--bg-2: #f0abfc;--accent: #a21caf;--accent-shadow: #701a75;--accent-deep: #581c87;--card-border: #e879f9;--card-shadow: #86198f}body[data-scene=numbers]{--bg-1: #ede9fe;--bg-2: #c4b5fd;--accent: #7c3aed;--accent-shadow: #5b21b6;--accent-deep: #4c1d95;--card-border: #a78bfa;--card-shadow: #6d28d9}body[data-scene=family]{--bg-1: #fce7f3;--bg-2: #f9a8d4;--accent: #ec4899;--accent-shadow: #be185d;--accent-deep: #831843;--card-border: #f472b6;--card-shadow: #be185d}body[data-scene=body]{--bg-1: #ffedd5;--bg-2: #fdba74;--accent: #ea580c;--accent-shadow: #c2410c;--accent-deep: #7c2d12;--card-border: #fb923c;--card-shadow: #c2410c}body[data-scene=clothes]{--bg-1: #cffafe;--bg-2: #67e8f9;--accent: #0891b2;--accent-shadow: #155e75;--accent-deep: #164e63;--card-border: #22d3ee;--card-shadow: #0e7490}body[data-scene=vehicles]{--bg-1: #fee2e2;--bg-2: #fca5a5;--accent: #dc2626;--accent-shadow: #991b1b;--accent-deep: #7f1d1d;--card-border: #f87171;--card-shadow: #b91c1c}body[data-scene=wildlife]{--bg-1: #d1fae5;--bg-2: #6ee7b7;--accent: #059669;--accent-shadow: #065f46;--accent-deep: #064e3b;--card-border: #34d399;--card-shadow: #047857}body[data-scene=ocean]{--bg-1: #cffafe;--bg-2: #7dd3fc;--accent: #0284c7;--accent-shadow: #075985;--accent-deep: #0c4a6e;--card-border: #38bdf8;--card-shadow: #0369a1}body{font-family:Fredoka,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%);touch-action:manipulation;overscroll-behavior:none;color:var(--text);font-weight:500;transition:background .6s ease}#app{display:flex;flex-direction:column}.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;position:relative;animation:screen-in .4s cubic-bezier(.34,1.56,.64,1)}.screen.scroll{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:20px}@keyframes screen-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.title{font-size:clamp(40px,9vw,80px);font-weight:700;text-align:center;color:var(--accent-deep);text-shadow:3px 3px 0 rgba(255,255,255,.6);line-height:1;letter-spacing:-1px}.subtitle{font-size:clamp(18px,3vw,26px);font-weight:600;color:var(--accent-deep);text-align:center;opacity:.8}.big-button{font-family:inherit;font-size:clamp(26px,5vw,44px);font-weight:700;padding:24px 56px;border:none;border-radius:36px;background:var(--accent);color:#fff;box-shadow:0 8px 0 var(--accent-shadow),0 14px 28px #0000002e;cursor:pointer;transition:transform .08s,box-shadow .08s;min-width:240px;min-height:88px;letter-spacing:1px;text-shadow:1px 1px 0 rgba(0,0,0,.15)}.big-button:active{transform:translateY(4px);box-shadow:0 4px 0 var(--accent-shadow),0 6px 12px #00000026}.big-button.secondary{background:#10b981;box-shadow:0 8px #047857,0 14px 28px #0000002e}.big-button.secondary:active{box-shadow:0 4px #047857,0 6px 12px #00000026}.back-btn{background:#fff;border:none;border-radius:50%;width:56px;height:56px;font-size:28px;font-weight:700;color:var(--accent-deep);box-shadow:0 3px 0 var(--card-shadow);cursor:pointer}.back-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--card-shadow)}.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:600px;width:100%;padding:16px}@media (min-width: 720px){.scene-grid{grid-template-columns:repeat(3,1fr);max-width:820px}}@media (min-width: 1080px){.scene-grid{grid-template-columns:repeat(4,1fr);max-width:1040px}}.scene-card{font-family:inherit;aspect-ratio:1;border-radius:32px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(56px,11vw,110px);box-shadow:0 6px 0 var(--card-shadow),0 10px 20px #0000001f;cursor:pointer;transition:transform .08s,box-shadow .08s;border:4px solid var(--card-border);gap:6px;animation:card-idle 3s ease-in-out infinite;animation-delay:calc(var(--i, 0) * .15s)}@keyframes card-idle{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.scene-card:active{transform:translateY(3px);box-shadow:0 3px 0 var(--card-shadow),0 5px 10px #0000001a;animation:none}.scene-card.locked{background:#e5e7eb;border-color:#9ca3af;box-shadow:0 6px #6b7280;filter:grayscale(.6);opacity:.65;cursor:default;animation:none}.scene-card.locked:active{transform:none;box-shadow:0 6px #6b7280}.scene-card .label{font-size:clamp(14px,2.5vw,20px);color:var(--accent-deep);font-weight:700;letter-spacing:.5px}.game{width:100%;height:100%;display:flex;flex-direction:column;animation:screen-in .4s cubic-bezier(.34,1.56,.64,1)}.game-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#ffffff8c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid rgba(255,255,255,.4)}.stars-row{display:flex;gap:4px;font-size:28px;letter-spacing:2px}.prompt-area{display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 16px 8px;position:relative}.speaker-btn{font-family:inherit;width:110px;height:110px;border-radius:50%;border:none;background:var(--accent);font-size:56px;box-shadow:0 8px 0 var(--accent-shadow),0 14px 28px #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.speaker-btn:active{transform:translateY(4px);box-shadow:0 4px 0 var(--accent-shadow),0 6px 12px #00000026}.speaker-btn.pulse{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.mascot{display:inline-flex;align-items:center;justify-content:center;font-size:clamp(56px,12vw,100px);position:relative;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));animation:mascot-bob 2.6s ease-in-out infinite;transition:transform .2s;cursor:pointer}.mascot.large{font-size:clamp(120px,28vw,220px)}.mascot.talking{animation:mascot-talk .5s ease-in-out infinite}.mascot.happy{animation:mascot-happy .6s ease}.mascot.sad{animation:mascot-sad .4s ease}@keyframes mascot-bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}@keyframes mascot-talk{0%,to{transform:translateY(0) rotate(-5deg) scale(1)}50%{transform:translateY(-8px) rotate(5deg) scale(1.05)}}@keyframes mascot-happy{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-30px) scale(1.2) rotate(-15deg)}60%{transform:translateY(-15px) scale(1.1) rotate(15deg)}to{transform:translateY(0) scale(1) rotate(0)}}@keyframes mascot-sad{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-6px) rotate(-3deg)}75%{transform:translate(6px) rotate(3deg)}}.speech-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(0);background:#fff;color:var(--accent-deep);padding:8px 16px;border-radius:16px;font-size:18px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px #00000026;border:2px solid var(--card-border);pointer-events:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.speech-bubble.show{transform:translate(-50%) scale(1)}.speech-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.options-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px;align-content:center;max-height:100%}.option{font-family:inherit;aspect-ratio:1;background:var(--card);border:4px solid var(--card-border);border-radius:32px;display:flex;align-items:center;justify-content:center;font-size:clamp(56px,13vw,130px);box-shadow:0 6px 0 var(--card-shadow),0 10px 20px #0000001a;cursor:pointer;transition:transform .08s,box-shadow .08s,background-color .2s,border-color .2s;max-height:240px;animation:option-in .4s cubic-bezier(.34,1.56,.64,1) backwards}.option:nth-child(1){animation-delay:.05s}.option:nth-child(2){animation-delay:.12s}.option:nth-child(3){animation-delay:.19s}.option:nth-child(4){animation-delay:.26s}@keyframes option-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.option:active{transform:translateY(3px);box-shadow:0 3px 0 var(--card-shadow)}.option.correct{background:#86efac;border-color:#16a34a;box-shadow:0 6px #15803d;animation:bounce .6s ease}.option.wrong{background:#fecaca;border-color:#dc2626;box-shadow:0 6px #b91c1c;animation:shake .4s ease}.option.disabled{pointer-events:none}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-28px) rotate(-5deg)}60%{transform:translateY(-10px) rotate(5deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-12px)}75%{transform:translate(12px)}}.confetti-piece{position:fixed;top:-50px;font-size:28px;pointer-events:none;z-index:200;animation:confetti-fall 1.6s linear forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}.end-screen{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px}.end-screen .stars-big{font-size:clamp(48px,10vw,96px);letter-spacing:12px;animation:stars-pop .8s cubic-bezier(.34,1.56,.64,1)}@keyframes stars-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.end-screen .end-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}@media (orientation: landscape) and (max-height: 600px){.speaker-btn{width:84px;height:84px;font-size:42px}.mascot{font-size:clamp(50px,9vw,80px)}.prompt-area{padding:8px}.options-grid{gap:12px;padding:8px}}