/* =====================================================================
   IRON VALHALLA — ปุ่มแบบ A "แผ่นทองมุมมน" (โหลดสุดท้าย หลัง theme6.css • skin ล้วน ไม่แตะตรรกะ)
   เจ้าของ 2026-10-03: "ไม่เอาปุ่มเหลี่ยมแบบนี้ เอาอย่างอื่น" → เลือกแบบ A (ปุ่ม MMO คลาสสิก มุมมน ~7px — ไม่ใช่แคปซูล)
   + "ปราณีต": เส้นทองเหลืองบาง 1px • เงาซ้อนนุ่มแทนขอบดำ • ระยะ 4/8px • ชุดตัวอักษรเดียว
   ยกเลิกรูปทรงเดิม: --chamfer / --plaque (theme4) • 9-slice ui3d_btn/btn_gold/tab/tab_on/close (theme5) บนทุกปุ่ม/แท็บ
   สถานะ: เลือก/หลัก = ทอง A • ไม่เลือก/รอง = ครีม A • อันตราย = ครีม + ตัวอักษรแดงเข้ม • ใช้ไม่ได้ = ครีมหม่น
   ชี้ = สว่างขึ้นนิด + แสงทองนุ่ม • กด = จมลง 1px + ขอบล่างเข้มขึ้น • ประกายกวาด (theme3/5/6) ยังทำงาน ตัดตามมุมมน
   1) ตัวแปร  2) ปุ่ม  3) แท็บ / ตัวกรอง / ตัวเลือกแบบแบ่งช่อง  4) ปุ่มเฉพาะที่ (ปุ่มปิด / HUD / คุย NPC / บอท)
   5) หน้าต่าง Runes (การ์ดรูน / แผ่นรูน / เบ้า)  6) ขนาดหน้าต่างไม่ทับแถบลัด  7) จอเล็ก  8) ประหยัดเครื่อง
   ===================================================================== */
:root {
  --a-r: 7px;                       /* มุมมนของปุ่ม (ไม่ใช่แคปซูล) */
  --a-r-s: 5px;                     /* ปุ่มเล็ก/ป้ายเล็ก */
  --a-ink: #3a2003;                 /* ตัวอักษรบนทอง */
  --a-ink-2: #5a3a16;               /* ตัวอักษรบนครีม */
  --a-ink-bad: #8e2010;             /* อันตราย */
  --a-gold: linear-gradient(180deg, #fff0b8 0%, #f2c35a 45%, #d99a2e 55%, #b87a1c 100%);
  --a-gold-hi: linear-gradient(180deg, #fff6cf 0%, #f7cf6c 45%, #e2a63a 55%, #c48526 100%);
  --a-gold-sh: inset 0 1px 0 #fff8d8, inset 0 -2px 0 rgba(110, 60, 5, 0.5), 0 0 0 1px #6b410b, 0 2px 0 #4a2a06, 0 3px 6px rgba(0, 0, 0, 0.35);
  --a-cream: linear-gradient(180deg, #fbf1d8 0%, #e9d4a6 100%);
  --a-cream-hi: linear-gradient(180deg, #fffaec 0%, #f1e0b8 100%);
  --a-cream-sh: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(140, 100, 45, 0.18), 0 0 0 1px #8a6232, 0 2px 0 #6b4a22, 0 3px 5px rgba(40, 20, 4, 0.22);
  --a-glow: 0 0 0 3px rgba(255, 210, 110, 0.22), 0 0 12px rgba(255, 196, 80, 0.55);
  --a-press-gold: inset 0 2px 3px rgba(110, 60, 5, 0.45), inset 0 -1px 0 rgba(255, 240, 200, 0.35), 0 0 0 1px #5a3507, 0 1px 0 #2e1903;
  --a-press-cream: inset 0 2px 3px rgba(120, 80, 30, 0.3), 0 0 0 1px #7a5428, 0 1px 0 #4a3216;
  --a-off: linear-gradient(180deg, #efe7d6 0%, #ddd1b8 100%);
  --a-off-sh: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px #b7a582, 0 1px 0 #a08c68;
  --a-red: linear-gradient(180deg, #f6cdbd 0%, #e39a82 48%, #c86a50 52%, #a84a33 100%);
  --a-red-sh: inset 0 1px 0 #ffe9e0, inset 0 -2px 0 rgba(90, 20, 8, 0.45), 0 0 0 1px #6b2112, 0 2px 0 #44130a, 0 3px 6px rgba(0, 0, 0, 0.35);
  /* เส้นทองเหลืองบาง (การ์ด/แผ่น) */
  --a-brass: #b48a4a;
  --a-card: linear-gradient(180deg, #fffaf0 0%, #f6ead0 100%);
  --a-card-sh: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -10px 18px -14px rgba(120, 80, 30, 0.35), 0 0 0 1px var(--a-brass), 0 2px 4px -1px rgba(60, 35, 10, 0.22), 0 6px 12px -8px rgba(60, 35, 10, 0.3);
}

/* ======================= 2) ปุ่ม ======================= */
/* รอง (ครีม A) — ไม่ใช้ :is(#id) เพราะจะได้ความเจาะจงระดับ ID ไปทับปุ่มหลัก */
body.visor .win .btn, body.visor .win .btn.big, body.visor .win .btn.small, body.visor .book-back, body.visor #death .btn, body.visor #slot-pick .btn {
  clip-path: none; border: 1px solid transparent; border-image: none; border-radius: var(--a-r) !important;
  background: var(--a-cream); color: var(--a-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: var(--a-cream-sh); filter: none;
  transition: transform 90ms ease-out, filter 120ms, box-shadow 120ms; }
body.visor .win .btn:hover:not(:disabled), body.visor .win .btn.gp-sel, body.visor .book-back:hover, body.visor #death .btn:hover, body.visor #slot-pick .btn:hover:not(:disabled) {
  background: var(--a-cream-hi); color: #3a2208; border-color: transparent; box-shadow: var(--a-cream-sh), var(--a-glow); filter: none; }
body.visor .win .btn:active:not(:disabled), body.visor .book-back:active, body.visor #death .btn:active, body.visor #slot-pick .btn:active:not(:disabled) {
  transform: translateY(1px); box-shadow: var(--a-press-cream); filter: brightness(0.97); }
/* หลัก (ทอง A) */
body.visor .win .btn.primary, body.visor .win .btn.big.primary, body.visor .win .dlg-btns .btn, body.visor #death .btn.primary, body.visor #slot-pick .btn.primary,
body.visor .win .bw-hero .bot-toggle:not(.on) {
  border: 1px solid transparent; border-image: none; background: var(--a-gold); color: var(--a-ink); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); box-shadow: var(--a-gold-sh); filter: none; }
body.visor .win .btn.primary:hover:not(:disabled), body.visor .win .dlg-btns .btn:hover, body.visor #death .btn.primary:hover, body.visor #slot-pick .btn.primary:hover:not(:disabled),
body.visor .win .bw-hero .bot-toggle:not(.on):hover, body.visor .win .btn.primary.gp-sel {
  background: var(--a-gold-hi); color: #2a1601; box-shadow: var(--a-gold-sh), var(--a-glow); filter: none; }
body.visor .win .btn.primary:active:not(:disabled), body.visor .win .dlg-btns .btn:active, body.visor #death .btn.primary:active, body.visor #slot-pick .btn.primary:active:not(:disabled),
body.visor .win .bw-hero .bot-toggle:not(.on):active {
  transform: translateY(1px); background: var(--a-gold); box-shadow: var(--a-press-gold); filter: brightness(0.96); }
/* อันตราย: ครีม + ตัวอักษรแดงเข้ม • หยุดบอท = แดงหม่นตระกูลเดียวกัน */
body.visor .win .btn.danger:not(:disabled) { color: var(--a-ink-bad); }
body.visor .win .btn.danger:not(:disabled):hover { color: #6e1406; box-shadow: var(--a-cream-sh), 0 0 0 3px rgba(200, 80, 50, 0.16), 0 0 10px rgba(200, 80, 50, 0.4); }
body.visor .win .bw-hero .bot-toggle.on, body.visor .win .bot-toggle.on { border: 1px solid transparent !important; background: var(--a-red) !important; color: #fff6f0 !important;
  text-shadow: 0 1px 0 rgba(60, 10, 2, 0.6); box-shadow: var(--a-red-sh) !important; }
/* ใช้ไม่ได้: ครีมหม่น (ไม่จางจนอ่านไม่ออก) */
body.visor .win .btn:disabled, body.visor .win .btn.primary:disabled, body.visor .win .btn.big:disabled, body.visor .win .btn.big.primary:disabled, body.visor #slot-pick .btn:disabled {
  background: var(--a-off); color: #9a8a6c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: var(--a-off-sh); filter: none; transform: none; cursor: default; }
/* ประกายกวาดตอนชี้: ตัดตามมุมมน */
body.visor :where(.win, #slot-pick, #death) .btn::after { inset: 0; border-radius: inherit; }
body.visor .win .btn:focus-visible { outline: none; box-shadow: var(--a-cream-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }
body.visor .win .btn.primary:focus-visible { box-shadow: var(--a-gold-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }

/* ======================= 3) แท็บ / ตัวกรอง / ตัวเลือกแบ่งช่อง ======================= */
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: 0 !important; border-image: none !important; border-radius: var(--a-r) !important;
  background: var(--a-cream) !important; box-shadow: var(--a-cream-sh) !important; filter: none;
  color: var(--a-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); padding-left: 12px; padding-right: 12px;
  transition: transform 90ms ease-out, box-shadow 120ms, filter 120ms; }
body.visor .win:not(.gc-art) :is(.tab, .pill):hover:not(.on), body.visor .win:not(.gc-art) .seg button:hover:not(.on), body.visor .win .rb-tabs .rb-tab:hover:not(.on) {
  background: var(--a-cream-hi) !important; box-shadow: var(--a-cream-sh), var(--a-glow) !important; filter: none; 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: var(--a-gold) !important; box-shadow: var(--a-gold-sh) !important; color: var(--a-ink); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); filter: none; }
body.visor .win:not(.gc-art) :is(.tab, .pill):active, body.visor .win:not(.gc-art) .seg button:active, body.visor .win .rb-tabs .rb-tab:active { transform: translateY(1px); }
body.visor .win:not(.gc-art) :is(.tab, .pill):not(.on):active, body.visor .win:not(.gc-art) .seg button:not(.on):active, body.visor .win .rb-tabs .rb-tab:not(.on):active { box-shadow: var(--a-press-cream) !important; }
body.visor .win:not(.gc-art) :is(.tab, .pill).on:active, body.visor .win:not(.gc-art) .seg button.on:active, body.visor .win .rb-tabs .rb-tab.on:active { box-shadow: var(--a-press-gold) !important; }
body.visor .win:not(.gc-art) :is(.tab, .pill):focus-visible, body.visor .win:not(.gc-art) .seg button:focus-visible, body.visor .win .rb-tabs .rb-tab:focus-visible {
  outline: 2px solid #fff3c8; outline-offset: 1px; }
/* ตัวนับในแท็บ: ป้ายมุมมนเล็ก */
body.visor .win:not(.gc-art) :is(.tab, .pill) small, body.visor .win .rb-tab small { border-radius: 4px !important; background: rgba(90, 55, 12, 0.13); color: inherit; }
body.visor .win:not(.gc-art) :is(.tab, .pill).on small, body.visor .win .rb-tab.on small { background: rgba(70, 38, 4, 0.2); }
/* แถบทองใต้แท็บที่เลือก (theme6): บนทองให้เป็นเส้นแสงบาง ๆ */
body.visor .win:not(.gc-art) :is(.tab, .pill).on::before, body.visor .win .seg button.on::before, body.visor .win .rb-tabs .rb-tab.on::before {
  height: 1px !important; bottom: 3px !important; width: 44%; margin-left: -22%; opacity: 0.85; box-shadow: none !important; }
/* แถวแท็บ: ช่องไฟเท่ากัน 6px (ไม่ต้องให้ปลายแหลมชนกันแล้ว) */
body.visor .win:not(.gc-art) .tabs, .book .pills, body.visor .win:not(.gc-art) .seg { gap: 6px; }
body.visor .win:not(.gc-art) .tabs, .book .pills { padding: 1px 1px 4px; }
/* ตัวเลือกแบ่งช่องในตั้งค่า/บอท: ช่องเท่ากัน */
body.visor .win:not(.gc-art) .seg button { min-height: 32px; }

/* ======================= 4) ปุ่มเฉพาะที่ ======================= */
/* ตัวนับในแท็บสมุดเควสต์ (Daily / Lore — สไตล์ฉีดจาก js/daily.js): ป้ายมุมมนโทนเดียวกับแท็บ แทนสีฟ้า */
body.visor .win .tab .dl-tab-badge { border-radius: 4px; padding: 0 5px; font: 700 10.5px/16px var(--f-disp); color: inherit; background: rgba(90, 55, 12, 0.14); }
body.visor .win .tab.on .dl-tab-badge { background: rgba(70, 38, 4, 0.2); }
body.visor .win .tab .dl-tab-badge.ready { color: #fff6f0; background: #b8401f; box-shadow: 0 0 0 1px #6b2112; }

/* ปุ่มปิดหน้าต่าง: กระดุมทองเหลืองกลม กากบาทนูนสีเข้ม */
body.visor .win:not(.gc-art) .win-x, body.visor.pad-mode .win:not(.gc-art) .win-x, body.visor #w-equip .win-x {
  border: 0; border-radius: 50%; color: #3a2003; font: 400 22px/1 var(--f-body); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); padding: 0 0 2px;
  display: grid; place-items: center; filter: none;
  background: radial-gradient(circle at 50% 30%, #fff3c4 0%, #f2c35a 38%, #c98a28 72%, #9a6416 100%);
  box-shadow: inset 0 1px 0 #fff8d8, inset 0 -2px 0 rgba(110, 60, 5, 0.45), 0 0 0 1px #6b410b, 0 0 0 3px rgba(40, 22, 4, 0.55), 0 2px 0 3px rgba(20, 10, 1, 0.35), 0 4px 8px rgba(0, 0, 0, 0.4); }
body.visor .win:not(.gc-art) .win-x:hover, body.visor #w-equip .win-x:hover {
  color: #7a1606; filter: none;
  background: radial-gradient(circle at 50% 30%, #fff8da 0%, #f7cf6c 38%, #d69632 72%, #a86e1c 100%);
  box-shadow: inset 0 1px 0 #fffbe6, inset 0 -2px 0 rgba(110, 60, 5, 0.45), 0 0 0 1px #6b410b, 0 0 0 3px rgba(40, 22, 4, 0.55), 0 0 12px 3px rgba(255, 190, 80, 0.6); }
body.visor .win:not(.gc-art) .win-x:active { transform: translateY(1px); filter: brightness(0.92); }

/* กล่องยืนยัน: OK = ทอง A (หลัก) • Cancel = ครีม A */
body.visor #w-confirm .cf-btns .btn:first-child { background: var(--a-gold); color: var(--a-ink); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); box-shadow: var(--a-gold-sh); }
body.visor #w-confirm .cf-btns .btn:first-child:hover { background: var(--a-gold-hi); box-shadow: var(--a-gold-sh), var(--a-glow); }
body.visor #w-confirm .cf-btns .btn:first-child:active { background: var(--a-gold); box-shadow: var(--a-press-gold); }

/* คุยกับ NPC: ตัวเลือก = แผ่นครีม A (ชี้/เลือกด้วยคีย์ = ขอบทอง + แสงนุ่ม) */
body.visor .win .dlg-opt { border: 1px solid transparent; border-image: none; border-radius: var(--a-r); clip-path: none; filter: none;
  background: var(--a-cream); box-shadow: var(--a-cream-sh); color: var(--a-ink-2); }
body.visor .win .dlg-opt:hover, body.visor .win .dlg-opt.gp-sel, body.visor .win .dlg-opt.kbd {
  background: var(--a-cream-hi) !important; box-shadow: inset 0 0 0 1px rgba(242, 190, 80, 0.75), 0 0 0 1px #8a5a1e, 0 2px 0 #6b4a22, var(--a-glow) !important; filter: none; color: #3a2208; }
body.visor .win .dlg-opt:active { transform: translateY(1px); box-shadow: var(--a-press-cream) !important; }
body.visor .win .dlg-opt::after { border-radius: inherit; }

/* เมนูขวา: ปุ่มหน้าต่างที่เปิดอยู่ = ทอง A */
body.visor #menubar button.on { border: 1px solid transparent; border-image: none; border-radius: var(--a-r); background: var(--a-gold); box-shadow: var(--a-gold-sh); filter: none; }
body.visor #menubar button.on span { color: var(--a-ink) !important; }

/* การ์ดตัวละคร: Status +N / Passive +N = ทอง A เล็ก */
body.visor .pt { border: 0 !important; border-radius: var(--a-r-s) !important; clip-path: none; background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink); }
body.visor .pt:hover { background: var(--a-gold-hi); box-shadow: var(--a-gold-sh), var(--a-glow); }

/* การ์ดเควสต์ (HUD): Quest / Daily = ทอง A (เลือก) / ครีม A (ไม่เลือก) */
.qt-tab, body.visor .qt-tab { clip-path: none !important; border: 0 !important; border-image: none !important; border-radius: var(--a-r-s) !important;
  background: var(--a-cream) !important; box-shadow: var(--a-cream-sh) !important; color: var(--a-ink-2) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; filter: none; }
.qt-tab.on, body.visor .qt-tab.on { background: var(--a-gold) !important; box-shadow: var(--a-gold-sh) !important; color: var(--a-ink) !important; text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8) !important; }
body.visor .qt-tab:not(.on):hover { background: var(--a-cream-hi) !important; }
body.visor .qt-tab.on::before { height: 1px !important; bottom: 3px !important; opacity: 0.8; box-shadow: none !important; }
body.visor .qt-tabs { gap: 6px; border-radius: var(--a-r) !important; padding: 4px !important; }
body.visor .qt-tab .qt-badge, body.visor .qt-badge { border-radius: 4px !important; }

/* มือถือแนวตั้ง: ปุ่ม Quest ใต้การ์ดตัวละคร = ครีม A */
@media (max-width: 760px) and (orientation: portrait) {
  body.pad-mode #qt-btn { clip-path: none; border-radius: var(--a-r); background: var(--a-cream); box-shadow: var(--a-cream-sh); color: var(--a-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
  body.pad-mode #qt-btn:active { transform: translateY(1px); box-shadow: var(--a-press-cream); filter: none; }
  body.pad-mode #qt-btn .ico svg { fill: #7a4c10; }
  body.pad-mode #qt-btn .qt-badge { border-radius: 4px; }
}

/* ======================= 5) หน้าต่าง Runes ======================= */
/* ป้าย "เลือก" ในแถวสกิล (เดิมหกเหลี่ยม) = ทอง A เล็ก */
.rb-mark.new { clip-path: none; height: 30px; padding: 0 12px; border-radius: var(--a-r); background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink);
  font: 700 var(--fs-xs)/30px var(--f-body); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); }
.rb-mark.lock { clip-path: none; border-radius: var(--a-r); background: var(--a-off); box-shadow: var(--a-off-sh); color: #8a6a3a; }

/* หัวสกิล (หน้าขวา): ไอคอนซ้าย ชื่อ/บรรทัดรองชิดซ้ายแนวเดียวกัน */
.det-top.rb-sk-top { justify-content: flex-start; text-align: left; gap: 12px; padding: 2px 2px 10px; }
.rb-sk-top > div { align-items: flex-start; gap: 2px; }
.rb-sk-top .dname { justify-content: flex-start; margin: 0; font-size: var(--fs-l); color: #3a2410; }
.rb-sk-top small { font: 500 var(--fs-xs)/1.3 var(--f-body); color: #8a6a44; letter-spacing: 0.02em; }
/* ไอคอนสกิลในรายการ: มุมมนเท่ากันทุกแถว + เส้นทองเหลืองบาง */
.rb-row .sicon { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px #8a5a1e, 0 0 0 2px rgba(230, 187, 94, 0.55), 0 2px 4px rgba(60, 35, 10, 0.25); }
/* ช่องไอคอนรูน = เบ้าทองเหลืองเล็ก (หนังเข้มเว้า + ขอบทองเหลือง 1px) */
.rb-ic { clip-path: none; border-radius: 9px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #f2c96c) 16%, #4a3522), #24170c 74%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px #c99a46, 0 0 0 2px rgba(90, 55, 15, 0.35), 0 1px 0 2px rgba(255, 255, 255, 0.55); }
.rb-ic img { width: 92%; height: 92%; }
.rb-ic.sm { border-radius: 7px; }
.rb-ic.none { background: rgba(140, 100, 45, 0.06); box-shadow: inset 0 0 0 1px rgba(138, 98, 50, 0.08); outline: 1.5px dashed rgba(138, 98, 50, 0.5); outline-offset: -3px; }
.rb-ic.none .rb-glyph { color: rgba(122, 86, 40, 0.55); font-size: calc(var(--s) * 0.42); }
.rb-mark.on .rb-ic { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 0 1px #c99a46, 0 0 6px color-mix(in srgb, var(--rc, #f2c96c) 55%, transparent); }

/* การ์ดตัวเลือก Skill Rune: แผ่นกระดาษอุ่นขอบทองเหลืองบาง (แทนแผ่นหินเทาขอบดำ) */
.rb-cards { gap: 8px; filter: none; padding: 1px; }
.rb-card { --ic: 54px; clip-path: none; border-radius: 10px; grid-template-columns: var(--ic) minmax(0, 1fr); grid-template-areas: "ic t" "ic d"; column-gap: 12px; row-gap: 3px;
  align-items: center; align-content: center; min-height: 0; padding: 9px 12px; background: var(--a-card); box-shadow: var(--a-card-sh); color: #4a2e12;
  transition: transform 120ms ease-out, box-shadow 140ms; }
.rb-card::before { content: none; }
.rb-card > .rb-ic { --s: var(--ic); align-self: center; }
.rb-card-t { align-self: end; padding-right: 72px; gap: 4px 8px; }
.rb-card:not(.cur):not(.sel) .rb-card-t { padding-right: 0; }
.rb-card:not(.cur).sel .rb-card-t { padding-right: 30px; }
.rb-card-t b { font: 700 var(--fs-m)/1.25 var(--f-title); letter-spacing: 0.02em; color: #3a2410; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.rb-card-d { align-self: start; font: 400 var(--fs-s)/1.45 var(--f-body); color: #5a3e20; text-shadow: none; }
.rb-short .rb-eff { font-weight: 600; color: #4a2c0c; }
.rb-short .rb-cost { font-size: var(--fs-xs); color: #8a6a44; }
.rb-card:hover:not(.off) { transform: translateY(-1px); box-shadow: var(--a-card-sh), 0 0 0 3px rgba(242, 190, 80, 0.18); }
.rb-card:hover:not(.off)::before { content: none; }
/* เลือกอยู่: ขอบทอง + แสงนุ่ม (ไม่ใช่แผ่นเขียว) */
.rb-card.sel { background: linear-gradient(180deg, #fffbef 0%, #f9ebc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 18px -6px rgba(242, 190, 80, 0.55), 0 0 0 1.5px #d39a32, 0 0 0 4px rgba(242, 201, 108, 0.28), 0 0 16px rgba(255, 190, 80, 0.4), 0 4px 10px -6px rgba(60, 35, 10, 0.4); }
.rb-card.sel .rb-ic { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 0 1px #e0aa48, 0 0 10px color-mix(in srgb, var(--rc, #f2c96c) 60%, transparent), 0 1px 0 2px rgba(255, 255, 255, 0.55); }
.rb-card.sel.none .rb-ic { box-shadow: inset 0 0 0 1px rgba(211, 154, 50, 0.25); }
.rb-card:focus-visible { outline: none; box-shadow: var(--a-card-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }
/* ไม่ใส่รูน: เงียบกว่า */
.rb-card.none:not(.sel) { background: rgba(255, 250, 238, 0.55); box-shadow: inset 0 0 0 1px rgba(180, 138, 74, 0.55), 0 1px 2px rgba(60, 35, 10, 0.08); }
.rb-card.none .rb-card-t b { font-family: var(--f-body); font-weight: 600; color: #5a3e20; }
.rb-card.none .rb-card-d { color: #8a6a44; }
/* ล็อก (สกิลยังไม่ถึง Lv 4): หม่นทั้งชุด */
.rb-cards.off .rb-card { background: rgba(240, 230, 208, 0.7); box-shadow: inset 0 0 0 1px rgba(160, 130, 90, 0.5); }
.rb-cards.off .rb-card::before { content: none; }
.rb-cards.off .rb-ic { filter: grayscale(0.7) brightness(0.95); }
/* ป้ายแบบรูน (เป้าเดียว / รอบด้าน / ทั้งคู่): ป้ายมุมมน 4px สีอ่อนตัวอักษรเข้ม อ่านชัด */
.rb-card .rn-tag, .rb-tag-none { display: inline-flex; align-items: center; height: 18px; margin: 0; padding: 0 7px; border-radius: 4px !important; border: 1px solid; font: 700 10.5px/1 var(--f-body); letter-spacing: 0.02em; text-shadow: none; }
.rb-card .rn-tag.single { color: #8a3210; background: #fbe3d3; border-color: #e0a882; }
.rb-card .rn-tag.pack { color: #17506f; background: #ddeef8; border-color: #94c3dd; }
.rb-card .rn-tag.both { color: #2f6420; background: #e2f1d8; border-color: #9fcb8a; }
.rb-tag-none { color: #6b5030; background: #f1e7d2; border-color: #cdb68e; }
/* ตรา "ใช้อยู่" = ทอง A เล็กพร้อม ✓ • ✓ ที่แตะเลือก = ทอง A สี่เหลี่ยมมุมมน */
.rb-cur, .rb-pick { right: 10px; top: 10px; }
.rb-cur { clip-path: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: var(--a-r-s); background: var(--a-gold); box-shadow: var(--a-gold-sh);
  color: var(--a-ink); font: 700 10.5px/1 var(--f-body); letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); }
.rb-cur::before { content: "✓"; font-weight: 700; }
.rb-pick { clip-path: none; width: 22px; height: 22px; border-radius: var(--a-r-s); background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink); font-size: 12px; }
/* Details ใต้การ์ด (จอเล็ก: การ์ดที่เลือกโชว์สรุปสั้น — คำอธิบายเต็มอยู่ในนี้) */
.rb-more { margin-top: -2px; }
.rb-more > p { margin: 0; padding: 8px 12px; border-radius: 8px; font: 400 var(--fs-s)/1.5 var(--f-body); color: #4a2e12; background: rgba(255, 250, 238, 0.7); box-shadow: inset 0 0 0 1px rgba(180, 138, 74, 0.45); }
/* ปุ่มล่าง: รูนนี้ใช้อยู่แล้ว = ครีม A พร้อม ✓ (ไม่ใช่เทาจาง) */
body.visor .win .btn.big.primary.rb-choose.cur:disabled { background: var(--a-cream); color: #5a3a16; box-shadow: var(--a-cream-sh); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }

/* แผ่นรูน Hunt (รายการซ้าย): การ์ดกระดาษอุ่นเดียวกัน */
.rb-tiles { gap: 8px; filter: none; padding: 1px; }
.rb-tile { clip-path: none; border-radius: 10px; background: var(--a-card); box-shadow: var(--a-card-sh); color: #4a2e12; padding: 10px; transition: transform 120ms ease-out, box-shadow 140ms; }
.rb-tile::before { content: none; }
.rb-tile-t b { color: #3a2410; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.rb-tile-t small { color: #7a5a34; text-shadow: none; }
.rb-tile:hover { box-shadow: var(--a-card-sh), 0 0 0 3px rgba(242, 190, 80, 0.18); }
.rb-tile.sel { background: linear-gradient(180deg, #fffbef 0%, #f9ebc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1.5px #d39a32, 0 0 0 4px rgba(242, 201, 108, 0.28), 0 0 14px rgba(255, 190, 80, 0.38); }
.rb-tile.rb-shop { background: linear-gradient(180deg, #f8f0dc 0%, #eedfbd 100%); }
.rb-tile.rb-shop .rb-ic img { opacity: 0.9; filter: grayscale(0.15) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.rb-tile:focus-visible { box-shadow: var(--a-card-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }
.rb-in, .rb-tile .hr-owned { clip-path: none; border-radius: 4px !important; height: 20px; display: inline-flex; align-items: center; padding: 0 7px; }
.rb-in { background: #e2f1d8; color: #2f6420; box-shadow: inset 0 0 0 1px #9fcb8a; font: 700 var(--fs-2xs)/1 var(--f-body); }
.rb-tile .hr-owned { background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink); }
.rb-tile .ipr { border-radius: 5px !important; }

/* แผ่นเบ้า Hunt (หน้าขวา): หนังเข้มอุ่นขอบทองเหลืองบาง + ป้าย I / II ทองมุมมน */
.rb-socks { clip-path: none; border-radius: 12px; background: radial-gradient(90% 70% at 50% 0%, rgba(255, 220, 160, 0.14), rgba(255, 220, 160, 0) 65%), linear-gradient(180deg, #4e3521 0%, #2f1f12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.25), inset 0 -8px 16px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px #b48a4a, 0 4px 10px -6px rgba(40, 20, 4, 0.55); }
.rb-socks::before { content: none; }
.rb-sock-n { top: -9px; clip-path: none; border-radius: 4px; padding: 0 8px; height: 18px; line-height: 18px; background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink); }
.rb-stone.rb-ic { border-radius: 10px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 1px #c99a46, 0 1px 0 1px rgba(255, 226, 170, 0.18); }
.rb-sock.sel .rb-stone { box-shadow: inset 0 0 0 1px #f2c96c, inset 0 0 16px rgba(255, 200, 90, 0.5), 0 0 0 1px #e0aa48, 0 0 10px rgba(255, 190, 80, 0.5); }
.rb-stone.empty { outline: 1.5px dashed rgba(242, 201, 108, 0.35); outline-offset: -6px; }
.rb-sock-t b { color: #fff1d2; }
.rb-sock-t small { color: #d9c29a; }

/* ======================= 6) หน้าต่างไม่ทับแถบลัด/กรอบ HUD ======================= */
/* คอม: สมุดสูงไม่เกินช่องระหว่างแถบบน (เงิน) กับแถบลัดล่าง — รวมกรอบไม้ที่ยื่นออก 10px */
@media (min-width: 761px) and (min-height: 521px) {
  body.visor .win.book-win { height: min(580px, calc(100dvh - 168px)); }
  body.visor #w-runes.win.book-win { height: min(620px, calc(100dvh - 168px)); }
}

/* ======================= 7) จอเล็ก ======================= */
/* จอสัมผัส: ปุ่ม/แท็บสูงอย่างน้อย 32px */
@media (pointer: coarse) {
  body.visor .win:not(.gc-art) :is(.tab, .pill), body.visor .win:not(.gc-art) .seg button, body.visor .win .btn { min-height: 32px; }
}
/* มือถือแนวตั้ง: การ์ดรูนกะทัดรัด ระยะ 8px • เบ้า 52px */
@media (max-width: 760px) {
  body.visor .win:not(.gc-art) :is(.tab, .pill), body.visor .win:not(.gc-art) .seg button { padding-left: 10px; padding-right: 10px; }
  body.visor .win .rb-tabs .rb-tab { padding-left: 8px; padding-right: 8px; min-height: 40px; }
  /* แท็บกระเป๋า 5 ช่อง: ตัวอักษรไม่ชนขอบ */
  body.visor .book .pills { gap: 4px; }
  body.visor .book .pills .pill { padding-left: 6px; padding-right: 6px; gap: 4px; font-size: var(--fs-s); }
  body.visor .book .pills .pill small { min-width: 0; padding: 0 4px; }
  .rb-card { --ic: 52px; column-gap: 10px; padding: 10px; }
  .rb-card-t { padding-right: 70px; }
  .rb-cur, .rb-pick { right: 8px; top: 8px; }
  .rb-tile { padding: 8px; }
  /* สรุปสั้นของรูน: ขึ้นบรรทัดใหม่ได้ (ไม่ตัด …) */
  .rb-short > span { white-space: normal; overflow: visible; }
}
/* จอแคบมาก (≤ 360px เช่น iPhone ตั้ง Display Zoom): แท็บกระเป๋า 5 ช่อง — ซ่อนตัวนับของแท็บที่ไม่ได้เลือก */
@media (max-width: 360px) {
  body.visor .book .pills { gap: 3px; }
  body.visor .book .pills .pill { padding-left: 4px; padding-right: 4px; font-size: var(--fs-xs); }
  body.visor .book .pills .pill:not(.on) small { display: none; }
  body.visor .win .rb-tabs .rb-tab small { display: none; }
}
/* แนวนอนจอเตี้ย (844×390): แท็บอยู่แถวหัว — เริ่มหลังป้ายชื่อ "Runes" (ไม่ทับ) • การ์ดเตี้ย */
@media (max-height: 430px) and (orientation: landscape) {
  body.visor #w-runes .rb-tabs { left: 128px; gap: 6px; }
  body.visor .win .rb-tabs .rb-tab { min-height: 32px; height: 32px; padding-left: 10px; padding-right: 10px; }
  .rb-card { --ic: 46px; column-gap: 10px; row-gap: 1px; padding: 7px 10px; }
  .rb-card-t { padding-right: 64px; }
  .rb-card-t b { font-size: var(--fs-s); }
  .rb-cur, .rb-pick { right: 8px; top: 7px; }
  .rb-tile { padding: 6px 8px; }
  body.visor .book .pills .pill { padding-left: 8px; padding-right: 8px; }
  /* ไม่ใส่รูน: บรรทัดเดียว ประหยัดความสูงให้การ์ดรูนจริงเห็นครบเหนือปุ่ม */
  .rb-card.none { --ic: 36px; padding-top: 5px; padding-bottom: 5px; }
  .rb-card.none .rb-card-d { display: none; }
  .rb-card.none { grid-template-areas: "ic t"; }
  .rb-card.none .rb-card-t { align-self: center; }
}

/* ======================= 8) ประหยัดเครื่อง / ลดการเคลื่อนไหว ======================= */
body.fx-low :is(.rb-card, .rb-tile, .btn, .tab, .pill, .rb-tab, .seg button, .dlg-opt) { transition: none; }
body.fx-low .rb-card.sel, body.fx-low .rb-tile.sel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1.5px #d39a32, 0 0 0 4px rgba(242, 201, 108, 0.28); }
@media (prefers-reduced-motion: reduce) {
  :is(.rb-card, .rb-tile) { transition: none; }
  :is(.rb-card, .rb-tile):hover { transform: none; }
}

/* ======================= กันหน้าต่างล้นจอแคบ (มือถือที่ปิด "ปุ่มควบคุมบนจอ" = ไม่มี pad-mode) =======================
   เจ้าของส่งภาพ iPhone แนวตั้งที่หน้าต่างล้นขอบซ้าย/ขวา • เลย์เอาต์คอมบนจอกว้าง ≤ 760px → บังคับให้หน้าต่างพอดีจอ */
@media (max-width: 760px) {
  body:not(.pad-mode) .win:not(.hidden) { left: max(4px, var(--sl, 0px)) !important; right: auto !important;
    width: calc(100vw - 8px - var(--sl, 0px) - var(--sr, 0px)) !important; max-width: none !important; transform: none !important; }
  body:not(.pad-mode) .win.book-win:not(.hidden), body:not(.pad-mode) #w-runes:not(.hidden) { top: max(4px, var(--st, 0px)) !important;
    height: auto !important; max-height: calc(100dvh - 8px - var(--st, 0px) - var(--sb, 0px)) !important; }
}
/* แถบลัดล่าง (เลย์เอาต์คอมบนจอแคบ): เดิม 3 แถว (AUTO/ULT • สกิล 1–8 • ยา) → 2 แถว ตามที่เจ้าของวาด:
   แถวบน = สกิล 1–8 • แถวล่าง = AUTO ชิดซ้าย · ยา · ULT ชิดขวา */
@media (max-width: 760px) {
  body:not(.pad-mode) #dock { flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 6px; column-gap: 6px; }
  body:not(.pad-mode) #dock #hotbar { order: 0; flex: 1 0 100%; width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important; justify-content: space-between; gap: 4px; box-sizing: border-box; }
  body:not(.pad-mode) #dock #hotbar .hb { flex: 0 1 40px; min-width: 0; }
  body:not(.pad-mode) #dock #auto-btn { order: 1; width: 46px !important; height: 46px !important; margin: 0 !important; position: relative !important; left: auto !important; top: auto !important; }
  body:not(.pad-mode) #dock #potbar { order: 2; flex: 0 1 auto; margin: 0 auto; }
  body:not(.pad-mode) #dock #ult-btn { order: 3; width: 46px !important; height: 46px !important; margin: 0 !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; }
}

/* =====================================================================
   9) ตรวจความเรียบร้อยทุกหน้าต่าง (2026-10-03 "ปราณีต") — แก้ตำหนิที่เห็นจากภาพจริง 390×844 / 844×390 / 1280×720
   ===================================================================== */
/* แถบหัวหน้าต่าง: กระจกควันทึบขึ้น (เดิมเห็นตัวเลข HP/ชื่อของ HUD ข้างหลังลอดขึ้นมาชัด) */
body.visor .win:not(.gc-art) .win-title { background: var(--g5-tint), linear-gradient(180deg, rgba(46, 27, 11, 0.62), rgba(30, 17, 6, 0.7)); }

/* --- HUD มือถือแนวตั้งที่ปิดปุ่มควบคุมบนจอ (ไม่มี pad-mode) --- */
@media (max-width: 760px) and (orientation: portrait) {
  /* การ์ดเควสต์: กว้างเท่าการ์ดตัวละคร (เดิม 300px ทับเรดาร์ + ป้ายเงิน) */
  body.visor:not(.pad-mode) #quest-track, body.visor:not(.pad-mode) #hud #quest-track, body.visor:not(.pad-mode) #hud:has(#buffs .buff) #quest-track {
    left: calc(var(--s2) + var(--sl)); right: auto; width: min(62vw, 236px); padding-left: var(--s2); padding-right: var(--s2); }
  body.visor:not(.pad-mode) #quest-track .qt-tabs { gap: 4px; }
  body.visor:not(.pad-mode) #quest-track .qt-tab { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 760px) {
  /* แชท: อยู่เหนือแถบลัด 2 แถว (เดิมจมอยู่หลังแถบ เห็นตัวหนังสือลอดออกมา) */
  body.visor:not(.pad-mode) #chat { bottom: calc(134px + var(--sb)); }
  /* เส้นคั่นหน้าแถบยา (เหลือจากแถบแถวเดียว) ลอยกลางแถวล่าง → เอาออก */
  body.visor:not(.pad-mode) #dock #potbar { box-shadow: none; }
  /* กล่องยืนยัน: กลางจอ (เดิมชิดบนทับการ์ดตัวละคร) */
  body.visor .win#w-confirm:not(.hidden) { top: 50% !important; translate: 0 -50%; }
}

/* --- Skills --- */
/* Rune Paths: ปุ่ม "จัดการใน Runes" ขึ้นบรรทัดของตัวเอง (เดิมคำสุดท้ายตกบรรทัดเดี่ยวแล้วปุ่มต่อท้าย) */
body.visor .win .rn-help .rn-manage { display: flex; width: fit-content; margin: 8px 0 0; }
/* ความชำนาญ: จอแคบ = ชื่อ/เลเวลบรรทัดบน • ผล + แถบบรรทัดล่าง (เดิมถูกปุ่ม Use/Move ตัดเหลือ "แ…") */
@media (max-width: 760px), (max-height: 520px) {
  .sk-row.uni .sk-mas { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .sk-row.uni .sk-mas > span { flex: 1 0 100%; }
  .sk-row.uni .sk-mas em { order: 2; flex: none; white-space: nowrap; }
  .sk-row.uni .sk-mas i { order: 3; min-width: 28px; }
}

/* --- ภาพไอเทมใหญ่ (รายละเอียด / ร้าน / คลัง / เตา / Runes): ขอบสีความหายากตามทรงซุ้ม (เดิมเป็นกรอบสี่เหลี่ยมคมรอบซุ้มตัดมุม) --- */
.det-hero .plate.big { box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(20, 9, 1, 0.85)) drop-shadow(0 0 2px color-mix(in srgb, var(--rr, #c9a46a) 90%, transparent)) drop-shadow(0 0 9px var(--rg, rgba(255, 210, 120, 0.4))) drop-shadow(5px 8px 7px rgba(0, 0, 0, 0.45)); }
body.fx-low .det-hero .plate.big { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--rr, #c9a46a) 90%, transparent)) drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.4)); }
/* เตาตีเหล็ก: "+4 → +5" มีช่องไฟจากภาพ (เดิมชิดจนตัวอักษรชนกรอบภาพ) */
.det-hero.rf-hero { gap: 16px; }
.det-hero.rf-hero .det-side { min-width: 0; }
@media (max-width: 760px), (max-height: 520px) { .det-hero.rf-hero { gap: 12px; } }

/* ปุ่มใหญ่ติดล่าง: เนื้อหาที่เลื่อนอยู่ใต้ปุ่มจางหายก่อนถึงปุ่ม (เดิมตัวอักษรโผล่ครึ่งบรรทัดใต้ปุ่ม) */
.det-acts { padding-top: 18px; background: linear-gradient(180deg, rgba(236, 220, 186, 0), #ecdcb8 16px, #ead9b4); }

/* ราคา (ร้าน/คลัง): ใบเสร็จ — ป้ายชิดซ้าย ค่าชิดขวา แถวละรายการ (เดิมจัดกลางแล้วแถวจำนวนเยื้อง) • แนวนอนจอเตี้ยคงแบบบรรทัดเดียวเดิม (ประหยัดความสูง) */
@media (min-height: 521px) {
  .book-r .pricebox { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; padding: 2px var(--s3); }
  .book-r .pricebox .kv { justify-content: space-between; min-height: 34px; border-bottom: 1px dashed rgba(138, 98, 50, 0.28); }
  .book-r .pricebox .kv:last-child, .book-r .pricebox .kv:has(+ .kv.ok:last-child) { border-bottom: 0; }
  .book-r .pricebox .kv.total b { font-size: var(--fs-m); }
}
.book-r .pricebox .kv span { color: #7a5a34; }

/* แผนที่ (พื้นที่ / โลก) บนแนวนอนจอเตี้ย: ใช้ความสูงที่มี (เดิมเหลือภาพเล็ก ~120px กลางกระดาษว่าง) */
@media (max-height: 520px) and (orientation: landscape) {
  body.visor #bigmap-cv { width: auto !important; height: auto; max-width: 100%; max-height: calc(100dvh - 150px - var(--st) - var(--sb)); }
  body.visor #worldmap-cv { width: auto !important; height: auto; max-width: 100%; max-height: calc(100dvh - 104px - var(--st) - var(--sb)); }
}

/* --- Navi (แท็บไล่เลเวล): ยังเป็นสีชุดมืดบนกระดาษ (EXP เขียว/เหลืองอ่อน, ป้าย Aggro ชมพูบนชมพู, แถวแคปซูล) --- */
body.visor .win .hunt-row { border: 0; border-radius: 10px; background: var(--a-card); box-shadow: var(--a-card-sh); color: #3a2410; padding: 6px 8px 6px 8px; }
body.visor .win .hunt-row:hover { background: linear-gradient(180deg, #fffbef 0%, #f9ebc4 100%); box-shadow: var(--a-card-sh), 0 0 0 3px rgba(242, 190, 80, 0.2); }
body.visor .win .hunt-row:is(.good, .hard, .mvp) { border-left: 0; }
body.visor .win .hunt-row.good { box-shadow: inset 3px 0 0 #5aa04a, var(--a-card-sh); }
body.visor .win .hunt-row.hard { box-shadow: inset 3px 0 0 #c0503a, var(--a-card-sh); }
body.visor .win .hunt-row.mvp { box-shadow: inset 3px 0 0 #d39a32, var(--a-card-sh); }
body.visor .win .hunt-pic { border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fffaf0, #ead6ac); box-shadow: inset 0 0 0 1px rgba(138, 98, 50, 0.35); }
body.visor .win .hunt-n { color: #3a2410; }
body.visor .win .hunt-s { color: #7a5a34; }
body.visor .win .hunt-row.here .hunt-s { color: #1d6a62; }
body.visor .win .hunt-r b { color: #3a2410; }
body.visor .win .hunt-r small { color: #8a5a10; font-weight: 600; }
body.visor .win .hunt-r small.exp-hi { color: #2f7a2a; }
body.visor .win .hunt-r small.exp-low { color: #a3301c; }
body.visor .win .hunt-tag { border-radius: 4px !important; }
body.visor .win .hunt-tag.bad { color: #8e2010; background: #fbe3d3; border: 1px solid #e0a882; }
body.visor .win .hunt-info { color: #7a4c10; border: 1px solid #b48a4a; background: radial-gradient(circle at 50% 35%, #fffaf0, #efdcb2); font-family: var(--f-title); }
body.visor .win .hunt-sec.good b { color: #2f7a2a; } body.visor .win .hunt-sec.hard b { color: #a3301c; } body.visor .win .hunt-sec.mvp b { color: #8a5a10; }
body.visor .win .hunt-sec span { color: #7a5a34; }

/* การ์ดมอนสเตอร์: ชื่อของดรอปตามความหายากใช้สีเข้มชุดกระดาษ (เดิมเขียว/ฟ้าอ่อนบนครีม อ่านไม่ออก) */
body.visor #unit-card .rar-uncommon { color: var(--r-uncommon) !important; }
body.visor #unit-card .rar-rare { color: var(--r-rare) !important; }
body.visor #unit-card .rar-epic { color: var(--r-epic) !important; }
body.visor #unit-card .rar-legend { color: var(--r-legend) !important; }

/* Battle Script: เลขกฎ (#1) อ่านได้ — ป้ายไม้เข้มตัวอักษรครีม (เดิมตัวอักษรน้ำตาลบนน้ำตาล) */
body.visor .win .bs-rule .bs-num { display: inline-grid; place-items: center; height: 24px; padding: 0 6px; border-radius: 5px; background: #5b3a1f !important; color: #fff1d2 !important;
  font: 700 12px/1 var(--f-disp); letter-spacing: 0.02em; box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.25), 0 0 0 1px #2e1903; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

/* Builds: คำอธิบายบนสุดมีช่องไฟจากแถบหัว */
body.visor #w-builds .lo-intro { margin-top: 6px; }

/* --- Epic / Legendary ในช่องเล็ก (~40px): แสงกวาดเห็นชัดขึ้น + ไอคอนเรืองหายใจช้า ๆ (เดิมจางจนแทบไม่เห็นบนช่องเล็ก) --- */
.islot:is(.r-epic, .r-legend)::before { width: 70%; mix-blend-mode: normal; opacity: 0.78; animation: a7-sweep 3.2s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, color-mix(in srgb, var(--rr) 40%, rgba(255, 255, 255, 0.5)) 38%, rgba(255, 255, 255, 0.9) 50%,
    color-mix(in srgb, var(--rr) 40%, rgba(255, 255, 255, 0.5)) 62%, rgba(255, 255, 255, 0) 100%); }
.islot.r-legend::before { animation-duration: 2.6s; }
@keyframes a7-sweep { 0%, 64% { transform: translateX(-150%) skewX(-18deg); } 88%, 100% { transform: translateX(250%) skewX(-18deg); } }
.islot:is(.r-epic, .r-legend) { box-shadow: inset 0 0 0 2px var(--rr), inset 0 0 12px 2px var(--rg), 0 0 10px 2px var(--rg), 2px 3px 4px -1px rgba(0, 0, 0, 0.55); }
:is(.islot, .plate:not(.big)):is(.r-epic, .r-legend) img { animation: a7-gem 3.2s ease-in-out infinite; }
:is(.islot, .plate:not(.big)).r-legend img { animation-duration: 2.6s; }
@keyframes a7-gem { 0%, 100% { filter: drop-shadow(0 2px 2px rgba(60, 30, 5, 0.45)) drop-shadow(0 0 3px var(--rg)); }
  50% { filter: drop-shadow(0 2px 2px rgba(60, 30, 5, 0.45)) drop-shadow(0 0 7px var(--rr)) brightness(1.12); } }
body.fx-low :is(.islot, .plate):is(.r-epic, .r-legend) img { animation: none; }
@media (prefers-reduced-motion: reduce) { :is(.islot, .plate):is(.r-epic, .r-legend) img { animation: none; } .islot:is(.r-epic, .r-legend)::before { display: none; } }

/* =====================================================================
   10) หน้าแรก / ล็อกอิน / เลือกตัวละคร / สร้างตัวละคร — ชุดเดียวกับในเกม (ไม้โอ๊ค • ทองเหลือง • กระดาษ • ปุ่มแบบ A)
       ภาพพื้นหลังวาดด้วยโค้ดใน js/title.js (ไม่แตะ) • เลย์เอาต์เดิม เปลี่ยนแค่วัสดุ/สี
   ===================================================================== */
body.visor #title { background: #0d0805; }
body.visor #title::before { background:
  linear-gradient(90deg, rgba(20, 11, 4, 0.86) 0%, rgba(20, 11, 4, 0.6) 28%, rgba(20, 11, 4, 0.12) 56%, rgba(20, 11, 4, 0) 70%),
  linear-gradient(0deg, rgba(20, 11, 4, 0.72), rgba(20, 11, 4, 0) 34%), linear-gradient(180deg, rgba(20, 11, 4, 0.5), rgba(20, 11, 4, 0) 22%); }
body.visor #title.creating::before, body.visor #title.selecting::before { background: radial-gradient(60% 70% at 50% 60%, rgba(20, 11, 4, 0.45), rgba(20, 11, 4, 0.76)); }
/* โลโก้ตัวอักษร: ทองหล่อ Cinzel + ขอบเงาเข้ม */
body.visor #title .logo:not(.logo-img) { font-family: var(--f-title); font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff7da 0%, #f8d88e 30%, #dca645 52%, #9c6619 55%, #e2b257 78%, #fff1c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #4a2a06) drop-shadow(0 2px 0 #241302) drop-shadow(0 0 16px rgba(255, 190, 90, 0.32)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
body.visor #title .logo.logo-img { filter: drop-shadow(0 0 22px rgba(255, 190, 90, 0.3)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.65)); }
body.visor #title .logo-sub { color: #f1dcae; font-family: var(--f-body); }
body.visor #title .logo-sub::before { background: linear-gradient(90deg, #f2c96c, #b8801c); box-shadow: 0 0 8px rgba(255, 196, 80, 0.6); }
body.visor #title .hero-cap { color: #f1dcae; }
body.visor #title-ver { color: rgba(241, 220, 174, 0.78); }
body.visor #title-ver::before { background: #f2c96c; box-shadow: 0 0 10px #f2c96c; }

/* การ์ด: กระดาษในกรอบไม้โอ๊ค + เส้นทองเหลืองบางด้านใน/นอก + ลายถักทองที่มุม */
body.visor #title .card { border: 6px solid transparent; border-radius: 14px; color: #3a2410; overflow: hidden;
  background: var(--l5-pool) padding-box, var(--l5-vignette) padding-box, var(--ui-bg-parchment) padding-box, linear-gradient(#efe0bd, #efe0bd) padding-box,
    linear-gradient(180deg, rgba(90, 52, 20, 0.15), rgba(0, 0, 0, 0.35)) border-box, var(--ui-bg-wood) border-box, linear-gradient(#4a2c12, #4a2c12) border-box;
  box-shadow: inset 0 0 0 1px #b48a4a, inset 0 0 0 2px rgba(255, 246, 220, 0.55), inset 0 0 26px -8px rgba(110, 66, 20, 0.55),
    0 0 0 1px #c99a46, 0 0 0 2px #2a1603, 0 28px 54px -20px rgba(0, 0, 0, 0.88), 0 0 70px -24px rgba(255, 180, 80, 0.3);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
body.visor #title .card::before { background: radial-gradient(120% 55% at 50% -12%, rgba(255, 246, 220, 0.5), rgba(255, 246, 220, 0) 60%); }
body.visor #title .card::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  border: 30px solid transparent; border-image: var(--u6-knot) 144 / 30px / 0 stretch; filter: drop-shadow(0 1px 1px rgba(40, 20, 2, 0.5)); }
body.visor #title .card-kicker { color: #8a5410; font: 700 11px var(--f-title); letter-spacing: 0.18em; }
body.visor #title .card-kicker span { color: #8a6a44; font-family: var(--f-body); letter-spacing: 0; }
body.visor #title .card-kicker::after { height: 1px; background: linear-gradient(90deg, rgba(160, 110, 40, 0.75), rgba(160, 110, 40, 0)); }
body.visor #title .cs-right .card-kicker b { color: #8a6a44; font-family: var(--f-disp); }
/* ป้าย + ช่องกรอก: กระดาษเว้าขอบทองเหลือง */
body.visor #title :is(.cr-right, .auth) label { color: #6b4a22; font: 700 11px var(--f-body); letter-spacing: 0.06em; }
body.visor #title .cr-right label::before { color: #b8801c; font-family: var(--f-disp); }
body.visor #title :is(#cr-name, .auth input) { background: linear-gradient(180deg, #fbf3e0, #fffaf0); border: 1px solid #c9a46a; color: #3a2410; border-radius: var(--a-r);
  box-shadow: inset 0 2px 3px rgba(120, 80, 30, 0.18), 0 1px 0 rgba(255, 255, 255, 0.7); }
body.visor #title :is(#cr-name, .auth input)::placeholder { color: #a08a6a; }
body.visor #title :is(#cr-name, .auth input):hover { border-color: #b48a4a; }
body.visor #title :is(#cr-name, .auth input):focus { background: #fffdf6; border-color: #d39a32; box-shadow: inset 0 2px 3px rgba(120, 80, 30, 0.12), 0 0 0 3px rgba(242, 190, 80, 0.32); }
body.visor #title .auth input:-webkit-autofill { -webkit-text-fill-color: #3a2410; -webkit-box-shadow: 0 0 0 1000px #fffaf0 inset; }
body.visor #title .err { color: #a3301c; }
body.visor #title .au-note { color: #8a6a44; }
/* ตัวเลือกแบ่งช่อง (ล็อกอิน/สมัคร • โครงร่าง • หัว • วิเซอร์): ครีม A / ทอง A */
body.visor #title .seg { gap: 6px; padding: 4px; border-radius: 10px; background: rgba(120, 80, 30, 0.12); box-shadow: inset 0 1px 2px rgba(80, 50, 15, 0.22), 0 1px 0 rgba(255, 255, 255, 0.6); }
body.visor #title .seg button { border: 0; border-radius: var(--a-r); background: var(--a-cream); box-shadow: var(--a-cream-sh); color: var(--a-ink-2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
body.visor #title .seg button:hover { background: var(--a-cream-hi); color: #3a2208; }
body.visor #title .seg button.on { background: var(--a-gold); box-shadow: var(--a-gold-sh); color: var(--a-ink); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); }
body.visor #title .swatch { border-color: #fff8e6; box-shadow: 0 0 0 1px #8a6232, 0 1px 2px rgba(60, 35, 10, 0.35); }
body.visor #title .swatch.on { box-shadow: 0 0 0 2px #fff3c8, 0 0 0 4px #b8801c, 0 0 10px rgba(255, 190, 80, 0.6); }
/* ปุ่ม: หลัก = ทอง A • รอง = ครีม A • ลบ = ครีม + ตัวอักษรแดงเข้ม */
body.visor #title .tbtn { border: 1px solid transparent; border-radius: var(--a-r); background: var(--a-cream); color: var(--a-ink-2); box-shadow: var(--a-cream-sh);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform 90ms ease-out, box-shadow 120ms, filter 120ms; }
body.visor #title .tbtn small { color: #7a5a34; }
body.visor #title .tbtn:hover { background: var(--a-cream-hi); color: #3a2208; border-color: transparent; box-shadow: var(--a-cream-sh), var(--a-glow); transform: none; }
body.visor #title .tbtn:active { transform: translateY(1px); box-shadow: var(--a-press-cream); }
body.visor #title .tbtn.primary { background: var(--a-gold); color: var(--a-ink); box-shadow: var(--a-gold-sh); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); }
body.visor #title .tbtn.primary small { color: rgba(58, 32, 3, 0.75); }
body.visor #title .tbtn.primary:hover { background: var(--a-gold-hi); color: #2a1601; box-shadow: var(--a-gold-sh), var(--a-glow); }
body.visor #title .tbtn.primary:active { background: var(--a-gold); box-shadow: var(--a-press-gold); }
body.visor #title .tbtn.small:not(.primary) { background: var(--a-cream); color: var(--a-ink-2); border-color: transparent; box-shadow: var(--a-cream-sh); }
body.visor #title .tbtn.small:not(.primary):hover { background: var(--a-cream-hi); color: #3a2208; box-shadow: var(--a-cream-sh), var(--a-glow); }
body.visor #title .tbtn.small.danger { color: var(--a-ink-bad); }
body.visor #title .tbtn.small.danger:hover { color: #6e1406; background: var(--a-cream-hi); box-shadow: var(--a-cream-sh), 0 0 0 3px rgba(200, 80, 50, 0.16); }
body.visor #title .tbtn:disabled { background: var(--a-off); color: #9a8a6c; box-shadow: var(--a-off-sh); }
body.visor #title .tbtn:focus-visible { outline: none; box-shadow: var(--a-cream-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }
body.visor #title .card .linkbtn { color: #8a5410; font-weight: 600; }
body.visor #title .card .linkbtn:hover { color: #5a3008; }
/* แถบบัญชี / ปุ่มภาษา: แผ่นไม้เข้มขอบทองเหลือง */
body.visor #title .acct, body.visor #lang-pill { border: 1px solid #b48a4a; border-radius: 9px; color: #f1dcae;
  background: linear-gradient(180deg, rgba(70, 42, 18, 0.25), rgba(0, 0, 0, 0.35)), var(--ui-bg-wood), #3a2412;
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.25), 0 0 0 1px #2a1603, 0 6px 14px -6px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.visor #title .acct b { color: #ffe39a; }
body.visor #title .acct .linkbtn { color: #f2c96c; }
body.visor #title .acct .linkbtn:hover { color: #fff1c4; }
body.visor #lang-pill { gap: 3px; padding: 3px; }
body.visor #lang-pill button { border-radius: 6px; color: #e9d4a6; font-family: var(--f-body); }
body.visor #lang-pill button.on { background: var(--a-gold); color: var(--a-ink); box-shadow: var(--a-gold-sh); text-shadow: 0 1px 0 rgba(255, 244, 205, 0.8); }
/* เวทีพรีวิวตัวละคร: หนังเข้มอุ่น + สปอตไลต์ทอง (เหมือนแผ่นเบ้ารูน) */
body.visor #title .cr-left { border: 0; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 82%, rgba(255, 200, 110, 0.32), rgba(255, 200, 110, 0) 58%), radial-gradient(90% 60% at 50% 0%, rgba(255, 220, 160, 0.14), rgba(255, 220, 160, 0) 65%), linear-gradient(180deg, #4e3521 0%, #2f1f12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.25), inset 0 -10px 20px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px #b48a4a, 0 3px 8px -4px rgba(40, 20, 4, 0.6); }
body.visor #title .cr-left::after { background: radial-gradient(rgba(255, 226, 170, 0.13) 1px, transparent 1.4px) 0 0 / 18px 18px; }
body.visor #title .cr-left::before { color: #f2c96c; font: 700 10.5px var(--f-title); letter-spacing: 0.2em; }
body.visor #title .cs-name { color: #fff1d2; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 190, 90, 0.35); }
body.visor #title .cs-job { color: #e0c8a0; }
body.visor #title :is(.cs-job, .cs-main small) img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
body.visor #title .cs-stats span { border-radius: 8px; background: rgba(255, 230, 180, 0.07); border: 1px solid rgba(201, 154, 70, 0.45); }
body.visor #title .cs-stats small { color: #d9c29a; font-family: var(--f-title); letter-spacing: 0.12em; }
body.visor #title .cs-stats b { color: #fff1d2; }
body.visor #title :is(.cs-empty, .cs-wait) { color: #e0c8a0; }
/* ช่องตัวละคร: การ์ดกระดาษขอบทองเหลือง • เลือกอยู่ = ขอบทอง + แสงนุ่ม • ว่าง = เส้นประ */
body.visor #title .cs-slot { border: 0; border-radius: 10px; background: var(--a-card); box-shadow: var(--a-card-sh); color: #3a2410; }
body.visor #title .cs-slot:hover { background: linear-gradient(180deg, #fffbef, #f9ebc4); box-shadow: var(--a-card-sh), 0 0 0 3px rgba(242, 190, 80, 0.2); }
body.visor #title .cs-slot.on { background: linear-gradient(180deg, #fffbef 0%, #f9ebc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 18px -6px rgba(242, 190, 80, 0.55), 0 0 0 1.5px #d39a32, 0 0 0 4px rgba(242, 201, 108, 0.28), 0 0 14px rgba(255, 190, 80, 0.35); }
body.visor #title .cs-slot.on::before { left: 0; background: linear-gradient(180deg, #f7cf6c, #b87a1c); box-shadow: none; }
body.visor #title .cs-slot:focus-visible { box-shadow: var(--a-card-sh), 0 0 0 3px #fff3c8, 0 0 0 4px #7a4c10; }
body.visor #title .cs-face { background: #2f1f12; box-shadow: 0 0 0 1px #8a5a1e, 0 0 0 2px rgba(230, 187, 94, 0.55); }
body.visor #title .cs-slot.on .cs-face { box-shadow: 0 0 0 2px #e0aa48, 0 0 10px rgba(255, 190, 80, 0.55); }
body.visor #title .cs-main b { color: #3a2410; }
body.visor #title .cs-main small { color: #7a5a34; }
body.visor #title .cs-main small i { color: #9a7a54; }
body.visor #title .cs-lv b { color: #8a5410; font-family: var(--f-disp); }
body.visor #title .cs-lv small { color: #9a7a54; font-family: var(--f-disp); }
body.visor #title .cs-slot.empty { background: rgba(255, 250, 238, 0.45); box-shadow: none; outline: 1.5px dashed rgba(138, 98, 50, 0.45); outline-offset: -2px; }
body.visor #title .cs-slot.empty:hover { background: rgba(255, 248, 228, 0.85); outline-color: #c98a28; }
body.visor #title .cs-slot.empty b { color: #6b4a22; }
body.visor #title .cs-slot.empty small { color: #9a7a54; }
body.visor #title .cs-slot.empty:hover b { color: #8a5410; }
body.visor #title .cs-plus { color: #b8801c; font-weight: 400; }
body.visor #title :is(.cs-btns, .cr-btns) { border-top: 1px solid rgba(138, 98, 50, 0.35); }
body.visor #title .cr-btns { background: none; }
/* คอม: โลโก้บรรทัดเดียว ขนาดตามความสูงจอ (เดิม 2 บรรทัด 84px ดันการ์ดล็อกอินล้นจอล่างที่ 720px) */
@media (min-width: 761px) and (min-height: 521px) {
  body.visor #title .logo:not(.logo-img) { white-space: nowrap; font-size: clamp(40px, min(4.4vw, 8vh), 64px); }
}
body.visor #title .cs-confirm { background: #fbe9dc; border: 1px solid #e0a882; }
body.visor #title .cs-cf-text { color: #6b4a22; }
body.visor #title .cs-cf-text b { color: #8e2010; }
body.visor #title .cs-confirm input { background: #fffaf0; border: 1px solid #d9a07a; color: #3a2410; }
/* มือถือแนวตั้ง: โลโก้ไม่ชนปุ่มภาษา (ขวาบน) */
@media (max-width: 760px) {
  body.visor #title::before { background: linear-gradient(0deg, rgba(20, 11, 4, 0.9), rgba(20, 11, 4, 0.45) 36%, rgba(20, 11, 4, 0) 58%), linear-gradient(180deg, rgba(20, 11, 4, 0.62), rgba(20, 11, 4, 0) 26%); }
  body.visor #title.creating::before, body.visor #title.selecting::before { background: rgba(20, 11, 4, 0.7); }
  body.visor #title .title-inner { padding-top: calc(58px + var(--st)); }
  body.visor #title.creating .title-inner, body.visor #title.selecting .title-inner { padding-top: calc(54px + var(--st)); }
  body.visor #title .logo:not(.logo-img) { font-size: clamp(30px, 9.4vw, 42px); text-align: center; }
  body.visor #title:is(.creating, .selecting) .logo:not(.logo-img) { font-size: clamp(24px, 7.4vw, 32px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  body.visor #title::before { background: linear-gradient(90deg, rgba(20, 11, 4, 0.88) 0%, rgba(20, 11, 4, 0.76) 44%, rgba(20, 11, 4, 0.3) 70%, rgba(20, 11, 4, 0) 84%), linear-gradient(0deg, rgba(20, 11, 4, 0.6), rgba(20, 11, 4, 0) 40%); }
  body.visor #title .card::after { border-width: 24px; border-image-width: 24px; }
  /* การ์ดล็อกอินแคบลงนิด: ไม่ชนปุ่มภาษามุมขวาบน (เดิมแท็บ "สมัครสมาชิก" อยู่ใต้ปุ่ม ไทย/EN) */
  body.visor #title .auth { width: min(326px, 100%); }
}
@media (prefers-reduced-motion: reduce) { body.visor #title .tbtn { transition: none; } }

/* การ์ดมอนสเตอร์แบบแผ่นล่างจอ (มือถือ): ปุ่ม โจมตี / สมุดมอนสเตอร์ ติดล่างเสมอ (เดิมล้นขอบจอล่าง ต้องเลื่อนหา) */
#unit-card.uc-sheet .uc-btns { position: sticky; z-index: 2; bottom: calc(-1 * (var(--s4) + env(safe-area-inset-bottom, 0px)));
  margin: var(--s3) calc(-1 * var(--s4)) calc(-1 * (var(--s4) + env(safe-area-inset-bottom, 0px))); padding: 12px var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(243, 230, 201, 0), var(--c-paper-2) 12px); }
@media (max-height: 430px) and (orientation: landscape) {
  #unit-card.uc-sheet .uc-btns { bottom: calc(-1 * (var(--s3) + env(safe-area-inset-bottom, 0px))); margin: var(--s3) calc(-1 * var(--s3)) calc(-1 * (var(--s3) + env(safe-area-inset-bottom, 0px)));
    padding: 10px var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
}