/* หน้าตากลางของเกมใหม่ · ปรับตามอุปกรณ์ด้วย vmin/dvh ไม่ต้องตั้ง breakpoint รายเครื่อง
   เกมเดิม play/words/style.css ไม่ได้ใช้ไฟล์นี้

   ระเบียบที่ทุกเกมต้องใช้ร่วมกัน (อย่าตั้งค่าระยะห่างเป็นตัวเลขดิบในเกม ให้ใช้ตัวแปรพวกนี้):
     --s1 ชิดกันมาก (ใน chip)     --s2 ระหว่างของชิ้นเล็ก
     --s3 ระหว่างบล็อกในกลุ่ม     --s4 ระหว่างกลุ่ม
     --s5 ระหว่างส่วนใหญ่ของหน้า
   การจัดวาง: ปุ่มออกชิดซ้าย · ชื่อเกมอยู่กลางเสมอ · เนื้อเกมทั้งก้อนอยู่กลางจอ
   คำบรรยายอยู่ใต้เนื้อเกมในกลุ่มเดียวกัน ไม่ลอยไปติดขอบล่าง */
:root {
  --bg: #FFF8EC;
  --ink: #1f3d34;
  --ink-soft: #5b6f68;
  --card: #ffffff;
  --line: #e7ddc9;
  --accent: #1f3d34;
  --ok: #7CC6FE;

  --s1: clamp(4px, 0.9vmin, 8px);
  --s2: clamp(8px, 1.8vmin, 14px);
  --s3: clamp(12px, 2.8vmin, 22px);
  --s4: clamp(20px, 4.4vmin, 36px);
  --s5: clamp(28px, 6.4vmin, 56px);

  --radius: clamp(14px, 3vmin, 28px);
  --radius-sm: clamp(10px, 2vmin, 16px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Mali', 'IBM Plex Sans Thai', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { touch-action: manipulation; }
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));
  gap: var(--s3);
}

/* ---- แถบบน: ปุ่มออกซ้าย · ชื่อเกมกลางจริงๆ (ช่องขวาว่างขนาดเท่าปุ่มซ้าย) ---- */
.stage-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s2);
}
.stage-top h1 {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 2.8vmin, 24px);
  font-weight: 600;
  color: var(--ink);
}
.stage-top > :last-child:not(h1) { justify-self: end; }
#brand-exit-btn {
  grid-column: 1;
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  font: inherit;
  font-size: clamp(13px, 2.2vmin, 17px);
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
}
#brand-exit-btn img { width: clamp(24px, 4vmin, 36px); height: auto; border-radius: 50%; }
#brand-exit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31, 61, 52, .14);
  transform: scaleX(0);
  transform-origin: left;
}
#brand-exit-btn.holding::after {
  transform: scaleX(1);
  transition: transform var(--hold-ms, 3000ms) linear;
}
#brand-exit-btn span { white-space: nowrap; }
/* มือถือแนวตั้ง: เหลือแค่โลโก้ ไม่ให้ไปเบียดชื่อเกม · ซ่อนแบบที่โปรแกรมอ่านจอยังอ่าน "ออกจากเกม" ได้ */
@media (max-width: 480px) {
  #brand-exit-btn { padding: var(--s1); }
  #brand-exit-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---- หน้าจอหนึ่งหน้า = หนึ่งกลุ่มที่อยู่กลางจอ ---- */
.screen { display: none; }
.screen.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  min-height: 0;
  text-align: center;
}
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  min-height: 0;
}
.stage-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.target-card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
  box-shadow: 0 6px 0 rgba(31, 61, 52, .07);
}
.target-card img { display: block; width: clamp(96px, 22vmin, 200px); height: auto; }

/* ---- ปุ่มตัวเลือก: ใหญ่พอสำหรับนิ้วเด็ก ---- */
.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  width: 100%;
}
.choice {
  border: 4px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--s2);
  cursor: pointer;
  line-height: 0;
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.choice img { display: block; width: clamp(110px, min(30vmin, 38vw), 260px); height: auto; }
.choice:active { transform: scale(.96); }
.choice.correct { border-color: #79c36a; animation: pop .45s ease; }
.choice.wrong { animation: wobble .4s ease; }
/* เรืองแสงช่วย: วาดวงแสงครั้งเดียวแล้วเปลี่ยนแค่ opacity/transform (ไม่วาด box-shadow ใหม่ทุกเฟรม) */
.choice { position: relative; }
.choice.hinted { border-color: var(--ok); }
.choice.hinted::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 0 0 10px rgba(124, 198, 254, .35);
  pointer-events: none;
  animation: glow 1.1s ease infinite;
  will-change: opacity, transform;
}
.choice[disabled] { cursor: default; }
@keyframes pop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.09); } }
@keyframes wobble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes glow { 0%,100% { opacity: 0; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .choice, .choice.correct, .choice.wrong, .choice.hinted, .choice.hinted::after { animation: none; transition: none; }
  .choice.hinted::after { opacity: 1; transform: none; }
}

/* ---- ดาวบอกความคืบหน้าของรอบ ---- */
.round-dots {
  display: flex;
  gap: var(--s2);
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
}
.round-dots span {
  width: clamp(12px, 2.2vmin, 18px);
  height: clamp(12px, 2.2vmin, 18px);
  border-radius: 50%;
  background: var(--line);
}
.round-dots span.done { background: #FFD166; }

/* ---- ปุ่มฟังอีกครั้ง (ทุกเกมใช้หน้าตาเดียวกัน) ---- */
.replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-width: clamp(56px, 11vmin, 84px);
  min-height: clamp(48px, 9vmin, 68px);
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 3.4vmin, 26px);
  cursor: pointer;
}
.replay-btn:active { transform: scale(.96); }

/* ---- คำบรรยาย (สำหรับผู้ใหญ่) · อยู่ในกลุ่มเดียวกับเนื้อเกม ---- */
#caption {
  flex: 0 0 auto;
  margin: 0;
  max-width: 42ch;
  min-height: 2.8em;
  text-align: center;
  font-size: clamp(14px, 2.4vmin, 20px);
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .2s ease;
}
#caption.show { opacity: 1; }

/* ---- หน้าเริ่ม / หน้าจบรอบ ---- */
#start-text, .done-screen p { margin: 0; max-width: 34ch; font-size: clamp(15px, 2.6vmin, 20px); color: var(--ink-soft); }
.done-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  text-align: center;
}
.done-screen h2 { margin: 0; font-size: clamp(20px, 4vmin, 34px); }
.sticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  max-width: min(92vw, 620px);
}
.sticker-grid img {
  width: clamp(44px, 9vmin, 78px);
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 2px solid var(--line);
  padding: var(--s1);
}
.stage-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.stage-actions a, .stage-actions button {
  font: inherit;
  font-size: clamp(15px, 2.6vmin, 20px);
  border-radius: 999px;
  padding: .7em 1.6em;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.stage-actions .outline { background: transparent; color: var(--accent); }

/* ---- กล่องถามออกจากเกม ---- */
dialog {
  border: none;
  border-radius: var(--radius);
  padding: var(--s4);
  max-width: min(92vw, 420px);
  color: var(--ink);
  text-align: center;
}
dialog::backdrop { background: rgba(31, 61, 52, .45); }
dialog h2 { margin: 0 0 var(--s3); font-size: clamp(17px, 3vmin, 24px); }
dialog a, dialog button {
  display: block;
  width: 100%;
  margin-top: var(--s2);
  text-align: center;
  font: inherit;
  border-radius: 999px;
  padding: .7em 1.2em;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
dialog button { background: var(--accent); color: #fff; }

/* ---- จำนวนภาพตามระดับ (data-n บน .choices) · มติ docs/DIFFICULTY_MEETING.md ----
   2 ภาพ: แถวเดียว · 3 ภาพ: มือถือ 2+1 ตรงกลาง แท็บเล็ตแถวเดียว · 4 ภาพ: ตาราง 2x2 เสมอ
   ปุ่มต้องไม่เล็กกว่า ~96px ด้านสั้น (ค่าที่ codex คำนวณจาก stage.css) */
.choices[data-n="4"] {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: var(--s3);
}
.choices[data-n="4"] .choice img { width: clamp(96px, min(24vmin, 34vw), 200px); }
.choices[data-n="3"] { gap: var(--s3); }
/* จอกว้างแนวนอน + 4 ภาพ: โจทย์ซ้าย ตัวเลือกขวา ไม่ให้สูงเกินจอ 820 */
@media (min-width: 900px) and (orientation: landscape) {
  .stage:has(.choices[data-n="4"]) {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--s5);
  }
  .stage:has(.choices[data-n="4"]) .choices { width: auto; }
}

/* ---- มุมผู้ปกครอง: ปุ่มเฟืองมุมขวาบน (กดค้าง 2 วินาที) ---- */
.parent-corner-btn {
  grid-column: 3;
  justify-self: end;
  position: relative;
  width: clamp(40px, 7vmin, 52px);
  height: clamp(40px, 7vmin, 52px);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: clamp(18px, 3.4vmin, 24px);
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
.parent-corner-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31, 61, 52, .16);
  transform: scaleY(0);
  transform-origin: bottom;
}
.parent-corner-btn.holding::after {
  transform: scaleY(1);
  transition: transform var(--hold-ms, 2000ms) linear;
}
dialog.parent-corner { text-align: left; }
dialog.parent-corner h2 { text-align: center; }
.parent-corner label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s3);
  font-weight: 600;
}
.parent-corner select {
  font: inherit;
  font-weight: 400;
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}
.parent-corner-summary {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  background: #eef4e8;
  line-height: 1.5;
}
.parent-corner-note { margin: var(--s3) 0 0; font-size: .9em; color: var(--ink-soft); line-height: 1.5; }
dialog button.outline { background: transparent; color: var(--accent); }

/* ---- ปุ่มเริ่มถูกแตะก่อนข้อมูลพร้อม: ให้เห็นว่ารับรู้แล้ว (ไม่ใช่ปุ่มตาย) แล้วเกมเริ่มเอง ---- */
.stage-actions button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .85;
  animation: start-wait 1s ease-in-out infinite;
}
@keyframes start-wait { 0%, 100% { transform: scale(1); } 50% { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .stage-actions button.is-loading { animation: none; } }

/* ---- ชวนผู้ใหญ่ดูบัตรผ่าน (docs/SELL_MEETING.md) · ลิงก์ตัวเล็ก ไม่ใช่ปุ่มสีสด ลูกไม่สนใจ ---- */
.upsell-link {
  position: relative;
  overflow: hidden;
  border: none;
  background: none;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: clamp(12px, 2vmin, 15px);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.upsell-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31, 61, 52, .12);
  transform: scaleX(0);
  transform-origin: left;
}
.upsell-link.holding::after { transform: scaleX(1); transition: transform var(--hold-ms, 2000ms) linear; }
dialog.upsell { text-align: left; }
dialog.upsell h2 { text-align: center; }
dialog.upsell p { margin: 0 0 var(--s2); line-height: 1.6; }
.upsell-terms { color: var(--ink-soft); font-size: .92em; }
.upsell-price { font-weight: 600; }
dialog.upsell button { margin-top: var(--s3); font-size: 1.05em; padding: .8em 1.2em; }
.parent-corner-pass { margin: var(--s3) 0 0; font-size: .9em; line-height: 1.6; color: var(--ink-soft); }