@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#35234f;background:#eee7fa;font-synthesis:none;--purple:#6343ad;--dark:#493176;--pink:#e76c9e;--cream:#fffdf7}
*{box-sizing:border-box}body{margin:0;padding:24px 16px}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:4px solid #d36825;outline-offset:4px}button:disabled{cursor:default}button{color:inherit}h1,h2,p{margin:0}h1,h2,.brand,.answer,.primary,.equation{font-family:'Fredoka',system-ui,sans-serif}h1{font-size:clamp(28px,4vw,38px);font-weight:500;line-height:1.12}h2{font-size:29px;font-weight:500}.game{max-width:1000px;margin:auto;border-radius:30px;overflow:hidden;background:var(--cream);box-shadow:0 18px 70px #4c267b1c}header{min-height:74px;background:var(--purple);color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;gap:10px}.brand{font-size:25px;font-weight:500;color:inherit;text-decoration:none;white-space:nowrap}.brand span{color:#ffda78;margin-right:8px}.utilities{display:flex;gap:8px}.icon-button{border:0;border-radius:50%;width:44px;height:44px;background:#ffffff20;color:inherit;font-size:25px;display:grid;place-items:center}.icon-button:hover{background:#ffffff35}.world{position:relative;background:#f1e9da;overflow:hidden}.world>img{width:100%;height:auto;max-height:440px;display:block;object-fit:contain}.star-trail{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:12px;padding:9px 20px;border:1px solid #fff9;border-radius:40px;background:#fffdf2ed;box-shadow:0 5px 18px #39256821}.star{font-size:30px;color:#b6a3c8;line-height:1}.star.earned{color:#b77800;text-shadow:0 2px #ffe6a6}.play{position:relative;text-align:center;padding:26px 32px 24px;min-height:360px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:#74518d;margin-bottom:8px}.subtitle{font-size:17px;line-height:1.5;color:#776683;margin:10px auto 18px}.friends{display:flex;justify-content:center;gap:14px;margin:20px 0}.friend{background:#fff;border:2px solid #e9def3;border-radius:22px;padding:12px 16px;min-width:104px;transition:transform .15s,background .15s}.friend[aria-pressed=true]{background:#f3e9ff;border-color:var(--purple);box-shadow:0 4px 0 #d9c8ee;transform:translateY(-3px)}.friend .animal{display:block;font-size:42px;margin-bottom:4px}.friend strong{display:block;font-size:15px}.primary{border:0;border-radius:18px;background:var(--purple);color:white;padding:16px 27px;font-size:22px;box-shadow:0 5px 0 #493078;min-height:60px;display:inline-flex;gap:30px;align-items:center;justify-content:center;transition:transform .15s}.primary:hover{background:#7150bb}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #493078}.primary span{font-family:system-ui}.intro-note{font-size:14px;color:#7f6e88;margin-top:16px}.question-top{display:flex;align-items:center;justify-content:center;gap:14px}.listen{background:#eee5fb;color:#61448f;flex-shrink:0}.mission{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.mission .eyebrow{margin:0}.home-button{border:0;background:none;color:#78628d;font-size:14px;min-height:44px;padding:5px 9px}.equation{display:block;font-size:26px;margin-top:8px;color:#79618e}.counting-mat{background:#f3edf9;border:1px solid #e9def1;border-radius:24px;margin:16px auto 12px;padding:14px 18px;min-height:100px;max-width:650px;display:flex;justify-content:center;align-items:center;gap:14px}.object-group{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.math-symbol{font-size:26px;color:#826c9a}.object{position:relative;border:0;border-radius:13px;background:#fffdf8;box-shadow:0 3px 0 #dfd3e8;min-width:52px;min-height:57px;font-size:32px;transition:transform .18s,opacity .18s}.object.counted{background:#ffefb4;transform:translateY(-3px)}.object.taken{opacity:.3;background:transparent;box-shadow:none;text-decoration:line-through}.object.taken:after{content:'×';position:absolute;inset:0;font-size:52px;color:#5c416a;line-height:1}.count-badge{position:absolute;top:-9px;right:-5px;border-radius:50%;background:var(--purple);color:#fff;font-size:13px;width:22px;height:22px;display:grid;place-items:center;font-weight:700}.answers{display:flex;justify-content:center;gap:18px;margin:16px 0 12px}.answer{font-size:36px;background:#fff;min-width:88px;min-height:78px;border:2px solid #dcd0ee;border-radius:21px;box-shadow:0 5px 0 #e4d9ef}.answer:hover{background:#f3e9ff;border-color:var(--purple)}.answer:disabled{opacity:.36;box-shadow:none}.answer.correct{background:#e3f4d9;border-color:#79aa55;color:#3b6128;opacity:1;box-shadow:0 5px 0 #bfdaa9}.feedback{min-height:28px;font-size:17px;color:#6f5981;line-height:1.5}.feedback.success{color:#456832;font-weight:700}.help{border:0;background:none;color:#654591;font-size:15px;padding:9px 12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.round-bottom{min-height:60px;display:flex;justify-content:center;align-items:center;margin-top:8px}.round-bottom .primary{padding:12px 26px;min-height:52px;font-size:21px}footer{text-align:center;padding:0 18px 20px;font-size:13px;color:#9a89a6}.celebration{font-size:48px;margin:8px 0}.sparkle{position:absolute;top:10%;font-size:28px;animation:fall 1.8s ease-out forwards;pointer-events:none}dialog{border:0;border-radius:26px;padding:30px;max-width:470px;width:calc(100% - 30px);color:#35234f;background:var(--cream);box-shadow:0 20px 80px #28123f44}dialog::backdrop{background:#2a194b99;backdrop-filter:blur(4px)}dialog .close{position:absolute;right:10px;top:10px;background:#eee5f7}dialog h2{margin:12px 0 22px}dialog label{display:block;font-weight:700;margin:12px 0 8px}dialog select{width:100%;padding:13px 8px;border:1px solid #bba6d1;border-radius:12px;background:white;color:#49325d;font-size:16px}.setting-note,.privacy{font-size:14px;line-height:1.6;margin:16px 0;color:#6b577c}.privacy{border-top:1px solid #e8dff0;padding-top:15px}dialog .primary{width:100%;font-size:18px;gap:10px}.hint-glow .object:not(.counted):not(.taken){animation:pulse .9s ease-in-out 2}@keyframes pulse{50%{transform:translateY(-6px);background:#ffefb4}}@keyframes fall{to{transform:translateY(260px) rotate(130deg);opacity:0}}@media(min-width:800px){.game{margin-top:8px}.play{padding-left:80px;padding-right:80px}.intro .friends{margin:24px 0}.world>img{object-position:center 56%}}
@media(max-width:600px){body{padding:0;background:var(--cream)}.game{border-radius:0;box-shadow:none;min-height:100dvh}header{min-height:64px;padding:10px 17px}.brand{font-size:22px}.brand span{margin-right:4px}.utilities{gap:3px}.icon-button{width:42px;height:42px}.world>img{object-position:center 52%}.star-trail{bottom:11px;padding:7px 18px;gap:11px}.star{font-size:26px}.play{padding:21px 18px 16px;min-height:0}.friend{min-width:89px;padding:10px 12px}.friends{gap:11px;margin:18px 0}.friend .animal{font-size:36px}.subtitle{font-size:16px;margin-bottom:10px}.primary{width:100%;max-width:340px}.counting-mat{padding:13px 10px;margin-top:12px;gap:8px;min-height:88px}.object-group{gap:6px}.object{min-width:45px;min-height:51px;font-size:28px}.answers{gap:16px;margin-top:14px}.answer{min-width:80px;min-height:72px}.equation{font-size:23px}.question-top h1{font-size:27px}.feedback{font-size:16px}footer{padding-bottom:max(14px,env(safe-area-inset-bottom));font-size:12px}.mission{margin-bottom:4px}.round-bottom{margin-top:3px}}@media(max-width:360px){.brand{font-size:19px}.play{padding:16px 12px}.friend{min-width:82px}.object{min-width:40px;min-height:46px}.answer{min-width:75px}.counting-mat{gap:5px}.question-top h1{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Playful motion and touch interactions */
.flying-token{position:fixed;z-index:100;pointer-events:none;font-size:34px;line-height:1;will-change:transform,opacity;color:#e6ae19}.flying-token.heart{color:#e56c9e;font-size:27px}.magic-button{position:absolute;right:15px;bottom:17px;width:46px;height:46px;display:grid;place-items:center;border:2px solid #fff9;border-radius:50%;background:#fff4cfed;box-shadow:0 4px 12px #3d20502b;font-size:26px}.magic-button:hover{background:#ffe8a5}.magic-button:active{transform:scale(.9)}.star-trail{pointer-events:none}.sparkle{color:#ffd55f;text-shadow:0 1px 2px #6f4299}.friend .animal{transform-origin:50% 90%}.friend[aria-pressed=true] .animal{animation:hello-wiggle 2.5s ease-in-out 3}.picnic-pal{display:flex;align-items:center;justify-content:center;gap:20px;max-width:530px;margin:14px auto 0}.pet{border:0;background:#f3eafb;border-radius:21px;min-width:82px;padding:5px 10px 7px}.pet-face{font-size:46px;display:block;line-height:1.15;transform-origin:50% 90%}.pet-label{font-size:12px;color:#765791;font-weight:700}.picnic-pal p{font-family:'Fredoka',system-ui,sans-serif;font-size:19px;color:#7a579b;max-width:175px;flex:1}.basket{min-width:78px;display:flex;flex-direction:column;align-items:center}.basket>span:first-child{font-size:48px;line-height:1.1}.basket-count{font-weight:700;font-size:14px;color:#73528a;background:#ffefbf;border-radius:20px;padding:4px 10px;white-space:nowrap}.counting-mat{margin-top:12px}.object.counted{background:#ffefb4;box-shadow:0 2px 0 #e0ce97;transform:none}.object.counted .treat-picture{opacity:.12}.object.counted .count-badge{inset:0;display:grid;place-items:center;width:100%;height:100%;background:transparent;color:#735194;font-family:'Fredoka',system-ui,sans-serif;font-size:29px;border-radius:13px}.object-group{min-width:0}.party-basket{font-size:48px;margin:12px auto 16px}.party-basket span{font-size:27px}.party-guests{display:flex;justify-content:center;gap:14px;margin:12px auto 18px;max-width:490px}.picnic-guest{flex:1;min-width:0;border:2px solid #e8dbf3;border-radius:23px;padding:13px 8px;background:#f6effb;box-shadow:0 4px 0 #e7daef}.picnic-guest .animal{display:block;font-size:52px;line-height:1.2;transform-origin:50% 95%;margin-bottom:7px}.picnic-guest strong{display:block;font-size:17px}.guest-action{display:block;font-size:13px;margin-top:5px;color:#775f87}.picnic-guest.fed{background:#eaf4df;border-color:#b4d398;box-shadow:0 4px 0 #c9dfb4}.dance-button{border:2px solid #ddc9ef;border-radius:18px;background:#f1e5fd;color:#6343ad;padding:12px 20px;font-size:18px;min-height:48px;margin:12px auto}.dance-button[hidden]{display:none}.party-guests+.feedback{margin:4px 0 10px}.world>img{animation:scene-arrive 1s ease-out}.pet:active,.picnic-guest:active{transform:scale(.96)}
@keyframes hello-wiggle{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-9deg) translateY(-4px)}86%{transform:rotate(9deg) translateY(-4px)}94%{transform:rotate(-5deg)}}
@keyframes scene-arrive{from{opacity:.7;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){body[data-screen=playing] .play{padding-top:10px}body[data-screen=playing] .world>img{object-position:center 46%}.picnic-pal{gap:12px;margin-top:10px}.picnic-pal p{font-size:17px}.pet{min-width:68px;border-radius:17px}.pet-face{font-size:38px}.basket>span:first-child{font-size:40px}.basket{min-width:75px}.basket-count{font-size:13px;padding:3px 8px}.counting-mat{margin-top:10px;margin-bottom:9px;min-height:76px}.feedback{font-size:15px;min-height:24px}.answers{margin:12px 0 8px}.answer{min-height:65px}.round-bottom{min-height:52px}.magic-button{bottom:12px;right:14px;width:44px;height:44px}.picnic-guest .animal{font-size:43px}.party-guests{gap:10px}.picnic-guest{padding:12px 5px}.guest-action{font-size:12px}.party-basket{margin:8px auto 12px;font-size:42px}}
@media(max-width:360px){.picnic-pal{gap:7px}.picnic-pal p{font-size:16px}.pet-face{font-size:33px}.basket>span:first-child{font-size:36px}.basket{min-width:70px}.party-guests{gap:7px}.picnic-guest .animal{font-size:38px}.guest-action{font-size:12px}.magic-button{right:9px}.star-trail{gap:8px;padding:8px 13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A personal storybook companion, with four responsive illustrated poses. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.princess-companion{display:flex;align-items:center;gap:10px;max-width:430px;margin:8px auto;min-width:0}.princess-button{background:transparent;border:0;border-radius:20px;padding:0 0 4px;flex:0 0 134px;min-width:0;position:relative;touch-action:manipulation}.princess-button:focus-visible{outline-offset:0}.princess-sprite{display:block;width:134px;height:134px;background-image:url('princess-poses.webp');background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;transform-origin:center 88%;filter:drop-shadow(0 4px 2px #6343ad15)}.princess-sprite[data-pose=wave]{background-position:100% 0}.princess-sprite[data-pose=point]{background-position:0 100%}.princess-sprite[data-pose=cheer]{background-position:100% 100%}.princess-action{display:inline-block;min-height:22px;padding:3px 11px;font-size:12px;font-weight:700;line-height:1.3;color:#694691;background:#f0e5fa;border-radius:20px}.princess-dialogue{min-width:0;flex:1;border:1px solid #e3d4f0;background:#f7f0ff;border-radius:20px 20px 20px 4px;text-align:left;padding:14px 16px;position:relative}.princess-caption{font-size:10px;letter-spacing:1.3px;font-weight:700;color:#9571ad;margin-bottom:5px!important}.princess-dialogue #princess-message{font-family:'Fredoka',system-ui,sans-serif;font-size:20px;line-height:1.3;color:#614184;margin:0}.princess-welcome{margin-top:12px;margin-bottom:12px}.princess-welcome .princess-button{flex-basis:152px}.princess-welcome .princess-sprite{width:152px;height:152px}.character-stage{display:flex;justify-content:center;align-items:center;max-width:640px;margin:8px auto 0;gap:18px}.character-stage .princess-companion{flex:1;margin:0}.character-stage .picnic-pal{flex-direction:column;gap:8px;margin:0;flex-shrink:0}.character-stage .pet{min-width:64px;padding:4px 7px}.character-stage .pet-face{font-size:34px}.character-stage .pet-label{font-size:11px}.character-stage .basket>span:first-child{font-size:37px}.character-stage .basket-count{font-size:12px}.character-stage .basket{min-width:65px}.character-stage+.counting-mat{margin-top:8px}.object.princess-hint{outline:3px solid #ba7f10;outline-offset:3px;background:#ffecae}.object.princess-hint:not(.counted){animation:pointed-treat 1s ease-in-out 2}.intro .friends{margin-top:12px}.intro .princess-dialogue{max-width:230px}body[data-screen=finished] .princess-companion{max-width:370px;margin:4px auto}body[data-screen=finished] .princess-button{flex-basis:112px}body[data-screen=finished] .princess-sprite{width:112px;height:112px}body[data-screen=finished] .princess-dialogue #princess-message{font-size:18px}body[data-screen=finished] .party-basket{margin:0 auto 10px;font-size:36px}
@keyframes pointed-treat{50%{transform:translateY(-5px);box-shadow:0 5px 0 #e5cc7c}}
@media(max-width:600px){body[data-screen=playing] .world>img{object-position:center 42%}.character-stage{gap:8px;margin-top:4px}.princess-button{flex-basis:112px}.princess-sprite{width:112px;height:112px}.princess-companion{gap:5px}.princess-dialogue{padding:10px;border-radius:15px 15px 15px 3px}.princess-dialogue #princess-message{font-size:17px}.princess-caption{display:none}.princess-welcome .princess-button{flex-basis:120px}.princess-welcome .princess-sprite{width:120px;height:120px}.character-stage .picnic-pal{gap:4px}.character-stage .pet{min-width:53px}.character-stage .pet-face{font-size:28px}.character-stage .pet-label{display:none}.character-stage .basket{min-width:60px}.character-stage .basket>span:first-child{font-size:29px}.character-stage .basket-count{font-size:12px;padding:3px 6px}.character-stage .princess-action{font-size:12px}.princess-welcome{margin:10px auto 12px;max-width:345px}body[data-screen=finished] .play{padding-top:16px}body[data-screen=finished] .subtitle{margin:7px 0}body[data-screen=finished] .princess-sprite{width:96px;height:96px}body[data-screen=finished] .princess-button{flex-basis:96px}body[data-screen=finished] .party-guests{margin-top:6px;margin-bottom:12px}body[data-screen=finished] .picnic-guest .animal{font-size:36px}body[data-screen=finished] .party-basket{font-size:30px}body[data-screen=finished] .intro-note{font-size:12px;margin-top:10px}}
@media(max-width:360px){.princess-button{flex-basis:94px}.princess-sprite{width:94px;height:94px}.princess-dialogue #princess-message{font-size:16px}.character-stage{gap:5px}.princess-dialogue{padding:8px}.princess-companion{gap:2px}.character-stage .pet-face{font-size:24px}.character-stage .basket{min-width:55px}.character-stage .basket-count{font-size:12px;padding:3px 4px}.princess-welcome .princess-button{flex-basis:108px}.princess-welcome .princess-sprite{width:108px;height:108px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:601px){.character-stage .princess-button{flex-basis:164px}.character-stage .princess-sprite{width:164px;height:164px}}
@media(min-width:361px) and (max-width:600px){.character-stage .princess-button{flex-basis:140px}.character-stage .princess-sprite{width:140px;height:140px}.princess-welcome .princess-button{flex-basis:146px}.princess-welcome .princess-sprite{width:146px;height:146px}}
@media(max-width:360px){.character-stage .princess-button{flex-basis:108px}.character-stage .princess-sprite{width:108px;height:108px}}

/* Give the complete illustration its own space, with controls below it. */
.adventure-bar{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px;padding:9px 24px;background:#f7f0ff;border-bottom:1px solid #e9def3}
.adventure-bar .star-trail{position:static;transform:none;grid-column:2;justify-self:center;gap:12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.adventure-bar .magic-button{position:static;grid-column:3;width:46px;height:46px;box-shadow:none;border:1px solid #e5c988;background:#fff1c8}
@media(max-width:600px){.adventure-bar{padding:7px 16px;gap:7px}.adventure-bar .star-trail{gap:11px}.world>img{max-height:none}}

/* Language stays beside the progress controls, away from the illustration. */
.adventure-bar{grid-template-columns:88px minmax(0,1fr) 46px}
.language-choice{grid-column:1;min-width:0}
.language-choice select{width:100%;min-height:44px;border:1px solid #d9c9ed;border-radius:12px;background:#fff;color:#6343ad;padding:7px 5px;font-size:14px}
.voice-note{font-size:14px;line-height:1.5;color:#6b577c;background:#f7f0ff;padding:0 16px 10px;text-align:center}
.voice-note[hidden]{display:none}
.brand #brand-title{color:inherit;margin:0}
html[lang=zh-Hans]{font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif}
html[lang=zh-Hans] h1,html[lang=zh-Hans] h2,html[lang=zh-Hans] .brand,html[lang=zh-Hans] .primary,html[lang=zh-Hans] #princess-message{font-family:inherit;line-height:1.4}
html[lang=zh-Hans] .eyebrow{letter-spacing:1px}
html[lang=zh-Hans] .primary{gap:16px}
@media(max-width:360px){.adventure-bar{grid-template-columns:80px minmax(0,1fr) 44px;padding-inline:12px;gap:6px}.adventure-bar .star-trail{gap:5px}.adventure-bar .star{font-size:22px}.adventure-bar .magic-button{width:44px;height:44px}}