/* =====================================================================
   IRON VALHALLA — Wood UI v2 "แสง เงา และกระจก" (โหลดสุดท้าย หลัง theme4.css • เป็น skin ล้วน ไม่แตะ DOM/ตรรกะ)
   วัสดุเรนเดอร์จริงใน Blender: tools/uiwood3d.py → assets/ui3d_*.webp (2× • 9-slice ผ่าน border-image)
   แสงหลักเดียวทั้งชุด = อุ่นจาก "ซ้ายบน" → เงาตกไปทางขวาล่างเสมอ (กรอบ/ป้าย/ปุ่ม/ช่อง)
   1) ตัวแปร + พื้นหลังที่เจ้าของเปลี่ยนเองได้   2) หน้าต่าง: กรอบไม้ทึบ + แถบหัวกระจกควัน + กระดาษมีแสงตกกลาง
   3) ป้ายหัว / แท็บ / ปุ่ม / ปุ่มปิด   4) ช่องเก็บของ / จาน / ซุ้มโชว์ไอเทม   5) HUD กระจกอำพันในกรอบไม้-ทองเหลือง
   6) ประกายกวาด + ประหยัดเครื่อง (body.fx-low / prefers-reduced-motion) + จอเล็ก
   งบประสิทธิภาพ: ไม่มี JS • แอนิเมชันเฉพาะ hover/ของหายาก (transform/opacity) • blur เฉพาะแผง HUD/หัวหน้าต่าง (ปิดใน fx-low)
   กระจก (backdrop-filter) ใส่บน ::before/::after เท่านั้น — ตัวแผงเองมีลูก position:fixed (ปุ่มลัดโหมดจอสัมผัส) ห้ามมี filter
   ===================================================================== */

/* ======================= 1) ตัวแปร ======================= */
/* ภาพพื้นหลังที่เจ้าของวาดเอง (ChatGPT) — วางไฟล์ใน assets/ แล้วแก้ค่าบรรทัดนั้นใน :root ด้านล่าง (ไม่ต้องแก้ที่อื่น):
   --ui-bg-parchment:   url("../assets/ui_bg_parchment.webp") 0 0 / 512px 512px      หน้ากระดาษในหน้าต่าง (ไทล์ต่อกันได้)
   --ui-bg-leather:     url("../assets/ui_bg_leather.webp") center / cover            ปกสมุด: กระเป๋า/อุปกรณ์/ร้าน/คลัง/ตีบวก
   --ui-bg-wood:        url("../assets/ui_bg_wood.webp") 0 0 / 512px 256px            ไม้ (แผง HUD ทึบ / ป้ายเงิน / ประกาศ)
   --ui-bg-dialog:      url("../assets/ui_bg_dialog.webp") center / cover             กล่องคุย NPC
   --ui-bg-equip-stage: url("../assets/ui_bg_equip_stage.webp") center / cover        เวทีตัวละครในหน้าต่างอุปกรณ์
   --ui-bg-tree:        url("../assets/ui_bg_tree.webp") center / cover               หน้าต่าง Passive (ต้นไม้)
   --ui-bg-runes:       url("../assets/ui_bg_runes.webp") center / cover              หน้าต่าง Runes (ปก)
   ค่า "linear-gradient(transparent, transparent)" = ชั้นว่าง (ใช้ค่าเดิมของวัสดุ) */
:root {
  --ui-bg-parchment: url("../assets/ui3d_paper.webp") 0 0 / 256px 256px;
  --ui-bg-leather: linear-gradient(transparent, transparent);
  --ui-bg-wood: url("../assets/ui3d_wood.webp") 0 0 / 256px 128px;
  --ui-bg-dialog: var(--ui-bg-parchment);
  --ui-bg-equip-stage: linear-gradient(transparent, transparent);
  --ui-bg-tree: linear-gradient(transparent, transparent);
  --ui-bg-runes: linear-gradient(transparent, transparent);

  /* ภาพเรนเดอร์ (ui3d) */
  --u3-frame: url("../assets/ui3d_frame.webp");
  --u3-hud: url("../assets/ui3d_hud.webp");
  --u3-plaque: url("../assets/ui3d_plaque.webp");
  --u3-tab: url("../assets/ui3d_tab.webp");
  --u3-tab-on: url("../assets/ui3d_tab_on.webp");
  --u3-btn: url("../assets/ui3d_btn.webp");
  --u3-gold: url("../assets/ui3d_btn_gold.webp");
  --u3-close: url("../assets/ui3d_close.webp");
  --u3-slot: url("../assets/ui3d_slot.webp");
  --u3-ring: url("../assets/ui3d_ring.webp");
  --u3-niche: url("../assets/ui3d_niche.webp");

  /* แสง/เงา: แหล่งแสงซ้ายบน → เงาไปขวาล่าง */
  --l5-drop: 18px 28px 46px -12px rgba(6, 3, 0, 0.78), 6px 10px 16px -6px rgba(6, 3, 0, 0.6), 0 0 0 1px rgba(10, 5, 0, 0.35);
  --l5-contact: drop-shadow(1px 2px 1.5px rgba(36, 18, 2, 0.5));
  --l5-pool: radial-gradient(85% 75% at 34% 16%, rgba(255, 247, 222, 0.85), rgba(255, 240, 205, 0.35) 38%, rgba(255, 240, 205, 0) 66%);
  --l5-vignette: radial-gradient(125% 115% at 40% 30%, rgba(80, 44, 12, 0) 50%, rgba(92, 52, 14, 0.22) 78%, rgba(70, 36, 8, 0.5) 100%);
  /* กระจกควันอำพัน */
  --g5-tint: linear-gradient(155deg, rgba(255, 222, 160, 0.17) 0%, rgba(255, 222, 160, 0.04) 34%, rgba(255, 222, 160, 0) 55%),
    linear-gradient(180deg, rgba(46, 27, 12, 0.56), rgba(22, 12, 4, 0.7));
  --g5-tint-solid: linear-gradient(155deg, rgba(255, 222, 160, 0.12), rgba(255, 222, 160, 0) 50%), linear-gradient(180deg, rgba(48, 29, 13, 0.94), rgba(24, 13, 5, 0.96));
  --g5-filter: blur(7px) saturate(1.45) brightness(0.92);
  /* แผง HUD: กระจกใสกว่า (เห็นโลกเกมชัด) — ตัวอักษรอ่านได้ด้วยเงาตัวอักษร */
  --g5-hud: linear-gradient(155deg, rgba(255, 226, 170, 0.2) 0%, rgba(255, 226, 170, 0.05) 30%, rgba(255, 226, 170, 0) 50%),
    linear-gradient(180deg, rgba(40, 22, 8, 0.2), rgba(20, 10, 3, 0.34));
  --g5-hud-filter: blur(5px) saturate(1.6) brightness(0.94) contrast(0.92);
  --g5-edge: inset 1px 1px 0 rgba(255, 238, 200, 0.34), inset -1px -1px 0 rgba(0, 0, 0, 0.45), inset 0 10px 18px -12px rgba(255, 230, 180, 0.32), inset 0 -14px 20px -14px rgba(0, 0, 0, 0.55);
  /* ไม้เข้ม (theme3 ใช้ตัวแปรนี้กับป้ายเงิน/ประกาศ/ป้ายอาชีพ) */
  --iv-wood-bg: linear-gradient(180deg, rgba(70, 42, 18, 0.18), rgba(0, 0, 0, 0.32)), var(--ui-bg-wood);
  --t5-title-h: 54px;
}

/* ======================= 2) หน้าต่าง ======================= */
/* ตัวหน้าต่างโปร่ง: ชั้นพื้นผิวอยู่ใน ::before (ใต้เนื้อหา) • กรอบไม้แกะ+มุมทองเหลืองอยู่ใน ::after (บนเนื้อหา → เงาของกรอบตกลงบนกระดาษจริง) */
body.visor .win:not(.gc-art), body.visor .win.book-win, body.visor #w-equip.win.book-win {
  border: 6px solid transparent; border-radius: 0; outline: none; overflow: clip; overflow-clip-margin: 18px;
  background: none; box-shadow: var(--l5-drop); }
body.visor .win:not(.gc-art)::before, body.visor #w-equip.win::before {
  content: ""; display: block; position: absolute; z-index: -1; inset: var(--t5-title-h) 0 0 0; border-radius: 0; pointer-events: none; opacity: 1;
  background: var(--l5-pool), var(--l5-vignette), var(--ui-bg-parchment), #efe0bd; }
body.visor .win:not(.gc-art)::after, body.visor #w-equip.win::after {
  content: ""; display: block; position: absolute; z-index: 6; inset: -10px; pointer-events: none;
  border: 48px solid transparent; border-image: var(--u3-frame) 96 / 48px / 0 round; }
body.visor .win:not(.gc-art):not(:has(> .win-title))::before { inset: 0; }   /* หน้าต่างไม่มีแถบหัว: กระดาษเต็มบาน */
/* แถบหัว = กระจกควัน (มองเห็นโลกเกมเบลอ ๆ) */
body.visor .win:not(.gc-art) .win-title {
  height: var(--t5-title-h); min-height: var(--t5-title-h); box-sizing: border-box; border-bottom: 0; padding: 4px 14px 4px 16px;
  background: var(--g5-tint); -webkit-backdrop-filter: var(--g5-filter); backdrop-filter: var(--g5-filter);
  box-shadow: inset 0 1px 0 rgba(255, 238, 200, 0.22), inset 0 -1px 0 rgba(255, 220, 150, 0.28), 0 1px 0 rgba(30, 14, 2, 0.6), 0 6px 10px -4px rgba(30, 14, 2, 0.45); }
body.visor .win:not(.gc-art):not(.book-win) .win-title::after { content: none; }
/* สมุด (กระเป๋า/อุปกรณ์/ร้าน/คลัง): ปกด้านล่างแถบหัว = กระจกควันเข้ม (หรือภาพหนังของเจ้าของ) • หน้ากระดาษมีแสงตกกลาง */
body.visor .win.book-win::before, body.visor #w-equip.win.book-win::before {
  background: var(--ui-bg-leather), radial-gradient(70% 60% at 50% 30%, rgba(150, 90, 40, 0.18), rgba(150, 90, 40, 0) 70%), var(--g5-tint);
  -webkit-backdrop-filter: var(--g5-filter); backdrop-filter: var(--g5-filter); }
body.visor #w-runes.win::before { background: var(--ui-bg-runes), var(--l5-pool), var(--l5-vignette), var(--ui-bg-parchment), #efe0bd; }
body.visor #w-runes.win.book-win::before { background: var(--ui-bg-runes), radial-gradient(70% 60% at 50% 30%, rgba(150, 90, 40, 0.18), rgba(150, 90, 40, 0) 70%), var(--g5-tint); }
body.visor #w-tree.win::before { background: var(--ui-bg-tree), var(--l5-pool), var(--l5-vignette), var(--ui-bg-parchment), #efe0bd; }
body.visor #w-dialog.win::before { background: var(--l5-pool), var(--l5-vignette), var(--ui-bg-dialog), #efe0bd; }
.book-page { background: var(--l5-pool), var(--l5-vignette), var(--ui-bg-parchment), #efe0bd; }
.book-l { box-shadow: inset -22px 0 22px -18px rgba(90, 55, 20, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 4px 6px 12px -4px rgba(0, 0, 0, 0.55); }
.book-r { box-shadow: inset 22px 0 22px -18px rgba(90, 55, 20, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 4px 6px 12px -4px rgba(0, 0, 0, 0.55); }
.det-acts { background: linear-gradient(180deg, rgba(236, 220, 186, 0), #ead9b4 34%); }
body.visor #w-equip .eq-stage { background: var(--ui-bg-equip-stage),
    radial-gradient(closest-side at 50% 84%, rgba(255, 214, 130, 0.55), rgba(255, 214, 130, 0) 100%) padding-box,
    radial-gradient(80% 60% at 40% 15%, rgba(255, 246, 220, 0.75), rgba(255, 246, 220, 0) 70%) padding-box,
    var(--ui-bg-parchment) padding-box, linear-gradient(180deg, #f3e3c0, #dcc08a) padding-box, var(--m-gold-d) border-box; }

/* ======================= 3) ป้ายหัว / แท็บ / ปุ่ม ======================= */
/* ป้ายหัวหน้าต่าง: แผ่นไม้เข้ม ฝาทองเหลืองสองข้าง (9-slice แนวนอน) + เงาสัมผัส */
body.visor .win:not(.gc-art) .win-title span, body.visor .win.book-win .win-title span, body.visor #w-equip .win-title span {
  height: 40px; padding: 0 10px 0 6px; border-radius: 0; box-shadow: none;
  border: solid transparent; border-width: 0 16px; border-image: var(--u3-plaque) 0 88 fill / 0 40px / 0 round;
  background: none; color: #ffe6a8; filter: var(--l5-contact);
  text-shadow: 0 -1px 0 rgba(20, 9, 1, 0.95), 0 1px 0 rgba(255, 215, 140, 0.16), 0 0 12px rgba(255, 190, 90, 0.35); }
body.visor .win:not(.gc-art) .win-title span::after { content: none; }
body.visor .win:not(.gc-art) .win-title span::before, body.visor #w-equip .win-title span::before {
  background: linear-gradient(160deg, #fff6d6, #f2c96c 45%, #c98d2a); filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.55)); }

/* แท็บ: แผ่นกระดาษอัดขอบบรอนซ์ • เลือกอยู่ = ทองเหลืองขัดเงา (ตัดมุม ไม่มีแคปซูล) */
body.visor .win:not(.gc-art) :is(.tab, .pill), body.visor .win:not(.gc-art) .seg button, body.visor .win .rb-tabs .rb-tab {
  clip-path: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  border-style: solid !important; border-color: transparent !important; border-width: 0 !important;
  border-image: var(--u3-tab) 24 fill / 12px / 0 stretch !important; color: #5a3a16; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); filter: var(--l5-contact); }
body.visor .win:not(.gc-art) :is(.tab, .pill)::before, body.visor .win:not(.gc-art) .seg button::before, .qt-tab::before { content: none !important; }
body.visor .win:not(.gc-art) :is(.tab, .pill):hover, body.visor .win:not(.gc-art) .seg button:hover { filter: var(--l5-contact) brightness(1.06); color: #3a2208; }
body.visor .win:not(.gc-art) :is(.tab, .pill).on, body.visor .win:not(.gc-art) .seg button.on, body.visor .win .rb-tabs .rb-tab.on {
  background: none !important; border-image-source: var(--u3-tab-on) !important; color: #3a2003; text-shadow: 0 1px 0 rgba(255, 246, 210, 0.75);
  filter: drop-shadow(1px 2px 1.5px rgba(36, 18, 2, 0.5)) drop-shadow(0 0 6px rgba(255, 196, 90, 0.35)); }
body.visor .win:not(.gc-art) :is(.tab, .pill) small, .rb-tab small { background: rgba(60, 35, 8, 0.16); }
/* แท็บในการ์ดเควสต์ (HUD กระจก): ไม้ / ทองเหลือง */
.qt-tab, body.visor .qt-tab { clip-path: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  border: 0 solid transparent !important; border-image: var(--u3-btn) 26 fill / 11px / 0 stretch !important; color: #f0dcb4 !important; filter: var(--l5-contact); }
.qt-tab.on, body.visor .qt-tab.on { background: none !important; border-image-source: var(--u3-gold) !important; color: #3a2003 !important; text-shadow: 0 1px 0 rgba(255, 246, 210, 0.7); }
body.visor .qt-tabs { background: rgba(10, 5, 1, 0.35); box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 220, 150, 0.12); border-radius: 0 !important; }

/* ปุ่มรอง = ไม้วอลนัทขอบทองเหลือง • ปุ่มหลัก = ทองเหลืองขัดเงา • กดแล้ว "จมลงในเงา" */
body.visor :where(.win, #slot-pick) .btn, body.visor .win .btn.big, body.visor .win .btn.small {
  border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--u3-btn) 26 fill / 13px / 0 stretch; color: #f6e2b8; text-shadow: 0 1px 1px rgba(10, 4, 0, 0.9);
  filter: drop-shadow(1px 3px 2px rgba(36, 18, 2, 0.5)); transition: transform 0.08s, filter 0.12s; }
body.visor :where(.win, #slot-pick) .btn:hover:not(:disabled), body.visor .win .btn.gp-sel {
  background: none; border-color: transparent; color: #fff3d6; box-shadow: none;
  filter: drop-shadow(1px 3px 2px rgba(36, 18, 2, 0.5)) drop-shadow(0 0 7px rgba(255, 190, 90, 0.45)) brightness(1.1); }
body.visor .win .btn.primary, body.visor .win .btn.big.primary, body.visor .win .dlg-btns .btn, body.visor .death-btns .btn.primary {
  border: 1px solid transparent; background: none; box-shadow: none; border-image: var(--u3-gold) 26 fill / 13px / 0 stretch;
  color: #3a2003; text-shadow: 0 1px 0 rgba(255, 246, 210, 0.8); }
body.visor .win .btn.primary:hover:not(:disabled), body.visor .win .dlg-btns .btn:hover, body.visor .death-btns .btn.primary:hover {
  background: none; border-color: transparent; box-shadow: none; color: #2a1601;
  filter: drop-shadow(1px 3px 2px rgba(36, 18, 2, 0.5)) drop-shadow(0 0 10px rgba(255, 200, 90, 0.6)) brightness(1.06); }
body.visor :where(.win, #slot-pick) .btn:active:not(:disabled), body.visor .win .btn.primary:active:not(:disabled), body.visor .win .dlg-btns .btn:active {
  transform: translateY(2px); box-shadow: none; filter: drop-shadow(0 0 1px rgba(36, 18, 2, 0.6)) brightness(0.8) contrast(1.05); }
body.visor .win .btn.danger:not(:disabled) { color: #ffb19a; }
body.visor .win .btn:disabled, body.visor .win .btn.primary:disabled, body.visor .win .btn.big:disabled {
  background: none; border-color: transparent; box-shadow: none; color: #d8c8a8; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  filter: grayscale(0.85) brightness(0.92) opacity(0.62); }
/* ประกายกวาด (เฉพาะชี้/เลือก) — ตัดตามกรอบปุ่ม */
body.visor :where(.win, #slot-pick, #death) .btn::after { inset: 2px; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 225, 0.55) 50%, rgba(255, 255, 255, 0) 62%); }

/* ตัวเลือกคุย NPC: แผ่นกระดาษอัดขอบบรอนซ์ */
body.visor .win .dlg-opt { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--u3-tab) 24 fill / 12px / 0 stretch; filter: var(--l5-contact); }
body.visor .win .dlg-opt:hover, body.visor .win .dlg-opt.gp-sel, body.visor .win .dlg-opt.kbd {
  background: none !important; border-color: transparent !important; box-shadow: none !important;
  filter: drop-shadow(1px 2px 1.5px rgba(36, 18, 2, 0.5)) drop-shadow(0 0 8px rgba(255, 190, 80, 0.55)) brightness(1.04); }

/* ปุ่มปิด: แผ่นแปดเหลี่ยมทองเหลือง กากบาทนูน (อยู่เหนือกรอบ) */
body.visor .win:not(.gc-art) .win-title > * { position: relative; z-index: 7; }
body.visor .win:not(.gc-art) .win-x, body.visor.pad-mode .win:not(.gc-art) .win-x, body.visor #w-equip .win-x {
  width: 36px; height: 36px; border: 0; border-radius: 0; box-shadow: none; color: transparent; text-shadow: none; font-size: 0;
  background: var(--u3-close) center / 100% 100% no-repeat; filter: drop-shadow(1px 2px 2px rgba(20, 9, 1, 0.6)); }
body.visor .win:not(.gc-art) .win-x:hover, body.visor #w-equip .win-x:hover { background: var(--u3-close) center / 100% 100% no-repeat; color: transparent; box-shadow: none;
  filter: drop-shadow(1px 2px 2px rgba(20, 9, 1, 0.6)) drop-shadow(0 0 7px rgba(255, 110, 50, 0.85)) brightness(1.12) saturate(1.2); }
body.visor .win:not(.gc-art) .win-x:active { transform: translateY(1px) scale(0.94); filter: brightness(0.8); }

/* ======================= 4) ช่องเก็บของ / จาน / ซุ้มโชว์ ======================= */
/* ถาดตาราง: ไม้เข้มเว้าลึก */
.igrid { border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)), var(--ui-bg-wood);
  box-shadow: inset 2px 3px 8px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 240, 200, 0.55), 1px 0 0 rgba(255, 240, 200, 0.3); }
/* ช่อง: ขอบบรอนซ์เว้า (เงาผนังด้านในจริงจากเรนเดอร์) • มีของ = พื้นอุ่นสว่างแสงจากบน • ว่าง = มืดลึก */
.islot { border: 2px solid transparent; border-radius: 0; border-image: var(--u3-slot) 24 fill / 12px / 0 stretch;
  background: radial-gradient(90% 80% at 42% 28%, #fff8e4 0%, #efdcb2 55%, #c8a46a 100%);
  box-shadow: 2px 3px 4px -1px rgba(0, 0, 0, 0.55); }
.islot.empty { border: 2px solid transparent; border-image: var(--u3-slot) 24 fill / 12px / 0 stretch;
  background: radial-gradient(80% 70% at 40% 30%, #3c2817, #1c1008 80%); box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.5); opacity: 0.92; }
/* ความหายาก: ขอบสีเรืองจากข้างใน + แสงซึมออกบนถาด */
.islot:is(.r-uncommon, .r-rare, .r-epic, .r-legend) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rr) 85%, transparent), inset 0 0 14px 1px var(--rg), 0 0 12px 1px var(--rg), 2px 3px 4px -1px rgba(0, 0, 0, 0.55); }
.islot:is(.r-uncommon, .r-rare, .r-epic, .r-legend) img { filter: drop-shadow(0 2px 2px rgba(60, 30, 5, 0.45)) drop-shadow(0 0 4px var(--rg)); }
.islot:not(.empty):hover { border-color: transparent; filter: brightness(1.08); }
.islot.sel { border-color: transparent;
  box-shadow: inset 0 0 0 2px #ffe08a, inset 0 0 14px 2px rgba(255, 200, 90, 0.8), 0 0 0 1px #6b410b, 0 0 14px 3px rgba(255, 196, 80, 0.8); }
.islot:focus-visible { box-shadow: inset 0 0 0 2px #fff3c8, 0 0 0 2px #7a4c10; }
/* จานไอเทม (แถวรายการ / ช่องอุปกรณ์): ช่องบรอนซ์เดียวกัน */
.plate:not(.big) { border: 2px solid transparent; border-radius: 0; border-image: var(--u3-slot) 24 fill / 11px / 0 stretch;
  background: radial-gradient(90% 80% at 42% 28%, #fff8e4 0%, #efdcb2 55%, #c8a46a 100%); box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.45); }
.plate:not(.big):is(.r-uncommon, .r-rare, .r-epic, .r-legend) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rr) 85%, transparent), inset 0 0 10px var(--rg), 0 0 9px var(--rg), 1px 2px 3px -1px rgba(0, 0, 0, 0.45); }
.plate.empty:not(.big) { border-image: var(--u3-slot) 24 fill / 11px / 0 stretch; background: radial-gradient(80% 70% at 40% 30%, #3c2817, #1c1008 80%); }

/* ซุ้มโชว์ไอเทม (ภาพใหญ่ในหน้าต่างรายละเอียด): กำมะหยี่มืด + สปอตไลต์จากบน + ขอบเรืองสีความหายาก + เงา/เงาสะท้อนบนพื้น */
.det-hero::before { left: calc(var(--s3) + 56px - 100px); width: 200px; height: 200px; margin-top: -100px; border-radius: 0; opacity: 1; animation: none;
  background: radial-gradient(closest-side, rgba(255, 196, 96, 0.55), rgba(255, 196, 96, 0.18) 55%, rgba(255, 196, 96, 0) 100%);
  -webkit-mask: none; mask: none; }
.det-hero:is(.r-uncommon, .r-rare, .r-epic, .r-legend)::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--rr) 75%, transparent), color-mix(in srgb, var(--rr) 26%, transparent) 55%, transparent 100%); opacity: 1; }
.det-hero:is(.r-epic, .r-legend)::before { animation: t5-breathe 3.2s ease-in-out infinite; }
.det-hero .plate.big { isolation: isolate; overflow: visible; border: 0; border-radius: 0; border-image: none;
  background: radial-gradient(60% 50% at 50% 16%, rgba(255, 226, 170, 0.28), rgba(255, 226, 170, 0) 70%), var(--u3-niche) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(20, 9, 1, 0.7), 0 0 0 3px color-mix(in srgb, var(--rr, #c9a46a) 75%, transparent), 0 0 18px 2px var(--rg, rgba(255, 210, 120, 0.4)),
    inset 0 0 16px -2px var(--rg, transparent), 6px 10px 16px -6px rgba(0, 0, 0, 0.6); }
.det-hero .plate.big img { width: 62%; height: 62%; margin-top: -6%; filter: drop-shadow(0 0 6px var(--rg, transparent)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
  -webkit-box-reflect: below 2px linear-gradient(transparent 58%, rgba(255, 255, 255, 0.22)); }
.det-hero .plate.big::after { content: ""; position: absolute; z-index: -1; left: 24%; right: 24%; bottom: 17%; height: 9%; top: auto; width: auto; transform: none; border-radius: 50%; box-shadow: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
@keyframes t5-breathe { 0%, 100% { opacity: 0.7; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* ======================= 5) HUD: กระจกอำพันในกรอบไม้-ทองเหลือง ======================= */
/* กรอบ 9-slice (โปร่งตรงกลาง) บนตัวแผง • กระจกเบลอโลกเกมอยู่ใน pseudo (z -1) ด้านใต้ข้อความ */
body.visor :is(#basic-info, #quest-track, #minimap:not(.folded), #menubar:not(.folded), #target, #chat:not(.folded)), body.visor:not(.pad-mode) #dock {
  border: 2px solid transparent !important; border-radius: 0 !important; background: none !important; isolation: isolate;
  border-image: var(--u3-hud) 48 / 24px / 3px round !important; box-shadow: 8px 14px 22px -10px rgba(5, 2, 0, 0.6) !important; }
body.visor :is(#basic-info, #quest-track, #target, #chat:not(.folded))::after, body.visor :is(#minimap:not(.folded), #menubar:not(.folded))::before, body.visor:not(.pad-mode) #dock::before {
  content: ""; display: block; position: absolute; z-index: -1; inset: 4px; left: 4px; right: 4px; top: 4px; bottom: 4px; width: auto; height: auto; pointer-events: none; opacity: 1;
  background: var(--g5-hud); -webkit-backdrop-filter: var(--g5-hud-filter); backdrop-filter: var(--g5-hud-filter); box-shadow: var(--g5-edge);
  -webkit-mask: none; mask: none; transform: none; }
body.visor #chat { background: none !important; }
body.visor #chat::after { background: linear-gradient(155deg, rgba(255, 222, 160, 0.12), rgba(255, 222, 160, 0) 50%), linear-gradient(180deg, rgba(30, 16, 6, 0.2), rgba(16, 8, 2, 0.34)); }
/* ตัวอักษรบนกระจกใส: เงาเข้มรอบตัว (อ่านได้บนพื้นสว่างของโลกเกม) */
body.visor :is(#basic-info, #quest-track, #menubar, #chat-log, #target, #minimap .mm-head, #minimap .mm-sub) { text-shadow: 0 0 2px rgba(10, 4, 0, 0.95), 0 1px 2px rgba(10, 4, 0, 0.9), 0 0 6px rgba(10, 4, 0, 0.55); }
body.visor #menubar button:not(.on) span { color: #f6e4bd; }
body.visor :is(#basic-info .pt, #quest-track .qt-tab.on, #menubar button.on) { text-shadow: 0 1px 0 rgba(255, 246, 210, 0.7); }
/* แถบมืดบน/ล่างจอบางลง → โลกเกมหลังกระจก HUD สว่างพอให้เห็นชัด */
body.visor #hud::before { background: linear-gradient(180deg, rgba(20, 12, 4, 0.16), rgba(20, 12, 4, 0)); }
body.visor #hud::after { background: linear-gradient(0deg, rgba(20, 12, 4, 0.2), rgba(20, 12, 4, 0)); }
body.visor #basic-info .xrow label, body.visor #basic-info .xrow > span { color: #e9d3a8; }
body.visor #chat-input { background: rgba(8, 4, 0, 0.45); border: 1px solid rgba(201, 154, 70, 0.45); color: #fff1d2; }
/* มินิแมพ: วงทองเหลืองเรนเดอร์ (ขีดองศา + อักษรทิศแกะ) แทนหน้าปัด SVG */
body.visor .mm-ring { box-shadow: 0 0 0 1px rgba(20, 9, 1, 0.8), 4px 7px 12px -3px rgba(0, 0, 0, 0.65); }
body.visor .mm-ring::after { inset: -7px; z-index: 2; border-radius: 50%; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.0); background: var(--u3-ring) center / 100% 100% no-repeat; }
body.visor .mm-ring::before { content: ""; position: absolute; inset: 4px; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(75% 60% at 35% 25%, rgba(255, 245, 220, 0.22), rgba(255, 245, 220, 0) 60%); box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.6), inset 3px 4px 8px rgba(0, 0, 0, 0.45); }
/* แถบลัด: ช่องบรอนซ์เว้าเดียวกับกระเป๋า */
body.visor:not(.pad-mode) #dock #hotbar .hb {
  border: 2px solid transparent; border-radius: 0; border-image: var(--u3-slot) 24 fill / 12px / 0 stretch;
  background: radial-gradient(80% 70% at 40% 30%, #4a3220, #1c1008 80%); box-shadow: 2px 3px 4px -1px rgba(0, 0, 0, 0.55); }
body.visor:not(.pad-mode) #dock #hotbar .hb.blank { border: 2px solid transparent; border-image: var(--u3-slot) 24 fill / 12px / 0 stretch; opacity: 0.85;
  background: radial-gradient(80% 70% at 40% 30%, rgba(48, 32, 18, 0.55), rgba(14, 8, 3, 0.72) 80%); }
body.visor:not(.pad-mode) #dock #hotbar .hb:hover { border-color: transparent; box-shadow: 0 0 12px 1px rgba(255, 200, 90, 0.7), 2px 3px 4px -1px rgba(0, 0, 0, 0.55); }
body.visor:not(.pad-mode) #dock #hotbar .hb.press, body.visor:not(.pad-mode) #dock #hotbar .hb:active { box-shadow: inset 0 0 12px rgba(255, 210, 120, 0.8), 0 0 16px rgba(255, 200, 90, 0.85); filter: brightness(0.9); }

/* เมนู: ปุ่มที่เปิดอยู่ = ป้ายทองเหลืองตัดมุม (ไม่มีมุมมน) */
body.visor #menubar button.on { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--u3-tab-on) 24 fill / 10px / 0 stretch; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(255, 196, 90, 0.4)); }
/* ช่องรูน (หน้าต่าง Runes): รูนที่ใส่อยู่เรืองจากข้างในหิน + แสงซึมออก */
.rb-sock.on .rb-stone { background: radial-gradient(circle at 50% 45%, rgba(255, 214, 140, 0.5), rgba(255, 170, 70, 0.12) 45%, #1a1916 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.55), inset 0 0 16px rgba(255, 190, 90, 0.55), 0 0 14px 1px rgba(255, 180, 70, 0.45); }
.rb-sock.on .rb-stone img { filter: drop-shadow(0 0 6px rgba(255, 200, 110, 0.75)); }

/* ======================= 6) ประกาย + ประหยัดเครื่อง + จอเล็ก ======================= */
/* ประกายกวาดช้า ๆ บนทองเหลืองของแท็บที่เลือก (ทุก ~6 วิ) — transform เท่านั้น */
body.visor .win:not(.gc-art) :is(.tab, .pill).on, body.visor .win .rb-tabs .rb-tab.on, body.visor .win .seg button.on { overflow: hidden; }
body.visor .win:not(.gc-art) :is(.tab, .pill).on::after, body.visor .win .rb-tabs .rb-tab.on::after, body.visor .win .seg button.on::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 252, 230, 0.6) 50%, rgba(255, 255, 255, 0) 65%);
  animation: t5-glint 6s ease-in-out 1s infinite; }
@keyframes t5-glint { 0%, 78% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
body.fx-low :is(.tab, .pill, .rb-tab, .seg button).on::after { animation: none !important; display: none; }
body.fx-low .det-hero::before { animation: none !important; }
body.fx-low :is(.win-title, .win::before, .win.book-win::before),
body.fx-low :is(#basic-info, #quest-track, #target, #chat:not(.folded))::after, body.fx-low :is(#minimap, #menubar)::before, body.fx-low #dock::before {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.fx-low :is(#basic-info, #quest-track, #target)::after, body.fx-low :is(#minimap, #menubar)::before, body.fx-low:not(.pad-mode) #dock::before,
body.fx-low .win:not(.gc-art) .win-title, body.fx-low .win.book-win::before { background: var(--g5-tint-solid) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.visor :is(#basic-info, #quest-track, #target)::after, body.visor :is(#minimap:not(.folded), #menubar:not(.folded))::before, body.visor:not(.pad-mode) #dock::before,
  body.visor .win:not(.gc-art) .win-title, body.visor .win.book-win::before { background: var(--g5-tint-solid); }
}
@media (prefers-reduced-motion: reduce) { .det-hero::before, :is(.tab, .pill, .rb-tab, .seg button).on::after { animation: none !important; } body.visor :where(.win, #slot-pick) .btn { transition: none; } }

@media (max-width: 760px), (max-height: 520px) {
  :root { --t5-title-h: 46px; }
  body.visor .win:not(.gc-art)::after, body.visor #w-equip.win::after { inset: -8px; border-width: 36px; border-image-width: 36px; }
  body.visor .win:not(.gc-art) .win-title span, body.visor .win.book-win .win-title span, body.visor #w-equip .win-title span { height: 34px; border-image-width: 0 34px; border-width: 0 13px; }
  body.visor .win:not(.gc-art) .win-x, body.visor.pad-mode .win:not(.gc-art) .win-x, body.visor #w-equip .win-x { width: 32px; height: 32px; }
  body.visor :is(#basic-info, #quest-track, #minimap:not(.folded), #menubar:not(.folded), #target, #chat:not(.folded)), body.visor:not(.pad-mode) #dock { border-image-width: 18px !important; }
}

/* ======================= 7) หน้ารายละเอียดแบบ MINIMAL (เจ้าของ: "ไม่ต้องแสดงรายละเอียดเยอะ เน้น visual") =======================
   js/ui.js UI.itemDetail: ซุ้มโชว์ใหญ่กลางหน้า → ชื่อ (สีความหายาก + อัญมณี) → ชิปค่าหลัก 1 แถว → เทียบ → บรรทัดแดงถ้าใช้ไม่ได้ → Details (พับ) → ปุ่ม */
.book-r { gap: var(--s2); }
.det-hero { justify-content: center; padding: var(--s2) 0 0; gap: 0; }
.det-hero::before { left: 50%; top: calc(50% + 4px); width: 250px; height: 220px; margin: -110px 0 0 -125px; }
.det-hero .plate.big { width: 164px; height: 164px; }
.det-hero .plate.big img { width: 58%; height: 58%; margin-top: -8%; }
.det-hero .plate.big .rf, .det-hero .plate.big .det-slots, .det-hero .plate.big .det-qty {
  position: absolute; z-index: 2; padding: 1px 6px; border-radius: 0 !important; font: 700 var(--fs-xs)/1.4 var(--f-disp); font-style: normal; letter-spacing: 0.02em;
  --ch: 4px; clip-path: var(--chamfer); box-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); }
.det-hero .plate.big .rf { right: 12px; top: 12px; bottom: auto; background: linear-gradient(180deg, #8a5a1c, #4a2c0c); color: #ffe39a; }
.det-hero .plate.big .det-slots { left: 12px; bottom: 12px; background: rgba(12, 6, 2, 0.78); color: color-mix(in srgb, var(--rr, #e8d6b0) 55%, #f3e3c0); }
.det-hero .plate.big .det-qty { right: 12px; bottom: 12px; background: rgba(12, 6, 2, 0.78); color: #fff1d2; }
#w-runes .det-hero .plate.big { width: 132px; height: 132px; }   /* Runes: ช่องรูนอยู่ด้านบนแล้ว → ซุ้มเล็กลงหน่อย */
#w-runes .det-hero::before { width: 210px; height: 180px; margin: -90px 0 0 -105px; }
.det-top { align-items: center; text-align: center; gap: 1px; }
.det-top .dname { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; font-size: var(--fs-l); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
.det-top small { font-size: var(--fs-xs); letter-spacing: 0.02em; }
/* อัญมณีความหายาก (แทนป้าย Common/Rare) */
.rgem { flex: none; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 1px;
  background: radial-gradient(circle at 32% 30%, #fff 0 14%, var(--rr, #cdb68a) 48%, color-mix(in srgb, var(--rr, #cdb68a) 55%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(60, 34, 8, 0.75), 0 0 6px var(--rg, transparent); }
.rgem.r-common { --rr: #b9a37a; }
.det-short { margin: 0; text-align: center; font: 600 var(--fs-s)/1.4 var(--f-body); color: #6a4416; }
/* ชิปค่าหลัก: ป้ายไม้เข้มตัดมุม */
.det-chips { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.dchip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px 4px; --ch: 5px; clip-path: var(--chamfer);
  background: linear-gradient(180deg, rgba(255, 230, 170, 0.12), rgba(0, 0, 0, 0.18)), var(--ui-bg-wood), #3a2410; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.25); }
body.visor .win .dchip i { font: 600 var(--fs-2xs)/1 var(--f-disp); font-style: normal; letter-spacing: 0.06em; color: #d9b878; text-transform: uppercase; }
body.visor .win .dchip b { font: 700 var(--fs-s)/1 var(--f-disp); color: #fff1d2; }
/* เทียบของที่สวม: แถวชิปบรรทัดเดียวตรงกลาง */
.book-r .cmp-row.compact { justify-content: center; border-top: 0; padding: 0; }
.book-r .cmp-row.compact .cmp-h { justify-content: center; }
.book-r .cmp-row.compact:has(.cmp-v.eq) { display: none; }   /* ไม่มีค่าเปลี่ยน = ไม่ต้องโชว์ */
/* ใช้ไม่ได้: บรรทัดแดงสั้น ๆ */
.det-warn { flex: none; text-align: center; font: 700 var(--fs-xs)/1.35 var(--f-body); color: #b0281a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.det-warn::before { content: "⚠ "; }
/* Details (พับไว้) */
.det-more { flex: none; display: flex; flex-direction: column; gap: var(--s2); }
.det-more > summary { align-self: center; list-style: none; cursor: pointer; padding: 3px 12px; font: 600 var(--fs-xs)/1.4 var(--f-body); letter-spacing: 0.04em; color: #7a5022;
  border-top: 1px solid rgba(150, 105, 45, 0.3); border-bottom: 1px solid rgba(150, 105, 45, 0.3); -webkit-user-select: none; user-select: none; }
.det-more > summary::-webkit-details-marker { display: none; }
.det-more > summary::after { content: " ▾"; }
.det-more[open] > summary::after { content: " ▴"; }
.det-more > summary:hover { color: #4a2c0c; background: rgba(255, 230, 170, 0.35); }
.det-more > :not(summary) { margin: 0; }
/* ราคาในร้าน / ฝากคลัง: แถวเดียวกะทัดรัด (ไม่มีหัวกล่อง • "You have" แสดงเฉพาะเงินไม่พอ) */
.book-r .pricebox { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--s3); padding: var(--s1) var(--s2); background: rgba(255, 248, 230, 0.55); }
.book-r .pricebox .dsec-h { display: none; }
.book-r .pricebox .kv { min-height: 30px; padding: 0; gap: 6px; border: 0; background: none; }
.book-r .pricebox .kv span { font-size: var(--fs-xs); }
.book-r .pricebox .kv.ok:last-child { display: none; }
.book-r .pricebox .kv.total { background: none; }
/* Runes: การ์ด Skill Rune ที่ไม่ได้เลือก = คำอธิบาย 1 บรรทัด (เลือกแล้ว = เต็ม) • ไม่มีแถบวิธีใช้ใต้การ์ด */
.rb-card:not(.sel) .rb-card-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rb-cards ~ .det-note:not(.rb-lock-note):not(.rb-busy) { display: none; }
.rb-card { row-gap: 2px; }
/* การ์ดไอเทมตอนชี้เมาส์: กระชับ — ไม่แสดงคำบรรยาย/แหล่งดรอป (ยังอยู่ใน Details ของหน้าต่าง) */
#item-tip .tip-desc:not(.rn-tip), #item-tip .tip-src { display: none; }

@media (max-width: 760px), (max-height: 520px) {
  .det-hero .plate.big { width: 132px; height: 132px; }
  .det-hero::before { width: 210px; height: 180px; margin: -90px 0 0 -105px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .det-hero { padding-top: 0; }
  .det-hero .plate.big { width: 104px; height: 104px; }
  .det-hero::before { width: 170px; height: 140px; margin: -70px 0 0 -85px; }
  .det-hero .plate.big :is(.rf, .det-slots, .det-qty) { font-size: 10px; padding: 0 4px; }
  .det-hero .plate.big .rf { right: 7px; top: 7px; } .det-hero .plate.big .det-slots { left: 7px; bottom: 7px; } .det-hero .plate.big .det-qty { right: 7px; bottom: 7px; }
  /* Runes บนจอเตี้ย: เบ้ารูนกะทัดรัด (ไม่มีบรรทัดรอง) ให้ภาพรูนเห็นเต็มเหนือปุ่ม */
  #w-runes .rb-socks { padding-top: 16px; padding-bottom: 8px; }
  #w-runes .rb-stone.rb-ic { --s: 48px; }
  #w-runes .rb-sock-t small { display: none; }
  #w-runes .det-hero .plate.big { width: 92px; height: 92px; }
  #w-runes .det-hero::before { width: 150px; height: 120px; margin: -60px 0 0 -75px; }
}