/* Хүүхдийн хэсгийн дизайн систем (6–8 нас).
   Өнгө: Монголын уламжлалт өнгө — нарны шар, хөх тэнгэр, талын ногоон, улбар шар — тод боловч неон биш.
   Хичээл бүр өөрийн тогтмол өнгөтэй: хүүхэд өнгөөр нь таньдаг, урьдчилан таамаглах нь тайвшруулдаг.
   Текст бүгд гүн хөх-ягаан (--k-ink) өнгөтэй, тод дэвсгэр дээр 6:1-ээс дээш тодролтой. */
:root {
  --k-ink: #26215c;
  --k-ink-2: #4a4380;
  --k-math: #ffd25a;     /* нарны шар — Математик */
  --k-mongol: #7cc8ff;   /* хөх тэнгэр — Монгол хэл */
  --k-orchin: #8edc6a;   /* талын ногоон — Хүн ба орчин */
  --k-twister: #ffa8cf;  /* ягаан — Түргэн хэллэг */
  --k-riddle: #c3aaff;   /* нил ягаан — Оньсого */
  --k-camera: #ffab6b;   /* улбар шар — Бодит сорилт */
  --k-voice: #6fdccd;    /* оюу — Уншлага */
  --k-end: #ffe9a8;
  --k-good: #17924d;
  --k-soft: #ebe8f5;
  --k-white: #ffffff;
  --k-shadow: rgba(38, 33, 92, .22);
}
.kid { background: var(--k-math); color: var(--k-ink); font-family: "Nunito", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.kid h1, .kid h2, .kid h3 { color: var(--k-ink); }

/* Сэдвийн өнгө */
.s-math { background: var(--k-math); }
.s-mongol { background: var(--k-mongol); }
.s-orchin { background: var(--k-orchin); }
.s-twister { background: var(--k-twister); }
.s-riddle { background: var(--k-riddle); }
.s-camera { background: var(--k-camera); }
.s-voice { background: var(--k-voice); }
.s-end { background: var(--k-end); }
/* Зөөлөн хээ — монгол хээний санаа, анхаарал сарниулахгүйн тулд маш бүдэг */
.pattern { background-image: radial-gradient(rgba(255,255,255,.35) 2px, transparent 2.5px); background-size: 26px 26px; }

/* Том, "дарагддаг" товч — тоглоомын товч шиг мэдрэмж өгнө */
.kbtn {
  font: inherit; font-weight: 900; font-size: 1.35rem; color: var(--k-ink);
  background: var(--k-white); border: 3px solid var(--k-ink); border-radius: 22px;
  min-height: 72px; min-width: 72px; padding: 10px 18px; cursor: pointer;
  box-shadow: 0 6px 0 var(--k-ink); transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.kbtn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--k-ink); }
.kbtn:focus-visible { outline: 4px solid var(--k-white); outline-offset: 3px; }
.kbtn.primary { background: var(--k-ink); color: var(--k-white); box-shadow: 0 6px 0 #110d33; }
.kbtn.right { background: var(--k-good); color: #fff; border-color: #0f6b38; box-shadow: 0 6px 0 #0f6b38; animation: bounce .45s ease; }
/* Буруу хариу: улаан биш — зөөлөн саарал, бага зэрэг сэгсэрнэ. Хүүхэд айж, ичихгүй. */
.kbtn.wrong { background: var(--k-soft); color: var(--k-ink-2); border-color: var(--k-ink-2); box-shadow: 0 3px 0 var(--k-ink-2); animation: shake .4s ease; }
.kbtn:disabled { cursor: default; }
@keyframes bounce { 0%,100% { transform: scale(1); } 40% { transform: scale(1.15); } 70% { transform: scale(.95); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Багш-дүр: Ботго (ботгон тэмээ). Хүүхэд дүртэй харилцахдаа илүү идэвхтэй суралцдаг. */
.mascot { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 14px; }
.mascot .face { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--k-white); border: 3px solid var(--k-ink); display: grid; place-items: center; font-size: 34px; box-shadow: 0 4px 0 var(--k-shadow); }
.mascot .bubble { position: relative; background: var(--k-white); border: 3px solid var(--k-ink); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: var(--k-ink); box-shadow: 0 4px 0 var(--k-shadow); }
.mascot.happy .face { animation: bounce .5s ease; }

/* Оноо, ахиц */
.kpill { display: inline-flex; align-items: center; gap: 6px; background: var(--k-white); color: var(--k-ink); border: 3px solid var(--k-ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; box-shadow: 0 3px 0 var(--k-ink); }
.segs { display: flex; gap: 4px; }
.segs i { flex: 1; height: 8px; border-radius: 8px; background: rgba(38,33,92,.18); }
.segs i.on { background: var(--k-ink); }

.stars-burst { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.stars-burst span { position: absolute; left: 50%; top: 55%; font-size: 34px; animation: fly 1s ease-out forwards; }
@keyframes fly { from { transform: translate(-50%, 0) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kbtn.right, .kbtn.wrong, .mascot.happy .face, .stars-burst span { animation: none; }
}