/* Smart School Kids: bright, big, friendly. Everything here is drawn with CSS and SVG. */
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--ink:#243447;--muted:#5d6b7c;--sky1:#bde7ff;--sky2:#e8f7ff;--grass:#8ed081;--card:#fff;--zc:#4c6ef5;--zd:#364fc7;--r:26px;--shadow:0 8px 0 rgba(36,52,71,.12),0 14px 28px rgba(36,52,71,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:Manrope,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky1),var(--sky2) 55%,#f3ffe9);min-height:100vh;overflow-x:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #ffd43b;outline-offset:3px}
.screen{position:relative;min-height:100vh;padding-bottom:3rem}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.6rem 1.5rem;border:0;border-radius:999px;background:#4c6ef5;color:#fff;font-weight:800;font-size:1.1rem;text-decoration:none;box-shadow:0 5px 0 #364fc7;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #364fc7}
.btn.alt{background:#40c057;box-shadow:0 5px 0 #2b8a3e}.btn.alt:active{box-shadow:0 1px 0 #2b8a3e}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 5px 0 #ced4da;border:2px solid #dee2e6}
.btn.danger{color:#c92a2a}.btn.big{min-height:64px;font-size:1.25rem}.btn.huge{min-height:76px;font-size:1.6rem;padding:.8rem 2.4rem}.btn.small{min-height:44px;font-size:.95rem;padding:.3rem 1rem}
.round-btn{width:52px;height:52px;border-radius:50%;border:0;background:#fff;font-size:1.5rem;box-shadow:0 4px 0 rgba(36,52,71,.18);display:grid;place-items:center;flex:none}
.round-btn.small{width:44px;height:44px;font-size:1.2rem}.round-btn:active{transform:translateY(3px);box-shadow:none}
.chip{border:3px solid #dee2e6;background:#fff;border-radius:999px;padding:.4rem 1rem;font-weight:700;font-size:1rem;min-height:44px}.chip.on{border-color:var(--zc);background:var(--zc);color:#fff}

/* top bar */
.topbar{position:relative;z-index:5;display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;flex-wrap:wrap}
.topbar .spacer{flex:1}.me{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem}.av{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 4px 0 rgba(36,52,71,.15)}
.total{background:#fff3bf;color:#a86400;font-weight:800;border-radius:999px;padding:.4rem .9rem;box-shadow:0 4px 0 rgba(168,100,0,.2)}
.langs{display:flex;gap:.2rem;background:#fff;border-radius:999px;padding:.2rem;box-shadow:0 4px 0 rgba(36,52,71,.12)}.langs.center{justify-content:center;width:max-content;margin:.4rem auto}
.lg{border:0;background:none;border-radius:999px;padding:.35rem .7rem;font-weight:800;font-size:.85rem;min-height:40px;color:var(--muted)}.lg.on{background:#4c6ef5;color:#fff}

/* decoration */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.decor .sun{position:absolute;right:3%;top:90px;animation:bob 5s ease-in-out infinite}.sun-rays{transform-origin:50px 50px;animation:spin 24s linear infinite}
.cloud{position:absolute;background:#fff;border-radius:60px;opacity:.9;box-shadow:0 8px 0 rgba(255,255,255,.4)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud::before{width:50%;height:160%;left:14%;top:-70%}.cloud::after{width:36%;height:130%;right:12%;top:-50%}
.decor .c1{width:150px;height:46px;top:120px;left:-160px;animation:drift 46s linear infinite}.decor .c2{width:110px;height:36px;top:260px;left:-120px;animation:drift 62s linear -20s infinite}.decor .c3{width:180px;height:52px;top:60px;left:-190px;animation:drift 80s linear -45s infinite}
.bird{position:absolute;font-size:2rem;top:180px;left:-60px;animation:fly 24s linear infinite}.bird.b2{top:340px;animation-duration:32s;animation-delay:-12s;font-size:1.6rem}
.bal{position:absolute;font-size:2.4rem;bottom:-80px;animation:rise2 18s linear infinite}.bal.bl1{left:6%}.bal.bl2{left:88%;animation-delay:-9s}
@keyframes drift{to{transform:translateX(calc(100vw + 360px))}}@keyframes fly{0%{transform:translate(0,0)}50%{transform:translate(55vw,-30px)}100%{transform:translate(115vw,10px)}}
@keyframes rise2{to{transform:translateY(-120vh)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-10px)}}

/* Kiki the crane */
.kiki{display:inline-block;transform-origin:50% 100%;animation:kbob 3.2s ease-in-out infinite}.kiki-svg{display:block;overflow:visible}
.kk-eye{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}.kk-wing{transform-box:fill-box}.kk-wl{transform-origin:100% 20%}.kk-wr{transform-origin:0 20%}
.kiki.cheer{animation:kjump .6s ease-in-out 2}.kiki.cheer .kk-wl{animation:flapl .3s ease-in-out 4}.kiki.cheer .kk-wr{animation:flapr .3s ease-in-out 4}
.kiki.think{animation:ktilt 1.2s ease-in-out 1}.kiki.think .kk-pupil{transform:translate(-3px,-3px)}
@keyframes kbob{50%{transform:translateY(-6px) rotate(-1deg)}}@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes kjump{40%{transform:translateY(-28px) rotate(-4deg)}70%{transform:translateY(-14px) rotate(4deg)}}@keyframes ktilt{30%,70%{transform:rotate(-10deg)}}
@keyframes flapl{50%{transform:rotate(-40deg)}}@keyframes flapr{50%{transform:rotate(40deg)}}
.bubble{position:relative;background:#fff;border-radius:22px;padding:.6rem 1rem;font-weight:800;max-width:260px;box-shadow:0 5px 0 rgba(36,52,71,.12);opacity:0;transform:scale(.8);transition:.25s}.bubble.on{opacity:1;transform:none}
.bubble::after{content:"";position:absolute;left:-10px;bottom:20px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.hero-kiki{display:flex;align-items:flex-end;gap:.5rem;justify-content:center}

/* welcome */
.welcome{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:.6rem 1.2rem 2rem;text-align:center}
.welcome h1{font-size:clamp(2rem,7vw,3rem);margin:.5rem 0 0;color:#364fc7;letter-spacing:-.02em}.tag{font-size:1.2rem;font-weight:700;color:var(--muted);margin:.2rem 0 1rem}
.field{display:grid;gap:.5rem;margin:1rem 0;text-align:center}.field>span{font-weight:800}
.field input{font:inherit;font-size:1.4rem;font-weight:700;text-align:center;padding:.8rem 1rem;border:4px solid #dee2e6;border-radius:20px;background:#fff;color:var(--ink)}
.avs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:340px;margin:0 auto}.avb{width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:#fff;font-size:2.2rem;box-shadow:0 4px 0 rgba(36,52,71,.15)}.avb.on{border-color:#4c6ef5;transform:scale(1.12)}
.clss{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.clb{border:4px solid #fff;background:#fff;border-radius:18px;padding:.6rem 1rem;font-weight:800;min-height:56px;box-shadow:0 4px 0 rgba(36,52,71,.15)}.clb.on{border-color:#4c6ef5;background:#edf2ff;color:#364fc7}

/* home */
.home,.zonepage,.stickerpage,.settings,.gate{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:0 1rem}
.hero{display:grid;gap:.8rem;justify-items:center;margin:.2rem 0 1rem}
.nextstk{display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:999px;padding:.4rem 1rem .4rem .5rem;box-shadow:0 5px 0 rgba(36,52,71,.12);flex-wrap:wrap;justify-content:center}
.ns-e{width:46px;height:46px;border-radius:50%;background:#fff3bf;display:grid;place-items:center;font-size:1.7rem}.ns-bar{width:150px;height:16px;border-radius:99px;background:#e9ecef;overflow:hidden}.ns-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd43b,#fab005);border-radius:99px;transition:width .6s}
.nextstk small{font-weight:700;color:var(--muted)}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}
@media(min-width:760px){.zones{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.home{max-width:900px}}
.zone{border:0;border-radius:32px;background:linear-gradient(160deg,var(--zc),var(--zd));color:#fff;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem;box-shadow:0 8px 0 var(--zd),0 16px 24px rgba(36,52,71,.15);animation:floaty 4s ease-in-out infinite;transition:transform .1s}
.zone:nth-child(2){animation-delay:-.8s}.zone:nth-child(3){animation-delay:-1.6s}.zone:nth-child(4){animation-delay:-2.4s}.zone:nth-child(5){animation-delay:-3.2s}
.zone:hover{transform:scale(1.04)}.zone:active{transform:translateY(6px);box-shadow:0 2px 0 var(--zd)}.zone .zi{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}.zone .zi svg{width:78px;height:78px}
.zone b{font-size:1.35rem}.zone small{font-weight:700;background:rgba(0,0,0,.18);border-radius:99px;padding:.15rem .7rem}
@keyframes floaty{50%{transform:translateY(-5px)}}
.zone:hover,.zone:focus-visible,.zone:active,.pot:hover,.pot:active{animation-play-state:paused}
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.extra{border:0;background:#fff;border-radius:28px;padding:1rem;display:flex;align-items:center;gap:.8rem;box-shadow:0 6px 0 rgba(36,52,71,.12);text-align:left}.extra span{font-size:2.2rem}.extra b{font-size:1.2rem}.extra small{margin-left:auto;font-weight:800;color:var(--muted)}
.streak b{font-size:1.8rem;color:#f08c00}

/* zone page */
.zonepage h1,.stickerpage h1{display:flex;align-items:center;gap:.8rem;font-size:clamp(1.6rem,5vw,2.4rem);margin:.4rem 0 1rem;color:var(--zd,#364fc7)}.zi2{background:var(--zc,#4c6ef5);border-radius:50%;width:72px;height:72px;display:grid;place-items:center}.zi2 svg{width:56px;height:56px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:1rem}
.gcard{border:0;background:#fff;border-radius:30px;padding:1.2rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 8px 0 rgba(36,52,71,.12);border-bottom:8px solid var(--zc);transition:transform .1s}
.gcard:hover{transform:translateY(-4px)}.gcard:active{transform:translateY(4px)}.gi{font-size:3.6rem;line-height:1;animation:floaty 3.5s ease-in-out infinite}.gcard b{font-size:1.15rem;text-align:center}
.gstars{font-size:1.5rem;color:#ced4da;letter-spacing:.1em}.gstars .on{color:#fcc419;text-shadow:0 2px 0 #e8a800}

/* stickers */
.stickerpage h1 small{font-size:1.1rem;color:var(--muted);margin-left:.5rem}
.stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.8rem}
.stk-cell{aspect-ratio:1;border-radius:24px;display:grid;place-items:center;font-size:2.8rem;background:#fff;box-shadow:0 5px 0 rgba(36,52,71,.12);animation:popin .4s both}.stk-cell.off{background:#e9ecef;color:#adb5bd;font-weight:800;box-shadow:none}.stk-cell.on:hover{animation:wiggle .5s}
.pics{display:flex;flex-wrap:wrap;gap:.8rem}.pics img{border-radius:16px;border:5px solid #fff;box-shadow:0 6px 0 rgba(36,52,71,.12);max-width:46%;height:auto}

/* parents */
.gate{text-align:center;padding-top:1rem}.holdbtn{position:relative;width:180px;height:180px;border:0;background:#fff;border-radius:50%;margin:1rem auto;display:grid;place-items:center;box-shadow:0 8px 0 rgba(36,52,71,.15)}.holdbtn svg{position:absolute;inset:6px;width:168px;height:168px}.holdbtn span{font-weight:800;max-width:100px}
.settings .card{background:#fff;border-radius:24px;padding:1rem 1.2rem;margin:1rem 0;box-shadow:0 6px 0 rgba(36,52,71,.1)}.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid #f1f3f5;flex-wrap:wrap}.row:last-child{border:0}
.row input{font:inherit;padding:.5rem .8rem;border:3px solid #dee2e6;border-radius:14px;max-width:200px}.rowbtns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.sw-tg{width:68px;height:38px;border-radius:99px;border:0;background:#ced4da;position:relative;transition:.2s}.sw-tg i{position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:#fff;transition:.2s}.sw-tg.on{background:#40c057}.sw-tg.on i{left:34px}
.prog{width:100%;border-collapse:collapse}.prog td{padding:.35rem 0;border-bottom:1px solid #f1f3f5}.prog td:last-child{text-align:right}

/* game stage */
.stage{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;max-width:980px;margin:0 auto;padding:0 .8rem 5.5rem}
.stage-screen{background:#f1f4ff;background:linear-gradient(180deg,color-mix(in srgb,var(--zc) 22%,#fff),#fff 70%)}
.g-top{display:flex;align-items:center;gap:.7rem;padding:.7rem 0}.g-top h2{margin:0;font-size:clamp(1.1rem,4vw,1.6rem);color:var(--zd);flex:1}
.g-dots{display:flex;gap:6px}.g-dots i{width:14px;height:14px;border-radius:50%;background:#dee2e6;transition:.3s}.g-dots i.now{background:#fff;border:3px solid var(--zc);transform:scale(1.15)}.g-dots i.done{background:var(--zc)}
.g-prompt{display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:999px;padding:.4rem .9rem .4rem .5rem;box-shadow:0 5px 0 rgba(36,52,71,.12);width:max-content;max-width:100%;margin:.2rem auto .6rem}
.g-prompt-text{font-size:clamp(1.1rem,4.4vw,1.6rem);font-weight:800}.big-letter{font-size:1.3em;color:var(--zd);display:inline-block;animation:popin .4s both}
.g-arena{position:relative;flex:1;min-height:clamp(320px,56vh,560px);width:100%;overflow:hidden;border-radius:30px}
.g-kiki{position:fixed;left:.6rem;bottom:.4rem;z-index:20;display:flex;align-items:flex-end;gap:.3rem;pointer-events:none}.g-kiki .bubble{margin-bottom:34px}
.stage .shake,.shake{animation:shake .35s}.hit{animation:hit .35s}
@keyframes shake{20%{transform:translateX(-10px) rotate(-3deg)}60%{transform:translateX(10px) rotate(3deg)}}@keyframes hit{50%{transform:scale(1.2)}}@keyframes popin{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* win overlay */
.win{position:fixed;inset:0;z-index:100;background:rgba(36,52,71,.55);display:grid;place-items:center;padding:1rem;animation:fadein .3s}.win-card{background:#fff;border-radius:36px;padding:1.2rem 1.4rem 1.6rem;max-width:440px;width:100%;text-align:center;box-shadow:0 12px 0 rgba(0,0,0,.15);animation:popin .4s both}
.win-card h2{font-size:2rem;margin:.2rem 0;color:#364fc7}.wstars{display:flex;justify-content:center;gap:.4rem;font-size:4rem;line-height:1}.wstar{color:#dee2e6;transform:scale(0)}.wstar.on{color:#fcc419;text-shadow:0 4px 0 #e8a800;animation:starin .6s cubic-bezier(.3,1.7,.5,1) both}.wstar.off{transform:scale(1)}
@keyframes starin{from{transform:scale(0) rotate(-120deg)}to{transform:scale(1) rotate(0)}}@keyframes fadein{from{opacity:0}}
.newsticker{background:#fff9db;border-radius:24px;margin:.8rem 0;padding:.6rem;animation:popin .5s 1.6s both}.stk{font-size:4rem;animation:spinpop 1s 1.7s both}.newsticker p{margin:0;font-weight:800;color:#a86400}@keyframes spinpop{from{transform:scale(0) rotate(-360deg)}to{transform:none}}
.win-act{display:grid;gap:.6rem;margin-top:1rem}
.confetti{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall 2s linear forwards}@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* game: balloons */
.sky{position:absolute;inset:0;background:linear-gradient(#9ed8ff,#e3f6ff)}.sky .cloud{opacity:.8}.sky .c1{width:120px;height:38px;top:18%;left:-140px;animation:drift 38s linear infinite}.sky .c2{width:90px;height:30px;top:48%;left:-100px;animation:drift 52s linear -15s infinite}.sky .c3{width:140px;height:42px;top:70%;left:-150px;animation:drift 66s linear -30s infinite}
.balloon{position:absolute;bottom:-140px;border:0;background:none;padding:0;width:84px;animation:rise var(--d,10s) linear var(--dl,0s) infinite;will-change:transform}.balloon svg{display:block;filter:drop-shadow(0 6px 4px rgba(0,0,0,.12))}
@keyframes rise{from{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(calc(var(--ah,560px) * -.5)) rotate(3deg)}to{transform:translateY(calc(var(--ah,560px) * -1)) rotate(-3deg)}}
.balloon.pop{animation:balpop .28s forwards!important;pointer-events:none}@keyframes balpop{to{transform:scale(1.8);opacity:0}}
/* trace */
.trace-wrap{position:relative;width:min(92vw,52vh,400px);aspect-ratio:1;margin:0 auto;background:#fff;border-radius:28px;box-shadow:0 8px 0 rgba(36,52,71,.12);border:5px solid #fff}.trace-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;border-radius:24px}
.trace-btns{display:flex;gap:.8rem;justify-content:center;margin-top:1rem}.trace-meter{width:min(70vw,280px);height:12px;background:#e9ecef;border-radius:99px;margin:.8rem auto 0;overflow:hidden}.trace-meter i{display:block;height:100%;width:0;background:var(--zc);transition:width .3s}
/* feed the monster */
.feed{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding-top:.3rem}.want{position:absolute;right:6%;top:6%;background:#fff;border:5px solid var(--zc);color:var(--zd);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:3rem;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.1);animation:popin .5s both}
.monster-box{transform-origin:50% 100%}.monster-svg{width:clamp(170px,26vw,240px);height:auto}.monster-box.munch{animation:munch .35s}.monster-box.happy{animation:happy .5s 3}
.mo-mouth{transform-box:fill-box;transform-origin:center}.munch .mo-mouth{animation:mouth .3s}.mo-pupil{transition:.3s}
@keyframes munch{40%{transform:scale(1.08,.92)}}@keyframes mouth{50%{transform:scaleY(1.35)}}@keyframes happy{50%{transform:translateY(-22px) rotate(-4deg)}}
.eaten{font-size:2rem;font-weight:800;color:var(--zd);min-height:2.4rem}.eaten.bump{animation:hit .3s}
.fruits{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;max-width:560px}.fruit{border:0;background:#fff;width:68px;height:68px;border-radius:20px;font-size:2.6rem;box-shadow:0 5px 0 rgba(36,52,71,.12);animation:popin .35s both;line-height:1}.fruit:active{transform:scale(.9)}
.fruit-fly{position:fixed;font-size:2.8rem;z-index:300;pointer-events:none;transform:translate(-50%,-50%)}
/* count + compare */
.objs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;font-size:clamp(2.4rem,9vw,4rem);min-height:160px;padding:1rem;margin:.4rem auto;max-width:560px;background:#fff;border-radius:28px;box-shadow:0 6px 0 rgba(36,52,71,.1)}
.cobj{display:inline-block;animation:popin .4s both;line-height:1}
.answers{display:flex;gap:1rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}.ans{min-width:96px;height:116px;border:0;border-radius:28px;background:var(--zc);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 7px 0 var(--zd)}.ans b{font-size:3rem;line-height:1}.ans small{font-weight:700;opacity:.9}.ans:active{transform:translateY(5px);box-shadow:0 2px 0 var(--zd)}
.plates{display:flex;gap:.8rem;align-items:center;justify-content:center;padding-top:.6rem}.plate{flex:1;max-width:340px;min-height:230px;border:6px solid #fff;border-radius:32px;background:linear-gradient(#fff,#f1f3f5);box-shadow:0 8px 0 rgba(36,52,71,.14);padding:.6rem;display:grid;place-items:center}.plate:active{transform:translateY(5px)}
.plate-items{display:flex;flex-wrap:wrap;gap:.2rem;justify-content:center;font-size:clamp(1.8rem,6vw,2.6rem)}.vs{font-size:2.2rem;font-weight:800;color:var(--zd)}
/* number path */
.pathbox{position:relative;height:min(58vh,430px);margin:.4rem auto;max-width:700px;background:#fff;border-radius:28px;box-shadow:0 6px 0 rgba(36,52,71,.1)}.pathsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bub{position:absolute;width:70px;height:70px;border-radius:50%;border:0;background:var(--zc);color:#fff;font-size:2rem;font-weight:800;transform:translate(-50%,-50%);box-shadow:0 6px 0 var(--zd)}.bub.next{animation:pulse .8s infinite alternate}.bub.ok{background:#40c057;box-shadow:0 6px 0 #2b8a3e}@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.15)}}
/* shape sorter */
.sorter{position:relative;height:min(62vh,450px);max-width:760px;margin:.2rem auto;background:linear-gradient(#fff8e1,#ffe8cc);border-radius:28px;box-shadow:inset 0 0 0 5px #fff}.sorter:before{content:"";position:absolute;left:0;right:0;top:62%;height:5px;background:rgba(138,107,74,.25)}
.hole,.piece{position:absolute;transform:translate(-50%,-50%)}.hole svg,.piece svg{display:block}.hole.filled{opacity:.15}
.piece{cursor:grab;touch-action:none;transition:none;filter:drop-shadow(0 6px 3px rgba(0,0,0,.2))}.piece.back{transition:left .35s,top .35s}.piece.drag{z-index:10;transform:translate(-50%,-50%) scale(1.15);cursor:grabbing}.piece.placed{filter:none;animation:hit .35s;pointer-events:none}
/* colour splash */
.splashwall{position:absolute;inset:0 0 150px 0;background:#fff;border-radius:28px;overflow:hidden}.blob{position:absolute;animation:splat .45s cubic-bezier(.3,1.6,.5,1) both}@keyframes splat{from{transform:scale(0)}}
.pots{position:absolute;bottom:4px;left:0;right:0;display:flex;gap:.2rem;justify-content:center;flex-wrap:wrap}.pot{border:0;background:none;padding:0;animation:floaty 3s ease-in-out infinite}.pot:nth-child(2n){animation-delay:-1s}.pot:active{transform:scale(.92)}
/* pattern train */
.track{overflow-x:auto;padding:1.4rem .6rem .8rem;margin-top:.8rem}.train{display:flex;align-items:flex-end;gap:8px;width:max-content;margin:0 auto;animation:trainin .9s ease-out}@keyframes trainin{from{transform:translateX(-70vw)}}
.engine{font-size:4rem;line-height:1;margin-right:4px;animation:chug .5s infinite alternate}@keyframes chug{to{transform:translateY(-4px)}}
.car{position:relative;padding-bottom:16px}.car-box{width:70px;height:70px;border:4px solid #495057;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:2rem;font-weight:800;color:#868e96}.car.q .car-box{border-style:dashed;background:#fff9db}.car.fill .car-box{animation:hit .4s}
.wh{position:absolute;bottom:0;width:18px;height:18px;border-radius:50%;background:#495057;border:3px solid #adb5bd}.w1{left:10px}.w2{right:10px}.car::after{content:"";position:absolute;top:36px;right:-10px;width:10px;height:5px;background:#495057}
.opt{border:0;background:#fff;border-radius:24px;padding:.6rem;box-shadow:0 6px 0 rgba(36,52,71,.14)}.opt:active{transform:translateY(4px)}
/* animals + memory */
.anigrid{display:grid;gap:.9rem;max-width:620px;margin:.4rem auto;grid-template-columns:repeat(3,1fr)}.anigrid.c4{grid-template-columns:repeat(2,1fr);max-width:460px}.anigrid.c6{grid-template-columns:repeat(3,1fr)}
.ani{position:relative;aspect-ratio:1;border:0;border-radius:30px;background:#fff;box-shadow:0 7px 0 rgba(36,52,71,.14);display:grid;place-items:center}.ani-e{font-size:clamp(3rem,13vw,5.4rem);line-height:1}.ani:active{transform:translateY(5px)}.ani.hop .ani-e{animation:hop .6s 2}
.ani-name{position:absolute;bottom:6px;left:6px;right:6px;background:#40c057;color:#fff;border-radius:99px;font-weight:800;padding:.15rem .4rem;font-size:1rem;animation:popin .3s}@keyframes hop{40%{transform:translateY(-22px) scale(1.1)}}
.memgrid{display:grid;gap:.7rem;max-width:520px;margin:.4rem auto;grid-template-columns:repeat(3,1fr)}.memgrid.c8,.memgrid.c12{grid-template-columns:repeat(4,1fr)}
.mcard{position:relative;aspect-ratio:1;border:0;background:none;padding:0;perspective:600px;transform-style:preserve-3d;transition:transform .35s}.mcard.up,.mcard.done{transform:rotateY(180deg)}
.mf{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;font-size:clamp(2rem,9vw,3.4rem);border-radius:20px;box-shadow:0 5px 0 rgba(36,52,71,.15)}.mb{background:linear-gradient(135deg,var(--zc),var(--zd));color:#fff}.mfront{background:#fff;transform:rotateY(180deg)}.mcard.done .mfront{background:#ebfbee;box-shadow:0 0 0 4px #40c057}
/* paint */
.paint{display:grid;gap:.7rem}.p-pics{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.p-main{display:flex;gap:.9rem;justify-content:center;align-items:flex-start;flex-wrap:wrap}.p-tools{display:grid;gap:.6rem;width:250px;background:#fff;border-radius:24px;padding:.8rem;box-shadow:0 6px 0 rgba(36,52,71,.1)}
.p-colours{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.sw{aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #ced4da}.sw.on{box-shadow:0 0 0 4px var(--zd);transform:scale(1.12)}
.p-modes,.p-sizes,.p-stamps{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.tool,.sz,.st{width:46px;height:46px;border-radius:14px;border:3px solid #dee2e6;background:#fff;font-size:1.5rem;display:grid;place-items:center;padding:0}.tool.on,.sz.on,.st.on{border-color:var(--zc);background:#f3f0ff}.sz i{display:block;background:#495057;border-radius:50%}
.p-acts{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}.p-board{position:relative;width:min(100%,640px);aspect-ratio:4/3;background:#fff;border-radius:20px;box-shadow:0 8px 0 rgba(36,52,71,.14);border:5px solid #fff;overflow:hidden}.p-board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.p-line{cursor:crosshair}
.p-foot{display:flex;gap:.8rem;justify-content:center;margin-top:.4rem}
@media(max-width:640px){.p-tools{width:100%}.p-colours{grid-template-columns:repeat(10,1fr)}}
/* piano */
.piano{padding-top:.4rem}.p-songs{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}.notes-float{position:relative;height:0}.notes-float span{position:absolute;top:150px;font-size:2rem;color:var(--zd);animation:floatup 1.4s forwards;pointer-events:none}@keyframes floatup{to{transform:translateY(-160px) rotate(20deg);opacity:0}}
.keys{display:flex;gap:6px;justify-content:center;margin:2.4rem 0 1rem}.key{width:min(11vw,86px);height:min(38vh,250px);border:0;border-radius:0 0 20px 20px;background:var(--kc);color:#fff;font-weight:800;font-size:1.4rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;box-shadow:0 8px 0 rgba(0,0,0,.2);touch-action:none;transition:transform .06s}.key.down{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.2);filter:brightness(1.2)}.key.next{outline:6px solid #212529;animation:keyglow .7s infinite alternate}@keyframes keyglow{to{transform:translateY(8px);filter:brightness(1.3)}}

/* calm mode and reduced motion: still, but every game stays playable */
.calm *,.calm *::before,.calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
.calm .balloon{animation:none!important;bottom:30%}.calm .decor{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.balloon{animation:none!important;bottom:30%}.decor{display:none}}

/* phones in portrait */
@media(min-width:900px){.fruit{width:78px;height:78px;font-size:3rem}.fruits{max-width:640px}}
.zone.gold{--zc:#fab005;--zd:#d9780a}.hero-kiki .kiki{pointer-events:auto;cursor:pointer}
@media(max-width:560px){.topbar{gap:.4rem}.total{padding:.3rem .6rem}.zone{min-height:170px}.zone .zi{width:76px;height:76px}.zone .zi svg{width:62px;height:62px}.want{width:68px;height:68px;font-size:2.3rem}.ans{min-width:84px;height:100px}.ans b{font-size:2.4rem}.g-kiki .kiki svg{width:64px;height:auto}.g-kiki .bubble{max-width:170px;font-size:.85rem}.fruit{width:58px;height:58px;font-size:2.2rem}}
@media print{.decor,.g-kiki{display:none}}

.brandlogo{width:52px;height:52px;border-radius:50%;flex:none;box-shadow:0 4px 0 rgba(36,52,71,.18)}.brandlogo.big{width:min(46vw,180px);height:auto;margin:.2rem auto 0;display:block;animation:floaty 5s ease-in-out infinite}
@media(max-width:560px){.me .brandlogo{display:none}}