/**
 * JD Rotate Lock — บังคับเล่นแนวนอนบน "จอสัมผัส" (มือถือ + แท็บเล็ต)
 * ------------------------------------------------------------------
 * กลไกหลักคือ CSS ล้วน: overlay ทึบเต็มจอที่โผล่เฉพาะตอนจอเป็นแนวตั้ง
 * และเฉพาะอุปกรณ์ที่ pointer หยาบ (สัมผัส) — เดสก์ท็อปย่อหน้าต่างให้สูงกว่ากว้าง
 * จะ "ไม่" โดน เพราะเมาส์เป็น pointer: fine
 *
 * markup ของ overlay ถูกสร้างโดย js/jd-rotate-lock.js (หน้าเว็บไม่ต้องแปะ HTML เอง)
 * ทุกหน้าจึงแค่ include 2 ไฟล์นี้คู่กัน
 *
 * z-index 2147483600 — สูงกว่า overlay ทุกตัวในเกม (ที่ไล่ถึง ~12000 และ 100001)
 * รวมถึง #jd-intro-video ของ Main-Lobby ที่ใช้ 2147483000 พอดี (z เท่ากัน = ตัวที่อยู่หลังใน DOM ชนะ
 * และ intro ถูกประกาศไว้ท้ายไฟล์ จึงเคยทับ overlay เรา — ต้องยกให้สูงกว่าจริง)
 * ห้ามมีปุ่ม "ข้าม" — เจ้าของเกมสั่งบังคับแนวนอนอย่างเดียว
 */

/* [2026-08-11] ประกาศฟอนต์ไทย "ไม่มีหัว" เองในไฟล์กลาง — ห้ามพึ่งหน้าเว็บ
   เดิมตั้งใจให้ inherit จากหน้าที่ include แต่ตรวจแล้วพบว่า **Login กับ Loading
   ไม่ได้ประกาศ @font-face ของ NotoSansThai ที่ไหนเลย** (ทั้งใน html และ style.css ของตัวเอง)
   ⇒ จอบังคับหมุนบน 2 หน้านั้นจะตกไปใช้ฟอนต์ระบบซึ่งเป็นไทย "มีหัว"
   path เป็น absolute เพราะไฟล์นี้ถูก include จากหลายระดับโฟลเดอร์ (root / Game/public)
   ใช้ชุดเดียวกับที่ Game/public/css/room-lobby.css ใช้อยู่แล้ว จึงเป็นไฟล์เดิม cache ร่วมกันได้ */
@font-face {
  font-family: 'NotoSansThai';
  src: url('/Create%20Room/FONTS/NotoSansThai-Medium.ttf') format('truetype');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NotoSansThai';
  src: url('/Create%20Room/FONTS/NotoSansThai-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NotoSansThai';
  src: url('/Create%20Room/FONTS/NotoSansThai-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NotoSansThai';
  src: url('/Create%20Room/FONTS/NotoSansThai-Black.ttf') format('truetype');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

/* ค่าเริ่มต้น: ซ่อนเสมอ (เดสก์ท็อป / แนวนอน / เครื่องที่ไม่ใช่จอสัมผัส) */
#jd-rotate-lock {
  display: none;
}

/* เงื่อนไขเดียวที่แสดง: จอแนวตั้ง + เป็นจอสัมผัส */
@media (orientation: portrait) and (pointer: coarse) {
  #jd-rotate-lock {
    display: flex;
  }

  /* หยุดหน้าเลื่อนขณะถูกบัง — ถ้าปล่อยให้เลื่อนได้ เบราว์เซอร์ที่ใช้ scrollbar กินพื้นที่
     (แท็บเล็ตต่อเมาส์ / โหมด emulate) จะเหลือแถบ ~15px ข้าง overlay ให้แตะทะลุไปโดน UI ข้างหลัง
     เงื่อนไขนี้ = เงื่อนไขเดียวกับตอน overlay โผล่พอดี จึงไม่กระทบสถานะอื่น */
  html,
  body {
    overflow: hidden !important;
  }
}

/* ---------------------------------------------------------------- */
/* หน้าตาของ overlay (ประกาศไว้เสมอ ไม่ผูกกับ media query)           */
/* ---------------------------------------------------------------- */
#jd-rotate-lock {
  /* ใช้ top/right/bottom/left = 0 (ไม่ใช้ 100vh) — กันแถบ address bar ของ iOS Safari
     ที่ทำให้ 100vh สูงเกินจอจริงจนเนื้อหาถูกดันตกขอบ */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  margin: 0;
  padding: 6vmin 7vmin;
  box-sizing: border-box;

  z-index: 2147483600;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4.5vmin, 30px);

  /* ทึบเต็มจอ + กันคลิก/แตะทะลุไปโดน UI ข้างหลัง */
  pointer-events: auto;
  touch-action: none;
  overscroll-behavior: contain;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* โทน cyber navy + แสงนีออนฟ้า/ม่วง ให้เข้ากับธีมเกม
     (พาเลตต์เดียวกับ js/jd-swal.css: cyan #22d3ee · magenta #bc00ff) */
  background-color: #060912;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(34, 211, 238, 0.20), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 100%, rgba(188, 0, 255, 0.16), transparent 62%),
    linear-gradient(180deg, #0b1226 0%, #060912 100%);

  color: #e6f7ff;
  text-align: center;
  line-height: 1.4;
  /* ฟอนต์ไทย "ไม่มีหัว" เท่านั้น — NotoSansThai ประกาศไว้ท้ายหัวไฟล์นี้แล้วจึงมีแน่นอนทุกหน้า
     ถัดมาเป็น Kanit (ไม่มีหัวเหมือนกัน เผื่อเครื่องที่ติดตั้งไว้และฟอนต์เราโหลดไม่ทัน)
     ⚠️ ถอด 'Sarabun' ออกจากลิสต์ — Sarabun เป็นฟอนต์ไทย "มีหัว" ถ้าตกมาถึงจะผิดดีไซน์ทันที */
  font-family: 'NotoSansThai', 'Kanit', sans-serif;
}

/* เส้นนีออนบาง ๆ ขอบบน/ล่าง — signature ของ UI เกม */
#jd-rotate-lock::before,
#jd-rotate-lock::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee 25%, #bc00ff 75%, transparent);
  opacity: 0.85;
  pointer-events: none;
}
#jd-rotate-lock::before { top: 0; }
#jd-rotate-lock::after  { bottom: 0; }

/* ---- ไอคอนมือถือหมุน (CSS ล้วน ไม่พึ่งรูป) ---- */
#jd-rotate-lock .jd-rl-icon {
  position: relative;
  width: clamp(96px, 30vmin, 160px);
  height: clamp(96px, 30vmin, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* วงแหวนนีออนรอบไอคอน */
#jd-rotate-lock .jd-rl-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.28);
  border-top-color: #22d3ee;
  border-right-color: rgba(188, 0, 255, 0.75);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.25);
  animation: jd-rl-spin 3.6s linear infinite;
}

/* ตัวเครื่อง — กรอบมนที่หมุน 0° → -90° แล้วค้าง ก่อนวนซ้ำ */
#jd-rotate-lock .jd-rl-phone {
  position: relative;
  width: clamp(42px, 13vmin, 68px);
  height: clamp(74px, 22vmin, 116px);
  border: 3px solid #7feeff;
  border-radius: clamp(8px, 2.4vmin, 13px);
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.16), rgba(188, 0, 255, 0.10));
  box-shadow:
    0 0 14px rgba(34, 211, 238, 0.55),
    inset 0 0 12px rgba(34, 211, 238, 0.22);
  transform-origin: 50% 50%;
  animation: jd-rl-tilt 3.2s ease-in-out infinite;
}

/* ลำโพงด้านบน + แถบ home ด้านล่างของเครื่อง */
#jd-rotate-lock .jd-rl-phone::before,
#jd-rotate-lock .jd-rl-phone::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #7feeff;
  border-radius: 999px;
  opacity: 0.9;
}
#jd-rotate-lock .jd-rl-phone::before {
  top: 6px;
  width: 38%;
  height: 3px;
}
#jd-rotate-lock .jd-rl-phone::after {
  bottom: 6px;
  width: 26%;
  height: 3px;
}

/* ---- ข้อความ ---- */
#jd-rotate-lock .jd-rl-title {
  margin: 0;
  font-size: clamp(19px, 5.6vmin, 30px);
  font-weight: 700;
  color: #7feeff;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
  letter-spacing: 0.01em;
}

#jd-rotate-lock .jd-rl-sub {
  margin: 0;
  font-size: clamp(13px, 3.6vmin, 18px);
  font-weight: 400;
  color: #cfe9ff;
  opacity: 0.88;
}

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน — ค้างไอคอนไว้ท่าแนวนอน */
@media (prefers-reduced-motion: reduce) {
  #jd-rotate-lock .jd-rl-ring { animation: none; }
  #jd-rotate-lock .jd-rl-phone {
    animation: none;
    transform: rotate(-90deg);
  }
}

@keyframes jd-rl-tilt {
  0%,  20%  { transform: rotate(0deg); }
  45%, 80%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}

@keyframes jd-rl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}