@font-face{font-family:KidsArabic;src:url('./fonts/baloo-bhaijaan-2-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
/* Scoped to children: the adult interface and the voice engine stay independent. */
body.kids{font-family:KidsArabic,Tahoma,Arial,sans-serif;font-weight:700;background:#edf9ff;--brand:#3056ce;--ink:#243967;--muted:#50658a;--line:#ccdafa}
.kids .global-counter{background:#fff;border:3px solid #cbdafa;border-radius:28px;box-shadow:0 5px 0 #d7e9f6;margin-bottom:24px;padding:13px 16px;justify-content:center}.kids .global-counter strong{font-size:1.1rem;color:#3056ce}.kids .global-counter span:not(.global-flower){font-size:1.9rem;color:#3056ce}.kids .global-flower{font-size:2.2rem}
.kids button,.kids select,.kids .phrase{font-family:inherit}
.kids header{padding-block:16px 8px;flex-wrap:wrap}
.kids .logo{font-size:2.6rem}.kids .logo small{font-size:1rem}
.kids .modes{border-radius:32px;background:#fff;border-color:#cfddf5}
.kids .modes button{border-radius:28px;min-height:48px;font-size:1rem}
.kids main{padding-top:6px;padding-bottom:130px}
.kids #heading{font-size:2.2rem;line-height:1.4;margin:12px 0 4px}
.kids .intro{font-size:1.15rem;line-height:1.6;margin-bottom:20px}
.kids .layout{gap:26px}
.kids .practice{border:3px solid #bdd2f4;border-radius:46px 46px 40px 40px;padding:22px 24px 26px;box-shadow:0 9px 0 #c4e4f2;background:#fff;isolation:isolate}
.kids .practice:before,.kids .practice:after{content:none}
.garden-corners,.garden-celebration,.garden-heading{display:none;pointer-events:none;user-select:none}
.kids .garden-heading{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:2px;font-family:Arial,sans-serif;font-size:1.45rem;height:36px}
.kids .garden-heading span:nth-child(2){font-size:1.9rem}
.kids .garden-corners{display:block;position:absolute;inset:0;z-index:-1;font-family:Arial,sans-serif;font-size:1.9rem}
.garden-corners span{position:absolute;opacity:.85;line-height:1}
.garden-corners span:nth-child(1){top:20px;right:14px;transform:rotate(12deg)}
.garden-corners span:nth-child(2){top:26px;left:14px;transform:rotate(-15deg)}
.garden-corners span:nth-child(3){top:135px;right:12px;font-size:1.4rem}
.garden-corners span:nth-child(4){top:150px;left:12px;font-size:1.4rem}
.kids .eyebrow{font-size:1rem;color:#53668b}
.kids .phrase{font-size:2.1rem;line-height:1.7;margin:8px 20px 4px;min-height:0;overflow-wrap:break-word}
.kids .count{font-size:6.5rem;line-height:1.1;margin:4px 0 10px;color:#3056ce;text-shadow:0 5px 0 #d9e4ff}
.kids #goalText{font-size:1.05rem}.kids .progress{height:18px;border-radius:100px;overflow:hidden;margin-top:14px;background:#e9f0fa;border:0}
.kids .progress::-webkit-progress-bar{border-radius:100px}.kids .progress::-webkit-progress-value{border-radius:100px;background:#55b85a}
.kids .progress::-moz-progress-bar{border-radius:100px;background:#55b85a}
.kids .strip{background:#f1fae9;border-radius:28px;padding:12px 8px;gap:clamp(6px,3vw,18px);flex-wrap:nowrap;min-height:64px}
.kids .star{font-family:Arial,sans-serif;font-size:clamp(1.5rem,7vw,2.2rem);text-shadow:none;display:inline-block;line-height:1.2}
.kids .status{font-size:1.05rem;line-height:1.7;margin:12px 0}
.kids .primary{border-radius:30px;min-height:66px;font-size:1.4rem;background:#3056ce;border:2px solid #3056ce;box-shadow:0 6px 0 #203e9b}
.kids .controls{gap:10px;flex-wrap:wrap;margin-top:18px}
.kids .controls button{border-radius:26px;min-height:54px;flex:1 1 130px;font-size:1.05rem;background:#f7faff;border:2px solid #d6e2f5}
.kids .stage{border-radius:28px;padding:14px 18px;background:#e9faef;font-size:1.1rem;color:#23733f}
.kids .goal{border-radius:28px;flex-wrap:wrap;gap:10px;background:#fff6d9}
.kids .goal select{border-radius:24px;min-height:48px;padding:8px 16px}
.kids .selection{border:3px solid #d5e1f5;border-radius:40px;padding:20px 16px 18px;box-shadow:0 8px 0 #cbe6ef}
.kids .selection h2{font-size:1.5rem;line-height:1.6;margin-bottom:14px}
.kids .choices{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.kids .choice,.kids .choice[aria-pressed=true]{border:3px solid #dce5f4;border-radius:28px;padding:12px 10px;min-height:84px;gap:10px;line-height:1.6;font-size:1.2rem;box-shadow:0 4px 0 #dfe7f1}
.kids .choice:nth-child(1){background:#e9fbf0}.kids .choice:nth-child(2){background:#fff5ce}.kids .choice:nth-child(3){background:#ffede7}.kids .choice:nth-child(4){background:#eef0ff}.kids .choice:nth-child(5){background:#ecf8df;grid-column:1/-1}
.kids .choice[aria-pressed=true]{border-color:#3056ce;box-shadow:0 5px 0 #abbde9}
.kids .choice:active{transform:translateY(2px)}
.kids .symbol{border-radius:22px;min-width:42px;width:48px;height:48px;font-size:1.6rem;box-shadow:none;background:#fff}
.kids .note{font-size:1rem;line-height:1.8}.kids .selection .note{font-size:.95rem;margin-top:18px}
.kids .virtue,.kids .previewtools{border-radius:28px}.kids .virtue p{font-size:1rem}
.kids .nav{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));max-width:740px;margin-inline:auto;border:2px solid #ccdafa;border-radius:32px;padding:8px;gap:4px;box-shadow:0 5px 18px #24396718}
.kids .nav button{border-radius:26px;min-height:54px;font-size:1.1rem}
.kids .stat{border-radius:34px;background:#fff;padding:22px}.kids .badge{border-radius:22px}
.kids .history{border:2px solid #dae5f4;border-radius:28px;background:#fff;padding:18px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.kids .settings-row{border:2px solid #dbe6f6;background:#fff;border-radius:28px;padding:18px;margin:14px 0;font-size:1.1rem}
.kids #testSound{border-radius:26px;min-height:54px;background:#fff5ce}
.kids .welcome-options button{border-radius:38px}
.kids .garden-celebration{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:2}
.kids .garden-celebration.show{display:block}
.garden-celebration span{position:absolute;left:var(--x);top:var(--y);font:2rem/1 Arial,sans-serif;animation:garden-petals 1.5s ease-out both;animation-delay:var(--delay)}
.kids .garden-bloom{animation:garden-bloom .6s ease-out both}
.kids .garden-count-pop{animation:garden-count-pop .28s ease-out}
@keyframes garden-bloom{0%{transform:scale(.6) rotate(-12deg)}65%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes garden-count-pop{50%{transform:scale(1.035)}}
@keyframes garden-petals{0%{opacity:0;transform:translateY(12px) scale(.6) rotate(-12deg)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(1.05) rotate(15deg)}}
.reduced .garden-celebration.show{display:none}
@media(prefers-reduced-motion:reduce){.garden-celebration.show{display:none!important}.kids *{animation:none!important;transition:none!important}}
@media(max-width:400px){.kids .practice{padding:20px 16px 22px;border-radius:38px}.kids .phrase{font-size:1.8rem;margin-inline:16px}.kids .choice,.kids .choice[aria-pressed=true]{font-size:1.05rem;padding:10px 8px;gap:6px;border-radius:25px}.kids .symbol{min-width:34px;width:34px;height:40px;font-size:1.35rem}.kids .selection{padding-inline:12px}.kids .nav button{font-size:1rem;padding-inline:4px}}
@media(max-width:340px){.kids .choices{grid-template-columns:minmax(0,1fr)}.kids .choice:last-child{grid-column:auto}.kids .phrase{font-size:1.65rem}}