/* Pevlika Kids: a full-screen child interface, separate from the main Pevlika chrome. Fixed viewport (no page
   scroll, drag or zoom), safe areas, large rounded touch targets, per-age themes and automatic Light/Dark.
   Illustrations keep identical artwork in both themes; only surfaces change. */
:root{color-scheme:light dark;--kids-vh:100dvh;--kid-ink:#2b2140;--kid-soft:#5b5470;--kid-surface:#ffffff;--kid-surface-2:#f4f1ff;--kid-shadow:0 5px 0 rgba(43,33,64,.13),0 10px 24px rgba(43,33,64,.10);
 --kid-bg:linear-gradient(170deg,#bfe9ff 0%,#dff6ff 42%,#e7fbd9 100%);--kid-bg-solid:#d9f3ff;--kid-accent:#ff8a3d;--kid-focus:#1f6feb;--kid-area:rgba(255,255,255,.62);--kid-sil:#a49cbd;--kid-icon-cut:#fff;--game-color:var(--kid-accent);
 --kid-font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI Rounded","Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.kids-app[data-theme="bubbles"]{--kid-bg:linear-gradient(170deg,#ffe0f0 0%,#f1e6ff 50%,#e0f4ff 100%);--kid-bg-solid:#f6e8ff;--kid-accent:#ef5d8f}
.kids-app[data-theme="adventure"]{--kid-bg:linear-gradient(170deg,#c9f2e8 0%,#fff1d6 100%);--kid-bg-solid:#e4f6ee;--kid-accent:#ff7a3d}
.kids-app[data-theme="studio"]{--kid-bg:linear-gradient(170deg,#dfe4ff 0%,#efe6ff 100%);--kid-bg-solid:#e7e7ff;--kid-accent:#6c5ce7}
@media (prefers-color-scheme:dark){:root{--kid-ink:#f3efff;--kid-soft:#c9c2e0;--kid-surface:#2a2f52;--kid-surface-2:#343a64;--kid-shadow:0 5px 0 rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.30);
 --kid-bg:linear-gradient(170deg,#141a3a 0%,#1c2450 55%,#1d3a44 100%);--kid-bg-solid:#161d40;--kid-focus:#8ab4ff;--kid-area:rgba(255,255,255,.07);--kid-sil:#6c6f9e;--kid-icon-cut:#2a2f52}
 .kids-app[data-theme="bubbles"]{--kid-bg:linear-gradient(170deg,#2a1838 0%,#1d2246 100%);--kid-bg-solid:#22193b}
 .kids-app[data-theme="adventure"]{--kid-bg:linear-gradient(170deg,#11302c 0%,#2d2416 100%);--kid-bg-solid:#14302b}
 .kids-app[data-theme="studio"]{--kid-bg:linear-gradient(170deg,#181a3e 0%,#251a45 100%);--kid-bg-solid:#1a1a3f}}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--kid-bg-solid)}
body.kids-page{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:var(--kid-font);color:var(--kid-ink)}
.kids-app{position:fixed;inset:0;height:var(--kids-vh);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--kid-bg);box-sizing:border-box;
 --kids-edge-guard:max(16px,env(safe-area-inset-left));--kids-bottom-guard:max(32px,env(safe-area-inset-bottom));
 padding:env(safe-area-inset-top) env(safe-area-inset-right) var(--kids-bottom-guard) var(--kids-edge-guard);overflow:hidden;overscroll-behavior:none;--btn:clamp(48px,6vmin + 22px,72px)}
.kids-app *,.kids-app *::before,.kids-app *::after{box-sizing:border-box}
.kids-app button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.kids-app :focus{outline:none}.kids-app :focus-visible{outline:4px solid var(--kid-focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kid-icon{width:100%;height:100%;display:block}

/* ---------- Top bar ---------- */
.kids-bar{display:flex;align-items:center;gap:clamp(8px,1.6vmin,14px);padding:clamp(6px,1.4vmin,12px) clamp(10px,2vmin,18px);min-width:0}
.kids-title{display:flex;align-items:center;gap:8px;margin:0;font-size:clamp(17px,2.4vmin + 8px,26px);font-weight:800;letter-spacing:.01em;min-width:0;flex:1;white-space:nowrap}
.kids-brand{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;padding:2px;margin:-2px;border:0;border-radius:14px;background:none}
.kids-brand:active{transform:scale(.94)}
.kids-title img{width:clamp(28px,4vmin + 10px,40px);height:auto;display:block}
.kids-title-name{overflow:hidden;text-overflow:ellipsis}
.kids-age{flex:none;padding:3px 10px;border-radius:999px;background:var(--kid-surface);color:var(--kid-accent);font-size:.68em;box-shadow:var(--kid-shadow)}
.kids-app[data-screen="game"] .kids-title{font-size:clamp(15px,2vmin + 8px,22px)}
@media (max-width:520px){.kids-app[data-screen="game"] .kids-title-name{display:none}}
.kids-bar-actions{display:flex;gap:clamp(8px,1.6vmin,14px);flex:none}
.kids-btn{flex:none;width:var(--btn);height:var(--btn);min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--kid-surface);color:var(--kid-ink);box-shadow:var(--kid-shadow);display:grid;place-items:center;position:relative;transition:transform .12s ease,background-color .2s}
.kids-btn[hidden]{display:none}
.kids-btn .kid-icon{width:56%;height:56%}
.kids-btn:active{transform:translateY(3px) scale(.95)}
.kids-btn[aria-pressed="true"]{background:var(--game-color);color:#fff;--kid-icon-cut:var(--game-color)}
.kids-btn:disabled{opacity:.35;cursor:default}
.kids-home-btn{background:var(--kid-accent);color:#fff;--kid-icon-cut:var(--kid-accent)}
.kids-btn-big{--btn:clamp(64px,10vmin + 24px,104px)}
.kids-lock::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--kid-accent) 0 var(--hold,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);opacity:0;pointer-events:none}
.kids-lock.is-holding::after{opacity:1;animation:kids-hold .9s linear forwards}
@property --hold{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes kids-hold{to{--hold:100%}}

/* ---------- Screens ---------- */
.kids-main{position:relative;min-height:0;overflow:hidden}
.kids-screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(4px,1vmin,10px) clamp(10px,2.2vmin,22px) clamp(10px,2.2vmin,22px)}
.kids-screen[hidden]{display:none}
.kids-cards{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,2),var(--card-h,160px));grid-auto-columns:var(--card-w,160px);gap:var(--gap,14px);align-content:center;justify-content:center}
.kids-cards li[hidden]{display:none}
.kids-card{width:100%;height:100%;border:0;border-radius:clamp(20px,3vmin,32px);background:var(--kid-surface);box-shadow:var(--kid-shadow);display:grid;grid-template-rows:minmax(0,1fr) auto;padding:clamp(8px,1.4vmin,14px);gap:6px;position:relative;text-align:center;transition:transform .15s}
.kids-card:active{transform:scale(.96)}
.kids-card-art{border-radius:clamp(14px,2.2vmin,24px);overflow:hidden;background:var(--card-bg,var(--card));box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--card) 35%,transparent);min-height:0;display:grid;place-items:center}
.kids-card-art svg{width:100%;height:100%;display:block}
/* Card colours per game (accent and artwork background); tests keep them in step with the manifest. */
.kids-card[data-game="color-sort"]{--card:#ff8a5c;--card-bg:#ffe3d3}
.kids-card[data-game="shape-match"]{--card:#7c6cf2;--card-bg:#e7e3ff}
.kids-card[data-game="kids-piano"]{--card:#2fb5a8;--card-bg:#d7f6f2}
.kids-card[data-game="puzzle-time"]{--card:#3d8bfd;--card-bg:#dbe9ff}
.kids-card[data-game="animal-sounds"]{--card:#f2b632;--card-bg:#fff1cc}
.kids-card[data-game="memory-cards"]{--card:#ef5d8f;--card-bg:#ffe1ec}
.kids-card[data-game="bubble-pop"]{--card:#4fb2f0;--card-bg:#dff3ff}
.kids-card[data-game="pattern-train"]{--card:#3cbf6b;--card-bg:#e6f7dc}
.kids-card[data-game="code-breaker"]{--card:#9b5de5;--card-bg:#ebe6ff}
.kids-card-name{font-weight:800;font-size:clamp(14px,1.6vmin + 9px,22px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kids-card-stars{position:absolute;top:clamp(10px,1.6vmin,16px);right:clamp(10px,1.6vmin,16px);display:flex;align-items:center;gap:2px;padding:3px 8px 3px 5px;border-radius:999px;background:#fff;color:#e09a00;font-weight:800;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.kids-card-stars .kid-icon{width:18px;height:18px}
.kids-card-stars[hidden]{display:none}
/* Too many games for one screen: columns scroll sideways with snap points; the page itself never scrolls. */
.kids-cards.is-scrolling{justify-content:start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;cursor:grab;scroll-padding-inline:2px;touch-action:pan-x;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;margin:-4px -2px -8px}
.kids-cards.is-scrolling::-webkit-scrollbar{display:none}
.kids-cards.is-scrolling li{scroll-snap-align:start}
/* Proximity snapping lets a slow drag stay where it is released instead of springing back a whole column.
   During a mouse/pen drag snapping and press feedback pause so the strip follows the pointer exactly. */
.kids-cards.is-dragging{scroll-snap-type:none;cursor:grabbing}
.kids-cards.is-dragging .kids-card{transform:none;transition:none}
.kids-card{-webkit-user-drag:none}
.kids-scroll-btn{position:absolute;top:50%;z-index:5;--btn:clamp(48px,5vmin + 20px,64px);transform:translateY(-50%);background:var(--kid-accent);color:#fff;--kid-icon-cut:var(--kid-accent)}
.kids-scroll-btn:active{transform:translateY(calc(-50% + 3px)) scale(.95)}
.kids-scroll-btn[data-kids-scroll="prev"]{left:max(4px,env(safe-area-inset-left))}
.kids-scroll-btn[data-kids-scroll="next"]{right:max(4px,env(safe-area-inset-right))}
.kids-empty{margin:auto;display:grid;justify-items:center;gap:14px;text-align:center;max-width:520px;padding:16px}
.kids-empty svg{width:min(40vmin,220px);height:auto}
.kids-empty h2{margin:0;font-size:clamp(20px,2.6vmin + 10px,30px)}
.kids-empty p{margin:0;color:var(--kid-soft);font-size:18px}
.kids-link-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:999px;background:var(--kid-accent);color:#fff;font-weight:800;font-size:18px;text-decoration:none;box-shadow:var(--kid-shadow)}

/* ---------- Game stage ---------- */
.kids-stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1.2vmin,12px);position:relative}
.kg-tools{flex:none;display:flex;justify-content:center;align-items:center;gap:clamp(6px,1.4vmin,12px);--btn:clamp(46px,5vmin + 18px,62px)}
.kg-tools .kids-btn{border-radius:18px}
.kg-area{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:clamp(20px,3vmin,32px);background:var(--kid-area);touch-action:none}
[data-kid-drag]{position:absolute;padding:0;border:0;background:none;touch-action:none;cursor:grab;will-change:transform}
[data-kid-drag].kid-pressed{z-index:40}
[data-kid-drag].kid-dragging{z-index:60;cursor:grabbing;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25));transition:none!important}
[data-kid-drag][data-kid-locked]{cursor:default;z-index:1}
[data-kid-drag].is-selected{z-index:30;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px var(--kid-focus));transform:scale(1.1)}
.kg-overlay{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;border-radius:clamp(20px,3vmin,32px);background:color-mix(in srgb,var(--kid-bg-solid) 88%,transparent);backdrop-filter:blur(6px);padding:clamp(56px,10vmin,80px) 16px 16px}
.kg-overlay-close{position:absolute;top:10px;right:10px}

/* Color Sort */
.cs-jar{position:absolute;border:4px solid var(--hue);border-top-width:6px;border-radius:14px 14px 26px 26px;background:color-mix(in srgb,var(--hue) 13%,var(--kid-surface));padding:0;box-shadow:inset 0 -10px 0 color-mix(in srgb,var(--hue) 18%,transparent);transition:transform .15s}
.cs-jar-glass{position:absolute;left:12%;top:8%;width:12%;height:55%;border-radius:999px;background:rgba(255,255,255,.55)}
.cs-jar-label{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--hue);display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.18);z-index:2}
.cs-jar-label .cs-glyph{width:60%;height:60%}
.cs-jar[data-drop-hover]{transform:scale(1.07);box-shadow:0 0 0 6px color-mix(in srgb,var(--hue) 40%,transparent)}
.cs-jar.is-hint{animation:kid-pulse .8s ease-in-out 2}
.cs-ball{border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85) 0 10%,var(--hue) 38%,color-mix(in srgb,var(--hue) 72%,#000) 100%);box-shadow:0 4px 0 rgba(0,0,0,.14);display:grid;place-items:center}
.cs-ball .cs-glyph{width:44%;height:44%;pointer-events:none}
/* Shape Match */
.sm-slot{position:absolute;border:3px dashed color-mix(in srgb,var(--kid-ink) 22%,transparent);border-radius:24px;background:var(--kid-surface-2);padding:0}
.sm-slot svg{position:absolute;left:10%;top:10%;width:80%;height:80%;display:block}
.kid-silhouette *{fill:var(--kid-sil)!important;stroke:none!important}
.sm-slot.is-filled{border-style:solid;border-color:transparent;background:transparent}
.sm-slot.is-filled svg{visibility:hidden}
.sm-slot[data-drop-hover]{border-color:var(--game-color);transform:scale(1.05)}
.sm-piece svg{position:absolute;left:4%;top:4%;width:92%;height:92%;pointer-events:none}
.as-animal svg{position:absolute;left:8%;top:8%;width:84%;height:84%;pointer-events:none}
.mc-front svg{width:100%;height:100%;display:block;pointer-events:none}
/* Kids Piano */
.kp-area{display:flex;gap:clamp(4px,1vmin,10px);padding:clamp(8px,1.6vmin,16px);align-items:stretch}
.kp-area[data-orientation="row"]{flex-direction:row}
.kp-area[data-orientation="stack"]{flex-direction:column-reverse;align-items:center}
.kp-key{flex:1;min-width:0;min-height:0;border:0;border-radius:18px;background:var(--hue);box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),0 4px 0 rgba(0,0,0,.12);position:relative;padding:0;touch-action:none;transition:transform .06s,filter .06s}
.kp-area[data-orientation="row"] .kp-key{margin-top:calc(var(--i) * 1.2%)}
.kp-area[data-orientation="stack"] .kp-key{width:calc(100% - var(--i) * (36% / var(--n)));flex:1}
.kp-dot{position:absolute;width:clamp(14px,3vmin,26px);height:clamp(14px,3vmin,26px);border-radius:50%;background:rgba(255,255,255,.85);left:50%;bottom:16%;transform:translateX(-50%)}
.kp-area[data-orientation="stack"] .kp-dot{left:auto;right:6%;bottom:50%;transform:translateY(50%)}
.kp-key.is-down{transform:translateY(3px) scale(.98);filter:brightness(1.18) saturate(1.1);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16)}
.kp-key.is-next{animation:kid-glow 1s ease-in-out infinite}
.kp-note{position:absolute;width:34px;height:34px;pointer-events:none}
.kp-note svg{width:100%;height:100%}
/* Puzzle Time */
.pz-defs{position:absolute;width:0;height:0;overflow:hidden}
.pz-board{position:absolute;border-radius:10px;background:var(--kid-surface);box-shadow:var(--kid-shadow)}
.pz-board>svg{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:10px}
.pz-ghost{opacity:.2;filter:grayscale(.3)}
.pz-lines path{fill:none;stroke:color-mix(in srgb,var(--kid-ink) 25%,transparent);stroke-width:1.6;stroke-dasharray:5 5}
.pz-area.is-complete .pz-ghost{opacity:1;transition:opacity .6s}
.pz-slot{position:absolute;border:0;padding:0;background:transparent}
.pz-piece svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.pz-edge{fill:none;stroke:rgba(255,255,255,.9);stroke-width:2}
.pz-piece:not(.is-placed) svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.pz-piece.is-placed .pz-edge{stroke:rgba(255,255,255,.35)}
.pz-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(100%,640px)}
@media (max-aspect-ratio:1/1){.pz-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,420px)}}
.pz-thumb{position:relative;border:0;padding:6px;border-radius:20px;background:var(--kid-surface);box-shadow:var(--kid-shadow);aspect-ratio:4/3}
.pz-thumb svg{width:100%;height:100%;display:block;border-radius:14px}
.pz-thumb.is-current{outline:4px solid var(--game-color)}
.pz-thumb-star{position:absolute;top:-8px;right:-8px;width:34px;height:34px;color:#ffc93c;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
/* Animal Sounds */
.as-area{display:grid;place-content:center;gap:12px;padding:8px;grid-template-columns:repeat(var(--cols,4),var(--cell,100px))}
.as-area[data-mode="quiz"]{grid-template-columns:1fr;place-items:center;gap:20px}
.as-area[data-mode="quiz"][data-wide="true"]{grid-template-columns:auto auto;align-items:center}
.as-animal{width:var(--cell,100px);height:var(--cell,100px);border:0;border-radius:24px;background:var(--kid-surface);box-shadow:var(--kid-shadow);padding:8%;position:relative}

.as-animal.is-right{box-shadow:0 0 0 6px #3cbf6b,var(--kid-shadow)}
.as-replay{--btn:var(--replay,96px);background:var(--game-color);color:#fff;--kid-icon-cut:var(--game-color)}
.as-choices{display:grid;grid-template-columns:repeat(var(--cols,2),var(--cell,120px));gap:14px;justify-content:center}
/* Memory Cards */
.mc-area{display:grid;grid-template-columns:repeat(var(--cols,4),var(--card-w,90px));grid-auto-rows:var(--card-h,110px);gap:10px;place-content:center;padding:4px;perspective:900px}
.mc-card{border:0;padding:0;background:none;width:100%;height:100%}
.mc-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,1.3,.5,1)}
.mc-card.is-open .mc-inner{transform:rotateY(180deg)}
.mc-back,.mc-front{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;box-shadow:var(--kid-shadow)}
.mc-back{background:repeating-linear-gradient(45deg,#ef5d8f 0 12px,#f37aa3 12px 24px);color:#ffe1ec}
.mc-back .kid-icon{width:42%;height:42%}
.mc-front{background:var(--kid-surface);transform:rotateY(180deg);padding:10%}
.mc-card.is-matched .mc-front{box-shadow:0 0 0 5px #3cbf6b,var(--kid-shadow)}

/* ---------- Celebration and effects ---------- */
.kids-celebrate{position:absolute;inset:0;z-index:90;display:grid;place-items:center;background:color-mix(in srgb,var(--kid-bg-solid) 55%,transparent);cursor:pointer}
.kids-celebrate-star{width:min(46vmin,280px);height:min(46vmin,280px);color:#ffc93c;filter:drop-shadow(0 8px 0 rgba(0,0,0,.12));animation:kid-star .7s cubic-bezier(.2,1.6,.4,1) both}
.kids-celebrate-next{position:absolute;right:clamp(14px,4vmin,40px);bottom:clamp(14px,4vmin,40px);background:#3cbf6b;color:#fff;--kid-icon-cut:#3cbf6b;animation:kid-pulse 1.2s ease-in-out .8s infinite}
.kids-fx{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.kid-particle{position:absolute;width:10px;height:14px;border-radius:3px}
.kid-particle.is-star{width:18px;height:18px;border-radius:0;background:#ffc93c;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes kid-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes kid-glow{0%,100%{box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),0 0 0 0 rgba(255,255,255,.9)}50%{box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),0 0 0 8px rgba(255,255,255,.9)}}
@keyframes kid-star{from{transform:scale(0) rotate(-120deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* ---------- Grown-up dialogs ---------- */
.kids-dialog{border:0;padding:0;border-radius:28px;width:min(calc(100vw - 24px),540px);max-height:calc(var(--kids-vh) - var(--kids-bottom-guard) - var(--kids-bottom-guard) - 24px);background:var(--kid-surface);color:var(--kid-ink);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;font-family:var(--kid-font);-webkit-user-select:text;user-select:text}
.kids-dialog::backdrop{background:rgba(20,16,40,.55)}
.kids-dialog[open]{display:flex;flex-direction:column}
.kids-dialog-head{display:flex;align-items:center;gap:12px;padding:14px 14px 10px 22px;flex:none}
.kids-dialog-head h2{margin:0;flex:1;font-size:24px}
.kids-dialog-head .kids-btn{--btn:52px;background:var(--kid-surface-2);box-shadow:none}
.kids-scroll{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:0 22px 22px;min-height:0}
.kids-gate-card{display:grid;gap:14px;justify-items:center;text-align:center}
.kids-gate-card p{margin:0;color:var(--kid-soft);font-size:17px}
.kids-gate[data-mode="pin"] [data-gate-hint]{display:none}
[data-gate-math],[data-gate-pin]{display:grid;gap:12px;justify-items:center;width:100%}
.kids-gate-question{font-size:clamp(30px,6vmin,44px);font-weight:800;line-height:1.2;margin:6px 0}
.kids-gate-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.kids-gate-option,.kids-keypad button{min-height:64px;border:0;border-radius:18px;background:var(--kid-surface-2);color:var(--kid-ink);font-size:26px;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.kids-gate-option:active,.kids-keypad button:active{transform:translateY(2px)}
.kids-gate[data-mode="math"] [data-gate-pin],.kids-gate[data-mode="pin"] [data-gate-math]{display:none}
.kids-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.kids-pin-dots{min-height:40px;font-size:30px;letter-spacing:10px}
.kids-section{border-top:1px solid color-mix(in srgb,var(--kid-ink) 12%,transparent);padding:16px 0;display:grid;gap:10px}
.kids-section:first-child{border-top:0;padding-top:4px}
.kids-section h3{margin:0;font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--kid-soft)}
.kids-section p{margin:0;color:var(--kid-soft);font-size:15px;line-height:1.45}
.kids-ages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kids-age-btn{min-height:56px;border:2px solid transparent;border-radius:16px;background:var(--kid-surface-2);color:var(--kid-ink);font-weight:800;font-size:17px;display:grid;align-content:center;gap:2px}
.kids-age-btn small{font-weight:600;font-size:12px;color:var(--kid-soft)}
.kids-age-btn[aria-current="true"]{border-color:var(--kid-accent)}
.kids-age-btn:disabled{opacity:.55;cursor:default}
.kids-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;font-size:17px;font-weight:700}
.kids-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:60px;height:36px;border-radius:999px;background:color-mix(in srgb,var(--kid-ink) 25%,transparent);position:relative;flex:none;margin:0;cursor:pointer;transition:background .2s}
.kids-row input[type="checkbox"]::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.kids-row input[type="checkbox"]:checked{background:#3cbf6b}
.kids-row input[type="checkbox"]:checked::after{transform:translateX(24px)}
.kids-row input[type="range"]{flex:1;max-width:240px;min-height:44px;accent-color:var(--kid-accent)}
.kids-dialog select,.kids-dialog input[type="text"],.kids-dialog input[type="password"]{font:inherit;font-size:17px;min-height:48px;padding:0 14px;border-radius:14px;border:2px solid color-mix(in srgb,var(--kid-ink) 18%,transparent);background:var(--kid-surface-2);color:var(--kid-ink);min-width:0}
.kids-pin-form{display:flex;gap:10px;flex-wrap:wrap}
.kids-pin-form input{flex:1 1 140px;letter-spacing:6px}
.kids-pill{min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--kid-surface-2);color:var(--kid-ink);font-weight:800;font-size:16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.kids-pill.is-primary{background:var(--kid-accent);color:#fff}
.kids-pill[data-armed="1"]{background:#e5484d;color:#fff}
.kids-pill[hidden]{display:none}
.kids-actions{display:flex;flex-wrap:wrap;gap:10px}
.kids-noscript{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:20px;background:var(--kid-bg-solid);z-index:500}
.kids-app[data-booting] .kids-main{visibility:hidden}


/* ---------- Delight layer: backdrops, motion and depth (all still under the reduced-motion rule below) ---------- */
.kids-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kids-backdrop-art{position:absolute;inset:0;width:100%;height:100%}
.kids-bar{position:relative;z-index:2}.kids-main{z-index:1}
.kb-drift{animation:kb-drift 22s ease-in-out infinite alternate}
.kb-float{animation:kb-float 7s ease-in-out infinite alternate}
.kb-spin{transform-box:fill-box;transform-origin:center;animation:kb-spin 70s linear infinite}
.kb-twinkle{animation:kb-twinkle 3.2s ease-in-out infinite}
.kb-d1{animation-delay:-2s}.kb-d2{animation-delay:-4s}.kb-d3{animation-delay:-6s}
@keyframes kb-drift{from{transform:translateX(-28px)}to{transform:translateX(28px)}}
@keyframes kb-float{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
@keyframes kb-spin{to{transform:rotate(360deg)}}
@keyframes kb-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-color-scheme:dark){.kids-backdrop{opacity:.4}}
/* Picker: cards pop in one after another, their art bobs gently, and a press squishes. */
/* Keep the snapping li geometry fixed while its card animates, including after returning from play. */
.kids-cards li>.kids-card{animation:kid-pop-in .5s cubic-bezier(.2,1.5,.4,1) backwards}
.kids-cards li:nth-child(2)>.kids-card{animation-delay:.05s}.kids-cards li:nth-child(3)>.kids-card{animation-delay:.1s}.kids-cards li:nth-child(4)>.kids-card{animation-delay:.15s}.kids-cards li:nth-child(5)>.kids-card{animation-delay:.2s}.kids-cards li:nth-child(6)>.kids-card{animation-delay:.25s}.kids-cards li:nth-child(n+7)>.kids-card{animation-delay:.3s}
.kids-card-art svg{animation:kid-bob 4.2s ease-in-out infinite}
.kids-cards li:nth-child(2n) .kids-card-art svg{animation-delay:-1.4s}.kids-cards li:nth-child(3n) .kids-card-art svg{animation-delay:-2.8s}
.kids-card{transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.kids-card:active{transform:scale(.93)}
@media (hover:hover){.kids-card:hover{transform:translateY(-4px) rotate(-.6deg)}}
.kids-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 38%)}
@keyframes kid-pop-in{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
@keyframes kid-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
/* Play surfaces and pieces with depth. */
.kg-area{background:radial-gradient(circle at 2px 2px,rgba(255,255,255,.6) 1.6px,transparent 2.2px) 0 0/24px 24px,var(--kid-area);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 8px 24px rgba(43,33,64,.05)}
@media (prefers-color-scheme:dark){.kg-area{background:radial-gradient(circle at 2px 2px,rgba(255,255,255,.08) 1.6px,transparent 2.2px) 0 0/24px 24px,var(--kid-area);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}}
.sm-piece svg,.as-animal svg,.mc-front svg,.pt-option svg,.pt-load svg{filter:drop-shadow(0 3px 2px rgba(43,33,64,.16))}
.cs-jar{background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.08) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.4)),color-mix(in srgb,var(--hue) 14%,var(--kid-surface))}
.cs-jar::before{content:"";position:absolute;left:-7%;right:-7%;top:-15px;height:13px;border-radius:9px;background:var(--hue);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),inset 0 3px 0 rgba(255,255,255,.35)}
.cs-ball{transition:filter .15s}.cs-ball.kid-dragging{filter:drop-shadow(0 14px 10px rgba(0,0,0,.25)) saturate(1.15)}
.kp-key::before{content:"";position:absolute;left:16%;right:16%;top:5%;height:26%;border-radius:12px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.kp-area[data-orientation="stack"] .kp-key::before{left:3%;right:auto;top:14%;bottom:14%;width:22%;height:auto;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.kp-key.is-down{box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),0 0 22px color-mix(in srgb,var(--hue) 70%,#fff)}
.mc-back{box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),var(--kid-shadow)}
.mc-card.is-matched .mc-inner{animation:kid-pulse .5s ease-out 1}
.pz-board{box-shadow:0 0 0 8px #e9c48f,0 0 0 11px #c99a5e,var(--kid-shadow)}
/* Celebration: rotating rays, a big star and Pevi jumping for joy. */
.kids-celebrate{overflow:hidden}
.kids-celebrate-rays{position:absolute;width:min(150vmin,1100px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,90,.42) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:kb-spin 16s linear infinite}
.kids-celebrate-mascot{position:absolute;left:clamp(8px,6%,60px);bottom:clamp(8px,5%,50px);width:min(30vmin,190px);animation:kid-jump .55s ease-in-out .5s infinite alternate}
.kid-mascot{width:100%;height:auto;display:block}
@keyframes kid-jump{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-18%) rotate(4deg)}}
.kids-cheer{position:absolute;right:4%;bottom:0;width:min(26vmin,150px);z-index:70;pointer-events:none;animation:kid-peek 1.9s ease both}
@keyframes kid-peek{0%{transform:translateY(105%)}22%,72%{transform:translateY(8%) rotate(-6deg)}84%{transform:translateY(8%) rotate(5deg)}100%{transform:translateY(105%)}}
.kid-ripple{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px rgba(255,255,255,.6);animation:kid-ripple .55s ease-out forwards;pointer-events:none}
@keyframes kid-ripple{from{transform:scale(.2);opacity:1}to{transform:scale(1.4);opacity:0}}
.kid-particle:nth-child(3n){border-radius:50%;width:11px;height:11px}.kid-particle:nth-child(3n+1){width:6px;height:18px;border-radius:3px}

/* Bubble Pop */
.bp-area{background:linear-gradient(#e3f5ff,#c9e9ff);touch-action:none}
@media (prefers-color-scheme:dark){.bp-area{background:linear-gradient(#1b2a52,#173a5a)}}
.bp-bubble{position:absolute;left:0;top:0;border:0;padding:0;border-radius:50%;cursor:pointer;touch-action:none;will-change:transform;animation:bp-wobble 2.8s ease-in-out infinite;
 background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 7%,color-mix(in srgb,var(--hue) 55%,transparent) 34%,var(--hue) 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),inset -10px -14px 22px rgba(255,255,255,.4),inset 6px 8px 16px color-mix(in srgb,var(--hue) 60%,#000 8%),0 10px 18px rgba(43,33,64,.16)}
.bp-bubble:nth-child(2n){animation-delay:-1.3s}
.bp-shine{position:absolute;left:20%;top:16%;width:26%;height:16%;border-radius:50%;background:rgba(255,255,255,.9);transform:rotate(-35deg)}
.bp-inner{position:absolute;left:18%;top:18%;width:64%;height:64%;pointer-events:none}
.bp-star{color:#ffc93c;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.bp-bubble.is-popping{animation:bp-pop .26s ease-out forwards}
@keyframes bp-wobble{0%,100%{scale:1}50%{scale:1.05 .96}}
@keyframes bp-pop{to{scale:1.45;opacity:0}}
/* Pattern Train */
.pt-area{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:10px;gap:8px}
.pt-train{display:grid;grid-template-columns:repeat(var(--per),var(--wagon));gap:16px 8px;justify-content:center;align-items:end;transition:transform 1.3s cubic-bezier(.55,0,.8,.2)}
.pt-area.is-leaving .pt-train{transform:translateX(-130vw)}
.pt-engine,.pt-wagon{width:var(--wagon);height:calc(var(--wagon)*.86);position:relative}
.pt-engine svg{width:100%;height:100%;display:block}
.pt-wagon{border-radius:14px 14px 10px 10px;background:linear-gradient(var(--kid-surface),var(--kid-surface-2));box-shadow:inset 0 -6px 0 rgba(0,0,0,.06),0 4px 0 rgba(43,33,64,.12);margin-bottom:12px}
.pt-wagon::before{content:"";position:absolute;left:12%;right:12%;bottom:-11px;height:18px;background:radial-gradient(circle,#2b2140 0 6px,#ffc93c 6.5px 8px,transparent 8.5px) left/18px 18px no-repeat,radial-gradient(circle,#2b2140 0 6px,#ffc93c 6.5px 8px,transparent 8.5px) right/18px 18px no-repeat}
.pt-wagon::after,.pt-engine::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-16px;height:4px;border-radius:2px;background:#b98a5f}
.pt-engine::after{bottom:-4px}
.pt-load{position:absolute;inset:12%}.pt-load svg{width:100%;height:100%;display:block}
.pt-wagon.is-empty{background:repeating-linear-gradient(45deg,var(--kid-surface) 0 8px,var(--kid-surface-2) 8px 16px);outline:3px dashed color-mix(in srgb,var(--game-color) 65%,transparent);outline-offset:-7px}
.pt-ask{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:calc(var(--wagon)*.42);color:var(--game-color)}
.pt-wagon.is-next{animation:kid-pulse 1.1s ease-in-out infinite}
.pt-wagon[data-drop-hover]{outline-style:solid;transform:scale(1.06)}
.pt-options{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pt-option{position:relative!important;width:var(--option);height:var(--option);border-radius:24px;background:var(--kid-surface);box-shadow:var(--kid-shadow)}
.pt-option svg{position:absolute;left:12%;top:12%;width:76%;height:76%}
/* Code Breaker */
.cb-area{display:flex;flex-direction:column;gap:10px;padding:12px;align-items:stretch}
.cb-peg[data-color="red"]{--c:#f25c54}.cb-peg[data-color="blue"]{--c:#3d8bfd}.cb-peg[data-color="yellow"]{--c:#ffc93c}.cb-peg[data-color="green"]{--c:#3cbf6b}.cb-peg[data-color="purple"]{--c:#9b5de5}.cb-peg[data-color="orange"]{--c:#ff8a3d}.cb-peg[data-color="pink"]{--c:#ef5d8f}.cb-peg[data-color="teal"]{--c:#1fb5b0}
.cb-peg{--c:#999;display:grid;place-items:center;flex:none;width:var(--peg);height:var(--peg);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85) 0 10%,var(--c) 38%,color-mix(in srgb,var(--c) 72%,#000) 100%);box-shadow:0 3px 0 rgba(0,0,0,.14)}
.cb-peg .kid-glyph{width:40%;height:40%}
.cb-peg-small{width:calc(var(--peg)*.56);height:calc(var(--peg)*.56)}
.cb-secret{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:20px;align-self:center;background:linear-gradient(135deg,#3b2d73,#5b48b0);box-shadow:var(--kid-shadow)}
.cb-secret .cb-peg{width:calc(var(--peg)*.7);height:calc(var(--peg)*.7)}
.cb-secret .is-hidden{background:rgba(255,255,255,.16);color:#fff;font-weight:900;font-size:calc(var(--peg)*.32);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.cb-lock{width:calc(var(--peg)*.6);height:calc(var(--peg)*.6);color:#ffc93c}.cb-secret.is-open .cb-lock{color:#3cbf6b}
.cb-history{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain;touch-action:pan-y}
.cb-history:empty{display:none}
.cb-row{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 12px;border-radius:16px;background:var(--kid-surface);box-shadow:0 2px 0 rgba(0,0,0,.06);flex:none}
.cb-row-pegs{display:flex;gap:6px}
.cb-marks{display:grid;grid-template-columns:repeat(3,18px);gap:4px;min-width:62px}
.cb-exact{width:18px;height:18px;border-radius:50%;background:#3cbf6b;color:#fff;padding:3px;display:block}
.cb-near{width:18px;height:18px;border-radius:50%;border:4px solid #ffc93c;display:block}
.cb-current{display:flex;align-items:center;justify-content:center;gap:10px;flex:none}
.cb-slot{width:calc(var(--peg) + 8px);height:calc(var(--peg) + 8px);border-radius:50%;border:3px dashed color-mix(in srgb,var(--kid-ink) 30%,transparent);background:var(--kid-surface-2);padding:0;display:grid;place-items:center;flex:none}
.cb-slot.is-filled{border-style:solid;border-color:transparent;background:transparent}
.cb-slot.is-hint{box-shadow:0 0 0 4px #ffc93c}
.cb-check{--btn:calc(var(--peg) + 8px);background:#3cbf6b;color:#fff;--kid-icon-cut:#3cbf6b}
.cb-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex:none}
.cb-color{border:0;padding:0;background:none;border-radius:50%;min-width:46px;min-height:46px}
.cb-color .cb-peg{width:max(46px,calc(var(--peg)*.9));height:max(46px,calc(var(--peg)*.9))}
.cb-tool{--btn:max(46px,calc(var(--peg)*.9));border-radius:50%!important}
.cb-hint.is-ready{background:#ffc93c;color:#fff;animation:kid-pulse 1.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){.kids-app *,.kids-app *::before,.kids-app *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .mc-inner{transform:none!important}.pt-train{transition:none!important}.kids-celebrate-rays,.kids-cheer{animation:none!important}.mc-front{transform:none;opacity:0}.mc-card.is-open .mc-front{opacity:1}.mc-card.is-open .mc-back{opacity:0}.kp-key.is-next{box-shadow:inset 0 -10px 0 rgba(0,0,0,.16),0 0 0 6px rgba(255,255,255,.95)}}

/* Counting Garden: visible ten-frame, reversible pots and a large watering action. */
.kids-card[data-game="counting-garden"]{--card:#46a767;--card-bg:#e0f4d8}
.kids-card[data-game="color-lab"]{--card:#e96d9f;--card-bg:#ffe4ef}
.kids-card[data-game="size-safari"]{--card:#d58a38;--card-bg:#fff0d8}
.kids-card[data-game="sound-parade"]{--card:#687be5;--card-bg:#e4eaff}
.cg-area{display:grid;grid-template-rows:minmax(46px,1fr) minmax(0,3fr) minmax(48px,1fr);gap:8px;padding:12px}
.cg-sign{display:flex;align-items:center;justify-content:center;gap:20px;min-height:0}
.cg-sign strong{font-size:clamp(32px,7vmin,72px)}
.cg-sign svg{height:100%;max-height:80px;width:100px}
.cg-pots{display:grid;grid-template-columns:repeat(var(--cols,3),var(--cell,70px));grid-auto-rows:var(--cell,70px);align-content:center;justify-content:center;gap:8px;min-height:0;max-width:760px;width:100%;justify-self:center}
.cg-pot{position:relative;border:2px dashed var(--kid-soft);border-radius:18px;background:var(--kid-surface);min-width:44px;min-height:44px;padding:2px;overflow:hidden}
.cg-pot svg{width:100%;height:100%;max-height:160px;transition:opacity .2s,transform .2s}
.cg-pot[aria-pressed="false"] svg{opacity:.18;transform:translateY(16%)}
.cg-pot[aria-pressed="true"]{border-style:solid;border-color:#46a767}
.cg-bottom{display:flex;align-items:center;justify-content:center;gap:20px;min-height:0}
.cg-bottom output{font-size:clamp(18px,3vmin,28px);font-weight:750}
.cg-water{--btn:48px;background:var(--kid-surface)}
.is-watered .cg-pot[aria-pressed="true"]{background:#d8f5e8}
/* A labelled goal, two visible pigment slots and an explicit mix action. */
.cl-area{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(76px,1fr) minmax(90px,1.35fr) minmax(82px,1fr) 90px;justify-items:center;gap:8px;padding:12px}
.cl-area>*{min-width:0;max-width:100%}
.cl-target{display:flex;align-items:center;justify-content:center;gap:10px;min-height:0;width:100%;padding:6px;border-radius:20px;background:var(--kid-surface)}
.cl-swatch{display:block;position:relative;aspect-ratio:1;flex:none}
.cl-swatch>svg{display:block;width:100%;height:100%}
.cl-symbol{position:absolute;inset:30%;color:#fff}
.cl-symbol svg{width:100%;height:100%}
.cl-target>.cl-swatch{width:clamp(48px,12vmin,90px);height:auto}
.cl-goal{min-width:0}.cl-goal strong{display:block;font-size:clamp(16px,2.7vmin,24px)}
.cl-target>.kids-btn{--btn:44px;box-shadow:none;flex:none;background:var(--kid-surface-2)}
.cl-recipe{display:flex;align-items:center;gap:4px;height:32px;font-size:14px;font-weight:750}
.cl-recipe .cl-swatch{width:26px;height:26px}.cl-hint-label{font-size:12px;font-weight:500}
.cl-mixing{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,18px);min-height:0;width:100%}
.cl-ingredients{display:flex;align-items:center;gap:clamp(4px,1.4vw,12px)}
.cl-area .cl-drop{width:clamp(44px,11vmin,88px);height:clamp(44px,11vmin,88px);min-width:44px;min-height:44px;padding:3px;display:grid;place-items:center;border:3px dashed var(--kid-soft);border-radius:50%;background:var(--kid-surface);color:var(--kid-soft);font-size:24px;font-weight:750}
.cl-drop.is-filled{border-style:solid}.cl-drop>.cl-swatch{width:100%;height:100%}
.cl-plus,.cl-equals{font-size:clamp(20px,4vmin,34px);font-weight:800}
.cl-result{display:grid;justify-items:center;gap:4px;min-height:0}
.cl-bowl{width:clamp(72px,20vmin,170px);height:clamp(64px,16vmin,135px);border:4px solid var(--kid-soft);border-top:0;border-radius:10px 10px 45% 45%;display:grid;place-items:center;font-size:clamp(25px,5vmin,46px);background:var(--paint,var(--kid-surface))}
.cl-bowl .cl-swatch{height:85%;max-width:100%}.cl-result-label{font-size:clamp(12px,2vmin,18px);font-weight:750}
.cl-paints{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,20px);height:100%;min-height:0;width:100%}
.cl-paint{width:clamp(64px,22vmin,120px);height:100%;max-height:140px;min-width:48px;min-height:48px;border:3px solid transparent;border-radius:18px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--kid-surface);color:var(--kid-ink)}
.cl-paint>.cl-swatch{width:clamp(36px,12vmin,82px);max-width:100%;min-height:0;flex:0 1 auto}.cl-paint-name{font-size:clamp(13px,2.2vmin,20px);font-weight:750}
.cl-paint[aria-pressed="true"]{border-color:var(--kid-ink);box-shadow:0 0 0 2px var(--kid-surface)}
.cl-actions{display:grid;grid-template-rows:minmax(32px,1fr) 48px;gap:4px;justify-items:center;align-items:center;width:100%;min-height:0}
.cl-status{text-align:center;font-size:clamp(12px,2.3vmin,18px);line-height:1.25}
.cl-area .cl-mix{--btn:48px;display:flex;gap:8px;width:auto;min-width:148px;max-width:100%;padding:0 16px;border-radius:16px;background:var(--kid-accent);color:#2b2140;font-size:18px;font-weight:750}
.cl-mix>.kid-icon{width:30px;height:30px}.cl-mix:disabled{opacity:.55;box-shadow:none}
/* Size Safari keeps identical artwork, so relative size is the only ordering clue. */
.ss-area{display:grid;grid-template-rows:minmax(38px,1fr) minmax(44px,1fr) minmax(0,3fr);gap:8px;padding:12px}
.ss-direction{min-height:0;text-align:center}
.ss-direction svg{height:100%;max-height:70px;max-width:85%}
.ss-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:0;border-bottom:3px dashed var(--kid-soft)}
.ss-friend{width:var(--friend-size);height:var(--friend-size);flex:none}
.ss-friend{display:flex;align-items:flex-end;justify-content:center}.ss-friend svg{height:calc(100% * var(--scale));width:calc(100% * var(--scale))}
.ss-animals{display:grid;grid-template-columns:repeat(var(--cols),var(--size));grid-auto-rows:var(--size);align-content:center;justify-content:center;gap:12px;min-width:0;min-height:0}
.ss-animal{width:100%;aspect-ratio:1;max-height:100%;border:0;border-radius:20px;padding:0;min-width:44px;min-height:44px;background:var(--kid-surface);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ss-animal svg{width:calc(100% * var(--scale));height:calc(100% * var(--scale));max-height:240px;flex:none}
.ss-animal.is-placed{opacity:.22}
/* Sound Parade: visual beats and distinct animal pads make the tune playable with sound off too. */
.sp-area{display:grid;grid-template-rows:auto 32px minmax(0,1fr);gap:12px;justify-items:center;padding:16px}
.sp-prompt{margin:0;text-align:center;font-size:clamp(16px,2.6vmin,25px);font-weight:750}
.sp-track{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,16px)}
.sp-beat{font-size:24px;color:var(--kid-soft)}
.sp-beat.is-done{color:var(--kid-ink)}
.sp-pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;width:100%;max-width:620px;min-height:0}
.sp-pad{min-width:48px;min-height:48px;border:4px solid transparent;border-radius:24px;background:var(--kid-surface);padding:6px;transition:background .15s}
.sp-pad svg{width:100%;height:100%;max-height:210px}
.sp-pad.is-lit{background:#ffe69c;border-color:#866719;box-shadow:inset 0 0 0 3px #fff}
@media (max-height:450px) and (min-width:500px){
 .cg-area{grid-template-columns:110px minmax(0,1fr) 100px;grid-template-rows:minmax(0,1fr)}
 .cg-sign,.cg-bottom{flex-direction:column;gap:4px}.cg-sign svg{max-height:65px}.cg-pots{height:100%}.cg-bottom output{font-size:17px}
 .cl-area{grid-template-columns:minmax(110px,.8fr) minmax(0,1.5fr) minmax(96px,.8fr);grid-template-rows:minmax(0,1fr) 66px;gap:6px;padding:8px}
 .cl-target{grid-column:1;grid-row:1 / 3;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:52px auto;align-content:center;gap:4px;padding:4px}.cl-target>.cl-swatch{width:48px;justify-self:center}.cl-goal{grid-column:1 / 3;grid-row:2;text-align:center}.cl-goal strong{font-size:14px}.cl-recipe{justify-content:center;height:28px;font-size:12px;gap:3px}.cl-recipe .cl-swatch{width:22px;height:22px}.cl-hint-label{display:none}
 .cl-mixing{grid-column:2;grid-row:1;gap:6px}.cl-ingredients{gap:4px}.cl-area .cl-drop{width:44px;height:44px}.cl-bowl{width:72px;height:54px}.cl-result{gap:0}.cl-result-label{font-size:11px}.cl-plus,.cl-equals{font-size:20px}
 .cl-paints{grid-column:3;grid-row:1 / 3;flex-direction:column;gap:4px}.cl-paint{flex:1;width:100%;height:44px;min-height:44px;max-height:58px;flex-direction:row;gap:4px;padding:2px}.cl-paint>.cl-swatch{width:32px;height:32px;flex:none}.cl-paint-name{font-size:13px}
 .cl-actions{grid-column:2;grid-row:2;grid-template-rows:minmax(18px,1fr) 44px;gap:2px}.cl-status{font-size:11px}.cl-area .cl-mix{--btn:44px;font-size:16px}
 .ss-area{grid-template-columns:100px minmax(0,1fr);grid-template-rows:minmax(44px,1fr) minmax(0,2fr)}.ss-direction{grid-row:1 / 3;align-self:center}.ss-direction svg{width:100%;height:auto}.ss-animals{grid-column:2}
 .sp-area{grid-template-columns:140px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px}.sp-prompt{grid-column:1;grid-row:1}.sp-track{grid-column:2;grid-row:1}.sp-pads{grid-column:1 / 3;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);max-width:900px;gap:10px}
}

.is-watered .cg-pot[aria-pressed="true"]::after{content:"";position:absolute;left:45%;top:0;width:12px;height:18px;background:#3d8bfd;border-radius:65% 35% 60% 40%;animation:cg-rain .65s ease-in both;pointer-events:none}
@keyframes cg-rain{from{transform:translateY(-20%);opacity:1}to{transform:translateY(170%);opacity:0}}

/* Painting stays a browser-local normal Kids activity; the shared safe vector renderer owns stroke geometry. */
.kids-card[data-game="finger-paint"]{--card:#ed7399;--card-bg:#ffe4ee}
.kids-card[data-game="robot-routes"]{--card:#548de1;--card-bg:#dfedff}
.kids-card[data-game="garden-maze"]{--card:#559e57;--card-bg:#e0f3db}
.kids-card[data-game="spot-difference"]{--card:#c58d37;--card-bg:#fff0d9}
.kids-card[data-game="math-picnic"]{--card:#e37642;--card-bg:#ffead9}
.kids-card[data-game="picture-story"]{--card:#9b76cb;--card-bg:#eee3ff}
.fp-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px}
.fp-board{position:relative;background:#fff;border-radius:16px;overflow:hidden;touch-action:none;flex:none;box-shadow:0 2px 9px #2b214029;outline-offset:-5px!important}
.fp-board>svg{width:100%;height:100%;display:block;pointer-events:none}
.fp-palette{display:grid;grid-auto-rows:44px;gap:6px;flex:none;max-width:100%;padding:3px}
.fp-color{flex:none;width:44px;height:44px;border:3px solid transparent;border-radius:50%;background:var(--paint-color);padding:8px}
.fp-color svg{width:100%;height:100%}.fp-color[aria-pressed="true"]{border-color:var(--kid-ink);box-shadow:inset 0 0 0 2px #fff}
.fp-status{flex:none;min-height:18px;margin:0;font-size:12px;line-height:1.3;text-align:center;max-width:100%;color:var(--kid-ink)}
.fp-tools [data-width="12"] .kid-icon{width:36%}.fp-tools [data-width="48"] .kid-icon{width:76%}
/* A common native garden board for walking mazes and picture-code execution. */
.rg-board{min-width:0;min-height:0;display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
.rg-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);background:#f3f9db;border-radius:10px;overflow:hidden;flex:none}
.rg-cell{padding:2px;min-width:0;min-height:0;background:#f3f9db;display:grid;place-items:center;border:0;border-style:solid;border-color:#559e57;border-top-width:var(--wall-top);border-right-width:var(--wall-right);border-bottom-width:var(--wall-bottom);border-left-width:var(--wall-left);border-radius:0}
.rg-cell.is-here{background:#ffe8a5}.rg-cell .kid-icon{width:90%;height:90%;max-height:110px}.rg-crumb{width:10px;height:10px;background:#99c775;border-radius:50%}
.rg-arrow{display:block;width:60%;height:60%}.rg-arrow .kid-icon{width:100%;height:100%}
.rg-arrow[data-direction="up"]{transform:rotate(-90deg)}.rg-arrow[data-direction="down"]{transform:rotate(90deg)}.rg-arrow[data-direction="left"]{transform:rotate(180deg)}
.rr-area{display:grid;grid-template-rows:minmax(0,1fr) 58px auto auto;gap:8px;padding:12px}
.rr-queue{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;max-width:100%;min-width:0;min-height:0;padding:3px;touch-action:pan-x;align-items:center;border:2px dashed var(--kid-soft);border-radius:14px}
.rr-empty{padding:0 8px;font-size:clamp(13px,2.4vmin,18px)}
.rr-command{position:relative;flex:none;width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:10px;background:var(--kid-surface);display:grid;place-items:center}
.rr-command.is-active{border-color:var(--kid-ink)}.rr-command.is-blocked{outline:3px dashed var(--kid-focus);outline-offset:-4px}
.rr-controls{display:grid;grid-template-columns:repeat(5,var(--btn));grid-template-rows:repeat(2,var(--btn));justify-content:center;gap:6px;--btn:clamp(44px,7vmin,56px)}
.rr-add[data-direction="up"]{grid-column:2;grid-row:1}.rr-add[data-direction="left"]{grid-column:1;grid-row:2}.rr-add[data-direction="down"]{grid-column:2;grid-row:2}.rr-add[data-direction="right"]{grid-column:3;grid-row:2}.rr-undo{grid-column:4;grid-row:2}.rr-run{grid-column:5;grid-row:2}.rr-controls .kids-btn{border-radius:14px}.rr-run{background:#548de1;color:#fff}
.rr-status{margin:0;text-align:center;font-size:clamp(12px,2.3vmin,17px);line-height:1.3;min-height:18px}
.gm-area{display:grid;grid-template-rows:minmax(0,1fr) 54px;padding:12px;gap:12px}.gm-controls{display:flex;align-items:center;justify-content:center;gap:12px;--btn:48px}
/* Two garden pictures stack on phones, then sit side by side when there is more width than height. */
.sd-area{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
.sd-picture{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;min-height:0;min-width:0;padding:7px;background:var(--kid-surface);border:3px solid #c58d37;border-radius:18px}
.sd-tile{min-width:0;min-height:0;border:3px solid transparent;border-radius:12px;background:transparent;padding:1px;display:grid;place-items:center}
.sd-tile svg{width:100%;height:100%;min-height:0;max-height:130px}.sd-tile.is-found{border-color:var(--kid-focus);background:var(--kid-surface-2)}
/* Countable picture groups use fitted cells; answer controls always stay at least 44px. */
.mp-area{display:grid;grid-template-rows:minmax(0,1fr) minmax(64px,24%);gap:16px;padding:14px}
.mp-equation{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:6px;min-height:0}
.mp-group{display:grid;grid-template-columns:repeat(var(--apple-cols,2),var(--apple,44px));grid-auto-rows:var(--apple,44px);height:100%;min-height:0;min-width:0;align-content:center;justify-content:center;gap:4px}
.mp-apple{border:0;border-radius:50%;padding:0;min-width:0;min-height:0;background:transparent}.mp-apple>svg{width:100%;height:100%;display:block}.mp-apple.is-counted{outline:3px solid var(--kid-focus);outline-offset:-3px;opacity:.65}
.mp-plus{font-size:clamp(30px,5vmin,56px);font-weight:800;text-align:center}
.mp-options{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:12px;min-height:0;width:100%;max-width:600px;justify-self:center}
.mp-option{display:grid;place-items:center;align-content:center;gap:5px;border:3px solid transparent;border-radius:18px;background:var(--kid-surface);padding:5px;min-height:44px;min-width:44px}
.mp-option strong{font-size:clamp(24px,5vmin,48px)}.mp-option>span{display:grid;grid-template-columns:repeat(6,7px);gap:3px;min-height:7px}.mp-option i{width:7px;height:7px;border-radius:50%;background:var(--kid-ink)}.mp-option.is-right{border-color:#559e57}
/* A story's destination slots and choice cards show the actual original sequence pictures. */
.ps-area{display:grid;grid-template-rows:minmax(64px,1fr) minmax(0,3fr);gap:18px;padding:14px}
.ps-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;min-height:0}
.ps-slot{aspect-ratio:4/3;max-height:100%;min-width:0;min-height:0;border:2px dashed var(--kid-soft);border-radius:12px;display:grid;place-items:center;overflow:hidden;font-size:clamp(18px,4vmin,30px);font-weight:800;background:var(--kid-surface)}
.ps-slot.is-next{border:4px solid var(--kid-focus)}.ps-slot.is-filled{border-style:solid;border-color:#559e57}.ps-slot svg{width:100%;height:100%}
.ps-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;min-height:0;width:100%;max-width:800px;justify-self:center}
.ps-card{min-width:44px;min-height:44px;border:3px solid var(--kid-surface);border-radius:18px;overflow:hidden;background:var(--kid-surface);padding:0}.ps-card svg{width:100%;height:100%;display:block}.ps-card:disabled{opacity:.22}
@media (min-aspect-ratio:6/5){.sd-area{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.gm-area{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr)}.gm-controls{flex-direction:column;gap:6px}.ps-area{grid-template-rows:minmax(44px,1fr) minmax(0,2fr)}.ps-cards{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}}
@media (max-height:450px) and (min-width:500px){.rr-area{grid-template-columns:minmax(0,1fr) minmax(244px,1fr);grid-template-rows:58px minmax(0,1fr) auto;gap:8px;padding:10px}.rr-area>.rg-board{grid-row:1 / 4}.rr-queue{grid-column:2}.rr-controls{grid-column:2;align-content:center;gap:6px;--btn:44px}.rr-status{grid-column:2}.fp-area{flex-direction:row;flex-wrap:wrap}.fp-palette{gap:4px}.fp-status{flex-basis:100%;font-size:11px}.fp-board{align-self:center}}

.fp-board[data-keyboard="true"]::after{content:"";position:absolute;left:var(--cursor-x,50%);top:var(--cursor-y,50%);width:18px;height:18px;border:2px solid #2b2140;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff;pointer-events:none}
.rg-cell{box-shadow:inset 0 0 0 1px #cbdcaf;color:#2b2140}.rg-cell.is-goal{color:#b77700}

/* Foundational learning keeps the same full-screen picture-and-touch format. */
.kids-card[data-game="letter-mail"]{--card:#c06da2;--card-bg:#f8e0f0}
.kids-card[data-game="first-letter"]{--card:#8376d8;--card-bg:#ebe5ff}
.kids-card[data-game="number-aquarium"]{--card:#379fbd;--card-bg:#d9f2ff}
.kids-card[data-game="number-path"]{--card:#7aaf4a;--card-bg:#e7f5d9}
.kids-card[data-game="rainbow-hunt"]{--card:#dc9050;--card-bg:#fff0da}
.kids-card[data-game="more-less"]{--card:#bd7952;--card-bg:#f6e4d8}
.learn-area{display:grid;gap:12px;padding:12px;min-width:0}
.learn-prompt{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 10px;min-height:44px;min-width:0;border:0;border-radius:14px;background:var(--kid-surface);font-size:clamp(13px,2.8vmin,20px);line-height:1.25;text-align:center}
.learn-prompt>.kid-icon{width:28px;height:28px;flex:none}.learn-prompt>strong{font-size:clamp(28px,5vmin,48px);white-space:nowrap}.learn-prompt>span{min-width:0}
.learn-number{min-width:44px;min-height:44px;border:3px solid transparent;border-radius:18px;background:var(--kid-surface);font-size:clamp(28px,6vmin,64px)!important;font-weight:800!important}
.learn-area .is-right{outline:4px solid var(--kid-focus);outline-offset:-5px}
.lm-area{grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)}
.lm-boxes,.lm-letters{display:flex;align-items:stretch;justify-content:center;gap:12px;min-width:0;min-height:0}
.lm-box,.lm-envelope{position:relative;flex:1;max-width:180px;min-width:44px;min-height:44px;border:3px solid #c06da2;border-radius:16px;background:var(--kid-surface);display:flex;align-items:center;justify-content:center;padding:4px;font-size:clamp(32px,9vmin,76px)!important;font-weight:800!important;overflow:hidden}
.lm-box{flex-direction:column;border:0;background:transparent;align-self:center;height:100%;max-height:210px}.lm-roof{position:absolute;inset:12% 8% 20%;border:3px solid #c06da2;border-radius:38% 38% 10% 10%;background:#e6c9de}.lm-roof::before{content:"";position:absolute;width:16%;height:35%;left:42%;top:100%;background:#bd7952}.lm-roof::after{content:"";position:absolute;left:16%;right:16%;top:15%;height:7%;border-radius:4px;background:#c06da2}.lm-box.is-filled .lm-roof{border-color:#559e57}.lm-box>strong,.lm-delivered{z-index:1;color:#2b2140}.lm-box strong{line-height:1.1}.lm-delivered{font-size:.42em;color:var(--kid-soft)}.lm-envelope{border-width:2px;align-self:center;height:76%;max-height:150px;background:var(--kid-surface)}
.lm-envelope::before{content:"";position:absolute;inset:0;background:#c06da230;clip-path:polygon(0 0,100% 0,50% 50%)}.lm-envelope::after{content:"";position:absolute;right:8%;top:9%;width:16%;height:20%;border:2px dashed #c06da2;background:#e6c9de}.lm-envelope>strong{z-index:1}
.lm-envelope[aria-pressed="true"]{outline:4px solid var(--kid-focus);outline-offset:-5px}.lm-envelope:disabled{opacity:.2}.lm-box:disabled{opacity:1;border-color:#559e57}
.fl-area{grid-template-rows:auto minmax(0,1fr)}.fl-pictures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0}
.fl-picture{display:flex;flex-direction:column;align-items:center;min-width:44px;min-height:44px;border:3px solid transparent;border-radius:18px;background:var(--kid-surface);padding:10px;gap:6px}
.fl-picture>svg{width:100%;height:100%;max-height:250px;min-height:0;flex:1}.fl-picture>span{font-size:clamp(18px,3.8vmin,32px);line-height:1.1}.fl-picture>span>strong{color:var(--kid-focus)}
.na-area{grid-template-rows:auto minmax(0,1fr) minmax(48px,22%)}.na-tank{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch;align-self:center;justify-self:center;aspect-ratio:5/2;width:100%;max-height:100%;gap:8px;min-height:0;min-width:0;background:linear-gradient(#c4ecff,#70cadf);border:4px solid #379fbd;border-radius:20px;padding:10px}
.na-fish{display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:2px solid transparent;border-radius:20%;background:#ffffff40}.na-fish>svg{max-width:130px;max-height:100%;width:100%;height:100%}.na-fish[aria-pressed="true"]{border-color:#2b2140}.na-fish.is-empty{border:2px dashed #255d7960;background:transparent}
.na-options,.np-options{display:flex;justify-content:center;gap:12px;min-height:44px}.na-option,.np-option{flex:1;max-width:200px}
.np-area{grid-template-rows:auto minmax(0,1fr) minmax(48px,24%)}.np-stones{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:6px;min-height:0;min-width:0;background:linear-gradient(transparent 45%,#7aaf4a50 45%,#7aaf4a50 55%,transparent 55%)}
.np-bunny{position:absolute;left:calc((var(--step,0) + .5)*20%);bottom:calc(50% + 44px);width:56px;height:56px;transform:translateX(-50%);transition:left .3s ease;pointer-events:none}
.np-stone{aspect-ratio:1;max-height:100%;min-width:0;background:var(--kid-surface);border:3px solid #7aaf4a;border-radius:35%;display:grid;place-items:center;font-size:clamp(24px,5vmin,62px);font-weight:800}.np-stone.is-missing{border-style:dashed;color:var(--kid-soft)}.np-stone.is-next{outline:4px solid var(--kid-focus);outline-offset:-5px}.np-option:disabled{opacity:.2}
.rh-area{grid-template-rows:auto minmax(0,1fr) minmax(96px,1fr)}.rh-rainbow{min-height:0;display:grid;place-items:center}.rh-rainbow>svg{width:100%;height:100%;max-width:600px}.rh-hint{width:28px;height:28px;flex:none;border-radius:50%;background:var(--color);border:2px solid var(--kid-soft)}
.rh-options{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));grid-auto-rows:minmax(44px,1fr);gap:10px;min-height:0}.rh-choice{min-width:44px;min-height:44px;border:0;border-radius:18px;padding:5px;background:var(--kid-surface);display:grid;place-items:center}.rh-choice>svg{width:100%;height:100%;min-height:0;max-width:140px}
.ml-area{grid-template-rows:auto minmax(0,1fr) auto}.ml-baskets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-height:0}.ml-basket{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));align-content:start;min-width:44px;min-height:44px;border:4px solid #bd7952;border-bottom-width:12px;border-radius:20px;background:var(--kid-surface);padding:6px;gap:4px}
.ml-basket>span{display:grid;place-items:center;min-height:0;min-width:0}.ml-basket svg{width:100%;height:100%;max-width:110px;min-height:0}.ml-equal{justify-self:center;min-width:84px;min-height:44px;border:2px solid var(--kid-soft);border-radius:14px;background:var(--kid-surface);font-size:34px!important;line-height:1}
@media (min-aspect-ratio:6/5){.fl-pictures{grid-template-columns:repeat(var(--choices,2),minmax(0,1fr))}.rh-area{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.rh-area>.learn-prompt{grid-column:1 / 3}.rh-options{grid-template-columns:repeat(3,minmax(44px,1fr))}.ml-basket{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}}
@media (max-height:450px){.learn-area{gap:8px;padding:8px}.learn-prompt{font-size:13px}.lm-boxes,.lm-letters{gap:8px}.lm-box,.lm-envelope{font-size:32px!important}.na-tank{gap:4px;padding:5px}.ml-area{grid-template-rows:44px minmax(0,1fr)}.ml-area[data-equal="true"]{grid-template-columns:minmax(0,1fr) 64px}.ml-area[data-equal="true"]>.learn-prompt{grid-column:1 / 3}.ml-area>.ml-equal{align-self:center;min-width:54px}.fl-picture{padding:4px}.fl-picture>span{font-size:18px}.np-stone{max-width:88px}.np-bunny{display:none}}

@media (prefers-reduced-motion:reduce){.np-bunny{transition:none}}

/* Scene building, material classification, dressing, symmetry and picture logic share the child shell. */
.kids-card[data-game="scene-builder"]{--card:#4aa776;--card-bg:#dcf3e0}
.kids-card[data-game="weather-wardrobe"]{--card:#d59b43;--card-bg:#fff0dc}
.kids-card[data-game="mirror-mosaic"]{--card:#7e7bd0;--card-bg:#e5e9ff}
.kids-card[data-game="dot-art"]{--card:#d19847;--card-bg:#ffefd7}
.kids-card[data-game="picture-logic"]{--card:#429a88;--card-bg:#e5f3ef}
.kids-card[data-game="coin-market"]{--card:#dc8750;--card-bg:#ffe9da}
.kids-card[data-game="slide-picture"]{--card:#538bd0;--card-bg:#e1edff}
.kids-card[data-game="material-sort"]{--card:#aa875e;--card-bg:#eee6dc}
.sb-area{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(90px,24%);gap:10px;padding:10px;min-width:0}
.sb-instruction{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;--btn:44px;font-size:clamp(13px,2.7vmin,20px);text-align:center}.sb-instruction>span{flex:1}.sb-instruction .kids-btn{border-radius:12px;box-shadow:none}
.sb-board-host,.mm-host,.da-host,.pl-host,.sl-host{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.sb-board{position:relative;flex:none;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px #4aa776}.sb-background{width:100%;height:100%;display:block}
.sb-slot{position:absolute;min-width:0;min-height:0;border:2px dashed #366752;border-radius:14px;background:#ffffff50;padding:2px}.sb-slot>svg{opacity:0}.sb-area.is-preview .sb-slot>svg,.sb-slot.is-filled>svg{opacity:1!important;filter:none!important}.sb-slot.is-filled{border-color:transparent;background:transparent}.sb-slot[data-drop-hover]{outline:4px solid #fff;outline-offset:-3px}
.sb-tray{min-width:0;min-height:0;border-radius:16px;background:var(--kid-surface-2)}
.sb-piece,.ms-piece{border:2px solid transparent;border-radius:16px;background:var(--kid-surface);padding:5px;display:grid;place-items:center;box-shadow:0 3px 0 #2b21401a;min-width:0;min-height:0}.sb-piece[aria-pressed="true"],.ms-piece[aria-pressed="true"]{outline:4px solid var(--kid-focus);outline-offset:-4px}.sb-piece[hidden],.ms-piece[hidden]{display:none}
.ms-area{position:relative}.ms-bin{position:absolute;border:3px solid #aa875e;border-bottom-width:12px;border-radius:18px;background:var(--kid-surface);padding:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:0;font-size:clamp(12px,2.3vmin,19px)!important}.ms-sample{width:42%;height:42%;display:block}.ms-sample[hidden]{display:none}.ms-sample svg{width:100%;height:100%}.ms-collected{display:flex;justify-content:center;gap:3px;width:100%;height:28%}.ms-collected>span{height:100%;width:34%;display:block}.ms-bin[data-drop-hover]{outline:4px solid var(--kid-focus);outline-offset:-4px}
/* A large moving weather scene and one clothing category at a time. */
.ww-area{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(140px,1fr) minmax(150px,30%);gap:10px}
.ww-area>.learn-prompt{width:100%;font-size:clamp(13px,2.5vmin,20px)}
.ww-scene{position:relative;min-width:0;min-height:0;border:2px solid var(--kid-surface);border-radius:22px;overflow:hidden;width:100%;isolation:isolate}
.ww-sky{position:absolute;inset:0;z-index:-1}.ww-weather-scene{display:block;width:100%;height:100%}
.ww-weather-label{position:absolute;left:8px;right:8px;bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:1;pointer-events:none}
.ww-weather-label strong{padding:6px 10px;border-radius:14px;background:#fffaf3e8;color:#2b2140;font-size:clamp(14px,2.8vmin,23px);text-transform:capitalize;max-width:calc(100% - 52px);line-height:1.1}
.ww-scene .ww-listen{--btn:44px;background:#fffaf3;color:#2b2140;pointer-events:auto;box-shadow:0 3px 0 #2b214026}
.ww-avatar-host{position:absolute;inset:8px 12px 54px;display:grid;place-items:center;min-width:0;min-height:0}
.ww-avatar{position:relative;aspect-ratio:2/3;min-width:0;min-height:0}.ww-person{width:100%;height:100%;display:block}.ww-worn{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 1px #2b214025)}.ww-worn svg{width:100%;height:100%;display:block}
.ww-head{left:14%;top:-1%;width:72%;height:26%}.ww-body{left:0;top:30%;width:100%;height:42%}.ww-feet{left:25%;top:70%;width:50%;height:31%}
.ww-options{display:grid;grid-template-rows:26px minmax(0,1fr);gap:6px;min-height:0;min-width:0;width:100%}.ww-choice-heading{font-size:clamp(14px,2.5vmin,21px);font-weight:750;text-align:center;align-self:center}
.ww-choices{display:grid;grid-template-columns:repeat(var(--choices),minmax(0,1fr));gap:8px;min-width:0;min-height:0;width:100%;max-width:680px;justify-self:center}
.ww-item{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:5px;min-width:44px;min-height:44px;padding:8px 5px;border:3px solid var(--kid-surface-2);border-radius:18px;background:var(--kid-surface);box-shadow:0 3px 0 #2b21401a}
.ww-item-art{display:block;width:100%;height:100%;min-height:0;min-width:0;filter:drop-shadow(0 3px 1px #2b214026)}.ww-item-art>svg{display:block;width:100%;height:100%}
.ww-item-name{font-size:clamp(12px,2.1vmin,17px);font-weight:750;text-align:center;line-height:1.25;overflow-wrap:anywhere;min-width:0}
.ww-item:disabled{opacity:.35}.ww-item.is-chosen{opacity:1;border-color:#358a50;background:var(--kid-surface-2)}
.ww-sun{animation:ww-sun-glow 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.ww-cloud{animation:ww-cloud-drift 8s ease-in-out infinite alternate}
.ww-rain{animation:ww-rain-fall 1.1s linear infinite}.ww-snow{animation:ww-snow-fall 3.8s linear infinite}.ww-fall-1{animation-delay:-.6s}.ww-fall-2{animation-delay:-1.4s}.ww-wind{animation:ww-breeze 2.4s ease-in-out infinite alternate}
@keyframes ww-sun-glow{50%{transform:scale(1.06)}}@keyframes ww-cloud-drift{to{transform:translateX(14px)}}@keyframes ww-rain-fall{from{transform:translate(5px,-15px)}to{transform:translate(-9px,24px)}}@keyframes ww-snow-fall{from{transform:translate(-3px,-12px)}to{transform:translate(9px,22px)}}@keyframes ww-breeze{to{transform:translateX(18px);opacity:.5}}
.ww-area.is-paused .ww-sky *{animation-play-state:paused}
@media (min-aspect-ratio:6/5){.ww-area{grid-template-columns:minmax(180px,.95fr) minmax(0,1.05fr);grid-template-rows:44px minmax(0,1fr)}.ww-area>.learn-prompt{grid-column:1 / 3}.ww-scene{grid-column:1;grid-row:2}.ww-options{grid-column:2;grid-row:2}}
@media (max-height:450px){.ww-area{gap:6px;grid-template-rows:44px minmax(0,1fr)}.ww-area>.learn-prompt{font-size:12px}.ww-weather-label{left:4px;right:4px;bottom:4px;gap:4px}.ww-weather-label strong{font-size:12px;padding:5px 7px;max-width:calc(50% - 20px)}.ww-avatar-host{inset:4px}.ww-options{grid-template-rows:22px minmax(0,1fr);gap:4px}.ww-choice-heading{font-size:13px}.ww-choices{gap:5px}.ww-item{padding:4px 3px;gap:3px;border-radius:14px}.ww-item-name{font-size:11px}.ww-item-art{min-height:24px}}
@media (prefers-reduced-motion:reduce){.ww-sky *{animation:none!important}}
.mm-area,.pl-area,.sl-area{grid-template-rows:auto minmax(0,1fr) auto}.mm-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));border:2px solid var(--kid-soft);border-radius:8px;overflow:hidden;background:var(--kid-surface)}
.mm-cell{min-width:0;min-height:0;border:1px solid var(--kid-soft);padding:0;background:var(--color);position:relative}.mm-cell.is-reference{background:var(--color);box-shadow:inset 0 0 0 3px #2b21401a}.mm-cell.is-reference::after{content:"";position:absolute;inset:2px;border:1px dashed #2b214044;pointer-events:none}.mm-axis-x{border-left:4px solid var(--kid-focus)}.mm-axis-y{border-top:4px solid var(--kid-focus)}
.mm-palette,.pl-options,.cm-actions,.sl-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;--btn:44px;min-width:0}.mm-color{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid var(--kid-surface);background:var(--color);border-radius:12px;padding:9px}.mm-color[aria-pressed="true"]{outline:3px solid var(--kid-focus);outline-offset:-1px}
.da-area{grid-template-rows:auto minmax(0,1fr)}.da-board{position:relative}.da-board>svg{width:100%;height:100%;display:block;overflow:visible}.da-dot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border:2px solid #d19847;border-radius:50%;background:var(--kid-surface);padding:0;display:grid;place-items:center;font-size:clamp(12px,2.7vmin,19px)!important;font-weight:800!important}.da-dot.is-next{outline:4px solid var(--kid-focus);outline-offset:2px}.da-dot.is-done{opacity:.42}.da-line{pointer-events:none}
.pl-board{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:3px;background:#429a88;padding:3px;border-radius:14px;overflow:hidden}.pl-cell{min-width:0;min-height:0;padding:3px;border:3px solid transparent;border-radius:8px;background:var(--kid-surface);display:grid;place-items:center;font-size:24px}.pl-cell.is-given{background:#d9efe4}.pl-cell>svg{width:100%;height:100%}.pl-cell[aria-pressed="true"]{border-color:var(--kid-focus)}.pl-choice{width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;border:3px solid transparent;border-radius:12px;background:var(--kid-surface)}.pl-choice.is-hint{border-color:#429a88}
.cm-area{grid-template-rows:auto minmax(0,1fr) minmax(44px,18%) auto}.cm-goods{display:flex;gap:12px;justify-content:center;align-items:stretch;min-height:0;min-width:0}.cm-good{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;flex:1;max-width:240px;min-height:0;min-width:0;background:var(--kid-surface);border-radius:18px;padding:10px}.cm-good>svg{width:100%;height:100%;min-height:0}.cm-good>strong{font-size:clamp(20px,4vmin,38px);white-space:nowrap}.cm-wallet{display:grid;place-items:center;border:3px dashed #dc8750;border-radius:18px;background:var(--kid-surface-2);min-height:44px}.cm-wallet output{font-weight:800;font-size:clamp(24px,5vmin,44px)}.cm-coin{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #d59b43;border-radius:50%;background:#ffd84d;color:#2b2140!important;font-size:22px!important;font-weight:800!important}.cm-check{background:#dc8750;color:#fff}
.sl-board{position:relative;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:3px;border:3px solid #538bd0;border-radius:16px;overflow:hidden;background:var(--kid-surface-2)}.sl-tile{position:relative;min-width:0;min-height:0;border:0;padding:0;background:transparent;overflow:hidden;border-radius:4px}.sl-tile>svg{width:100%;height:100%;display:block}.sl-tile>span{position:absolute;left:4px;top:4px;padding:2px 5px;border-radius:6px;background:#ffffffe0;color:#2b2140;font-weight:800}.sl-reference{position:absolute;inset:0;pointer-events:none}.sl-reference[hidden]{display:none}.sl-reference>svg{width:100%;height:100%}
@media (min-aspect-ratio:6/5){.sb-area{grid-template-columns:minmax(0,1fr) minmax(136px,30%);grid-template-rows:auto minmax(0,1fr)}.sb-instruction{grid-column:1 / 3}.sb-board-host{grid-column:1}.sb-tray{grid-column:2}}
@media (max-height:450px){.sb-area,.learn-area{padding:8px;gap:8px}.cm-area{grid-template-columns:minmax(0,1fr) minmax(140px,38%);grid-template-rows:auto minmax(0,1fr) auto}.cm-area>.learn-prompt{grid-column:1 / 3}.cm-goods{grid-row:2 / 4}.cm-wallet{grid-column:2;grid-row:2}.cm-actions{grid-column:2;grid-row:3}.cm-good{padding:5px;gap:3px}.sb-instruction{font-size:12px}.da-dot{width:28px;height:28px;font-size:12px!important}}
.sb-piece{background:#e0edff}
.da-dot{width:var(--dot-size,34px);height:var(--dot-size,34px)}
.sl-area{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto minmax(0,1fr)}.sl-area>.learn-prompt{grid-column:1;grid-row:1}.sl-host{grid-column:1 / 3;grid-row:2}.sl-actions{grid-column:2;grid-row:1}
@media (max-height:450px){.mm-area,.pl-area{grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:auto minmax(0,1fr)}.mm-area>.learn-prompt,.pl-area>.learn-prompt{grid-column:1;grid-row:1}.mm-host,.pl-host{grid-column:1;grid-row:2}.mm-palette,.pl-options{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:44px;grid-column:2;grid-row:1 / 3;align-content:center;justify-content:center}}
/* Native links give each finished game a crawlable URL; the shared shell handles ordinary taps. */
a.kids-card{color:inherit;text-decoration:none}.kids-start{height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;max-width:52rem;margin:auto;padding:clamp(12px,3vw,28px);font-size:clamp(16px,2vmin,20px);line-height:1.5;background:var(--kid-surface);border-radius:20px}.kids-start h2{margin-top:0}.kids-start .kids-link-btn{min-height:48px}.kids-app a:focus-visible{outline:4px solid var(--kid-focus);outline-offset:3px}

.kids-start .kid-icon{width:24px;height:24px;margin-right:10px;flex:none}.kids-start .kids-link-btn{border:0;font:inherit;font-weight:800;cursor:pointer}

/* First encounters: a persistent reference, then the same symbol among two/three choices. */
.kids-card[data-game="color-discovery"]{--card:#e16f8f;--card-bg:#ffe4ee}
.kids-card[data-game="number-discovery"]{--card:#399eb8;--card-bg:#ddf4fa}
.kids-card[data-game="alphabet-discovery"]{--card:#aa78ce;--card-bg:#f0e6ff}
.kids-card[data-game="chess-steps"]{--card:#588e79;--card-bg:#dff0e5}
.discovery-area{grid-template-rows:auto minmax(0,1fr) minmax(56px,22%)}
.discovery-content{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:0}
.discovery-model,.discovery-option{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border:3px solid transparent;border-radius:22px;background:var(--kid-surface);padding:5px;font-size:clamp(34px,10vmin,100px)!important;font-weight:800!important;line-height:1}
.discovery-model{width:min(100%,260px);height:100%;max-height:260px;box-shadow:var(--kid-shadow)}
.discovery-model small,.discovery-option small{font-size:.65em;font-weight:700}
.discovery-swatch{position:relative;display:block;width:100%;height:100%;max-width:220px;max-height:220px;aspect-ratio:1}
.discovery-swatch>svg{width:100%;height:100%}.discovery-swatch>.kid-glyph{position:absolute;inset:26%;width:48%;height:48%}
.discovery-object{display:grid;place-items:center;min-width:0;min-height:0;border:2px solid transparent;border-radius:12px;background:var(--kid-surface);padding:2px}
.discovery-object>svg{width:100%;height:100%;max-height:120px}.discovery-object.is-empty{border:2px dashed var(--kid-soft);background:transparent;opacity:.4}.discovery-object[aria-pressed="true"]{border-color:var(--kid-focus)}
.discovery-actions{display:flex;align-items:stretch;justify-content:center;gap:12px;min-width:0;min-height:0}.discovery-actions .kids-btn{display:flex;align-items:center;justify-content:center;width:auto;min-width:100px;height:100%;min-height:44px;padding:0 16px;border-radius:18px;gap:12px}.discovery-actions .kids-btn>svg{width:32px;height:32px;flex:none}.discovery-option{flex:1;max-width:220px;font-size:clamp(30px,7vmin,72px)!important}
/* The board is geometry, while replay and lesson navigation remain 44px actions. */
.chess-area{grid-template-rows:auto minmax(0,1fr) 44px;gap:8px;padding:8px}
.chess-host{position:relative;display:grid;place-items:center;min-width:0;min-height:0}
.chess-board,.chess-arrow{width:var(--board,0px);height:var(--board,0px)}
.chess-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border:3px solid #775b3d;border-radius:8px;overflow:hidden;box-shadow:var(--kid-shadow)}
.chess-cell{display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:#f6e5c7;color:#2b2140}
.chess-cell.is-dark{background:#8eb69e}.chess-piece{height:96%;width:96%;filter:drop-shadow(0 2px 1px #2b214033)}
.chess-cell.is-source{box-shadow:inset 0 0 0 3px #4085d9}.chess-cell.is-target{background:#f8d477;box-shadow:inset 0 0 0 3px #775b3d}.chess-cell.is-target::before{content:"";grid-area:1/1;width:24%;height:24%;border-radius:50%;background:#775b3d}.chess-cell>svg{grid-area:1/1}.chess-cell[aria-pressed="true"]{outline:3px solid #173f78;outline-offset:-4px}
.chess-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}.chess-arrow polyline,.chess-arrow path{fill:none;stroke:#2865ac;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;opacity:.8}
.chess-tools{display:flex;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:0}.chess-tools .kids-btn{--btn:44px;border-radius:12px;flex:none}.chess-counter{font-size:16px;font-weight:800;white-space:nowrap;min-width:64px;text-align:center}
@media(max-height:500px) and (min-aspect-ratio:6/5){.chess-area{grid-template-columns:minmax(0,1fr) minmax(190px,38%);grid-template-rows:minmax(0,1fr) 44px}.chess-host{grid-column:1;grid-row:1 / 3}.chess-prompt{grid-column:2;grid-row:1;align-self:center;max-height:100%;overflow:auto}.chess-tools{grid-column:2;grid-row:2}.discovery-area{gap:6px;padding:6px;grid-template-rows:44px minmax(0,1fr) 52px}.discovery-model{font-size:48px!important}}

.discovery-model strong{font-size:clamp(60px,18vmin,150px);color:var(--game-color)}.discovery-model small{font-size:clamp(38px,11vmin,86px);color:var(--game-color)}

.discovery-swatch .kid-glyph path{fill:#2b2140;opacity:.8}.discovery-object{position:relative}.discovery-count{position:absolute;inset:0;display:grid;place-items:center;background:#fff9;color:#2b2140;font-size:clamp(16px,4vmin,36px);font-weight:900;border-radius:8px}

/* First Alphabet: three large letters, with a replayable named target. */
.discovery-area.alphabet-find{grid-template-rows:auto minmax(0,1fr)}
.alphabet-find .discovery-actions{align-items:center;gap:clamp(8px,3vw,24px)}
.alphabet-find .discovery-option{height:min(100%,260px);aspect-ratio:3/4;box-shadow:var(--kid-shadow);color:var(--game-color);font-size:clamp(48px,16vmin,140px)!important}
.alphabet-find .discovery-option strong{font-size:inherit}

/* Early reading: build pictured words from syllables or letters, and read text to choose its picture. */
.kids-card[data-game="word-builder"]{--card:#2f9e8f;--card-bg:#dcf5f0}.kids-card[data-game="read-find"]{--card:#d0674f;--card-bg:#fde7e1}
.wb-area{grid-template-rows:auto minmax(0,1fr) auto auto}
.wb-picture{display:grid;place-items:center;min-height:0;min-width:44px;border:0;border-radius:18px;background:var(--kid-surface);padding:6px}.wb-picture>svg{width:100%;height:100%;max-height:260px;min-height:0}
.wb-slots{display:flex;justify-content:center;gap:clamp(3px,1vmin,8px);min-width:0}
.wb-slot{display:grid;place-items:center;flex:0 1 clamp(26px,9vmin,72px);min-width:0;height:clamp(40px,10vmin,72px);border:3px dashed var(--kid-soft);border-radius:12px;background:var(--kid-surface);font-size:clamp(20px,5.5vmin,44px);font-weight:800}
.wb-area[data-mode="syllable"] .wb-slot{flex-basis:clamp(56px,18vmin,130px)}
.wb-slot.is-ghost{color:var(--kid-soft)}.wb-slot.is-filled{border-style:solid;border-color:var(--card,#2f9e8f);color:var(--kid-ink)}.wb-slot.is-next{outline:4px solid var(--kid-focus);outline-offset:2px}
.wb-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0}
.wb-area .wb-tile{min-width:48px;min-height:48px;padding:0 10px;border:3px solid #2f9e8f;border-radius:14px;background:var(--kid-surface);font-size:clamp(22px,5vmin,40px);font-weight:800;color:var(--kid-ink)}
.wb-area[data-mode="syllable"] .wb-tile{min-width:72px}
.wb-tile:disabled{opacity:.25}
.rf-area{grid-template-rows:auto auto minmax(0,1fr)}
.rf-text{margin:0;padding:6px 12px;border-radius:16px;background:var(--kid-surface);text-align:center;font-size:clamp(24px,6.5vmin,56px);font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.rf-area[data-kind="sentence"] .rf-text{font-size:clamp(18px,4.6vmin,40px)}
.rf-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}
.rf-option{container-type:size;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:4px 10px;min-width:44px;min-height:44px;border:3px solid transparent;border-radius:18px;background:var(--kid-surface);padding:6px;overflow:hidden}
.rf-option>svg{width:100%;height:100%;max-height:220px;min-height:0}
/* At most three shapes per row, sized from the picture card. */
.rf-option{flex-direction:column}.rf-group{--s:min(26cqw,22cqh);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:calc(3*var(--s) + 8px)}.rf-group>svg{flex:none;width:var(--s);height:var(--s)}
/* One shape per color phrase can be large; counted shapes share one size so size never hints at the answer. */
.rf-area[data-numbered="false"] .rf-group{--s:min(58cqw,58cqh)}.rf-area[data-kind="sentence"] .rf-group{--s:min(26cqw,13cqh)}
@media (min-aspect-ratio:6/5){.rf-options{grid-template-columns:repeat(var(--choices,2),minmax(0,1fr))}.wb-area{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto}.wb-area>.learn-prompt{grid-column:1 / 3}.wb-picture{grid-row:2 / 4}.wb-slots{grid-column:2;grid-row:2;align-self:end}.wb-tiles{grid-column:2;grid-row:3}}
@media (max-height:450px){.rf-text{font-size:22px;padding:2px 10px}.wb-slot{height:40px;font-size:22px}.wb-area .wb-tile{min-height:44px;font-size:22px}}
.np-area[data-digits="3"] .np-stone,.np-area[data-digits="3"] .np-option{font-size:clamp(18px,3.6vmin,40px)!important}

/* Chess game after the lessons: the friend's last move stays marked; legal destinations glow after a selection. */
.chess-cell.is-last{box-shadow:inset 0 0 0 4px #4085d9}.chess-area.is-match .chess-cell[aria-pressed="true"]{box-shadow:inset 0 0 0 4px #e0703c}

/* Find It: one spoken word, three or four large pictures and a three-dot level meter. */
.kids-card[data-game="object-hunt"]{--card:#4f8fd1;--card-bg:#e1ecfb}
.oh-area{grid-template-rows:auto minmax(0,1fr) 20px}
.oh-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}
.oh-option{display:grid;place-items:center;min-width:44px;min-height:44px;border:3px solid transparent;border-radius:18px;background:var(--kid-surface);padding:8px;overflow:hidden}.oh-option>svg{width:100%;height:100%;max-height:240px;min-height:0}
.oh-area[data-choices="3"] .oh-option:first-child{grid-column:1 / 3}
.oh-progress{display:flex;justify-content:center;align-items:center;gap:8px}.oh-progress>span{width:14px;height:14px;border-radius:50%;border:2px solid #4f8fd1}.oh-progress>span.is-done{background:#4f8fd1}
@media (min-aspect-ratio:6/5){.oh-options{grid-template-columns:repeat(3,minmax(0,1fr))}.oh-area[data-choices="4"] .oh-options{grid-template-columns:repeat(4,minmax(0,1fr))}.oh-area[data-choices="3"] .oh-option:first-child{grid-column:auto}}

/* Pale artwork such as clouds needs a tinted card to stay visible in both themes. */
.oh-option,.rf-option,.wb-picture{background:color-mix(in srgb,var(--kid-surface) 82%,#4f8fd1)}

/* Silhouettes are opaque, so overlapping body parts never show through. Scene hints are dark shapes on every empty
   slot (whatever class the artwork carries) and stay visible on light sky as well as water and grass; a placed
   object and the reference preview always show the real picture. */
.sb-area.has-hints .sb-slot:not(.is-filled)>svg{opacity:.5;filter:brightness(0)}


/* First Numbers: the numeral beside large apples to tap and count; zero shows an empty plate. */
.discovery-count-mode{grid-template-rows:auto minmax(0,1fr)}
.discovery-count-mode .discovery-content{align-items:stretch}
.discovery-count-mode .discovery-model{flex:none;width:min(30%,240px);height:auto;max-height:none}
.discovery-apples{flex:1;display:grid;grid-template-columns:repeat(var(--cols,3),var(--apple,96px));grid-auto-rows:var(--apple,96px);gap:10px;place-content:center;min-width:0;min-height:0}
.discovery-apples .discovery-object{width:var(--apple,96px);height:var(--apple,96px);border-radius:20px;box-shadow:var(--kid-shadow);padding:6%}
.discovery-apples .discovery-object>svg{max-height:none}
.discovery-apples .discovery-count{font-size:calc(var(--apple,96px)*.42)}
.discovery-apples.is-empty{border:4px dashed var(--kid-soft);border-radius:50%;aspect-ratio:1;max-width:60%;max-height:100%;margin:auto}
@media (max-aspect-ratio:1/1){.discovery-count-mode .discovery-content{flex-direction:column}.discovery-count-mode .discovery-model{width:auto;height:26%;min-height:88px}}

/* Celebration: Games (back to this age group's picker) sits beside the pulsing Next button. */
.kids-celebrate-games{position:absolute;right:calc(clamp(14px,4vmin,40px) + var(--btn) + 16px);bottom:clamp(14px,4vmin,40px);background:var(--kid-surface);color:var(--kid-ink)}