/* วาดตามดาว · กระดานสี่เหลี่ยมจัตุรัสกลางจอ + ดาวดวงใหญ่ (ปุ่ม ≥ 88px) ตามเส้นประ
   touch-action: none เฉพาะกระดาน (ลากนิ้วแล้วหน้าไม่เลื่อน ไม่ซูม) · ส่วนอื่นของจอเป็นไปตาม engine */
:root {
  --board: clamp(240px, min(94vw, calc(100dvh - 250px)), 720px);
  --star: clamp(88px, calc(var(--board) * .2), 120px);
}

#play-screen { position: relative; }
.trace-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}

/* ---- กระดาน ---- */
.board {
  position: relative;
  width: var(--board);
  height: var(--board);
  background: #fffdf7;
  border: 4px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(31, 61, 52, .07);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  --shape-color: #ffd166;
}
body.is-playing .board { touch-action: none; }
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shape-path {
  fill: none;
  stroke: #c9bfae;
  stroke-width: 2.4;
  stroke-dasharray: .1 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s ease, stroke-width .4s ease;
}
.shape-fill { fill: var(--shape-color); fill-opacity: 0; stroke: none; transition: fill-opacity .5s ease; }
.track { fill: none; stroke: none; visibility: hidden; }
.ink-line {
  fill: none;
  stroke: var(--shape-color);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.board.filled .shape-fill { fill-opacity: .95; }
.board[data-open="1"] .shape-fill { fill-opacity: 0; }
.board.filled .shape-path { stroke: var(--shape-color); stroke-width: 6; stroke-dasharray: none; }
.board.filled .ink { opacity: 0; transition: opacity .4s ease; }
.board.revealed .board-svg { opacity: .22; transition: opacity .5s ease; }

/* ---- ภาพที่ได้ (ภาพตัดพื้นจากคลังคำ) ---- */
.picture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 8px 10px rgba(31, 61, 52, .18));
}
.picture[hidden] { display: none; }
.board.revealed .picture { animation: pic-pop .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pic-pop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---- ดาว (ปุ่มใหญ่ · วางด้วย --x --y เป็น % ของกระดาน) ---- */
.stars { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--star);
  height: var(--star);
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.star-shape {
  position: absolute;
  inset: 22%;
  background: #f2cf6b;
  opacity: .78;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star-glow 1.8s ease-in-out infinite;
}
.star::before {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, .28) 0%, rgba(255, 209, 102, 0) 70%);
}
.star.on .star-shape { background: #ffc53d; opacity: 1; inset: 14%; animation: star-on .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.star.on::before { inset: 0; background: radial-gradient(circle, rgba(255, 197, 61, .7) 0%, rgba(255, 197, 61, 0) 70%); }
.star.idle-pulse .star-shape { background: #ffd166; }
@keyframes star-glow { 50% { opacity: .5; } }
@keyframes star-on { 0% { transform: scale(.6) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.board.revealed .stars { opacity: 0; transition: opacity .3s ease; }
.board.revealed .star { pointer-events: none; }

/* ---- จุดบอกว่ารอบนี้วาดไปกี่รูปแล้ว (ไม่ใช่คะแนน) ---- */
.shape-dots { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.shape-dots li { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.shape-dots li.done { background: #ffc53d; }

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

/* ---- หน้าเริ่ม ---- */
.trace-hello { flex-direction: row; align-items: center; gap: var(--s3); }
.trace-hello .hello-pun { width: calc(var(--prompt) * .9); height: auto; }
.hello-board {
  position: relative;
  width: calc(var(--prompt) * 1.05);
  height: calc(var(--prompt) * 1.05);
  background: #fffdf7;
  border: 3px solid var(--line);
  border-radius: var(--radius);
}
.hello-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hello-path { fill: none; stroke: #c9bfae; stroke-width: 3; stroke-dasharray: .1 6; stroke-linecap: round; }
.hello-star {
  position: absolute;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  background: #ffc53d;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hello-star.s1 { left: 50%; top: 18%; }
.hello-star.s2 { left: 82%; top: 50%; }
.hello-star.s3 { left: 50%; top: 82%; background: #f4e7c4; }
.hello-star.s4 { left: 18%; top: 50%; background: #f4e7c4; }

/* ---- หน้าจบรอบ: ภาพที่วาดรอบนี้ ---- */
.done-pics {
  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 { width: clamp(52px, 11vmin, 96px); height: auto; }
#done-screen.active .done-tile { animation: pop .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .star-shape, .star.on .star-shape, .board.revealed .picture, #done-screen.active .done-tile { animation: none; }
  .shape-path, .shape-fill, .board.revealed .board-svg { transition: none; }
}

/* แนวนอนจอเตี้ย (มือถือแนวนอน): กระดานเต็มความสูง จุดรูปอยู่ข้าง */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --board: clamp(220px, calc(100dvh - 84px), 420px); --star: clamp(88px, calc(var(--board) * .24), 110px); }
  .trace-stage { flex-direction: row; }
  .shape-dots { flex-direction: column; }
  #play-screen .replay-btn { right: 0; bottom: 0; }
  /* คำบรรยายไปอยู่ซ้ายล่างข้างกระดาน ไม่กินความสูง */
  #play-screen #caption { position: absolute; left: 0; bottom: 0; width: calc((100% - var(--board)) / 2 - var(--s4)); min-height: 0; text-align: left; }
}
@media (orientation: landscape) and (min-height: 521px) {
  :root { --board: clamp(260px, calc(100dvh - 230px), 720px); }
}