/* =========================================================
   T2MEP Coding — นับถอยหลัง "3 · 2 · 1 · GO!"  (v1.20.0)
   ใช้ร่วมกัน 2 หน้า: student.html และ teacher.html
   คู่กับ public/js/core/countdown.js — ไฟล์นั้นแค่สลับ class ให้
   ========================================================= */

/* กล่องเต็มจอ ทึบแสง — เจตนาให้ "บังแผนที่จริง ๆ"
   ไม่ใช้พื้นโปร่งใส เพราะเด็กที่ตาไวจะแอบวางแผนก่อนเพื่อนได้ตั้งแต่ยังไม่ GO! */
.cd-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;                 /* สูงกว่าโมดัลของ modal.js (1000) และแถบ HUD ทุกตัว */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 30px);
  background:
    radial-gradient(120% 80% at 50% 0%, #4c2d95 0%, #2e1a5c 55%, #231246 100%);
  font-family: var(--font, "Baloo 2", "Sarabun", sans-serif);
  user-select: none;
  -webkit-user-select: none;
  cursor: progress;
  /* ⚠️ ห้ามใส่ animation ที่เริ่มจาก opacity:0 ให้กล่องนี้เด็ดขาด
     แอนิเมชัน CSS "หยุดเดิน" เมื่อแท็บถูกซ่อน (document.hidden) — วัดจริงแล้วค้างที่เฟรมแรก
     ผลคือกล่องจะโปร่งใสสนิทแต่ยังบังหน้าจออยู่ = เด็กเห็นแผนที่ไม่ได้และกดอะไรก็ไม่ได้
     ตอนสลับแอปแล้วกลับมา ซึ่งเกิดขึ้นจริงบ่อยมากบนแท็บเล็ตของโรงเรียน
     กฎเหล็ก: "การมองเห็น" ต้องไม่ขึ้นกับแอนิเมชัน · แอนิเมชันขยับได้แค่ transform */
}

/* .cd-overlay ตั้ง display:flex ไว้ → ต้องบังคับทับ ไม่งั้นแอตทริบิวต์ hidden ไม่มีผล */
.cd-overlay[hidden] { display: none !important; }

/* ---------- วงแหวนเรืองแสงหลังตัวเลข ---------- */
.cd-box {
  position: relative;
  display: grid;
  place-items: center;
  width: min(58vw, 42vh);
  height: min(58vw, 42vh);
}

/* วงแหวนเป็นภาพประดับล้วน — ค้างได้ไม่กระทบการอ่านตัวเลข จึงยอมให้เล่นกับ opacity ได้ */
.cd-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 77, .30) 0%, rgba(255, 201, 77, 0) 68%);
  box-shadow: inset 0 0 0 clamp(4px, .9vh, 9px) rgba(255, 233, 176, .28);
  animation: cd-ring-pulse .8s ease-out infinite;
}

@keyframes cd-ring-pulse {
  0%   { transform: scale(.86); opacity: .35; }
  55%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* ---------- ตัวเลข ---------- */
.cd-num {
  position: relative;
  font-size: min(34vw, 26vh);
  line-height: 1;
  font-weight: 800;
  color: #ffe9b0;
  /* ขอบทองหนา ๆ ให้เห็นชัดจากหลังห้อง ตอนครูฉายขึ้นโปรเจกเตอร์ */
  text-shadow:
    0 0 clamp(10px, 2vh, 26px) rgba(255, 201, 77, .75),
    0 clamp(4px, .8vh, 9px) 0 #c98a12,
    0 clamp(8px, 1.6vh, 18px) clamp(10px, 2vh, 24px) rgba(0, 0, 0, .38);
}

/* เด้งเข้าแบบลูกบอลตกใส่ — ใช้กับเลข 3 · 2 · 1
   ขยับแค่ transform ไม่แตะ opacity (เหตุผลอยู่ที่คอมเมนต์ของ .cd-overlay ด้านบน)
   ถ้าแอนิเมชันค้างเพราะแท็บถูกซ่อน อย่างน้อยเด็กยังเห็นตัวเลขชัดเจน แค่ตัวใหญ่กว่าปกติ */
.cd-num--tick { animation: cd-pop .78s cubic-bezier(.18, .9, .32, 1.28) both; }

@keyframes cd-pop {
  0%   { transform: scale(1.9) rotate(-9deg); }
  38%  { transform: scale(.90) rotate(3deg); }
  56%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ช่วง "เตรียมตัว" ก่อนเริ่มนับ (v1.23.0) — คือเวลาเผื่อการเดินทางของข้อความที่ยังไม่ถูกใช้
   ตัวเล็กและนิ่ง จงใจให้ต่างจากตัวเลขชัดเจน เด็กจะได้รู้ว่า "ยังไม่เริ่มนับ"
   ไม่ใส่ animation เลย — ตามกฎเหล็ก การมองเห็นต้องไม่ขึ้นกับแอนิเมชัน */
.cd-num--ready {
  font-size: min(13vw, 10vh);
  color: #cbb8ff;
  text-shadow: 0 clamp(2px, .4vh, 5px) 0 rgba(60, 30, 120, .55);
}

/* คำว่า GO! — ตัวเล็กลงหน่อยเพราะยาว 3 ตัวอักษร แล้วสั่นดีใจ */
.cd-num--go {
  font-size: min(26vw, 20vh);
  color: #fff;
  letter-spacing: .02em;
  animation: cd-go .82s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cd-go {
  0%   { transform: scale(.35) rotate(-14deg); }
  40%  { transform: scale(1.20) rotate(5deg); }
  62%  { transform: scale(.98) rotate(-2deg); }
  100% { transform: scale(1.06) rotate(0); }
}

/* พื้นหลังสว่างวาบตอน GO! — สัญญาณ "เริ่มได้" ที่มองเห็นจากหางตา */
.cd-overlay--go {
  background:
    radial-gradient(120% 80% at 50% 45%, #20b8a0 0%, #3b2277 58%, #231246 100%);
}

/* ---------- ข้อความใต้ตัวเลข ---------- */
.cd-hint {
  font-size: clamp(15px, 2.6vh, 30px);
  font-weight: 700;
  color: #d9ccff;
  letter-spacing: .01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* ---------- เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่องเด็ก ----------
   ยังนับถอยหลังครบทุกจังหวะและเสียงเหมือนเดิม ตัดแค่การเด้ง/หมุน/เต้น
   (เด็กบางคนไวต่อภาพเคลื่อนไหวเร็ว แต่ยังต้องรู้ว่าเหลืออีกกี่วินาที) */
.cd-overlay--calm .cd-ring,
.cd-overlay--calm .cd-num--tick,
.cd-overlay--calm .cd-num--go { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cd-overlay { animation: none; }
  .cd-ring, .cd-num--tick, .cd-num--go { animation: none !important; }
}

/* ---------- จอแนวนอนเตี้ย ๆ (แท็บเล็ตวางนอน) ----------
   ตัวเลขอิง vh อยู่แล้วจึงไม่ล้น แต่ระยะห่างต้องบีบลง ไม่งั้นข้อความใต้ตัวเลขตกขอบ */
@media (max-height: 460px) {
  .cd-overlay { gap: 8px; }
  .cd-box { width: min(40vw, 62vh); height: min(40vw, 62vh); }
  .cd-num { font-size: min(24vw, 40vh); }
  .cd-num--go { font-size: min(18vw, 30vh); }
}