/* แต่งตัวน้องปั้น · น้องปั้นตัวใหญ่ตรงกลาง + การ์ดเสื้อผ้า · ขนาดอิงตัวแปรใน stage.css
   .doll = กรอบที่เผื่อที่ให้หมวก (บน) รองเท้า (ล่าง) ร่ม/กระเป๋า (ข้าง) · .np = ตัวน้องปั้น (ภาพ 624x640)
   ของที่ใส่อยู่ = .worn.it-<ของ> วางด้วย % ของตัวน้องปั้น (ภาพตัดพื้นหลัง 512x512 จาก /play/words/img-cut/) */

:root { --doll: clamp(170px, min(64vw, 38dvh), 440px); }

.doll {
  position: relative;
  width: var(--doll);
  aspect-ratio: 1 / .94;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.doll .np {
  position: absolute;
  left: 20%;
  top: 14.5%;
  width: 60%;
  aspect-ratio: 624 / 640;
}
.doll .np-body { display: block; width: 100%; height: auto; }
.doll::before {   /* เงาพื้นใต้เท้า */
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 1%;
  height: 7%;
  border-radius: 50%;
  background: rgba(31, 61, 52, .1);
}
.worn {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(31, 61, 52, .16));
}
.worn.it-hat { left: 1.0%; top: -45.8%; width: 98%; z-index: 12; }
.worn.it-hairclip { left: 59.0%; top: -12.5%; width: 42%; z-index: 13; }
.worn.it-glasses { left: 8.0%; top: -9.9%; width: 84%; z-index: 11; }
.worn.it-necklace { left: 28.0%; top: 33.6%; width: 44%; z-index: 7; }
.worn.it-shirt { left: 7.0%; top: 36.1%; width: 86%; z-index: 2; }
.worn.it-raincoat { left: 5.0%; top: 36.1%; width: 90%; z-index: 4; }
.worn.it-pajamas { left: 0.0%; top: 37.2%; width: 100%; z-index: 4; }
.worn.it-pants { left: 15.0%; top: 65.9%; width: 70%; z-index: 3; }
.worn.it-skirt { left: 7.0%; top: 51.1%; width: 86%; z-index: 3; }
.worn.it-socks { left: 17.0%; top: 74.8%; width: 66%; z-index: 5; }
.worn.it-shoes { left: 12.0%; top: 70.0%; width: 76%; z-index: 6; }
.worn.it-backpack { left: 65.5%; top: 45.2%; width: 55%; z-index: 8; }
.worn.it-umbrella { left: -30.0%; top: 6.0%; width: 80%; z-index: 10; }
.worn.it-watch { left: 79.0%; top: 51.4%; width: 30%; z-index: 9; }

/* ใส่ของแล้ว: น้องปั้นเด้งดีใจ · ของที่ถามทวนแล้วตอบถูก = เด้งให้ดู */
.np.happy { animation: dress-happy .7s ease both; transform-origin: 50% 100%; }
@keyframes dress-happy {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.06, .95) rotate(-3deg); }
  65% { transform: scale(.98, 1.04) rotate(3deg); }
}
.worn.found { animation: dress-found .9s ease both; }
@keyframes dress-found {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}

/* การ์ดเสื้อผ้า */
.dress-choice img { border-radius: var(--radius-sm); }
.dress-choice.worn-now { opacity: .35; }

/* หน้าเริ่ม / จบรอบ */
.dress-hello .doll { --doll: clamp(170px, min(60vw, 40dvh), 380px); cursor: default; }
.doll-done { --doll: clamp(150px, min(56vw, 36dvh), 360px); cursor: default; }
#done-screen.active .doll-done .np { animation: dress-happy .8s ease both; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .np.happy, .worn.found, #done-screen.active .doll-done .np { animation: none; }
}

/* แนวตั้ง 3 ตัวเลือก: น้องปั้นเล็กลงให้การ์ดพอ */
@media (orientation: portrait) {
  .stage:has(.choices[data-n="3"]) { --doll: clamp(160px, min(58vw, 33dvh), 400px); }
  /* 3 การ์ดเรียงแถวเดียว (ไม่ตกบรรทัดไปทับปุ่มฟังอีกครั้ง) · การ์ดยังใหญ่กว่า 88px */
  #play-screen .choices[data-n="3"] { flex-wrap: nowrap; gap: var(--s3); }
  .choices[data-n="3"] .dress-choice { padding: var(--s2); }
  .choices[data-n="3"] .dress-choice img { width: clamp(76px, min(22vw, 18dvh), 200px); }
}
/* มือถือแนวนอน: น้องปั้นซ้าย การ์ดขวา · คุมด้วยความสูงจอ */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --doll: clamp(150px, 64dvh, 320px); }
  .dress-hello .doll { --doll: clamp(130px, 44dvh, 260px); }
  .doll-done { --doll: clamp(120px, 42dvh, 240px); }
}