:root{--bg:#0d2b26;--bg-soft:#16413a;--key:#1e5349;--key-press:#276a5c;--ink:#f0fbf6;--accent:#4ade80;--ok:#6ee7b7;--star:#ffd166;--muted:#8fb8ab;--confetti-1:#ffd166;--confetti-2:#4ade80;--confetti-3:#6ee7b7;--confetti-4:#a7f3d0;--confetti-5:#fbbf24;--radius:18px;--gap:clamp(8px, 2vw, 14px);--top-gap:clamp(12px, 3.5vw, 20px)}*{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:calc(env(safe-area-inset-top,0px) + var(--top-gap)) var(--gap) max(var(--gap), env(safe-area-inset-bottom));gap:var(--gap);flex-direction:column;display:flex}.screen--start{align-items:center;gap:clamp(16px,5vh,40px);overflow-y:auto}.start__title{letter-spacing:.02em;color:var(--star);margin:auto 0 0;font-size:clamp(2rem,9vw,3.5rem)}.start__levels{gap:var(--gap);flex-direction:column;width:min(520px,100%);display:flex}.part{flex-direction:column;gap:6px;display:flex}.level{align-items:center;gap:var(--gap);border-radius:var(--radius);background:var(--bg-soft);border-left:6px solid var(--accent);text-align:left;width:100%;padding:clamp(12px,3.5vw,18px);transition:transform .12s,background .12s;display:flex}.level:active{background:var(--key);transform:scale(.985)}.level--aika{border-left-color:var(--star)}.level--yleinen{border-left-color:var(--ok)}.level--done{opacity:.72}.level__emoji{font-size:clamp(1.8rem,8vw,2.6rem);line-height:1}.level__text{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.level__name{font-size:clamp(1.1rem,4.5vw,1.5rem)}.level__example{color:var(--muted);font-size:clamp(.75rem,3vw,.9rem);font-weight:600}.level__meter{background:#ffffff1f;border-radius:3px;height:6px;margin-top:4px;overflow:hidden}.level__meter-fill{background:var(--accent);border-radius:3px;height:100%;display:block}.level__tick{color:var(--ok);font-size:clamp(1.2rem,5vw,1.6rem)}.part__more{justify-content:flex-end;display:flex}.restart{color:var(--muted);background:0 0;border-radius:999px;padding:6px 14px;font-size:clamp(.75rem,3vw,.85rem);font-weight:600;text-decoration:underline}.switches{justify-content:center;gap:var(--gap);flex-wrap:wrap;margin:0 0 auto;display:flex}.mute{background:var(--bg-soft);color:var(--muted);border-radius:999px;padding:8px 16px;font-size:clamp(.8rem,3vw,.95rem);font-weight:600}.switch__value{color:var(--ink)}.task__header{align-items:center;gap:var(--gap);display:flex}.home{background:var(--bg-soft);width:clamp(40px,11vw,52px);height:clamp(40px,11vw,52px);color:var(--muted);border-radius:50%;flex:none;font-size:clamp(1.2rem,5vw,1.5rem);line-height:1}.home:active{background:var(--key)}.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,4)));color:#23524a;line-height:1;transition:transform .25s,color .25s}.star--filled{color:var(--star);text-shadow:0 0 14px #ffd1668c;transform:scale(1.15)}.section{flex-direction:column;gap:5px;width:min(520px,100%);margin:0 auto;display:flex}.section__line{justify-content:space-between;gap:var(--gap);color:var(--muted);font-size:clamp(.72rem,2.8vw,.85rem);font-weight:600;display:flex}.section__title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.section__count{flex:none}.section__meter{background:#ffffff1a;border-radius:2px;height:4px;display:block;overflow:hidden}.section__meter-fill{background:var(--muted);border-radius:2px;height:100%;transition:width .3s;display:block}.valinta{flex-direction:column;flex:1;justify-content:center;gap:clamp(16px,5vh,36px);width:min(520px,100%);min-height:0;margin:0 auto;display:flex}.valinta__question{justify-content:center;align-items:center;gap:var(--gap);text-align:center;text-wrap:balance;margin:0;font-size:clamp(1.15rem,5.5vw,1.7rem);line-height:1.25;display:flex}.valinta__text{min-width:0}.speak{background:var(--bg-soft);border-radius:50%;flex:none;width:clamp(36px,10vw,46px);height:clamp(36px,10vw,46px);font-size:clamp(1rem,4.5vw,1.25rem);line-height:1}.speak:active{background:var(--key)}.valinta__options{gap:var(--gap);flex-direction:column;display:flex}.choice{border-radius:var(--radius);background:var(--key);padding:clamp(16px,5vw,24px);font-size:clamp(1.1rem,5vw,1.5rem);transition:transform .12s,background .12s}.choice:active{background:var(--key-press);transform:scale(.985)}.choice--wrong{animation:.45s shake}.choice--right{background:var(--accent);color:#08221d;animation:.45s pop}.valinta--done .choice:not(.choice--right){opacity:.4}.screen--prize{justify-content:center;align-items:center;gap:clamp(16px,5vh,36px)}.screen--prize .home{top:calc(env(safe-area-inset-top,0px) + var(--top-gap));left:var(--gap);position:absolute}.prize{justify-content:center;align-items:center;max-width:min(520px,100%);display:flex}.prize__image{border-radius:var(--radius);max-width:100%;max-height:55dvh;animation:.5s cubic-bezier(.2,1.4,.5,1) prize-in}.prize__fallback{font-size:clamp(5rem,30vw,10rem);line-height:1;animation:.5s cubic-bezier(.2,1.4,.5,1) prize-in}.prize__progress{color:var(--muted);text-align:center;margin:0;font-size:clamp(.8rem,3vw,.95rem);font-weight:600}.continue{background:var(--accent);color:#08221d;border-radius:999px;padding:clamp(14px,4vw,20px) clamp(32px,12vw,64px);font-size:clamp(1.1rem,5vw,1.4rem)}.continue:active{transform:scale(.98)}.screen--finale .prize{max-width:100%}.finale__image,.finale__video{border-radius:var(--radius);max-width:100%;max-height:62dvh;animation:.5s cubic-bezier(.2,1.4,.5,1) prize-in}.finale__frame{aspect-ratio:16/9;border-radius:var(--radius);border:none;width:min(92vw,900px);max-height:62dvh}.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.06)}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}}