/* ============ Wonder Kids – kid friendly theme ============ */
/* touch-action does NOT inherit, so it has to be set on every element:
   `manipulation` keeps scrolling and pinch but kills double-tap-to-zoom,
   which otherwise wrecks the games on an iPad. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;-webkit-touch-callout:none}
:root{
  --ink:#33303b; --ink-soft:#6b6675; --paper:#fff;
  --c1:#ff6b6b;--c2:#ffa94d;--c3:#ffd43b;--c4:#51cf66;--c5:#38d9a9;--c6:#4dabf7;--c7:#9775fa;--c8:#f783ac;--c9:#ff922b;
  --radius:26px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
html{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:"Baloo 2",ui-rounded,-apple-system,"Segoe UI Rounded","Comic Sans MS","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#a8d8ff 0%,#cdeaff 34%,#fff3bf 100%);
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  overflow:hidden;position:fixed;inset:0;
}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;touch-action:manipulation}
#app{position:absolute;inset:0;display:flex;flex-direction:column;padding:var(--sat) var(--sar) var(--sab) var(--sal)}
#fx{position:fixed;inset:0;z-index:999;pointer-events:none}

.screen{flex:1;display:flex;flex-direction:column;min-height:0;animation:screen-in .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes screen-in{from{opacity:0;transform:scale(.96) translateY(14px)}to{opacity:1;transform:none}}

/* ---------- decorations ---------- */
.clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cloud{position:absolute;font-size:42px;opacity:.8;filter:drop-shadow(0 6px 8px rgba(80,120,200,.15));animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-140px)}to{transform:translateX(110vw)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;border-radius:22px;padding:14px 26px;font-size:clamp(17px,2.4vw,22px);box-shadow:0 6px 0 rgba(51,48,59,.16);background:var(--paper);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(51,48,59,.16)}
.btn-primary{background:linear-gradient(180deg,#ffd43b,#fab005);color:#5c4a00}
.btn-go{background:linear-gradient(180deg,#51cf66,#2f9e44);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-round{width:58px;height:58px;border-radius:50%;background:var(--paper);box-shadow:0 5px 0 rgba(51,48,59,.16);font-size:26px;display:grid;place-items:center;transition:transform .08s,box-shadow .08s;flex:none}
.btn-round:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(51,48,59,.16)}

/* ---------- chips ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 14px}
.chip{padding:10px 20px;border-radius:999px;background:rgba(255,255,255,.75);font-weight:800;font-size:clamp(15px,2.2vw,19px);box-shadow:0 4px 0 rgba(51,48,59,.1);border:3px solid transparent;transition:transform .08s}
.chip:active{transform:translateY(2px)}
.chip.on{background:linear-gradient(180deg,#4dabf7,#1c7ed6);color:#fff;border-color:#fff}

/* ---------- language screen ---------- */
.lang-screen{align-items:center;justify-content:center;gap:26px;padding:24px;position:relative}
.lang-title{font-size:clamp(30px,6vw,52px);font-weight:800;text-align:center;text-shadow:0 3px 0 rgba(255,255,255,.6);animation:bounce-title 2.4s ease-in-out infinite}
@keyframes bounce-title{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.lang-sub{font-size:clamp(17px,3vw,24px);color:#1864ab;font-weight:700}
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,220px));gap:18px}
.lang-card{background:var(--paper);border-radius:var(--radius);padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 0 rgba(51,48,59,.14);border-bottom:6px solid #dee2e6;transition:transform .1s}
.lang-card:active{transform:translateY(4px)}
.lang-card .flag{font-size:clamp(44px,8vw,64px)}
.lang-card .lname{font-weight:800;font-size:clamp(19px,3vw,26px)}
.lang-card .sample{color:var(--ink-soft);font-size:clamp(15px,2.4vw,19px)}
.lang-card:nth-child(1){border-bottom-color:var(--c1)}.lang-card:nth-child(2){border-bottom-color:var(--c4)}
.lang-card:nth-child(3){border-bottom-color:var(--c7)}.lang-card:nth-child(4){border-bottom-color:var(--c2)}

/* ---------- home ---------- */
.home{position:relative;padding:14px clamp(12px,3vw,28px) 10px;gap:12px}
.home-head{display:flex;align-items:center;gap:12px;z-index:1}
.mascot{width:72px;height:72px;flex:none;border-radius:50%;background:var(--paper);box-shadow:0 5px 0 rgba(51,48,59,.14);display:grid;place-items:center;font-size:44px;animation:mascot-bob 3s ease-in-out infinite}
@keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.home-title{flex:1;min-width:0}
.home-title h1{font-size:clamp(24px,4.6vw,40px);font-weight:800;line-height:1.05;color:#1b5e9e;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.home-title p{font-size:clamp(13px,2vw,17px);color:#2b7cb3;font-weight:700}
.stars-chip{background:var(--paper);border-radius:999px;padding:10px 18px;font-weight:800;font-size:clamp(16px,2.4vw,21px);box-shadow:0 4px 0 rgba(51,48,59,.12);white-space:nowrap;flex:none}
.game-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:6px 4px 14px;z-index:1;align-content:start}
.game-card{position:relative;background:var(--paper);border-radius:var(--radius);padding:18px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 0 rgba(51,48,59,.13);border-bottom:8px solid #dee2e6;min-height:132px;justify-content:center;overflow:hidden}
.game-card:active{transform:translateY(4px)}
.gc-icon{font-size:clamp(44px,7vw,58px);filter:drop-shadow(0 5px 6px rgba(51,48,59,.18));animation:wiggle 3.2s ease-in-out infinite}
.game-card:nth-child(3n) .gc-icon{animation-delay:.6s}
.game-card:nth-child(3n+1) .gc-icon{animation-delay:1.2s}
@keyframes wiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-9deg) scale(1.06)}94%{transform:rotate(8deg) scale(1.06)}97%{transform:rotate(-4deg)}}
.gc-label{font-weight:800;font-size:clamp(15px,2.2vw,19px);text-align:center;line-height:1.1}
.gc-best{position:absolute;top:10px;inset-inline-end:10px;font-size:13px;font-weight:800;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 10px;color:#664d00;box-shadow:0 2px 0 rgba(51,48,59,.08)}
.g1{border-bottom-color:var(--c1)}.g2{border-bottom-color:var(--c7)}.g3{border-bottom-color:var(--c4)}
.g4{border-bottom-color:var(--c9)}.g5{border-bottom-color:var(--c8)}.g6{border-bottom-color:var(--c6)}
.g7{border-bottom-color:var(--c3)}.g8{border-bottom-color:var(--c5)}.g9{border-bottom-color:var(--c2)}
.g10{border-bottom-color:var(--c5)}
.home-foot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:4px 0 2px;z-index:1}
.lang-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border-radius:999px;padding:7px 14px;font-weight:800;font-size:15px;box-shadow:0 3px 0 rgba(51,48,59,.1)}
.lang-pill.on{background:linear-gradient(180deg,#51cf66,#2f9e44);color:#fff}
.parents-note{width:100%;text-align:center;color:#2b7cb3;font-size:12.5px;font-weight:700;opacity:.85}

/* ---------- game screen ---------- */
.game-top{display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,22px)}
.game-title{flex:1;min-width:0;text-align:center;font-weight:800;font-size:clamp(18px,3vw,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-chip{background:var(--paper);border-radius:999px;padding:8px 16px;font-weight:800;font-size:clamp(15px,2.2vw,19px);box-shadow:0 4px 0 rgba(51,48,59,.12);white-space:nowrap;flex:none}
.game-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.panel{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px clamp(12px,3vw,26px) 18px;position:relative;z-index:1}

/* ---------- alphabet ---------- */
.abc-card{background:var(--paper);border-radius:32px;box-shadow:0 10px 0 rgba(51,48,59,.13);padding:clamp(16px,3vh,30px) clamp(24px,6vw,60px);display:flex;flex-direction:column;align-items:center;gap:6px;max-width:92vw;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.abc-letter{font-size:clamp(90px,24vh,180px);font-weight:800;line-height:1;background:linear-gradient(180deg,#4dabf7,#1c7ed6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(28,126,214,.25))}
.abc-emoji{font-size:clamp(56px,14vh,96px);filter:drop-shadow(0 6px 8px rgba(51,48,59,.2))}
.abc-word{font-size:clamp(22px,4vw,34px);font-weight:800;color:#1b5e9e}
.abc-nav{display:flex;align-items:center;gap:16px;justify-content:center}
.abc-strip{display:flex;gap:8px;overflow-x:auto;padding:10px 6px;max-width:92vw;scrollbar-width:none}
.abc-strip::-webkit-scrollbar{display:none}
.abc-dot{flex:none;width:52px;height:52px;border-radius:16px;background:var(--paper);box-shadow:0 4px 0 rgba(51,48,59,.12);font-size:24px;font-weight:800;display:grid;place-items:center}
.abc-dot.on{background:linear-gradient(180deg,#ffd43b,#fab005);color:#5c4a00;transform:scale(1.12)}
.balloon-row{display:flex;flex-wrap:wrap;gap:clamp(10px,3vw,26px);justify-content:center;padding:10px}
.balloon-btn{width:clamp(88px,20vw,130px);height:clamp(100px,23vw,150px);font-size:clamp(40px,9vw,64px);font-weight:800;color:#fff;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;box-shadow:inset -8px -12px 0 rgba(0,0,0,.12),0 8px 0 rgba(51,48,59,.15);display:grid;place-items:center;text-shadow:0 3px 0 rgba(0,0,0,.18);animation:floaty 3s ease-in-out infinite;transition:transform .12s}
.balloon-btn:nth-child(2){animation-delay:.5s}.balloon-btn:nth-child(3){animation-delay:1s}.balloon-btn:nth-child(4){animation-delay:1.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.prompt-chip{background:var(--paper);border-radius:999px;padding:12px 26px;font-size:clamp(20px,3.6vw,30px);font-weight:800;box-shadow:0 6px 0 rgba(51,48,59,.13);display:flex;align-items:center;gap:12px;text-align:center}
.speak-btn{font-size:26px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ---------- spelling ---------- */
.spell-emoji{font-size:clamp(64px,16vh,110px);filter:drop-shadow(0 8px 10px rgba(51,48,59,.2));animation:floaty 3s ease-in-out infinite}
.slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;direction:ltr}
[dir="rtl"] .slots.ar-slots{flex-direction:row-reverse}
.slot{width:clamp(44px,9vw,62px);height:clamp(56px,11vw,76px);border-radius:14px;border:4px dashed #74c0fc;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:clamp(26px,5vw,38px);font-weight:800}
.slot.filled{border-style:solid;border-color:#2f9e44;background:#d3f9d8;animation:pop-in .25s}
.tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:6px;max-width:92vw}
.tile{min-width:clamp(48px,10vw,64px);height:clamp(56px,11vw,76px);padding:0 12px;border-radius:16px;background:linear-gradient(180deg,#fff,#e7f5ff);box-shadow:0 6px 0 rgba(51,48,59,.15);font-size:clamp(26px,5vw,38px);font-weight:800;display:grid;place-items:center;transition:transform .1s}
.tile:active{transform:translateY(3px)}
.tile.hint{animation:hint-glow 1s infinite}
@keyframes hint-glow{0%,100%{box-shadow:0 6px 0 rgba(51,48,59,.15),0 0 0 0 rgba(255,196,0,.8)}50%{box-shadow:0 6px 0 rgba(51,48,59,.15),0 0 0 14px rgba(255,196,0,0)}}
.progress-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,420px)}
.pdot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 2px 0 rgba(51,48,59,.1)}
.pdot.on{background:#2f9e44}.pdot.now{background:#ffd43b;transform:scale(1.25)}

/* ---------- quiz / options ---------- */
.options{display:grid;grid-template-columns:repeat(2,minmax(120px,190px));gap:14px;justify-content:center;width:min(94vw,560px)}
.option-btn{background:var(--paper);border-radius:24px;padding:18px 10px;font-size:clamp(30px,5.4vw,44px);font-weight:800;box-shadow:0 8px 0 rgba(51,48,59,.13);display:flex;flex-direction:column;align-items:center;gap:8px;border-bottom:6px solid #a5d8ff;min-height:110px;justify-content:center}
.option-btn .olabel{font-size:clamp(16px,2.4vw,22px);color:#1b5e9e}
.option-btn:active{transform:translateY(3px)}
.option-btn.good{background:#d3f9d8;border-bottom-color:#2f9e44;animation:pop-in .25s}
.option-btn.bad{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.option-btn.hint{animation:hint-glow 1s infinite}
.q-text{font-size:clamp(21px,4vw,32px);font-weight:800;text-align:center;background:var(--paper);border-radius:22px;padding:14px 24px;box-shadow:0 6px 0 rgba(51,48,59,.12);display:flex;align-items:center;gap:12px;max-width:92vw}

/* ---------- math ---------- */
.math-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;background:var(--paper);border-radius:26px;padding:18px 20px;box-shadow:0 8px 0 rgba(51,48,59,.12);max-width:94vw}
.math-emoji{font-size:clamp(30px,5.6vw,44px);filter:drop-shadow(0 3px 4px rgba(51,48,59,.15))}
.math-emoji.crossed{opacity:.35;filter:grayscale(1);position:relative}
.math-emoji.crossed::after{content:"✖";position:absolute;inset:0;display:grid;place-items:center;color:#fa5252;font-size:.9em;font-weight:900}
.math-symbol{font-size:clamp(34px,6vw,50px);font-weight:800;color:#1c7ed6;padding:0 8px}
.num-answers{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.num-btn{width:clamp(74px,15vw,96px);height:clamp(74px,15vw,96px);border-radius:22px;background:var(--paper);box-shadow:0 7px 0 rgba(51,48,59,.14);font-size:clamp(30px,6vw,42px);font-weight:800;display:grid;place-items:center;border-bottom:6px solid #a5d8ff}
.num-btn:active{transform:translateY(3px)}
.num-btn.good{background:#d3f9d8;border-bottom-color:#2f9e44;animation:pop-in .25s}
.num-btn.bad{animation:shake .45s}
.num-btn.hint{animation:hint-glow 1s infinite}

/* ---------- memory puzzle ---------- */
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(64px,110px));gap:clamp(8px,1.6vw,14px);justify-content:center}
.mem-card{aspect-ratio:3/4;perspective:600px;position:relative}
.mem-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.mem-card.flipped .mem-inner,.mem-card.matched .mem-inner{transform:rotateY(180deg)}
.mem-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;display:grid;place-items:center;box-shadow:0 6px 0 rgba(51,48,59,.14)}
.mem-front{background:linear-gradient(160deg,#66d9e8,#4dabf7);font-size:clamp(26px,4.6vw,40px);color:#fff;font-weight:800}
.mem-front::after{content:"?";font-size:1.2em;text-shadow:0 3px 0 rgba(0,0,0,.15)}
.mem-back{background:var(--paper);transform:rotateY(180deg);font-size:clamp(32px,6vw,52px)}
.mem-card.matched .mem-back{background:#d3f9d8;animation:matched-pop .5s}
@keyframes matched-pop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.16)}100%{transform:rotateY(180deg) scale(1)}}
.shadow-box{background:var(--paper);border-radius:28px;padding:clamp(18px,4vh,34px);box-shadow:0 10px 0 rgba(51,48,59,.13);display:grid;place-items:center;gap:8px;animation:pop-in .3s}
.shadow-emoji{font-size:clamp(84px,20vh,140px);filter:brightness(0) drop-shadow(0 0 14px rgba(51,48,59,.25))}
.shadow-reveal{font-size:clamp(84px,20vh,140px);animation:pop-in .4s}
.shadow-word{font-size:clamp(22px,4vw,32px);font-weight:800;color:#1b5e9e}

/* ---------- canvas games ---------- */
.canvas-wrap{flex:1;min-height:0;position:relative}
canvas.game-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.hud-top{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:94%}
.hud-chip{background:rgba(255,255,255,.94);border-radius:999px;padding:10px 20px;font-weight:800;font-size:clamp(17px,2.8vw,24px);box-shadow:0 5px 0 rgba(51,48,59,.16);display:flex;align-items:center;gap:10px;text-align:center}
.hud-chip b{color:#e8590c;font-size:1.25em}
.hud-bar{width:min(60vw,300px);height:14px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 2px 4px rgba(51,48,59,.2);overflow:hidden}
.hud-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#51cf66,#94d82d,#ffd43b);border-radius:999px;transition:width .3s}
.jump-btn{position:absolute;bottom:16px;inset-inline-end:16px;width:clamp(76px,16vw,100px);height:clamp(76px,16vw,100px);border-radius:50%;background:linear-gradient(180deg,#ffd43b,#f59f00);box-shadow:0 8px 0 rgba(146,64,14,.35),inset 0 -6px 0 rgba(0,0,0,.1);font-size:clamp(38px,8vw,48px);z-index:5;display:grid;place-items:center;animation:pulse 2s infinite}
.jump-btn:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(146,64,14,.35)}
.steer-btn{position:absolute;bottom:16px;width:clamp(70px,15vw,92px);height:clamp(70px,15vw,92px);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 0 rgba(51,48,59,.2);font-size:clamp(32px,7vw,42px);z-index:5;display:grid;place-items:center}
.steer-btn:active{transform:translateY(3px)}
.steer-l{inset-inline-start:16px}.steer-r{inset-inline-end:16px}
.canvas-note{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.9);border-radius:999px;padding:8px 20px;font-weight:800;color:#1b5e9e;box-shadow:0 4px 0 rgba(51,48,59,.14);z-index:4;animation:pop-in .3s}

/* ---------- talk ---------- */
.talk-card{background:var(--paper);border-radius:32px;box-shadow:0 10px 0 rgba(51,48,59,.13);padding:clamp(20px,4vh,36px) clamp(26px,6vw,54px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:92vw}
.talk-emoji{font-size:clamp(72px,18vh,120px);animation:floaty 3s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(51,48,59,.2))}
.talk-word{font-size:clamp(34px,7vw,58px);font-weight:800;color:#1b5e9e;line-height:1.1}
.mic-btn{width:clamp(88px,18vw,110px);height:clamp(88px,18vw,110px);border-radius:50%;background:linear-gradient(180deg,#ff6b6b,#e03131);box-shadow:0 8px 0 rgba(134,8,28,.4);font-size:clamp(40px,8vw,50px);display:grid;place-items:center;color:#fff}
.mic-btn.listening{animation:mic-pulse .9s infinite}
@keyframes mic-pulse{0%,100%{transform:scale(1);box-shadow:0 8px 0 rgba(134,8,28,.4),0 0 0 0 rgba(255,107,107,.6)}50%{transform:scale(1.08);box-shadow:0 8px 0 rgba(134,8,28,.4),0 0 0 26px rgba(255,107,107,0)}}
.talk-status{font-size:clamp(17px,2.8vw,22px);font-weight:800;min-height:1.5em;color:#495057}
.talk-status.good{color:#2f9e44;animation:pop-in .3s}
.talk-status.close{color:#e8590c}
.talk-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---------- celebration ---------- */
.overlay{position:fixed;inset:0;z-index:500;background:rgba(51,48,59,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:fade-in .25s}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.party{background:var(--paper);border-radius:34px;padding:clamp(24px,5vh,44px) clamp(28px,7vw,64px);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 14px 0 rgba(0,0,0,.2);animation:party-in .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes party-in{from{transform:scale(.5) rotate(-6deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.party-mascot{font-size:clamp(64px,16vh,96px);animation:party-jump .8s ease-in-out infinite}
@keyframes party-jump{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-22px) scale(.94,1.06)}55%{transform:translateY(0) scale(1.1,.9)}}
.party-text{font-size:clamp(28px,5.4vw,44px);font-weight:800;color:#2f9e44}
.party-stars{font-size:clamp(26px,4vw,36px)}
.party-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- modal / settings ---------- */
.modal-card{background:var(--paper);border-radius:30px;padding:24px;width:min(92vw,480px);max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-shadow:0 14px 0 rgba(0,0,0,.2);animation:party-in .4s cubic-bezier(.34,1.56,.64,1)}
.modal-title{font-size:clamp(24px,4vw,32px);font-weight:800;display:flex;align-items:center;gap:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;font-size:clamp(16px,2.6vw,20px);background:#f1f3f5;border-radius:18px;padding:12px 18px}
.switch{position:relative;width:62px;height:34px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ced4da;border-radius:999px;transition:.2s;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.slider::before{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;top:4px;inset-inline-start:4px;transition:.2s;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.switch input:checked+.slider{background:#40c057}
.switch input:checked+.slider::before{transform:translateX(28px)}
[dir="rtl"] .switch input:checked+.slider::before{transform:translateX(-28px)}
.btn-danger{background:linear-gradient(180deg,#ff8787,#e03131);color:#fff}
.modal-note{font-size:13.5px;color:var(--ink-soft);font-weight:700;text-align:center;line-height:1.5}

/* ---------- toast ---------- */
.toast{position:fixed;top:calc(var(--sat) + 14px);left:50%;transform:translateX(-50%);z-index:600;background:var(--paper);border-radius:999px;padding:12px 24px;font-weight:800;font-size:clamp(15px,2.4vw,19px);box-shadow:0 6px 0 rgba(51,48,59,.18);animation:toast-in 3.2s forwards;display:flex;gap:10px;align-items:center;max-width:92vw;text-align:center}
@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-30px)}8%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-20px)}}

.big-msg{font-size:clamp(22px,4vw,32px);font-weight:800;color:#1b5e9e;text-align:center}

/* ---------- word cards ---------- */
.word-card{background:var(--paper);border-radius:32px;box-shadow:0 10px 0 rgba(51,48,59,.13);padding:clamp(18px,4vh,34px) clamp(26px,7vw,64px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:92vw;animation:pop-in .3s;cursor:pointer}
.wc-emoji{font-size:clamp(70px,18vh,120px);filter:drop-shadow(0 8px 10px rgba(51,48,59,.2));animation:floaty 3s ease-in-out infinite}
.wc-word{font-size:clamp(30px,6.5vw,50px);font-weight:800;color:#1b5e9e;line-height:1.1}
.wc-meaning{font-size:clamp(16px,2.8vw,22px);color:var(--ink-soft);font-weight:700}
.wc-count{font-size:clamp(14px,2.2vw,18px);color:#74c0fc;font-weight:800}

/* ---------- story time ---------- */
.title-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;width:min(94vw,540px)}
.title-btn{background:var(--paper);border-radius:24px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 7px 0 rgba(51,48,59,.13);border-bottom:6px solid #a5d8ff;font-weight:800;font-size:clamp(16px,2.6vw,21px)}
.title-btn:active{transform:translateY(3px)}
.tb-art{font-size:clamp(40px,7vw,56px)}
.story-page{background:var(--paper);border-radius:28px;padding:clamp(18px,4vh,30px) clamp(20px,5vw,40px);max-width:min(92vw,560px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:0 9px 0 rgba(51,48,59,.13);animation:pop-in .3s}
.story-art{font-size:clamp(64px,16vh,110px);filter:drop-shadow(0 8px 10px rgba(51,48,59,.2));animation:floaty 3.4s ease-in-out infinite}
.story-title{font-size:clamp(24px,4.6vw,36px);font-weight:800;color:#1b5e9e}
.story-text{font-size:clamp(19px,3.4vw,26px);font-weight:700;line-height:1.55}
.poem-lines{font-size:clamp(20px,3.8vw,28px);font-weight:700;line-height:1.9;white-space:pre-line}

/* ---------- trace & draw ---------- */
.trace-wrap{min-height:clamp(260px,52vh,460px);width:100%;background:#fff;border-radius:28px;box-shadow:0 9px 0 rgba(51,48,59,.13);margin:0 4px}
.trace-guide{pointer-events:none}
.trace-tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-bottom:6px}
.option-btn.text-only .olabel.big{font-size:clamp(24px,4.4vw,36px);color:#33303b}
.center-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:12px}

@media (max-width:560px){
  .lang-grid{grid-template-columns:repeat(2,minmax(130px,1fr));width:min(92vw,430px)}
  .mem-grid{grid-template-columns:repeat(4,minmax(62px,1fr));width:min(94vw,420px)}
}
@media (max-height:520px){
  .mascot{width:56px;height:56px;font-size:34px}
  .game-card{min-height:104px;padding:10px 6px 10px}
}

/* ============================================================================
   v7 – personalisation, bigger iPad targets, and the four new games
============================================================================ */

/* ---------- bigger tap targets (a 4-year-old's finger is ~20mm) ---------- */
.big-round{width:clamp(64px,9vw,86px);height:clamp(64px,9vw,86px);font-size:clamp(28px,4vw,38px)}
.big-btn{padding:18px 32px;font-size:clamp(19px,2.8vw,26px);min-height:62px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the child's photo as the mascot ---------- */
.mascot.has-photo{padding:0;overflow:hidden;border:4px solid #fff;background:#ffd43b}
.mascot-photo{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

.party-mascot{display:grid;place-items:center}
.party-photo{width:clamp(96px,18vh,140px);height:clamp(96px,18vh,140px);border-radius:50%;
  object-fit:cover;border:6px solid #ffd43b;box-shadow:0 8px 0 rgba(51,48,59,.2);
  animation:party-jump .8s ease-in-out infinite}
.party-name{font-size:clamp(22px,4vw,32px);font-weight:800;color:#1b5e9e}

/* ---------- settings: name + photos ---------- */
.name-row{display:flex;gap:10px;align-items:center}
.name-input{flex:1;min-width:0;font-family:inherit;font-weight:800;color:var(--ink);
  font-size:clamp(20px,3.4vw,26px);padding:14px 18px;border-radius:18px;border:3px solid #dee2e6;
  background:#f8f9fa;text-align:center}
.name-input:focus{outline:none;border-color:#4dabf7;background:#fff}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.photo-cell{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#f1f3f5;
  box-shadow:0 4px 0 rgba(51,48,59,.12);border:4px solid transparent;display:grid;place-items:center}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell.is-face{border-color:#40c057}
.photo-cell.is-face::after{content:"🙂";position:absolute;bottom:2px;inset-inline-end:4px;font-size:18px}
.photo-del{position:absolute;top:2px;inset-inline-end:2px;width:26px;height:26px;border-radius:50%;
  background:rgba(224,49,49,.92);color:#fff;font-size:15px;font-weight:800;display:grid;place-items:center}
.photo-add{font-size:32px;color:#1c7ed6;background:#e7f5ff;border:4px dashed #74c0fc}

/* ---------- Letter Land extras ---------- */
.abc-letter{border:none;background:linear-gradient(180deg,#4dabf7,#1c7ed6);-webkit-background-clip:text;background-clip:text}
.abc-word{background:none;border:none}
.balloon-btn:active{transform:scale(.94)}
.balloon-pop{animation:balloon-pop .45s forwards!important}
@keyframes balloon-pop{to{transform:scale(1.7);opacity:0}}
.balloon-oops{animation:shake .45s!important}
.abc-sound-hint{font-size:clamp(50px,11vh,84px);background:var(--paper);border-radius:28px;
  padding:10px 26px;box-shadow:0 7px 0 rgba(51,48,59,.12);animation:floaty 3s ease-in-out infinite}
.wiggle{animation:wiggle-now .6s}
@keyframes wiggle-now{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}
  60%{transform:rotate(10deg) scale(1.1)}}

/* ============================================================================
   Talking Buddy
============================================================================ */
.buddy-stage{position:relative;flex:1;min-height:0;width:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-end;
  padding:4px 12px;overflow:hidden}
/* The character scales to the free HEIGHT, so it never pushes the action
   buttons off the bottom of an iPad in landscape. */
.buddy-holder{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;
  justify-content:center;background:none;
  filter:drop-shadow(0 12px 14px rgba(51,48,59,.22));
  animation:bd-breathe 3.4s ease-in-out infinite;transform-origin:50% 92%}
@keyframes bd-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015)}}
.bd-svg{height:100%;width:auto;max-width:min(76vw,340px);display:block;overflow:visible}

/* character parts */
.bd-shadow{fill:rgba(51,48,59,.14)}
.bd-shirt{fill:#a9cde0}
.bd-neck{fill:#c08858}
.bd-skin{fill:#cf9361}
.bd-head{fill:#d59a68}
.bd-hair{fill:#201a19}
.bd-brow{stroke:#2a211f;stroke-width:5;stroke-linecap:round;fill:none}
.bd-white{fill:#fff}
.bd-iris{fill:#3b2a20}
.bd-glint{fill:#fff;opacity:.95}
.bd-nose{stroke:#ab7147;stroke-width:4;stroke-linecap:round;fill:none}
.bd-blush{fill:#e8846f;opacity:.3}
.bd-mouth{fill:#8c3b3b;transform-box:fill-box;transform-origin:center;transition:transform .12s}
.bd-tongue{fill:#e26d7d}
.bd-eyes{transform-box:fill-box;transform-origin:center;animation:bd-blink 5.2s infinite}
@keyframes bd-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}

/* tiger */
.bd-is-tiger .bd-skin,.bd-is-tiger .bd-head{fill:#f59f00}
.bd-is-tiger .bd-neck{fill:#e8890c}
.bd-is-tiger .bd-shirt{fill:#74c0fc}
.bd-inner-ear{fill:#ffd8a8}
.bd-stripe{stroke:#3b2a20;stroke-width:7;stroke-linecap:round;fill:none}
.bd-muzzle{fill:#fff3bf}
.bd-nose-tri{fill:#5f3a2e}
.bd-whisker{stroke:#5f3a2e;stroke-width:3;stroke-linecap:round;fill:none;opacity:.7}

/* my photo – the real face is never drawn over, it nods and the ring pulses */
.bd-ring{fill:#ffd43b;transform-box:fill-box;transform-origin:center}
.bd-face{transform-box:fill-box;transform-origin:center bottom}
.talking .bd-face{animation:bd-face-talk .3s infinite alternate}
@keyframes bd-face-talk{from{transform:scaleY(1)}to{transform:scaleY(1.035) translateY(-1px)}}
.talking .bd-ring{animation:bd-ring-talk .5s infinite alternate}
@keyframes bd-ring-talk{from{fill:#ffd43b}to{fill:#ffa94d}}

/* reactions */
.buddy-holder.talking .bd-mouth{animation:bd-talk .26s infinite alternate}
@keyframes bd-talk{from{transform:scaleY(.45)}to{transform:scaleY(1.45)}}
.buddy-holder.talking{animation:bd-talk-bob .5s ease-in-out infinite}
@keyframes bd-talk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.buddy-holder.poked{animation:bd-poked .55s cubic-bezier(.36,1.6,.5,1)}
@keyframes bd-poked{0%{transform:scale(1)}30%{transform:scale(1.14) rotate(-6deg)}
  60%{transform:scale(.94) rotate(5deg)}100%{transform:scale(1)}}

.buddy-holder.eating{animation:bd-eat .3s 4 alternate}
@keyframes bd-eat{from{transform:scaleY(1)}to{transform:scaleY(.92) translateY(6px)}}

.buddy-holder.dancing{animation:bd-dance .55s ease-in-out infinite}
@keyframes bd-dance{0%,100%{transform:rotate(-7deg) translateY(0)}
  50%{transform:rotate(7deg) translateY(-14px)}}

.buddy-holder.asleep{animation:bd-sleep 3.4s ease-in-out infinite}
.buddy-holder.asleep .bd-eyes{animation:none;transform:scaleY(.08)}
.buddy-holder.asleep .bd-mouth{animation:none;transform:scale(.5)}
@keyframes bd-sleep{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-4deg) scale(1.03)}}

.buddy-holder.listening{animation:bd-listen .9s ease-in-out infinite}
@keyframes bd-listen{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.buddy-holder.listening .bd-head{filter:drop-shadow(0 0 16px rgba(255,107,107,.8))}

/* speech bubble */
/* Sits in the flow above the character and keeps its space when hidden,
   so showing a line never makes the buddy jump. */
.buddy-bubble{position:relative;z-index:6;flex:none;margin-bottom:10px;
  background:#fff;border-radius:24px;padding:10px 22px;max-width:min(88%,540px);
  font-size:clamp(16px,2.5vw,23px);font-weight:800;color:#1b5e9e;text-align:center;
  box-shadow:0 7px 0 rgba(51,48,59,.16);min-height:2.4em;display:grid;place-items:center}
.buddy-bubble::after{content:"";position:absolute;bottom:-12px;left:50%;margin-left:-10px;
  border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.buddy-bubble.pop{animation:pop-in .28s cubic-bezier(.34,1.56,.64,1)}

.buddy-hint{flex:none;font-size:clamp(14px,2.1vw,19px);font-weight:800;color:#1b5e9e;
  text-align:center;padding:4px 14px 0;min-height:1.6em}

.buddy-fly{position:absolute;left:50%;top:38%;font-size:clamp(38px,8vw,56px);pointer-events:none;
  z-index:7;animation:bd-fly 1.4s ease-out forwards}
@keyframes bd-fly{from{transform:translate(-50%,0) scale(.6);opacity:1}
  to{transform:translate(-50%,-130px) scale(1.4) rotate(22deg);opacity:0}}
.buddy-fly.to-mouth{top:5%;animation:bd-fly-in 1.4s ease-in forwards}
@keyframes bd-fly-in{from{transform:translate(-50%,-60px) scale(1.3);opacity:1}
  to{transform:translate(-50%,120px) scale(.3);opacity:0}}

/* 4 x 2 grid: every action is the same big, predictable target */
.buddy-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.6vw,14px);
  width:min(94vw,620px);margin:0 auto;padding:6px 0 12px}
.buddy-act{background:var(--paper);border-radius:22px;padding:10px 6px;
  display:flex;flex-direction:column;align-items:center;gap:3px;min-height:clamp(74px,11vh,96px);
  justify-content:center;
  box-shadow:0 7px 0 rgba(51,48,59,.14);border-bottom:6px solid #dee2e6;transition:transform .09s}
.buddy-act:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(51,48,59,.14)}
.ba-icon{font-size:clamp(28px,5vw,40px)}
.ba-label{font-size:clamp(12px,1.9vw,16px);font-weight:800;color:#1b5e9e}
.act-talk{border-bottom-color:var(--c1)}.act-feed{border-bottom-color:var(--c4)}
.act-poke{border-bottom-color:var(--c3)}.act-dance{border-bottom-color:var(--c7)}
.act-sleep{border-bottom-color:var(--c6)}
.act-peek{border-bottom-color:var(--c2)}.act-sing{border-bottom-color:var(--c5)}
.act-wave{border-bottom-color:var(--c8)}

/* ============================================================================
   Draw Board
============================================================================ */
.draw-panel{gap:8px}
.draw-hint{font-size:clamp(16px,2.6vw,23px);font-weight:800;color:#1b5e9e;text-align:center;
  min-height:1.5em;padding:0 10px}
.draw-wrap{position:relative;width:min(96vw,760px);flex:1;min-height:clamp(220px,42vh,470px);
  background:#fff;border-radius:28px;box-shadow:0 9px 0 rgba(51,48,59,.13);overflow:hidden}
.draw-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.draw-guide{pointer-events:none}
.draw-ink{touch-action:none}

.draw-palette{display:flex;gap:clamp(7px,1.6vw,13px);flex-wrap:wrap;justify-content:center;padding:0 8px}
.color-dot{width:clamp(38px,6.6vw,52px);height:clamp(38px,6.6vw,52px);border-radius:50%;
  box-shadow:0 4px 0 rgba(51,48,59,.2);border:4px solid #fff;transition:transform .1s}
.color-dot.on{transform:scale(1.22);border-color:#ffd43b;box-shadow:0 4px 0 rgba(51,48,59,.3)}
.color-dot:active{transform:scale(1.1)}

.draw-stickers{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:0 8px}
.sticker-btn{width:clamp(36px,6vw,48px);height:clamp(36px,6vw,48px);border-radius:14px;
  background:rgba(255,255,255,.8);font-size:clamp(20px,3.4vw,27px);display:grid;place-items:center;
  box-shadow:0 3px 0 rgba(51,48,59,.12)}
.sticker-btn.on{background:#ffd43b;transform:scale(1.14)}

.draw-tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-bottom:8px}
.draw-tool{background:var(--paper);border-radius:20px;padding:12px 18px;font-weight:800;
  font-size:clamp(15px,2.3vw,20px);box-shadow:0 6px 0 rgba(51,48,59,.14);min-height:54px;
  display:inline-flex;align-items:center;gap:7px}
.draw-tool:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(51,48,59,.14)}
.draw-tool.on{background:linear-gradient(180deg,#ffd43b,#fab005);color:#5c4a00}
.draw-tool.btn-go{background:linear-gradient(180deg,#51cf66,#2f9e44);color:#fff}

/* ============================================================================
   Feelings
============================================================================ */
.feel-card{background:var(--paper);border-radius:32px;box-shadow:0 10px 0 rgba(51,48,59,.13);
  padding:clamp(16px,3.4vh,30px) clamp(22px,5vw,50px);display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:min(94vw,620px);text-align:center;animation:pop-in .3s}
.feel-emoji{font-size:clamp(76px,19vh,140px);background:none;filter:drop-shadow(0 7px 9px rgba(51,48,59,.2))}
.feel-word{font-size:clamp(28px,5.4vw,44px);font-weight:800;color:#1b5e9e}
.feel-why{font-size:clamp(16px,2.5vw,22px);font-weight:700;color:var(--ink-soft);line-height:1.5}
.feel-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 6px;max-width:94vw;scrollbar-width:none}
.feel-strip::-webkit-scrollbar{display:none}
.feel-dot{flex:none;width:clamp(50px,8vw,62px);height:clamp(50px,8vw,62px);border-radius:18px;
  background:var(--paper);box-shadow:0 4px 0 rgba(51,48,59,.12);font-size:clamp(26px,4.4vw,34px);
  display:grid;place-items:center}
.feel-dot.on{background:linear-gradient(180deg,#ffd43b,#fab005);transform:scale(1.12)}

.feel-scene-emoji{font-size:clamp(66px,16vh,112px);animation:floaty 3s ease-in-out infinite}
.feel-story{font-size:clamp(19px,3.3vw,28px);font-weight:800;color:var(--ink);line-height:1.45}
.feel-options{display:flex;gap:clamp(10px,2.4vw,18px);flex-wrap:wrap;justify-content:center;
  width:min(94vw,620px)}
.feel-opt{background:var(--paper);border-radius:24px;padding:16px clamp(14px,3vw,26px);
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:clamp(100px,22vw,160px);
  box-shadow:0 8px 0 rgba(51,48,59,.13);border-bottom:6px solid #a5d8ff}
.feel-opt:active{transform:translateY(3px)}
.fo-em{font-size:clamp(40px,7vw,58px)}
.fo-l{font-size:clamp(15px,2.3vw,21px);font-weight:800;color:#1b5e9e}
.feel-opt.good{background:#d3f9d8;border-bottom-color:#2f9e44;animation:pop-in .25s}
.feel-opt.bad{animation:shake .45s}

.mirror-row{display:flex;align-items:center;gap:clamp(10px,3vw,24px);justify-content:center}
.mirror-face{font-size:clamp(64px,15vh,116px);animation:floaty 3s ease-in-out infinite}
.mirror-arrow{font-size:clamp(26px,4vw,38px)}
.mirror-me{width:clamp(86px,17vh,140px);height:clamp(86px,17vh,140px);border-radius:50%;
  overflow:hidden;border:6px solid #ffd43b;box-shadow:0 7px 0 rgba(51,48,59,.18);
  display:grid;place-items:center;background:#f1f3f5}
.mirror-photo{width:100%;height:100%;object-fit:cover;display:block}
.mirror-empty{font-size:clamp(44px,9vh,70px);border-color:#dee2e6}

.calm-card{gap:18px;padding:clamp(24px,5vh,44px) clamp(26px,6vw,56px)}
.breath-ball{width:clamp(110px,24vh,190px);height:clamp(110px,24vh,190px);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#d0ebff,#74c0fc);display:grid;place-items:center;
  font-size:clamp(44px,9vh,72px);box-shadow:0 8px 0 rgba(28,126,214,.25);
  transition:transform 3.4s ease-in-out}
.breath-ball.in{transform:scale(1.32)}
.breath-ball.out{transform:scale(.78)}
.breath-label{font-size:clamp(18px,3vw,26px);font-weight:800;color:#1b5e9e;min-height:2.4em}
.breath-count{font-size:clamp(22px,3.6vw,30px);letter-spacing:4px;min-height:1.3em}

/* ============================================================================
   Science Lab
============================================================================ */
.lab-title{font-size:clamp(20px,3.6vw,30px);font-weight:800;color:#1b5e9e;text-align:center;
  background:var(--paper);border-radius:999px;padding:10px 26px;box-shadow:0 5px 0 rgba(51,48,59,.12)}
.lab-item{background:var(--paper);border-radius:30px;padding:clamp(14px,3vh,26px) clamp(28px,7vw,60px);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 10px 0 rgba(51,48,59,.13);animation:pop-in .3s}
.li-em{font-size:clamp(66px,16vh,118px);filter:drop-shadow(0 7px 9px rgba(51,48,59,.2))}
.li-w{font-size:clamp(23px,4.2vw,34px);font-weight:800;color:#1b5e9e}
.lab-item.fly-left{animation:fly-left .6s forwards}
.lab-item.fly-right{animation:fly-right .6s forwards}
@keyframes fly-left{to{transform:translate(-46vw,34vh) scale(.3) rotate(-26deg);opacity:0}}
@keyframes fly-right{to{transform:translate(46vw,34vh) scale(.3) rotate(26deg);opacity:0}}

.lab-baskets{display:flex;gap:clamp(14px,4vw,34px);justify-content:center;width:min(94vw,620px)}
.lab-basket{flex:1;max-width:260px;background:var(--paper);border-radius:26px;
  padding:clamp(14px,2.6vh,22px) 10px;display:flex;flex-direction:column;align-items:center;gap:7px;
  box-shadow:0 9px 0 rgba(51,48,59,.14);border-bottom:7px solid #a5d8ff;min-height:clamp(120px,19vh,164px);
  justify-content:center}
.lab-basket:active{transform:translateY(4px)}
.basket-0{border-bottom-color:var(--c4)}
.basket-1{border-bottom-color:var(--c7)}
.lb-em{font-size:clamp(42px,8vw,64px)}
.lb-l{font-size:clamp(15px,2.4vw,22px);font-weight:800;color:#1b5e9e;text-align:center;line-height:1.25}
.lab-basket.good{background:#d3f9d8;animation:pop-in .25s}
.lab-basket.bad{animation:shake .45s}
.lab-hint{font-size:clamp(14px,2.2vw,19px);font-weight:800;color:var(--ink-soft);text-align:center;padding:0 12px}

/* ============================================================================
   iPad tuning – roomier layout on big touch screens
============================================================================ */
@media (min-width:820px){
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
  .game-card{min-height:168px}
  .options{grid-template-columns:repeat(2,minmax(180px,250px));gap:20px}
  .option-btn{min-height:140px}
  .balloon-btn{width:150px;height:174px;font-size:72px}
  .buddy-holder{width:min(52vw,400px)}
  .draw-wrap{min-height:clamp(320px,48vh,560px)}
}
/* side-by-side when the iPad is held in landscape */
@media (min-width:900px) and (orientation:landscape){
  .feel-options{flex-wrap:nowrap}
  .draw-panel{padding-bottom:10px}
}

/* ============================================================================
   v9 – buddy v2, more words, my family, my town, web hero
============================================================================ */

/* ---------- buddy: parents, photo toggle, recording ---------- */
.bd-is-mama .bd-shirt{fill:#f7a8c4}
.bd-is-mama .bd-hair{fill:#2b1d17}
.bd-is-papa .bd-shirt{fill:#8ab4c8}
.bd-is-papa .bd-hair{fill:#231a18}
.bd-beard{fill:#231a18;opacity:.92}
.bd-earring{fill:#ffd43b}

.buddy-photo-toggle{position:absolute;top:6px;inset-inline-end:8px;z-index:7;
  width:clamp(50px,8vw,62px);height:clamp(50px,8vw,62px);border-radius:50%;
  background:var(--paper);box-shadow:0 5px 0 rgba(51,48,59,.18);
  font-size:clamp(23px,3.6vw,28px);display:grid;place-items:center}
.buddy-photo-toggle.on{background:linear-gradient(180deg,#ffd43b,#fab005)}
.buddy-photo-toggle:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(51,48,59,.18)}

/* the mouth follows the microphone level while recording */
.buddy-holder.listening .bd-mouth{transform:scaleY(var(--mouth,1))}
.buddy-act.bumped{animation:act-bump .3s}
@keyframes act-bump{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
.buddy-act.recording{background:linear-gradient(180deg,#ff8787,#e03131);color:#fff;
  animation:rec-pulse .8s infinite}
.buddy-act.recording .ba-label{color:#fff}
@keyframes rec-pulse{0%,100%{box-shadow:0 7px 0 rgba(134,8,28,.4)}
  50%{box-shadow:0 7px 0 rgba(134,8,28,.4),0 0 0 14px rgba(224,49,49,.22)}}
.buddy-holder.repeating{animation:bd-repeat .34s infinite alternate}
@keyframes bd-repeat{from{transform:scale(1)}to{transform:scale(1.035)}}
.buddy-holder.waving{animation:bd-wave .5s 3}
@keyframes bd-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}
.buddy-holder.hiding{animation:bd-hide .5s forwards}
@keyframes bd-hide{to{transform:translateY(42%) scale(.8);opacity:.12}}

/* ---------- letter land: more words ---------- */
.abc-more{width:min(96vw,760px);display:flex;flex-direction:column;align-items:center;gap:6px}
.abc-more-title{font-size:clamp(14px,2.2vw,19px);font-weight:800;color:#1b5e9e;opacity:.85}
.abc-more-row{display:flex;gap:10px;overflow-x:auto;padding:4px 8px 10px;max-width:96vw;
  scrollbar-width:none}
.abc-more-row::-webkit-scrollbar{display:none}
.abc-more-item{flex:none;background:var(--paper);border-radius:20px;padding:10px 14px;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:clamp(80px,13vw,108px);
  box-shadow:0 5px 0 rgba(51,48,59,.12);border-bottom:5px solid #a5d8ff}
.abc-more-item:active{transform:translateY(3px)}
.abc-more-item.pulse{animation:pop-in .4s;background:#fff9db;border-bottom-color:#fab005}
.am-emoji{font-size:clamp(30px,5vw,42px)}
.am-word{font-size:clamp(13px,2vw,17px);font-weight:800;color:#1b5e9e}

/* ---------- my family ---------- */
.fam-card{background:var(--paper);border-radius:32px;box-shadow:0 10px 0 rgba(51,48,59,.13);
  padding:clamp(16px,3vh,28px) clamp(24px,6vw,54px);display:flex;flex-direction:column;
  align-items:center;gap:10px;animation:pop-in .3s;max-width:92vw}
.fam-face{border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;
  background:#f1f3f5;border:6px solid #ffd43b;box-shadow:0 7px 0 rgba(51,48,59,.16)}
.fam-face.big{width:clamp(140px,26vh,220px);height:clamp(140px,26vh,220px);
  font-size:clamp(70px,13vh,110px)}
.fam-face.tiny{width:clamp(54px,8vw,70px);height:clamp(54px,8vw,70px);
  font-size:clamp(28px,4.2vw,36px);border-width:4px;box-shadow:none}
.fam-face.no-photo{background:#fff9db}
.fam-photo{width:100%;height:100%;object-fit:cover;display:block}
.fam-role{font-size:clamp(28px,5.4vw,44px);font-weight:800;color:#1b5e9e}
.fam-name{font-size:clamp(19px,3.2vw,27px);font-weight:700;color:var(--ink-soft)}
.fam-strip{display:flex;gap:10px;overflow-x:auto;padding:8px 6px;max-width:94vw;scrollbar-width:none}
.fam-strip::-webkit-scrollbar{display:none}
.fam-dot{flex:none;border-radius:50%;padding:0;opacity:.6;transition:opacity .15s,transform .15s}
.fam-dot.on{opacity:1;transform:scale(1.14)}

/* family editor inside settings */
.fam-editor{display:flex;flex-direction:column;gap:10px}
.fam-row{display:flex;align-items:center;gap:8px}
.fam-pic{width:52px;height:52px;flex:none;border-radius:16px;overflow:hidden;
  background:#f1f3f5;display:grid;place-items:center;font-size:26px;
  box-shadow:0 3px 0 rgba(51,48,59,.12);border:3px dashed #ced4da}
.fam-pic img{width:100%;height:100%;object-fit:cover}
.fam-select{flex:none;width:110px;font-family:inherit;font-weight:800;font-size:15px;
  padding:10px 6px;border-radius:14px;border:3px solid #dee2e6;background:#f8f9fa;color:var(--ink)}
.fam-input{flex:1;min-width:0;font-family:inherit;font-weight:700;font-size:16px;
  padding:11px 12px;border-radius:14px;border:3px solid #dee2e6;background:#f8f9fa;color:var(--ink)}
.fam-input:focus,.fam-select:focus{outline:none;border-color:#4dabf7;background:#fff}
.fam-del{width:44px;height:44px;flex:none;border-radius:14px;background:#ffe3e3;font-size:20px;
  display:grid;place-items:center}
.photo-badge{position:absolute;bottom:2px;inset-inline-start:3px;font-size:17px;
  background:rgba(255,255,255,.92);border-radius:50%;width:24px;height:24px;
  display:grid;place-items:center;box-shadow:0 2px 3px rgba(0,0,0,.2)}
.role-row{padding-bottom:2px}

/* ---------- canvas games: give the town & hero full height ---------- */
.canvas-wrap .game-canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;touch-action:none;border-radius:22px}

/* ============================================================================
   iPad tuning for the new screens
============================================================================ */
@media (min-width:820px){
  .fam-face.big{width:250px;height:250px}
  .abc-more-item{min-width:118px}
  .buddy-act{min-height:104px}
}

/* Letter Land got a "more words" row, so the headline card has to be leaner
   or the big letter scrolls off the top of an iPad screen. */
.abc-card{padding:clamp(10px,2vh,20px) clamp(20px,5vw,48px);gap:2px}
.abc-letter{font-size:clamp(66px,15vh,128px)}
.abc-emoji{font-size:clamp(42px,9vh,74px)}
.abc-word{font-size:clamp(19px,3.2vw,28px)}
.abc-nav{gap:14px;padding:2px 0}
.abc-strip{padding:6px}
@media (max-height:620px){
  .abc-letter{font-size:clamp(54px,12vh,92px)}
  .abc-emoji{font-size:clamp(34px,7vh,56px)}
  .abc-more-item{min-width:76px;padding:8px 10px}
  .am-emoji{font-size:26px}
}
.abc-dot{width:46px;height:46px;font-size:21px;border-radius:14px}
.abc-strip{padding:4px;gap:6px}
.abc-more{gap:3px}
.abc-more-row{padding:2px 8px 6px}
.abc-more-item{padding:8px 12px}

/* ============================================================================
   v11 – buddy home hub, My Day, Archer, Tiles, Sparkle Maze
============================================================================ */

/* ---------- home: the buddy is the hub ---------- */
.home-hub{display:flex;flex-direction:column;align-items:center;gap:4px;
  flex:none;width:100%;z-index:1}
.buddy-stage.mini{flex:none;height:clamp(150px,26vh,250px);justify-content:flex-end;padding:0}
.buddy-stage.mini .buddy-bubble{font-size:clamp(14px,2.1vw,19px);padding:8px 18px;
  min-height:2.2em;margin-bottom:6px}
.home-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.6vw,13px);
  width:min(92vw,520px)}
.home-quick .buddy-act{min-height:clamp(62px,8.6vh,80px);border-radius:18px}
.home-quick .ba-icon{font-size:clamp(24px,4vw,32px)}
.home-quick .ba-label{font-size:clamp(11px,1.7vw,14px)}
.act-more{border-bottom-color:var(--c9)}
.home-hub .buddy-hint{min-height:1.3em;padding:2px 14px 0;font-size:clamp(13px,1.9vw,17px)}
.home-play-title{font-size:clamp(16px,2.6vw,22px);font-weight:800;color:#1b5e9e;
  text-align:center;padding:6px 0 0;z-index:1}
.home .game-grid{padding-top:4px}

/* ---------- My Day ---------- */
.day-card{background:var(--paper);border-radius:30px;box-shadow:0 10px 0 rgba(51,48,59,.13);
  padding:clamp(14px,2.6vh,26px) clamp(22px,6vw,52px);display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;max-width:min(94vw,620px);animation:pop-in .3s}
.day-when{font-size:clamp(14px,2.2vw,19px);font-weight:800;border-radius:999px;
  padding:5px 18px;color:#fff}
.when-morning{background:linear-gradient(180deg,#ffd43b,#f59f00);color:#5c4a00}
.when-noon{background:linear-gradient(180deg,#74c0fc,#1c7ed6)}
.when-night{background:linear-gradient(180deg,#9775fa,#5f3dc4)}
.day-emoji{font-size:clamp(64px,15vh,116px);background:none;
  filter:drop-shadow(0 7px 9px rgba(51,48,59,.2));animation:floaty 3s ease-in-out infinite}
.day-what{font-size:clamp(24px,4.6vw,38px);font-weight:800;color:#1b5e9e}
.day-why{font-size:clamp(15px,2.3vw,21px);font-weight:700;color:var(--ink-soft);line-height:1.5}
.day-strip{display:flex;gap:7px;overflow-x:auto;padding:4px 6px;max-width:94vw;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day-dot{flex:none;width:clamp(46px,7vw,58px);height:clamp(46px,7vw,58px);border-radius:16px;
  background:var(--paper);box-shadow:0 4px 0 rgba(51,48,59,.12);
  font-size:clamp(24px,3.8vw,30px);display:grid;place-items:center}
.day-dot.on{background:linear-gradient(180deg,#ffd43b,#fab005);transform:scale(1.12)}

.day-slots{display:flex;gap:clamp(6px,1.6vw,12px);justify-content:center;flex-wrap:wrap}
.day-slot{width:clamp(56px,9vw,78px);height:clamp(56px,9vw,78px);border-radius:18px;
  background:rgba(255,255,255,.6);border:4px dashed #adb5bd;display:grid;place-items:center}
.day-slot.filled{border-style:solid;border-color:#40c057;background:#d3f9d8;animation:pop-in .25s}
.ds-num{font-size:clamp(18px,2.8vw,24px);font-weight:800;color:var(--ink-soft)}
.ds-em{font-size:clamp(28px,4.6vw,40px)}
.day-tray{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:min(96vw,720px)}
.day-chip{background:var(--paper);border-radius:20px;padding:10px 14px;display:flex;
  flex-direction:column;align-items:center;gap:2px;min-width:clamp(84px,14vw,118px);
  box-shadow:0 6px 0 rgba(51,48,59,.13);border-bottom:5px solid #a5d8ff}
.day-chip:active{transform:translateY(3px)}
.day-chip.used{opacity:.32;pointer-events:none}
.day-chip.bad{animation:shake .45s}
.dc-em{font-size:clamp(28px,4.6vw,38px)}
.dc-l{font-size:clamp(12px,1.9vw,16px);font-weight:800;color:#1b5e9e;text-align:center}

/* ---------- Tile Puzzle ---------- */
.tile-board{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(5px,1.2vw,10px);
  width:min(88vw,min(58vh,460px));aspect-ratio:1;background:rgba(255,255,255,.55);
  padding:clamp(6px,1.4vw,12px);border-radius:26px;box-shadow:0 9px 0 rgba(51,48,59,.13)}
.tile{border-radius:16px;background:linear-gradient(180deg,#ffd43b,#fab005);color:#5c4a00;
  font-size:clamp(26px,6vw,52px);font-weight:800;display:grid;place-items:center;
  box-shadow:0 5px 0 rgba(146,100,0,.35);transition:transform .08s;background-size:cover}
.tile:active{transform:scale(.95)}
.tile.hole{background:transparent;box-shadow:none;pointer-events:auto}
.tile-photo{background-repeat:no-repeat;box-shadow:0 5px 0 rgba(51,48,59,.25)}
.tile-board.peek .tile{opacity:.45}

/* ---------- Sparkle Maze: d-pad ---------- */
.dpad{position:absolute;bottom:12px;inset-inline-start:12px;z-index:6;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:clamp(140px,22vw,178px);height:clamp(140px,22vw,178px);gap:4px;
  background:rgba(255,255,255,.4);border-radius:26px;padding:5px;
  backdrop-filter:blur(3px)}
.dpad-btn{border-radius:16px;background:rgba(255,255,255,.96);font-size:clamp(22px,3.8vw,30px);
  display:grid;place-items:center;box-shadow:0 4px 0 rgba(51,48,59,.2)}
.dpad-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(51,48,59,.2)}
.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-right{grid-area:2/3}.dpad-down{grid-area:3/2}
.blast-btn{position:absolute;bottom:22px;inset-inline-end:18px;z-index:6;
  width:clamp(82px,15vw,108px);height:clamp(82px,15vw,108px);border-radius:50%;
  background:linear-gradient(180deg,#ffd43b,#f59f00);box-shadow:0 8px 0 rgba(146,64,14,.35);
  font-size:clamp(36px,7vw,46px);display:grid;place-items:center;animation:pulse 2s infinite}
.blast-btn:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(146,64,14,.35)}

/* a small speak button that sits inside a HUD chip */
.hud-speak{width:38px;height:38px;border-radius:50%;background:#e7f5ff;font-size:18px;
  display:grid;place-items:center;flex:none;margin-inline-start:6px}

@media (min-width:820px){
  .home-quick{width:min(70vw,560px)}
  .buddy-stage.mini{height:clamp(180px,28vh,280px)}
  .tile{font-size:52px}
}
/* a short iPad in landscape: shrink the hub so the game grid still shows */
@media (max-height:700px){
  .buddy-stage.mini{height:clamp(120px,20vh,170px)}
  .home-quick .buddy-act{min-height:56px}
}