:root{
  --ink:#2c2555; --muted:#7b74a3;
  --brand:#6c5ce7; --brand2:#8a7cff;
  --good:#12b76a;
  --card-r:30px;
  --tap:96px;
  /* curated, non-generic palette */
  --c-coral:#ff6f91; --c-tang:#ff9f5a; --c-sun:#ffc24b; --c-mint:#2fc19e;
  --c-sky:#39b7e5; --c-peri:#7c83ff; --c-orchid:#c77dff; --c-teal:#3ec9a7; --c-grape:#8a7cff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;}
html,body{height:100%; margin:0; overscroll-behavior:none;}
body{
  font-family:"SF Pro Rounded","Baloo 2",ui-rounded,-apple-system,"Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(42vmax 42vmax at 10% -10%, #ffdce8 0%, transparent 62%),
    radial-gradient(40vmax 40vmax at 110% 4%, #d3f4ea 0%, transparent 62%),
    radial-gradient(48vmax 48vmax at 50% 125%, #e4e0ff 0%, transparent 58%),
    linear-gradient(180deg,#fff8f4 0%,#f4f1ff 100%);
  background-attachment:fixed;
  touch-action:manipulation; overflow:hidden; position:fixed; inset:0;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

/* ---------- Top bar ---------- */
/* topbar must sit ABOVE the absolute .screen layers, but let taps fall through its empty gaps
   (so the in-game back button underneath still works) */
#topbar{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 12px) 20px 4px;
  position:relative; z-index:50; pointer-events:none; }
#topbar > *{ pointer-events:auto; }
.seg{display:inline-flex; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); border-radius:999px; padding:6px; box-shadow:0 6px 18px rgba(90,60,180,.16);}
.seg.small{flex-wrap:wrap;}
body.playing #profileSeg{visibility:hidden;} /* back button sits here during a game */
.seg-btn{
  font-size:20px; font-weight:800; letter-spacing:.2px; padding:12px 20px; border-radius:999px; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px; transition:transform .1s, background .15s, color .15s; position:relative;
}
.seg-btn:active{transform:scale(.93);}
.seg-btn.on{background:linear-gradient(160deg,var(--brand2),var(--brand)); color:#fff; box-shadow:0 6px 14px rgba(108,92,231,.45);}
.seg-sub{display:block; font-size:12px; font-weight:700; opacity:.85; margin-top:-2px;}
.seg-btn .lbl{display:flex; flex-direction:column; align-items:flex-start; line-height:1.05;}
.star-count{ margin-left:auto; font-weight:900; font-size:22px; color:#f59e0b; background:rgba(255,255,255,.85); padding:9px 16px; border-radius:999px; box-shadow:0 6px 16px rgba(90,60,180,.14); }
.topbar-right{display:flex; gap:10px;}
.lang-btn,.parent-btn{ width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.9); font-size:27px; box-shadow:0 6px 16px rgba(90,60,180,.16); display:grid; place-items:center; }
.lang-btn:active,.parent-btn:active{transform:scale(.9);}
.parent-btn{font-size:23px; opacity:.55;}

/* ---------- Screens ---------- */
.screen{position:absolute; inset:0; display:none; flex-direction:column;}
.screen.active{display:flex;}
#home{top:0; padding:0 24px 22px; overflow:hidden;}
.home-head{ text-align:center; padding-top:32px; }
.home-title{ margin:0; font-size:clamp(30px,4.6vw,48px); font-weight:900; letter-spacing:.5px;
  background:linear-gradient(120deg,#6c5ce7,#c77dff 55%,#ff6f91); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subject-tabs{ display:inline-flex; margin:12px auto 4px; background:rgba(255,255,255,.7); backdrop-filter:blur(8px); border-radius:999px; padding:6px; box-shadow:0 6px 18px rgba(90,60,180,.14); }
.subject-tabs .seg-btn{font-size:19px; padding:12px 26px;}
.subject-tabs .seg-btn.on{background:linear-gradient(160deg,#ffb14e,#ff7a8a);}

.grid{ flex:1; display:grid; gap:20px; align-content:center; grid-template-columns:repeat(3,1fr); max-width:1040px; margin:0 auto; width:100%; }
.card{
  aspect-ratio:1/.82; border-radius:var(--card-r); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:#fff; font-weight:900;
  box-shadow:0 12px 0 var(--card-shade,rgba(0,0,0,.14)), 0 20px 34px rgba(60,40,120,.20);
  transition:transform .1s, box-shadow .1s;
}
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 46%); }
.card:active{transform:translateY(7px); box-shadow:0 5px 0 var(--card-shade,rgba(0,0,0,.14)), 0 10px 18px rgba(60,40,120,.20);}
.ico-plate{ width:clamp(78px,12vw,116px); height:clamp(78px,12vw,116px); border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; z-index:1;
  box-shadow: inset 0 -7px 12px rgba(0,0,0,.06), 0 10px 18px rgba(0,0,0,.14); }
.card .ico{font-size:clamp(40px,7vw,64px); line-height:1;}
.card .label{font-size:clamp(17px,2.4vw,25px); z-index:1; text-shadow:0 2px 4px rgba(0,0,0,.14);}

/* ---------- Game ---------- */
#game{padding:calc(env(safe-area-inset-top) + 74px) 24px 22px;} /* clear the top bar (reward/lang/parent) */
.back-btn{ position:absolute; top:calc(env(safe-area-inset-top) + 12px); left:18px; z-index:5;
  width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.95); font-size:29px;
  box-shadow:0 6px 16px rgba(90,60,180,.22); display:grid; place-items:center; }
.back-btn:active{transform:scale(.9);}
.prompt-bar{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px auto 2px; max-width:860px; }
.speak-btn{ width:68px; height:68px; min-width:68px; border-radius:50%; background:linear-gradient(160deg,var(--brand2),var(--brand)); color:#fff;
  font-size:31px; display:grid; place-items:center; box-shadow:0 8px 18px rgba(108,92,231,.4); }
.speak-btn:active{transform:scale(.9);}
.speak-btn.pulse{animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{50%{transform:scale(1.09); box-shadow:0 8px 24px rgba(108,92,231,.6);}}
.prompt-text{font-size:clamp(24px,3.6vw,40px); font-weight:900; text-align:center;}
.prompt-text b{color:var(--brand);}
.prompt-text .eq{ letter-spacing:.02em; }
.prompt-text .q{ color:#e64980; }
.prompt-text .q.hi{ color:var(--good); animation:rightpop .5s; }

.play{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:clamp(14px,3vh,44px); min-height:0; padding-bottom:6px; }
.stage{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(10px,2vw,26px); padding:6px; min-height:0; }
.obj{font-size:clamp(52px,12vw,120px); line-height:1; transition:transform .15s; will-change:transform;}
.obj.tappable:active{transform:scale(1.25);}
.obj.counted{animation:pop .35s ease; transform:scale(1.12); filter:drop-shadow(0 6px 6px rgba(0,0,0,.18));}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1.12)}}
.shape{width:clamp(90px,16vw,150px); height:clamp(90px,16vw,150px); display:grid; place-items:center;}
.shape svg{width:100%; height:100%; filter:drop-shadow(0 6px 5px rgba(0,0,0,.18));}
.glyph{font-size:clamp(70px,15vw,150px); font-weight:900; color:var(--brand); line-height:1;}

.choices{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,2.4vw,22px); padding:6px 0 4px; max-width:940px; margin:0 auto; width:100%; }
.choice{ min-width:var(--tap); min-height:var(--tap); padding:0 22px; border-radius:26px; background:rgba(255,255,255,.96);
  font-size:clamp(38px,7vw,64px); font-weight:900; color:var(--ink);
  box-shadow:0 9px 0 rgba(120,90,190,.16), 0 12px 22px rgba(60,40,120,.14);
  display:grid; place-items:center; transition:transform .1s, box-shadow .1s; }
.choice.glyph-choice{color:var(--brand);}
.choice.wide{font-size:clamp(24px,4vw,40px); padding:0 30px;}
.choice:active{transform:translateY(6px); box-shadow:0 3px 0 rgba(120,90,190,.16);}
.choice.wrong{animation:wobble .45s;}
.choice.right{background:linear-gradient(160deg,#2fd48a,#12b76a); color:#fff; animation:rightpop .4s;}
@keyframes wobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px) rotate(-4deg)}40%{transform:translateX(12px) rotate(4deg)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
@keyframes rightpop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.choice.dim{opacity:.32;}

/* ---------- Overlays ---------- */
.overlay{position:absolute; inset:0; display:none; z-index:40; pointer-events:none;}
.overlay.show{display:block;}
.center-overlay{display:none; place-items:center; background:rgba(40,25,90,.5); backdrop-filter:blur(7px); pointer-events:auto;}
.center-overlay.show{display:grid;}
.panel{ background:#fff; border-radius:34px; padding:34px 30px; width:min(90vw,440px); text-align:center; box-shadow:0 30px 70px rgba(30,15,70,.4); }
.panel.parent{width:min(92vw,540px); text-align:left;}
.big-emoji{font-size:80px; margin-bottom:6px;}
.panel-title{font-size:28px; font-weight:900; margin-bottom:8px; text-align:center;}
.panel-sub{font-size:19px; color:var(--muted); margin-bottom:20px; text-align:center;}
.big-action{ width:100%; padding:18px; border-radius:22px; background:linear-gradient(160deg,var(--brand2),var(--brand)); color:#fff; font-size:24px; font-weight:900; box-shadow:0 6px 0 rgba(60,30,180,.32); }
.big-action:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(60,30,180,.32);}
.gate-nums{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0;}
.gate-num{ width:74px; height:74px; border-radius:20px; background:#f0edff; color:var(--brand); font-size:34px; font-weight:900; display:grid; place-items:center; }
.gate-num:active{transform:scale(.92);}
.parent-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0; flex-wrap:wrap; font-size:18px; font-weight:700;}
.link-btn{color:var(--brand); font-weight:800; font-size:17px; padding:10px 0; text-decoration:underline;}
.parent-note{font-size:14px; color:var(--muted); line-height:1.5; background:#f6f4ff; padding:14px; border-radius:16px; margin:10px 0 18px;}

/* confetti / cheer */
.confetti{position:absolute; top:-20px; font-size:26px; animation:fall linear forwards; pointer-events:none;}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg); opacity:.9;}}
.cheer{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(0); font-size:min(20vw,150px); animation:cheer .9s ease forwards; pointer-events:none; }
@keyframes cheer{30%{transform:translate(-50%,-50%) scale(1.15)}70%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1); opacity:0;}}

/* ===== Themes (per profile) ===== */
body.theme-dino{ background:
  radial-gradient(42vmax 42vmax at 10% -10%, #d5f6e3 0%, transparent 62%),
  radial-gradient(40vmax 40vmax at 110% 4%, #d9f0ff 0%, transparent 62%),
  radial-gradient(48vmax 48vmax at 50% 125%, #e3f7d9 0%, transparent 58%),
  linear-gradient(180deg,#f4fff7 0%,#eefaf1 100%); }
body.theme-pony{ background:
  radial-gradient(42vmax 42vmax at 10% -10%, #ffdcef 0%, transparent 62%),
  radial-gradient(40vmax 40vmax at 110% 4%, #eadcff 0%, transparent 62%),
  radial-gradient(48vmax 48vmax at 50% 125%, #ffe1ee 0%, transparent 58%),
  linear-gradient(180deg,#fff6fb 0%,#f6eeff 100%); }

/* ===== Reward button in top bar ===== */
.reward-btn{ margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:900; font-size:20px;
  background:rgba(255,255,255,.9); padding:8px 16px 8px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(90,60,180,.16); }
.reward-btn .rb-emo{ font-size:26px; }
.reward-btn .rb-bar{ width:64px; height:12px; border-radius:999px; background:#eceaf6; overflow:hidden; }
.reward-btn .rb-fill{ height:100%; background:linear-gradient(90deg,#ffd23f,#ff8a3d); border-radius:999px; transition:width .35s; }
.reward-btn:active{ transform:scale(.94); }

/* ===== Collection overlay ===== */
#collection .panel{ width:min(94vw,760px); max-height:88vh; overflow:auto; text-align:center; }
.coll-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:8px 0 4px; }
.badge{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.badge .disc{ width:clamp(64px,12vw,96px); height:clamp(64px,12vw,96px); border-radius:50%; display:grid; place-items:center;
  font-size:clamp(34px,6vw,52px); box-shadow:inset 0 -6px 12px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.12); }
.badge.locked .disc{ filter:grayscale(1) brightness(1.15); opacity:.5; }
.badge .bname{ font-size:14px; font-weight:800; color:var(--muted); }
.badge.locked .bname{ opacity:.5; }
/* pony puzzle */
.puzzle{ position:relative; width:min(72vw,340px); height:min(72vw,340px); margin:6px auto 12px; border-radius:26px; overflow:hidden;
  display:grid; place-items:center; background:linear-gradient(160deg,#ffe3f1,#efe0ff); box-shadow:inset 0 0 0 3px #fff, 0 12px 26px rgba(120,60,160,.25); }
.puzzle .pic{ font-size:min(46vw,220px); line-height:1; }
.puzzle .tiles{ position:absolute; inset:0; display:grid; }
.puzzle .tile{ background:linear-gradient(160deg,#c9a7e6,#a97fd6); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); transition:opacity .4s, transform .4s; }
.puzzle .tile.gone{ opacity:0; transform:scale(.6); pointer-events:none; }
.gallery{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px; }
.gallery .g-pic{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; font-size:38px;
  background:linear-gradient(160deg,#ffe3f1,#efe0ff); box-shadow:0 6px 12px rgba(120,60,160,.2); }

/* ===== Numberblocks (addition) ===== */
.nb-row{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,2vw,20px); flex-wrap:wrap; }
.nb-stack{ display:flex; flex-direction:column-reverse; gap:4px; align-items:center; }
.nb-unit{ width:clamp(38px,7vw,58px); height:clamp(38px,7vw,58px); border-radius:12px;
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.14), inset 0 2px 3px rgba(255,255,255,.5); position:relative; }
.nb-stack .nb-unit:last-child::after{ content:"👀"; position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); font-size:60%; }
.nb-op{ font-size:clamp(34px,6vw,54px); font-weight:900; color:var(--muted); padding-bottom:8px; }
.nb-merge{ animation:nbmerge .5s ease; }
@keyframes nbmerge{0%{transform:translateX(-14px)}100%{transform:translateX(0)}}

/* ===== Balance scale (measurement) ===== */
.scale{ position:relative; width:min(84vw,560px); height:230px; margin:0 auto; }
.scale .beam{ position:absolute; top:44px; left:50%; width:74%; height:12px; border-radius:8px; background:#8a6bd6;
  transform:translateX(-50%) rotate(0deg); transform-origin:center; transition:transform .5s; }
.scale.tilt-left .beam{ transform:translateX(-50%) rotate(-11deg); }
.scale.tilt-right .beam{ transform:translateX(-50%) rotate(11deg); }
.scale .pan{ position:absolute; top:40px; width:clamp(120px,24vw,190px); min-height:120px; padding:12px 8px 8px; border-radius:0 0 90px 90px;
  background:rgba(255,255,255,.92); box-shadow:0 10px 0 rgba(120,90,190,.14), 0 12px 22px rgba(60,40,120,.14);
  display:flex; flex-wrap:wrap; align-content:flex-end; justify-content:center; gap:4px; transition:transform .5s; }
.scale .pan .pi{ font-size:clamp(26px,5vw,40px); line-height:1; }
.scale .pan.left{ left:2%; } .scale .pan.right{ right:2%; }
.scale.tilt-left .pan.left{ transform:translateY(34px); } .scale.tilt-left .pan.right{ transform:translateY(-20px); }
.scale.tilt-right .pan.right{ transform:translateY(34px); } .scale.tilt-right .pan.left{ transform:translateY(-20px); }
.scale .post{ position:absolute; top:50px; left:50%; transform:translateX(-50%); width:14px; height:120px; border-radius:8px; background:#8a6bd6; }
.scale .base{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:150px; height:18px; border-radius:10px; background:#7a5bc6; }
.scale .pan:active{ transform:scale(.96); }
/* make-equal balance: count badges, level/glow when balanced, removable items */
.scale .pan{ position:absolute; }
.pan-count{ position:absolute; top:-34px; left:50%; transform:translateX(-50%); font-size:22px; font-weight:900; color:var(--brand);
  background:#fff; border-radius:999px; padding:2px 14px; box-shadow:0 3px 8px rgba(0,0,0,.14); }
.scale .pi{ animation:pop .3s ease; cursor:pointer; }
.scale.balanced .beam{ transform:translateX(-50%) rotate(0deg)!important; }
.scale.balanced .pan{ transform:translateY(0)!important; box-shadow:0 0 0 5px #34d39966, 0 10px 0 rgba(120,90,190,.14), 0 12px 22px rgba(60,40,120,.14); animation:balbounce .5s ease; }
@keyframes balbounce{0%,100%{}40%{transform:translateY(-8px)!important}}
.bal-hint{ text-align:center; font-size:16px; font-weight:800; color:var(--muted); margin-top:2px; }
.bal-pile{ display:flex; flex-wrap:wrap; gap:clamp(6px,1.6vw,14px); justify-content:center; margin-top:6px; }
.bal-src{ font-size:clamp(38px,7vw,60px); transition:transform .12s; cursor:pointer; }
.bal-src:active{ transform:scale(1.3); }
.bal-src.used{ visibility:hidden; }

/* ===== Feed the dino (give-N) ===== */
.feed-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.feed-target{ font-size:clamp(22px,3.4vw,32px); font-weight:900; }
.feed-target b{ color:var(--brand); font-size:1.5em; }
.feed-basket{ min-width:min(70vw,360px); min-height:96px; border-radius:22px; padding:12px; background:rgba(255,255,255,.9);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.06); display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; }
.feed-basket .fed{ font-size:clamp(30px,6vw,46px); animation:pop .3s ease; }
.feed-pile{ display:flex; flex-wrap:wrap; gap:clamp(8px,2vw,18px); justify-content:center; }
.feed-food{ font-size:clamp(46px,9vw,80px); transition:transform .12s; }
.feed-food:active{ transform:scale(1.3); }
.feed-mascot{ font-size:clamp(60px,12vw,110px); }

/* ===== Badge unlock / picture complete celebration ===== */
.reveal{ position:absolute; inset:0; display:grid; place-items:center; z-index:60; background:rgba(30,15,70,.55); backdrop-filter:blur(6px); pointer-events:auto; }
.reveal .card2{ background:#fff; border-radius:32px; padding:30px 34px; text-align:center; box-shadow:0 30px 70px rgba(30,15,70,.4); animation:rvpop .5s ease; }
@keyframes rvpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.reveal .big{ font-size:120px; line-height:1; animation:rvspin .8s ease; }
@keyframes rvspin{0%{transform:rotate(-20deg) scale(.4)}60%{transform:rotate(8deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}
.reveal .rv-title{ font-size:26px; font-weight:900; margin-top:8px; }
.reveal .rv-sub{ font-size:18px; color:var(--muted); margin-top:4px; }

/* ===== Mascot (hand-drawn SVG) ===== */
.mascot-svg{ width:100%; height:100%; display:block; overflow:visible; }
.home-mascot{ width:clamp(58px,9vw,96px); height:clamp(58px,9vw,96px); margin:0 auto 2px; animation:idle 2.4s ease-in-out infinite; transform-origin:bottom center; }
.feed-mascot{ width:clamp(76px,14vw,128px); height:clamp(76px,14vw,128px); }

/* ===== Memory match ===== */
.match-diff{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.match-diff .db{ padding:9px 22px; border-radius:999px; background:rgba(255,255,255,.92); font-weight:800; font-size:18px; color:var(--muted); box-shadow:0 4px 10px rgba(90,60,180,.14); }
.match-diff .db.on{ background:linear-gradient(160deg,var(--brand2),var(--brand)); color:#fff; box-shadow:0 5px 12px rgba(108,92,231,.4); }
.match-diff .db:active{ transform:scale(.94); }
.match-grid{ display:grid; gap:clamp(8px,1.6vw,15px); justify-content:center; margin:0 auto; }
.mcard{ aspect-ratio:1; border-radius:18px; position:relative; cursor:pointer; }
.mcard .inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.3,1.2); }
.mcard.flip .inner, .mcard.done .inner{ transform:rotateY(180deg); }
.mface{ position:absolute; inset:0; border-radius:18px; display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.mback{ background:linear-gradient(160deg,var(--brand2),var(--brand)); font-size:clamp(24px,4.5vw,42px); box-shadow:0 6px 0 var(--card-shade,rgba(0,0,0,.14)), 0 8px 16px rgba(60,40,120,.16); }
.mfront{ background:#fff; transform:rotateY(180deg); font-size:clamp(30px,6vw,56px); box-shadow:0 6px 0 rgba(120,90,190,.14), 0 8px 16px rgba(60,40,120,.14); }
.mcard:active .inner{ transform:scale(.96); }
.mcard.flip:active .inner, .mcard.done:active .inner{ transform:rotateY(180deg) scale(.96); }
.mcard.done{ animation:matched .5s ease; } .mcard.done .mfront{ box-shadow:0 0 0 4px #34d39966, 0 6px 12px rgba(60,40,120,.14); }
@keyframes matched{40%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ===== Number tracing ===== */
.trace-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.trace-box{ position:relative; width:min(56vw,300px); height:min(56vw,300px); touch-action:none;
  background:rgba(255,255,255,.72); border-radius:26px; box-shadow:inset 0 2px 12px rgba(60,40,120,.08); }
.trace-box svg{ position:absolute; inset:0; width:100%; height:100%; }
.tc-guide{ fill:none; stroke:#e4dff7; stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.tc-fill{ fill:none; stroke:url(#tgrad); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.tc-dot{ fill:#cabfff; } .tc-dot.hit{ fill:#34d399; } .tc-start{ fill:#ff6f91; }

/* ===== Add (drag-merge) / Subtract (take-away) ===== */
.add-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.add-row{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(12px,3vw,34px); }
.nb-stack.draggable{ cursor:grab; touch-action:none; position:relative; z-index:3; }
.nb-stack.draggable::after{ content:"✋"; position:absolute; top:-30px; left:50%; transform:translateX(-50%); font-size:22px; animation:idle 1.6s ease-in-out infinite; }
.nb-stack.draggable:active{ cursor:grabbing; }
.nb-total{ font-size:clamp(44px,9vw,84px); font-weight:900; color:var(--brand); opacity:0; transform:scale(.4); transition:opacity .3s, transform .3s; }
.nb-total.show{ opacity:1; transform:scale(1); }
.nb-unit.fly{ animation:fly .34s ease forwards; }
@keyframes fly{ to{ transform:translateY(-70px) scale(.3) rotate(25deg); opacity:0; } }
.sub-count{ font-size:clamp(30px,5vw,44px); font-weight:900; color:#e64980; }

/* ===== Flash memory ===== */
.flash-grid{ display:grid; gap:clamp(8px,1.6vw,14px); justify-content:center; margin:0 auto; }
.fcell{ aspect-ratio:1; border-radius:16px; background:rgba(255,255,255,.9);
  box-shadow:inset 0 2px 8px rgba(60,40,120,.08), 0 5px 0 rgba(120,90,190,.12); display:grid; place-items:center;
  font-size:clamp(26px,5vw,44px); cursor:pointer; transition:background .2s, transform .1s, box-shadow .2s; }
.fcell.lit{ background:linear-gradient(160deg,#ffd23f,#ff9f1c); box-shadow:0 0 0 4px #ffd23f66, 0 6px 14px rgba(0,0,0,.16); color:#fff; font-weight:900; text-shadow:0 2px 5px rgba(0,0,0,.3); }
.fcell.blink{ animation:fblink .42s ease-in-out 3; }
@keyframes fblink{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.15); filter:brightness(1.4); } }
.fcell.ok{ background:linear-gradient(160deg,#2fd48a,#12b76a)!important; box-shadow:0 0 0 4px #34d39966!important; }
.fcell.miss{ animation:wobble .4s; }
.fcell:active{ transform:scale(.93); }

/* ===== Phonics ===== */
.card-sub{ font-size:clamp(12px,1.8vw,16px); font-weight:800; opacity:.9; margin-top:-4px; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,.14); }
.p-big{ font-size:clamp(84px,18vw,180px); font-weight:900; color:var(--brand); line-height:1; text-shadow:0 4px 8px rgba(108,92,231,.16); }
.p-big.word{ font-size:clamp(52px,11vw,104px); letter-spacing:.08em; text-transform:lowercase; }
.p-card{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.p-emoji{ font-size:clamp(58px,12vw,116px); animation:objIn .3s ease both; }
.p-word2{ font-size:clamp(22px,4vw,34px); font-weight:800; color:var(--ink); text-transform:capitalize; }

/* ===== Motion / juice pass ===== */
#scenery{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#scenery .sc{ position:absolute; opacity:.13; line-height:1; will-change:transform; animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-14px); } }
.card{ animation:cardIn .5s cubic-bezier(.2,.85,.3,1.25) both; }
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.12s}
.card:nth-child(4){animation-delay:.17s}.card:nth-child(5){animation-delay:.22s}.card:nth-child(6){animation-delay:.27s}
@keyframes cardIn{0%{opacity:0; transform:translateY(26px) scale(.9)}100%{opacity:1; transform:translateY(0) scale(1)}}
.choice{ animation:chIn .34s cubic-bezier(.2,.85,.3,1.3) both; }
@keyframes chIn{0%{opacity:0; transform:translateY(14px) scale(.85)}100%{opacity:1; transform:translateY(0) scale(1)}}
.feed-mascot{ animation:idle 2.2s ease-in-out infinite; transform-origin:bottom center; }
@keyframes idle{50%{transform:translateY(-10px) rotate(-3deg)}}
.ico-plate{ animation:plateIn .5s ease both .1s; }
@keyframes plateIn{0%{transform:scale(.5) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
.stage .obj{ animation:objIn .3s ease both; }
@keyframes objIn{0%{opacity:0; transform:scale(.6)}100%{opacity:1; transform:scale(1)}}

@media (max-width:600px){
  .coll-grid{grid-template-columns:repeat(3,1fr);}
  .grid{grid-template-columns:repeat(2,1fr)!important; gap:14px;}
  .home-head{padding-top:14px;}
  .seg-btn{padding:10px 14px; font-size:17px;}
}