/* ร้องเล่นเพลงพื้นบ้าน · หน้าเลือกเพลง 3 การ์ด + หน้าร้อง (น้องปั้นเต้น · ปุ่มจังหวะใหญ่ · เนื้อร้องบรรทัดเดียว · ภาพเติมคำ 2 ภาพ)
   ขนาดอิงความกว้าง/สูงจอ · เป้าแตะไม่ต่ำกว่า 88px ทุกขนาดจอ */
:root {
  --card-w: clamp(96px, min(40vw, 21dvh), 230px);
  --beat: clamp(120px, min(52vw, 27dvh), 300px);
  --pun: clamp(72px, min(24vw, 13dvh), 170px);
  --fill: clamp(96px, min(34vw, 19dvh), 210px);
}

#play-screen { position: relative; gap: var(--s3); width: 100%; }
.view { display: none; }
#play-screen[data-view="pick"] .view-pick,
#play-screen[data-view="song"] .view-song { display: flex; }

/* ---- เลือกเพลง ---- */
.view-pick {
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  width: 100%;
}
.pick-title { margin: 0; font-size: clamp(18px, 3.6vmin, 30px); }
.song-cards {
  display: grid;
  grid-template-columns: repeat(2, var(--card-w));
  justify-content: center;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.song-cards li:last-child { grid-column: 1 / -1; justify-self: center; }
.song-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  width: var(--card-w);
  padding: var(--s1);
  border: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 0 rgba(31, 61, 52, .1);
}
.song-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); pointer-events: none; }
.song-card span { font-size: clamp(15px, 3.2vmin, 24px); font-weight: 600; line-height: 1.25; pointer-events: none; }
.song-card:active { transform: scale(.96); }
.song-card[data-song="jumjee"] { border-color: #b9dd9a; }
.song-card[data-song="yokyek"] { border-color: #a9d3f5; }
.song-card[data-song="reeree"] { border-color: #f2d27a; }

/* ---- หน้าร้อง ---- */
.view-song {
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: 100%;
}
.song-name { margin: 0; font-size: clamp(16px, 3.2vmin, 26px); color: var(--ink-soft); }
.song-stage {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "pun beat";
  align-items: end;
  justify-content: center;
  gap: var(--s3);
}
.pun { grid-area: pun; position: relative; }
.pun img {
  display: block;
  width: var(--pun);
  height: auto;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.pun.hop img { animation: pun-hop .42s cubic-bezier(.3, 1.5, .5, 1); }
.pun.sway img { animation: pun-sway 1.2s ease-in-out infinite; }
.pun.cheer img { animation: pun-cheer .5s ease-in-out 3; }
@keyframes pun-hop {
  0% { transform: translate(0, 0) scale(1, 1); }
  30% { transform: translate(0, -18%) rotate(-7deg) scale(.96, 1.06); }
  70% { transform: translate(0, 0) scale(1.06, .94); }
  100% { transform: translate(0, 0) scale(1, 1); }
}
@keyframes pun-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes pun-cheer {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-18%) rotate(-6deg); }
  75% { transform: translateY(-18%) rotate(6deg); }
}

.beat-btn {
  grid-area: beat;
  position: relative;
  display: block;
  width: var(--beat);
  height: var(--beat);
  padding: var(--s1);
  border: 5px solid #ffd166;
  border-radius: 50%;
  background: var(--card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 0 rgba(31, 61, 52, .1);
}
.beat-btn img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.beat-btn.pulse { animation: beat-pulse .32s ease-out; }
.beat-btn.hit { animation: beat-hit .28s ease-out; }
@keyframes beat-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(255, 209, 102, .45); } 100% { transform: scale(1); } }
@keyframes beat-hit { 0% { transform: scale(1); } 35% { transform: scale(.92) rotate(-3deg); } 100% { transform: scale(1); } }
.beat-spark { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.spark {
  position: absolute;
  left: 50%;
  top: 45%;
  font-style: normal;
  font-size: clamp(20px, 5vmin, 34px);
  line-height: 1;
  color: #ffc53d;
  opacity: 0;
  --dx: 0%;
  --dy: -160%;
  animation: spark-fly .8s ease-out both;
}
.spark::before { content: '\266A'; }
.spark.big::before { content: '\2726'; }
.spark.big { font-size: clamp(28px, 7vmin, 48px); color: #ff8fab; }
.spark[data-k="0"] { --dx: -240%; --dy: -220%; }
.spark[data-k="1"] { --dx: 240%; --dy: -220%; }
.spark[data-k="2"] { --dx: 0%; --dy: -300%; }
.spark[data-k="3"] { --dx: -320%; --dy: 40%; }
.spark[data-k="4"] { --dx: 320%; --dy: 40%; }
@keyframes spark-fly {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(30deg); opacity: 0; }
}

/* เนื้อร้องบรรทัดเดียว (ผู้ใหญ่อ่านตาม) */
.lyric {
  margin: 0;
  min-height: 1.5em;
  max-width: 24ch;
  font-size: clamp(20px, 4.4vmin, 38px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.lyric .blank {
  display: inline-block;
  min-width: 3.2em;
  border-bottom: 4px dashed #ffb703;
  color: transparent;
}

/* เติมคำ: ภาพ 2 ภาพ */
.fill {
  display: flex;
  justify-content: center;
  gap: var(--s4);
}
.fill[hidden] { display: none; }
.fill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--fill);
  padding: var(--s1);
  border: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 0 rgba(31, 61, 52, .1);
}
.fill-btn img { display: block; width: 100%; height: auto; pointer-events: none; }
.fill-btn span { font-size: clamp(15px, 3vmin, 24px); font-weight: 600; pointer-events: none; }
.fill-btn.correct { border-color: #79c36a; animation: pop .45s ease; }
.fill-btn.try { animation: wobble .4s ease; }
.fill-btn.hinted { border-color: var(--ok); box-shadow: 0 0 0 6px rgba(124, 198, 254, .45); }

#play-screen .replay-btn { position: absolute; right: var(--s3); bottom: var(--s3); }
#play-screen[data-view="pick"] .replay-btn { display: none; }

/* หน้าเริ่ม */
.song-hello { flex-direction: row; align-items: center; gap: var(--s3); }
.song-hello .hello-pun { width: calc(var(--prompt) * .9); height: auto; }
.song-hello .target-card img { width: calc(var(--prompt) * .9); height: auto; border-radius: var(--radius-sm); }

/* หน้าจบรอบ */
.done-song img { width: clamp(96px, 22vmin, 200px); height: auto; border-radius: var(--radius); border: 3px solid var(--line); }

/* มุมผู้ปกครอง: ร้องทั้งเพลงพร้อมเนื้อร้อง */
.singalong-tools { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); text-align: left; }
.singalong-tools p { margin: 0; font-weight: 600; }
.singalong-tools button { min-height: 48px; font: inherit; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }

/* โหมดร้องทั้งเพลง: เนื้อร้องทุกบรรทัด บรรทัดที่กำลังเล่นเด่น */
.sing-sheet {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(16px, 3.2vmin, 28px);
  line-height: 1.35;
}
#play-screen[data-mode="sing"] .sing-sheet { display: flex; }
#play-screen[data-mode="sing"] .lyric, #play-screen[data-mode="sing"] .fill { display: none; }
.sing-sheet li { color: var(--ink-soft); }
.sing-sheet li.now { color: var(--ink); font-weight: 700; background: #fff3c4; border-radius: var(--radius-sm); padding: 0 var(--s2); }

@media (prefers-reduced-motion: reduce) {
  .pun.hop img, .pun.sway img, .pun.cheer img, .beat-btn.pulse, .beat-btn.hit, .fill-btn.correct, .fill-btn.try { animation: none; }
  .spark { animation: none; opacity: 0; }
}

/* แนวนอน: การ์ด 3 ใบแถวเดียว · หน้าร้อง น้องปั้น+ปุ่มจังหวะซ้าย เนื้อร้อง/ภาพเติมคำขวา */
@media (orientation: landscape) {
  :root {
    --card-w: clamp(96px, min(24vw, 44dvh), 240px);
    --beat: clamp(110px, min(26vw, 46dvh), 300px);
    --pun: clamp(72px, min(14vw, 30dvh), 170px);
    --fill: clamp(96px, min(16vw, 32dvh), 200px);
  }
  .song-cards { grid-template-columns: repeat(3, var(--card-w)); }
  .song-cards li:last-child { grid-column: auto; }
  .view-song {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--s4);
  }
  .song-name { flex: 0 0 100%; }
  .song-side { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --card-w: clamp(96px, min(22vw, 46dvh), 200px); --beat: clamp(100px, min(22vw, 48dvh), 220px); --pun: clamp(64px, min(12vw, 30dvh), 130px); --fill: clamp(92px, min(14vw, 30dvh), 150px); }
  .pick-title, .song-name { display: none; }
  #play-screen .replay-btn { right: 0; bottom: 0; }
}
.song-side { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }

/* ภาพคำในบรรทัด (เรือ ต้นไม้ เมฆ หมา ข้าว จาน) · ได้สติกเกอร์คำนี้ตอนจบเพลง */
.lyric-row { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: clamp(56px, 11vmin, 96px); }
.line-pic { width: clamp(56px, 11vmin, 96px); height: auto; border-radius: var(--radius-sm); background: var(--card); border: 2px solid var(--line); }
.line-pic[hidden] { display: none; }
#play-screen[data-mode="sing"] .lyric-row { display: none; }

/* แท็บเล็ตแนวตั้ง: จอกว้าง ขยายการ์ด ปุ่มจังหวะ และภาพเติมคำให้เต็มจอขึ้น */
@media (orientation: portrait) and (min-width: 700px) {
  :root {
    --card-w: clamp(160px, min(36vw, 24dvh), 300px);
    --beat: clamp(200px, min(44vw, 30dvh), 380px);
    --pun: clamp(120px, min(22vw, 15dvh), 220px);
    --fill: clamp(160px, min(28vw, 20dvh), 260px);
  }
}