/* Baloo 2 (SIL Open Font License), self-hosted so the game works offline */
@font-face{font-family:"Baloo 2"; font-style:normal; font-weight:600 800; font-display:swap; src:url(fonts/baloo2-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: full-screen iPad app. Top bar = avatar, voyage (dress → bag → chosen islands → treasure), sound.
   Card holds one screen at a time: a talking pet guide on top, play area left, big picture buttons right. The island map is the hub. */
:root{
  --sea:#0d5c7d; --sea-deep:#073b52; --foam:#bfe9f2; --lagoon:#3aa7c9;
  --sand:#ffe3a3; --sun:#ffc23d; --sun-dark:#d49b1d; --leaf:#2b9a68; --leaf-dark:#1d6d49; --coral:#ff6b57; --coral-dark:#d94a38;
  --wood:#a8642b; --wood-dark:#7a4519; --gold:#f4c542;
  --ink:#16304a; --card:#fffdf6; --muted:#5d7287; --line:#eadfc6; --sky:#e6f7fb;
  --font:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}
html,body{height:100%}
body{margin:0; background:radial-gradient(120% 90% at 50% 0%, var(--sea) 0%, var(--sea-deep) 100%); color:var(--ink); font-family:var(--font); font-size:18px; overflow:hidden;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:10px; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.app{height:100%; max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:10px}

/* top bar */
.bar{display:flex; align-items:center; gap:14px; flex:none; min-height:64px}
.me{display:flex; align-items:flex-end; background:rgba(255,255,255,.14); border-radius:999px; padding:4px 14px; font-size:2.3rem; line-height:1.1; min-width:48px; justify-content:center}
.me small{font-size:.6em}
.voyage{position:relative; flex:1; height:64px; min-width:0}
.voyage .track{position:absolute; left:26px; right:26px; top:58%; border-top:4px dashed rgba(255,255,255,.3)}
.voyage .stops{position:absolute; left:0; right:0; top:58%; transform:translateY(-50%); display:flex; justify-content:space-between}
.stop{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:1.6rem; filter:grayscale(1); opacity:.55; transition:all .4s}
.stop.done{background:var(--sun); filter:none; opacity:1}
.stop.now{background:#fff; filter:none; opacity:1; box-shadow:0 0 0 5px rgba(255,255,255,.3)}
.boat{position:absolute; top:-6px; width:52px; text-align:center; font-size:1.9rem; line-height:1; left:calc(var(--at,0) * (100% - 52px) / var(--last,5)); transition:left .9s cubic-bezier(.4,1.3,.5,1)}
.iconbtn{border:none; background:rgba(255,255,255,.15); color:#fff; border-radius:999px; width:60px; height:60px; font-size:1.7rem; cursor:pointer; flex:none}
@media (max-width:640px){ .stop{width:36px; height:36px; font-size:1.1rem} .boat{width:36px; font-size:1.4rem; left:calc(var(--at,0) * (100% - 36px) / var(--last,5))} .me{font-size:1.7rem} .iconbtn{width:48px; height:48px} }

.card{flex:1; min-height:0; background:var(--card); border-radius:32px; box-shadow:0 18px 40px rgba(0,0,0,.28); padding:clamp(14px,2.2vw,28px); box-sizing:border-box; display:flex; flex-direction:column; gap:clamp(10px,1.8vh,18px); overflow:auto; position:relative}
h1,h2{margin:0; font-weight:800; line-height:1.05; text-wrap:balance}
.big{font-size:clamp(2.6rem,6.5vw,4.8rem)}
.mid{font-size:clamp(1.9rem,4vw,2.9rem)}
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(14px,3vh,26px); flex:1}
.btn{border:none; border-radius:999px; padding:16px 46px; font:800 clamp(1.6rem,3vw,2.2rem) var(--font); cursor:pointer; background:var(--coral); color:#fff; box-shadow:0 7px 0 var(--coral-dark)}
.btn:active{transform:translateY(4px); box-shadow:0 3px 0 var(--coral-dark)}
.btn.green{background:var(--leaf); box-shadow:0 7px 0 var(--leaf-dark)}
.btn.small{font-size:1.25rem; padding:12px 26px; box-shadow:0 5px 0 var(--coral-dark)}
.btn.outline{background:transparent; color:var(--sea); box-shadow:none; border:3px solid var(--sea)}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.bob{animation:bob 2.4s ease-in-out infinite; display:inline-block}
@keyframes bob{50%{transform:translateY(-12px) rotate(-3deg)}}
.popin{animation:popin .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes popin{from{transform:scale(.2); opacity:0}}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-5px)}}
button:focus-visible, input:focus-visible{outline:4px solid var(--sun); outline-offset:3px}
button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

/* talking guide */
.guide{display:flex; align-items:center; gap:16px; flex:none}
.pet{font-size:clamp(3.2rem,6vw,4.2rem); border:none; background:none; cursor:pointer; line-height:1; padding:0; flex:none}
.pet.talk{animation:talk .3s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-7px) rotate(-7deg)}}
.speech{position:relative; background:var(--sand); border-radius:26px; padding:10px 24px; font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; line-height:1.1; min-width:0}
.speech::before{content:""; position:absolute; left:-16px; top:50%; margin-top:-11px; border-top:11px solid transparent; border-bottom:11px solid transparent; border-right:17px solid var(--sand)}
.mapbtn{margin-left:auto; border:none; background:var(--sky); border-radius:50%; width:62px; height:62px; font-size:1.9rem; cursor:pointer; flex:none}

/* two-column play layout */
.scene{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(16px,3vw,44px); align-items:center; min-height:0}
@media (orientation:portrait), (max-width:820px){ .scene{grid-template-columns:1fr; align-items:start} }
.left{display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0}
.go{min-height:80px; display:flex; align-items:center; justify-content:center}

/* dress-up */
.figure{position:relative; font-size:clamp(7rem,15vw,11rem); line-height:1; border:none; background:none; padding:0; cursor:pointer}
.figure .side{position:absolute; right:-.42em; bottom:-.02em; font-size:.46em}
.figure .ph{opacity:.22}
.podium{width:min(320px,90%); height:38px; background:var(--sun); border-radius:50%; box-shadow:0 9px 0 var(--sun-dark); margin-top:-14px}

/* bag */
.holder{position:relative; width:min(440px,100%); min-height:clamp(220px,32vh,300px); box-sizing:border-box; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:12px; padding:70px 18px 24px; margin-top:28px; transition:transform .15s}
.holder.over{transform:scale(1.05)}
.slot{width:clamp(72px,9vw,92px); aspect-ratio:1; max-width:100%; border-radius:50%; border:4px dashed rgba(255,255,255,.65); box-sizing:border-box}
.chip{width:clamp(72px,9vw,92px); aspect-ratio:1; max-width:100%; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; border:none; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.18); position:relative; z-index:2; padding:0}
.bag{background:var(--coral); border-radius:44px 44px 60px 60px; box-shadow:inset 0 -14px 0 var(--coral-dark)}
.bag::before{content:""; position:absolute; left:10%; right:10%; top:0; height:56px; background:var(--coral-dark); border-radius:40px 40px 22px 22px}
.bag::after{content:""; position:absolute; left:50%; top:-30px; width:96px; height:44px; margin-left:-48px; border:10px solid var(--coral-dark); border-bottom:none; border-radius:50px 50px 0 0; box-sizing:border-box}
.buckle{position:absolute; left:50%; top:34px; width:32px; height:28px; margin-left:-16px; background:var(--sun); border-radius:8px; z-index:1}

/* picture shelf */
.shelf{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.5vw,16px); width:100%}
.shelf.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){ .shelf{grid-template-columns:repeat(3,minmax(0,1fr))} }
.item{aspect-ratio:1; border:4px solid var(--line); background:#fff; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:clamp(2.8rem,6vw,4.4rem); line-height:1; cursor:grab; touch-action:none; transition:opacity .2s, transform .12s; padding:0; box-shadow:0 5px 0 var(--line)}
.item:active{transform:scale(.94)}
.item.used, .item:disabled{opacity:.2; cursor:default; transform:none}
.item.lift{opacity:.3}
.item.picked{border-color:var(--leaf); background:#effaf4}
.ghost{position:fixed; z-index:50; pointer-events:none; font-size:4.6rem; line-height:1; transform:translate(-50%,-50%) scale(1.15); filter:drop-shadow(0 8px 8px rgba(0,0,0,.25))}
.hand{position:fixed; left:0; top:0; margin:-8px 0 0 -18px; z-index:70; pointer-events:none; font-size:3.6rem; line-height:1; opacity:0; filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.flyer{position:fixed; left:0; top:0; z-index:65; pointer-events:none; font-size:3.4rem; line-height:1; margin:-.5em 0 0 -.5em}

/* island map */
.map{position:relative; flex:1; min-height:400px; border-radius:28px; overflow:hidden; background:radial-gradient(circle at 40% 45%, #63c3dd 0%, var(--lagoon) 45%, #1d7fa6 100%)}
.map::before{content:""; position:absolute; inset:0; background:repeating-radial-gradient(circle at 40% 50%, rgba(255,255,255,.08) 0 3px, transparent 3px 46px); pointer-events:none}
.isle{position:absolute; transform:translate(-50%,-50%); width:clamp(96px,14vw,164px); aspect-ratio:1; border:none; border-radius:50%; padding:0; cursor:pointer; font-size:clamp(2.8rem,5.6vw,4.2rem); line-height:1; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 46%, #8fd27a 0 33%, #f3d898 34% 64%, #e3bf78 65% 69%, rgba(255,255,255,.6) 70% 73%, transparent 74%); transition:transform .15s}
.isle:active{transform:translate(-50%,-50%) scale(.93)}
.isle .tag{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background:#fff; border-radius:999px; padding:1px 12px; font-size:clamp(.85rem,1.4vw,1.05rem); font-weight:800; white-space:nowrap; color:var(--ink); box-shadow:0 3px 0 rgba(0,0,0,.12)}
.isle.done{filter:saturate(.35) brightness(1.05); cursor:default}
.isle .star{position:absolute; top:2px; right:6px; font-size:clamp(1.4rem,2.4vw,2rem)}
.isle.treasure{width:clamp(110px,16vw,190px); font-size:clamp(3.2rem,6.4vw,4.8rem)}
.isle.treasure.locked{filter:grayscale(.6) brightness(.95)}
.isle.treasure.open{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 22px #fff6a8) brightness(1.08)}}
.isle .lock{position:absolute; bottom:18%; right:16%; font-size:.5em}
.sailor{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; line-height:.9; pointer-events:none; z-index:3}
.sailor .who{font-size:clamp(1.8rem,3.4vw,2.6rem)} .sailor .ship{font-size:clamp(2.4rem,4.4vw,3.4rem)}

/* build */
.tower-stage{position:relative; height:clamp(260px,46vh,420px); width:min(380px,100%); border-bottom:14px solid var(--sand); border-radius:0 0 10px 10px}
.tower{position:absolute; left:50%; bottom:0; width:160px; margin-left:-80px; display:flex; flex-direction:column-reverse; align-items:center; transform-origin:bottom center}
.block{width:150px; height:52px; border-radius:10px; box-shadow:inset 0 -8px 0 rgba(0,0,0,.15); animation:drop .35s ease-out; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.7rem; text-shadow:0 2px 0 rgba(0,0,0,.2)}
.block:nth-child(odd){width:132px}
@keyframes drop{from{transform:translateY(-160px); opacity:0} to{transform:none; opacity:1}}
.tower.wobble{animation:wobble .8s ease-in-out}
@keyframes wobble{20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(4deg)}}
.tower.fall{animation:fall .9s ease-in forwards}
@keyframes fall{to{transform:rotate(80deg) translateY(40px); opacity:.2}}
.blockbtn{width:clamp(170px,22vw,230px); aspect-ratio:1; max-width:100%; border-radius:38px; border:none; background:var(--sun); box-shadow:0 9px 0 var(--sun-dark); font-size:clamp(4rem,9vw,6.2rem); cursor:pointer}
.blockbtn:active{transform:translateY(4px); box-shadow:0 4px 0 var(--sun-dark)}
.blockbtn[disabled]{opacity:.4}
.numgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:min(460px,100%)}
.numgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; width:min(520px,100%)}
.choice{aspect-ratio:1; border:5px solid var(--line); background:#fff; border-radius:32px; font-size:clamp(4rem,9vw,6.4rem); cursor:pointer; padding:0; box-shadow:0 6px 0 var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; line-height:1; color:var(--ink)}
.choice small{font:800 clamp(1.2rem,2.2vw,1.6rem) var(--font)}

/* splash lab */
.tank{position:relative; width:min(430px,100%); height:clamp(260px,44vh,380px); border:7px solid #a9dbe9; border-top:none; border-radius:0 0 30px 30px; overflow:hidden; background:linear-gradient(#fff 0 28%, #8fd6ec 28% 31%, #63c3dd 31% 100%)}
.tank .dropped{position:absolute; top:0; font-size:clamp(2.6rem,5vw,3.4rem); line-height:1}
.tank .dropped > span{display:inline-block}
.floaty{animation:floaty 2.2s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(6px) rotate(4deg)}}
.bigpic{font-size:clamp(6rem,13vw,9rem); line-height:1}
.predict{display:flex; flex-direction:column; align-items:center; gap:18px; width:100%}

/* colouring */
.paint{width:min(560px,100%); height:auto; max-width:100%; aspect-ratio:4/3; touch-action:manipulation}
.rg{fill:#fff; stroke:var(--ink); stroke-width:4; stroke-linejoin:round; cursor:pointer; transition:fill .2s}
.palette{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:min(420px,100%)}
.palette.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.sw{aspect-ratio:1; border-radius:50%; border:6px solid #fff; background:var(--c); box-shadow:0 0 0 3px var(--line), 0 6px 0 rgba(0,0,0,.12); cursor:pointer; padding:0}
.sw.sel{box-shadow:0 0 0 6px var(--ink), 0 6px 0 rgba(0,0,0,.12); transform:scale(1.08)}

/* feed & feelings */
.critter{position:relative; font-size:clamp(7rem,15vw,10.5rem); line-height:1; margin-top:30px}
.think{position:absolute; top:-34px; right:-78px; background:#fff; border:5px solid var(--line); border-radius:50%; width:clamp(84px,10vw,110px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:clamp(2.6rem,5vw,3.6rem)}
.think::after{content:""; position:absolute; left:-10px; bottom:-6px; width:22px; height:22px; border-radius:50%; background:#fff; border:4px solid var(--line)}
.what{position:absolute; right:-.5em; bottom:-.05em; font-size:.45em}
.opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:min(560px,100%)}
.opts.four{grid-template-columns:repeat(2,minmax(0,1fr)); width:min(440px,100%)}
.opt{aspect-ratio:1; border:5px solid var(--line); background:#fff; border-radius:28px; font:800 clamp(3.4rem,7.5vw,5.4rem) var(--font); color:var(--ink); cursor:pointer; padding:0; line-height:1; box-shadow:0 6px 0 var(--line); display:flex; align-items:center; justify-content:center}
.opt.right{border-color:var(--leaf); background:#effaf4}
.opt:disabled{cursor:default}
.opt.used{opacity:.25}

/* ice-cream shop */
.shop{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; width:min(420px,100%)}
.custrow{display:flex; align-items:center; gap:14px; min-height:120px}
.cust{font-size:clamp(4.6rem,9vw,6.4rem); line-height:1}
.order{background:#fff; border:5px solid var(--line); border-radius:24px; padding:10px 14px; display:flex; gap:8px; align-items:flex-end; min-height:52px}
.mini{width:42px; height:32px; border-radius:50% 50% 40% 40%; box-shadow:inset 0 -5px 0 rgba(0,0,0,.14)}
.cone{display:flex; flex-direction:column-reverse; align-items:center; min-height:clamp(170px,26vh,230px); justify-content:flex-start}
.conebase{width:76px; height:96px; background:repeating-linear-gradient(45deg,#e8a65a 0 9px,#cf8433 9px 18px); clip-path:polygon(0 0,100% 0,50% 100%)}
.scoop{width:92px; height:66px; border-radius:50% 50% 42% 42%; margin-bottom:-20px; box-shadow:inset 0 -7px 0 rgba(0,0,0,.13); animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
.jar{position:absolute; bottom:0; right:0; background:#fff; border:4px solid var(--line); border-radius:999px; padding:2px 14px; font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums}
.tubs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:min(560px,100%)}
.tubs.four{grid-template-columns:repeat(2,minmax(0,1fr)); width:min(420px,100%)}
.tub{border:5px solid var(--line); background:#fff; border-radius:26px; padding:16px 6px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font:800 clamp(1rem,1.8vw,1.25rem) var(--font); color:var(--ink); box-shadow:0 6px 0 var(--line)}
.tub i{display:block; width:clamp(70px,9vw,96px); aspect-ratio:1.35; border-radius:50% 50% 42% 42%; background:var(--c); box-shadow:inset 0 -8px 0 rgba(0,0,0,.13)}

/* tidy up */
.sortarea{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,3vh,30px)}
.sortitem{font-size:clamp(6rem,13vw,9rem); line-height:1; min-height:1.1em}
.boxes{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:clamp(14px,2.5vw,28px); width:min(760px,100%)}
.box{position:relative; aspect-ratio:1.15; border:none; border-radius:20px 20px 30px 30px; background:var(--c); box-shadow:inset 0 -14px 0 rgba(0,0,0,.16), 0 7px 0 rgba(0,0,0,.12); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.box::before{content:""; position:absolute; left:-6px; right:-6px; top:-14px; height:26px; border-radius:12px; background:var(--c); filter:brightness(.85)}
.blabel{background:#fff; border-radius:50%; width:56%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1}
.bcount{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:clamp(1.2rem,2.4vw,1.8rem); letter-spacing:-.1em; line-height:1}
.line{display:flex; align-items:flex-end; justify-content:center; gap:16px; min-height:110px; border-bottom:6px solid var(--line); width:min(620px,100%); padding-bottom:6px}
.sizes{display:flex; align-items:flex-end; justify-content:center; gap:16px; flex-wrap:wrap}
.sz{border:5px solid var(--line); background:#fff; border-radius:24px; min-width:96px; min-height:96px; padding:8px 10px; cursor:pointer; line-height:1; box-shadow:0 6px 0 var(--line); display:flex; align-items:flex-end; justify-content:center}

/* treasure chest + quiz */
.tbox{position:relative; width:min(380px,100%); height:clamp(190px,30vh,250px); margin-top:40px; box-sizing:border-box; background:repeating-linear-gradient(0deg,var(--wood) 0 32px,var(--wood-dark) 32px 36px); border:8px solid var(--gold); border-radius:18px; display:flex; align-items:center; justify-content:center; gap:20px; font-size:clamp(3.4rem,7vw,5rem); line-height:1}
.tbox::before{content:""; position:absolute; left:-8px; right:-8px; top:-44px; height:60px; background:var(--wood-dark); border:8px solid var(--gold); border-radius:80px 80px 8px 8px; transform-origin:8% 100%; transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.tbox.open::before{transform:rotate(-28deg) translateY(-24px)}
.quiz{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,3vh,26px); width:100%}
.fish{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; align-items:center; font-size:clamp(3rem,6.4vw,4.4rem); line-height:1}
.fish b{font-size:.8em; color:var(--muted)}
.letter{font-size:clamp(5rem,12vw,8rem); font-weight:800; line-height:.9; color:var(--coral); background:#fff; border:5px solid var(--line); border-radius:30px; padding:6px 36px 0; letter-spacing:.06em}
.handoff{font-size:clamp(3rem,7vw,4.6rem)}

/* age + parent */
.agegrid{display:flex; gap:clamp(12px,2.2vw,26px); flex-wrap:wrap; justify-content:center}
.agebtn{width:clamp(108px,13vw,150px); aspect-ratio:1; max-width:100%; border-radius:50%; border:none; background:var(--c); color:#fff; box-shadow:0 8px 0 rgba(0,0,0,.22); font:800 clamp(2.8rem,5.4vw,3.8rem) var(--font); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; padding:0}
.agebtn small{font-size:.3em; font-weight:700; margin-top:6px; opacity:.95}
.agebtn:active{transform:translateY(4px); box-shadow:0 4px 0 rgba(0,0,0,.22)}
.levelpill{background:var(--sky); color:var(--sea); border-radius:999px; padding:4px 16px; font-weight:800; font-size:1.1rem}
.qcard{display:flex; flex-direction:column; align-items:center; gap:clamp(12px,2.2vh,22px); text-align:center; flex:1; justify-content:center}
.qemoji{font-size:clamp(3.6rem,9vw,6rem); line-height:1}
.qtext{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; max-width:24ch; line-height:1.15}
.qex{font-size:clamp(1.1rem,2vw,1.4rem); color:var(--muted); font-weight:700; margin-top:-8px}
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:min(820px,100%)}
.pcard{border:5px solid var(--line); background:#fff; border-radius:24px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font:800 clamp(1.05rem,1.9vw,1.3rem) var(--font); color:var(--ink); cursor:pointer; box-shadow:0 5px 0 var(--line); line-height:1.15; text-align:center}
.pcard span{font-size:clamp(2.4rem,4.6vw,3.2rem); line-height:1}
.pcard.sel{border-color:var(--sea); background:#e8f4f8}
.dots{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.dots i{width:12px; height:12px; border-radius:50%; background:var(--line)}
.dots i.on{background:var(--sea)}
.back{position:absolute; left:18px; top:14px; border:none; background:transparent; font:800 1.2rem var(--font); color:var(--muted); cursor:pointer; padding:8px}
.fields{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; width:min(420px,100%)}
.fields label{display:flex; flex-direction:column; gap:6px; font-weight:800; font-size:1.2rem; flex:1 1 220px; min-width:0; text-align:left}
.fields input{font:700 1.6rem var(--font); padding:12px 18px; border:4px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); width:100%; box-sizing:border-box; user-select:text; -webkit-user-select:text}

/* result */
.result{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(16px,3vw,32px); flex:1; align-items:center}
.result>*{min-height:0}
@media (orientation:portrait), (max-width:820px){ .result{grid-template-columns:1fr} }
.xcard{border-radius:32px; padding:7px; background:linear-gradient(140deg,var(--tc),var(--sun))}
.xcard .in{background:var(--card); border-radius:26px; padding:clamp(16px,2.4vw,24px); display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.xcard .kicker{font-size:.95rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.xcard .figure{cursor:default; font-size:clamp(5rem,11vw,7.4rem)}
.badge{background:var(--tc); color:#fff; border-radius:999px; padding:4px 22px; font-weight:800; font-size:clamp(1.4rem,2.6vw,1.8rem)}
.sub{font-size:1.25rem; font-weight:700; color:var(--muted)}
.picks{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; font-weight:800; font-size:1.1rem; color:var(--muted)}
.picks span{background:var(--sky); border-radius:14px; padding:4px 10px; font-size:1.9rem; line-height:1.1; color:var(--ink); display:flex; align-items:center; gap:4px}
.picks span small{font-size:.9rem; font-weight:800; color:var(--muted)}
.tiles{display:flex; flex-direction:column; gap:12px; min-width:0}
.tiles>*{flex:none}
.tile{border-radius:24px; padding:12px 18px; display:flex; flex-direction:column; gap:9px; background:#fff; border:4px solid var(--line)}
.tile h3{margin:0; font-size:1.4rem; font-weight:800}
.tile.kit{border-color:var(--coral); background:#fff4f1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{background:var(--sand); border-radius:999px; padding:5px 14px; font-weight:700; font-size:1.08rem; line-height:1.2}
.tile.kit .chips span{background:#ffe1db}
.tile.grow .chips span{background:#ddf2e7}
.fine{font-size:.9rem; color:var(--muted); text-align:center; font-weight:600}
.confetti{position:fixed; top:-20px; width:12px; height:18px; z-index:60; pointer-events:none; border-radius:3px}
@media (prefers-reduced-motion:reduce){ .pulse,.bob,.pet.talk,.popin,.floaty,.isle.treasure.open{animation:none!important} .boat{transition:none} }

/* toy room (ages 2–3) */
.playmat{position:relative; width:min(380px,100%); aspect-ratio:1.2; border-radius:40px; background:radial-gradient(circle at 50% 58%, #fff6dc 0 52%, var(--sand) 53%); display:flex; align-items:center; justify-content:center; font-size:clamp(6rem,14vw,9rem); line-height:1; overflow:hidden}
.playmat .ph{opacity:.25}
.fx{position:absolute; bottom:16%; font-size:clamp(2rem,4vw,2.8rem); line-height:1; pointer-events:none; animation:rise 1.5s ease-out forwards}
@keyframes rise{to{transform:translateY(-190px) scale(1.3); opacity:0}}

/* music island */
.beatrow{display:flex; gap:14px; min-height:100px; align-items:center; justify-content:center; flex-wrap:wrap}
.beatrow .dot{width:82px; height:82px; border-radius:50%; background:#fff; border:5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:2.6rem; transition:transform .15s, border-color .15s}
.beatrow .dot.lit{transform:scale(1.2); border-color:var(--sun); background:#fff7d6}
.beatrow .dot.ok{border-color:var(--leaf); background:#effaf4}
.drums{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:18px; width:min(560px,100%)}
.drum{aspect-ratio:1; border-radius:50%; border:none; background:radial-gradient(circle at 50% 42%, #fff 0 46%, #ffe3a3 47% 100%); box-shadow:0 8px 0 var(--sun-dark); font-size:clamp(3.4rem,7vw,5rem); cursor:pointer; padding:0}
.drum.hit{animation:hit .25s}
@keyframes hit{50%{transform:scale(.88)}}

/* power locks and their checks */
.tbox{gap:clamp(6px,1.4vw,14px)}
.tbox .lk{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:clamp(2rem,4.2vw,2.9rem); line-height:1}
.tbox .lk small{font-size:.5em; background:#fff; border-radius:999px; padding:3px 7px}
.seqslots{display:flex; gap:12px; justify-content:center}
.slotbox{width:clamp(70px,9vw,96px); aspect-ratio:1; border-radius:22px; border:4px dashed var(--line); display:flex; align-items:center; justify-content:center; font:800 clamp(2rem,4.6vw,3rem) var(--font); color:var(--muted); line-height:1}
.slotbox.ok{border-style:solid; border-color:var(--leaf); background:#effaf4; color:var(--ink)}
.opt.grp{font-size:clamp(1.6rem,3vw,2.2rem); flex-wrap:wrap; align-content:center; gap:2px; padding:8px; line-height:1.1}
.tiles6{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(420px,100%)}
.opt.tile{aspect-ratio:1.3; font-size:clamp(2.4rem,5vw,3.4rem)}
.dict{display:flex; align-items:center; gap:20px}
.dict .say{width:96px; font-size:2.6rem}
.dict .dpic{font-size:clamp(3.4rem,7vw,4.6rem); line-height:1}
.trace{width:min(560px,100%); height:auto; aspect-ratio:4/3; background:#fff; border:5px solid var(--line); border-radius:28px; touch-action:none; box-sizing:border-box}
.tguide{fill:none; stroke:#ffeec4; stroke-width:46; stroke-linecap:round; stroke-linejoin:round}
.tdash{fill:none; stroke:var(--sun-dark); stroke-width:4; stroke-dasharray:10 12; stroke-linecap:round}
.tink{fill:none; stroke:var(--coral); stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.trace text{font-size:46px; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.paper .stroke{fill:none; stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.tlight{display:flex; gap:16px; background:var(--ink); padding:14px 22px; border-radius:999px}
.tlight i{width:clamp(64px,9vw,90px); aspect-ratio:1; border-radius:50%; background:#3b4b5e; transition:background .1s}
.tlight.r .r{background:#ef4444; box-shadow:0 0 30px #ef4444}
.tlight.g .g{background:#22c55e; box-shadow:0 0 30px #22c55e}
.opt.car{width:min(220px,60%); font-size:clamp(4.4rem,9vw,6rem)}
.opt.car.zoom{animation:zoom .5s}
@keyframes zoom{50%{transform:translateX(50px) scale(1.1)}}

/* parent intro */
.flabel{font-weight:800; font-size:1.2rem; width:100%; text-align:left}
.clsrow{display:flex; flex-wrap:wrap; gap:8px}
.clsbtn{border:3px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font:800 1.1rem var(--font); color:var(--ink); cursor:pointer}
.clsbtn.sel{border-color:var(--sea); background:#e8f4f8}

/* parent report */
.report{display:flex; flex-direction:column; gap:16px}
.rhead{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(16px,3vw,28px); align-items:start}
@media (orientation:portrait), (max-width:820px){ .rhead{grid-template-columns:1fr} }
.rsec{font-size:clamp(1.5rem,2.8vw,2rem); margin-top:8px}
.rnote{margin:-6px 0 0; font-weight:600; color:var(--muted)}
.tile p{margin:0; font-size:1.1rem; font-weight:600; line-height:1.4}
.tile.hero{background:var(--sky); border-color:var(--sky)}
.tile.hero h3{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.tile.warn{border-color:var(--sun); background:#fff8e1}
.tile.qr{flex-direction:row; align-items:center; gap:16px}
.tile.qr img{width:120px; height:120px; flex:none; border-radius:10px}
.tile.qr.off{display:none}
.powers{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.power{background:#fff; border:4px solid var(--line); border-radius:22px; padding:12px 14px; display:flex; flex-direction:column; gap:7px}
.power.focus{border-color:var(--coral)}
.phead{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:1.2rem; line-height:1.1}
.picon{font-size:1.8rem}
.pstat{margin-left:auto; font-size:.95rem; font-weight:800; border-radius:999px; padding:3px 10px; white-space:nowrap}
.power.ahead .pstat{background:#fff3c4} .power.ontrack .pstat{background:#ddf2e7} .power.practise .pstat{background:var(--sky)} .power.focus .pstat{background:#ffe1db}
.ladder{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin:4px 0}
.ladder i{height:16px; border-radius:8px; background:var(--line)}
.ladder i.on{background:var(--pc)}
.ladder i.age{box-shadow:0 0 0 3px var(--ink)}
.power .pl{font-size:1rem; font-weight:600; line-height:1.3; color:var(--muted)}
.power .pl b{color:var(--ink)}
.focus{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.fcard{background:#fff; border:4px solid var(--pc); border-radius:24px; padding:14px 18px; display:flex; flex-direction:column; gap:8px}
.fcard h3{margin:0; font-size:1.45rem}
.fcard h3 small{font-size:.7em; color:var(--muted)}
.fcard p{margin:0; font-weight:600; line-height:1.4}
.fcard .why i{color:var(--muted); font-size:.9em}
.fcard ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:7px; font-weight:600; line-height:1.4}
.fcard li.hook{list-style:none; margin-left:-1.2em; background:var(--sky); border-radius:14px; padding:8px 12px}
.roadmap{overflow-x:auto}
.roadmap table{border-collapse:separate; border-spacing:0; width:100%; min-width:680px; background:#fff; border:4px solid var(--line); border-radius:20px; overflow:hidden; font-size:1rem}
.roadmap th, .roadmap td{padding:8px 10px; text-align:left; border-bottom:2px solid var(--line); font-weight:600; vertical-align:top; line-height:1.3}
.roadmap th{background:var(--sand); font-weight:800}
.roadmap tr:last-child td{border-bottom:none}
.roadmap tr.now td{background:#fff3c4; font-weight:800}
.rbtns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.report-mode .bar{display:none}
@media print{
  html, body{height:auto; overflow:visible; background:#fff}
  body{padding:0}
  .app{height:auto; display:block}
  .bar, .rbtns, .tile.qr{display:none!important}
  .card{box-shadow:none; overflow:visible; border-radius:0; padding:0}
  .bob, .popin{animation:none!important}
  .power, .fcard, .tile, .xcard{break-inside:avoid}
}