/**
 * JD SweetAlert2 theme — ธีมนีออนให้เข้ากับเกม Justice Game
 * พาเลตต์อ้างอิงจากหน้าเกมจริง: cyan #22d3ee · magenta #bc00ff · purple #a855f7
 * พื้นเข้ม #000511 / #0a0b1e (Create Room, Join Room, Loading ใช้ชุดนี้)
 */

/* [2026-08-11] ประกาศฟอนต์ไทย "ไม่มีหัว" เองในไฟล์กลาง — เหตุผลเดียวกับ js/jd-rotate-lock.css
   หน้า Login (และหน้าอื่นที่ไม่มี @font-face ของตัวเอง) เคยได้ป๊อปอัปเป็นฟอนต์ไทย "มีหัว" ของระบบ
   ไฟล์ฟอนต์เป็นตัวเดียวกับที่หน้าอื่นใช้อยู่แล้ว จึง 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-swal-popup {
  /* ⚠️ ถอด 'Sarabun' ออก — เป็นฟอนต์ไทย "มีหัว" ผิดดีไซน์ถ้าตกมาถึง */
  font-family: 'NotoSansThai', 'Kanit', sans-serif !important;
  border-radius: 14px !important;
  border: 1px solid rgba(34, 211, 238, 0.55) !important;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(88, 28, 135, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 42, 0.98), rgba(0, 5, 17, 0.98)) !important;
  color: #e6f7ff !important;
  box-shadow:
    0 0 0 1px rgba(188, 0, 255, 0.22),
    0 0 26px rgba(34, 211, 238, 0.28),
    0 18px 50px rgba(0, 0, 0, 0.65) !important;
}

/* เส้นนีออนบางด้านบน — ให้เข้ากับกรอบ UI อื่นในเกม */
.jd-swal-popup::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee 25%, #bc00ff 75%, transparent);
  opacity: 0.9;
  pointer-events: none;
}

.jd-swal-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #7feeff !important;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.45) !important;
}

.jd-swal-text {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  color: #cfe9ff !important;
}

/* ---- ปุ่ม ---- */
.jd-swal-btn-confirm,
.jd-swal-btn-cancel {
  font-family: inherit !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-width: 88px;
  /* เป้าสัมผัสมือถือ — ทั้งเกมยึดเกณฑ์ 44px */
  min-height: 44px;
  padding: 0.5rem 1.2rem !important;
  transition: filter 0.16s ease, transform 0.12s ease !important;
}

.jd-swal-btn-confirm {
  background: linear-gradient(180deg, #22d3ee, #0e9fc4) !important;
  border: 1px solid rgba(160, 245, 255, 0.85) !important;
  color: #04121c !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.5) !important;
}

.jd-swal-btn-cancel {
  background: linear-gradient(180deg, rgba(60, 72, 100, 0.95), rgba(32, 40, 60, 0.95)) !important;
  border: 1px solid rgba(148, 163, 184, 0.5) !important;
  color: #dbe6f5 !important;
  box-shadow: none !important;
}

.jd-swal-btn-confirm:hover,
.jd-swal-btn-cancel:hover { filter: brightness(1.12) !important; }
.jd-swal-btn-confirm:active,
.jd-swal-btn-cancel:active { transform: scale(0.96) !important; }

.jd-swal-btn-confirm:focus-visible,
.jd-swal-btn-cancel:focus-visible {
  outline: 2px solid #7feeff !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* ---- ช่องกรอก (jdPrompt) ---- */
.jd-swal-input {
  font-family: inherit !important;
  /* ≥16px กัน iOS ซูมหน้าจอเองตอนโฟกัส (ปัญหาเดียวกับช่องแชทในเกม) */
  font-size: 16px !important;
  min-height: 44px !important;
  color: #eaf6ff !important;
  background: rgba(8, 16, 32, 0.9) !important;
  border: 1px solid rgba(34, 211, 238, 0.45) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.jd-swal-input::placeholder { color: rgba(180, 205, 230, 0.55) !important; }

.jd-swal-input:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4) !important;
}

/* ---- ฉากหลัง + ไอคอน ---- */
body.swal2-shown .swal2-container { background: rgba(2, 6, 18, 0.72) !important; }

/* [2026-08-11] default ของ SweetAlert คือ z-index:1060 — ต่ำกว่า overlay ของเกมเกือบทุกตัว
   (#suspect-pick-overlay 10045, #pick-vote-overlay 12000, จอสรุปมินิเกม 99999 ฯลฯ)
   ถ้า popup แจ้งเตือนเด้งตอน overlay พวกนั้นเปิดอยู่ ผู้เล่นจะมองไม่เห็นและกดปิดไม่ได้
   (เจอจริงตอนเทส P6: ข้อความ "ถูกนำออกจากห้อง" ถูกจอเลือกผู้ต้องสงสัยบัง)
   ตั้งให้สูงกว่าทุก overlay ของเกม แต่ต่ำกว่าจอบังคับหมุนแนวนอน (2147483000) */
body.swal2-shown .swal2-container { z-index: 2000000 !important; }

.jd-swal-popup .swal2-icon.swal2-info,
.jd-swal-popup .swal2-icon.swal2-question {
  border-color: rgba(34, 211, 238, 0.7) !important;
  color: #7feeff !important;
}

.jd-swal-popup .swal2-icon.swal2-warning {
  border-color: rgba(255, 196, 61, 0.75) !important;
  color: #ffc43d !important;
}

.jd-swal-popup .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #34e5b0 !important; }
.jd-swal-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(52, 229, 176, 0.5) !important; }
.jd-swal-popup .swal2-icon.swal2-error { border-color: rgba(255, 110, 140, 0.75) !important; }
.jd-swal-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #ff6e8c !important; }

.jd-swal-popup .swal2-timer-progress-bar { background: linear-gradient(90deg, #22d3ee, #bc00ff) !important; }

/* ---- มือถือแนวนอน — จอเตี้ยมาก กล่องต้องไม่ล้นจอ ---- */
@media (orientation: landscape) and (max-height: 480px) {
  .jd-swal-popup {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem !important;
  }
  .jd-swal-title { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
  .jd-swal-text { font-size: 0.88rem !important; }
  /* ไอคอนใหญ่กินที่มากบนจอเตี้ย — ย่อลงแต่ยังเห็น */
  .jd-swal-popup .swal2-icon { width: 3rem !important; height: 3rem !important; margin: 0.4rem auto 0.5rem !important; }
  .jd-swal-popup .swal2-icon .swal2-icon-content { font-size: 1.8rem !important; }
}