/* v9.2.30c kids polish pass: clay tokens, one button/card system, type scale, motion, tap celebration.
   Locked and untouched here: cream single light mode, dot background, cloud nav bar, Pip art and mouths. */
:is(body.kids-course,body.kids-home){
 --clay-cream:#fffaf2;--clay-cream-2:#fbf1e1;--clay-edge:#eadcc4;--clay-ink:#2b2f4a;--clay-ink-2:#4a4f6e;
 --clay-r-sm:16px;--clay-r:22px;--clay-r-lg:30px;
 --clay-hi:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(43,47,74,.06);
 --clay-sh:0 1px 1px rgba(90,66,30,.08),0 4px 8px -2px rgba(90,66,30,.12),0 14px 28px -14px rgba(90,66,30,.28);
 --clay-sh-press:0 1px 1px rgba(90,66,30,.10),0 2px 4px -1px rgba(90,66,30,.14);
 --spring:cubic-bezier(.34,1.56,.64,1);--soft:cubic-bezier(.22,1,.36,1);
 --t-fast:140ms;--t:240ms;--t-slow:420ms;
 --ok:#3fae5c;--ok-soft:#e3f6e7;--no:#e8618c;--no-soft:#ffe9ef}
/* type scale: Fredoka 500 body, 600 headings, calm tracking */
body.kids-course :is(.bh){font-weight:600!important;letter-spacing:-.005em!important;line-height:1.15!important}
body.kids-course .kact :is(p,.kids-prompt){font-weight:500;letter-spacing:.005em;line-height:1.3}
body .kact :is(.knum,p.kbig,.kids-big-num,.kids-xl,.kids-big,.ktap-n){font-family:"Fredoka Kids","Nunito",system-ui,sans-serif!important;font-weight:600!important;font-variant-numeric:tabular-nums}
body .kact :is(.kshow p,p.kword,p.kline,.kl){font-family:"Fredoka Kids","Nunito",system-ui,sans-serif!important;font-weight:500!important}
/* caption: the one plain line that says what this is and what to do */
body.kids-course .kcap{display:block;max-width:34rem;margin:.5rem 0 0;font-size:clamp(1.15rem,3.6vw,1.35rem);line-height:1.4;font-weight:500;color:var(--clay-ink-2)}
body.kids-course .kcap b{color:var(--clay-ink);font-weight:600}
/* activity card: clay slab instead of thick crayon outline */
body.kids-course .kact{background:linear-gradient(180deg,#fffdf8,var(--clay-cream))!important;border:2px solid color-mix(in srgb,var(--accent) 30%,var(--clay-edge))!important;border-radius:var(--clay-r-lg)!important;box-shadow:var(--clay-hi),var(--clay-sh)!important}
/* one button system for every tappable thing (fixes the plain grey browser buttons in games) */
body .kact :is(.kopt,.kbtn,.kids-c,.kids-ch,.kids-btn,.kids-cell,.kids-swatch){appearance:none;-webkit-appearance:none;font-family:"Fredoka Kids","Nunito",system-ui,sans-serif!important;font-weight:600;color:var(--clay-ink)!important;
 min-height:64px;min-width:min(100%,15rem);padding:10px 22px;border:2px solid var(--clay-edge)!important;border-radius:var(--clay-r)!important;
 background:linear-gradient(180deg,#fffefb 0%,var(--clay-cream-2) 100%)!important;box-shadow:var(--clay-hi),var(--clay-sh)!important;
 display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:transform var(--t) var(--spring),box-shadow var(--t) var(--soft),border-color var(--t) var(--soft),background-color var(--t) var(--soft)!important}
body .kact .kids-ch{font-size:1.9rem!important;margin:0}
body .kact :is(.kopt,.kbtn,.kids-c,.kids-ch,.kids-btn):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--clay-edge))!important}
body .kact :is(.kopt,.kbtn,.kids-c,.kids-ch,.kids-btn):active{transform:translateY(2px) scale(.98);box-shadow:var(--clay-sh-press)!important;transition-duration:var(--t-fast)!important}
body .kact :is(.kopt,.kbtn,.kids-c,.kids-ch,.kids-btn,.kids-cell):focus-visible{outline:none!important;box-shadow:0 0 0 4px #fff,0 0 0 7px color-mix(in srgb,var(--accent) 70%,#fff),var(--clay-sh)!important}
body.kids-course .kact :is(.kopt.is-ok,.kbtn.is-ok,.kids-ok){background:linear-gradient(180deg,#f3fcf5,var(--ok-soft))!important;border-color:var(--ok)!important;box-shadow:var(--clay-hi),0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent),var(--clay-sh)!important}
body.kids-course .kact :is(.kopt.is-no,.kbtn.is-no,.kids-no){background:linear-gradient(180deg,#fff7f9,var(--no-soft))!important;border-color:var(--no)!important}
@keyframes kno{20%{transform:translateX(-6px) rotate(-1deg)}45%{transform:translateX(5px) rotate(1deg)}70%{transform:translateX(-3px)}100%{transform:none}}
body .kact .kids-stars{color:var(--clay-ink-2)!important;font-weight:500;font-size:1.2rem!important}
/* the "Yay" moment: Pip + word on a clay pill, springs in. Only after a real action. */
body .kact .kact-yay:not([hidden]){display:flex;align-items:center;gap:12px;padding:8px 22px 8px 10px;border-radius:999px;background:linear-gradient(180deg,#fffefb,#fff3d6);border:2px solid #f3d99a;box-shadow:var(--clay-hi),var(--clay-sh);color:var(--clay-ink);font-weight:600}
body .kact .kact-yay img{width:52px;height:auto;display:block}
body .kact .kact-yay span{font-size:1.5rem!important;letter-spacing:.01em}
body .kact .kact-yay:not([hidden]){animation:kyay-in 520ms var(--spring) both}
body .kact .kact-yay img{animation:kyay-pip 900ms var(--soft) both}
@keyframes kyay-in{0%{opacity:0;transform:translateY(10px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes kyay-pip{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-12px) scale(.94,1.08) rotate(-6deg)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-4px) rotate(3deg)}100%{transform:none}}
body .kact .kact-next{min-width:5.5rem!important;min-height:56px!important}
body .kact.is-passive .kact-next{opacity:.85}
/* tap celebration (Numbers): squash-and-stretch, number word, clay confetti */
body .kact .ktap{position:relative;overflow:visible}
body .kact .ktap.kpop{animation:kpop 620ms var(--spring) both}
@keyframes kpop{0%{transform:scale(1)}18%{transform:scale(1.12,.86)}42%{transform:scale(.92,1.1) translateY(-8px)}66%{transform:scale(1.04,.97)}100%{transform:scale(1)}}
body .kact .ktap.kpop .kpic{animation:kwiggle 700ms var(--soft) both}
@keyframes kwiggle{30%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}100%{transform:none}}
body .kact .ktap-n{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
body .kact .ktap-n i{font-style:normal;font-size:1rem;font-weight:500;color:var(--clay-ink-2);margin-top:2px}
body .kact .ktap.kpop .ktap-n{animation:kword 640ms var(--spring) 80ms both}
@keyframes kword{0%{opacity:0;transform:translateY(14px) scale(.5)}60%{opacity:1;transform:translateY(-6px) scale(1.12)}100%{transform:none}}
.kconf{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.kconf b{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset -2px -2px 0 rgba(0,0,0,.10),inset 2px 2px 0 rgba(255,255,255,.6);animation:kconf 820ms var(--soft) both}
@keyframes kconf{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.8)}}
body .kact p.kbig:not(:empty){animation:kword 600ms var(--spring) both}
/* home cards: same clay depth */
html body.kids-home #courses > section.course.card-link{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.08),0 4px 8px -2px rgba(90,66,30,.14),0 18px 32px -16px rgba(90,66,30,.35)!important;transition:transform var(--t) var(--spring)}
html body.kids-home #courses > section.course.card-link:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
 body .kact :is(.kopt,.kbtn,.kids-c,.kids-ch,.kids-btn){transition:none!important}
 body .kact :is(.kact-yay,.kact-yay img,.ktap.kpop,.ktap.kpop .kpic,.ktap.kpop .ktap-n,p.kbig){animation:none!important}
 .kconf{display:none}
 html body.kids-home #courses > section.course.card-link{transition:none}}
body .kact :is(.kact-yay,.kact-next,button,p,div)[hidden]{display:none!important}