:root{--bg:#141d33;--bg-soft:#1f2a46;--key:#2c3a5e;--key-press:#3a4c78;--ink:#f4f7ff;--accent:#4cc9f0;--ok:#4ecb63;--star:#ffd166;--advanced:#c77dff;--erase:#8b98bb;--radius:18px;--gap:clamp(8px, 2vw, 14px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;margin:0;font-family:"Baloo 2",Nunito,Avenir Next,system-ui,-apple-system,sans-serif;font-weight:700;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:none}.screen{height:100dvh;padding:max(var(--gap), env(safe-area-inset-top)) var(--gap) max(var(--gap), env(safe-area-inset-bottom));gap:var(--gap);flex-direction:column;display:flex}.screen--start{justify-content:center;align-items:center;gap:clamp(16px,5vh,40px);overflow-y:auto}.start__title{letter-spacing:.02em;color:var(--star);margin:0;font-size:clamp(2rem,9vw,3.5rem)}.start__levels{gap:var(--gap);flex-direction:column;width:min(520px,100%);display:flex}.start__heading{letter-spacing:.12em;text-transform:uppercase;color:var(--erase);margin:0;font-size:clamp(.95rem,3.6vw,1.15rem)}.level{background:var(--bg-soft);border-radius:var(--radius);text-align:left;border-bottom:6px solid #00000059;align-items:center;gap:clamp(12px,4vw,24px);padding:clamp(14px,3.5vh,26px) clamp(16px,5vw,32px);transition:transform .12s;display:flex}.level:active{transform:translateY(3px)scale(.99)}.level--1{box-shadow:inset 6px 0 0 var(--ok)}.level--2{box-shadow:inset 6px 0 0 var(--accent)}.level--3{box-shadow:inset 6px 0 0 var(--advanced)}.level--mokki{box-shadow:inset 6px 0 0 var(--star)}.level--perusaukeama{box-shadow:inset 6px 0 0 var(--accent)}.level--lisatehtavat{box-shadow:inset 6px 0 0 var(--advanced)}.level--kirja{box-shadow:inset 6px 0 0 var(--accent)}.chapter{gap:var(--gap);flex-direction:column;display:flex}.chapter__toggle{border:2px solid var(--key);border-radius:var(--radius);text-align:left;background:0 0;align-items:center;gap:clamp(10px,3vw,18px);width:100%;padding:clamp(10px,2vh,16px) clamp(12px,4vw,22px);display:flex}.chapter__toggle[aria-expanded=true]{background:var(--key);border-color:var(--key)}.chapter__number{aspect-ratio:1;background:var(--star);width:clamp(2rem,8vw,2.6rem);color:var(--bg);border-radius:50%;flex:none;place-items:center;font-size:clamp(1.1rem,4.5vw,1.4rem);display:grid}.chapter__text{flex-direction:column;flex:auto;min-width:0;display:flex}.chapter__title{font-size:clamp(1rem,4vw,1.3rem);line-height:1.2}.chapter__count{color:var(--erase);font-size:clamp(.85rem,3.2vw,1rem)}.chapter__chevron{color:var(--erase);flex:none;font-size:clamp(1.6rem,6vw,2.1rem);line-height:1;transition:transform .15s}.chapter__chevron--open{transform:rotate(90deg)}.chapter__pages{gap:var(--gap);flex-direction:column;padding-left:clamp(8px,3vw,18px);display:flex}.chapter__pages[hidden]{display:none}.level__emoji{font-size:clamp(2.2rem,9vw,3rem);line-height:1}.level__text{flex-direction:column;display:flex}.level__name{font-size:clamp(1.3rem,5.5vw,1.9rem)}.level__example{color:var(--erase);font-size:clamp(1rem,4vw,1.3rem)}.task__header{align-items:center;gap:var(--gap);display:flex}.home{background:var(--bg-soft);width:clamp(42px,11vw,54px);height:clamp(42px,11vw,54px);color:var(--erase);border-radius:50%;flex:none;font-size:clamp(1.3rem,5vw,1.7rem);line-height:1}.stars{flex:1;justify-content:center;gap:clamp(4px,1.5vw,10px);min-width:0;display:flex}.star{font-size:min(clamp(1.6rem, 7vw, 2.4rem), calc(56vw / var(--star-count,5)));color:#33405f;line-height:1;transition:transform .25s,color .25s}.star--filled{color:var(--star);text-shadow:0 0 14px #ffd1668c;transform:scale(1.15)}.task{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(14px,4vh,32px);min-height:0;display:flex}.task__prompt{text-align:center;text-wrap:balance;max-width:min(30ch,100%);color:var(--erase);margin:0;font-size:clamp(1.05rem,4.6vw,1.6rem);font-weight:600;line-height:1.35}.task__expression{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,2.5vw,18px);font-size:clamp(2.6rem,13vw,6rem);line-height:1;display:flex}.task__expression--3{gap:clamp(4px,1.8vw,14px);font-size:clamp(2.1rem,10.6vw,5rem)}.task__expression--3 .task__answer{min-width:clamp(56px,16vw,110px)}.task__expression--4{gap:clamp(3px,1.4vw,11px);font-size:clamp(1.7rem,8.6vw,4rem)}.task__expression--4 .task__answer{min-width:clamp(46px,13vw,90px)}.task__operator{color:var(--erase)}.task__answer{text-align:center;min-width:clamp(72px,22vw,150px);color:var(--accent);border-bottom:8px solid var(--key);border-radius:6px;padding:.1em .15em}.task--correct{color:var(--ok);animation:.45s pop}.task--correct .task__answer,.task--correct .task__operator{color:var(--ok);border-bottom-color:var(--ok)}.task--wrong{animation:.45s shake}.sequence{justify-content:center;align-items:center;gap:clamp(5px,2vw,12px);font-size:clamp(1.4rem,7.4vw,3.2rem);line-height:1;display:flex}.sequence__cell{background:var(--bg-soft);border-radius:12px;place-items:center;min-width:2.4em;min-height:1em;padding:.32em .18em;display:inline-grid}.sequence__cell--filled{color:var(--accent)}.sequence__cell--answer{background:var(--key);color:var(--accent);box-shadow:inset 0 -8px 0 var(--accent)}.sequence__more{color:var(--erase)}.task--correct .sequence__cell--answer{color:var(--ok);box-shadow:inset 0 -8px 0 var(--ok)}.chart{grid-template-columns:repeat(var(--chart-columns), 1fr);gap:clamp(3px,1vw,6px);font-size:clamp(1.3rem,6.4vw,2.6rem);line-height:1;display:grid}.chart__cell,.chart__gap{aspect-ratio:1;border-radius:10px;place-items:center;width:clamp(52px,17vw,96px);display:grid}.chart__cell{background:var(--bg-soft)}.chart__gap{background:0 0}.chart__cell--answer{background:var(--key);color:var(--accent);box-shadow:inset 0 -8px 0 var(--accent)}.chart__cell--filled{color:var(--accent)}.task--correct .chart__cell--answer{color:var(--ok);box-shadow:inset 0 -8px 0 var(--ok)}.squares{flex-direction:column;align-items:center;gap:clamp(14px,4vh,30px);display:flex}.squares__grid{background:var(--erase);border-radius:6px;grid-template-columns:repeat(10,1fr);gap:2px;padding:3px;display:grid}.squares__cell{aspect-ratio:1;background:var(--bg);width:clamp(20px,6.4vw,34px)}.squares__cell--filled{background:var(--ok)}.squares__answer{min-width:2.6em;min-height:1em;color:var(--accent);background:var(--key);box-shadow:inset 0 -8px 0 var(--accent);border-radius:14px;place-items:center;padding:.28em .2em;font-size:clamp(2rem,10vw,3.4rem);line-height:1;display:inline-grid}.task--correct .squares__answer{color:var(--ok);box-shadow:inset 0 -8px 0 var(--ok)}.paper{flex-direction:column;align-items:center;gap:clamp(10px,3vh,22px);display:flex}.paper__mark{font-size:clamp(3rem,16vw,6rem);line-height:1}.paper__note{text-align:center;margin:0;font-size:clamp(1.3rem,6vw,2.2rem)}.paper__done{width:min(520px,100%);margin:0 auto;padding:0 clamp(12px,4vw,24px)}.money{flex-direction:column;align-items:center;gap:clamp(16px,4vh,34px);display:flex}.money__wallet{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,2.2vw,14px);max-width:min(460px,100%);display:flex}.money__piece{color:#1b2338;place-items:center;font-size:clamp(.95rem,3.8vw,1.35rem);display:grid;box-shadow:inset 0 0 0 2px #0000002e}.money__piece--note{border-radius:6px;min-width:clamp(58px,18vw,82px);padding:clamp(10px,3vw,16px) clamp(6px,2vw,10px)}.money__piece--coin{aspect-ratio:1;border-radius:50%;width:clamp(46px,14vw,62px)}.money__piece--1{background:#cfd4da}.money__piece--2{background:#e0c47a}.money__piece--5{background:#b9bec6}.money__piece--10{background:#e39aa2}.money__piece--20{background:#8fb6de}.money__piece--50{background:#edb173}.task__unit{color:var(--erase)}.birds{flex-direction:column;align-items:center;gap:clamp(16px,4vh,34px);display:flex}.birds__wire{border-bottom:4px solid var(--erase);flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(2px,1.2vw,8px);max-width:min(460px,100%);padding-bottom:clamp(2px,.5vh,4px);display:flex}.birds__bird{font-size:clamp(1.8rem,8.6vw,3.2rem);line-height:.78}.numpad{gap:var(--gap);flex:none;grid-template-columns:repeat(3,1fr);width:min(520px,100%);margin:0 auto;display:grid}.key{background:var(--key);border-radius:var(--radius);border-bottom:6px solid #00000059;min-height:clamp(52px,10.5dvh,92px);font-size:clamp(1.6rem,7vw,2.6rem);transition:transform .1s,background .1s}.key:active:not(:disabled){background:var(--key-press);border-bottom-width:3px;transform:translateY(3px)}.key:disabled{opacity:.45}.key--erase{color:var(--erase)}.key--ok{background:var(--ok);color:#10321a}.key--ok:active:not(:disabled){background:#6ee085}.screen--prize{justify-content:space-between;align-items:center}.screen--prize .home{align-self:flex-start}.prize{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.prize__image{object-fit:contain;border-radius:var(--radius);width:min(82vw,460px);height:auto;max-height:100%;animation:.5s cubic-bezier(.2,1.4,.5,1) prize-in}.prize__fallback{font-size:clamp(6rem,40vw,14rem);animation:.5s cubic-bezier(.2,1.4,.5,1) prize-in}.prize__progress{color:var(--erase);flex:none;margin:0;font-size:clamp(.95rem,4vw,1.2rem)}.continue{background:var(--ok);color:#10321a;border-radius:var(--radius);border-bottom:6px solid #00000059;flex:none;width:min(520px,100%);padding:clamp(16px,3.5vh,26px);font-size:clamp(1.4rem,6vw,2rem)}.continue:active{transform:translateY(3px)}.confetti{pointer-events:none;z-index:2;position:fixed;inset:0;overflow:hidden}.confetti__piece{border-radius:3px;width:12px;height:18px;animation-name:fall;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;top:-12vh}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-14px)}40%{transform:translate(12px)}60%{transform:translate(-8px)}80%{transform:translate(5px)}}@keyframes prize-in{0%{opacity:0;transform:scale(.5)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.9;transform:translateY(115dvh)rotate(540deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}