:root{--ink:#17342c;--deep:#102e26;--green:#1d6b4d;--lime:#b9dd65;--cream:#fffaf0;--orange:#f39a45;--red:#e9634b}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 16%,#dbe9b5 0 7%,transparent 7.2%),linear-gradient(135deg,#eef4d6,#d7e7bc);color:var(--ink);font-family:Nunito,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
button{font:inherit}.shell{width:min(1180px,calc(100% - 28px));min-height:calc(100vh - 32px);margin:16px auto;background:var(--cream);border-radius:28px;box-shadow:0 24px 70px #24432b2a;overflow:hidden;position:relative}.topbar{height:82px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce3c9}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);line-height:.85}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:50% 50% 45% 55%;background:var(--green);color:#fff;font:800 25px "Baloo 2"}.brand b{font:800 19px "Baloo 2";display:block}.brand small{font-weight:800;letter-spacing:5px;font-size:9px;color:#6e806a}.icon-btn{border:1px solid #ced9bd;background:#f4f7e8;border-radius:50%;width:44px;height:44px;cursor:pointer;transition:.2s}.icon-btn:hover{transform:rotate(-8deg) scale(1.06)}
.screen{min-height:calc(100vh - 114px)}.hidden{display:none!important}.start-screen{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:5% 7% 7%;gap:4%}.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:900;color:var(--green);text-transform:uppercase}.hero-copy h1{font:800 clamp(46px,6.6vw,85px)/.89 "Baloo 2";letter-spacing:-3px;margin:18px 0 26px}.hero-copy h1 em{font-style:normal;color:var(--green)}.hero-copy p{font-size:18px;line-height:1.65;color:#5c6f66;max-width:590px}.stats{display:flex;gap:12px;margin:28px 0}.stats span{background:#edf2db;border-radius:13px;padding:10px 15px;color:#63735f;font-size:13px}.stats b{color:var(--ink);font-size:17px}.primary-btn{border:0;background:var(--deep);color:white;padding:16px 21px;border-radius:13px;font-weight:900;cursor:pointer;box-shadow:0 8px 0 #092019;transition:.15s}.primary-btn span{margin-left:16px}.primary-btn:hover{transform:translateY(-2px)}.primary-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #092019}
.hero-art{height:460px;position:relative;border-radius:48% 48% 20px 20px;background:linear-gradient(#bfe1d3 0 55%,#92bd66 55%);overflow:hidden;border:8px solid #e6eccf}.sun{position:absolute;width:100px;height:100px;border-radius:50%;background:#f7c968;right:30px;top:30px}.cloud{position:absolute;font-size:70px;color:white;opacity:.8;left:25px;top:40px}.hill{position:absolute;border-radius:50% 50% 0 0}.hill-back{width:430px;height:230px;background:#458465;right:-100px;bottom:55px}.hill-front{width:420px;height:175px;background:#245a40;left:-80px;bottom:0}.animal{position:absolute;z-index:3;filter:drop-shadow(0 12px 6px #17342c33)}.tiger{font-size:140px;right:65px;bottom:62px;transform:scaleX(-1)}.bird{font-size:70px;right:65px;top:65px;animation:float 2.5s ease-in-out infinite}.bush{position:absolute;z-index:4;bottom:-2px;font-size:75px;letter-spacing:-25px}.sign{position:absolute;z-index:4;left:55px;bottom:110px;background:#f5b75d;border:6px solid #81562d;border-radius:6px;padding:8px 25px;transform:rotate(-7deg);font:900 18px/1 "Baloo 2";text-align:center}.sign:after{content:"";position:absolute;width:10px;height:110px;background:#81562d;left:50%;top:100%}
.leaf{position:fixed;font-size:55px;z-index:-1}.leaf-a{top:8%;left:1%;transform:rotate(30deg)}.leaf-b{right:1%;bottom:8%}.game-screen{padding:32px 8% 60px;background:linear-gradient(180deg,#fffaf0,#f5f6e7)}.game-head{display:flex;justify-content:space-between;align-items:center}.game-head h2{font:800 35px "Baloo 2";margin:4px 0}.score-box{text-align:right;background:#e9f1d2;border-radius:16px;padding:10px 18px}.score-box small{display:block;font-size:9px;letter-spacing:2px}.score-box strong{font:800 26px "Baloo 2";color:var(--green)}.progress-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin-bottom:8px}.progress{height:10px;background:#e4e6d4;border-radius:99px;overflow:hidden}.progress div{height:100%;width:2.5%;background:linear-gradient(90deg,var(--green),var(--lime));border-radius:99px;transition:.4s}
.question-card{max-width:850px;margin:32px auto 0;background:#fff;border:1px solid #dfe4d2;border-radius:24px;padding:35px 6%;box-shadow:0 15px 45px #183d2820;text-align:center;position:relative}.question-icon{width:72px;height:72px;display:grid;place-items:center;margin:-4px auto 14px;background:#e9f0d8;border-radius:50%;font-size:35px}.instruction{color:#7a897e;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;font-weight:900}.question-card h3{font:800 clamp(20px,3vw,29px)/1.35 "Baloo 2";margin:12px auto 25px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{border:2px solid #e0e5d5;background:#fafbf5;color:var(--ink);border-radius:14px;padding:15px;text-align:left;font-weight:800;cursor:pointer;transition:.18s}.answer:hover:not(:disabled){border-color:var(--green);transform:translateY(-2px);background:#f1f6e5}.answer:disabled{cursor:default}.answer.correct{border-color:#36a269;background:#e2f5e9;color:#17613c}.answer.wrong{border-color:var(--red);background:#ffebe7;color:#a83e2f;animation:shake .3s}.answer-key{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8ecd9;margin-right:10px}.feedback{height:30px;margin-top:18px;font-weight:900}.feedback.good{color:#248454}.feedback.bad{color:#c94f3c}.next-btn{margin-top:8px}
.result-screen{text-align:center;padding:45px 20px 65px;background:radial-gradient(circle at 50% 30%,#fbefaa,#fffaf0 45%)}.trophy{font-size:100px;animation:bounce 1.1s infinite}.result-screen h2{font:800 clamp(37px,6vw,64px) "Baloo 2";margin:7px}.result-screen>p{color:#617068;font-size:17px}.final-score{margin:25px auto;width:250px;background:#173d31;color:white;border-radius:25px;padding:17px;box-shadow:0 10px 0 #0b271f}.final-score small{display:block;letter-spacing:2px;font-size:10px}.final-score strong{font:800 55px "Baloo 2";color:#d6ef7d}.final-score span{color:#9db1a8}.result-grid{display:flex;justify-content:center;gap:13px;margin:32px auto}.result-grid div{width:145px;background:white;border:1px solid #e0e3d0;border-radius:17px;padding:14px}.result-grid span,.result-grid b,.result-grid small{display:block}.result-grid span{font-size:25px}.result-grid b{font:800 25px "Baloo 2"}.result-grid small{color:#78867d}#fireworks{position:fixed;inset:0;pointer-events:none;z-index:20}
@keyframes float{50%{transform:translateY(-14px) rotate(5deg)}}@keyframes bounce{50%{transform:translateY(-12px) rotate(4deg)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:760px){.shell{width:100%;margin:0;border-radius:0;min-height:100vh}.start-screen{grid-template-columns:1fr;padding:45px 7%}.hero-art{height:330px;order:-1}.tiger{font-size:100px}.hero-copy h1{font-size:49px}.stats{flex-wrap:wrap}.answers{grid-template-columns:1fr}.game-screen{padding:25px 4%}.question-card{padding:25px 5%}.result-grid div{width:30%;padding:10px 4px}.result-grid{gap:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}