*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,sans-serif;background:linear-gradient(180deg,#87ceeb 0%,#b8e0f0 40%,#7ec850 40%,#5a9e38 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;user-select:none;transition:background 1s}
body.fight-mode{background:linear-gradient(180deg,#2c3e50 0%,#34495e 35%,#1a472a 35%,#0d2818 100%)}
header{text-align:center;padding:1rem;color:#2d5016;transition:color 1s}
.back{margin:0 0 .5rem;font-size:.95rem}
.back a{color:#2d5016;font-weight:600;text-decoration:none}
.back a:hover{text-decoration:underline}
body.fight-mode .back a{color:#ecf0f1}
body.fight-mode header{color:#ecf0f1}
header h1{font-size:clamp(1.5rem,4vw,2.2rem)}
header p{font-size:1rem;margin-top:.25rem;max-width:520px;margin-left:auto;margin-right:auto}
.phase-label{display:inline-block;margin-top:.5rem;padding:.25rem .75rem;background:rgba(255,255,255,.75);border-radius:999px;font-size:.85rem;font-weight:600}
body.fight-mode .phase-label{background:rgba(255,255,255,.15);color:#fff}
.game-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;padding:1rem;max-width:920px;width:100%}
.math-panel{background:#fff;border-radius:20px;padding:1.5rem 2rem;box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:280px;flex:1;max-width:380px;text-align:center}
.score-row{display:flex;justify-content:space-between;font-size:.95rem;color:#555;margin-bottom:.5rem}
.hp-bar-wrap{height:auto;background:transparent;border-radius:0;overflow:visible;margin-bottom:.5rem;display:none}
.hp-bar-wrap.show,.gardener-hp-wrap.show{display:block}
.gardener-hp-wrap{display:none;margin-bottom:.75rem}
.hp-label{display:block;font-size:.75rem;font-weight:600;color:#555;margin-bottom:.2rem;text-align:left}
body.fight-mode .hp-label{color:#ccc}
.hp-bar-track{height:14px;background:#ddd;border-radius:8px;overflow:hidden}
.hp-bar{height:100%;width:100%;border-radius:8px;transition:width .4s}
.hp-bar-tree{background:linear-gradient(90deg,#e74c3c,#c0392b)}
.hp-bar-gardener{background:linear-gradient(90deg,#66bb6a,#43a047)}
.gardener-hp-wrap.low .hp-bar-gardener{background:linear-gradient(90deg,#ffa726,#e65100)}
.gardener-hp-wrap.hurt .hp-bar-track{animation:hp-shake .35s ease}
@keyframes hp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fight-timer-wrap{display:none;text-align:center;margin-bottom:1rem;padding:.5rem;background:#fff3f3;border-radius:12px;border:2px solid #f5c6cb}
.fight-timer-wrap.show{display:block}
.fight-timer-label{display:block;font-size:.8rem;color:#888;margin-bottom:.15rem}
.fight-timer{font-size:2rem;font-weight:bold;color:#333;font-variant-numeric:tabular-nums;line-height:1}
.fight-timer.urgent{color:#e74c3c;animation:timer-pulse .6s ease infinite}
@keyframes timer-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.question{font-size:clamp(2.5rem,8vw,3.5rem);font-weight:bold;color:#333;margin:1rem 0}
.answer-row{display:flex;gap:.5rem;justify-content:center;align-items:center}
#answer-input{font-size:2rem;width:120px;text-align:center;border:3px solid #4a90d9;border-radius:12px;padding:.4rem;outline:none}
body.fight-mode #answer-input{border-color:#e74c3c}
.btn{font-size:1.1rem;padding:.6rem 1.4rem;border:none;border-radius:12px;cursor:pointer;font-weight:600}
.btn-go{background:#4a90d9;color:#fff;box-shadow:0 4px 0 #2563b0}
body.fight-mode .btn-go{background:#e74c3c;box-shadow:0 4px 0 #922b21}
.btn-play{background:#27ae60;color:#fff;box-shadow:0 4px 0 #1e8449;font-size:1.1rem;padding:.7rem 1.5rem}
.feedback{min-height:2rem;margin-top:1rem;font-size:1.1rem;font-weight:600}
.feedback.correct{color:#2d8a2d}
.feedback.wrong{color:#c0392b}
.progress-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:.75rem;max-width:100%}
body.fight-mode .progress-dots{gap:4px}
.dot{width:14px;height:14px;border-radius:50%;background:#ddd;transition:background .3s}
body.fight-mode .dot{width:10px;height:10px}
.dot.filled{background:#4a90d9}
body.fight-mode .dot.filled{background:#e74c3c}
.scene-panel{flex:1;min-width:300px;max-width:480px;position:relative;height:420px}
.scene-panel.fight-3d .scene.fight > .boss-tree,
.scene-panel.fight-3d .scene.fight > .gardener,
.scene-panel.fight-3d .scene.fight > .apple-projectiles,
.scene-panel.fight-3d .scene.fight > .apple-apocalypse,
.scene-panel.fight-3d .scene.fight > .explosion-flash{display:none}
#fight-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:20px;display:none;z-index:10}
.scene-panel.fight-3d #fight-canvas{display:block}
.scene-panel.fight-3d .scene.fight{background:transparent}
.scene{position:relative;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,#6b4226 55%,#4a2e18 100%);border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:background 1s}
.scene.fight{background:linear-gradient(180deg,#1a252f 0%,#2c3e50 30%,#1a472a 55%,#0d2818 100%)}
.ground{position:absolute;bottom:0;width:100%;height:55px;background:#5a3820;z-index:1;transition:background .8s,height .8s}
.scene.fight .ground{background:#1a3d1a;height:70px}
.grass{position:absolute;bottom:55px;width:100%;height:12px;background:#4a7a28;z-index:1;transition:background .8s,bottom .8s}
.scene.fight .grass{background:#2d5a2d;bottom:70px}
.well{position:absolute;bottom:60px;left:30px;width:100px;height:90px;z-index:2;transition:opacity .5s}
.scene.fight .well{opacity:.2}
.well-stone{position:absolute;bottom:0;width:100%;height:70px;background:#888;border-radius:8px 8px 0 0;border:3px solid #666}
.well-hole{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:60px;height:40px;background:#1a3a5c;border-radius:50%;border:2px solid #444}
.well-water{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:50px;height:20px;background:#4a90d9;border-radius:50%;opacity:.8}
.pump{position:absolute;bottom:130px;left:55px;width:50px;height:80px;z-index:2;transition:opacity .5s}
.scene.fight .pump{opacity:.2}
.pump-handle{position:absolute;top:0;left:50%;transform:translateX(-50%);width:8px;height:45px;background:#555;border-radius:4px;transform-origin:bottom center}
.pump-handle::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:24px;height:8px;background:#444;border-radius:4px}
.pump-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:35px;background:#777;border-radius:4px}
.pump.spinning .pump-handle{animation:pump-stroke .35s ease-in-out 3}
@keyframes pump-stroke{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-35deg)}}
.water-stream{position:absolute;bottom:165px;left:78px;width:6px;height:0;background:linear-gradient(180deg,#6ec6ff,#4a90d9);border-radius:3px;opacity:0;transform:rotate(25deg);transform-origin:top center;z-index:2}
.water-stream.flowing{opacity:.9;animation:stream-flow 1.05s ease-in-out}
@keyframes stream-flow{0%{height:0}20%,80%{height:80px}100%{height:0;opacity:0}}
.bucket-area{position:absolute;bottom:55px;right:50px;width:90px;height:110px;z-index:2;transition:opacity .5s}
.scene.fight .bucket-area{opacity:0}
.bucket{position:absolute;bottom:0;width:90px;height:75px;background:#c0392b;clip-path:polygon(10% 0%,90% 0%,100% 100%,0% 100%)}
.bucket-rim{position:absolute;top:0;width:100%;height:10px;background:#922b21;border-radius:4px 4px 0 0}
.bucket-water{position:absolute;bottom:0;left:5%;width:90%;height:0;background:linear-gradient(180deg,#6ec6ff,#2980b9);transition:height .6s;border-radius:0 0 4px 4px}
.bucket-label{position:absolute;top:-28px;width:100%;text-align:center;font-size:.85rem;color:#fff;text-shadow:1px 1px 2px #000;font-weight:600}
.bucket-area.watering{animation:pour-bucket 1.2s ease-in-out}
@keyframes pour-bucket{0%{transform:rotate(0);transform-origin:bottom center}30%,70%{transform:rotate(-35deg) translate(-20px,-10px)}100%{transform:rotate(0)}}
.pour-stream{position:absolute;top:200px;right:120px;width:8px;height:0;background:linear-gradient(180deg,#6ec6ff,#4a90d9);border-radius:4px;opacity:0;transform:rotate(75deg);transform-origin:top center;z-index:3}
.pour-stream.pouring{opacity:.85;animation:pour-flow 1s ease-in-out .2s}
@keyframes pour-flow{0%{height:0}30%,70%{height:70px}100%{height:0;opacity:0}}

/* Gardener character */
.gardener{position:absolute;bottom:58px;left:28px;width:70px;height:95px;z-index:5;transition:opacity .5s}
.scene.fight .gardener{opacity:1}
.scene:not(.fight) .gardener{bottom:52px;left:115px}
.gardener-hat{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38px;height:10px;background:#d4a84b;border-radius:50%;box-shadow:0 -2px 0 #b8860b}
.gardener-hat::after{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:22px;height:16px;background:#e8c170;border-radius:50% 50% 40% 40%}
.gardener-head{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:28px;height:26px;background:#ffcc80;border-radius:50%;z-index:2}
.gardener-eye{position:absolute;top:10px;width:4px;height:4px;background:#333;border-radius:50%}
.gardener-eye.eye-l{left:7px}
.gardener-eye.eye-r{right:7px}
.gardener-smile{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:10px;height:5px;border:2px solid #333;border-top:none;border-radius:0 0 10px 10px}
.gardener-body{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:26px;height:22px;background:#558b2f;border-radius:6px 6px 4px 4px;z-index:1}
.gardener-overalls{position:absolute;top:48px;left:50%;transform:translateX(-50%);width:30px;height:28px;background:#1565c0;border-radius:4px 4px 8px 8px;z-index:2}
.gardener-overalls::before,.gardener-overalls::after{content:'';position:absolute;top:0;width:6px;height:14px;background:#1565c0;border-radius:2px}
.gardener-overalls::before{left:4px;transform:rotate(-25deg)}
.gardener-overalls::after{right:4px;transform:rotate(25deg)}
.gardener-leg{position:absolute;bottom:0;width:10px;height:22px;background:#5d4037;border-radius:0 0 4px 4px}
.gardener-leg.leg-l{left:18px}
.gardener-leg.leg-r{right:18px}
.gardener-arm{position:absolute;top:38px;right:-8px;width:50px;height:12px;transform-origin:left center;z-index:3}
.gardener-rake{position:absolute;right:0;top:-2px;width:8px;height:52px;background:#8d6e63;border-radius:2px;transform-origin:bottom center}
.gardener-rake::after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:28px;height:8px;background:#78909c;border-radius:2px}
.rake-plus{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:20px;height:20px;background:#4a90d9;color:#fff;font-size:.75rem;font-weight:bold;line-height:20px;text-align:center;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.gardener-can{position:absolute;bottom:8px;left:-6px;width:16px;height:14px;background:#c0392b;border-radius:2px 2px 4px 4px;z-index:2}
.gardener-can::before{content:'';position:absolute;top:-5px;left:3px;width:10px;height:6px;border:2px solid #922b21;border-bottom:none;border-radius:4px 4px 0 0}
.gardener.pumping .gardener-arm{animation:gardener-pump .35s ease-in-out 3}
@keyframes gardener-pump{0%,100%{transform:rotate(0)}50%{transform:rotate(-25deg)}}
.gardener.watering .gardener-arm{animation:gardener-pour 1.2s ease-in-out}
@keyframes gardener-pour{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-50deg) translate(8px,-6px)}}
.gardener.swinging .gardener-arm{animation:gardener-swing .45s ease}
@keyframes gardener-swing{0%{transform:rotate(0)}40%{transform:rotate(-65deg)}100%{transform:rotate(0)}}
.gardener.bonked{animation:gardener-bonk .35s ease}
.gardener.hurt{animation:gardener-hurt .4s ease}
@keyframes gardener-hurt{0%,100%{filter:none}50%{filter:brightness(1.2) sepia(.3)}}
@keyframes gardener-bonk{0%,100%{transform:translateX(0)}50%{transform:translateX(6px) rotate(3deg)}}

.plant-area{position:absolute;bottom:62px;right:100px;width:140px;height:210px;z-index:4;display:flex;align-items:flex-end;justify-content:center}
.plant{position:relative;transform-origin:bottom center}
.plant.growing{animation:plant-pop .5s ease}
@keyframes plant-pop{50%{transform:scale(1.12)}}
.plant-speech{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#fff;border-radius:10px;padding:4px 8px;font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:5}
.sprout,.seedling,.bush,.tree{display:none}
.plant[data-stage="0"] .sprout,.plant[data-stage="1"] .seedling,.plant[data-stage="2"] .bush{display:block}
.plant[data-stage="3"] .tree,.plant[data-stage="4"] .tree,.plant[data-stage="5"] .tree{display:block}
.sprout .stem{width:4px;height:18px;background:#3d8b37;margin:0 auto;border-radius:2px}
.sprout .leaf{width:14px;height:8px;background:#5cb85c;border-radius:50% 50% 50% 0;position:absolute;top:2px}
.sprout .leaf-l{left:calc(50% - 16px);transform:rotate(-30deg)}
.sprout .leaf-r{left:calc(50% + 2px);transform:rotate(30deg) scaleX(-1)}
.seedling .stem{width:6px;height:45px;background:#3d8b37;margin:0 auto;border-radius:3px}
.seedling .leaf-pair{position:absolute;width:22px;height:12px;background:#5cb85c;border-radius:50%}
.seedling .lp1{top:8px;left:calc(50% - 24px);transform:rotate(-20deg)}
.seedling .lp2{top:8px;left:calc(50% + 2px);transform:rotate(20deg)}
.seedling .lp3{top:22px;left:calc(50% - 26px);transform:rotate(-35deg);width:18px}
.seedling .lp4{top:22px;left:calc(50% + 4px);transform:rotate(35deg);width:18px}
.bush .stem{width:10px;height:55px;background:#2d6a2d;margin:0 auto;border-radius:4px}
.bush .foliage{width:70px;height:50px;background:#4caf50;border-radius:50% 50% 40% 40%;margin:-8px auto 0;position:relative}
.bush .foliage::before,.bush .foliage::after{content:'';position:absolute;background:#66bb6a;border-radius:50%}
.bush .foliage::before{top:-12px;left:8px;width:30px;height:30px}
.bush .foliage::after{top:-10px;right:8px;width:28px;height:28px}
.tree .trunk{width:22px;height:70px;background:#6d4c2a;margin:0 auto;border-radius:4px}
.tree .canopy{width:90px;height:65px;background:#388e3c;border-radius:50%;margin:-10px auto 0;position:relative}
.tree .canopy::before,.tree .canopy::after{content:'';position:absolute;background:#43a047;border-radius:50%}
.tree .canopy::before{top:-18px;left:10px;width:40px;height:40px}
.tree .canopy::after{top:-15px;right:10px;width:38px;height:38px}
.plant[data-stage="4"] .tree .trunk{height:90px;width:26px}
.plant[data-stage="4"] .tree .canopy{width:110px;height:80px}
.plant[data-stage="5"] .tree .trunk{height:110px;width:30px}
.plant[data-stage="5"] .tree .canopy{width:130px;height:95px}
.apple{position:absolute;width:14px;height:14px;background:radial-gradient(circle at 35% 30%,#ff6b6b,#c0392b);border-radius:50%;box-shadow:inset -2px -2px 0 rgba(0,0,0,.15)}
.apple::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:2px;height:5px;background:#5d4037;border-radius:1px}
.apple::after{content:'';position:absolute;top:-3px;right:2px;width:8px;height:5px;background:#43a047;border-radius:50% 50% 0 0;transform:rotate(25deg)}
.plant[data-stage="0"] .apple,.plant[data-stage="1"] .apple,.plant[data-stage="2"] .apple{display:none}
.tree .apple-a{top:18px;left:12px}
.tree .apple-b{top:8px;right:14px}
.tree .apple-c{bottom:12px;left:50%;transform:translateX(-50%)}
.plant[data-stage="3"] .apple{width:11px;height:11px}
.plant[data-stage="4"] .apple{width:13px;height:13px}
.boss-tree .canopy .apple{width:16px;height:16px}
.boss-tree .apple-a{top:28px;left:18px}
.boss-tree .apple-b{top:12px;left:55px}
.boss-tree .apple-c{top:18px;right:22px}
.boss-tree .apple-d{bottom:22px;left:28px}
.boss-tree .apple-e{bottom:18px;right:30px}
.boss-tree.throwing{animation:tree-throw .35s ease}
@keyframes tree-throw{0%,100%{transform:translateX(-50%) rotate(0)}40%{transform:translateX(calc(-50% + 8px)) rotate(6deg)}}
.apple-projectiles{position:absolute;inset:0;pointer-events:none;z-index:9;overflow:visible}
.apple-thrown{position:absolute;width:18px;height:18px;background:radial-gradient(circle at 35% 30%,#ff6b6b,#c0392b);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.3);opacity:0}
.apple-thrown::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:2px;height:6px;background:#5d4037}
.apple-thrown.flying{animation:apple-fly .55s ease-in forwards}
@keyframes apple-fly{0%{top:115px;left:calc(50% + 30px);opacity:1;transform:rotate(0) scale(1)}100%{top:295px;left:75px;opacity:1;transform:rotate(540deg) scale(.9)}}
.vines{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;transition:opacity .5s}
.vines.active{opacity:1}
.vine{position:absolute;background:#1b5e20;border-radius:4px}
.vine1{bottom:70px;left:0;width:100%;height:8px;transform:scaleX(0);transform-origin:left;animation:vine-h 1.5s ease forwards}
.vine2{bottom:70px;right:0;width:70%;height:8px;transform:scaleX(0);transform-origin:right;animation:vine-h 1.5s .3s ease forwards}
.vine3{bottom:70px;left:40%;width:8px;height:0;animation:vine-v 1.2s .5s ease forwards}
.vine4{bottom:70px;left:18%;width:8px;height:0;animation:vine-v 1s .7s ease forwards}
.vine5{bottom:70px;right:22%;width:8px;height:0;animation:vine-v 1.1s .6s ease forwards}
.vine6{top:0;left:28%;width:8px;height:0;animation:vine-v 1.4s .8s ease forwards}
.vine7{top:0;right:18%;width:8px;height:0;animation:vine-v 1.3s .9s ease forwards}
@keyframes vine-h{to{transform:scaleX(1)}}
@keyframes vine-v{to{height:200px}}
.takeover-flash{position:absolute;inset:0;background:#1b5e20;opacity:0;z-index:7;pointer-events:none}
.takeover-flash.flash{animation:flash-green .6s ease}
@keyframes flash-green{0%,100%{opacity:0}50%{opacity:.45}}
.boss-tree{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);z-index:4;opacity:0;pointer-events:none;transition:opacity .5s}
.scene.fight .boss-tree{opacity:1}
.scene.fight .plant-area{opacity:0}
.boss-tree .trunk{width:42px;height:150px;background:#4e342e;margin:0 auto;border-radius:6px}
.boss-tree .canopy{width:170px;height:115px;background:#2e7d32;border-radius:50%;margin:-15px auto 0;position:relative;box-shadow:0 0 30px rgba(27,94,32,.6)}
.boss-tree .face{position:absolute;top:42px;left:50%;transform:translateX(-50%);font-size:1.6rem}
.boss-tree.hit{animation:tree-shake .4s ease}
@keyframes tree-shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 10px))}75%{transform:translateX(calc(-50% + 10px))}}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .4s}
.overlay.show{opacity:1;pointer-events:auto}
.overlay-card{background:#fff;border-radius:24px;padding:2rem 2.5rem;text-align:center;max-width:360px;animation:pop-in .4s ease}
@keyframes pop-in{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.overlay-card h2{font-size:1.8rem;color:#27ae60;margin-bottom:.5rem}
.overlay-card h2.defeat{color:#e74c3c}
.overlay-card p{color:#555;margin-bottom:1.2rem;line-height:1.5}
.apple-apocalypse{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .3s}
.apple-apocalypse.active{opacity:1}
.apple-flood{position:absolute;background:radial-gradient(circle at 35% 30%,#ff6b6b,#c0392b);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:apple-flood-in 1s ease-in forwards;opacity:0}
@keyframes apple-flood-in{0%{transform:scale(0) translateY(-40px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
.explosion-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:21;pointer-events:none}
.explosion-flash.boom{animation:explode .9s ease forwards}
@keyframes explode{0%{opacity:0;background:#fff}25%{opacity:1;background:#ffeb3b}45%{opacity:1;background:#ff5722}70%{opacity:.85;background:#ff1744}100%{opacity:.6;background:#b71c1c}}
.scene.apocalypse{animation:scene-shake .5s ease infinite}
.scene.apocalypse .boss-tree{animation:tree-rampage .6s ease infinite}
@keyframes scene-shake{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}}
@keyframes tree-rampage{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}
.scene.apocalypse .gardener{opacity:.3}
.overlay-card .btn-retry{background:#e74c3c;box-shadow:0 4px 0 #922b21}