/* Kid Zone tokens now MAP onto the shared design system (Gate 5B).
   The playful violet/gold Kid Zone identity is preserved, but every value
   derives from shared/design-system.css — one source of truth. */
:root{
  --kz-bg:var(--cl-kid-bg); --kz-bg2:var(--cl-kid-bg-2);
  --kz-card:var(--cl-kid-card); --kz-card2:hsl(258,38%,27%);
  --kz-text:var(--cl-text); --kz-dim:hsl(258,40%,78%); --kz-subtle:hsl(258,28%,62%);
  --kz-accent:var(--cl-gold); --kz-accent2:var(--cl-orange);
  --kz-green:var(--cl-green-light); --kz-red:var(--cl-danger); --kz-blue:var(--cl-sky);
  --kz-violet:var(--cl-violet);
  --kz-r:var(--cl-r-lg);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--cl-font);
  background:radial-gradient(120% 90% at 50% 0%, var(--kz-bg2), var(--kz-bg));
  color:var(--kz-text); min-height:100vh; overflow-x:hidden;
}
/* Kid Zone keeps Nunito for headings only (per shared type strategy) */
.kz-h1,.kz-h2,.kz-logo,.kt-name,.lvl-title,.ch-en,.hstat-num,.done-burst,#doneTitle{
  font-family:var(--cl-font-kid);
}
#app{max-width:560px;margin:0 auto;padding:0 18px 40px;min-height:100vh;}

/* status banner (demo / synced) */
.demo-banner{background:rgba(77,181,255,.18);border:1px solid var(--kz-blue);color:#cfe9ff;
  border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;margin-top:14px;text-align:center;}
.demo-banner.synced{background:rgba(61,220,132,.16);border-color:var(--kz-green);color:#cdebd8;}

/* screens */
.screen{display:none;animation:fade var(--cl-dur-med) var(--cl-ease);}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* top bar */
.kz-top{display:flex;align-items:center;gap:12px;padding:18px 0 8px;min-height:60px;}
.kz-logo{font-size:18px;font-weight:800;display:flex;align-items:center;gap:6px;}
.kz-logo span{color:var(--kz-accent);}
.kz-logo em{font-style:normal;background:var(--kz-accent2);color:#2a1500;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:800;}
.kz-back{background:var(--kz-card);color:var(--kz-text);border:none;border-radius:14px;
  padding:12px 16px;font-size:15px;font-weight:700;cursor:pointer;min-height:48px;}
.kz-back:active{transform:scale(.96);}
.kz-me{margin-left:auto;display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;}
.kz-ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--kz-accent),var(--kz-accent2));color:#2a1500;font-weight:900;font-size:18px;}

.kz-h1{font-size:30px;font-weight:900;margin:18px 0 6px;line-height:1.1;}
.kz-h2{font-size:17px;font-weight:800;margin:26px 0 12px;color:var(--kz-dim);}
.kz-sub{font-size:16px;color:var(--kz-dim);margin-bottom:8px;}
.kz-empty{background:var(--kz-card);border-radius:var(--kz-r);padding:18px;color:var(--kz-dim);font-size:15px;text-align:center;margin-top:16px;}

/* CTA */
.kz-cta{width:100%;margin-top:26px;border:none;border-radius:20px;
  background:linear-gradient(135deg,var(--kz-accent),var(--kz-accent2));color:#2a1500;
  font-size:20px;font-weight:900;padding:20px;cursor:pointer;min-height:64px;
  box-shadow:0 8px 24px rgba(255,138,61,.35);}
.kz-cta:active{transform:scale(.97);}

/* pick grid */
.kid-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;}
.kid-tile{width:100%;background:var(--kz-card);border:2px solid transparent;border-radius:var(--kz-r);
  padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:var(--kz-text);
  min-height:140px;justify-content:center;transition:.15s;}
.kid-tile:active{transform:scale(.96);border-color:var(--kz-accent);}
.kt-ava{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;
  background:linear-gradient(135deg,var(--kz-blue),#7b6cff);color:#fff;}
.kt-name{font-size:18px;font-weight:800;}
.kt-meta{font-size:13px;color:var(--kz-dim);font-weight:700;}

/* hub card */
.hub-card{background:var(--kz-card);border-radius:var(--kz-r);padding:18px;margin-top:8px;}
.hub-lvl{display:flex;align-items:center;gap:16px;}
.lvl-badge{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--kz-accent),var(--kz-accent2));color:#2a1500;font-size:26px;font-weight:900;}
.lvl-meta{flex:1;}
.lvl-title{font-size:18px;font-weight:800;}
.lvl-bar{height:12px;background:var(--kz-bg);border-radius:8px;overflow:hidden;margin:6px 0 4px;}
.lvl-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--kz-green),var(--kz-blue));transition:width .5s;}
.lvl-hint{font-size:12px;color:var(--kz-dim);font-weight:600;}
.hub-stats{display:flex;gap:10px;margin-top:18px;}
.hstat{flex:1;background:var(--kz-bg);border-radius:14px;padding:14px 6px;text-align:center;}
.hstat-num{font-size:26px;font-weight:900;color:var(--kz-accent);}
.hstat-lbl{font-size:12px;color:var(--kz-dim);font-weight:700;margin-top:2px;}

/* word chips */
.word-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.wchip{background:var(--kz-card2);border-radius:14px;padding:12px 16px;font-size:16px;font-weight:800;}
.wchip.done{background:rgba(61,220,132,.18);color:var(--kz-green);}
.wchip.muted{color:var(--kz-subtle);font-weight:600;background:var(--kz-card);}

/* badges */
.badge-row{list-style:none;display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;}
.badge{flex:none;width:84px;border-radius:16px;padding:14px 6px;text-align:center;background:var(--kz-card);}
.badge .b-icon{font-size:30px;display:block;}
.badge .b-name{font-size:11px;font-weight:800;color:var(--kz-dim);margin-top:4px;display:block;line-height:1.1;}
.badge.locked{opacity:.4;filter:grayscale(1);}
.badge.got{background:rgba(255,210,63,.15);box-shadow:0 0 0 2px var(--kz-accent) inset;}

/* challenge */
.ch-progress{margin-left:auto;font-weight:900;font-size:16px;color:var(--kz-accent);}
.ch-card{background:var(--kz-card);border-radius:24px;padding:26px 20px;margin-top:10px;text-align:center;}
.ch-step{font-size:14px;font-weight:800;color:var(--kz-dim);margin-bottom:10px;}
.ch-en{font-size:38px;font-weight:900;line-height:1.05;margin:6px 0;}
.ch-audio{margin:12px auto;display:block;background:var(--kz-blue);color:#06243a;border:none;border-radius:16px;
  font-size:18px;font-weight:800;padding:14px 24px;cursor:pointer;min-height:56px;}
.ch-audio:active{transform:scale(.96);}
.ch-pron{font-size:18px;color:var(--kz-accent);font-weight:700;font-style:italic;}
.ch-prompt{font-size:17px;font-weight:800;margin:20px 0 14px;}
.ch-options{list-style:none;display:grid;gap:12px;}
.ch-opt{width:100%;background:var(--kz-card2);color:var(--kz-text);border:2px solid transparent;border-radius:16px;
  padding:18px;font-size:18px;font-weight:800;cursor:pointer;min-height:60px;transition:.12s;}
.ch-opt:active{transform:scale(.97);}
.ch-opt:disabled{cursor:default;}
.ch-opt.right{background:rgba(61,220,132,.25);border-color:var(--kz-green);color:var(--kz-green);}
.ch-opt.wrong{background:rgba(255,93,108,.22);border-color:var(--kz-red);color:var(--kz-red);}
.ch-feedback{min-height:26px;margin-top:16px;font-size:16px;font-weight:800;}
.ch-feedback.ok{color:var(--kz-green);}
.ch-feedback.bad{color:var(--kz-red);}

/* done */
.done-burst{font-size:72px;text-align:center;margin:30px 0 10px;animation:pop .5s ease;}
@keyframes pop{0%{transform:scale(0);}70%{transform:scale(1.2);}100%{transform:scale(1);}}
#screenDone{text-align:center;}
.done-earned{list-style:none;margin:18px 0;}
.earned-badge{background:var(--kz-card);border-radius:14px;padding:14px;font-size:16px;font-weight:800;margin-bottom:10px;}
.earned-badge.muted{color:var(--kz-dim);font-weight:600;}
.done-stats{display:flex;gap:12px;justify-content:center;max-width:280px;margin:0 auto;}
.done-stats .hstat{flex:1;}

/* toast */
.kz-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:#000;color:#fff;padding:14px 22px;border-radius:14px;font-weight:800;font-size:15px;
  opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90%;text-align:center;}
.kz-toast.show{opacity:.95;transform:translateX(-50%) translateY(0);}

@media(min-width:480px){.kid-grid{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   GATE 5B — premium Kid Zone adoption (visual + feedback only)
   No storage/JS-logic changes. Hooks into existing classes.
   ============================================================ */

/* --- coach mascot --- */
.kz-hero{display:flex;align-items:center;gap:14px;margin-top:10px;}
.kz-hero-copy{flex:1;min-width:0;}
.kz-mascot{width:112px;height:112px;flex:none;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation:kz-mascot-in var(--cl-dur-slow) var(--cl-ease-spring) both,
            kz-bob 4.5s var(--cl-ease) 0.6s infinite;}
@keyframes kz-mascot-in{from{opacity:0;transform:scale(.6) translateY(12px);}to{opacity:1;transform:none;}}
@keyframes kz-bob{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-7px) rotate(1deg);}}
.kz-mascot--celebrate{display:block;margin:8px auto -6px;width:128px;height:128px;
  animation:kz-mascot-in var(--cl-dur-slow) var(--cl-ease-spring) both,
            kz-cheer 1s var(--cl-ease-spring) 0.3s 2;}
@keyframes kz-cheer{0%,100%{transform:rotate(0) scale(1);}25%{transform:rotate(-6deg) scale(1.05);}75%{transform:rotate(6deg) scale(1.05);}}

/* --- challenge: question entrance + option stagger --- */
#screenChallenge.active .ch-card{animation:cl-fade-up var(--cl-dur-med) var(--cl-ease) both;}
.ch-en{animation:cl-pop var(--cl-dur-med) var(--cl-ease-spring) both;}
.ch-options .ch-opt{animation:cl-fade-up var(--cl-dur-med) var(--cl-ease) both;}
.ch-options li:nth-child(1) .ch-opt{animation-delay:60ms;}
.ch-options li:nth-child(2) .ch-opt{animation-delay:120ms;}
.ch-options li:nth-child(3) .ch-opt{animation-delay:180ms;}
.ch-options li:nth-child(4) .ch-opt{animation-delay:240ms;}
.ch-opt{transition:transform var(--cl-dur-fast) var(--cl-ease),
         background var(--cl-dur-fast) var(--cl-ease),
         border-color var(--cl-dur-fast) var(--cl-ease);}
.ch-opt:not(:disabled):hover{transform:translateY(-2px);border-color:var(--kz-violet);}
/* correct / wrong feedback micro-animations (JS adds .right/.wrong) */
.ch-opt.right{animation:kz-correct var(--cl-dur-med) var(--cl-ease-spring);}
.ch-opt.wrong{animation:kz-shake .4s var(--cl-ease);}
@keyframes kz-correct{0%{transform:scale(1);}45%{transform:scale(1.06);}100%{transform:scale(1);}}
@keyframes kz-shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.ch-feedback.ok{animation:cl-pop var(--cl-dur-med) var(--cl-ease-spring);}
.ch-feedback.bad{animation:cl-fade-up var(--cl-dur-fast) var(--cl-ease);}

/* --- level bar shimmer + stat pop --- */
.lvl-bar span{position:relative;overflow:hidden;}
.lvl-bar span::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:kz-shimmer 2.6s var(--cl-ease) 0.8s infinite;}
@keyframes kz-shimmer{0%{transform:translateX(-100%);}55%,100%{transform:translateX(220%);}}
#screenHub.active .hstat-num{animation:cl-pop var(--cl-dur-med) var(--cl-ease-spring) both;}
#screenHub.active .hstat:nth-child(2) .hstat-num{animation-delay:80ms;}
#screenHub.active .hstat:nth-child(3) .hstat-num{animation-delay:160ms;}
.hub-card{box-shadow:var(--cl-e2);}
.badge.got{animation:cl-pop var(--cl-dur-med) var(--cl-ease-spring) both;}

/* --- done screen: XP/level/streak pop + earned-badge entrance --- */
#screenDone.active .done-stats .hstat-num{animation:cl-pop 420ms var(--cl-ease-spring) both;}
#screenDone.active #doneLevel{animation-delay:120ms;}
#screenDone.active .earned-badge{animation:cl-fade-up var(--cl-dur-med) var(--cl-ease) both;}
#screenDone.active .earned-badge:nth-child(2){animation-delay:90ms;}
#screenDone.active .earned-badge:nth-child(3){animation-delay:180ms;}
.earned-badge{box-shadow:var(--cl-glow-gold);} 
.done-burst{animation:cl-pop var(--cl-dur-slow) var(--cl-ease-spring);}

/* --- CSS-only confetti burst (fires when Done screen activates) --- */
.kz-confetti{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;overflow:visible;}
#screenDone{position:relative;}
.kz-confetti i{position:absolute;top:60px;left:50%;width:10px;height:14px;border-radius:2px;opacity:0;}
#screenDone.active .kz-confetti i{animation:kz-fall 1500ms var(--cl-ease) forwards;}
.kz-confetti i:nth-child(1){background:var(--cl-gold);--tx:-140px;animation-delay:0ms;}
.kz-confetti i:nth-child(2){background:var(--cl-green-light);--tx:120px;animation-delay:60ms;}
.kz-confetti i:nth-child(3){background:var(--cl-orange);--tx:-90px;animation-delay:120ms;}
.kz-confetti i:nth-child(4){background:var(--cl-sky);--tx:170px;animation-delay:40ms;}
.kz-confetti i:nth-child(5){background:var(--cl-violet);--tx:-180px;animation-delay:160ms;}
.kz-confetti i:nth-child(6){background:var(--cl-gold);--tx:60px;animation-delay:100ms;}
.kz-confetti i:nth-child(7){background:var(--cl-green-light);--tx:-50px;animation-delay:200ms;}
.kz-confetti i:nth-child(8){background:var(--cl-orange);--tx:200px;animation-delay:80ms;}
.kz-confetti i:nth-child(9){background:var(--cl-sky);--tx:-200px;animation-delay:140ms;}
.kz-confetti i:nth-child(10){background:var(--cl-violet);--tx:30px;animation-delay:220ms;}
.kz-confetti i:nth-child(11){background:var(--cl-gold);--tx:-110px;animation-delay:50ms;}
.kz-confetti i:nth-child(12){background:var(--cl-green-light);--tx:140px;animation-delay:180ms;}
@keyframes kz-fall{0%{opacity:0;transform:translate(0,0) rotate(0);}
  10%{opacity:1;}
  100%{opacity:0;transform:translate(var(--tx,0),420px) rotate(540deg);}}

/* --- focus visibility (a11y, shared) --- */
.kid-tile:focus-visible,.kz-cta:focus-visible,.ch-opt:focus-visible,
.kz-back:focus-visible,.ch-audio:focus-visible{outline:3px solid var(--cl-green-light);outline-offset:3px;}

/* --- respect reduced motion: kill ambient loops, keep instant feedback --- */
@media (prefers-reduced-motion: reduce){
  .kz-mascot,.kz-mascot--celebrate{animation:none;}
  .lvl-bar span::after{animation:none;display:none;}
  .kz-confetti i{display:none;}
}