/* เคาะจังหวะน้องปั้น · น้องปั้นบนสุด (แนวตั้ง) หรือกลาง (แนวนอน) + เครื่องดนตรีใหญ่ 4 ชิ้น
   ขนาดอิงความกว้าง/สูงจอ · เป้าแตะไม่ต่ำกว่า 88px ทุกขนาดจอ */
:root {
  --inst: clamp(120px, min(43vw, 23dvh), 250px);
  --pun: clamp(84px, min(30vw, 16dvh), 190px);
}

.band {
  display: grid;
  grid-template-columns: repeat(2, var(--inst));
  grid-template-areas: "pun pun" "drum ching" "ranat krap";
  justify-content: center;
  align-items: center;
  gap: var(--s3);
  width: 100%;
}
.inst-drum { grid-area: drum; }
.inst-ching { grid-area: ching; }
.inst-ranat { grid-area: ranat; }
.inst-krap { grid-area: krap; }

/* ---- น้องปั้น ---- */
.pun {
  grid-area: pun;
  position: relative;
  justify-self: center;
  --lx: 0%;
  --rot: 0deg;
}
.pun[data-lean="drum"], .pun[data-lean="ranat"] { --lx: -14%; --rot: -8deg; }
.pun[data-lean="ching"], .pun[data-lean="krap"] { --lx: 14%; --rot: 8deg; }
.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.cheer img { animation: pun-cheer .5s ease-in-out 3; }
@keyframes pun-hop {
  0% { transform: translate(0, 0) scale(1, 1); }
  30% { transform: translate(var(--lx), -16%) rotate(var(--rot)) scale(.96, 1.06); }
  70% { transform: translate(calc(var(--lx) / 2), 0) scale(1.06, .94); }
  100% { transform: translate(0, 0) scale(1, 1); }
}
@keyframes pun-cheer {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-18%) rotate(-6deg); }
  75% { transform: translateY(-18%) rotate(6deg); }
}
.pun-bubble {
  position: absolute;
  top: 0;
  right: -32%;
  padding: 0 var(--s2);
  font-size: clamp(22px, 5vmin, 36px);
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 3px solid #ffd166;
  border-radius: 999px;
  animation: bubble-bob 1s ease-in-out infinite;
}
.pun-bubble[hidden] { display: none; }
@keyframes bubble-bob { 50% { transform: translateY(-12%); } }

/* ---- เครื่องดนตรี (ปุ่มใหญ่) ---- */
.inst {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--inst);
  height: var(--inst);
  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);
}
.inst-drum { background: #fff1e6; border-color: #ffc7a1; }
.inst-ching { background: #fff8dc; border-color: #f2d27a; }
.inst-ranat { background: #eef7ff; border-color: #a9d3f5; }
.inst-krap { background: #f6efe6; border-color: #d8b98f; }
.inst img {
  display: block;
  width: 74%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.inst-name {
  font-size: clamp(16px, 3.6vmin, 28px);
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.inst.hit { animation: inst-hit .28s ease-out; }
@keyframes inst-hit {
  0% { transform: scale(1); }
  35% { transform: scale(.92) rotate(-2deg); }
  100% { transform: scale(1); }
}
/* น้องปั้นกำลังเล่นให้ฟัง: เครื่องที่ดังเรืองแสงเหลือง */
.inst.demo { outline: 6px solid #ffd166; outline-offset: 3px; }

/* กรับ: วาดด้วย CSS · ไม้สองแท่งเอียงเข้าหากัน */
.krap-art {
  position: relative;
  display: block;
  width: 74%;
  aspect-ratio: 1 / .78;
  pointer-events: none;
}
.krap-art i {
  position: absolute;
  top: 8%;
  width: 26%;
  height: 84%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8773b, #d9a066 45%, #a8672e);
  box-shadow: inset 0 0 0 3px rgba(90, 50, 20, .25), 0 4px 0 rgba(31, 61, 52, .12);
}
.krap-art i:first-child { left: 22%; transform: rotate(-14deg); }
.krap-art i:last-child { right: 22%; transform: rotate(14deg); }
.inst-krap.hit .krap-art i:first-child { animation: krap-l .22s ease-out; }
.inst-krap.hit .krap-art i:last-child { animation: krap-r .22s ease-out; }
@keyframes krap-l { 40% { transform: translateX(22%) rotate(-4deg); } }
@keyframes krap-r { 40% { transform: translateX(-22%) rotate(4deg); } }

/* ละอองดาว · ออกจากกลางเครื่องดนตรี 5 ทิศ */
.inst-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: '\2726'; }
.spark.big { font-size: clamp(28px, 7vmin, 48px); color: #ff8fab; animation-duration: .9s; }
.spark[data-k="0"] { --dx: -220%; --dy: -200%; }
.spark[data-k="1"] { --dx: 220%; --dy: -200%; }
.spark[data-k="2"] { --dx: 0%; --dy: -280%; }
.spark[data-k="3"] { --dx: -300%; --dy: 40%; }
.spark[data-k="4"] { --dx: 300%; --dy: 40%; }
.spark.big:nth-child(n+6) { color: #7cc6fe; animation-delay: .12s; }
@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(40deg); opacity: 0; }
}

/* ปุ่มฟังอีกครั้ง: ข้างน้องปั้น ไม่กินแถวของตัวเอง */
#play-screen .replay-btn { position: absolute; right: var(--s3); bottom: var(--s3); }
#play-screen { position: relative; }

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

/* หน้าจบรอบ: เครื่องดนตรีที่เล่นรอบนี้ */
.done-inst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.done-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s1) var(--s2);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.done-tile img, .done-tile .krap-art { width: clamp(56px, 12vmin, 100px); }
#done-screen.active .done-tile { animation: pop .45s ease; }

/* มุมผู้ปกครอง: สวิตช์จังหวะคลอ */
.drum-beat-toggle { display: flex; align-items: center; gap: var(--s2); text-align: left; }
.drum-beat-toggle input { width: 28px; height: 28px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .pun.hop img, .pun.cheer img, .pun-bubble, .inst.hit, .inst-krap.hit .krap-art i, #done-screen.active .done-tile { animation: none; }
  .spark { animation: none; opacity: 0; }
  .spark.big { opacity: 1; transform: translate(calc(-50% + var(--dx) / 3), calc(-50% + var(--dy) / 3)); }
}

/* แนวนอน: กลอง ฉิ่ง ซ้าย · น้องปั้นกลาง · ระนาด กรับ ขวา (แถวเดียว) */
@media (orientation: landscape) {
  :root {
    --inst: clamp(96px, min(22vw, 34dvh), 240px);
    --pun: clamp(84px, min(22vw, 40dvh), 220px);
  }
  .band {
    grid-template-columns: var(--inst) var(--inst) auto var(--inst) var(--inst);
    grid-template-areas: "drum ching pun ranat krap";
  }
  .pun[data-lean="drum"], .pun[data-lean="ching"] { --lx: -14%; --rot: -8deg; }
  .pun[data-lean="ranat"], .pun[data-lean="krap"] { --lx: 14%; --rot: 8deg; }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --inst: clamp(96px, min(16.5vw, 42dvh), 180px); --pun: clamp(84px, min(17vw, 40dvh), 170px); }
  #play-screen .replay-btn { right: 0; bottom: 0; }
}