/* =============================================================================
   jd-responsive.css — ฐานร่วมของทุกหน้า (Justice Game)
   สร้าง 2026-08-04 · ดูที่มาของตัวเลขได้ที่ /testcase/responsive.html
   -----------------------------------------------------------------------------
   ปัญหาที่ไฟล์นี้แก้
     เดิมแต่ละหน้าคุมขนาดด้วย "บันได breakpoint" (932 → 620 → 400 → 360) โดยแต่ละ
     ชั้นเขียน clamp() ของตัวเองที่มีพื้น/เพดานไม่ตรงกัน พอจอคร่อมเส้น ค่าจะ "กระโดด"
     วัดจริงบน Main-Menu: จอสูง 387px กับ 406px (ต่างกัน 5%) ปุ่มเมนูต่างกัน 18%
     เพราะคร่อม max-height:400px — คนละรุ่นมือถือจึงเห็น UI คนละสัดส่วน

   หลักการ
     1. ขนาดทั้งหมดเป็น "ฟังก์ชันต่อเนื่อง" ของแกนสั้น (dvh ในแนวนอน) — ไม่มีขั้นบันได
        clamp()/min()/max() เป็นฟังก์ชัน monotone ⇒ จอโตขึ้นค่าไม่มีทางลดลง และไม่กระโดด
     2. breakpoint เหลือไว้ใช้เฉพาะ "เปลี่ยนโครง" (1 คอลัมน์ ↔ 2 คอลัมน์) ห้ามใช้คุมขนาด
     3. เป้าสัมผัส/ตัวอักษร มี "พื้นสัมบูรณ์" ด้วย max() — สัดส่วนย่อได้ แต่ห้ามเล็กกว่าพื้น
        (นี่คือจุดที่ container query ล้วนๆ ของ Create Room ยังพลาด: ย่อสวยแต่เหลือ 33px)

   ทำไมยึด "แกนสั้น" (dvh)
     แนวนอนบนมือถือ: กว้าง 568–932 (ต่าง 64%) แต่สูงแค่ 320–430 (ต่าง 34%)
     ตัวที่บีบ UI จริงคือความสูง การผูกขนาดกับ vw ทำให้จอกว้างแต่เตี้ยล้นทันที
   ============================================================================= */

:root {
  /* ---- พื้นสัมบูรณ์: ห้ามมีอะไรเล็กกว่านี้ ไม่ว่าจอเล็กแค่ไหน ---- */
  --jd-tap: 44px;                      /* เป้าสัมผัสขั้นต่ำ (iOS HIG / Android) */
  --jd-text: max(13px, 3.1dvh);        /* ตัวอักษรทั่วไป — ต่ำกว่า 13px อ่านสระไทยไม่ออก */
  --jd-text-sm: max(12px, 2.7dvh);     /* ตัวอักษรรอง */
  --jd-input: max(16px, 3.6dvh);       /* ช่องกรอก — ต่ำกว่า 16px iOS Safari ซูมเอง */

  /* ---- หน่วยออกแบบ: 1 หน่วย ≈ 1% ของแกนสั้น มีพื้น/เพดานกันสุดขั้ว ---- */
  --jd-u: clamp(3.2px, 1dvh, 7.2px);

  /* ---- ระยะห่างมาตรฐาน (ต่อเนื่อง ไม่มีขั้น) ---- */
  --jd-gap-xs: clamp(3px, 0.9dvh, 8px);
  --jd-gap: clamp(4px, 1.5dvh, 14px);
  --jd-gap-lg: clamp(8px, 2.6dvh, 24px);

  /* ---- ขอบจอ + safe-area (notch/home indicator) ---- */
  --jd-edge: clamp(6px, 1.6dvh, 16px);
  --jd-safe-t: max(var(--jd-edge), env(safe-area-inset-top, 0px));
  --jd-safe-r: max(var(--jd-edge), env(safe-area-inset-right, 0px));
  --jd-safe-b: max(var(--jd-edge), env(safe-area-inset-bottom, 0px));
  --jd-safe-l: max(var(--jd-edge), env(safe-area-inset-left, 0px));
}

/* ปุ่มที่กดด้วยนิ้ว — เรียกใช้ด้วย class เดียว ไม่ต้องจำตัวเลข
   ใช้ min-* ไม่ใช่ width/height ⇒ ปุ่มที่ใหญ่อยู่แล้วไม่ถูกบีบลง */
.jd-tap {
  min-width: var(--jd-tap);
  min-height: var(--jd-tap);
}

/* ช่องกรอกทุกที่: กัน iOS ซูมอัตโนมัติเวลาโฟกัส (เกิดเมื่อ font-size < 16px) */
.jd-input,
input.jd-input,
textarea.jd-input {
  font-size: var(--jd-input);
}

/* ให้ผู้ที่ตั้งค่า "ลดการเคลื่อนไหว" ไม่ต้องเจอแอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
  .jd-anim { animation: none !important; transition: none !important; }
}