/* ก.ไก่โผล่มาทัก · ตัวอักษรเป็นตัวหนังสือจริง (ฟอนต์ Mali แบบมีหัว) ไม่ใช่ภาพ · ขนาดอิงตัวแปรใน stage.css */
.glyph {
  display: block;
  font-family: 'Mali', 'IBM Plex Sans Thai', sans-serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

/* การ์ดตัวอักษรยักษ์ด้านบน */
.letter-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--prompt) * 1.12);
  height: calc(var(--prompt) * 1.12);
  background: #fff3cf;
  border-color: #f2d27a;
  cursor: pointer;
}
.letter-card .glyph {
  font-size: calc(var(--prompt) * .86);
  color: #d9573b;
  /* ฟอนต์ไทยมีที่เผื่อสระบนล่าง · ดันขึ้นเล็กน้อยให้ตัวอักษรอยู่กลางการ์ดพอดีตา */
  transform: translateY(-4%);
}
.picture-card { cursor: pointer; }
.picture-card img { display: block; width: var(--prompt); height: auto; }

/* ตัวอักษรเต้นทักตอนขึ้นข้อใหม่ */
.letter-card.hello .glyph { animation: kokai-hello .9s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes kokai-hello {
  0% { transform: translateY(18%) scale(.4) rotate(-12deg); opacity: 0; }
  55% { transform: translateY(-10%) scale(1.08) rotate(6deg); opacity: 1; }
  75% { transform: translateY(-2%) scale(.97) rotate(-3deg); }
  100% { transform: translateY(-4%) scale(1) rotate(0); }
}

/* ปุ่มตัวอักษร (ระดับ 3 แบบหาตัวอักษร) · ปุ่มสี่เหลี่ยมจัตุรัสเท่าปุ่มภาพ */
.choice.letter-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pick) + var(--pick-pad) * 2);
  height: calc(var(--pick) + var(--pick-pad) * 2);
  line-height: 1;
}
.letter-choice .glyph {
  font-size: calc(var(--pick) * .78);
  color: var(--ink);
  transform: translateY(-4%);
}

/* หน้าเริ่ม: ตัวอักษรกับภาพคู่กัน */
.kokai-hello { flex-direction: row; gap: var(--s3); }
.kokai-hello .letter-card { cursor: default; }
.kokai-hello .target-card img { width: calc(var(--prompt) * .9); }

/* หน้าจบรอบ: ตัวอักษรที่เล่นรอบนี้ */
.letter-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: min(92vw, 640px);
}
.letter-tile {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.letter-tile .glyph { font-size: clamp(30px, 7vmin, 52px); color: #d9573b; }
.letter-tile img { width: clamp(40px, 8vmin, 64px); height: auto; }
.letter-tile .tile-word { grid-column: 1 / -1; font-size: clamp(13px, 2.2vmin, 17px); color: var(--ink-soft); text-align: center; }
#done-screen.active .letter-tile { animation: pop .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .letter-card.hello .glyph, #done-screen.active .letter-tile { animation: none; }
}

/* มือถือแนวนอน: การ์ดโจทย์เล็กลงตามความสูงจอ */
@media (orientation: landscape) and (max-height: 520px) {
  .letter-card { width: var(--prompt); height: var(--prompt); }
  .letter-card .glyph { font-size: calc(var(--prompt) * .78); }
  .letter-tile img { display: none; }
}