body{margin:0;height:100vh;overflow:hidden;background:#d7eefc;color:#222;text-align:center;font-family:sans-serif;--scene-scale:1;transition:background 1.2s ease,color 1.2s ease}#scene{height:100vh;transform:scale(var(--scene-scale));transform-origin:top center;transition:transform .2s ease}body.night{background:#0b1330;color:#f3f0ff}#stars{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}body.night #stars{opacity:1}.star{position:absolute;color:#fff;font-size:1.6vh;animation:twinkle 2.4s ease-in-out infinite}@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}.sky{position:relative;height:8vh;transition:opacity 1.2s ease}body.night .sky{opacity:.5}.cloud{position:absolute;font-size:5vh;cursor:pointer;user-select:none}.c1.puff{animation:cloudDrift1 35s linear infinite,cloudPuff .5s}.c2.puff{animation:cloudDrift2 45s linear infinite,cloudPuff .5s}.c3.puff{animation:cloudDrift3 30s linear infinite,cloudPuff .5s}@keyframes cloudPuff{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}.c1{left:10%;animation:cloudDrift1 35s linear infinite}.c2{left:45%;animation:cloudDrift2 45s linear infinite}.c3{left:75%;animation:cloudDrift3 30s linear infinite}@keyframes cloudDrift1{0%{transform:translateX(0)}50%{transform:translateX(40px)}100%{transform:translateX(0)}}@keyframes cloudDrift2{0%{transform:translateX(0)}50%{transform:translateX(-50px)}100%{transform:translateX(0)}}@keyframes cloudDrift3{0%{transform:translateX(0)}50%{transform:translateX(60px)}100%{transform:translateX(0)}}#sun{position:fixed;top:10px;right:20px;font-size:16vh;animation:spinSun 30s linear infinite;cursor:pointer;user-select:none;transition:filter 1.2s ease}#sun:hover{filter:drop-shadow(0 0 20px gold)}body.night #sun{animation:spinSun 60s linear infinite;filter:drop-shadow(0 0 12px #cdd6ff)}#sun.pulse{animation:spinSun 30s linear infinite,sunPulse .5s}body.night #sun.pulse{animation:spinSun 60s linear infinite,sunPulse .5s}@keyframes sunPulse{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}@keyframes spinSun{from{transform:rotate(0)}to{transform:rotate(360deg)}}.mountains{font-size:8vh;line-height:1;margin-top:-1vh;transition:filter 1.2s ease}body.night .mountains{filter:brightness(.4) saturate(.6)}.mountain{display:inline-block;cursor:pointer;user-select:none;transform-origin:50% 100%}.mountain.tremor{animation:mountainTremor .6s}@keyframes mountainTremor{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-4px) rotate(-2deg)}30%{transform:translateX(4px) rotate(2deg)}45%{transform:translateX(-3px) rotate(-1deg)}60%{transform:translateX(3px) rotate(1deg)}75%{transform:translateX(-1px) rotate(0)}}.mountain-flower{display:inline-block;font-size:.6em}#celebration{position:fixed;top:10vh;left:50%;transform:translateX(-50%);z-index:1000;display:none;min-width:250px;padding:15px 25px;font-size:5vh;color:#ff4d6d;background:#fff6fa;border:6px solid #ff69b4;border-radius:30px;box-shadow:0 0 20px rgba(255,215,0,.8),0 10px 30px rgba(0,0,0,.2);pointer-events:none;transition:background 1.2s ease,color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}@keyframes bounceCelebration{0%{transform:translateX(-50%) scale(.5);opacity:0}60%{transform:translateX(-50%) scale(1.15);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}@keyframes rainbowGlow{0%{border-color:#ff69b4;box-shadow:0 0 20px rgba(255,105,180,.8),0 10px 30px rgba(0,0,0,.2)}25%{border-color:gold;box-shadow:0 0 20px rgba(255,215,0,.8),0 10px 30px rgba(0,0,0,.2)}50%{border-color:#4dd9ff;box-shadow:0 0 20px rgba(77,217,255,.8),0 10px 30px rgba(0,0,0,.2)}75%{border-color:#7cff6b;box-shadow:0 0 20px rgba(124,255,107,.8),0 10px 30px rgba(0,0,0,.2)}100%{border-color:#ff69b4;box-shadow:0 0 20px rgba(255,105,180,.8),0 10px 30px rgba(0,0,0,.2)}}#celebration.show{animation:bounceCelebration .5s,rainbowGlow 2s infinite}body.night #celebration{color:#ffd9ec;background:#1b1f3f;border-color:#b06bd6;box-shadow:0 0 20px rgba(176,107,214,.6),0 10px 30px rgba(0,0,0,.4)}body.night #celebration.show{animation:bounceCelebration .5s,rainbowGlowNight 2s infinite}@keyframes rainbowGlowNight{0%{border-color:#b06bd6;box-shadow:0 0 20px rgba(176,107,214,.6),0 10px 30px rgba(0,0,0,.4)}25%{border-color:#d6b66b;box-shadow:0 0 20px rgba(214,182,107,.6),0 10px 30px rgba(0,0,0,.4)}50%{border-color:#4dd9ff;box-shadow:0 0 20px rgba(77,217,255,.6),0 10px 30px rgba(0,0,0,.4)}75%{border-color:#6bd68f;box-shadow:0 0 20px rgba(107,214,143,.6),0 10px 30px rgba(0,0,0,.4)}100%{border-color:#b06bd6;box-shadow:0 0 20px rgba(176,107,214,.6),0 10px 30px rgba(0,0,0,.4)}}#game-area{display:flex;flex-direction:column;align-items:center}#simple-scene{display:none}body[data-mode=letters] #farm-scene,body[data-mode=numbers] #farm-scene{display:none}body[data-mode=letters] #simple-scene,body[data-mode=numbers] #simple-scene{display:block}body[data-mode=letters] #farm-decor,body[data-mode=numbers] #farm-decor{display:none}#animal{font-size:12vh;line-height:1;cursor:pointer;user-select:none;transition:transform .15s ease}#animal:hover{transform:scale(1.08)}#animal.poke{animation:animalPoke .4s}@keyframes animalPoke{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(1.1) rotate(6deg)}100%{transform:scale(1) rotate(0)}}#simple-emoji{font-size:12vh;line-height:1;cursor:pointer;user-select:none;transition:transform .15s ease}#simple-emoji:hover{transform:scale(1.08)}#simple-emoji.poke{animation:animalPoke .4s}#simple-emoji:empty{display:none}#counting-row{font-size:4vh;line-height:1.3;max-width:70vw;margin:0 auto}#counting-row:empty{display:none}.counting-animal{display:inline-block;margin:0 2px;cursor:pointer;user-select:none;transition:transform .15s ease}.counting-animal:hover{transform:scale(1.15)}.counting-animal.poke{animation:animalPoke .4s}#mode-switcher{position:fixed;top:10px;left:20px;z-index:500;display:flex;gap:10px}.mode-option{font-size:4vh;line-height:1;padding:4px 8px;border-radius:12px;cursor:pointer;user-select:none;background:rgba(255,255,255,.6);transition:background .2s ease,transform .15s ease}.mode-option:hover{transform:scale(1.1)}.mode-option.active{background:rgba(255,255,255,.95);box-shadow:0 0 0 3px #ff69b4}body.night .mode-option{background:rgba(20,20,40,.6)}body.night .mode-option.active{background:rgba(20,20,40,.95)}#word{font-size:4vh;line-height:1}#letter{font-size:13vh;line-height:1;color:#ff69b4;display:inline-block;cursor:pointer;user-select:none;transition:transform .15s ease}#letter:hover{transform:scale(1.08)}#letter.shake{animation:letterShake .4s}@keyframes letterShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-10px) rotate(-6deg)}40%{transform:translateX(8px) rotate(5deg)}60%{transform:translateX(-6px) rotate(-4deg)}80%{transform:translateX(4px) rotate(2deg)}}#letter.wobble{animation:letterWobble 1s ease-in-out}@keyframes letterWobble{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(7deg) scale(1.08)}45%{transform:rotate(-6deg) scale(1.05)}60%{transform:rotate(5deg) scale(1.03)}75%{transform:rotate(-3deg) scale(1.01)}}#butterflies{position:fixed;bottom:30vh;width:100%;pointer-events:none}.butterfly{position:absolute;font-size:8vh;pointer-events:auto;cursor:pointer;user-select:none}.b1.startle{animation:flutter1 8s ease-in-out infinite,butterflyStartle .5s}.b2.startle{animation:flutter2 10s ease-in-out infinite,butterflyStartle .5s}@keyframes butterflyStartle{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.4) translateY(-25px) rotate(15deg)}60%{transform:scale(1.2) translateY(-10px) rotate(-10deg)}100%{transform:scale(1) translateY(0)}}.b1{left:15%;animation:flutter1 8s ease-in-out infinite}.b2{left:75%;animation:flutter2 10s ease-in-out infinite}@keyframes flutter1{0%{transform:translate(0,0)}25%{transform:translate(20px,-20px)}50%{transform:translate(50px,10px)}75%{transform:translate(20px,-10px)}100%{transform:translate(0,0)}}@keyframes flutter2{0%{transform:translate(0,0)}25%{transform:translate(-30px,-15px)}50%{transform:translate(-60px,15px)}75%{transform:translate(-20px,-5px)}100%{transform:translate(0,0)}}#ground-scene{position:fixed;bottom:11vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;white-space:nowrap;line-height:1;transition:filter 1.2s ease}body.night #ground-scene{filter:brightness(.55) saturate(.7)}.flowers{font-size:4vh;cursor:pointer;user-select:none;display:inline-block}.flowers.sway{animation:flowerSway .5s}@keyframes flowerSway{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}#animals-on-farm{font-size:8vh}.farm{font-size:6vh}.farm-item{display:inline-block;cursor:pointer;user-select:none}.house.knock{animation:houseKnock .5s}@keyframes houseKnock{0%,100%{transform:scale(1)}20%{transform:scale(1.08)}40%{transform:scale(.96)}60%{transform:scale(1.05)}80%{transform:scale(.99)}}.tractor.rev{animation:tractorRev .5s}@keyframes tractorRev{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-3px) rotate(-3deg)}40%{transform:translateX(3px) rotate(3deg)}60%{transform:translateX(-2px) rotate(-2deg)}80%{transform:translateX(2px) rotate(2deg)}}.tree.rustle{animation:treeRustle .6s}@keyframes treeRustle{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-6deg) scale(1.03)}40%{transform:rotate(5deg) scale(1.05)}60%{transform:rotate(-4deg) scale(1.02)}80%{transform:rotate(2deg) scale(1)}}.farm-animal{display:inline-block;margin:0 6px;animation:bounceAnimal .4s;cursor:pointer;user-select:none}.farm-animal.poke{animation:animalPoke .4s}@keyframes bounceAnimal{0%{transform:translateY(30px)}100%{transform:translateY(0)}}#grass-line{position:fixed;left:0;bottom:8vh;width:100%;height:12px;background:linear-gradient(to bottom,#6bc85a 0,#5bbd4f 50%,#4aa83f 100%);transition:filter 1.2s ease}body.night #grass-line{filter:brightness(.5)}#grass-blades{position:fixed;left:0;bottom:calc(8vh + 10px);width:100%;height:18px;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none;transition:filter 1.2s ease}body.night #grass-blades{filter:brightness(.5)}.grass-blade{display:inline-block;width:3px;margin-left:-1px;border-radius:3px 3px 0 0;background:#5bbd4f;transform-origin:bottom center;pointer-events:auto;cursor:pointer}.grass-blade.sway{animation:bladeSway .5s}@keyframes bladeSway{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-6deg)}}#train-area{position:fixed;left:0;bottom:0;width:100%;transition:filter 1.2s ease}body.night #train-area{filter:brightness(.6)}#train{position:absolute;left:5vw;bottom:2.5vh;font-size:6vh;transition:transform 1.5s;cursor:pointer;user-select:none}#train.toot{animation:trainToot .4s}@keyframes trainToot{0%,100%{transform:scaleX(-1) translateY(0)}25%{transform:scaleX(-1) translateY(-10px)}50%{transform:scaleX(-1) translateY(0)}75%{transform:scaleX(-1) translateY(-6px)}}#engine{display:inline-block}.track{width:100%;height:8px;background:#555}#settings-button{position:fixed;bottom:14px;right:14px;z-index:600;font-size:3.5vh;line-height:1;padding:6px 10px;border-radius:12px;cursor:pointer;user-select:none;background:rgba(255,255,255,.6);transition:background .2s ease,transform .4s ease,bottom .2s ease}#settings-button:hover{transform:scale(1.1)}#settings-button.spin{animation:settingsSpin .6s}@keyframes settingsSpin{from{transform:rotate(0)}to{transform:rotate(180deg)}}body.night #settings-button{background:rgba(20,20,40,.6)}#settings-panel{position:fixed;bottom:60px;right:14px;z-index:600;display:none;flex-direction:column;gap:6px;min-width:200px;padding:14px 16px;border-radius:16px;font-size:2.2vh;text-align:left;background:rgba(255,255,255,.95);box-shadow:0 6px 20px rgba(0,0,0,.15);transition:bottom .2s ease}#settings-panel.open{display:flex}body.night #settings-panel{background:rgba(30,30,55,.95);color:#f3f0ff}#settings-panel label{font-weight:700}#voice-select{font-size:1.8vh;padding:6px 8px;border-radius:8px;border:1px solid #ccc;background:#fff;color:#222}body.night #voice-select{background:#1e1e37;color:#f3f0ff;border-color:#555}#touch-keyboard{display:none}body.show-touch-keyboard #touch-keyboard{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:4px;position:fixed;left:0;right:0;bottom:0;z-index:700;padding:6px 4px;padding-bottom:max(6px,env(safe-area-inset-bottom));background:rgba(255,255,255,.85);box-shadow:0 -4px 14px rgba(0,0,0,.12);transition:background 1.2s ease}body.show-touch-keyboard.night #touch-keyboard{background:rgba(20,20,40,.9)}#keyboard-toggle{position:fixed;bottom:14px;right:64px;z-index:600;font-size:3.5vh;line-height:1;padding:6px 10px;border-radius:12px;cursor:pointer;user-select:none;background:rgba(255,255,255,.6);transition:background .2s ease,transform .15s ease,bottom .2s ease}#keyboard-toggle:hover{transform:scale(1.1)}#keyboard-toggle.spin{animation:settingsSpin .6s}#keyboard-toggle.active{background:rgba(255,255,255,.95);box-shadow:0 0 0 3px #ff69b4}body.night #keyboard-toggle{background:rgba(20,20,40,.6)}body.night #keyboard-toggle.active{background:rgba(20,20,40,.95)}.touch-key{display:flex;align-items:center;justify-content:center;min-width:7vw;min-height:7vh;font-size:2.6vh;font-weight:700;border-radius:8px;background:rgba(255,255,255,.9);color:#222;cursor:pointer;user-select:none;transition:transform .1s ease}.touch-key.pressed,.touch-key:active{transform:scale(.9);background:#ff69b4;color:#fff}body.night .touch-key{background:rgba(40,40,70,.9);color:#f3f0ff}body.night .touch-key.pressed,body.night .touch-key:active{background:#b06bd6;color:#fff}.touch-key.wide{min-width:11vw}