/* ═══════════════════════════════════════════════════════════════════════════════════════
   realm.css — "อีกมิติ" ของหน้าทำเนียบ #/hall = โซนพักใจ (21/10 · ภาพอ้างอิง "v2 Twilight")
   ───────────────────────────────────────────────────────────────────────────────────────
   • ทุกกฎ scope ใต้ html.realm ล้วน — nav.js ใส่คลาสนี้บน <html> เฉพาะตอนอยู่ #/hall หรือ #/profile
     ("ห้องจอมเวท" · 23/10 — nav.js REALM_ROUTES) แล้วถอดทันทีที่ออก
     → แอปงาน (teal/ขาว) ไม่ถูกแตะแม้แต่พิกเซลเดียว · ไฟล์นี้เป็น CSS ธรรมดา ไม่ผ่าน Tailwind build
   • คลาสอยู่บน <html> (ไม่ใช่ #main) เพราะ modal() ใน ui.js ต่อท้าย document.body — แผ่นที่เปิดจาก
     หน้าทำเนียบ (ปูม/วิธีเล่น/เมนูอื่นๆ) ต้องเป็นอีกมิติด้วย
   • specificity: ทุก mapping คือ `html.realm .x` = (0,2,1) ชนะ utility ของ Tailwind (0,1,0) โดยไม่ต้อง
     !important · ใช้ !important แค่ 3 จุด ทุกจุดสู้ inline style: ขอบการ์ด + จุดบอกขั้นของ howto.js
     (ไฟล์ที่รอบนี้ห้ามแตะ) และพื้นปุ่มโจมตีช่วงรอ QTE (inline teal ใน hall.js)
   • ความคมชัด: ทุกคู่สีตัวหนังสือ/พื้นตรวจด้วย scripts/test_realm.mjs (WCAG AA) — แก้สีตรงนี้ต้องรันซ้ำ
   • ห้ามย่อขนาดตัวหนังสือ/ปุ่มในไฟล์นี้ — เปลี่ยนแค่สี พื้น เส้น เงา และฉาก
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html.realm {
  /* โทเคนของอีกมิติ — สีชุดเดียวกับภาพอ้างอิงที่ Chad อนุมัติ */
  --rl-sky-1: #2a2664;
  --rl-sky-2: #4b3f88;
  --rl-sky-3: #3f7a8c;
  --rl-moon: #ffe9b8;
  --rl-gold: #f2c45a;
  --rl-lantern: #ffd27a;
  --rl-gold-hi: #ffe3a0;
  --rl-ink: #1e1c42;
  --rl-panel: #2b2a5c;
  --rl-sheet: #25234f;
  --rl-text: #f3f0ff;
  --rl-text-2: #c3bee6;
  --rl-muted: #a49fcf;
  --rl-card: rgba(43, 42, 92, 0.84); /* = --rl-panel โปร่ง 84% (ทดสอบ contrast แบบซ้อนบนฟ้าส่วนที่สว่างสุดแล้ว) */
  --rl-hair: rgba(242, 196, 90, 0.25); /* เส้นทองบางๆ ขอบการ์ด */
  --rl-gem: linear-gradient(180deg, #ffc04d 0%, #f59a1f 55%, #d9770c 100%);
  --rl-gem-text: #2b1400;

  /* ตัวแปรที่ hall.js อ่านผ่าน var(--x, ค่าเดิม) ใน inline style — นอกอีกมิติ fallback = ค่าเดิมเป๊ะ */
  --seg-empty: rgba(255, 255, 255, 0.1); /* ช่องว่างของแถบเลือดบอส (= .bg-slate-100 ด้านล่าง) */
  --seg-fill: #f2c45a; /* ช่อง "กำลังเดิน" ของแถบเลือด (= สีหลักของ .bg-brand ในอีกมิติ) */
  --split-border: rgba(201, 184, 255, 0.35);
  --split-pip-empty: #8f86c9;

  background-color: var(--rl-sheet); /* ขอบเด้ง overscroll ไม่โผล่สีเทาของแอปงาน */
  color-scheme: dark;
}

/* ── ฉาก: ฟ้าสนธยา + พระจันทร์ + ดาว (::before) · หิ่งห้อย (::after) ─────────────────────────
   z-index:-1 ใน root stacking context = วาดใต้ทุกอย่างที่อยู่ในหน้า (เนื้อหาไม่ต้องตั้ง z-index เพิ่ม
   header sticky z-30 / แถบล่าง fixed z-30 / modal z-40 เหมือนเดิมทุกตัว) → body/เปลือกแอปต้องโปร่ง */
html.realm body {
  background: transparent;
  color: var(--rl-text);
}
html.realm #root > .min-h-screen,
html.realm .min-h-screen.bg-slate-100 {
  background: transparent;
}
html.realm body::before,
html.realm body::after {
  content: '';
  position: fixed;
  inset: -6vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
html.realm body::before {
  background-color: var(--rl-sky-1);
  background-image:
    /* ดาว — จุดเล็ก จางๆ ไม่กะพริบ */
    radial-gradient(circle 1.3px at 8% 14%, rgba(255, 250, 235, 0.8), transparent),
    radial-gradient(circle 1px at 19% 32%, rgba(255, 250, 235, 0.6), transparent),
    radial-gradient(circle 1.5px at 27% 9%, rgba(255, 250, 235, 0.75), transparent),
    radial-gradient(circle 1px at 36% 24%, rgba(255, 250, 235, 0.55), transparent),
    radial-gradient(circle 1.2px at 44% 6%, rgba(255, 250, 235, 0.7), transparent),
    radial-gradient(circle 1px at 52% 38%, rgba(255, 250, 235, 0.45), transparent),
    radial-gradient(circle 1.4px at 61% 18%, rgba(255, 250, 235, 0.7), transparent),
    radial-gradient(circle 1px at 69% 44%, rgba(255, 250, 235, 0.4), transparent),
    radial-gradient(circle 1.2px at 74% 28%, rgba(255, 250, 235, 0.6), transparent),
    radial-gradient(circle 1px at 88% 36%, rgba(255, 250, 235, 0.5), transparent),
    radial-gradient(circle 1.3px at 93% 8%, rgba(255, 250, 235, 0.7), transparent),
    radial-gradient(circle 1px at 13% 52%, rgba(255, 250, 235, 0.4), transparent),
    radial-gradient(circle 1px at 31% 61%, rgba(255, 250, 235, 0.3), transparent),
    radial-gradient(circle 1px at 82% 58%, rgba(255, 250, 235, 0.35), transparent),
    /* แสงจันทร์อุ่นๆ มุมขวาบน (อ่อนมาก) */
    radial-gradient(circle at 82% 10%, rgba(255, 233, 184, 0.32) 0, rgba(255, 233, 184, 0.1) 9vmax, transparent 26vmax),
    /* ฟ้า: คราม → ม่วงสนธยา → เขียวน้ำทะเลยามค่ำ */
    linear-gradient(180deg, var(--rl-sky-1) 0%, var(--rl-sky-2) 52%, var(--rl-sky-3) 100%);
  animation: rl-drift-a 90s ease-in-out infinite alternate;
}
html.realm body::after {
  background-image:
    radial-gradient(circle 5px at 14% 72%, rgba(255, 227, 160, 0.85), rgba(255, 210, 122, 0.25) 45%, transparent),
    radial-gradient(circle 4px at 27% 86%, rgba(255, 227, 160, 0.7), rgba(255, 210, 122, 0.2) 45%, transparent),
    radial-gradient(circle 5px at 41% 64%, rgba(255, 227, 160, 0.6), rgba(255, 210, 122, 0.18) 45%, transparent),
    radial-gradient(circle 4px at 58% 80%, rgba(255, 227, 160, 0.75), rgba(255, 210, 122, 0.22) 45%, transparent),
    radial-gradient(circle 6px at 71% 68%, rgba(255, 227, 160, 0.55), rgba(255, 210, 122, 0.16) 45%, transparent),
    radial-gradient(circle 4px at 84% 88%, rgba(255, 227, 160, 0.7), rgba(255, 210, 122, 0.2) 45%, transparent),
    radial-gradient(circle 3px at 92% 60%, rgba(255, 227, 160, 0.6), rgba(255, 210, 122, 0.18) 45%, transparent),
    radial-gradient(circle 3px at 6% 92%, rgba(255, 227, 160, 0.55), rgba(255, 210, 122, 0.16) 45%, transparent);
  opacity: 0.7;
  animation: rl-drift-b 48s ease-in-out infinite alternate, rl-breathe 9s ease-in-out infinite alternate;
}
@keyframes rl-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2.5%, 1.5%, 0); }
}
@keyframes rl-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3%, -5%, 0); }
}
/* หิ่งห้อย "หายใจ" ช้าๆ 9 วิ/รอบ — ไม่ใช่การกะพริบ (WCAG 2.3.1 = เกิน 3 ครั้ง/วินาที) */
@keyframes rl-breathe {
  from { opacity: 0.5; }
  to { opacity: 0.8; }
}

/* ── ประตูมิติเปิด (~600ms) — nav.js ใส่ realm-enter ตอนเข้ามาจากหน้าอื่น แล้วถอดเองที่ 700ms ──
   ม่านหมึก (#root::before) จางหาย + วงแหวนทอง (#root::after) ขยายจากกลางจอ
   z-index 35: เหนือ header/แถบล่าง (30) ใต้ modal (40 — แผ่นวิธีเล่นที่เด้งเองต้องไม่ถูกม่านทับ)
   pointer-events:none = กดทะลุได้ตลอด ไม่ขวางการใช้งานแม้แต่ 1 เฟรม */
html.realm.realm-enter #root::before,
html.realm.realm-enter #root::after {
  content: '';
  position: fixed;
  z-index: 35;
  pointer-events: none;
}
html.realm.realm-enter #root::before {
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(30, 28, 66, 0.55) 0, #1e1c42 70%);
  animation: rl-veil 0.6s ease-out forwards;
}
html.realm.realm-enter #root::after {
  left: 50%;
  top: 45%;
  width: 40vmin;
  height: 40vmin;
  margin: -20vmin 0 0 -20vmin;
  border-radius: 9999px;
  border: 2px solid var(--rl-gold-hi);
  box-shadow: 0 0 28px 6px rgba(242, 196, 90, 0.55), inset 0 0 22px rgba(255, 227, 160, 0.45);
  animation: rl-portal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rl-veil {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes rl-portal {
  0% { opacity: 1; transform: scale(0.05); }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(3.2); }
}

/* ── header + แถบล่าง: กระจกหมึก + เส้นทองบาง ───────────────────────────────────────────── */
html.realm #root header {
  background: rgba(30, 28, 66, 0.74);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--rl-hair);
  color: var(--rl-text);
  --tw-shadow: 0 8px 22px -12px rgba(8, 6, 30, 0.8);
  --tw-shadow-colored: 0 8px 22px -12px rgba(8, 6, 30, 0.8);
}
html.realm #root header .bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(242, 196, 90, 0.28);
}
html.realm #root header .hover\:bg-white\/25:hover {
  background-color: rgba(255, 255, 255, 0.18);
}
html.realm #bottom-nav {
  background: rgba(30, 28, 66, 0.84);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-top: 1px solid var(--rl-hair);
}
html.realm #bottom-nav .text-slate-500 {
  color: var(--rl-text-2);
}
html.realm #bottom-nav .text-brand,
html.realm #bottom-nav .hover\:text-brand:hover {
  color: var(--rl-lantern);
}
html.realm #bottom-nav .text-brand {
  text-shadow: 0 0 10px rgba(242, 196, 90, 0.45);
}

/* ── modal (ui.js modal()) — ม่านหมึก + แผ่น sheet ทึบ ─────────────────────────────────────── */
html.realm .bg-black\/40 {
  background-color: rgba(14, 12, 40, 0.62);
}
html.realm .bg-black\/40 > .bg-white,
html.realm .rounded-t-2xl.bg-white {
  background-color: var(--rl-sheet);
  background-image: radial-gradient(120% 60% at 85% 0%, rgba(255, 233, 184, 0.08), transparent 60%);
  border: 1px solid var(--rl-hair);
  border-bottom: 0;
  color: var(--rl-text);
  --tw-shadow: 0 -18px 40px -18px rgba(8, 6, 30, 0.85);
  --tw-shadow-colored: 0 -18px 40px -18px rgba(8, 6, 30, 0.85);
}

/* เส้นขอบที่ไม่มีคลาสสี (แค่ `border`) — preflight ให้เทาอ่อน #e5e7eb ซึ่งแสบตาบนพื้นมืด
   :where() = specificity 0 → คลาส border-* ทุกตัวยังชนะเหมือนเดิม แค่แทนค่าตั้งต้นของ preflight */
:where(html.realm) *,
:where(html.realm) ::before,
:where(html.realm) ::after {
  border-color: rgba(242, 196, 90, 0.18);
}

/* ── พื้น: การ์ดกระจกคราม ───────────────────────────────────────────────────────────────── */
/* [รอบ 2] ไม่มี backdrop-filter บนการ์ดแล้ว (เหลือแค่ header/แถบล่าง): blur ~20 กล่องหน่วงมือถือรุ่นเก่า
   และ backdrop-filter สร้าง stacking context/containing block ที่ตัดกระดาษสี/ประกายเอฟเฟกต์ — พื้นการ์ด
   โปร่ง 84% บนฟ้าที่แทบเป็นสีเรียบอยู่แล้ว ไม่ blur ก็แทบไม่ต่าง */
html.realm .bg-white {
  background-color: var(--rl-card);
}
html.realm .bg-slate-50 {
  background-color: rgba(52, 50, 110, 0.88); /* สว่างกว่าการ์ดนิดเดียว (แถวของฉัน) — มากกว่านี้ตัวจางหลุด AA */
}
html.realm .bg-slate-100 {
  background-color: rgba(255, 255, 255, 0.1);
}
html.realm .bg-slate-200 {
  background-color: rgba(255, 255, 255, 0.16);
}
html.realm .bg-slate-300 {
  background-color: rgba(255, 255, 255, 0.28);
}
html.realm .bg-slate-700 {
  background-color: #3a3878;
  box-shadow: inset 0 0 0 1px rgba(242, 196, 90, 0.45); /* ปุ่มกระสอบทรายไม่จมหายในการ์ดสีใกล้กัน */
}
/* การ์ดสีอ่อน → กระจกครามแต้มสี (สีแต้มเป็น background-image ทับพื้นการ์ด = กระจกเดียว ไม่ซ้อนกล่อง) */
html.realm .bg-amber-50,
html.realm .bg-red-50,
html.realm .bg-violet-50,
html.realm .bg-emerald-50,
html.realm .bg-sky-50,
html.realm .bg-orange-50 {
  background-color: var(--rl-card);
}
html.realm .bg-amber-50 {
  background-image: linear-gradient(rgba(255, 192, 77, 0.09), rgba(255, 192, 77, 0.09));
}
html.realm .bg-red-50 {
  background-image: linear-gradient(rgba(255, 140, 150, 0.09), rgba(255, 140, 150, 0.09)); /* แต้มกุหลาบอ่อน ไม่ใช่สัญญาณเตือน */
}
html.realm .bg-violet-50 {
  background-image: linear-gradient(rgba(201, 184, 255, 0.12), rgba(201, 184, 255, 0.12));
}
html.realm .bg-emerald-50 {
  background-image: linear-gradient(rgba(126, 226, 168, 0.09), rgba(126, 226, 168, 0.09));
}
html.realm .bg-sky-50 {
  background-image: linear-gradient(rgba(140, 200, 255, 0.12), rgba(140, 200, 255, 0.12));
}
html.realm .bg-orange-50 {
  background-image: linear-gradient(rgba(255, 179, 128, 0.16), rgba(255, 179, 128, 0.16));
}
/* รางแถบ (track) — โปร่งแต้มสีของตัวเอง */
html.realm .bg-amber-100 {
  background-color: rgba(255, 192, 77, 0.18);
}
html.realm .bg-red-100 {
  background-color: rgba(255, 120, 140, 0.2);
}
html.realm .bg-violet-100 {
  background-color: rgba(201, 184, 255, 0.18);
}
/* ไส้แถบ/ปุ่มสีทึบ */
html.realm .bg-amber-500 {
  background-color: var(--rl-gold);
}
html.realm .bg-emerald-500 {
  background-color: #4fc98a;
}
html.realm .bg-red-500 {
  background-color: #a8445a; /* [รอบ 2] กุหลาบอุ่นแทนแดงสด — โซนพักใจไม่มีสีสัญญาณเตือน · ตัวขาวยังผ่าน AA (test_realm) */
}
/* กล่องขาวที่ซ้อนอยู่ในกล่องแต้มสี (แถวร่างแยก / กล่องท้าดวลในห้องฝึกซ้อม) → หลุมเงาจางๆ แทนการ์ดซ้อน
   ไม่ใส่ขอบเพิ่ม — กล่องในกล่องแบบทึบ+ขอบดูหนักเกินไปสำหรับโซนพักใจ */
html.realm .bg-violet-50 .bg-white,
html.realm .bg-slate-50 .bg-white {
  background-color: rgba(0, 0, 0, 0.18);
  border-color: transparent;
}
/* การ์ดมุมโค้ง 16px (ภาพอ้างอิง) — เฉพาะ "กล่อง" rounded-xl ที่เป็นพื้นการ์ด ไม่แตะปุ่ม */
html.realm :is(.bg-white, .bg-slate-50, .bg-amber-50, .bg-red-50, .bg-violet-50, .bg-emerald-50, .bg-sky-50).rounded-xl {
  border-radius: 16px;
}
html.realm .shadow {
  --tw-shadow: 0 10px 28px -14px rgba(8, 6, 30, 0.75);
  --tw-shadow-colored: 0 10px 28px -14px rgba(8, 6, 30, 0.75);
}

/* ── ปุ่มหลัก = อัญมณีอำพัน + ตัวหนังสือน้ำตาลเข้ม (≥5.4:1 ทุกจุดของไล่สี) ─────────────────────── */
html.realm .bg-brand {
  background-color: #f59a1f;
  background-image: var(--rl-gem);
  color: var(--rl-gem-text);
}
/* ปุ่มที่ประกาศ text-white คู่กับพื้นอัญมณี → ต้องเป็นน้ำตาลเข้ม (ขาวบนอำพัน = 2:1 อ่านไม่ออก)
   specificity (0,3,1) ชนะ `html.realm .text-white` (0,2,1) */
html.realm .bg-brand.text-white,
html.realm .bg-amber-500.text-white {
  background-color: #f59a1f;
  background-image: var(--rl-gem);
  color: var(--rl-gem-text);
}
html.realm button.bg-brand,
html.realm button.bg-amber-500.text-white {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px -8px rgba(245, 154, 31, 0.75);
}
html.realm .disabled\:opacity-50:disabled {
  opacity: 0.5;
}

/* ── ตัวหนังสือ ────────────────────────────────────────────────────────────────────────── */
html.realm .text-white {
  color: #fffdf7;
}
html.realm .text-slate-800 {
  color: var(--rl-text);
}
html.realm .text-slate-700 {
  color: #e9e5ff;
}
html.realm .text-slate-600,
html.realm .text-slate-500 {
  color: var(--rl-text-2);
}
html.realm .text-slate-400 {
  color: #b9b4e0; /* สว่างกว่า --rl-muted: slate-400 ในหน้านี้ใช้กับตัวเล็ก (เดือนนี้/สะสม) บนการ์ดแต้มสี → ต้องผ่าน AA */
}
/* ปุ่มที่กดไม่ได้แต่ "บอกทาง" (🔋 ไม่มีประจุ — ไปเช็คอินก่อน) — ข้อความนี้คือคำแนะนำ ต้องอ่านออก ≥ 4.5:1
   (กฎ WCAG ยกเว้นปุ่ม disabled ก็จริง แต่ที่นี่ตัวหนังสือคือเนื้อหา) · (0,3,1) ชนะ .text-slate-400 */
html.realm .bg-slate-100.text-slate-400 {
  color: #d6d2f2;
}
html.realm .text-slate-300 {
  color: #8f8ac0; /* ใช้กับขีด "–" ไม่มีข้อมูลเท่านั้น (ประดับ) */
}
html.realm .text-brand {
  color: var(--rl-gold);
}
html.realm .text-amber-800,
html.realm .text-amber-700 {
  color: var(--rl-lantern);
}
html.realm .text-amber-600,
html.realm .text-amber-500 {
  color: var(--rl-gold);
}
html.realm .text-red-700,
html.realm .text-red-600,
html.realm .text-red-500 {
  color: #ff9aa8;
}
html.realm .text-emerald-700,
html.realm .text-emerald-600 {
  color: #7ee2a8;
}
html.realm .text-violet-700 {
  color: #d4c7ff; /* [รอบ 2] สว่างขึ้นจาก #c9b8ff — ปุ่มรองร่างแยกอยู่บนแถวหลุมเงา ต้องยังผ่าน AA */
}
html.realm .text-orange-600 {
  color: #ffb380;
}

/* ── เส้นขอบ ───────────────────────────────────────────────────────────────────────────── */
html.realm .border-slate-200 {
  border-color: var(--rl-hair);
}
html.realm .border-slate-300 {
  border-color: rgba(242, 196, 90, 0.32);
}
html.realm .border-slate-400 {
  border-color: rgba(242, 196, 90, 0.45);
}
html.realm .border-brand {
  border-color: var(--rl-gold);
}
html.realm .border-amber-200 {
  border-color: rgba(255, 210, 122, 0.35);
}
html.realm .border-amber-400 {
  border-color: rgba(255, 210, 122, 0.6);
}
html.realm .border-amber-500 {
  border-color: var(--rl-gold);
}
html.realm .border-red-200 {
  border-color: rgba(255, 154, 168, 0.35);
}
html.realm .border-red-300 {
  border-color: rgba(255, 154, 168, 0.55);
}
html.realm .border-emerald-200 {
  border-color: rgba(126, 226, 168, 0.35);
}
html.realm .border-violet-200 {
  border-color: var(--split-border);
}
html.realm .ring-brand {
  --tw-ring-color: rgba(242, 196, 90, 1);
}
html.realm .ring-brand\/30 {
  --tw-ring-color: rgba(242, 196, 90, 0.35);
}

/* ── ปุ่มเสียง + ลิงก์ตัวละครของฉัน (หัวทำเนียบ) — ≥ 44px และตัวหนังสือ ≥ 14px ในอีกมิติ ──────────── */
html.realm [data-sfx],
html.realm [data-me] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
html.realm [data-sfx] {
  font-size: 20px;
}
html.realm [data-me] {
  font-size: 14px;
  padding: 0 4px;
}
html.realm [data-ambient] {
  gap: 4px;
  padding: 0 10px;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid rgba(242, 196, 90, 0.45);
  color: var(--rl-text);
}
html.realm [data-ambient][aria-pressed='true'] {
  background-color: rgba(242, 196, 90, 0.16);
  color: var(--rl-lantern);
}

/* ── ปุ่มโจมตีช่วง "รอ... แล้วกดอีกที" (มินิเกม QTE) — hall.js เขียน teal โปร่งเป็น inline style
   (#0f766eb3) → อีกมิติเป็นอัญมณีหรี่แทน · !important จำเป็นเพราะสู้ inline style */
html.realm [data-attack][style*='0f766eb3'] {
  background: rgba(242, 196, 90, 0.22) !important;
  color: var(--rl-lantern);
  box-shadow: inset 0 0 0 1px rgba(242, 196, 90, 0.6);
}

/* ── [21/10 รีวิว ux ฮีโร่ร่ายเวท] ชิปเลือกเวท = เป้านิ้ว 44px + ไอคอน 16px (hall.js วาด 33×21 / 11px)
   ห่อบรรทัดเองที่ 375/320px (แถวชิปเป็น flex-wrap อยู่แล้ว) · ตอนรอ attack_boss() ชิปถูก disabled →
   จาง .7 (แทน .5) ลดอาการกะพริบ */
html.realm [data-spell] {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  font-size: 16px;
}
html.realm [data-spell]:disabled {
  opacity: 0.7;
}
/* ── ปุ่มโจมตีตอน disabled ("⚔️ กำลังโจมตี...") — เดิมจาง .5 = ตัวหนังสือ 2.4–3.7:1 · ทึบแล้วหรี่ด้วย filter แทน
   (filter หรี่ทั้งพื้นและตัวหนังสือ) แถบตัวหนังสือกลางปุ่ม 25–75% ≥ 4.5:1 — ตรวจใน test_realm.mjs
   brightness .85 (ไม่ใช่ .8 ตามข้อเสนอ) เพราะ .8 ได้ 4.37 ที่ขอบล่างของแถบตัวหนังสือ */
html.realm [data-attack]:disabled {
  opacity: 1;
  filter: saturate(0.55) brightness(0.85);
}

/* ── ห้องจอมเวท #/profile (23/10) — คลาสที่ profile.js ใช้แต่หน้าทำเนียบไม่เคยใช้ ────────────────── */
/* เส้นคั่นแถวในการ์ด (ชื่อ/ตำแหน่ง/ทีม · แถวตู้ไอเทม) — slate-100 เดิมเกือบขาว = เส้นแสบตาบนพื้นมืด */
html.realm .border-slate-100 {
  border-color: rgba(242, 196, 90, 0.14);
}
/* ตั๋วแลกน้ำ (openWaterTicket) — จอที่ "โชว์ต่อพี่นาเพื่อรับน้ำดื่มจริง" ต้องอ่านชัดที่สุดในแอป
   ฟ้าเข้มของแอปงาน (sky-800/700/600) บนกล่องกระจกฟ้าบนแผ่นมืด = อ่านไม่ออก → ฟ้าอ่อนสว่าง
   ทุกตัว ≥ 6.8:1 บนพื้นจริง (ตรวจใน test_realm.mjs) — ไล่ความสว่างตามลำดับความสำคัญเดิม */
html.realm .text-sky-800 {
  color: #e0f2fe;
}
html.realm .text-sky-700 {
  color: #bae6fd;
}
html.realm .text-sky-600 {
  color: #a5d8ff;
}
html.realm .border-sky-200 {
  border-color: rgba(140, 200, 255, 0.45);
}
/* แท็บ ตู้ไอเทม | ธาตุ — แท็บที่เลือก = ทองโปร่ง + ขอบทอง + ตัวโคมไฟ (ไม่ใช่อัญมณี: ปุ่มหลักของจอ
   คือปุ่มเช็คอิน/ปุ่มสุ่มเท่านั้น) · (0,4,1) ชนะ .bg-slate-100/.text-slate-800 ที่ JS ติดให้แท็บที่เลือก */
html.realm [data-pf-tabs] [role='tab'][aria-selected='true'] {
  background-color: rgba(242, 196, 90, 0.16);
  color: var(--rl-lantern);
  box-shadow: inset 0 0 0 1px rgba(242, 196, 90, 0.55);
}
/* การ์ดคว่ำ 3 ใบตอนสุ่มรางวัล (openLootReveal) — เดิมไล่สีขาวเทา = ก้อนขาวโพลนบนแผ่นมืด
   → กระจกครามไล่สี + ขอบทอง + "?" สีโคมไฟ · (0,2,1) ชนะ .lt-card (0,1,0) ใน <style> ของ modal
   background-color = สีที่สว่างกว่าของไล่สี (ใช้เป็นพื้นที่แย่ที่สุดตอนตรวจ contrast) */
html.realm .lt-card {
  background-color: #3a3878;
  background-image: linear-gradient(150deg, #3a3878, #2b2a5c);
  border-color: rgba(242, 196, 90, 0.45);
  color: var(--rl-lantern);
}

/* ── เมนู "อื่นๆ" (เปิดจากแถบล่างตอนอยู่ในอีกมิติ) ───────────────────────────────────────── */
html.realm .hover\:bg-slate-50:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ── ช่องกรอก (เผื่อ textPrompt/ฟอร์มใน modal) ──────────────────────────────────────────── */
html.realm input:not([type='checkbox']):not([type='radio']),
html.realm textarea,
html.realm select {
  background-color: var(--rl-ink);
  color: var(--rl-text);
}
html.realm ::placeholder {
  color: var(--rl-muted);
}

/* ── แผ่นวิธีเล่น (howto.js — รอบนี้ห้ามแก้ไฟล์นั้น จึงปรับจากฝั่ง CSS ล้วน) ───────────────────
   !important จำเป็น 2 จุด: howto.js เขียนขอบการ์ด/จุดบอกขั้นเป็น inline style (สีอ่อน/teal ของแอปงาน)
   ซึ่ง selector ใดๆ ก็ชนะ inline ไม่ได้ถ้าไม่มี !important */
html.realm [data-howto-page] > div {
  border-color: rgba(242, 196, 90, 0.3) !important;
}
html.realm [data-howto-dots] > span[style*='0f766e'] {
  background: var(--rl-gold) !important;
}

/* ── ลดการเคลื่อนไหว: ฉากนิ่งสนิท ไม่มีประตูมิติ ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.realm body::before,
  html.realm body::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
  html.realm.realm-enter #root::before,
  html.realm.realm-enter #root::after {
    content: none;
    animation: none;
  }
}