/* ============================================================
   ThaiNative HUD v3 — จัดวางใหม่ทั้งหมด (ห้ามทับกัน)
   ทุกตำแหน่งใช้หน่วย cqh (1cqh = 1% ความสูงจอเกม 16:9 → กว้าง 177.8cqh)
   โซน:  ซ้ายบน = ผู้เล่น/ปาร์ตี้ · กลางบน = บอส/เป้าหมาย/แจ้งเตือน
         ขวาบน = เขต+นาฬิกา → มินิแมพ → ชื่อพื้นที่ → เควส
         ซ้ายล่าง = แชท · กลางล่าง = ขวดยา+สกิล+ออโต้ · ขวาล่าง = ของที่ได้ → เมนู
         ขอบล่างสุด = EXP (ตัวเลขอยู่ในแถบ)
   ============================================================ */
body.td-mode {
  --hud-pad: 1.6cqh;            /* ระยะจากขอบจอ */
  --hud-col: 34cqh;             /* ความกว้างคอลัมน์ขวา */
  --hud-gap: 1cqh;
  --hud-bg: linear-gradient(180deg, rgba(46,26,58,.94), rgba(18,9,24,.94));
  --hud-line: rgba(232,199,102,.85);
  --hud-shadow: 0 0 0 .25cqh rgba(0,0,0,.55), 0 .6cqh 1.6cqh rgba(0,0,0,.45);
  --hud-r: 1.4cqh;
}

/* ---------- กรอบมาตรฐานของทุกชิ้นบน HUD ---------- */
body.td-mode .pf, body.td-mode .hud-right .zone, body.td-mode .target, body.td-mode .party-frames .pm,
body.td-mode .quest-track div, body.td-mode #td-hud .td-zone, body.td-mode #hud > .hud-buttons.dock,
body.td-mode #td-minimap {
  background: var(--hud-bg) !important; border: .25cqh solid var(--hud-line) !important; border-radius: var(--hud-r) !important;
  box-shadow: var(--hud-shadow) !important;
}

/* ---------- ซ้ายบน: ผู้เล่น ---------- */
body.td-mode .pf { top: var(--hud-pad) !important; left: var(--hud-pad) !important; width: 44cqh !important; height: 15.5cqh; padding: 1cqh 1.2cqh !important;
  gap: 1.2cqh !important; align-items: center; font-size: 2.6cqh; }
body.td-mode .pf-portrait { width: 10cqh; height: 10cqh; }
body.td-mode .pf-info { display: flex; flex-direction: column; gap: .5cqh; }
body.td-mode .pf-name { margin: 0; }
body.td-mode .pf .bar { height: 2.6cqh; margin: 0; }
body.td-mode .pf .bar span { font-size: 1.7cqh; line-height: 2.6cqh; }
body.td-mode .pf .buffs { min-height: 0; margin: 0; }
body.td-mode .pf .buffs:empty { display: none; }
/* เงิน: อยู่ในกรอบ (มุมขวาล่าง) ไม่ห้อยออกนอกกรอบแล้ว */
body.td-mode .pf .gold { position: absolute !important; left: auto !important; right: 1.2cqh !important; bottom: -1.6cqh !important; top: auto !important;
  font-size: 1.8cqh !important; line-height: 2.8cqh !important; padding: 0 1.2cqh !important; border-radius: 2cqh !important;
  background: linear-gradient(180deg, #4a2c14, #24130a) !important; border: .2cqh solid var(--hud-line) !important; box-shadow: 0 .3cqh .8cqh rgba(0,0,0,.6) !important; }
body.td-mode .party-frames { top: calc(var(--hud-pad) + 19cqh) !important; left: var(--hud-pad) !important; width: 30cqh !important; font-size: 2.3cqh; gap: .6cqh !important; }

/* ---------- กลางบน: บอส / ดันเจี้ยน / เป้าหมาย / แจ้งเตือน ---------- */
body.td-mode .boss-bar { top: var(--hud-pad) !important; width: 64cqh !important; max-width: none !important; }
body.td-mode .target { top: var(--hud-pad) !important; width: 44cqh !important; font-size: 2.4cqh; }
body.td-mode #hud:has(#boss-bar:not(.hidden)) .target,
body.td-mode #hud:has(#dg-bar:not(.hidden)) .target { top: calc(var(--hud-pad) + 10cqh) !important; }
body.td-mode #hud:has(#boss-bar:not(.hidden)) .target, body.td-mode #hud:has(#dg-bar:not(.hidden)) .target { top: calc(var(--hud-pad) + 10cqh) !important; }
/* ลำดับกลางจอบน: บอส(1.6–11) → เป้าหมาย(11.6–18) → ประกาศใหญ่(19–27) → แจ้งเตือนสั้น(28↓) */
body.td-mode .banner { top: 19cqh !important; font-size: 4cqh !important; max-width: 90cqh; }
body.td-mode #toasts { top: 30.5cqh !important; max-width: 80cqh; font-size: 2.3cqh; }
body.td-mode #toasts .toast { max-width: 80cqh; white-space: normal; text-align: center; }
/* เตือนสกิลบอส: ใต้ตัวละคร เหนือแถบสกิล */
body.td-mode .boss-warn { top: 60cqh !important; }
body.td-mode #td-hud .td-toast { top: 30.5cqh !important; }

/* ---------- ขวาบน: เขต + นาฬิกา ---------- */
body.td-mode .hud-right { top: var(--hud-pad) !important; right: var(--hud-pad) !important; width: var(--hud-col) !important; gap: 0 !important; font-size: 2.4cqh; }
body.td-mode .hud-right .zone { height: 5cqh; padding: 0 1.4cqh !important; font-size: 2.2cqh !important; }
body.td-mode .hud-right .zone b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.td-mode .hud-right .net { font-size: 1.8cqh; white-space: nowrap; margin-left: 1cqh; }
body.td-mode .hud-right .clock { position: absolute; top: 5.6cqh; right: 1cqh; margin: 0 !important; font-size: 1.9cqh !important; line-height: 2.6cqh; }
/* มินิแมพ → ป้ายพื้นที่ติดใต้แมพ */
body.td-mode #td-minimap { top: calc(var(--hud-pad) + 8.6cqh) !important; right: var(--hud-pad) !important; width: var(--hud-col) !important;
  height: calc(var(--hud-col) * 110 / 150) !important; aspect-ratio: auto !important; border-radius: var(--hud-r) var(--hud-r) 0 0 !important; }
body.td-mode #td-hud .td-zone { top: calc(var(--hud-pad) + 8.6cqh + var(--hud-col) * 110 / 150) !important; right: var(--hud-pad) !important;
  width: var(--hud-col) !important; height: 4cqh; line-height: 3.5cqh; padding: 0 1cqh !important; font-size: 1.9cqh !important;
  border-top: none !important; border-radius: 0 0 var(--hud-r) var(--hud-r) !important; background: linear-gradient(#6e1f17, #3e110c) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* เควสที่ติดตาม: ใต้ป้ายพื้นที่ */
body.td-mode .quest-track { top: calc(var(--hud-pad) + 14cqh + var(--hud-col) * 110 / 150) !important; right: var(--hud-pad) !important;
  width: var(--hud-col) !important; max-height: 23cqh; overflow: hidden; font-size: 1.9cqh !important; }
body.td-mode .quest-track div { padding: .5cqh 1cqh !important; margin-bottom: .6cqh !important; border-left: .6cqh solid var(--gold) !important; }

/* ---------- ขวาล่าง: เมนู (2 แถว x 5) + ของที่ได้ ---------- */
body.td-mode:not(.touch) #hud > .hud-buttons.dock { top: auto !important; bottom: calc(2.6cqh + var(--hud-pad)) !important; right: var(--hud-pad) !important;
  width: var(--hud-col) !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: .8cqh !important; padding: .9cqh !important; font-size: 2.4cqh; }
body.td-mode:not(.touch) #hud > .hud-buttons.dock button { width: 100% !important; height: 5.4cqh !important; border-width: .2cqh; border-radius: 1cqh; }
body.td-mode:not(.touch) #hud > .hud-buttons.dock button .px-ico { width: 4.2cqh; height: 4.2cqh; }
body.td-mode:not(.touch) #hud > .hud-buttons.dock button small { font-size: 1.3cqh; bottom: -.5cqh; right: -.4cqh; }
body.td-mode .loot-log { right: var(--hud-pad) !important; bottom: calc(2.6cqh + var(--hud-pad) + 15.5cqh) !important; width: var(--hud-col);
  max-height: 14cqh; overflow: hidden; justify-content: flex-end; font-size: 1.8cqh !important; }

/* ---------- กลางล่าง: แถบแอ็กชัน ---------- */
body.td-mode .actionbar { bottom: calc(2.6cqh + 1.2cqh) !important; font-size: 2.4cqh; }
body.td-mode .actionbar .slots { gap: .8cqh; }
body.td-mode #skillbar { gap: .6cqh; }
body.td-mode .actionbar .skill, body.td-mode .actionbar .slot { width: 7.2cqh !important; height: 7.2cqh !important; border-radius: 1.2cqh; }
body.td-mode #flask-bar { gap: .6cqh; margin-right: .6cqh; }
body.td-mode .flask-btn { width: 5.6cqh; height: 7.2cqh; font-size: 2.4cqh; }
body.td-mode #td-hud .td-act { bottom: 15cqh !important; }
body.td-mode .prompt { top: auto !important; bottom: 19.5cqh; }

/* ---------- ซ้ายล่าง: แชท (จบก่อนแถบแอ็กชัน) ---------- */
body.td-mode:not(.touch) #chat { left: var(--hud-pad) !important; bottom: calc(2.6cqh + var(--hud-pad)) !important; width: 33cqh !important; font-size: 1.8cqh !important; }
body.td-mode #chat-log { max-height: 18cqh !important; }
body.td-mode #chat-toggle { top: -3.6cqh; }

/* ---------- ขอบล่าง: EXP ---------- */
body.td-mode .expbar { height: 2.6cqh !important; min-height: 0 !important; }
body.td-mode .expbar span { bottom: auto !important; top: 0; right: 0 !important; left: 0; text-align: center; font-size: 1.7cqh !important; line-height: 2.6cqh; }

/* คำแนะนำปุ่มยาวๆ (แถบวิ่ง) → ย้ายไปอยู่ในหน้าวิธีเล่น (H) · บนจอสัมผัสยังแสดงชั่วครู่ */
body.td-mode:not(.touch) #td-hud .td-bottom { display: none !important; }
body.td-mode.touch #td-hud .td-bottom { bottom: 22cqh !important; max-width: 90%; white-space: normal; text-align: center; }

/* ---------- หน้าต่าง: อยู่ในพื้นที่ปลอดภัย ไม่ล้นจอ ---------- */

/* ---------- เปิดหน้าต่าง: หน้าต่างอยู่ช่วง 10–87cqh (ไม่บังแถบสกิล) · แจ้งเตือนย้ายขึ้นแถบบนสุด ---------- */
body.td-mode #ui .window { top: 10cqh !important; max-height: 77.5cqh !important; }
body.td-mode .hud-under { visibility: hidden !important; pointer-events: none !important; }
body.td-mode.win-open #toasts { top: 1.6cqh !important; max-height: 7.8cqh; overflow: hidden; flex-direction: column-reverse; justify-content: flex-start; z-index: 30; }
body.td-mode.win-open .banner { display: none !important; }

/* คำแนะนำปุ่มแบบแถบ: ซ่อนทุกโหมด (ดูได้ในหน้า "วิธีเล่น" H) */
body.td-mode #td-hud .td-bottom { display: none !important; }
#dock-toggle { display: none; }

/* ============================================================
   จอสัมผัส (มือถือแนวนอน) — จอยซ้ายล่าง · ปุ่มตีขวา · เมนูพับ ☰
   ============================================================ */
body.td-mode.touch #dock-toggle { display: grid; place-items: center; position: absolute; top: var(--hud-pad); right: calc(var(--hud-pad) + var(--hud-col) + 1.2cqh);
  width: 8cqh; height: 8cqh; padding: 0; font-size: 4.6cqh; color: #fff3c4; background: var(--hud-bg); border: .25cqh solid var(--hud-line); border-radius: var(--hud-r); box-shadow: var(--hud-shadow); }
body.td-mode.touch #hud > .hud-buttons.dock { display: none !important; }
body.td-mode.touch #hud > .hud-buttons.dock.open { display: grid !important; position: absolute !important; top: calc(var(--hud-pad) + 9cqh) !important; bottom: auto !important;
  right: calc(var(--hud-pad) + var(--hud-col) + 1.2cqh) !important; left: auto !important; width: 50cqh !important; grid-template-columns: repeat(5, 1fr) !important;
  gap: 1cqh !important; padding: 1.2cqh !important; z-index: 40; background: var(--hud-bg) !important; border: .25cqh solid var(--hud-line) !important; border-radius: var(--hud-r) !important; box-shadow: var(--hud-shadow) !important; }
body.td-mode.touch #hud > .hud-buttons.dock.open button { width: 100% !important; height: 8cqh !important; }
body.td-mode.touch #hud > .hud-buttons.dock.open button .px-ico { width: 6cqh; height: 6cqh; }
/* ซ้าย: ผู้เล่น → ปาร์ตี้ → แชท (เหนือจอย) */
body.td-mode.touch #chat { top: 44.5cqh !important; bottom: auto !important; left: var(--hud-pad) !important; width: 40cqh !important; font-size: 2cqh !important; }
body.td-mode.touch #chat-log { max-height: 10cqh !important; }
body.td-mode.touch #chat-input { display: none; }
body.td-mode.touch #chat:focus-within #chat-input { display: block; }
body.td-mode.touch #chat-toggle { top: 0; right: -4cqh; }
body.td-mode.touch .t-stick { bottom: 6cqh !important; left: calc(var(--hud-pad) + 1cqh + env(safe-area-inset-left, 0px)) !important; width: 32cqh !important; height: 32cqh !important; }
/* ขวา: เขต/แมพ → เควส (สั้นลง) → ปุ่มตี · ของที่ได้ อยู่ซ้ายปุ่มตี */
body.td-mode.touch #td-minimap { width: var(--hud-col) !important; }
body.td-mode.touch #td-hud .td-zone { width: var(--hud-col) !important; }
body.td-mode.touch .quest-track { max-height: 10cqh !important; }
body.td-mode.touch .t-atk { right: calc(var(--hud-pad) + 2cqh + env(safe-area-inset-right, 0px)) !important; bottom: 24cqh !important; width: 25cqh !important; height: 25cqh !important; font-size: 11cqh; }
body.td-mode.touch .t-fs { right: calc(var(--hud-pad) + 2cqh + env(safe-area-inset-right, 0px)) !important; bottom: 7cqh !important; width: 11cqh !important; height: 11cqh !important; }
body.td-mode.touch .loot-log { right: calc(var(--hud-pad) + 30cqh) !important; bottom: 32cqh !important; top: auto !important; width: 30cqh !important; max-height: 14cqh; }
/* ล่าง: แถบสกิลเล็กลงให้พ้นจอยและปุ่มจอ */
body.td-mode.touch .actionbar { bottom: calc(2.6cqh + .8cqh) !important; }
body.td-mode.touch .actionbar .skill, body.td-mode.touch .actionbar .slot { width: 6.2cqh !important; height: 6.2cqh !important; }
body.td-mode.touch .flask-btn { width: 5cqh; height: 6.2cqh; }
body.td-mode.touch #td-hud .td-act { bottom: 13cqh !important; }

/* ไม่ให้ข้อความโดนตัดครึ่งบรรทัด: จำกัดจำนวนแทนการตัดขอบ */
body.td-mode .quest-track div:nth-child(n+4) { display: none !important; }
body.td-mode.touch .quest-track div:nth-child(n+2) { display: none !important; }
body.td-mode .loot-log div:nth-last-child(n+5) { display: none !important; }
body.td-mode.touch .loot-log div:nth-last-child(n+4) { display: none !important; }
body.td-mode .quest-track, body.td-mode .loot-log { max-height: none !important; overflow: visible !important; }
body.td-mode #chat-log { background: none !important; }
body.td-mode #chat-log div { background: rgba(14,7,20,.55) !important; border-radius: .6cqh; }
body.td-mode #chat-log { max-height: none !important; }
body.td-mode #chat-log div:nth-last-child(n+7) { display: none; }
body.td-mode.touch #chat-log div:nth-last-child(n+3) { display: none; }

/* Hotbar: ปุ่ม ✕ เอาไอเทม/สกิลออกจากช่อง (เห็นตอนชี้เมาส์ · บนจอสัมผัสเห็นตลอด) */
#skillbar .skill .hb-x { position: absolute; top: .2cqh; right: .2cqh; z-index: 3; width: 2.4cqh; height: 2.4cqh; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5cqh; line-height: 1; color: #fff; background: rgba(150,30,24,.92); border: .15cqh solid #f3d98b;
  box-shadow: 0 .2cqh .5cqh rgba(0,0,0,.6); opacity: 0; transition: opacity .12s, transform .12s; cursor: pointer; }
#skillbar .skill:hover .hb-x { opacity: 1; }
#skillbar .skill .hb-x:hover { transform: scale(1.2); background: #c0392b; }
body.touch #skillbar .skill .hb-x { opacity: .85; width: 2.8cqh; height: 2.8cqh; }

/* ค่าสุ่มบนอุปกรณ์ (แบบ PoE) */
.affixes { display: flex; flex-wrap: wrap; gap: 0 .8em; font-size: .72em; line-height: 1.35; margin-top: .1em; }
.affixes.a1 span { color: #8ec5ff; } .affixes.a2 span, .affixes.a3 span { color: #d8b4ff; }
.affixes.a3 span { text-shadow: 0 0 6px rgba(216,180,255,.55); }
.loot-log div.lr2 { color: #8ff0c0; } .loot-log div.lr3 { color: #8ec5ff; border-color: rgba(106,184,255,.7); }
.loot-log div.lr4 { color: #e2c6ff; border-color: rgba(201,140,255,.85); box-shadow: 0 0 8px rgba(201,140,255,.45); }
.loot-log div.lr5 { color: #ffe08a; border-color: #ffc83d; box-shadow: 0 0 10px rgba(255,200,61,.5); }

/* ---------- แผนที่โลก (M) ---------- */
#map-panel .wm-hint { font-size: .55em; color: var(--muted); font-weight: 400; margin-left: .6em; }
.world-map.td-wm { display: block !important; max-height: none !important; overflow: visible !important; height: auto !important; }
.td-wm .wm-stage { position: relative; height: 54cqh; width: auto; margin: 0 auto; border: .25cqh solid var(--gold); border-radius: 1cqh; overflow: hidden; cursor: crosshair; background: #0d0714; }
.td-wm .wm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.td-wm .wm-tags { position: absolute; inset: 0; pointer-events: none; }
.td-wm .wm-tags > div { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; line-height: 1.1; }
.td-wm .wm-zone { bottom: auto; right: auto; padding: 0; border: none; background: none; display: block; font-size: 1em; }
.td-wm .wm-zone b { display: block; font-size: 2.2cqh; color: var(--c, #fff3c4); text-shadow: 0 0 .4cqh #000, 0 .2cqh .6cqh #000; letter-spacing: .03em; }
.td-wm .wm-zone small { font-size: 1.5cqh; color: #f6ecd9; text-shadow: 0 0 .4cqh #000; }
.td-wm .wm-camp { display: flex; align-items: center; gap: .4cqh; transform: translate(-50%, -50%) !important; }
.td-wm .wm-camp i { width: 1.1cqh; height: 1.1cqh; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 .5cqh #ff5a5a; }
.td-wm .wm-camp span { font-size: 1.2cqh; color: #ffd0d0; text-shadow: 0 0 .3cqh #000, 0 0 .3cqh #000; }
.td-wm .wm-camp em { color: #ffe08a; font-style: normal; }
.td-wm .wm-npc i { display: block; width: 1cqh; height: 1cqh; border-radius: 50%; background: #ffd35c; border: .15cqh solid #3a2410; }
.td-wm .wm-boss { display: flex; flex-direction: column; align-items: center; }
.td-wm .wm-boss i { font-style: normal; font-size: 2.6cqh; filter: drop-shadow(0 0 .6cqh #ff2d2d); animation: wmBoss 1s ease-in-out infinite; }
.td-wm .wm-boss span { font-size: 1.4cqh; color: #ffb3b3; text-shadow: 0 0 .3cqh #000, 0 0 .3cqh #000; }
.td-wm .wm-boss em { color: #ffe08a; font-style: normal; } .td-wm .wm-boss .st { color: #7dff9a; }
.td-wm .wm-boss.dead i { filter: grayscale(1) opacity(.55); animation: none; } .td-wm .wm-boss.dead .st { color: #aaa; }
@keyframes wmBoss { 50% { transform: scale(1.18); } }
.td-wm .wm-tip { position: absolute; z-index: 2; pointer-events: none; padding: .4cqh 1cqh; font-size: 1.7cqh; background: rgba(20,11,29,.92); border: .15cqh solid var(--gold); border-radius: .8cqh; white-space: nowrap; }
.td-wm .wm-tip small { color: var(--muted); }
.td-wm .wm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4cqh 2cqh; margin-top: 1cqh; font-size: 1.7cqh; color: var(--muted); }
.td-wm .wm-legend i { display: inline-block; width: 1.3cqh; height: 1.3cqh; border-radius: 50%; margin-right: .5cqh; vertical-align: middle; border: .15cqh solid #000; }
.td-wm .wm-legend .me { background: #2ecc71; border-color: #fff; } .td-wm .wm-legend .ally { background: #6ec8ff; } .td-wm .wm-legend .npc { background: #ffd35c; }
.td-wm .wm-legend .boss { background: #ff2d2d; } .td-wm .wm-legend .camp { background: #ff5a5a; }
#map-panel.window { width: 78cqh !important; }
#map-panel .hint { display: none; }

/* ============================================================
   ค่าพลังไอเทม: กล่องลอยแบบ PoE + สรุปผลต่อตัวละคร
   ============================================================ */
.item-tip { position: fixed; z-index: 200; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; font-size: clamp(12px, 2vh, 16px); max-width: min(94vw, 42em); }
.item-tip.hidden { display: none; }
.item-tip .tt-card { width: 19em; max-width: 46vw; padding: .6em .75em .55em; border-radius: 8px; line-height: 1.4; color: #f6ecd9;
  background: linear-gradient(180deg, rgba(38,22,50,.98), rgba(14,7,20,.98)); border: 1px solid rgba(232,199,102,.9); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.6); }
.item-tip .tt-card.cur { opacity: .92; border-color: rgba(200,200,200,.6); }
.item-tip .tt-top { font-size: .78em; color: #bfb3cc; margin-bottom: .15em; }
.item-tip .tt-name { font-size: 1.12em; font-weight: 600; color: #fff3c4; text-align: center; padding-bottom: .2em; border-bottom: 1px solid rgba(232,199,102,.35); }
.item-tip .tt-name.rn1 { color: #e6e6e6; } .item-tip .tt-name.rn2 { color: #8ff0c0; } .item-tip .tt-name.rn3 { color: #8ec5ff; } .item-tip .tt-name.rn4 { color: #d8b4ff; } .item-tip .tt-name.rn5 { color: #ffd35c; }
.item-tip .tt-meta { text-align: center; font-size: .82em; color: #cfc3dd; margin: .2em 0 .1em; }
.item-tip .tt-meta .bad { color: #ff7b72; font-weight: 600; }
.item-tip .tt-sec { margin-top: .35em; padding-top: .3em; border-top: 1px dashed rgba(232,199,102,.22); }
.item-tip .tt-h { font-size: .78em; color: #e8c766; margin-bottom: .1em; letter-spacing: .02em; }
.item-tip .st { font-size: .95em; }
.item-tip .st.aff.a1 { color: #8ec5ff; } .item-tip .st.aff.a2, .item-tip .st.aff.a3 { color: #d8b4ff; }
.item-tip .st.aff small { color: #9d8fb0; font-size: .78em; }
.item-tip .st.enhs { color: #f7dc6f; } .item-tip .st.cardl { color: #ffd6a5; }
.item-tip .tt-set { margin-top: .35em; font-size: .82em; color: #82e0aa; }
.item-tip .tt-desc { margin-top: .35em; font-size: .82em; color: #cfc3dd; }
.item-tip .tt-price { margin-top: .4em; font-size: .82em; color: #f3d98b; text-align: right; }
.item-tip .tt-imp { margin-top: .45em; padding: .35em .5em; border-radius: 6px; background: rgba(0,0,0,.35); }
.item-tip .upv, .item .imp .upv { color: #7dff9a; } .item-tip .dnv, .item .imp .dnv { color: #ff8a80; }
.vb { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; border-radius: 4px; font-size: .85em; font-weight: 700; margin-right: .2em; vertical-align: middle; }
.vb-up { background: #1e7a3c; color: #d9ffe2; } .vb-down { background: #8a2320; color: #ffe0dc; } .vb-mix { background: #8a6a12; color: #fff3c4; } .vb-same { background: #444; color: #ddd; }
.item .imp { font-size: .72em; margin-top: .15em; line-height: 1.45; }
.item .stl { font-size: .72em; color: #d9cfe6; margin-top: .1em; }
.item-tip .tt-card { max-height: calc(100vh - 12px); overflow: hidden; }

/* ---------- แมพต่างแดน: แถบแดนบนแผนที่ + หน้าต่างวาร์ป ---------- */
.td-wm .wm-realms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4cqh .6cqh; margin-top: .8cqh; font-size: 1.45cqh; }
.td-wm .wm-realms span { padding: .3cqh .9cqh; border-radius: .8cqh; border: .15cqh solid rgba(212,175,55,.35); background: rgba(20,10,28,.6); color: var(--muted); white-space: nowrap; }
.td-wm .wm-realms span em { font-style: normal; color: #f7dc6f; font-size: .9em; }
.td-wm .wm-realms span.here { border-color: #2ecc71; color: #eafaf1; background: rgba(46,204,113,.18); }
.td-wm .wm-realms span.been { color: #fdebd0; }
.td-wm .wm-realms span.lock { opacity: .55; }
.td-wm .wm-realms b { color: rgba(212,175,55,.6); font-weight: normal; }
.td-wm .wm-portal i { font-style: normal; }
#warp-panel.window { width: 60cqh !important; }
.warp-list { display: grid; gap: 1cqh; margin: .6cqh 0 1cqh; }
.warp-card { display: grid; grid-template-columns: 5.2cqh 1fr auto; align-items: center; gap: 1.2cqh; padding: 1cqh 1.3cqh; border-radius: 1.1cqh;
  border: .15cqh solid rgba(212,175,55,.35); background: linear-gradient(90deg, rgba(40,20,55,.85), rgba(20,10,28,.85)); }
.warp-card .wc-ic { font-size: 3.6cqh; text-align: center; filter: drop-shadow(0 0 .6cqh rgba(255,255,255,.25)); }
.warp-card b { display: block; font-size: 2cqh; color: #fdebd0; }
.warp-card small { display: block; font-size: 1.5cqh; color: var(--muted); line-height: 1.35; }
.warp-card button { min-width: 11cqh; font-size: 1.7cqh; padding: .8cqh 1.2cqh; }
.warp-card.here { border-color: #2ecc71; }
.warp-card.lock { opacity: .6; }
.warp-card.lock button { cursor: not-allowed; }