/* CBSE Tutor — KID MODE (Classes 1-5). Inline lessons + gamified exercises + Star Garden. */
body.kid{margin:0;font-family:'Fredoka','Baloo 2',system-ui,sans-serif;color:#2b2440;
  background:linear-gradient(160deg,#fff7ed 0%,#fef3c7 30%,#dbeafe 70%,#ede9fe 100%);background-attachment:fixed;min-height:100vh}
.kid-wrap{max-width:880px;margin:0 auto;padding:0 16px 40px}
h1,h2{font-family:'Baloo 2','Fredoka',sans-serif}

.kid-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 4px}
.kid-back{font-size:24px;text-decoration:none;background:#fff;border-radius:16px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #e2c9a0;transition:transform .1s}
.kid-back:active{transform:translateY(3px);box-shadow:0 1px 0 #e2c9a0}
.kid-top-title{flex:1;font-weight:700;font-size:15px;color:#7c3a12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kid-streak{background:#fff;border-radius:9999px;padding:8px 13px;font-size:15px;font-weight:800;color:#ea580c;box-shadow:0 4px 0 #fed7aa}
.kid-stars{background:#fff;border-radius:9999px;padding:8px 14px;font-size:17px;font-weight:800;color:#ea580c;box-shadow:0 4px 0 #fed7aa;display:flex;align-items:center;gap:4px}
.kid-stars .s{filter:drop-shadow(0 0 4px #fbbf24)}
.kid-stars.pop{animation:kidPop .4s ease}
@keyframes kidPop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-6deg)}100%{transform:scale(1)}}

.kid-hero{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;border-radius:28px;padding:20px 22px;box-shadow:0 10px 0 rgba(124,58,237,.12),0 16px 40px rgba(124,58,237,.12);margin:8px 0 22px}
.kid-mascot{font-size:60px;animation:kidBob 2.4s ease-in-out infinite;cursor:pointer;user-select:none}
@keyframes kidBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.kid-eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#db2777}
.kid-h1{font-size:28px;font-weight:800;margin:2px 0 4px;color:#5b21b6;line-height:1.1}
.kid-sub{font-size:14px;color:#6b6280;margin:0;font-weight:500}
.kid-progress{text-align:center}
.kid-progress-ring{position:relative;width:80px;height:80px}
.kid-progress-ring svg{width:80px;height:80px;transform:rotate(-90deg)}
.kid-progress-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.kid-progress-ring .bg{stroke:#f1e9ff}
.kid-progress-ring .fg{stroke:#22c55e;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .6s ease}
.kid-progress-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#16a34a}
.kid-progress-label{font-size:11px;font-weight:700;color:#9488ad;margin-top:4px}
@media (max-width:560px){.kid-hero{grid-template-columns:auto 1fr}.kid-progress{grid-column:1/-1}.kid-h1{font-size:23px}.kid-mascot{font-size:50px}}

.kid-section-title{font-size:20px;font-weight:800;color:#7c3a12;margin:0 0 12px}

/* Star Garden */
.kid-garden{background:linear-gradient(180deg,#e0f2fe,#dcfce7);border-radius:24px;padding:16px 18px;margin-bottom:22px;box-shadow:0 6px 0 rgba(34,197,94,.12)}
.kid-garden-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.kid-garden-head .kid-section-title{margin:0;color:#15803d}
.kid-garden-hint{font-size:12px;font-weight:700;color:#16a34a}
.kid-garden-strip{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;min-height:60px;margin-top:10px;
  background:linear-gradient(180deg,transparent 60%,#bbf7d0 60%);border-radius:14px;padding:8px 10px}
.kid-plant{font-size:34px;animation:kidSprout .5s ease}
@keyframes kidSprout{from{transform:scale(0) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.kid-plant.seed{font-size:18px;opacity:.5}

/* Inline lessons */
.kid-trail{display:flex;flex-direction:column;gap:12px}
.kid-stop-wrap{display:flex;flex-direction:column}
.kid-stop{display:flex;align-items:center;gap:13px;text-align:left;border:none;cursor:pointer;background:var(--c,#fef3c7);
  border-radius:20px;padding:13px 16px;box-shadow:0 6px 0 rgba(0,0,0,.08);transition:transform .12s,box-shadow .12s,border-radius .2s;width:100%}
.kid-stop:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.08)}
.kid-stop[aria-expanded="true"]{border-radius:20px 20px 6px 6px}
.kid-stop-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#fff;color:#7c3a12;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.kid-stop-medallion span,.kid-stop-medallion img{width:42px!important;height:42px!important}
.kid-stop-name{flex:1;font-weight:700;font-size:16px;color:#3b2f55;line-height:1.2}
.kid-stop-caret{font-size:14px;color:#7c3a12;transition:transform .2s}
.kid-stop[aria-expanded="true"] .kid-stop-caret{transform:rotate(180deg)}
.kid-stop-check{font-size:20px;opacity:.25;filter:grayscale(1);transition:all .2s}
.kid-stop.done .kid-stop-check{opacity:1;filter:none;animation:kidPop .4s ease}
.kid-lesson{background:#fff;border-radius:0 0 18px 18px;padding:16px 20px 18px;box-shadow:0 6px 0 rgba(0,0,0,.05);margin-bottom:2px;animation:kidExpand .25s ease}
@keyframes kidExpand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.kid-lesson-body{font-size:17px;line-height:1.8;color:#3b2f55}
.kid-lesson-body p{margin:0 0 12px}
.kid-lesson-body strong{color:#7c3aed}
.kid-lesson-body ul,.kid-lesson-body ol{padding-left:24px}
.kid-listen{background:#dbeafe;color:#1d4ed8;border:none;font-family:inherit;font-weight:800;font-size:14px;border-radius:9999px;padding:8px 18px;cursor:pointer;box-shadow:0 3px 0 #bfdbfe;margin-bottom:12px}
.kid-listen.playing{background:#fecaca;color:#b91c1c;box-shadow:0 3px 0 #fca5a5}
.kid-listen:active{transform:translateY(2px);box-shadow:0 1px 0 #bfdbfe}
.kid-done{display:block;margin:14px auto 0;background:#22c55e;color:#fff;border:none;font-family:inherit;font-weight:800;font-size:17px;border-radius:9999px;padding:11px 26px;cursor:pointer;box-shadow:0 5px 0 #16a34a}
.kid-done:active{transform:translateY(4px);box-shadow:0 1px 0 #16a34a}
.kid-done.got{background:#94a3b8;box-shadow:0 5px 0 #64748b}

/* Games hub */
.kid-game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kid-game-tile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-radius:22px;padding:18px 14px;box-shadow:0 7px 0 rgba(0,0,0,.18);transition:transform .12s}
.kid-game-tile:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.kid-game-tile .ge{font-size:40px}
.kid-game-tile .gt{font-size:18px;font-weight:800}
.kid-game-tile .gd{font-size:11px;font-weight:600;opacity:.92}

/* badges */
.kid-badges{margin:24px 0}
.kid-badge-row{display:flex;gap:12px;flex-wrap:wrap}
.kid-badge{background:#fff;border-radius:20px;padding:12px 8px;width:92px;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.07);opacity:.4;filter:grayscale(1);transition:all .3s}
.kid-badge.earned{opacity:1;filter:none;animation:kidPop .5s ease}
.kid-badge .e{font-size:32px}.kid-badge .n{font-size:11px;font-weight:700;color:#6b6280;margin-top:4px;line-height:1.1}

.kid-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.kid-nav-btn{background:#fff;border-radius:9999px;padding:11px 22px;font-weight:800;font-size:16px;color:#7c3aed;text-decoration:none;box-shadow:0 5px 0 #ddd6fe}
.kid-nav-btn.next{background:#7c3aed;color:#fff;box-shadow:0 5px 0 #5b21b6}
.kid-nav-btn:active{transform:translateY(4px)}

/* game overlay */
.kid-overlay{position:fixed;inset:0;z-index:50;background:rgba(45,30,70,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:14px;animation:kidFade .2s ease}
.kid-overlay[hidden]{display:none}
@keyframes kidFade{from{opacity:0}to{opacity:1}}
.kid-overlay-card{background:#fff;border-radius:28px;max-width:580px;width:100%;max-height:94vh;overflow-y:auto;padding:24px 22px 26px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:kidUp .25s ease}
@keyframes kidUp{from{transform:translateY(20px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.kid-close{position:absolute;right:14px;top:14px;border:none;background:#f1f5f9;border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer;color:#64748b;font-weight:800;z-index:2}
.kid-close:hover{background:#fee2e2;color:#ef4444}
.kid-game-hud{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:4px}
.kid-hearts{font-size:20px;letter-spacing:2px}
.kid-combo{font-size:14px;font-weight:800;color:#ea580c}
.kid-combo.show{animation:kidPop .4s ease}

/* quiz */
.kid-q-progress{height:12px;background:#f1f5f9;border-radius:9999px;overflow:hidden;margin:4px 0 16px}
.kid-q-bar{height:100%;width:0;background:linear-gradient(90deg,#22c55e,#84cc16);border-radius:9999px;transition:width .3s}
.kid-q-num{font-size:12px;font-weight:800;color:#db2777;text-transform:uppercase;letter-spacing:.08em;text-align:center}
.kid-q-stem{font-size:20px;font-weight:700;color:#3b2f55;margin:8px 0 4px;line-height:1.35;text-align:center}
.kid-q-stem .hi{display:block;font-size:14px;color:#8b80a5;font-weight:600;margin-top:4px}
.kid-q-opts{display:grid;gap:11px;margin-top:14px}
.kid-opt{background:#f8fafc;border:3px solid #e2e8f0;border-radius:18px;padding:13px 16px;font-family:inherit;font-size:16px;font-weight:700;color:#3b2f55;cursor:pointer;transition:all .12s;text-align:left}
.kid-opt:hover{border-color:#c4b5fd;background:#faf5ff}
.kid-opt .hi{display:block;font-size:12px;color:#94a3b8;font-weight:600}
.kid-opt.correct{border-color:#22c55e;background:#dcfce7;animation:kidPop .4s ease}
.kid-opt.wrong{border-color:#ef4444;background:#fee2e2;animation:kidShake .4s ease}
.kid-opt:disabled{cursor:default}
@keyframes kidShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.kid-fb{font-size:18px;font-weight:800;margin-top:14px;min-height:24px;text-align:center}
.kid-fb.good{color:#16a34a}.kid-fb.bad{color:#ea580c}
.kid-next{margin-top:12px;background:#7c3aed;color:#fff;border:none;font-family:inherit;font-weight:800;font-size:16px;border-radius:9999px;padding:10px 24px;cursor:pointer;box-shadow:0 4px 0 #5b21b6}
.kid-next:active{transform:translateY(3px);box-shadow:0 1px 0 #5b21b6}
.kid-result{text-align:center;font-size:20px;font-weight:800;color:#5b21b6;line-height:1.5}
.kid-result .big{font-size:58px;display:block}

/* match */
.kid-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.kid-match-col{display:flex;flex-direction:column;gap:9px}
.kid-match-col h4{margin:0 0 2px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#0ea5e9;text-align:center}
.kid-m{background:#f0f9ff;border:3px solid #bae6fd;border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;color:#0c4a6e;cursor:pointer;transition:all .12s;text-align:left}
.kid-m.right{border-color:#86efac;background:#ecfdf5;color:#166534}
.kid-m.sel{border-color:#f59e0b;background:#fffbeb;transform:scale(1.03)}
.kid-m.matched{opacity:.45;cursor:default;border-style:dashed}
.kid-m.miss{animation:kidShake .4s ease;border-color:#ef4444}

/* build the word */
.kid-build-hint{text-align:center;font-size:15px;color:#6b6280;font-weight:600;margin:6px 0 4px}
.kid-build-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.kid-slot{width:42px;height:50px;border-radius:12px;border:3px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#7c3aed;background:#faf5ff}
.kid-slot.filled{border-style:solid;border-color:#c4b5fd;background:#f5f3ff}
.kid-letters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.kid-letter{width:46px;height:52px;border-radius:14px;border:none;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-family:inherit;font-size:24px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #d97706}
.kid-letter:active{transform:translateY(3px);box-shadow:0 1px 0 #d97706}
.kid-letter.used{opacity:.3;pointer-events:none}

#kidConfetti{position:fixed;inset:0;pointer-events:none;z-index:60}