*{box-sizing:border-box}
:root{font-family:"Trebuchet MS",Verdana,sans-serif;color:#23445b;background:#d6f4ff;font-synthesis:none}
html{min-height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,#c9f1ff 0%,#e9faff 54%,#f5fff4 100%);position:relative;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:#256aa1}
button:focus-visible,a:focus-visible{outline:3px solid #174c95;outline-offset:4px}
.sky-decoration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sky-sun{position:absolute;top:75px;right:12%;width:83px;aspect-ratio:1;border-radius:50%;background:#ffdf70;box-shadow:0 0 0 12px #ffedaa70}
.sky-cloud{position:absolute;display:block;background:white;border-radius:50px;width:120px;height:34px;opacity:.75;filter:drop-shadow(0 5px 0 #a9e7fa66)}
.sky-cloud:before,.sky-cloud:after{content:"";position:absolute;background:white;border-radius:50%}
.sky-cloud:before{width:56px;height:56px;left:22px;bottom:7px}.sky-cloud:after{width:46px;height:46px;left:62px;bottom:5px}
.cloud-a{top:125px;left:4%}.cloud-b{top:235px;right:2%;transform:scale(.8)}
.app{position:relative;z-index:1;width:min(100% - 28px,980px);margin:0 auto;display:flex;min-height:100vh;min-height:100dvh;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 4px 13px}
.brand{display:flex;align-items:center;gap:9px;color:#29628b;text-decoration:none;font-weight:900;font-size:clamp(14px,2.8vw,20px)}
.brand-sparkle{background:#fff;border:3px solid #a5dff5;display:grid;place-items:center;color:#faad3c;border-radius:16px;width:36px;height:36px;font-size:23px;flex:none}
.icon-btn{background:white;border:2px solid #b9e5fa;border-radius:16px;width:46px;height:42px;font-size:22px;box-shadow:0 4px 0 #b0e2f6;flex:none}
.main-panel{background:#fff;border:4px solid #fff;border-radius:32px;box-shadow:0 10px 0 #9bdaf1,0 18px 35px #5eadd02b;flex:1;min-height:420px;overflow:hidden;position:relative;display:flex;flex-direction:column;padding:clamp(16px,3.5vw,34px);margin-bottom:18px}
.footer{text-align:center;padding:12px 0 15px;font-size:13px;color:#518099}
.footer a{color:inherit}
.eyebrow{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#fff2c9;color:#805a16;padding:7px 15px;font-size:14px;font-weight:900;letter-spacing:.01em}
h1,h2,p{margin-top:0}h1{font-size:clamp(29px,5.5vw,54px);line-height:1.08;letter-spacing:-.045em;margin:18px 0 12px;color:#285a87}h2{font-size:clamp(24px,4vw,36px);line-height:1.14;letter-spacing:-.035em;color:#285a87;margin:0 0 10px}
.lead{font-size:clamp(16px,2.4vw,19px);color:#5b7890;line-height:1.5;max-width:620px;margin:0 auto 26px}
.home-head{text-align:center}.home-stars{color:#f3b73e;letter-spacing:9px;font-size:23px;margin:5px auto 0}
.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:auto;margin-bottom:auto;padding:5px 0 20px}
.level-card{min-width:0;min-height:228px;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:#315577;background:#f3fbff;border:3px solid #cdeafa;border-radius:25px;padding:20px 10px 18px;box-shadow:0 6px 0 #d1eaf5;transition:transform .15s ease,box-shadow .15s ease}
.level-card:nth-child(2){background:#fffae9;border-color:#ffdf9d;box-shadow:0 6px 0 #f6e4b9}.level-card:nth-child(3){background:#fff1f3;border-color:#facbd3;box-shadow:0 6px 0 #f3d9dd}
.level-card:hover{transform:translateY(-3px)}.level-card:active{transform:translateY(3px);box-shadow:none}
.level-icon{display:grid;place-items:center;font-size:40px;background:white;width:74px;height:74px;border-radius:24px;box-shadow:inset 0 0 0 2px #c9e7f5;margin-bottom:13px}
.level-card strong{font-size:24px;line-height:1.15;color:#315b7c}.level-card small{font-size:14px;line-height:1.4;color:#647f94;margin-top:7px}.level-arrow{margin-top:auto;padding-top:12px;font-size:16px;font-weight:900;color:#218cbe}
.panel-back{align-self:flex-start;min-height:36px;border:none;background:#eaf5fb;color:#3c7492;border-radius:14px;padding:8px 13px;font-size:14px;font-weight:bold}
.intro{text-align:center;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 0}
.intro-art{display:flex;justify-content:center;align-items:center;gap:17px;margin:9px 0 13px;padding:15px;background:#f2fbff;border-radius:28px;border:3px dashed #c8e9f7;max-width:min(100%,570px);width:100%;min-height:150px}
.intro-art img{max-width:35%;height:100px;object-fit:contain}.intro-art .big-math{font-size:clamp(43px,8vw,70px);font-weight:900;color:#3195c0}
.primary{background:#ffbb49;color:#573d11;border:3px solid #edab39;box-shadow:0 6px 0 #dc9428;border-radius:20px;min-height:59px;padding:12px 29px;font-size:20px;font-weight:900;transition:transform .12s ease,box-shadow .12s ease}
.primary:hover{background:#ffd06e}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #dc9428}
.secondary{background:#ebf5fb;color:#367399;border:2px solid #c8e5f5;border-radius:18px;padding:11px 23px;min-height:48px;font-size:17px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.intro-actions,.end-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:13px}
.topline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;margin-bottom:11px}
.round-badge{font-weight:900;color:#33698b;font-size:15px;background:#e8f7ff;padding:8px 14px;border-radius:999px}
.score-badge{font-weight:900;color:#98621a;background:#fff4d8;font-size:15px;border-radius:999px;padding:8px 14px}
.progress{width:100%;height:13px;border-radius:100px;background:#eaf4fa;overflow:hidden;margin-bottom:19px}.progress>span{display:block;height:100%;border-radius:100px;background:#7acb79;transition:width .25s ease}
.game-top{text-align:center}.game-top h2{font-size:clamp(25px,4.4vw,38px);margin:0 0 6px}.game-top p{margin:0 0 14px;color:#6d899c;font-size:15px}
.equation{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.8vw,20px);border:3px dashed #d1eaf7;background:#f3fbff;border-radius:26px;padding:clamp(12px,2.8vw,21px);min-height:152px;margin:0 auto 19px;max-width:820px;width:100%;}
.animal-group{display:flex;align-items:center;justify-content:center;width:min(41%,380px);height:clamp(80px,15vh,143px)}.animal-group img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.operation{flex:none;font-size:clamp(30px,5vw,53px);line-height:1;color:#91bf27;font-weight:900}
.number{min-width:0;flex:1;text-align:center;font-size:clamp(55px,10vw,96px);font-weight:900;line-height:1.08;letter-spacing:-.06em;color:#f0a52e}.number.second{color:#43a8c9}
.equation .operation.eq{color:#6ebc6c}.question-mark{flex:1;text-align:center;color:#a98bd4;font-size:clamp(55px,10vw,96px);font-weight:900}
.answer-prompt{text-align:center;color:#577a93;font-weight:900;font-size:18px;margin:0 0 13px}
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:750px;width:100%;margin:0 auto 12px}
.answer{min-width:0;display:grid;place-items:center;min-height:clamp(74px,12vh,106px);border:3px solid #c5e6f3;background:#f0faff;color:#2f84a8;border-radius:22px;box-shadow:0 6px 0 #badce9;font-size:clamp(32px,6.5vw,54px);font-weight:900;transition:transform .12s,background .12s,box-shadow .12s}
.answer:nth-child(2){background:#fff6df;color:#c3882e;border-color:#ffdf9e;box-shadow:0 6px 0 #efdeb8}.answer:nth-child(3){background:#f7eefa;color:#9d6db7;border-color:#e8d3ef;box-shadow:0 6px 0 #e0cce8}
.answer:not(:disabled):hover{transform:translateY(-3px)}.answer:active{transform:translateY(4px);box-shadow:none}
.answer:disabled{cursor:default;opacity:.58}.answer.good,.answer.good:disabled{opacity:1;background:#dbf9e0!important;border-color:#71c789!important;color:#267940!important;box-shadow:0 5px 0 #9ad5a5!important}
.answer.bad,.answer.bad:disabled{opacity:1;background:#ffebeb!important;border-color:#ed989e!important;color:#bf4652!important;box-shadow:0 5px 0 #edb5b9!important}
.feedback-slot{min-height:85px;display:flex;justify-content:center;align-items:center;text-align:center;margin-top:auto}
.feedback{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:#ecfaed;border:2px solid #b5e6bc;border-radius:20px;padding:12px 17px;width:min(100%,700px)}.feedback.is-bad{background:#fff5e8;border-color:#f7d7b3}
.feedback-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;flex:1;min-width:160px}.feedback-text strong{color:#358650;font-size:19px}.is-bad .feedback-text strong{color:#b16a30}.feedback-text span{font-size:14px;color:#607b8a}
.feedback .primary{font-size:16px;min-height:48px;border-radius:15px;padding:9px 17px;box-shadow:0 4px 0 #dc9428}
.end{text-align:center;display:flex;flex:1;align-items:center;flex-direction:column;justify-content:center;padding:10px 0}
.end-medal{display:grid;place-items:center;background:#fff3cb;border:3px solid #ffe0a1;width:92px;height:92px;border-radius:28px;font-size:49px;margin:2px 0 15px}.end h1{margin:10px 0 12px}.end-message{color:#627e90;line-height:1.45;font-size:17px;max-width:550px}
.end-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,600px);margin:11px 0 16px}.stat{background:#edf9ff;border:2px solid #d4eaf7;padding:15px 5px;border-radius:19px;display:flex;flex-direction:column;gap:5px}.stat:nth-child(2){background:#fff7e7;border-color:#f6e3bc}.stat:nth-child(3){background:#eef9ed;border-color:#c9e8cb}.stat strong{font-size:clamp(21px,4vw,34px);color:#3d7d99}.stat span{font-size:13px;color:#607c91;font-weight:900}
.record{background:#fff6de;color:#9c7131;padding:10px 15px;border-radius:15px;font-weight:900;font-size:15px}
@media (max-width:650px){.app{width:min(100% - 18px,620px)}.header{padding:10px 2px}.main-panel{border-radius:25px;padding:17px 13px;min-height:0}.level-grid{grid-template-columns:1fr;gap:10px;padding:0 0 12px}.level-card{min-height:0;display:grid;grid-template-columns:62px 1fr auto;grid-template-rows:auto auto;align-items:center;text-align:left;gap:0 12px;padding:12px 14px;border-radius:19px}.level-icon{width:56px;height:56px;font-size:29px;border-radius:17px;grid-row:span 2;margin:0}.level-card strong{font-size:21px}.level-card small{font-size:13px;margin:0}.level-arrow{grid-row:span 2;padding:0;font-size:19px}.home-head h1{margin:10px 0}.home-head .lead{margin-bottom:18px}.sky-sun{width:58px;top:70px;right:1%}.cloud-a{left:-15%;top:170px}.cloud-b{right:-18%;top:270px}.footer{font-size:12px}}
@media (max-width:460px){.app{width:calc(100% - 12px)}.main-panel{padding:13px 10px;border-radius:23px;margin-bottom:10px}.header{padding:8px 5px 10px}.brand-sparkle{width:31px;height:31px;font-size:18px}.icon-btn{width:40px;height:38px}.intro-art{min-height:105px;padding:10px}.intro-art img{height:74px}.topline{margin-bottom:8px}.round-badge,.score-badge{font-size:13px;padding:7px 10px}.progress{margin-bottom:10px;height:10px}.game-top p{margin-bottom:10px}.equation{padding:10px 6px;gap:3px;min-height:109px;margin-bottom:13px}.animal-group{height:clamp(70px,12vh,120px);width:43%}.answers{gap:8px}.answer{border-radius:17px;min-height:74px;box-shadow:0 4px 0 #badce9}.answer:nth-child(2){box-shadow:0 4px 0 #efdeb8}.answer:nth-child(3){box-shadow:0 4px 0 #e0cce8}.answer-prompt{font-size:16px;margin-bottom:10px}.feedback-slot{min-height:77px}.feedback{padding:9px;gap:9px}.feedback-text strong{font-size:17px}.feedback-text span{font-size:13px}.feedback .primary{min-height:43px;font-size:14px;padding:8px 11px}.end-stats{gap:6px}.stat{padding:10px 4px}.stat span{font-size:11px}.footer{padding:7px 0}}
@media (max-width:380px){.feedback-text{min-width:115px}.feedback{gap:6px}.operation{font-size:30px}.number,.question-mark{font-size:50px}.answer{min-height:66px}}
@media (orientation:portrait) and (max-width:520px){.equation.animal-equation{flex-wrap:wrap;max-width:430px;gap:3px 8px;padding:8px}.animal-equation .animal-group{width:100%;height:clamp(65px,12vh,107px)}.animal-equation .operation{width:100%;text-align:center;font-size:27px;line-height:.9}.animal-equation .operation.eq{display:none}.animal-equation .question-mark{display:none}.animal-equation{min-height:0}}
@media (orientation:landscape) and (max-height:620px){.header{padding:5px 2px}.main-panel{padding:10px 16px;border-radius:24px;margin-bottom:8px}.footer{padding:6px;font-size:11px}.home-head h1{margin:3px 0}.home-head .lead{margin-bottom:11px}.home-stars{display:none}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.level-card{min-height:0;display:flex;text-align:center;padding:10px 5px}.level-icon{width:45px;height:45px;font-size:25px;margin:0 0 5px}.level-card strong{font-size:20px}.level-card small{font-size:12px}.level-arrow{padding-top:3px}.intro{padding:1px;gap:3px}.intro .eyebrow{display:none}.intro h1{margin:4px 0}.intro .lead{margin-bottom:0;font-size:15px}.intro-art{min-height:55px;margin:1px 0;padding:3px}.intro-art img{height:55px}.intro-art .big-math{font-size:40px}.intro-actions{margin:4px 0}.intro-actions .primary{min-height:45px;font-size:16px;padding:5px 19px}.game-top h2{font-size:25px}.game-top p{margin-bottom:5px;font-size:13px}.progress{height:8px;margin-bottom:5px}.topline{margin:0 0 5px}.equation{min-height:0;margin-bottom:8px;padding:5px 8px;max-height:108px}.animal-group{height:87px}.number,.question-mark{font-size:56px}.answer-prompt{font-size:15px;margin:0 0 5px}.answer{min-height:55px;font-size:34px}.answers{gap:9px;margin-bottom:6px}.feedback-slot{min-height:58px}.feedback{padding:6px}.feedback-text strong{font-size:16px}.feedback-text span{font-size:12px}.feedback .primary{min-height:39px;font-size:14px;padding:6px 12px}.end-medal{width:55px;height:55px;font-size:30px;margin:0}.end h1{font-size:29px;margin:5px}.end-message{font-size:14px;margin-bottom:3px}.end-stats{margin:3px 0 7px}.stat{padding:6px}.record{padding:6px}.end-actions{margin:7px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}