/* ============================================================
   kids.css — KID WATCH & LEARN 🧸 ธีมสำหรับเด็ก

   หลักการ: "คงองค์ประกอบเดิม เปลี่ยนผิว" — ไฟล์นี้มีแต่ตัวคูณสไตล์
   ใต้ .wl-kids (หน้า lesson) กับ .kd-* (หน้าไลบรารีเด็ก kids.html)
   ไม่แตะกติกา layout ของ watch.css เลย จึงถอดออกได้ทุกเมื่อ

   พาเลตต์ (ตามที่เจ้าของกำหนด):
     ชมพูเข้ม #FF4FA3 · ชมพูอ่อน #FF9ED1 · ม่วง #7A5CFF ·
     มินต์ #39D6C3 · พื้นหลัง #FFF7FB

   แรงบันดาลใจจากเว็บการศึกษาเด็ก (Khan Kids / Lingokids / Duolingo ABC):
   มุมโค้งใหญ่ เส้นขอบหนา เงานุ่มสีพาสเทล ฟอนต์กลม ตัวใหญ่ อนิเมชันเด้ง
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mali:wght@500;600;700&family=M+PLUS+Rounded+1c:wght@500;700;800&family=Baloo+2:wght@600;700&display=swap');

:root {
  --kd-pink:   #FF4FA3;
  --kd-pink2:  #FF9ED1;
  --kd-purple: #7A5CFF;
  --kd-mint:   #39D6C3;
  --kd-bg:     #FFF7FB;
  --kd-ink:    #4A3355;   /* หมึกม่วงเข้มอ่านง่ายบนพื้นชมพูอ่อน */
  --kd-font-th: "Mali", "M PLUS Rounded 1c", sans-serif;
  --kd-font-jp: "M PLUS Rounded 1c", "Mali", sans-serif;
  --kd-font-ro: "Baloo 2", "Mali", sans-serif;
}

/* ================================================================
   ส่วนที่ 1 — โหมดเด็กบนหน้า lesson (body.wl-kids)
   ================================================================ */

body.wl-kids {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,158,209,.35) 0 90px, transparent 91px),
    radial-gradient(circle at 92% 20%, rgba(122,92,255,.18) 0 70px, transparent 71px),
    radial-gradient(circle at 15% 85%, rgba(57,214,195,.22) 0 80px, transparent 81px),
    radial-gradient(circle at 85% 90%, rgba(255,79,163,.14) 0 100px, transparent 101px),
    var(--kd-bg);
  font-family: var(--kd-font-th);
  color: var(--kd-ink);
}

/* หัวเว็บเดิมคงอยู่ แต่แต่งนิดให้เข้าโหมด */
body.wl-kids .appbar { border-bottom: 3px dashed var(--kd-pink2); background: #FFFDFE; }

/* ---- การ์ดทั้งหลาย: ขอบหนา มุมโค้งใหญ่ เงาพาสเทล ---- */
body.wl-kids .wl-card,
body.wl-kids .wl-side {
  border: 3px solid var(--kd-pink2);
  border-radius: 26px;
  box-shadow: 0 8px 0 rgba(255, 158, 209, .35);
  background: #FFFFFF;
}
body.wl-kids .wl-video-box { border-radius: 26px; border: 3px solid var(--kd-purple); box-shadow: 0 8px 0 rgba(122,92,255,.25); overflow: hidden; }

/* ---- การ์ด NOW SPEAKING ---- */
body.wl-kids .wl-now-head {
  background: linear-gradient(90deg, var(--kd-pink) 0%, var(--kd-purple) 100%);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px;
}
body.wl-kids .wl-now-head * { color: #FFF6FB !important; font-family: var(--kd-font-th); }
body.wl-kids .wl-now-head .wl-kicker::before { content: "🎵 "; }

/* token คำศัพท์: ชิปสีพาสเทลสลับสี ใหญ่ กลม เด้งเวลาไฮไลต์ */
body.wl-kids .wl-now-body button.tok {
  font-family: var(--kd-font-jp);
  font-weight: 700;
  border-radius: 14px;
  padding: 2px 6px;
  margin: 2px 1px;
  background: #FFF1F8;
  border: 2px solid transparent;
  transition: transform .12s ease;
}
body.wl-kids .wl-now-body button.tok:nth-child(3n+1) { background: #FFE9F4; }  /* ชมพู */
body.wl-kids .wl-now-body button.tok:nth-child(3n+2) { background: #EFEAFF; }  /* ม่วง */
body.wl-kids .wl-now-body button.tok:nth-child(3n)   { background: #E2FBF7; }  /* มินต์ */
body.wl-kids .wl-now-body button.tok:hover { transform: scale(1.08) rotate(-1.5deg); border-color: var(--kd-pink2); }
body.wl-kids .wl-now-body button.tok.is-speaking {
  background: var(--kd-pink) !important;
  color: #fff;
  border-color: var(--kd-pink);
  animation: kd-bounce .45s ease;
  box-shadow: 0 4px 0 rgba(255,79,163,.35);
}
@keyframes kd-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.22) rotate(2deg); }
  70% { transform: scale(.96); }
  100% { transform: scale(1.06); }
}

/* ---- โรมาจิใต้คำ (เปิด/ปิดด้วย body.kd-romaji) ---- */
body.wl-kids .tk-ro { display: none; }
body.wl-kids.kd-romaji .wl-now-body button.tok { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
body.wl-kids.kd-romaji .wl-now-body .tk-ro {
  display: block;
  font-family: var(--kd-font-ro);
  font-size: .58em;
  font-weight: 700;
  color: var(--kd-purple);
  letter-spacing: .02em;
}
body.wl-kids.kd-romaji .wl-now-body button.tok.is-speaking .tk-ro { color: #FFE1F0; }

/* โรมาจิรายประโยคในแผงสคริปต์ */
body.wl-kids .wl-row__ro { display: none; }
body.wl-kids.kd-romaji .wl-row__ro {
  display: block;
  font-family: var(--kd-font-ro);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kd-purple);
  margin-top: 1px;
}

/* ---- คำแปลไทย: กล่องสีหวาน ---- */
body.wl-kids .wl-tr {
  font-family: var(--kd-font-th);
  font-weight: 600;
  color: var(--kd-ink);
  background: linear-gradient(90deg, #FFE9F4, #E2FBF7);
  border-radius: 14px;
  padding: 7px 12px;
}
body.wl-kids .wl-tag { background: var(--kd-mint); color: #fff; border-radius: 999px; }

/* ---- ป็อปอัพคำศัพท์: บับเบิลน่ารักเด้งขึ้นมา ---- */
body.wl-kids .wl-vocab {
  border: 3px solid var(--kd-purple);
  border-radius: 22px;
  background: #FFFDFE;
  box-shadow: 0 10px 0 rgba(122,92,255,.22), 0 14px 34px rgba(122,92,255,.25);
  animation: kd-pop .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
body.wl-kids .wl-vocab::before {
  content: "⭐";
  position: absolute; top: -14px; left: 16px;
  font-size: 20px;
  animation: kd-wiggle 1.6s ease-in-out infinite;
}
@keyframes kd-pop {
  0% { transform: translateY(14px) scale(.85); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes kd-wiggle {
  0%,100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg) translateY(-2px); }
}
body.wl-kids .wl-vocab__w b { font-family: var(--kd-font-jp); font-size: 1.35em; color: var(--kd-pink); }
body.wl-kids .wl-vocab__w small { font-family: var(--kd-font-ro); color: var(--kd-purple); font-weight: 700; }
body.wl-kids .wl-vocab__g { font-family: var(--kd-font-th); font-weight: 600; color: var(--kd-ink); }
body.wl-kids .wl-vocab__sep { background: linear-gradient(90deg, var(--kd-pink2), var(--kd-mint)); height: 3px; border-radius: 3px; }

/* ---- แผงสคริปต์ ---- */
body.wl-kids .wl-row { border-radius: 16px; font-family: var(--kd-font-th); }
body.wl-kids .wl-row__jp { font-family: var(--kd-font-jp); font-weight: 700; }
body.wl-kids .wl-row.is-active {
  background: linear-gradient(90deg, #FFE9F4, #F2EDFF);
  border-left: 5px solid var(--kd-pink);
}
body.wl-kids .wl-row__t { color: var(--kd-mint); font-family: var(--kd-font-ro); font-weight: 700; }

/* ---- ปุ่มควบคุม ---- */
body.wl-kids .wl-btn, body.wl-kids .wl-icon {
  border-radius: 999px;
  border: 2.5px solid var(--kd-pink2);
  color: var(--kd-pink);
  background: #fff;
}
body.wl-kids .wl-btn:hover { background: #FFE9F4; transform: scale(1.1); }
body.wl-kids .wl-play {
  background: linear-gradient(135deg, var(--kd-pink), var(--kd-purple));
  border: none;
  box-shadow: 0 5px 0 rgba(122,92,255,.35);
  border-radius: 999px;
}
body.wl-kids .wl-play:hover { transform: scale(1.08); }
body.wl-kids .wl-seek__fill { background: linear-gradient(90deg, var(--kd-mint), var(--kd-pink)); }

/* ปุ่มสลับโรมาจิ (แสดงเฉพาะโหมดเด็ก — ใส่ผ่าน JS) */
.kd-ro-btn { display: none; }
body.wl-kids .kd-ro-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kd-font-ro);
  font-weight: 700; font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--kd-purple);
  background: #fff; color: var(--kd-purple);
  cursor: pointer;
  transition: transform .12s ease;
}
body.wl-kids .kd-ro-btn:hover { transform: scale(1.06); }
body.wl-kids.kd-romaji .kd-ro-btn { background: var(--kd-purple); color: #fff; box-shadow: 0 4px 0 rgba(122,92,255,.3); }

/* VOCAB LIST + UP NEXT ในโหมดเด็ก */
body.wl-kids .wl-voc-item, body.wl-kids .wl-next { border-radius: 16px; font-family: var(--kd-font-th); }

/* ลดอนิเมชันตามระบบ */
@media (prefers-reduced-motion: reduce) {
  body.wl-kids * { animation: none !important; transition: none !important; }
}

/* ================================================================
   ส่วนที่ 2 — หน้าไลบรารีเด็ก (kids.html ใช้ .kd-*)
   ================================================================ */

.kd-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,158,209,.4) 0 110px, transparent 111px),
    radial-gradient(circle at 88% 12%, rgba(57,214,195,.3) 0 90px, transparent 91px),
    radial-gradient(circle at 20% 88%, rgba(122,92,255,.2) 0 100px, transparent 101px),
    radial-gradient(circle at 90% 85%, rgba(255,79,163,.18) 0 120px, transparent 121px),
    var(--kd-bg);
  font-family: var(--kd-font-th);
  color: var(--kd-ink);
}
.kd-hero { text-align: center; padding: 34px 16px 10px; }
.kd-hero h1 {
  font-family: var(--kd-font-th);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  margin: 8px 0 4px;
  background: linear-gradient(90deg, var(--kd-pink), var(--kd-purple), var(--kd-mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kd-hero .kd-sub { font-size: 16px; font-weight: 600; color: #8A6FA5; }
.kd-hero .kd-mascot { font-size: 46px; display: inline-block; animation: kd-float 2.8s ease-in-out infinite; }
@keyframes kd-float {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.kd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 22px auto 60px;
  padding: 0 18px;
}
.kd-card {
  display: block;
  text-decoration: none;
  color: var(--kd-ink);
  background: #fff;
  border: 3px solid var(--kd-pink2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(255,158,209,.35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.kd-card:nth-child(3n+2) { border-color: #C9BBFF; box-shadow: 0 8px 0 rgba(122,92,255,.22); }
.kd-card:nth-child(3n)   { border-color: #A9EFE4; box-shadow: 0 8px 0 rgba(57,214,195,.28); }
.kd-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 0 rgba(255,79,163,.25); }
.kd-thumb { position: relative; aspect-ratio: 16/9; background: #FFE9F4; }
.kd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-thumb .kd-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  font-size: 26px;
  box-shadow: 0 4px 0 rgba(255,79,163,.3);
  transition: transform .16s ease;
}
.kd-card:hover .kd-play { transform: scale(1.15); }
.kd-thumb .kd-dur {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--kd-purple); color: #fff;
  font-family: var(--kd-font-ro); font-weight: 700; font-size: 12.5px;
  padding: 3px 10px; border-radius: 999px;
}
.kd-body { padding: 14px 16px 16px; }
.kd-title { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 0 0 6px; }
.kd-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-chip {
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.kd-chip--song { background: #FFE9F4; color: var(--kd-pink); }
.kd-chip--quiz { background: #E2FBF7; color: #17967F; }
.kd-chip--mint { background: #E2FBF7; color: #17967F; }
.kd-chip--pp   { background: #EFEAFF; color: var(--kd-purple); }

.kd-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 16px 0 0 18px;
  font-weight: 700; font-size: 14px;
  color: var(--kd-purple); text-decoration: none;
  background: #fff; border: 2.5px solid var(--kd-purple);
  border-radius: 999px; padding: 6px 16px;
}
.kd-back:hover { background: #EFEAFF; }

.kd-empty { text-align: center; padding: 50px 20px; font-size: 17px; font-weight: 600; color: #8A6FA5; }

/* ---- เนื้อป็อปอัพคำศัพท์โหมดเด็ก ---- */
body.wl-kids .kd-voc { padding: 4px 2px; }
body.wl-kids .kd-voc__word { display: flex; align-items: center; gap: 10px; }
body.wl-kids .kd-voc__word b {
  font-family: var(--kd-font-jp);
  font-size: 30px; line-height: 1.2;
  color: var(--kd-pink);
}
body.wl-kids .kd-voc__speak {
  font-size: 22px; line-height: 1;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2.5px solid var(--kd-mint);
  background: #E2FBF7;
  cursor: pointer;
  transition: transform .12s ease;
}
body.wl-kids .kd-voc__speak:hover { transform: scale(1.15); }
body.wl-kids .kd-voc__speak:active { transform: scale(.92); }
body.wl-kids .kd-voc__ro {
  font-family: var(--kd-font-ro);
  font-weight: 700; font-size: 17px;
  color: var(--kd-purple);
  margin-top: 2px;
}
body.wl-kids .kd-voc__kana { font-family: var(--kd-font-jp); font-size: 13px; color: #A08BB8; }
body.wl-kids .kd-voc__th {
  margin-top: 8px;
  font-family: var(--kd-font-th);
  font-weight: 700; font-size: 16px;
  color: var(--kd-ink);
  background: linear-gradient(90deg, #FFE9F4, #E2FBF7);
  border-radius: 12px;
  padding: 8px 12px;
}
body.wl-kids .kd-voc__th .note { font-weight: 600; color: #8A6FA5; }