:root{font-family:Trebuchet MS,Segoe UI,Arial,sans-serif;color:#20351f;background:#ebffd9;--leaf-dark: #24572a;--leaf: #3d9a45;--leaf-soft: #dff7c8;--sun: #ffd45a;--sky: #8ed8ff;--orange: #ff914d;--card: rgba(255, 255, 255, .88);--shadow: rgba(44, 85, 42, .18)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{border:0;font:inherit}.app{min-height:100vh;padding:18px;background:radial-gradient(circle at 15% 12%,rgba(255,212,90,.42),transparent 22rem),radial-gradient(circle at 88% 10%,rgba(142,216,255,.5),transparent 26rem),linear-gradient(180deg,#bdefff,#e9ffd3 42%,#c9f4a6)}.screen{width:min(1120px,100%);min-height:calc(100vh - 36px);margin:0 auto;display:grid;align-content:center;justify-items:center;gap:18px}.jungle-hero,.learn-card,.quiz-card,.celebration-card,.top-hud,.feedback{border:4px solid rgba(255,255,255,.85);border-radius:28px;background:var(--card);box-shadow:0 20px 36px var(--shadow)}.jungle-hero{position:relative;width:min(1040px,100%);overflow:hidden;display:grid;gap:18px;padding:24px;text-align:center}.jungle-hero:before,.celebration-card:before{content:"";position:absolute;inset:auto -8% -52px;height:120px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#5dbb52,#2f7f35);opacity:.95}.animal-parade{position:relative;z-index:1;display:flex;align-items:end;justify-content:center;flex-wrap:wrap;gap:6px;min-height:190px}.animal-parade img{width:clamp(76px,11vw,136px);max-height:178px;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(34,61,30,.22))}.welcome-copy,.celebration-card>h1,.celebration-card>p,.celebration-card>.reward-stars,.celebration-card>button{position:relative;z-index:1}.eyebrow,.round-label{margin:0 0 8px;color:#2f7335;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:900;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:10px;color:#17391c;font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;letter-spacing:0}h2{margin:8px 0 16px;color:#17391c;font-size:clamp(1.85rem,5vw,3.2rem);line-height:1.12;text-align:center}.welcome-copy p:not(.eyebrow),.learn-copy p,.celebration-card p{margin-bottom:18px;font-size:clamp(1.15rem,3vw,1.45rem);font-weight:800;line-height:1.4}.primary-button,.secondary-button,.answer-button,.animal-option,.speaker-button{cursor:pointer;touch-action:manipulation}.primary-button,.secondary-button{min-height:70px;padding:16px 28px;border-radius:999px;color:#fff;font-size:clamp(1.18rem,3vw,1.7rem);font-weight:900;box-shadow:0 14px 22px #37662c33}.primary-button{background:linear-gradient(135deg,#ff914d,#2f9c46)}.primary-button.compact,.secondary-button{min-height:60px;font-size:clamp(1rem,2.5vw,1.3rem)}.secondary-button{color:#17391c;background:linear-gradient(135deg,#fff7c4,#bdf7b5)}.primary-button:active,.secondary-button:active,.answer-button:active,.animal-option:active,.speaker-button:active{transform:translateY(2px) scale(.99)}.primary-button:focus-visible,.secondary-button:focus-visible,.answer-button:focus-visible,.animal-option:focus-visible,.speaker-button:focus-visible,.animal-dots button:focus-visible{outline:5px solid #17391c;outline-offset:4px}.top-hud{width:min(920px,100%);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px}.top-hud div:first-child{display:flex;align-items:center;gap:10px}.top-hud span,.music-chip{color:#2f7335;font-size:clamp(1rem,2.6vw,1.2rem);font-weight:900}.top-hud strong{min-width:82px;padding:8px 12px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ffbd35,#ff7a45);font-size:clamp(1.2rem,3vw,1.55rem);text-align:center}.music-chip{padding:10px 14px;border-radius:999px;background:#e5f8ff}.learn-card{width:min(920px,100%);display:grid;grid-template-columns:minmax(240px,.9fr) minmax(280px,1.1fr);gap:18px;padding:22px;align-items:center}.animal-stage{display:grid;place-items:center;min-height:350px;border-radius:24px;background:linear-gradient(180deg,#8ed8ff61,#e3ffd0bf),linear-gradient(135deg,#eefbff,#f4ffe5)}.animal-stage img{width:min(100%,330px);max-height:340px;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(43,78,34,.2))}.learn-copy{min-width:0}.animal-name-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.animal-name-row h1{margin:0;font-size:clamp(2.7rem,8vw,5.4rem)}.speaker-button{flex:0 0 auto;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#e8f8ff,#fff3ad);box-shadow:0 10px 18px #345a2d29;font-size:1.8rem}.learn-copy strong{display:block;margin-bottom:20px;color:#265c2b;font-size:clamp(1.25rem,3vw,1.65rem);line-height:1.3}.learn-actions{display:flex;flex-wrap:wrap;gap:12px}.animal-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.animal-dots button{width:18px;height:18px;border-radius:50%;background:#17391c47;cursor:pointer}.animal-dots button.active{background:#ff914d;transform:scale(1.2)}.quiz-screen{align-content:start;padding-top:8px}.quiz-card{width:min(920px,100%);display:grid;justify-items:center;padding:20px}.quiz-card.shake{animation:shake .42s ease}.quiz-image-wrap{display:grid;place-items:center;width:min(100%,390px);min-height:230px;border-radius:24px;background:linear-gradient(180deg,#f1ffdc,#e7f8ff)}.quiz-image-wrap img{width:min(82%,270px);max-height:250px;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(47,83,38,.18))}.spelling-box{min-width:min(100%,360px);margin-bottom:16px;padding:14px 18px;border:4px dashed #ff914d;border-radius:20px;color:#17391c;background:#fffbe1;font-size:clamp(2rem,7vw,3.8rem);font-weight:900;letter-spacing:.08em;text-align:center}.text-options,.image-options{width:100%;display:grid;gap:14px}.text-options{grid-template-columns:repeat(3,minmax(0,1fr))}.answer-button{min-height:126px;padding:18px 14px;border:5px solid white;border-radius:26px;color:#17391c;background:linear-gradient(180deg,#fff,#fff0ce);box-shadow:0 12px 22px #2c552a1f;font-size:clamp(1.5rem,4.5vw,2.35rem);font-weight:900}.answer-button:nth-child(2){background:linear-gradient(180deg,#fff,#e3f8ff)}.answer-button:nth-child(3){background:linear-gradient(180deg,#fff,#e5ffd8)}.answer-button:disabled,.animal-option:disabled{cursor:default}.image-options{grid-template-columns:repeat(3,minmax(0,1fr))}.animal-option{display:grid;justify-items:center;align-items:end;min-height:240px;padding:14px;border:5px solid white;border-radius:26px;color:#17391c;background:linear-gradient(180deg,#fff,#e9ffd8);box-shadow:0 12px 22px #2c552a1f}.animal-option img{width:min(100%,180px);max-height:170px;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(47,83,38,.16))}.animal-option span{margin-top:8px;font-size:clamp(1.15rem,3vw,1.55rem);font-weight:900}.feedback{position:relative;width:min(720px,100%);min-height:72px;display:grid;place-items:center;padding:14px 18px;color:#24572a;font-size:clamp(1.4rem,4vw,2rem);font-weight:900;text-align:center}.feedback.wrong{color:#9d3227;background:#ffeee6eb}.feedback.correct{color:#23602b;background:#edffe0f0}.star-burst{position:absolute;inset:auto auto 42px;font-size:4.5rem;animation:star-burst .85s ease both}.celebration-card{position:relative;width:min(980px,100%);overflow:hidden;display:grid;justify-items:center;gap:12px;padding:24px;text-align:center}.celebration-card .animal-parade{min-height:170px}.celebration-card h1{max-width:760px;font-size:clamp(2rem,6vw,4rem)}.reward-stars{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:620px}.reward-stars span{font-size:clamp(1.8rem,6vw,3rem);animation:bounce-star .9s ease both}@keyframes star-burst{0%{opacity:0;transform:translateY(16px) scale(.4) rotate(-16deg)}45%{opacity:1;transform:translateY(-18px) scale(1.16) rotate(8deg)}to{opacity:0;transform:translateY(-56px) scale(.82) rotate(24deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-9px)}50%{transform:translate(7px)}75%{transform:translate(-4px)}}@keyframes bounce-star{0%{transform:translateY(10px) scale(.65)}55%{transform:translateY(-8px) scale(1.12)}to{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:no-preference){.animal-parade img,.animal-stage img,.quiz-image-wrap img,.animal-option img{animation:floaty 4.8s ease-in-out infinite}.animal-parade img:nth-child(2n),.animal-option:nth-child(2n) img{animation-delay:-1.3s}.primary-button,.secondary-button,.answer-button,.animal-option,.speaker-button{transition:transform .16s ease,box-shadow .16s ease}.answer-button:hover,.animal-option:hover{transform:translateY(-4px)}@keyframes floaty{0%,to{translate:0 0}50%{translate:0 -8px}}}@media(max-width:820px){.app{padding:12px}.screen{min-height:calc(100vh - 24px)}.jungle-hero,.learn-card,.quiz-card,.celebration-card{border-radius:22px;padding:16px}.learn-card{grid-template-columns:1fr}.animal-stage{min-height:280px}.animal-stage img{max-height:270px}.learn-copy{text-align:center}.animal-name-row,.learn-actions{justify-content:center}.text-options,.image-options{grid-template-columns:1fr}.answer-button{min-height:92px}.animal-option{grid-template-columns:150px 1fr;align-items:center;justify-items:center;min-height:150px;text-align:left}.animal-option img{max-height:130px}}@media(max-width:520px){h1{font-size:2.3rem}h2{font-size:1.8rem}.animal-parade{min-height:150px}.animal-parade img{width:clamp(62px,22vw,100px);max-height:128px}.top-hud{align-items:stretch;flex-direction:column;text-align:center}.top-hud div:first-child{justify-content:center}.animal-stage{min-height:220px}.animal-stage img,.quiz-image-wrap img{max-height:210px}.animal-option{grid-template-columns:110px 1fr;min-height:124px;padding:10px}.animal-option img{max-height:104px}.spelling-box{font-size:1.8rem;letter-spacing:.04em}}