/* =====================================================================
   OUTRAGE UI — โครงสร้าง (layout) + สกินชั่วคราว
   - ส่วน "LAYOUT" = ตำแหน่ง ขนาด การจัดวาง → อย่าเปลี่ยนตอนใส่สกิน
   - ส่วน "SKIN" = สี กรอบ ปุ่ม → Codex จะส่งภาพกรอบ/ปุ่ม (9-slice PNG) มาแทนที่ทั้งหมด
     โดยแก้แค่ตัวแปร --ow-* และ class .ow-* ด้านล่าง
   ===================================================================== */

/* ---------------- SKIN v1 — ออกแบบโดย Codex (assets/ui/HANDOFF.md) ----------------
   ใช้ไฟล์ @2x ทุกชิ้น (คมบนจอมือถือ) → ค่า slice = ค่าใน HANDOFF × 2 */
@font-face { font-family: "OutrageLatin"; src: url("../../assets/ui/fonts/NotoSans-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OutrageLatin"; src: url("../../assets/ui/fonts/NotoSans-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OutrageThai"; src: url("../../assets/ui/fonts/NotoSansThai-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OutrageThai"; src: url("../../assets/ui/fonts/NotoSansThai-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --ow-font: "OutrageLatin", "OutrageThai", "Leelawadee UI", Tahoma, sans-serif;
  --ow-text: #48382E;
  --ow-text-dim: #8a765c;
  --ow-title-text: #FFF6E3;
  --ow-radius: 0;
  --ui: url("../../assets/ui/");
}
.ow-window { background: none; border: 4px solid transparent; border-image: url("../../assets/ui/window_frame@2x.png") 8 fill / 4px stretch; color: var(--ow-text); filter: drop-shadow(0 2px 3px rgba(40,25,10,.35)); }
.ow-titlebar { margin: -1px -1px 0; border: 0 solid transparent; border-width: 0 8px; border-image: url("../../assets/ui/titlebar@2x.png") 0 16 fill / 0 8px stretch; color: var(--ow-title-text); text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.ow-tb-btn { border: 0; background: url("../../assets/ui/tb_min_normal@2x.png") center / 100% 100% no-repeat; color: transparent; image-rendering: auto; }
.ow-tb-btn.ow-close { background-image: url("../../assets/ui/tb_close_normal@2x.png"); }
.ow-tb-btn.ow-min:hover { background-image: url("../../assets/ui/tb_min_hover@2x.png"); }
.ow-tb-btn.ow-min:active { background-image: url("../../assets/ui/tb_min_down@2x.png"); }
.ow-tb-btn.ow-close:hover { background-image: url("../../assets/ui/tb_close_hover@2x.png"); }
.ow-tb-btn.ow-close:active { background-image: url("../../assets/ui/tb_close_down@2x.png"); }
.ow-btn { border: 6px solid transparent; border-image: url("../../assets/ui/button_normal@2x.png") 16 fill / 6px stretch; background: none; color: var(--ow-text); }
.ow-btn:hover:not(:disabled) { border-image-source: url("../../assets/ui/button_hover@2x.png"); }
.ow-btn:active:not(:disabled) { border-image-source: url("../../assets/ui/button_down@2x.png"); }
.ow-btn:disabled { border-image-source: url("../../assets/ui/button_disabled@2x.png"); color: #a89577; }
.ow-btn.danger { color: #b0402f; }
.ow-slot { background: url("../../assets/ui/slot@2x.png") center / 100% 100% no-repeat; border: 0; image-rendering: auto; }
.sc-slot { background-image: url("../../assets/ui/slot33@2x.png"); }
.ow-bar { border: 3px solid transparent; border-image: url("../../assets/ui/bar_bg@2x.png") 8 fill / 3px stretch; background: none; box-sizing: border-box; }
.ow-bar i { border-image: url("../../assets/ui/bar_hp@2x.png") 8 fill / 2px stretch; }
.ow-bar.hp i { border-image-source: url("../../assets/ui/bar_hp@2x.png"); }
.ow-bar.hp.low i { border-image-source: url("../../assets/ui/bar_hp_low@2x.png"); }
.ow-bar.sp i { border-image-source: url("../../assets/ui/bar_sp@2x.png"); }
.ow-bar.exp.base i { border-image-source: url("../../assets/ui/bar_exp_base@2x.png"); }
.ow-bar.exp.job i { border-image-source: url("../../assets/ui/bar_exp_job@2x.png"); }
.ow-tab { border: 6px solid transparent; border-bottom-width: 0; border-image: url("../../assets/ui/tab_normal@2x.png") 16 16 0 fill / 6px 6px 0 stretch; background: none; color: var(--ow-text-dim); }
.ow-tab.active { border-image-source: url("../../assets/ui/tab_active@2x.png"); color: var(--ow-text); }
.ow-input { border: 6px solid transparent; border-image: url("../../assets/ui/input@2x.png") 16 fill / 6px stretch; background: none; color: var(--ow-text); outline: none; }
.ow-note { color: var(--ow-text-dim); }
.ch-tabs { border-bottom-color: #b78b45 !important; }
.ch-line.battle { color: #8a5a00; } .ch-line.talk { color: #285D5A; } .ch-line.system { color: #5b4a3c; }
.bi-menu .ow-btn { display: flex; align-items: center; justify-content: center; gap: 3px; }
.bi-menu .ow-btn::before { content: ""; width: 18px; height: 18px; flex: none; background: center / 100% 100% no-repeat; }
.bi-menu [data-m="status"]::before { background-image: url("../../assets/ui/icon_menu_status@2x.png"); }
.bi-menu [data-m="inventory"]::before { background-image: url("../../assets/ui/icon_menu_inventory@2x.png"); }
.bi-menu [data-m="equip"]::before { background-image: url("../../assets/ui/icon_menu_equip@2x.png"); }
.bi-menu [data-m="skill"]::before { background-image: url("../../assets/ui/icon_menu_skill@2x.png"); }
.bi-menu [data-m="map"]::before { background-image: url("../../assets/ui/icon_menu_map@2x.png"); }
.bi-menu [data-m="options"]::before { background-image: url("../../assets/ui/icon_menu_options@2x.png"); }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) {
  .ow-titlebar { border-image-source: url("../../assets/ui/titlebar_mobile@2x.png"); }
  .ow-tb-btn.ow-min { background-image: url("../../assets/ui/tb_min_normal_mobile@2x.png"); }
  .ow-tb-btn.ow-close { background-image: url("../../assets/ui/tb_close_normal_mobile@2x.png"); }
}

/* ---------------- LAYOUT (ห้ามเปลี่ยนตอนใส่สกิน) ---------------- */
.ow-layer { position: fixed; inset: 0; pointer-events: none; font-family: var(--ow-font); font-size: 12px; zoom: var(--ui-zoom, 1); }
.ow-window { position: absolute; pointer-events: auto; box-sizing: border-box; user-select: none; touch-action: none; }
.ow-window[hidden] { display: none; }
.ow-titlebar { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0; cursor: move; font-size: 12px; font-weight: 700; }
.ow-tb-btns { display: flex; gap: 2px; padding-right: 2px; }
.ow-title { padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ow-tb-btn { width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 13px; cursor: pointer; }
.ow-body { padding: 6px 7px 7px; }
.ow-window.minimized .ow-body > :not(.bi-mini) { display: none; }
.ow-window.minimized:not(.ow-basic) .ow-body { display: none; }
.ow-window:not(.minimized) .bi-mini { display: none; }
.ow-btn { font: inherit; font-size: 12px; padding: 0 2px; min-height: 22px; cursor: pointer; }
.ow-btn:disabled { cursor: default; }
.ow-btn.wide { display: block; width: 100%; margin-top: 6px; padding: 2px; min-height: 26px; }
.ow-lb { width: 20px; font-size: 11px; font-weight: 700; }
.ow-num { font-variant-numeric: tabular-nums; font-size: 11px; }
.ow-note { font-size: 11px; margin-top: 6px; text-align: center; }
.ow-bar { position: relative; flex: 1; height: 11px; overflow: hidden; }
.ow-bar i { display: block; height: 100%; width: 100%; box-sizing: border-box; transition: width .15s linear; }
.ow-bar em { position: absolute; inset: 0; font-style: normal; font-size: 9px; line-height: 9px; text-align: center; color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000; font-variant-numeric: tabular-nums; }

/* ข้อมูลพื้นฐาน */
.bi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bi-head b { font-size: 13px; } .bi-job { color: var(--ow-text-dim); font-size: 11px; }
.bi-row { display: flex; align-items: center; gap: 5px; margin: 3px 0; }
.bi-row .ow-bar { height: 15px; } .bi-row .ow-bar em { font-size: 10px; line-height: 9px; }
.bi-row.lv { font-size: 11px; } .bi-row.lv > span:first-child { width: 72px; white-space: nowrap; }
.bi-row.lv .ow-bar { height: 9px; border-width: 2px; } .bi-row.lv .ow-bar i { border-width: 1px; } .bi-row.lv .ow-num { width: 40px; text-align: right; }
.bi-row.small { justify-content: space-between; font-size: 11px; color: var(--ow-text-dim); margin-top: 5px; }
.bi-row.small b { color: var(--ow-text); font-weight: 600; }
.bi-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.bi-menu .ow-btn { white-space: nowrap; overflow: hidden; }
.bi-mini { display: flex; align-items: center; gap: 4px; padding: 0; }
.bi-mini .ow-bar { height: 10px; border-width: 2px; } .bi-mini span { font-size: 11px; white-space: nowrap; }

/* สถานะ */
.st-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.st-stat { cursor: pointer; border-radius: 3px; padding: 0 2px; }
.st-stat.sel { background: var(--ow-sel, rgba(183,139,69,.18)); }
.st-stat .st-v { flex: none; min-width: 22px; }
.st-bonus { flex: 1; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ow-good, #2f7d39); padding-left: 2px; }
.st-sub { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--ow-line, rgba(120,90,50,.25)); }
.st-sub .st-k { width: auto; white-space: nowrap; }
.st-info.ow-input { height: auto; user-select: none; margin-top: 6px; padding: 2px 4px; font-size: 11px; line-height: 1.45; min-height: 58px; }
.st-info-h { font-weight: 700; font-size: 12px; } .st-info-g b { color: var(--ow-good, #2f7d39); white-space: nowrap; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 20px; }
.st-k { font-weight: 700; font-size: 11px; color: var(--ow-text-dim); width: 38px; }
.st-row b { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.st-up { padding: 0; font-size: 9px; min-height: 18px; width: 22px; border-width: 4px; }
.st-cost { width: 14px; text-align: right; font-size: 10px; color: var(--ow-text-dim); font-variant-numeric: tabular-nums; }
.st-pts { font-size: 13px; }
.st-foot { margin-top: 8px; font-size: 11px; }

/* ช่องไอเทม/สกิล */
.ow-slots { display: grid; grid-template-columns: repeat(var(--cols), 30px); gap: 3px; justify-content: center; }
.ow-slots .ow-slot { width: 30px; height: 30px; box-sizing: border-box; }

/* ไอเทม / สวมใส่ / ร้าน (MVP 3) */
.iv-grid { max-height: 200px; overflow-y: auto; touch-action: pan-y; margin-top: 2px; }
.iv-cell { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.iv-chip { width: 20px; height: 20px; border-radius: 5px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(40,25,10,.6); }
.iv-qty { position: absolute; right: 1px; bottom: 0; font-size: 9px; color: var(--ow-text); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.iv-cmp { position: absolute; right: 1px; top: -1px; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; text-shadow: 0 0 2px #fff, 0 0 2px #fff; pointer-events: none; }
.iv-cmp.up { color: #1f8a2e; } .iv-cmp.down { color: #c0392b; } .iv-cmp.mixed { color: #c08a00; } .iv-cmp.no { color: #777; }
.ow-tip { position: fixed; z-index: 9999; display: none; max-width: 300px; padding: 6px 8px; font: 12px/1.45 var(--ow-font); color: var(--ow-text); pointer-events: none;
  border: 4px solid transparent; border-image: url("../../assets/ui/window_frame@2x.png") 8 fill / 4px stretch; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.tip-name { font-weight: 700; font-size: 13px; } .tip-lines { color: var(--ow-text); opacity: .9; }
.tip-name.tier-uncommon { color: #2f7d39; } .tip-name.tier-rare { color: #2559a8; } .tip-name.tier-epic { color: #7434ad; } .tip-name.tier-legend { color: #c4620a; }
.cmp { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--ow-line, rgba(120,90,50,.3)); }
.cmp-head { font-weight: 700; margin-bottom: 3px; } .cmp-head.up { color: var(--ow-good, #2f7d39); } .cmp-head.down { color: var(--ow-bad, #c0392b); } .cmp-head.mixed { color: #c08a00; } .cmp-head.worn { color: #b0402f; margin-top: 4px; }
.cmp-block { color: var(--ow-bad, #c0392b); font-weight: 700; }
.cmp-grid { display: grid; grid-template-columns: auto 3em 4em 3em; column-gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.cmp-grid > b, .cmp-grid > i { text-align: right; font-style: normal; } .cmp-grid .h { font-size: 10px; font-weight: 400; color: var(--ow-text-dim); }
.cmp-grid .cur { color: var(--ow-text-dim); font-weight: 400; }
.cmp-grid i.up { color: var(--ow-good, #2f7d39); font-weight: 700; } .cmp-grid i.down { color: var(--ow-bad, #c0392b); font-weight: 700; } .cmp-grid i.same { color: var(--ow-text-dim); }
.cmp-sub { font-size: 11px; color: var(--ow-text-dim); } .cmp-sp { font-size: 11px; font-weight: 700; } .cmp-sp.up { color: var(--ow-good, #2f7d39); } .cmp-sp.down { color: var(--ow-bad, #c0392b); }
.cmp-cur { font-size: 10px; color: var(--ow-text-dim); margin-top: 2px; }
.iv-info .cmp { font-size: 11px; }
.iv-eq { position: absolute; left: 1px; top: 0; font-size: 9px; font-style: normal; font-weight: 700; color: #b0402f; }
.iv-info { min-height: 16px; font-size: 11px; margin-top: 4px; color: var(--ow-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-foot { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; }
.eq-row, .sh-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.eq-wrap { display: grid; grid-template-columns: 1fr 128px 1fr; gap: 6px; align-items: start; }
.eq-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eq-box { display: flex; align-items: center; gap: 5px; height: 38px; cursor: pointer; border-radius: 3px; min-width: 0; }
.eq-box:hover { background: rgba(183,139,69,.12); }
.eq-box .ow-slot { width: 34px; height: 34px; flex: none; }
.eq-col.right .eq-box { flex-direction: row-reverse; text-align: right; }
.eq-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.eq-txt .eq-slot { width: auto; font-size: 10px; }
.eq-txt .eq-name { font-size: 11px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.eq-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eq-portrait.ow-input { position: relative; width: 120px; height: 150px; overflow: hidden; box-sizing: border-box; padding: 0; }
.eq-char { position: absolute; left: 50%; bottom: -12px; background-repeat: no-repeat; image-rendering: auto; }
.eq-name-me { font-size: 11px; font-weight: 700; text-align: center; }
.eq-rot { display: flex; gap: 4px; } .eq-rot .ow-btn { padding: 0 8px; min-height: 22px; font-size: 10px; }
.eq-hint { margin-top: 6px; text-align: center; }
.eq-row .ow-slot, .sh-row .ow-slot { width: 30px; height: 30px; flex: none; }
.eq-slot { width: 86px; font-size: 11px; color: var(--ow-text-dim); }
.eq-name, .sh-name { flex: 1; font-size: 12px; }
.sh-list { max-height: 260px; overflow-y: auto; touch-action: pan-y; }
.sh-price { font-size: 12px; font-variant-numeric: tabular-nums; }
.sh-row:hover, .eq-row:hover { background: rgba(183,139,69,.12); }
/* ชื่อ NPC: ใหญ่ อ่านง่ายบนพื้นสว่าง (ตัวหนา + ขอบดำ + พื้นเข้มโปร่ง) · ขยายตามขนาด UI */
.actor-label.npc { color: #fff3c8; font-weight: 700; font-size: calc(15px * var(--ui-zoom, 1)); padding: 1px calc(7px * var(--ui-zoom, 1)); border-radius: 9px;
  background: rgba(20, 14, 8, .55); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.al-st { display: flex; justify-content: center; gap: 1px; margin-top: 1px; }
.al-st:empty { display: none; }
.al-say { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; max-width: calc(220px * var(--ui-zoom, 1)); width: max-content;
  padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,.93); color: #1b1b28; font-size: calc(12px * var(--ui-zoom, 1)); font-weight: 600; line-height: 1.3; white-space: normal; word-break: break-word; box-shadow: 0 1px 3px rgba(0,0,0,.4); text-shadow: none; }
.al-say[hidden] { display: none; }
.al-b { width: 14px; height: 14px; display: grid; place-items: center; font: 700 7px/1 var(--ow-font); font-style: normal; color: #fff; border-radius: 3px; background: rgba(60,120,190,.9); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.al-b.bad { background: rgba(170,50,120,.9); }
.al-b .ow-icon { width: 14px; height: 14px; }
.actor-label.item { color: #fff; background: rgba(0,0,0,.45); padding: 0 4px; border-radius: 3px; }
.gl-cmp { font-style: normal; font-weight: 700; } .gl-cmp.up { color: #7dff8a; } .gl-cmp.down { color: #ff8a7a; } .gl-cmp.mixed { color: #ffd060; } .gl-cmp.no { color: #bbb; }
.actor-label.warp { color: #bfeeff; font-weight: 700; font-size: calc(14px * var(--ui-zoom, 1)); background: rgba(10, 30, 50, .5); padding: 1px 6px; border-radius: 9px; }

/* มินิแมพ */
.mm-cv { display: block; width: 128px; height: 128px; image-rendering: pixelated; }
.mm-xy { text-align: center; margin-top: 2px; }
.ow-minimap .ow-body { padding: 5px; }

/* คีย์ลัด */
.sc-row { display: grid; grid-template-columns: repeat(9, 33px); gap: 3px; }
.sc-slot { position: relative; width: 33px; height: 33px; box-sizing: border-box; cursor: pointer; }
.sc-key { position: absolute; left: 2px; top: 1px; font-size: 9px; color: var(--ow-text-dim); }
.sc-ic { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ow-text); pointer-events: none; }
.sc-slot.filled .sc-key { color: var(--ow-text); }
.sc-assigning .sc-slot { outline: 2px solid #e6b44a; outline-offset: -2px; animation: sc-blink .8s infinite alternate; }
@keyframes sc-blink { to { outline-color: transparent; } }
.sc-busy .sc-slot.filled { filter: brightness(.6); }
/* หน้าต่างสกิล (MVP 4) — โครงวางตำแหน่ง ใช้ชิ้นสกิน v1 ของ Codex; ไอคอนสกิลจริงรอ Codex */
.sk-head { display: flex; justify-content: space-between; gap: 8px; padding: 2px 2px 6px; font-size: 12px; }
.sk-list { max-height: 440px; overflow-y: auto; display: grid; gap: 3px; padding-right: 2px; }
.sk-row { display: grid; grid-template-columns: 33px 1fr auto 26px 26px; align-items: center; gap: 5px; font-size: 12px; }
.sk-row.locked { opacity: .62; }
.sk-ic { width: 33px; height: 33px; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.sk-ic.usable, .sk-info[data-use] { cursor: pointer; }
.sk-nm { font-weight: 700; } .sk-sub { font-size: 10px; color: var(--ow-text-dim); }
.sk-as { padding: 0; font-size: 10px; min-height: 22px; width: 26px; border-width: 4px; }
.sk-jobs { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(72,56,46,.25); }
.sk-jobs-t { font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.sk-jobs-b { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sk-jobbtn { font-size: 11px; padding: 2px 4px; }
.ow-buffs { position: absolute; left: 248px; top: 6px; display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; pointer-events: none; }
.ow-buffs .ow-buff { pointer-events: auto; cursor: help; } /* ชี้/แตะดูว่าเป็นบัฟอะไร */
.buff-tip { position: absolute; z-index: 30; min-width: 120px; max-width: 220px; padding: 5px 8px; border: 1px solid rgba(214,176,98,.7); border-radius: 6px; background: rgba(16,14,34,.95); color: #f2ead8; font-size: 12px; line-height: 1.45; pointer-events: none; }
.buff-tip b { display: block; font-size: 13px; margin-bottom: 2px; } .buff-tip .bt-good { color: #9fe0ff; } .buff-tip .bt-bad { color: #ff9ad0; } .buff-tip .ow-note { margin-top: 2px; }
.ow-buff { width: 30px; height: 30px; display: grid; place-items: center; position: relative; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px #000; border-radius: 4px; background: rgba(60,120,190,.85); }
.ow-buff.bad { background: rgba(160,60,140,.85); }
.ow-buff b { position: absolute; right: 1px; bottom: 0; font-size: 9px; }
.ow-icon { width: 24px; height: 24px; display: block; pointer-events: none; }
.sc-ic .ow-icon { width: 26px; height: 26px; }
.ow-buff.has-ic { background: none; } .ow-buff.has-ic .ow-icon { width: 30px; height: 30px; }
.ow-buff.has-ic .iv-img { width: 30px; height: 30px; } /* บัฟที่ใช้ไอคอนไอเทมแทน (ยาเร่ง/ผลึกธาตุ/VIP) */
.ow-shortcut .ow-body { padding: 4px; }
/* ออโต้ฟาร์ม — ภาพปุ่ม/จอยจาก Codex (TASK_08) ใช้เมื่อมีไฟล์ ไม่งั้นใช้ปุ่มสกินเดิมชั่วคราว */
.ow-auto { position: absolute; left: 826px; top: 10px; display: flex; gap: 4px; align-items: center; z-index: 5; pointer-events: auto; }
.ow-auto .au-btn { min-width: 64px; height: 36px; font-weight: 700; position: relative; }
.ow-auto.on:not(.art) .au-btn { color: #2f7a2f; border-image-source: url("../../assets/ui/button_hover@2x.png"); }
.ow-auto .au-set { width: 30px; height: 30px; padding: 0; }
.ow-auto.art .au-btn { width: 52px; height: 52px; min-width: 0; border: 0; background: url("../../assets/ui/auto_off@2x.png") center / 100% 100% no-repeat; cursor: pointer; }
.ow-auto.art.on .au-btn { background-image: url("../../assets/ui/auto_on@2x.png"); }
.ow-auto.art .au-btn span { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.ow-auto.art .au-glow { position: absolute; inset: -10px; background: url("../../assets/ui/auto_on_glow@2x.png") center / 100% 100% no-repeat; opacity: 0; pointer-events: none; }
.ow-auto.art.on .au-glow { opacity: 1; animation: au-spin 3s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.ow-auto.art .au-set { width: 28px; height: 28px; border: 0; background: url("../../assets/ui/auto_settings@2x.png") center / 100% 100% no-repeat; cursor: pointer; }
.au-row { display: grid; grid-template-columns: 1fr 96px 26px 30px; align-items: center; gap: 4px; font-size: 12px; margin: 3px 0; }
.au-lb { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.au-row input[type=range] { width: 96px; }
.au-flags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; font-size: 12px; }
.au-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.au-sec { font-weight: 700; font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.au-list { display: flex; flex-wrap: wrap; gap: 2px 10px; } .au-none { color: var(--ow-text-dim); font-size: 11px; }
.au-ic { width: 18px; height: 18px; vertical-align: middle; margin-right: 2px; }
.ow-topmenu { position: fixed; right: 172px; top: 4px; display: grid; grid-template-columns: repeat(8, 40px); grid-auto-flow: row; gap: 2px 2px; font-family: var(--ow-font); direction: rtl; z-index: 6; pointer-events: auto; zoom: var(--ui-zoom, 1); }
.ow-topmenu[hidden] { display: none; } .ow-topmenu.closed .tm-btn:not(.tm-toggle) { display: none; }
.ow-topmenu .tm-btn { width: 40px; height: 53px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; direction: ltr; }
.ow-topmenu .tm-btn img { width: 38px; height: 38px; display: block; flex: none; transition: transform .1s; } .ow-topmenu .tm-btn:hover img { transform: scale(1.1); }
/* ป้ายชื่อใต้ไอคอน: ฟอนต์เกม · ขอบเข้มอ่านได้บนพื้นสว่าง · บรรทัดเดียว ไม่ล้นช่อง (ทับช่องข้าง ๆ ไม่ได้) */
.ow-topmenu .tm-lb { display: block; width: 100%; margin-top: 1px; font: 700 10px/14px var(--ow-font); color: #fff4d8; white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: center; letter-spacing: -0.1px;
  text-shadow: 0 0 2px #1a1230, 0 0 2px #1a1230, 1px 1px 0 #1a1230, -1px 1px 0 #1a1230, 1px -1px 0 #1a1230, -1px -1px 0 #1a1230; pointer-events: none; }
.ow-topmenu .tm-btn.on .tm-lb { color: #ffd76a; }
@media (max-width: 900px) { .ow-topmenu { right: 152px; top: 76px; grid-template-columns: repeat(4, 38px); } .ow-topmenu .tm-btn { width: 38px; height: 49px; } .ow-topmenu .tm-btn img { width: 34px; height: 34px; } } /* มือถือ: 4 คอลัมน์ ซ้ายของแผนที่เล็ก ใต้คีย์ลัด (เดิมใต้แผนที่ ชนกล่องแผนที่ที่สูงขึ้นจากบรรทัดคนออนไลน์) */
.ow-dash { position: fixed; right: 150px; bottom: 34px; width: 60px; height: 60px; padding: 0; border: 0; background: none; z-index: 6; pointer-events: auto; touch-action: none; }
.ow-dash[hidden] { display: none; } .ow-dash img { width: 100%; height: 100%; } .ow-dash.cooling img { filter: grayscale(.8) brightness(.6); }
.ow-dash.pc { position: absolute; left: 950px; /* + ปุ่มพักจอ 🌙 (5 พ.ย.) */ top: 10px; right: auto; bottom: auto; width: 52px; height: 52px; z-index: 5; cursor: pointer; } /* คอม: ต่อจากปุ่มออโต้ (826 + 84 + 6) */
.ow-dash.pc .ds-cd { font-size: 17px; } .ow-dash.pc .ds-key { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
.ow-dash:not(.pc) { right: calc(var(--sc-w, 132px) + 16px); } /* มือถือ: ซ้ายของแถบคีย์ลัด (เดิมทับหัวแถบ · ผู้ใช้แจ้ง 4 พ.ย.) */
.ow-dash .ds-cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 20px var(--ow-font); text-shadow: 0 1px 3px #000; pointer-events: none; }
.ow-joy { position: fixed; left: 14px; bottom: 58px; width: 120px; height: 120px; touch-action: none; z-index: 6; pointer-events: auto; user-select: none; -webkit-user-select: none; }
.ow-joy .jy-base { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.ow-joy:not(.art) .jy-base { background: rgba(255,246,227,.18); border: 3px solid rgba(255,246,227,.55); box-sizing: border-box; }
.ow-joy .jy-knob { position: absolute; left: 32px; top: 32px; width: 56px; height: 56px; border-radius: 50%; pointer-events: none; }
.ow-joy:not(.art) .jy-knob { background: rgba(255,246,227,.85); border: 2px solid #8a6a3a; box-sizing: border-box; }
.ow-joy.active:not(.art) .jy-knob { background: #fff3c4; }

/* แชท */
.ch-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ow-panel-border); margin: -2px 0 3px; }
.ow-tab { font: inherit; font-size: 11px; padding: 0 6px; height: 22px; cursor: pointer; margin-bottom: -1px; }
.ch-log { height: 104px; overflow-y: auto; font-size: 12px; line-height: 1.35; user-select: text; touch-action: pan-y; }
.ch-log[data-filter="battle"] .ch-line:not(.battle) { display: none; }
.ch-log[data-filter="system"] .ch-line:not(.system):not(.gm):not(.announce):not([class*="rare-"]) { display: none; }
.ch-form { margin-top: 4px; }
.ow-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 0 2px; height: 26px; user-select: text; }

/* ตั้งค่า / ตาย */
.op-row { display: flex; gap: 6px; align-items: center; }
.pn-list { max-height: 360px; overflow-y: auto; font-size: 12px; user-select: text; }
.pn-item + .pn-item { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(72,56,46,.25); }
.pn-head { display: flex; justify-content: space-between; gap: 6px; } .pn-head span { color: var(--ow-text-dim); font-size: 11px; white-space: nowrap; flex: none; }
.pn-item ul { margin: 4px 0 0; padding-left: 16px; } .pn-item li { margin: 2px 0; }
.dw-text { margin: 4px 0 2px; text-align: center; font-size: 14px; }

/* FPS + ข้อความแจ้งเตือน */
.ow-perf { position: fixed; right: 6px; bottom: 6px; color: #fff; font: 11px var(--ow-font); background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 3px; pointer-events: none; }
.ow-toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(20,24,34,.85); color: #fff; font: 13px var(--ow-font); padding: 6px 14px; border-radius: 4px; pointer-events: none; }

/* ---------------- มือถือ ---------------- */
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) {
  .ow-layer { font-size: 13px; }
  .ow-titlebar { height: 26px; font-size: 13px; }
  .ow-tb-btn { width: 24px; height: 22px; font-size: 15px; line-height: 18px; }
  .ow-btn { font-size: 13px; padding: 5px 6px; }
  .ow-basic { width: 188px !important; }
  .bi-menu .ow-btn { padding: 1px 0; font-size: 10px; min-height: 40px; gap: 0; flex-direction: column; line-height: 1.15; border-width: 4px; } /* ไอคอนบน ชื่อล่าง — กันชื่อโดนตัด ("สถาน▸") */
  .bi-menu .ow-btn::before { width: 18px; height: 18px; }
  .ow-equip { width: min(392px, 96vw) !important; } .eq-wrap { grid-template-columns: 1fr 104px 1fr; } .eq-portrait.ow-input { width: 100px; height: 130px; }
  .eq-box { height: 42px; } .eq-box .ow-slot { width: 38px; height: 38px; }
  .ow-status { width: min(400px, 96vw) !important; }
  .ow-status .st-stat { height: 25px; } .ow-status .st-col:last-child .st-row { height: 20px; } .st-sub .st-row { height: 18px; } .st-sub { margin-top: 2px; padding-top: 2px; }
  .st-foot { margin-top: 2px; } .st-foot .ow-note { display: none; } .st-info.ow-input { margin-top: 3px; min-height: 0; line-height: 1.3; }
  .ow-status .ow-body { max-height: calc(100vh - 34px); overflow-y: auto; }
  .iv-info { max-height: 27vh; overflow-y: auto; } .iv-info .cmp-cur { display: none; } .iv-info .cmp { margin-top: 2px; padding-top: 2px; }
  .st-row { height: 28px; }
  .st-up { padding: 0; min-height: 24px; width: 28px; }
  .ow-minimap { width: 108px !important; }
  .mm-cv { width: 96px; height: 96px; }
  .ow-chat { width: min(230px, 56vw) !important; }
  .ch-log { height: 64px; }
  .ow-shortcut { left: auto !important; right: 6px !important; top: auto !important; bottom: 28px !important; width: auto !important; }
  .sc-row { grid-template-columns: repeat(3, 40px); gap: 4px; }
  .sc-slot { width: 40px; height: 40px; }
  .sk-row { grid-template-columns: 36px 1fr auto 30px 30px; } .sk-ic { width: 36px; height: 36px; }
  .sk-as { min-height: 28px; width: 30px; }
  .ow-buffs { left: 6px; top: auto; bottom: 200px; }
  .ow-auto { left: auto; right: 10px; top: auto; bottom: 212px; }
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) { max-width: 94vw; }
}

/* มือถือแนวนอน (จอเตี้ย): ย่อทุกอย่างลง ให้เห็นเกมมากขึ้น */
@media (pointer: coarse) and (max-height: 520px) {
  .ow-auto { bottom: auto; top: 150px; } /* ใต้มินิแมพ (เดิม bottom: 212px ชนขอบล่างมินิแมพ) */
  .bi-menu .ow-btn { min-height: 32px; } /* หน้าต่างข้อมูลเตี้ยลง ไม่ชนจอยสติ๊ก */
  .ow-joy { bottom: 44px; }
  .ow-layer { font-size: 11px; }
  .ow-titlebar { height: 22px; font-size: 12px; }
  .ow-tb-btn { width: 22px; height: 18px; font-size: 13px; line-height: 14px; }
  .ow-body { padding: 4px 6px 5px; }
  .ow-btn { font-size: 11px; padding: 3px 4px; }
  .ow-basic { width: 170px !important; }
  .bi-row { margin: 1px 0; } .bi-menu { gap: 2px; margin-top: 4px; }
  .bi-row.small { display: none; }
  .ow-minimap { width: 92px !important; }
  .mm-cv { width: 80px; height: 80px; }
  .sc-row { grid-template-columns: repeat(3, 34px); gap: 3px; }
  .sc-slot { width: 34px; height: 34px; }
  /* หน้าต่างสูงกว่าจอ (ผู้เล่นแจ้ง 4 พ.ย.: ร้านค้าล้นจอ ปุ่มซื้อโดนบัง เลื่อนไม่ได้) — เลื่อนที่ตัวเนื้อหา (หน้าต่างตั้ง touch-action:none ไว้ลาก = เลื่อนที่ตัวหน้าต่างไม่ได้บนจอสัมผัส) */
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) { max-height: calc(100vh - 8px); overflow: hidden; }
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) > .ow-body { max-height: calc(100vh - 34px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; box-sizing: border-box; }
}

/* ---------- หน้าแรก: ล็อกอิน / เลือกตัวละคร / สร้างตัวละคร (OUTRAGE GALAXY) ----------
   โครงอย่างเดียว — สกินมาจาก .ow-window/.ow-btn/.ow-input ด้านบน · ภาพพื้นหลัง/โลโก้รอ Codex (front_bg, logo) */
.fr-root { position: fixed; inset: 0; z-index: 50; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px 10px; box-sizing: border-box;
  font-family: var(--ow-font); font-size: 13px; color: var(--ow-text); zoom: var(--ui-zoom, 1); user-select: text; -webkit-user-select: text; touch-action: auto;
  background: radial-gradient(ellipse at 50% 35%, #2b3a63 0%, #121a33 55%, #070a14 100%); }
.fr-root.art { background: #070a14 url("../../assets/ui/front_bg.png") center / cover no-repeat; }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) { .fr-root.art { background-image: image-set(url("../../assets/ui/front_bg.webp") type("image/webp"), url("../../assets/ui/front_bg.png") type("image/png")); } }
.fr-logo { text-align: center; }
.fr-root > :first-child { margin-top: auto; } .fr-root > :last-child { margin-bottom: auto; }
.fr-title { margin: 0; font-size: 44px; letter-spacing: 4px; color: #ffe9b8; text-shadow: 0 0 18px rgba(120,160,255,.55), 0 3px 0 #3a2410; }
.fr-logo.small .fr-title { font-size: 28px; }
.fr-logo-img { max-width: min(520px, 86vw); max-height: 180px; }
.fr-logo.small .fr-logo-img { max-height: 90px; }
.fr-msg { color: #d8e0ff; }
.fr-panel { position: relative; left: auto; top: auto; width: min(360px, 94vw); box-sizing: border-box; flex: 0 0 auto; }
.fr-panel .ow-body { padding: 10px 12px 12px; }
.fr-panel.fr-lobby { width: min(560px, 96vw); }
.fr-panel:has(.fr-create) { width: min(620px, 96vw); }
.fr-form { display: flex; flex-direction: column; gap: 8px; }
.fr-form label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.fr-form .ow-input { font: inherit; font-size: 14px; padding: 3px 4px; min-height: 26px; }
.fr-root .ow-btn { font-size: 13px; min-height: 28px; padding: 0 8px; }
.fr-main { font-weight: 700; }
.fr-alt { color: var(--ow-text-dim); }
.fr-err { min-height: 18px; color: #b0402f; font-weight: 600; }
.fr-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fr-row .fr-main { flex: 1 1 160px; }
.fr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.fr-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 190px; font: inherit; cursor: pointer;
  border: 6px solid transparent; border-image: url("../../assets/ui/slot@2x.png") 14 fill / 6px stretch; background: none; color: var(--ow-text); }
.fr-slot.sel { border-image-source: url("../../assets/ui/slot_selected@2x.png"); }
.fr-slot canvas { width: 120px; height: 120px; image-rendering: auto; }
.fr-slot b { font-size: 14px; }
.fr-slot span { font-size: 11px; color: var(--ow-text-dim); }
.fr-slot.empty { justify-content: center; color: var(--ow-text-dim); }
.fr-plus { font-size: 34px !important; line-height: 1; }
.fr-del { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.fr-del[hidden] { display: none; }
.fr-del span { flex: 1 1 100%; color: #b0402f; }
.fr-del .ow-input { flex: 1; font: inherit; min-height: 26px; }
.fr-create { display: flex; gap: 12px; align-items: flex-start; }
.fr-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.fr-preview canvas { width: 160px; height: 160px; border: 6px solid transparent; border-image: url("../../assets/ui/slot@2x.png") 14 fill / 6px stretch; }
.fr-create .fr-form { flex: 1; min-width: 0; }
.fr-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-weight: 600; }
.fr-opt { min-width: 34px; }
.fr-opt.sel { outline: 2px solid #e0a83a; outline-offset: -1px; font-weight: 700; }
.fr-stats { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.fr-pair { display: grid; grid-template-columns: 54px 30px 1fr 30px 54px; align-items: center; gap: 4px; }
.fr-pair .ow-btn { min-width: 0; padding: 0; }
.fr-st { display: flex; gap: 4px; align-items: baseline; }
.fr-pair .fr-st:last-child { justify-content: flex-end; }
.fr-st b { font-size: 12px; } .fr-st i { font-style: normal; font-size: 15px; font-weight: 700; }
.fr-bar { height: 10px; background: #c9b896; border: 1px solid #8a765c; position: relative; }
.fr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e7b85a, #b8822c); }
@media (max-width: 560px) {
  .fr-create { flex-direction: column; align-items: stretch; }
  .fr-preview { flex-direction: row; justify-content: center; }
  .fr-preview canvas { width: 120px; height: 120px; }
  .fr-preview .fr-row { flex-direction: column; }
  .fr-slot { min-height: 150px; } .fr-slot canvas { width: 80px; height: 80px; }
  .fr-title { font-size: 32px; }
}
.au-mobs { max-height: 120px; overflow-y: auto; }
.au-mobs .au-chk i { font-style: normal; font-size: 10px; color: var(--ow-text-dim); }

/* ---------- คุย NPC + แถบเควส (โครงอย่างเดียว ใช้สกินกรอบ/ปุ่มเดิม) ---------- */
.dl-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.dl-text { min-height: 60px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.dl-row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.dl-btn { min-height: 26px; padding: 0 10px; }
.dl-main { font-weight: 700; }
.qt-item { display: flex; flex-direction: column; gap: 3px; }
.qt-item b { font-size: 12px; }
.qt-step { font-size: 12px; line-height: 1.45; color: var(--ow-text); }
.qt-step .ow-num { margin-left: 3px; font-weight: 700; }
.qt-auto { min-height: 24px; font-size: 11px; }
.qt-auto.on { font-weight: 700; }
.dl-choices { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.dl-choice { text-align: left; min-height: 28px; padding: 0 10px; font-size: 13px; }
.st2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st2-h { font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.st2-grid { display: grid; grid-template-columns: repeat(5, 34px); gap: 2px; max-height: 210px; overflow-y: auto; align-content: start; }
.st3-win .ow-body { position: relative; }
.st3-bank[hidden] { display: none; }
.st3-bank { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; margin-bottom: 6px; border: 1px solid rgba(214, 176, 98, .45); border-radius: 6px; background: rgba(0, 0, 0, .22); }
.st3-bz { color: #ffd76a; font-size: 14px; }
.st3-bctl { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.st3-amt { width: 110px; }
.st3-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.st3-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.st3-tab.on { filter: brightness(1.45); box-shadow: 0 0 0 1px #ffd76a inset; }
.st3-bar .st3-q { flex: 1 1 140px; width: auto; min-width: 110px; }
.st3-bar .st3-sort { flex: 0 0 auto; width: auto; }
.st3-bctl .st3-amt, .st3-qr .st3-qn { flex: 0 0 auto; }
.st3-cols { grid-template-columns: 1fr 1.3fr; }
.st3-grid { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 3px; min-height: 120px; max-height: min(44vh, 340px); overflow-y: auto; align-content: start; }
.st3-many { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.st3-qty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; gap: 6px; min-width: 260px; padding: 10px; border: 2px solid #b48cff; border-radius: 8px; background: rgba(14, 10, 30, .97); }
.st3-qty[hidden] { display: none; }
.st3-qr { display: flex; gap: 4px; align-items: center; }
.st3-qn { width: 90px; }
.sk-jobhint { font-size: 12px; font-weight: 600; }
/* ลากไอเทมไปคีย์ลัด */
.iv-ghost { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; opacity: .85; zoom: var(--ui-zoom, 1); }
.iv-ghost .ow-slot { width: 34px; height: 34px; }
body.sc-dragging .sc-slot { outline: 2px dashed rgba(224, 168, 58, .6); outline-offset: -2px; }
.sc-slot.drop { outline: 2px solid #e0a83a !important; }
.mh-sk.drop { outline: 3px solid #e0a83a; border-radius: 50%; } /* มือถือ: ลากไอเทมมาวางปุ่มวงกลม */
.sc-item { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.sc-qty { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: var(--ow-text); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.sc-slot.empty-item { opacity: .45; }
.ev-rates { position: fixed; right: 8px; top: 196px; padding: 2px 8px; border-radius: 10px; background: rgba(120, 60, 190, .82); color: #fff6c8; font: 700 11px var(--ow-font); pointer-events: none; text-shadow: 0 1px 1px #000; zoom: var(--ui-zoom, 1); }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) { .ev-rates { top: auto; bottom: 8px; right: auto; left: 50%; transform: translateX(-50%); font-size: 10px; } }
.kick-msg { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 20, .82); display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #fff3c8; font: 700 18px var(--ow-font); text-align: center; zoom: var(--ui-zoom, 1); }
/* ---------- GM ---------- */
.actor-label.gm .nm { color: #ffd54a; }
.actor-label.hidden-gm { opacity: .55; }
.ch-line.gm { color: #9a5d00; font-weight: 700; }
.ch-line.announce { color: #fff3c8; font-weight: 700; background: rgba(78, 34, 118, .9); border-radius: 3px; padding: 0 4px; }
.ow-announce { position: absolute; left: 50%; top: calc(86px * var(--ui-zoom, 1)); transform: translateX(-50%); max-width: min(92vw, 720px); padding: 8px 18px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(60, 30, 100, .92), rgba(30, 15, 60, .92)); border: 1px solid #d9b860; color: #fff3c8; font-weight: 700;
  font-size: calc(16px * var(--ui-zoom, 1)); text-align: center; text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 60; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.ow-announce[hidden] { display: none; }
.ow-announce.blink { animation: annBlink 1s ease-in-out infinite; } /* บอสเกิด: กระพริบ (4 พ.ย.) */
@keyframes annBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ---------- ตีบวก ---------- */
.iv-cell:has(.iv-eq) .iv-ref { left: 9px; } /* E กับ +N ไม่ทับกัน */
.iv-ref, .rf-lv { position: absolute; left: 1px; top: 0; font-size: 9px; font-weight: 700; color: #1d6fd0; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.rf-on { position: absolute; right: 1px; top: 0; font-size: 8px; font-style: normal; font-weight: 700; color: #fff; background: #3c8a4a; border-radius: 2px; padding: 0 2px; line-height: 10px; }
.rf-h { font-weight: 700; margin-bottom: 4px; }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, 30px); justify-content: start; gap: 3px; min-height: 34px; margin-bottom: 8px; }
.rf-grid .iv-cell.sel { outline: 2px solid #e0a83a; outline-offset: -1px; }
.rf-info { min-height: 74px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.05); line-height: 1.55; }
.rf-name { font-size: 14px; }
.rf-rate.safe b { color: #2f8a3c; } .rf-rate.mid b { color: #b07a10; } .rf-rate.low b { color: #b0402f; }
.rf-warn { color: #b0402f; font-weight: 700; }
.rf-miss { color: #b0402f; font-weight: 700; }
.rf-guard { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-weight: 600; }
.rf-guard[hidden] { display: none; }
.rf-go { margin-top: 6px; }
.rf-go.danger { background-color: #f3d2c8; }
.rf-result { margin-top: 8px; padding: 8px; border-radius: 6px; text-align: center; font-weight: 700; font-size: 15px; animation: rf-pop .35s ease-out; }
.rf-result.ok { background: #d9f2d0; color: #23702f; } .rf-result.broke { background: #f6d3cc; color: #9a2f1f; } .rf-result.kept { background: #f3e7c4; color: #7a5a10; }
.rf-result[hidden] { display: none; }
@keyframes rf-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* ---------- การ์ด ---------- */
.iv-chip.card { border-radius: 2px; width: 18px; height: 24px; box-shadow: inset 0 0 0 2px #fff6d8; }
.iv-cards { position: absolute; left: 1px; bottom: -1px; font-size: 7px; font-style: normal; color: #c7a23a; letter-spacing: -1px; text-shadow: 0 0 2px #fff; }
.cd-card { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 6px; background: rgba(199, 162, 58, .14); margin-bottom: 8px; }
.cd-card .iv-cell { width: 30px; height: 30px; flex: none; }
.cd-h { font-weight: 700; margin-bottom: 4px; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, 30px); justify-content: start; gap: 3px; min-height: 34px; margin-bottom: 6px; }
.cd-grid .iv-cell.sel { outline: 2px solid #e0a83a; outline-offset: -1px; }
.cd-sel { min-height: 20px; margin-bottom: 4px; }
.cd-go.danger { background-color: #f3d2c8; color: #9a2f1f; }
/* ---------- ระดับไอเทม ---------- */
.eq-name.tier-uncommon, .ch-line.rare-uncommon { color: #2f7d39; } .eq-name.tier-rare { color: #2559a8; font-weight: 700; }
.eq-name.tier-epic { color: #7434ad; font-weight: 700; } .eq-name.tier-legend { color: #c4620a; font-weight: 700; }
.iv-chip.tier-epic, .iv-chip.tier-legend { box-shadow: 0 0 0 1px #fff, 0 0 6px var(--c); }
.ch-line.rare-rare { color: #2559a8; font-weight: 700; } .ch-line.rare-epic { color: #7434ad; font-weight: 700; }
.ch-line.rare-legend { color: #c4620a; font-weight: 700; } .ch-line.rare-card { color: #9a7410; font-weight: 700; }
.actor-label.item.tier-rare { color: #9cc4ff; } .actor-label.item.tier-epic { color: #e0b0ff; } .actor-label.item.tier-legend { color: #ffb45a; } .actor-label.item.tier-card { color: #ffe08a; }
/* ---------- ไอคอนไอเทม (Codex) ---------- */
.iv-img { width: 24px; height: 24px; image-rendering: auto; pointer-events: none; }
.iv-img.tier-epic, .iv-img.tier-legend { filter: drop-shadow(0 0 2px rgba(160, 90, 220, .9)); } .iv-img.tier-legend { filter: drop-shadow(0 0 2px rgba(240, 140, 30, .95)); }
.iv-img.tier-rare { filter: drop-shadow(0 0 1.5px rgba(60, 120, 220, .8)); }
.sc-ic .iv-img { width: 26px; height: 26px; }
.cd-card .iv-img { width: 26px; height: 26px; }
.cd-art { position: relative; width: 96px; flex: none; }
.cd-art img { display: block; width: 96px; height: 132px; filter: drop-shadow(0 2px 4px rgba(20,10,40,.45)); }
.cd-art b { position: absolute; left: 10%; right: 10%; top: 79%; height: 13%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #f7e7b5; text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; }

/* ---------- ปาร์ตี้ (Alt+Z) ---------- */
.ow-party .ow-body { display: flex; flex-direction: column; gap: 5px; }
.pt-hint { margin: 0 0 4px; font-size: 11px; color: var(--ow-text-dim); line-height: 1.35; }
.pt-row { display: flex; gap: 4px; align-items: stretch; }
.pt-row .ow-input { flex: 1; min-width: 0; font-size: 12px; }
.pt-row .ow-btn { flex: none; padding: 0 8px; }
.pt-head { display: flex; justify-content: space-between; align-items: baseline; }
.pt-head b { font-size: 13px; } .pt-count { font-size: 11px; color: var(--ow-text-dim); }
.pt-set { display: flex; gap: 6px; font-size: 11px; color: var(--ow-text-dim); }
.pt-set label { flex: 1; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.pt-set .ow-btn { flex: 1; font-size: 11px; min-height: 20px; }
.pt-set .ow-btn:disabled { opacity: .8; cursor: default; }
.pt-warn { margin: 0; font-size: 11px; color: var(--ow-bad, #b03a2e); }
.pt-list { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.pt-m { padding: 3px 4px; border: 1px solid var(--ow-line, rgba(0,0,0,.15)); border-radius: 3px; cursor: pointer; }
.pt-m .ow-bar { height: 11px; margin-top: 2px; }
.ow-party [hidden] { display: none !important; }
.pt-val { flex: 1; text-align: center; font-weight: 600; color: var(--ow-text); }
.pt-m.off { opacity: .55; cursor: default; } .pt-m.dead { opacity: .7; }
.pt-m.sel { outline: 2px solid var(--ow-sel, #3f86d8); outline-offset: -1px; }
.pt-m.me b { text-decoration: underline; text-underline-offset: 2px; }
.pt-mh { display: flex; align-items: center; gap: 4px; font-size: 12px; min-height: 18px; }
.pt-mh b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.pt-sub { flex: 1; min-width: 0; font-size: 10px; color: var(--ow-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-crown { font-style: normal; color: #d9a514; text-shadow: 0 0 1px #000; }
.pt-btns { display: flex; gap: 2px; } .pt-btns .ow-btn { min-height: 18px; padding: 0 4px; font-size: 11px; }
.pt-foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pt-tip { font-size: 10px; color: var(--ow-text-dim); }
.pt-foot .ow-btn { font-size: 11px; padding: 0 6px; }
.pi-text { margin: 2px 0 8px; font-size: 13px; line-height: 1.4; text-align: center; }
.ow-partyinv .pt-row .ow-btn { flex: 1; min-height: 26px; }
.ch-line.party { color: #1d6fb8; font-weight: 600; }
.actor-label.party-mate .nm { color: #8fd8ff; }
.actor-label.ally-sel .nm { color: #9dffb0; text-decoration: underline; }
.bi-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 701px) and (min-height: 521px) { .bi-menu .ow-btn { flex-direction: column; gap: 0; min-height: 38px; font-size: 11px; line-height: 1.15; padding: 1px 0; } /* 7 ปุ่ม 4 คอลัมน์: ไอคอนบน ชื่อล่าง (ชื่อไม่โดนตัด) */ }
.bi-menu [data-m="party"]::before { background-image: none; display: none; } /* รอไอคอนจาก Codex (TASK_17 B) */

/* ---------- เพื่อน / กระซิบ ---------- */
.pt-tabs { display: flex; gap: 3px; margin-bottom: 2px; }
.pt-tabs .ow-tab { flex: 1; }
.pt-pane { display: flex; flex-direction: column; gap: 5px; }
.fr-list { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.fr-m { cursor: default; }
.fr-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8a8a; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.fr-dot.on { background: #3ccf5a; }
.ch-line.whisper { color: #b0369a; font-weight: 600; }

/* ---------- เทรด ---------- */
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-col { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-bag { max-height: 240px; overflow-y: auto; }
.tr-grid { min-height: 44px; display: flex; flex-wrap: wrap; gap: 2px; }
.tr-ph { margin-top: 6px; }
.tr-st { font-size: 11px; color: var(--ow-good, #2f7d39); font-weight: 600; }
.tr-z { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.tr-z .ow-input { flex: 1; min-width: 0; font-size: 12px; }
.tr-help { margin: 6px 0 4px; }
.tr-btns { display: flex; gap: 4px; } .tr-btns .ow-btn { flex: 1; min-height: 26px; }
.ow-trade.tr-locked .tr-mine { opacity: .75; }
.ow-tradeask .pt-row .ow-btn, .ow-friendask .pt-row .ow-btn { flex: 1; min-height: 26px; }
.ow-tradeask .pt-row, .ow-friendask .pt-row { display: flex; gap: 4px; }

/* เมนูคลิกผู้เล่น */
.ow-pmenu { position: absolute; z-index: 60; width: auto; min-width: 130px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.ow-pmenu[hidden] { display: none; }
.ow-pmenu .pm-name { font-weight: 700; font-size: 12px; text-align: center; padding: 2px 4px; }
.ow-pmenu .ow-btn { min-height: 24px; font-size: 12px; }

.tr-qty { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 4px; }
.tr-qty[hidden] { display: none; }
.tr-qty .tr-qn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-qty .ow-input { width: 64px; font-size: 12px; } .tr-qty .ow-btn { padding: 0 8px; }

/* ออโต้: โหมดง่าย */
.au-how { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.au-sum { font-size: 11px; line-height: 1.5; padding: 4px 6px; margin-bottom: 6px; border: 1px solid var(--ow-line, rgba(0,0,0,.15)); border-radius: 3px; }
.au-adv { margin-top: 6px; } .au-adv summary { cursor: pointer; font-size: 12px; font-weight: 600; padding: 3px 0; }
.au-smart { margin-top: 4px; }
.op-wiki { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.op-vol { display: flex; align-items: center; gap: 6px; } .op-vol input[type=range] { flex: 1; min-width: 0; }
.rf-result.busy { opacity: .8; font-style: italic; }

.iv-acts { display: flex; gap: 4px; margin: 4px 0; align-items: stretch; }
.iv-acts[hidden], .iv-acts [hidden] { display: none !important; }
.iv-acts .ow-btn { flex: 1; min-height: 24px; }
.iv-acts .iv-qn { width: 60px; flex: none; font-size: 12px; }
.iv-foot { align-items: center; } .iv-sort { min-height: 20px; font-size: 11px; padding: 0 8px; }

/* สกิล v2 (ชั่วคราว — แบบจริงรอ Codex TASK_21) */
.sk-jobt { font-weight: 700; margin: 6px 0 2px; color: var(--ow-title, #f3d58a); }
.sk-br { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 4px; display: grid; gap: 3px; }
.sk-brh { font-size: 11px; } .sk-brh span { color: var(--ow-text-dim); }
.sk-brbar { position: relative; height: 12px; background: rgba(0,0,0,.35); border-radius: 6px; margin-top: 3px; overflow: hidden; }
.sk-brbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#b98b2e,#f3d58a); }
.sk-brbar em { position: relative; font-style: normal; font-size: 9px; padding-left: 6px; line-height: 12px; }
.sk-row.can .st-up { box-shadow: 0 0 0 1px #f3d58a inset; }
.sk-row.full .sk-lv { color: #f3d58a; }
.sk-row.cap { background: rgba(243,213,138,.06); border-radius: 4px; }
.sk-modpend { color: #f3d58a; font-size: 10px; animation: skpulse 1.2s infinite alternate; }
@keyframes skpulse { from { opacity: .45; } to { opacity: 1; } }
.sk-why { color: #ff8d8d; }
.sk-note { min-height: 28px; }

/* ย่อยอุปกรณ์ (ชั่วคราว — รอ Codex ออกแบบ) */
.iv-salvbar { display: flex; gap: 4px; align-items: center; font-size: 11px; margin: 2px 0 4px; }
.iv-salvbar[hidden] { display: none !important; }
.iv-salvbar .iv-auto, .iv-salvbar .iv-bulk { flex: 1; font-size: 11px; min-height: 22px; }
.iv-salvbar .iv-salvall { min-height: 22px; font-size: 11px; padding: 0 8px; }
.iv-autolab { display: flex; align-items: center; gap: 2px; white-space: nowrap; cursor: pointer; }
.iv-yield { font-size: 11px; opacity: .85; margin-top: 2px; }

/* แจ้งบั๊ก */
.bug-text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 12px; margin: 6px 0; }
.bug-row { display: flex; align-items: center; gap: 6px; } .bug-msg { flex: 1; font-size: 11px; opacity: .85; } .bug-send { min-width: 70px; }

/* แผนที่โลก (ชั่วคราว — รอภาพทวีป/แบบจาก Codex TASK_24) */
.wm-wrap { display: flex; gap: 8px; }
.wm-board { position: relative; flex: 1 1 auto; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: radial-gradient(ellipse at 40% 50%, #e9dcb8 0%, #d8c697 55%, #b9a36f 100%); background-size: cover; background-position: center; box-shadow: inset 0 0 24px rgba(60, 40, 10, .45); }
.wm-board.has-art { background-color: #1a2233; }
.wm-board.editing { outline: 2px dashed #f0c060; cursor: move; }
.wm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm-lines line { stroke: #7a5a2c; stroke-width: 3; stroke-dasharray: 8 6; opacity: .7; }
.wm-nodes { position: absolute; inset: 0; }
.wm-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: #2b1d0c; font: inherit; touch-action: none; }
.wm-dot { width: 14px; height: 14px; border-radius: 50%; background: #5d8c3a; border: 2px solid #fff6dc; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.wm-node.town .wm-dot { width: 18px; height: 18px; background: #c9902c; border-radius: 4px; }
.wm-node.dun .wm-dot { background: #4a3a5e; }
.wm-node.sel .wm-dot { outline: 3px solid #ffe08a; }
.wm-node.dest .wm-dot { background: #d24b3a; }
.wm-name { margin-top: 2px; font-size: 11px; font-weight: 700; white-space: nowrap; background: rgba(255, 246, 220, .85); padding: 0 5px; border-radius: 8px; }
.wm-name small { font-weight: 400; opacity: .75; }
.wm-me { position: absolute; top: -18px; color: #d23a2a; font-size: 14px; animation: wm-bob 1s ease-in-out infinite; }
@keyframes wm-bob { 50% { transform: translateY(-3px); } }
.wm-pals { position: absolute; top: -4px; left: calc(50% + 9px); color: #2f7fe0; font-size: 10px; letter-spacing: -2px; }
.wm-side { flex: 0 0 200px; max-height: 360px; overflow: auto; font-size: 12px; }
.wm-info h3 { margin: 0 0 4px; font-size: 14px; }
.wm-kv { margin-bottom: 4px; } .wm-h { margin: 6px 0 2px; font-weight: 700; opacity: .85; }
.wm-mobs, .wm-drops { list-style: none; margin: 0; padding: 0; }
.wm-mobs li { padding: 1px 0; } .wm-mobs li.mvp em { color: #d24b3a; font-style: normal; font-weight: 700; }
.wm-drops li { display: flex; align-items: center; gap: 4px; padding: 1px 0; } .wm-drops .iv-img { width: 24px; height: 24px; }
.wm-chip { display: inline-block; width: 18px; height: 18px; border-radius: 3px; background: #9a7a52; }
.wm-act { margin-top: 8px; }
.wm-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; min-height: 22px; }
.wm-edit { display: flex; gap: 4px; } .wm-out { width: 100%; box-sizing: border-box; font-size: 11px; margin-top: 4px; }
@media (max-width: 700px) { .wm-wrap { flex-direction: column; } .wm-side { flex-basis: auto; max-height: 200px; } }
/* มือถือแนวนอน: ภาพแผนที่สูงเกือบเต็มจอ ข้อมูลอยู่ข้าง ๆ (8 พ.ย.) */
@media (pointer: coarse) and (max-height: 520px) { .wm-wrap { flex-direction: row; } .wm-board { flex: 0 0 auto; height: calc(100vh - 96px); max-width: 72%; } .wm-side { flex: 1 1 auto; max-height: calc(100vh - 96px); } .wm-name { font-size: 10px; } }

/* ---------- หน้าต่างสกิล v2 (แบบ Codex TASK_21 · assets/ui_galaxy/skillwin/SPEC.md) ---------- */
.skw { --skw-bg: #0B1022; --skw-card: #121937; --skw-gold: #C39A56; --skw-gold2: #EFD28B; --skw-tx: #F5E9CE; --skw-dim: #B7ABC4; --skw-blue: #75D2EF; }
.skw .ow-body { color: var(--skw-tx); }
.skw-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 6px; }
.skw-tabs { display: flex; gap: 4px; } .skw-tabs .ow-tab { min-width: 88px; }
.skw-sp { font-size: 11px; color: var(--skw-dim); background: var(--skw-bg); border: 1px solid rgba(195,154,86,.35); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.skw-sp b { font-size: 18px; color: var(--skw-gold2); margin-left: 4px; } .skw-sp span { color: var(--skw-gold2); font-weight: 700; }
.skw-jobhint { background: rgba(117,210,239,.12); border: 1px solid rgba(117,210,239,.4); border-radius: 6px; padding: 4px 8px; font-size: 12px; margin-bottom: 6px; color: var(--skw-blue); }
.skw-body { max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.skw-basic { display: flex; gap: 10px; align-items: center; background: var(--skw-bg); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.skw-basic-h { display: flex; flex-direction: column; min-width: 70px; } .skw-basic-h small { color: var(--skw-dim); font-size: 10px; }
.skw-basic-l { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .skw-basic-l .skw-card { flex: 1 1 170px; max-width: 220px; }
.skw-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skw-col { min-width: 0; }
.skw-bh { display: flex; gap: 6px; align-items: center; border: 2px solid var(--skw-gold); border-radius: 8px; padding: 4px 6px; background: linear-gradient(#45406D, #171C36); }
.skw-bh img { width: 32px; height: 32px; flex: none; } .skw-bh b { display: block; color: #F8E1A9; font-size: 13px; } .skw-bh small { display: block; color: var(--skw-dim); font-size: 10px; line-height: 1.2; }
.skw-bp { font-size: 10px; color: var(--skw-dim); margin: 5px 0 2px; } .skw-bar { height: 10px; margin-bottom: 6px; }
.skw-col.b0 .skw-bar i { filter: hue-rotate(-30deg); } .skw-col.b2 .skw-bar i { filter: hue-rotate(120deg) saturate(1.3); }
.skw-chain { display: flex; flex-direction: column; align-items: stretch; }
.skw-link { display: block; width: 2px; height: 10px; margin: 0 auto; background: url("../../assets/ui_galaxy/skillwin/branch_connector.png") center / 2px 100% repeat-y, var(--skw-gold); opacity: .8; }
.skw-card { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; border: 1px solid rgba(195,154,86,.45); border-radius: 6px; background: var(--skw-card); cursor: pointer; user-select: none; }
.skw-card.sel { border-color: var(--skw-gold2); box-shadow: 0 0 0 1px var(--skw-gold2), 0 0 8px rgba(239,210,139,.35); }
.skw-card.full { border-color: var(--skw-gold2); }
.skw-card.locked .skw-ic, .skw-card.locked .skw-tx { opacity: .55; }
.skw-ic { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #0d1330; border-radius: 4px; }
.skw-ic .ow-icon { width: 32px; height: 32px; }
.skw-ic.capf::after { content: ""; position: absolute; inset: -6px; background: url("../../assets/ui_galaxy/skillwin/capstone_frame.png") center / 100% 100% no-repeat; pointer-events: none; }
.skw-card.cap { margin-top: 2px; }
.skw-lock { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; }
.skw-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .skw-tx b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skw-tx small { font-size: 10px; color: var(--skw-dim); }
.skw-st { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-weight: 700; border: 0; padding: 0; font-size: 14px; }
.skw-st.ready { background: linear-gradient(#EFD28B, #C39A56); color: #1d1405; cursor: pointer; font-size: 18px; } .skw-st.ready:hover { filter: brightness(1.15); }
.skw-st.full { background: linear-gradient(#EFD28B, #C39A56); color: #1d1405; }
.skw-st.part, .skw-st.lock { background: #2a3150; color: var(--skw-dim); }
.skw-pend { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; animation: skpulse 1.2s infinite alternate; }
.skw-btabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.skw-btab { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 2px 4px; border: 1px solid rgba(195,154,86,.5); border-radius: 6px; background: #171C36; color: var(--skw-tx); font: inherit; font-size: 11px; font-weight: 700; }
.skw-btab img { width: 24px; height: 24px; } .skw-btab small { margin-left: auto; color: var(--skw-dim); font-weight: 400; }
.skw-btab.on { background: linear-gradient(#45406D, #171C36); border-color: var(--skw-gold2); }
.skw-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; border: 1px solid rgba(195,154,86,.45); border-radius: 6px; padding: 8px; background: var(--skw-bg); font-size: 12px; min-height: 90px; }
.skw-d-mods:empty { display: none; } .skw-detail:has(.skw-d-mods:empty) { grid-template-columns: 1fr; }
.skw-d-h { font-size: 14px; color: #F8E1A9; margin-bottom: 2px; } .skw-captag { font-size: 10px; color: #1d1405; background: var(--skw-gold2); border-radius: 4px; padding: 0 4px; }
.skw-d-desc { color: var(--skw-dim); margin-bottom: 4px; }
.skw-cmp { display: flex; gap: 6px; flex-wrap: wrap; } .skw-cmp em { color: var(--skw-gold); font-style: normal; } .skw-cmp .nx { color: var(--skw-gold2); } .skw-cmp i { color: var(--skw-dim); }
.skw-d-cost { color: var(--skw-blue); margin-top: 4px; } .skw-d-req { color: #9fe0a5; margin-top: 2px; } .skw-d-why { color: #ff9d8d; margin-top: 2px; }
.skw-d-act { display: flex; gap: 4px; margin-top: 6px; } .skw-d-act .ow-btn { min-height: 26px; padding: 0 10px; }
.skw-mod { background: #171C36; border-radius: 6px; padding: 6px; margin-bottom: 6px; } .skw-mod.open { box-shadow: 0 0 0 1px var(--skw-gold2); }
.skw-mod-h { color: #F8E1A9; font-weight: 700; } .skw-mod-h b { color: var(--skw-gold2); } .skw-mod > small { color: var(--skw-dim); font-size: 10px; }
.skw-opt { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(117,210,239,.35); border-radius: 5px; padding: 4px 6px; margin-top: 4px; }
.skw-opt span { flex: 1; display: flex; flex-direction: column; } .skw-opt small { color: var(--skw-dim); font-size: 10px; } .skw-opt.chosen { border-color: var(--skw-gold2); background: rgba(239,210,139,.08); }
.skw-opt .ow-btn { min-height: 26px; min-width: 56px; } .skw-opt > i { color: var(--skw-gold2); font-style: normal; }
.skw-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--skw-dim); margin-top: 6px; }
@media (max-width: 700px), (max-height: 500px) {
  .skw-cols { grid-template-columns: 1fr; } .skw-detail { grid-template-columns: 1fr; } .skw-body { max-height: 46vh; }
  .skw-card { min-height: 44px; } .skw-tabs .ow-tab { min-width: 64px; } .skw-basic { flex-direction: column; align-items: stretch; }
}

/* มือถือแนวนอน (จอเตี้ย): รายการสกิลซ้าย · รายละเอียดขวา (SPEC: detail beside the list) */
@media (max-height: 500px) {
  .skw-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; align-items: start; }
  .skw-body { max-height: calc(100vh - 120px); } .skw-detail { margin-top: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
  .skw-jobhint { padding: 2px 6px; font-size: 11px; margin-bottom: 4px; } .skw-top { margin-bottom: 4px; } .skw-foot { display: none; }
  .skw-basic { flex-direction: row; align-items: center; padding: 4px 6px; } .skw-basic-h { min-width: 0; } .skw-basic-h small { display: none; }
}

/* ร้านค้า: แถบจำนวน + ขายทั้งหมด (ชั่วคราว — ใช้ปุ่มเดิมของสกิน) */
.sh-row.sel { background: rgba(239,210,139,.18); box-shadow: inset 0 0 0 1px rgba(239,210,139,.6); border-radius: 4px; }
.sh-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 2px; font-size: 12px; }
.sh-act[hidden], .sh-bulk[hidden] { display: none !important; }
.sh-sel { flex: 1 1 100%; font-weight: 700; }
.sh-qbox { display: flex; align-items: center; gap: 2px; } .sh-q { min-width: 26px; min-height: 26px; padding: 0; }
.sh-qn { width: 64px; font-size: 13px; text-align: center; }
.sh-max, .sh-go { min-height: 26px; padding: 0 8px; font-size: 12px; white-space: nowrap; } .sh-go { flex: 1 1 100%; }
.sh-bulk { margin: 4px 0 6px; } .sh-etc { font-size: 13px; min-height: 32px; font-weight: 700; }
.sh-eq { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; opacity: .9; }

/* หน้าต่างคำสั่ง GM (ชั่วคราว — ใช้ปุ่มเดิมของสกิน) */
.gm-tip { margin-bottom: 6px; } .gm-quick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.gm-quick .ow-btn { min-height: 24px; padding: 0 8px; font-size: 11px; }
.gm-g { margin-bottom: 6px; } .gm-gh { font-weight: 700; font-size: 12px; margin: 4px 0 2px; color: var(--ow-title-text, #f3d58a); }
.gm-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 11px; }
.gm-row code { grid-column: 1; font-size: 11px; color: #9fe0ff; } .gm-row > span:not(.gm-bt) { grid-column: 1; opacity: .85; }
.gm-bt { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 3px; } .gm-bt .ow-btn { min-height: 22px; padding: 0 6px; font-size: 11px; }
.op-gm[hidden] { display: none !important; }
.ow-gmpanel .ow-body { max-height: 70vh; overflow-y: auto; }

/* ขั้นความหายากบนช่องไอเทม — ชั่วคราว (เส้นขอบสี) จนกว่ากรอบจาก Codex (TASK_28 E) จะมา: มีไฟล์ = ใช้ภาพแทน */
.iv-cell.slot-uncommon { box-shadow: inset 0 0 0 2px rgba(80,200,90,.9); }
.iv-cell.slot-rare { box-shadow: inset 0 0 0 2px rgba(80,150,255,.95); }
.iv-cell.slot-epic { box-shadow: inset 0 0 0 2px rgba(190,100,255,.95), 0 0 4px rgba(190,100,255,.6); }
.iv-cell.slot-legend { box-shadow: inset 0 0 0 2px rgba(255,170,40,1), 0 0 6px rgba(255,170,40,.8); }
/* กล่องคำอธิบายไอเทมละเอียด — ชั่วคราว (Codex ออกแบบจริง TASK_29) */
.ow-tip { width: 270px; max-width: 300px; }
.tp-head { display: flex; gap: 7px; align-items: center; }
.tp-ic .iv-img { width: 32px; height: 32px; }
.tp-kind { font-size: 11px; color: var(--ow-text-dim); }
.tp-tier { font-weight: 700; }
.tp-tier.tier-common { color: var(--ow-text-dim); } .tp-tier.tier-uncommon { color: #3fae4c; } .tp-tier.tier-rare { color: #4a8ff0; } .tp-tier.tier-epic { color: #a35fe0; } .tp-tier.tier-legend { color: #f08a2a; }
.tp-sec { border-top: 1px solid rgba(160, 140, 100, .35); margin-top: 5px; padding-top: 4px; }
.tp-main { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 12px; font-size: 13px; }
.tp-main span { color: var(--ow-text-dim); }
.tp-main i.up, .tp-bon.up, .tp-req .ok { color: #3fae4c; font-style: normal; }
.tp-bon.down, .tp-req .no { color: #e0504a; }
.tp-bons { display: flex; flex-wrap: wrap; gap: 2px 8px; font-weight: 700; }
.tp-req { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.tp-gem { color: #c7a23a; letter-spacing: 1px; }
.tp-card { font-size: 11px; }
.tp-desc { opacity: .9; }
.tp-h { font-weight: 700; margin-bottom: 1px; }
.tp-src { font-size: 11px; } .tp-src .rate { color: #c7a23a; font-style: normal; font-weight: 700; } .tp-src .boss { color: #e0504a; font-style: normal; } .tp-src.dim { opacity: .7; }
.tp-foot { border-top: 1px solid rgba(160, 140, 100, .35); margin-top: 5px; padding-top: 3px; font-size: 11px; color: var(--ow-text-dim); }
.tp-hint { font-size: 10px; color: var(--ow-text-dim); margin-top: 3px; text-align: center; }

/* หน้าสถานะละเอียด — ชั่วคราว (Codex ออกแบบจริง TASK_29) */
.st-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ow-line, rgba(120,90,50,.25)); }
.st-guide { margin: 0 0 6px; padding: 4px 6px; border: 1px solid rgba(214, 176, 98, .45); border-radius: 6px; background: rgba(0, 0, 0, .15); }
.st-guide[hidden] { display: none; }
.st-grow { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.st-gtip { flex: 1; line-height: 1.3; }
.st-gauto { flex: 0 0 auto; white-space: nowrap; }
.st-gauto.armed { box-shadow: 0 0 0 2px #ffd76a inset; }
.st-recrow .st-name b::after { content: ' ★'; color: #ffd76a; font-size: 10px; }
.st-pname { font-size: 14px; } .st-ptsbox { font-size: 11px; } .st-ptsbox .st-pts { font-size: 16px; color: var(--ow-good, #2f7d39); }
.st-h { font-weight: 700; font-size: 11px; color: var(--ow-title-text, var(--ow-text)); margin: 2px 0 3px; }
.st-grid { grid-template-columns: 1.25fr 1fr; gap: 10px; }
.st-stat { height: 34px; gap: 5px; }
.st-badge { flex: none; width: 34px; text-align: center; border-radius: 4px; font: 700 10px var(--ow-font); color: #fff; padding: 3px 0; }
.st-str .st-badge { background: #c94a44; } .st-agi .st-badge { background: #3f9a4a; } .st-vit .st-badge { background: #c98a2a; }
.st-int .st-badge { background: #3f6fc9; } .st-dex .st-badge { background: #2a9a9a; } .st-luk .st-badge { background: #8a52c9; }
.st-name { flex: 1; min-width: 0; line-height: 1.15; } .st-name b { display: block; text-align: left; font-size: 12px; } .st-name small { font-size: 9.5px; color: var(--ow-text-dim); white-space: nowrap; }
.st-valbox { flex: none; width: 56px; text-align: right; line-height: 1.1; } .st-valbox .st-v { font-size: 14px; } .st-valbox .st-bonus { padding-left: 2px; }
.st-valbox .st-cost { display: block; width: auto; font-size: 9px; }
.st-up { width: 26px; font-size: 10px; }
.st-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; margin-bottom: 4px; }
.st-c { display: flex; justify-content: space-between; gap: 3px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.04); cursor: default; font-size: 11px; }
.st-c span { color: var(--ow-text-dim); white-space: nowrap; } .st-c b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-c.sel { background: var(--ow-sel, rgba(183,139,69,.18)); }
/* รายละเอียดสกิล: ดาเมจประมาณ / ควรอัป — ชั่วคราว (TASK_29) */
.skw-dmg { margin: 4px 0; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.25); }
.skw-dmg-h { font-size: 11px; color: var(--ow-text-dim); } .skw-dmg-v { font-size: 15px; font-variant-numeric: tabular-nums; }
.skw-dmg-v .nx { color: var(--ow-good, #8fe08f); } .skw-dmg-v em { font-style: normal; color: var(--ow-text-dim); } .skw-dmg small { font-size: 9.5px; color: var(--ow-text-dim); }
.skw-rec { margin: 3px 0; font-size: 11px; } .skw-rec .st-badge { display: inline-block; width: auto; padding: 1px 5px; }
.st-b-str { background: #c94a44; } .st-b-agi { background: #3f9a4a; } .st-b-vit { background: #c98a2a; } .st-b-int { background: #3f6fc9; } .st-b-dex { background: #2a9a9a; } .st-b-luk { background: #8a52c9; }
.char-tabs { display: flex; gap: 3px; margin: -2px 0 6px; } .char-tabs .ow-tab { flex: 1; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) {
  .ow-status .st-grid { grid-template-columns: 1fr; }
  .ow-status .st-stat { height: auto; min-height: 36px; }
  .ow-status .st-cgrid { grid-template-columns: 1fr 1fr 1fr; }
}
.skw-build { display: flex; gap: 3px; margin-left: auto; margin-right: 8px; } .skw-build .ow-tab { padding: 2px 8px; } /* ชั่วคราว — Codex ออกแบบ */
.skw-bicon { font-size: 22px; width: 32px; text-align: center; } /* อาชีพ 2 ยังไม่มีภาพหัวสาย — Codex */

/* ลิงก์ Discord (เจ้าของเกม 4 พ.ย.) */
a.ow-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; box-sizing: border-box; }
.ch-link { color: #9fd8ff; text-decoration: underline; pointer-events: auto; cursor: pointer; }

/* ===== หน้าจอมือถือแบบ MMO มือถือ (สเปก Codex docs/codex/MOBILE_HUD_SPEC.md · ฐาน 860×396 · --ms = ขยายตามจอ) ===== */
#mhud { position: fixed; inset: 0; z-index: 7; pointer-events: none; font-family: var(--ow-font); }
#mhud[hidden] { display: none; }
#mhud > * { position: absolute; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mh-chip { left: calc(12px * var(--ms)); top: calc(12px * var(--ms)); width: calc(202px * var(--ms)); height: calc(56px * var(--ms)); padding: calc(5px * var(--ms)) calc(10px * var(--ms)); border: 1px solid rgba(214,176,98,.75); border-radius: 10px; background: rgba(16,14,34,.82); color: #f2ead8; text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; }
.mh-name { font-size: calc(14px * var(--ms)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mh-lv { font-size: calc(11px * var(--ms)); color: #e9c97a; }
.mh-bar { grid-column: 1 / 3; height: calc(6px * var(--ms)); border-radius: 3px; background: rgba(0,0,0,.55); overflow: hidden; display: block; margin-top: calc(3px * var(--ms)); }
.mh-bar > i { display: block; height: 100%; width: 100%; transition: width .2s; } .mh-bar.hp > i { background: linear-gradient(#ff6a6a, #c8323c); } .mh-bar.sp > i { background: linear-gradient(#6ab8ff, #2f6fd0); }
.mh-menu { right: calc(12px * var(--ms)); top: calc(12px * var(--ms)); width: calc(42px * var(--ms)); height: calc(42px * var(--ms)); border: 1px solid rgba(214,176,98,.8); border-radius: 10px; background: rgba(16,14,34,.85); color: #f0d48a; font-size: calc(22px * var(--ms)); line-height: 1; }
.mh-chat { left: calc(154px * var(--ms)); bottom: calc(15px * var(--ms)); width: calc(316px * var(--ms)); height: calc(28px * var(--ms)); padding: 0 calc(10px * var(--ms)); border: 1px solid rgba(214,176,98,.45); border-radius: 14px; background: rgba(16,14,34,.6); color: #f2ead8; font-size: calc(12px * var(--ms)); text-align: left; overflow: hidden; }
.mh-chat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-atk { right: calc(58px * var(--ms)); bottom: calc(60px * var(--ms)); width: calc(76px * var(--ms)); height: calc(76px * var(--ms)); border-radius: 50%; border: 3px solid #e2b862; background: radial-gradient(circle at 50% 40%, #a33a3a, #5a1420 70%); color: #fff3d0; font: 800 calc(13px * var(--ms)) var(--ow-font); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mh-atk::before { content: '⚔'; display: block; font-size: calc(30px * var(--ms)); line-height: 1; } .mh-atk.on { filter: brightness(1.3); transform: scale(.95); }
.mh-sk { width: calc(52px * var(--ms)); height: calc(52px * var(--ms)); padding: 0; border-radius: 50%; border: 2px solid #c9a24f; background: rgba(16,14,34,.85); overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.mh-sk .mh-ic { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; } .mh-sk .mh-ic .ow-icon, .mh-sk .mh-ic img { width: 100%; height: 100%; object-fit: cover; }
.mh-sk.empty { border-style: dashed; opacity: .7; } .mh-plus, .mh-txt { color: #e9c97a; font-size: calc(18px * var(--ms)); font-weight: 700; }
.mh-sk .mh-cd { position: absolute; inset: 0; border-radius: 50%; display: none; pointer-events: none; } .mh-sk.cd .mh-cd { display: block; }
.mh-sk .mh-cdt { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: calc(15px * var(--ms)); text-shadow: 0 1px 2px #000; pointer-events: none; }
#mhud.assigning .mh-sk { animation: mh-pulse 1s infinite; } @keyframes mh-pulse { 50% { box-shadow: 0 0 0 4px rgba(255,220,120,.7); } }
/* ของเดิมบนจอมือถือ: ซ่อน แล้วเปิดเป็นหน้าต่างลอยเมื่อแตะ */
body.m-hud .ow-shortcut, body.m-hud .ow-basic:not(.m-show), body.m-hud .ow-chat:not(.m-show), body.m-hud .ow-topmenu:not(.m-show) { display: none !important; }
body.m-hud .ow-basic.m-show { left: calc(12px * var(--ms)) !important; top: calc(74px * var(--ms)) !important; z-index: 20; }
body.m-hud .ow-chat.m-show { left: calc(154px * var(--ms)) !important; top: auto !important; bottom: calc(48px * var(--ms)) !important; z-index: 20; }
body.m-hud .ow-topmenu.m-show { right: calc(12px * var(--ms)) !important; left: auto !important; top: calc(60px * var(--ms)) !important; grid-template-columns: repeat(4, 44px) !important; z-index: 21; background: rgba(16,14,34,.85); padding: 6px; border-radius: 10px; border: 1px solid rgba(214,176,98,.6); }
body.m-hud .ow-topmenu.m-show .tm-toggle { display: none; } body.m-hud .ow-topmenu.m-show.closed .tm-btn:not(.tm-toggle) { display: flex !important; }
body.m-hud .ow-minimap { left: auto !important; right: calc(60px * var(--ms)) !important; top: calc(12px * var(--ms)) !important; width: calc(78px * var(--ms)) !important; }
body.m-hud .ow-minimap .ow-titlebar, body.m-hud .ow-minimap .mm-xy { display: none; }
body.m-hud .ow-minimap .ow-body { padding: 2px !important; } body.m-hud .ow-minimap { height: auto !important; min-height: 0 !important; }
body.m-hud .ow-minimap .mm-cv { width: 100%; height: calc(52px * var(--ms)); object-fit: cover; display: block; }
body.m-hud .ow-auto { left: auto; right: calc(14px * var(--ms)); top: calc(90px * var(--ms)); bottom: auto; flex-direction: column; } /* เฟืองอยู่ใต้ปุ่มออโต้ (เดิมอยู่ซ้าย โดนปุ่มแชแนลใต้มินิแมพบัง · ผู้เล่นแจ้ง 5 พ.ย.) */
body.m-hud .ow-auto.art .au-btn { width: calc(44px * var(--ms)); height: calc(44px * var(--ms)); } body.m-hud .ow-auto .au-btn span { display: none; }
body.m-hud .ow-dash { left: auto; right: calc(198px * var(--ms)); top: auto; bottom: calc(29px * var(--ms)); width: calc(44px * var(--ms)); height: calc(44px * var(--ms)); } /* 8 พ.ย.: เดิมทับปุ่มสกิลช่อง 5 → ย้ายไปซ้ายล่างของวงสกิล · กดค้างลากย้ายเองได้ */
body.m-hud .ow-dash.moving { outline: 3px solid #e0a83a; border-radius: 50%; transform: scale(1.12); }
body.m-hud .ow-joy { left: calc(18px * var(--ms)); bottom: calc(12px * var(--ms)); width: calc(120px * var(--ms)); height: calc(120px * var(--ms)); }
body.m-hud .ow-buffs { left: calc(12px * var(--ms)); top: calc(74px * var(--ms)); bottom: auto; }
body.m-hud .ev-rates { top: auto; bottom: calc(52px * var(--ms)); left: 50%; right: auto; transform: translateX(-50%); } /* เหนือแถบแชท กลางล่าง (8 พ.ย.: เดิมอยู่บนสุด ทับแถบบอสโลก/ยึดปราสาท) */

/* ร้านค้า: ติ๊กขายหลายชิ้น (ผู้เล่นขอ 4 พ.ย.) */
.sh-chk { flex: none; width: 26px; text-align: center; font-style: normal; font-size: 18px; color: #e9c97a; cursor: pointer; user-select: none; }
.sh-row.picked { background: rgba(120, 200, 140, .18); }
.sh-multi { display: flex; gap: 4px; margin-top: 4px; } .sh-multi .sh-pick { flex: 1; } .sh-multi[hidden] { display: none; }
/* แถบเควสบนมือถือ: ซ้ายใต้แถวบัฟ (เดิมอยู่ขวา ทับปุ่ม ATK/สกิล · 4 พ.ย.) — ย่อให้กะทัดรัด */
body.m-hud .ow-quest { left: calc(12px * var(--ms)) !important; right: auto !important; top: calc(104px * var(--ms)) !important; width: calc(176px * var(--ms)) !important; opacity: .92; }
body.m-hud .ow-quest .qt-step { font-size: 11px; line-height: 1.3; }
body.m-hud .ow-quest .qt-item b { font-size: 11px; }
body.m-hud .ow-quest .qt-auto { min-height: 22px; }
/* หน้าอันดับ */
.rk-job { width: 100%; margin: 4px 0; font: inherit; font-size: 12px; }
.rk-list { max-height: min(56vh, 420px); overflow-y: auto; margin-top: 4px; }
.rk-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rk-tbl td { padding: 3px 4px; border-bottom: 1px solid rgba(214,176,98,.18); white-space: nowrap; }
.rk-tbl .rk-n { width: 26px; text-align: right; color: var(--ow-text-dim); }
.rk-tbl .rk-name { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.rk-tbl .rk-job2 { color: var(--ow-text-dim); font-size: 11px; }
.rk-tbl .rk-v { text-align: right; }
.rk-tbl tr.top1 .rk-n, .rk-tbl tr.top1 .rk-name { color: #f3c94f; font-weight: 700; }
.rk-tbl tr.top2 .rk-n, .rk-tbl tr.top2 .rk-name { color: #d6dbe6; font-weight: 700; }
.rk-tbl tr.top3 .rk-n, .rk-tbl tr.top3 .rk-name { color: #d99a5b; font-weight: 700; }
.rk-tbl tr.me td { background: rgba(120,170,255,.16); }
.rk-foot { margin-top: 6px; font-size: 11px; }
/* ตลาดกลาง */
.mk-buy:not([hidden]) { display: flex; gap: 8px; align-items: stretch; }
.mk-cats { flex: 0 0 158px; display: flex; flex-direction: column; gap: 1px; max-height: min(58vh, 470px); overflow-y: auto; touch-action: pan-y; padding-right: 4px; border-right: 1px solid rgba(214,176,98,.3); }
.mk-cat { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 7px; border: 0; border-radius: 5px; background: none; color: var(--ow-text); font: 700 12px/1.3 var(--ow-font); text-align: left; cursor: pointer; }
.mk-cat[hidden] { display: none; } .mk-cat.sub { font-weight: 400; padding-left: 20px; font-size: 12px; }
.mk-cat:hover { background: rgba(255,255,255,.07); } .mk-cat.on { background: rgba(255,215,106,.18); color: #ffd76a; box-shadow: inset 3px 0 0 #ffd76a; }
.mk-cat.empty:not(.on) { opacity: .55; } .mk-n { font-style: normal; font-size: 10px; color: var(--ow-text-dim); min-width: 14px; text-align: right; }
.mk-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; padding: 4px 0 6px; border-bottom: 1px solid rgba(214,176,98,.3); margin-bottom: 4px; }
.mk-filters input[type=number] { width: 70px; height: 24px; box-sizing: border-box; font: inherit; font-size: 11px; display: inline-block; }
.mk-chk { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; } .mk-reset { min-height: 22px; font-size: 11px; padding: 0 8px; margin-left: auto; }
.mk-sel { font: inherit; font-size: 11px; height: 24px; background: rgba(12,10,30,.9); color: var(--ow-text); border: 1px solid rgba(214,176,98,.6); border-radius: 4px; }
.mk-search { display: flex; gap: 4px; margin: 0 0 4px; } .mk-search .mk-q { flex: 1; min-width: 0; height: 26px; box-sizing: border-box; font: inherit; font-size: 12px; }
.mk-search select { font: inherit; font-size: 11px; max-width: 86px; height: 26px; background: rgba(12,10,30,.9); color: var(--ow-text); border: 1px solid rgba(214,176,98,.6); border-radius: 4px; }
.mk-list { max-height: min(46vh, 340px); touch-action: pan-y; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mk-row { display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-bottom: 1px solid rgba(214,176,98,.18); }
.mk-row .ow-slot { flex: none; }
.mk-info { flex: 1; min-width: 0; font-size: 12px; text-align: left; } .mk-info .ow-note { text-align: left; } .mk-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-info .ow-note { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-price { text-align: right; white-space: nowrap; font-size: 12px; } .mk-price .ow-note { display: block; font-size: 10px; }
.mk-act { display: flex; align-items: center; gap: 3px; flex: none; } .mk-act .ow-btn { min-height: 24px; font-size: 11px; padding: 0 8px; white-space: nowrap; }
.mk-bq { width: 46px; height: 24px; box-sizing: border-box; font: inherit; font-size: 11px; }
.mk-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; min-height: 18px; }
.mk-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; max-height: 120px; overflow-y: auto; margin: 4px 0; }
.mk-inv .mk-picked { outline: 2px solid #ffd76a; outline-offset: -2px; }
.mk-form { padding: 6px; margin: 4px 0; border: 1px solid rgba(214,176,98,.45); border-radius: 6px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.mk-fh { display: flex; justify-content: space-between; gap: 6px; } .mk-frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-frow input { width: 96px; height: 24px; box-sizing: border-box; font: inherit; font-size: 12px; margin-left: 3px; } .mk-ftotal { flex: 1; min-width: 150px; }
.mk-sub { margin-top: 6px; font-weight: 700; font-size: 12px; }
.mk-badge { color: #ff6b5a; margin-left: 2px; }
.mk-boxz { font-size: 13px; margin: 6px 0; } .mk-boxi { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; margin: 4px 0; }
.mk-collect { width: 100%; margin-top: 6px; min-height: 28px; }
.mk-empty { padding: 14px 4px; text-align: center; } .mk-foot { margin-top: 6px; font-size: 11px; }
.mk-buylist { max-height: min(44vh, 360px); min-height: 160px; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) {
  .ow-market { width: 96vw !important; }
  .mk-cats { flex-basis: 118px; max-height: calc(100vh - 120px); } .mk-cat { padding: 4px 5px; font-size: 11px; } .mk-cat.sub { padding-left: 12px; font-size: 11px; }
  .mk-buylist { max-height: none; min-height: 0; }
}
/* มือถือ: หน้าต่างอยู่เหนือปุ่มมือถือ (#mhud z 7 เดิมทับหน้าต่าง — แถบแชท/ปุ่มสกิลบังร้านค้า · 4 พ.ย.) */
body.m-hud #hud, body.m-hud .ow-layer { z-index: 8; }
/* มือถือแนวนอน: ร้านค้ากว้างแทนยาว (เจ้าของเกม 4 พ.ย.) — รายการ 2 คอลัมน์ */
@media (pointer: coarse) and (max-height: 520px), (max-width: 700px) {
  .ow-shop { width: min(660px, 96vw) !important; }
  .ow-shop .sh-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-content: start; max-height: calc(100vh - 140px); }
}
/* ตั้งค่าออโต้: กว้างแทนยาว — ตัวเลือก/สกิล 2 คอลัมน์ */
.ow-autocfg .au-flags, .ow-autocfg .au-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
/* 5 พ.ย.: 2 คอลัมน์ซ้าย (ระยะ/ยา/มอน/ตัวเลือก) · ขวา (ช่องสกิลเรียงลำดับ/บัฟ) */
.au-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.au-col { min-width: 0; }
.au-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 2px; }
.au-slot { position: relative; height: 54px; border: 1px dashed var(--ow-line, rgba(0,0,0,.3)); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.au-slot.full { border-style: solid; } .au-slot.drop { outline: 2px solid #4fb3ff; }
.au-slot .au-n { position: absolute; left: 3px; top: 1px; font-size: 10px; font-style: normal; color: var(--ow-text-dim); }
.au-slot .au-x { position: absolute; right: 1px; top: -2px; cursor: pointer; font-size: 14px; padding: 0 3px; }
.au-sk { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; max-width: 100%; }
.au-sk .ow-icon { width: 28px; height: 28px; pointer-events: none; }
.au-sk em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.au-pool { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0; }
.au-pool .au-sk { padding: 3px 1px; border: 1px solid transparent; border-radius: 4px; }
.au-pool .au-sk.used { opacity: .4; }
.au-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -60%); opacity: .9; }
.au-auto { margin-bottom: 4px; }
.au-endowl { white-space: nowrap; margin-top: 6px; }
.ow-autocfg .au-row { grid-template-columns: 1fr 96px 30px 26px; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) { .ow-autocfg { width: min(700px, 97vw) !important; } .au-cols { gap: 0 8px; } .ow-autocfg .au-row { grid-template-columns: 1fr 76px 28px 22px; } .ow-autocfg .au-row input[type=range] { width: 76px; } }
@media (max-width: 520px) { .au-cols { grid-template-columns: 1fr; } }
.pt-follow { font-size: 11px; padding: 0 6px; min-height: 22px; white-space: nowrap; } .pt-follow.on { color: #ffd76a; }
/* ปุ่มมือถือ: ภาพจริงจาก Codex (TASK_42 ข้อ 2 · ui/mobile) แทนปุ่ม CSS ชั่วคราว — ขนาดตรงสเปก (ภาพ @2x) */
#mhud .mh-atk { border: 0; border-radius: 50%; background: url("../../assets/ui/mobile/btn_attack@2x.png") center / 100% 100% no-repeat; box-shadow: none; padding-top: calc(40px * var(--ms)); text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#mhud .mh-atk::before { content: none; }
#mhud .mh-sk { border: 0; background: url("../../assets/ui/mobile/skill_ring@2x.png") center / 100% 100% no-repeat; box-shadow: none; overflow: visible; }
#mhud .mh-sk .mh-ic { inset: calc(6px * var(--ms)); }
#mhud .mh-sk.empty { opacity: .8; }
#mhud .mh-menu { border: 0; background: url("../../assets/ui/mobile/btn_menu@2x.png") center / 100% 100% no-repeat; color: transparent; }
#mhud .mh-chip { border: 0; border-radius: 0; background: url("../../assets/ui/mobile/char_chip@2x.png") center / 100% 100% no-repeat; padding-left: calc(56px * var(--ms)); position: absolute; }
#mhud .mh-chip .mh-lv { position: absolute; left: calc(6px * var(--ms)); top: calc(6px * var(--ms)); width: calc(43px * var(--ms)); height: calc(43px * var(--ms)); display: grid; place-items: center; text-align: center; line-height: 1.1; font-size: calc(10px * var(--ms)); white-space: pre-line; }
#mhud .mh-chat { border: 0; border-radius: 0; background: url("../../assets/ui/mobile/chat_strip@2x.png") center / 100% 100% no-repeat; padding-left: calc(30px * var(--ms)); }
/* กล่องข้อมูลไอเทม: พื้นทึบสำรอง — ภาพกรอบยังโหลดไม่เสร็จ (ชี้ครั้งแรก/เน็ตช้า) เดิมกล่องใส ตัวหนังสือซ้อนรายการข้างหลังอ่านไม่ออก (ผู้เล่นแจ้ง 4 พ.ย.) */
.ow-tip { background-color: rgba(18, 15, 36, .96); background-clip: padding-box; border-radius: 6px; }
/* PK: ไอคอนดาบไขว้บนหัว + ชื่อสีแดง (ไอคอนจริงรอ Codex) */
.actor-label.pk .nm { color: #ff8a7a; } .actor-label.pk .nm::before { content: ''; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 3px; vertical-align: -0.2em; background: url("../../assets/ui/pk_badge@2x.png") center / contain no-repeat; filter: drop-shadow(0 0 2px #000); } /* ไอคอน PK ของ Codex */
.op-pk { margin-bottom: 6px; } .op-pk.on { color: #ff8a7a; box-shadow: inset 0 0 0 1px rgba(255,90,70,.6); }
/* ตัวเลือกเยอะ (ศูนย์บริการ: วาร์ปทุกแผนที่) — 2 คอลัมน์ หน้าต่างกว้างแทนยาว (เจ้าของเกม 4 พ.ย.) */
.ow-dialog:has(.dl-choices > :nth-child(7)) { width: min(600px, 96vw) !important; }
.dl-choices:has(> :nth-child(7)) { display: grid; grid-template-columns: 1fr 1fr; }

/* หน้าต่างสัตว์เลี้ยง (4 พ.ย.): ซ้าย = หน้าตา 6 แบบ (3×2) · ขวา = เวลา/เรียก-เก็บ/หมวดที่เก็บ · กว้างแทนสูง */
.pet-wrap { display: flex; gap: 10px; }
.pet-sp { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; align-content: start; }
.pet-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; font: inherit; font-size: 11px; color: inherit; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; cursor: pointer; }
.pet-card.on { border-color: #ffd36a; background: rgba(255,211,106,.14); }
.pet-card:disabled { opacity: .45; cursor: default; }
.pet-ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; }
.pet-ic img { width: 40px; height: 40px; }
.pet-side { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pet-time b { color: #ffd36a; margin-left: 4px; }
.pet-f { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.pet-f .ow-note { grid-column: 1 / -1; }
.pet-f label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.pet-note { font-size: 11px; }
@media (max-width: 700px) { .pet-wrap { flex-direction: column; } .pet-sp { grid-template-columns: repeat(6, 1fr); } .pet-card { font-size: 10px; } }

/* มือถือแนวตั้ง (เจ้าของเกม 4 พ.ย.: เมนูยาวเลยจอ เลื่อนไม่ได้) — เดิมกฎสูงไม่เกินจอ+เลื่อนได้ มีแค่แนวนอน
   dvh = ความสูงที่เห็นจริง (หักแถบ URL ของ Chrome มือถือ) · vh เป็นค่าสำรองเบราว์เซอร์เก่า */
@media (max-width: 700px) {
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) { max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); overflow: hidden; }
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) > .ow-body { max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; box-sizing: border-box; }
  /* หน้าต่างสกิล: แต้มคงเหลือลงบรรทัดใหม่ (เดิมล้นขวา) · ปุ่มบิ้วไม่ตัดคำ · รายการสกิลสูงขึ้น รายละเอียดเตี้ยลง */
  .skw-top { flex-wrap: wrap; align-items: center; row-gap: 4px; }
  .skw-sp { order: 3; flex: 1 0 100%; box-sizing: border-box; text-align: center; padding: 2px 8px; }
  .skw-build .ow-tab { min-width: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .skw-tabs .ow-tab { min-width: 0; white-space: nowrap; }
  .skw-body { max-height: 50vh; max-height: 50dvh; }
  .skw-detail { max-height: 24vh; max-height: 24dvh; overflow-y: auto; touch-action: pan-y; min-height: 0; }
}
/* หน้าต่างอยู่เหนือแถบไอคอนเมนูบน (เจ้าของเกม 4 พ.ย.: จอเล็ก ไอคอนเมนูทับหน้าต่างตั้งค่า) */
.ow-layer { z-index: 7; }

/* ช่องแชท ทั่วไป/ปาร์ตี้/โลก (เจ้าของเกม 4 พ.ย.) */
.ch-form { display: flex; gap: 4px; }
.ch-form .ch-ch { flex: none; width: auto; padding: 0 4px; font-size: 12px; }
.ch-form .ch-in { flex: 1; min-width: 0; }
.ch-ch[data-c="party"] { color: #1d6fb8; } .ch-ch[data-c="world"] { color: #c4620a; }
.ch-line.world { color: #c4620a; font-weight: 600; }

/* แชแนล (ใต้มินิแมพ · กางในหน้าต่างมินิแมพ ไม่ทับหน้าต่างอื่น) */
.mm-chb { width: 100%; margin-top: 3px; min-height: 22px; font-size: 11px; padding: 0 4px; }
.mm-chb.pk, .mm-chp .pk { color: #ff8a7a; }
.mm-chp { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.mm-chp[hidden] { display: none; }
.mm-chp .ow-btn { min-height: 24px; font-size: 11px; padding: 0 4px; white-space: nowrap; }
.mm-chp .ow-btn.on { outline: 2px solid #e0a83a; }
.mm-chp .ow-note { font-size: 10px; line-height: 1.35; }

/* สุ่มออฟชั่น (5 พ.ย.) — โครงหน้าต่าง 2 คอลัมน์ · สีระดับ T ชั่วคราว (รอ Codex ออกแบบกรอบ/ป้าย T) */
.rop-cols { display: grid; grid-template-columns: 210px 1fr; gap: 12px; }
.rop-left .rf-grid { max-height: 260px; overflow-y: auto; }
.rop-grid .iv-cell { position: relative; } .rop-n { position: absolute; right: 1px; bottom: 0; font-size: 9px; color: #b48cff; text-shadow: 0 0 2px #000; }
.rop-name { margin-bottom: 6px; }
.rop-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.rop-slot { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 6px; border: 1px solid var(--ow-line, rgba(0,0,0,.2)); border-radius: 4px; font-size: 12px; }
.rop-slot.shut { opacity: .45; } .rop-slot.next { border-style: dashed; }
.rop-i { width: 14px; color: var(--ow-text-dim); font-size: 11px; } .rop-l { flex: 1; min-width: 0; }
.rop-lock { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap; }
.rop-t { display: inline-block; min-width: 24px; text-align: center; font-size: 11px; padding: 0 3px; border-radius: 3px; color: #fff; background: #8a8a8a; }
.t2 .rop-t { background: #4f9a4f; } .t3 .rop-t { background: #3f7fd0; } .t4 .rop-t { background: #9a4fd0; } .t5 .rop-t { background: #e0a020; }
.rop-t:has(img) { background: none !important; padding: 0; min-width: 0; vertical-align: middle; } .rop-tb { display: block; width: 28px; height: 18px; } /* ป้าย T ภาพ Codex */
.rop-btns { display: flex; flex-direction: column; gap: 4px; } .rop-btns .ow-btn { min-height: 28px; } .rop-btns .ow-btn[hidden] { display: none; }
.rop-cost { font-size: 12px; margin-bottom: 6px; }
.rop-result { margin-top: 6px; padding: 6px; border-radius: 6px; text-align: center; font-weight: 700; } .rop-result[hidden] { display: none; }
.rop-help { margin-top: 6px; }
.tp-opts .rop-line { font-size: 12px; margin: 1px 0; }
@media (max-width: 640px) { .rop-cols { grid-template-columns: 1fr; } }

/* กรอบเป้าผู้เล่น (ล็อก/PK · 5 พ.ย.) — โครงชั่วคราว รอ Codex ออกแบบ */
.ow-tframe { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; min-width: 220px; padding: 4px 8px 6px; background: rgba(15,20,40,.85); border: 1px solid rgba(255,255,255,.25); border-radius: 6px; color: #fff; font-size: 12px; pointer-events: auto; }
.ow-tframe[hidden] { display: none; }
.ow-tframe .tf-top { display: flex; align-items: center; gap: 6px; } .ow-tframe .tf-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-tframe.pk .tf-name { color: #ff8a7a; } .ow-tframe .tf-lv { opacity: .75; }
.ow-tframe button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 14px; padding: 0 3px; }
.ow-tframe .tf-bar { position: relative; height: 12px; margin-top: 3px; background: #3a1d1d; border-radius: 3px; overflow: hidden; }
.ow-tframe .tf-bar i { position: absolute; inset: 0 auto 0 0; background: #e04848; } .ow-tframe .tf-bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; text-shadow: 0 1px 1px #000; }
body.m-hud .ow-tframe { top: calc(54px * var(--ms)); min-width: 200px; } body.m-hud .ow-tframe button { font-size: 18px; padding: 0 6px; }
/* มือถือ: ปุ่มเฟืองตั้งค่าออโต้ใหญ่ขึ้น (ผู้เล่นหาไม่เจอ) */
body.m-hud .ow-auto .au-set { width: calc(34px * var(--ms)); height: calc(34px * var(--ms)); }
.au-pool .au-empty { grid-column: 1 / -1; }
.cd-none { grid-column: 1 / -1; white-space: normal; }
/* ฟองบอก "กดค้าง = ตั้งค่าออโต้" (มือถือ 3 ครั้งแรก) — ชั่วคราว รอ Codex ออกแบบ */
.au-hint { position: absolute; right: calc(100% + 10px); top: 6px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgba(15,20,40,.92); border: 1px solid #ffd76a; color: #ffd76a; font-size: 13px; font-weight: 700; z-index: 9; pointer-events: auto; animation: au-hint-bob 1s ease-in-out infinite alternate; }
.au-hint::after { content: ''; position: absolute; left: 100%; top: 12px; border: 7px solid transparent; border-left-color: #ffd76a; }
@keyframes au-hint-bob { from { transform: translateX(0); } to { transform: translateX(-5px); } }
.au-warn { font-size: 11px; color: #ffb35c; margin: 2px 0 4px; line-height: 1.35; }
.au-guide-btn { width: 100%; min-height: 26px; margin-bottom: 4px; font-size: 12px; }
.au-guide { font-size: 11px; line-height: 1.45; padding: 4px 6px; margin-bottom: 6px; border: 1px solid #ffd76a55; border-radius: 4px; } .au-guide[hidden] { display: none; }
.au-guide .au-g-off { opacity: .55; } .au-guide-go { width: 100%; min-height: 24px; margin-top: 4px; font-size: 12px; }
/* พักหน้าจอ (ประหยัดแบต) — จอดำทึบ ซ่อนภาพ 3 มิติ */
.ow-sleep { position: fixed; inset: 0; z-index: 100000; background: #000; color: #9aa4b8; display: flex; align-items: center; justify-content: center; font-size: 14px; touch-action: none; }
.ow-sleep[hidden] { display: none; }
body.og-sleeping canvas { visibility: hidden; }
.sl-box { width: min(420px, 90vw); display: flex; flex-direction: column; gap: 6px; }
.sl-name { color: #d8dde8; font-size: 16px; font-weight: 700; } .sl-name span { font-weight: 400; font-size: 13px; color: #8a93a6; }
.sl-bar { position: relative; height: 14px; background: #1a1d24; border-radius: 3px; overflow: hidden; } .sl-bar i { position: absolute; inset: 0 auto 0 0; }
.sl-bar.hp i { background: #8a2b2b; } .sl-bar.sp i { background: #2b4f8a; } .sl-bar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; color: #cfd5e0; }
.sl-row b { color: #cfd5e0; } .sl-row b.on { color: #6fbf6f; } .sl-row b.off { color: #bf6f6f; } .sl-row.dim, .sl-log { color: #5f677a; font-size: 12px; }
.sl-dead { color: #e06060; font-weight: 700; } .sl-hint { margin-top: 10px; color: #4a5266; font-size: 12px; text-align: center; }
.ow-auto .au-sleep { width: 30px; height: 30px; padding: 0; font-size: 15px; }
body.m-hud .ow-auto .au-sleep { width: calc(34px * var(--ms)); height: calc(34px * var(--ms)); }
.au-sleepw { width: 100%; min-height: 26px; margin-bottom: 6px; font-size: 12px; }
.ins-on { font-style: normal; font-size: 10px; color: #b48cff; }
.ins-optlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 6px; font-size: 11px; } .ins-optlist:empty { display: none; } .ins-oi b { display: block; font-size: 11px; }
/* คูลดาวน์สกิล (6 พ.ย.): เงากวาด + ตัวเลข · ใกล้พร้อม (< 1 วิ) ตัวเลขเหลือง · พร้อม = วงแสงกะพริบ — ชั่วคราว รอ Codex */
.sc-cd { position: absolute; inset: 2px; border-radius: 3px; pointer-events: none; }
.sc-cdt { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
.sc-slot.cd-soon .sc-cdt, .mh-sk.cd-soon .mh-cdt { color: #ffe066; }
.sc-slot.cd-ready, .mh-sk.cd-ready { animation: cd-ready .45s ease-out; }
@keyframes cd-ready { 0% { box-shadow: 0 0 0 0 rgba(255,230,120,.95); } 100% { box-shadow: 0 0 0 9px rgba(255,230,120,0); } }
/* ธาตุมอนหน้าชื่อ — ป้ายสีชั่วคราว (รอ Codex ไอคอน el_<ธาตุ>) */
.al-el { display: inline-block; font-size: 10px; line-height: 13px; padding: 0 3px; border-radius: 3px; vertical-align: 1px; color: #fff; text-shadow: 0 1px 1px #000; background: #777; font-weight: 700; }
img.al-el { width: 14px; height: 14px; padding: 0; background: none; vertical-align: -2px; }
.el-water { background: #2f7fd6; } .el-earth { background: #8a6232; } .el-fire { background: #d8452a; } .el-wind { background: #3f9e4a; } .el-poison { background: #8a3fb0; }
.el-holy { background: #c9a227; } .el-shadow { background: #4a2f6e; } .el-ghost { background: #8c7fb8; } .el-undead { background: #4f5a48; } .el-neutral { background: #7a7a7a; }
/* บอสโลก (6 พ.ย.) — ไอคอนข้างจอ + หน้าวัด DPS · ภาพชั่วคราว รอ Codex TASK_WORLDBOSS_NOV6 */
.wb-icon { position: fixed; left: 8px; top: 46%; z-index: 9; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 84px; padding: 6px 4px 5px; border-radius: 10px; border: 2px solid #b48cff; background: rgba(20, 10, 40, .82); color: #fff; font: inherit; cursor: pointer; animation: wbBlink 1s steps(2, end) infinite; }
.wb-icon .wb-ic { font-style: normal; font-size: 28px; line-height: 1; }
.wb-icon .wb-t { font-size: 12px; }
.wb-icon .wb-s { font-size: 11px; color: #ffd76a; white-space: nowrap; }
.wb-icon.alive { border-color: #ff5a5a; }
.wb-icon.here { animation: none; opacity: .85; }
.wb-icon.idle { animation: none; opacity: .8; border-color: #6c5a99; } /* ไม่มีบอส: ค้างไว้ นับถอยหลังรอบหน้า ไม่กระพริบ */
@keyframes wbBlink { 50% { box-shadow: 0 0 14px 4px rgba(180, 140, 255, .9); filter: brightness(1.35); } }
.wbm { font-size: 12px; } /* วางตาม Codex assets/ui_galaxy/world_boss/DPS_METER_SPEC.md (แผงกว้าง เตี้ย) */
.wbm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; opacity: .85; font-size: 11px; }
.wbm-hp { padding: 2px 10px; border: 1px solid #c9a24a; color: #ffd76a; border-radius: 3px; }
.wbm-h, .wbm-r { display: grid; grid-template-columns: 26px 1.5fr .9fr 1.1fr .8fr 1fr 44px; gap: 6px; align-items: center; padding: 3px 6px; }
.wbm-h { opacity: .65; font-size: 11px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.wbm-r:nth-child(even) { background: rgba(255, 255, 255, .035); }
.wbm-r.me { background: rgba(255, 215, 106, .16); outline: 1px solid rgba(255, 215, 106, .45); }
.wbm-r.low { opacity: .6; }
.wbm-i { color: #ffd76a; font-variant-numeric: tabular-nums; }
.wbm-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wbm-n small { margin-left: 6px; color: #ffd76a; font-size: 10px; font-weight: 400; }
.wbm-j { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbm-d, .wbm-p, .wbm-pc { text-align: right; font-variant-numeric: tabular-nums; }
.wbm-pc { font-style: normal; font-size: 10px; opacity: .8; }
.wbm-b { position: relative; height: 8px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.wbm-b i { position: absolute; left: 0; top: 0; bottom: 0; background: #5f8fd8; }
.wbm-r.me .wbm-b i { background: #e8c25a; }
.wbm-sep, .wbm-empty { text-align: center; opacity: .6; }
.wbm-f { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11px; color: #ffd76a; }
.wb-icon .wb-img { width: 48px; height: 48px; display: block; }
.wb-exit { position: fixed; left: 8px; top: calc(46% + 96px); z-index: 9; pointer-events: auto; width: 84px; padding: 5px 2px; border-radius: 8px; border: 2px solid #b48cff; background: rgba(20, 10, 40, .88); color: #fff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.wb-exit:hover:not(:disabled) { border-color: #ffd76a; }
.wbm-pk { color: #ff9a9a; }
.wb-exit:disabled { cursor: not-allowed; border-color: #ff5a5a; color: #ffb0b0; }
@media (max-width: 900px) { .wb-exit { top: 44px; left: 214px; width: auto; padding: 3px 8px; font-size: 11px; } .wb-icon { top: 6px; left: 214px; width: auto; flex-direction: row; gap: 5px; padding: 3px 8px; } .wb-icon .wb-ic { font-size: 20px; } .wb-icon .wb-img { width: 30px; height: 30px; } .wbm-h, .wbm-r { grid-template-columns: 22px 1.4fr 1fr .9fr 40px; } .wbm-j, .wbm-p, .wbm-h span:nth-child(3), .wbm-h span:nth-child(5) { display: none; } }
.iv-acts .iv-openall { white-space: nowrap; } /* เปิดกล่องทั้งกอง: ไม่ตัดบรรทัด */

/* อาวุธไม่ตรงสกิล (เจ้าของเกม 6 พ.ย.: นักฆ่าเงาถือดาบ สกิลหลักใช้ไม่ได้โดยไม่รู้ตัว) */
.skw-wpn { margin: 4px 0; font-size: 12px; } .skw-wpn.ok { color: #9fd89f; } .skw-wpn.no { color: #ff8a8a; }
.skw-wbad { color: #ff8a8a; font-weight: 700; }
.au-sk.wbad { opacity: .55; } .au-sk .au-wbad { color: #ff8a8a; margin-left: 2px; font-style: normal; }
.au-wwarn { margin: 4px 0; padding: 4px 6px; border: 1px solid rgba(255, 110, 110, .6); border-radius: 5px; color: #ffb0b0; font-size: 12px; background: rgba(80, 0, 0, .25); }
.tp-wbad { color: #ff9a9a; font-size: 12px; }

.sh-was { color: #9a8f7a; font-weight: 400; font-size: .85em; } .sh-perk { padding: 4px 8px; color: #e9c97a; } /* สกิลพ่อค้า: ราคาเดิมขีดฆ่า (7 พ.ย.) */

.actor-label .al-gd { font-size: calc(11px * var(--ui-zoom, 1)); color: #bfe3ff; font-weight: 600; line-height: 1.1; } /* ชื่อกิลด์ใต้ชื่อผู้เล่น (7 พ.ย.) */
.actor-label .al-tt { display: inline-flex; align-items: center; gap: 3px; margin: 0 auto 1px; padding: 1px 8px 1px 5px; font-size: calc(11px * var(--ui-zoom, 1)); color: #ffd36a; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px #000; background: url(../../assets/ui_galaxy/siege_title_badge@2x.png) 0 0 / 100% 100% no-repeat; } .actor-label .al-tt[hidden] { display: none; } .actor-label .al-tt img { width: calc(13px * var(--ui-zoom, 1)); height: calc(13px * var(--ui-zoom, 1)); } /* ฉายาเจ้าปราสาท (7 พ.ย.) */
.gd-sto, .gd-log { max-height: 240px; overflow-y: auto; } .gd-it { display: flex; align-items: center; gap: 6px; } .gd-exp { margin: 4px 0; } /* หน้าต่างกิลด์: layout */
/* ยึดปราสาท (7 พ.ย.) — ภาพชั่วคราว (CSS) รอ Codex TASK_SIEGE_NOV7 · ไอคอนอยู่ขวาของไอคอนบอสโลก (ซ้ายมีหน้าต่างข้อมูล/แชทบัง) */
.sg-icon { position: fixed; left: 100px; top: 46%; z-index: 9; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 84px; padding: 5px 4px; border-radius: 10px; border: 2px solid #e8b44a; background: rgba(36, 22, 8, .85); color: #fff; font: inherit; cursor: pointer; }
.sg-icon .sg-ic { font-style: normal; font-size: 26px; line-height: 1; }
.sg-icon .sg-t { font-size: 12px; }
.sg-icon .sg-s { font-size: 11px; color: #ffd76a; white-space: nowrap; }
.sg-icon.on { border-color: #ff5a5a; animation: wbBlink 1s steps(2, end) infinite; }
.sg-icon.idle { opacity: .8; border-color: #8a6a3a; }
.sg-exit { position: fixed; left: 100px; top: 46%; z-index: 9; pointer-events: auto; width: 84px; padding: 5px 2px; border-radius: 8px; border: 2px solid #e8b44a; background: rgba(36, 22, 8, .88); color: #fff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
/* แผงสถานะศึก: กรอบ Codex siege_status_frame 420×64 — ช่องบน (เวลา x16–76 · เจ้าของ x90–174 · คริสตัล x190–415 · y8–27) · ช่องล่าง (เสา A x18–139 · B x151–278 · C x290–415 · y37–55) */
.sg-panel { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 8; pointer-events: none; width: 420px; height: 64px; background: url(../../assets/ui_galaxy/siege_status_frame@2x.png) 0 0 / 100% 100% no-repeat; color: #fff; font-size: 11px; line-height: 1; }
.sg-panel .sg-h > span, .sg-panel .sg-p { position: absolute; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; white-space: nowrap; }
.sg-panel .sg-tm { left: 16px; top: 8px; width: 60px; height: 19px; color: #ffd76a; font-variant-numeric: tabular-nums; font-weight: 700; }
.sg-panel .sg-ow { left: 90px; top: 8px; width: 84px; height: 19px; }
.sg-panel .sg-ow img { width: 14px; height: 14px; flex: none; }
.sg-panel .sg-ow b { overflow: hidden; text-overflow: ellipsis; }
.sg-panel b.me { color: #7dffa8; }
.sg-panel .sg-cr { left: 190px; top: 8px; width: 225px; height: 19px; gap: 6px; font-variant-numeric: tabular-nums; }
.sg-panel .sg-cr img { width: 16px; height: 16px; }
.sg-panel .sg-cr.sh { color: #9fd0ff; }
.sg-panel .sg-bar { position: relative; display: inline-block; width: 120px; height: 7px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.sg-panel .sg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #6fd0ff; }
.sg-panel .sg-cr.sh .sg-bar i { background: #9aa8c8; }
.sg-panel .sg-p { top: 37px; height: 18px; }
.sg-panel .sg-p:nth-child(1) { left: 18px; width: 121px; } .sg-panel .sg-p:nth-child(2) { left: 151px; width: 127px; } .sg-panel .sg-p:nth-child(3) { left: 290px; width: 125px; }
.sg-panel .sg-p img { width: 12px; height: 12px; flex: none; }
.sg-panel .sg-p b { color: #ffd76a; flex: none; }
.sg-panel .sg-p span { overflow: hidden; text-overflow: ellipsis; }
.sg-panel .sg-p small { font-size: 10px; color: #ffb36a; flex: none; }
.sg-panel .sg-p.me span { color: #7dffa8; } .sg-panel .sg-p.foe span { color: #ff9a9a; }
.sg-panel .sg-wave, .sg-panel .sg-tip { position: absolute; top: 68px; left: 0; right: 0; text-align: center; color: #ffd76a; font-size: 12px; text-shadow: 0 1px 2px #000; }
.sg-icon .sg-img { width: 48px; height: 48px; display: block; }
@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) { .wb-icon { top: 6px; left: 232px; width: auto; flex-direction: row; gap: 5px; padding: 3px 8px; } .wb-icon .wb-ic { font-size: 20px; } .wb-icon .wb-img { width: 30px; height: 30px; } .wb-exit { top: 44px; left: 232px; width: auto; padding: 3px 8px; font-size: 11px; } .sg-icon { top: 6px; left: 412px; width: auto; flex-direction: row; gap: 5px; padding: 3px 8px; } .sg-icon .sg-ic { font-size: 18px; } .sg-icon .sg-img { width: 30px; height: 30px; } .sg-exit { top: 6px; left: 412px; width: auto; padding: 3px 8px; font-size: 11px; } .sg-panel { top: 44px; } } /* มือถือแนวนอน (A54 915×412 ไม่เข้า 900px): ไอคอนบอสโลก/ปราสาทแถวบน ไม่ให้หน้าต่างเควสบัง */
.sg-icon[hidden], .sg-exit[hidden], .sg-panel[hidden] { display: none; }
body.m-hud .ow-announce { top: auto; bottom: calc(52px * var(--ms, 1)); max-width: 50vw; padding: 4px 10px; font-size: 12px; opacity: .92; } /* มือถือ: ประกาศย้ายลงล่างกลาง ตัวเล็ก ไม่บังหน้าต่าง (ผู้เล่นแจ้ง 7 พ.ย. — บังตลาด) */

/* มือถือ: หน้าต่างทั่วไปตอนย่อ = แถบสั้น ไม่ยาวเต็มบนจอ (เจ้าของเกม 7 พ.ย.: อันดับดาเมจบอสโลกกว้าง 600 ย่อแล้วบังกรอบเลือด) */
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) { .ow-window.ow-free.minimized { width: 200px !important; } }

/* เลือกธาตุเวทติดคทา (ปราชญ์ · 7 พ.ย.) — ปุ่มชุดเดิม เลือกอยู่ = กรอบทองแบบปุ่มแชแนลแผนที่ */
.skw-sbel { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.skw-sbel > span { width: 100%; font-size: 12px; opacity: .85; }
.skw-sbel .ow-btn { padding: 2px 8px; font-size: 12px; }
.skw-sbel .ow-btn.on { outline: 2px solid #e0a83a; }

/* ปุ่มเปลี่ยนเป้า (มือถือ · 7 พ.ย.) มุมขวาล่างข้าง ATK — ภาพ Codex btn_target */
#mhud .mh-tgt { position: absolute; right: calc(8px * var(--ms)); bottom: calc(14px * var(--ms)); width: calc(44px * var(--ms)); height: calc(44px * var(--ms)); padding: 0; border: 0; background: none; pointer-events: auto; touch-action: none; }
#mhud .mh-tgt[hidden] { display: none; }
#mhud .mh-tgt img { width: 100%; height: 100%; display: block; }
#mhud .mh-tgt.on { filter: brightness(1.3); transform: scale(.94); }
/* หน้าต่างทดสอบดาเมจ (หุ่นฟาง · 8 พ.ย.) — layout เท่านั้น ใช้สี/กรอบเดิมของหน้าต่าง */
.dm-wrap { display: flex; flex-direction: column; gap: 6px; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.dm-grid > div, .dm-sk > div { display: flex; justify-content: space-between; gap: 8px; }
.dm-grid > div:nth-child(-n+2) b { font-size: 1.15em; }
.dm-sk { border-top: 1px solid rgba(255,255,255,.12); padding-top: 4px; }
.dm-sk:empty { display: none; }
.dm-btns { display: flex; gap: 6px; }
.dm-btns .ow-btn { flex: 1; }
.dm-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.dm-cfg[hidden] { display: none; } /* display:grid ทับ hidden = ฟอร์มตั้งค่าโผล่ตลอดและค่าไม่ตรงหุ่น (8 พ.ย.) */
.dm-cfg label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dm-cfg select { min-width: 92px; }
.dm-cfg .wide { grid-column: 1 / -1; }
/* เติมพ้อย (8 พ.ย.) — layout เท่านั้น ใช้สี/กรอบเดิมของหน้าต่าง */
.sh-tabs .sh-topup { margin-left: auto; }
.tp-wrap, .tpa-wrap { display: flex; flex-direction: column; gap: 8px; }
.tp-pre { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tp-pre .ow-btn { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; }
.tp-pre small { font-size: 0.75em; opacity: 0.8; }
.tp-own { display: flex; align-items: center; gap: 6px; }
.tp-own .ow-input { width: 110px; }
.tp-pick { display: flex; flex-direction: column; gap: 6px; }
.tp-qrbox { display: flex; justify-content: center; }
.tp-qr { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; border-radius: 6px; }
.tp-paytxt { text-align: center; }
.tp-big { font-size: 1.3em; }
.tp-steps { margin: 0; padding-left: 18px; }
.tp-btns, .tpa-btns, .tpa-top { display: flex; gap: 6px; align-items: center; }
.tp-btns .ow-btn { flex: 1; text-align: center; }
.tp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; font-size: 0.92em; }
.tp-row small { grid-column: 1 / -1; opacity: 0.8; }
.tpa-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow: auto; }
.tpa-row { border-top: 1px solid rgba(255,255,255,.12); padding-top: 6px; }
.tpa-info { display: flex; flex-direction: column; gap: 4px; }
.tpa-slip { max-width: 100%; max-height: 360px; object-fit: contain; align-self: center; cursor: zoom-in; }
@media (max-width: 700px) { .tp-pre { grid-template-columns: repeat(3, 1fr); } .tp-qr { width: 180px; height: 180px; } }
.tp-pick[hidden], .tp-pay[hidden] { display: none; }
.tp-head { display: block; text-align: left; }
.tp-steps { text-align: left; }
.tp-wrap { max-height: 78vh; overflow: auto; }
@media (max-height: 500px) { .tp-qr { width: 150px; height: 150px; } .tp-wrap { max-height: 80vh; } }
.tp-save { text-align: center; font-size: 0.9em; }

/* ตลาดแลกพ้อย (8 พ.ย.) — จัดวางอย่างเดียว ภาพ/สีกรอบใช้ของ Codex (ow-*) */
.ow-exchange .ow-body { max-height: min(86vh, 760px); overflow-y: auto; touch-action: pan-y; }
.ex-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; padding: 2px 2px 8px; border-bottom: 1px solid rgba(214,176,98,.3); }
.ex-last b { font-size: 22px; color: #ffd76a; } .ex-last small { margin-left: 4px; opacity: .7; }
.ex-kv { display: flex; flex-direction: column; font-size: 12px; } .ex-kv small { opacity: .6; font-size: 11px; }
.ex-top { display: flex; gap: 10px; margin-top: 8px; }
.ex-chartbox { flex: 1 1 auto; min-width: 0; position: relative; display: flex; flex-direction: column; }
.ex-range { display: flex; gap: 4px; margin-bottom: 4px; } .ex-range .ow-tab { padding: 2px 8px; font-size: 11px; }
.ex-chart { width: 100%; height: 220px; display: block; }
.ex-empty { position: absolute; inset: 30px 0 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.ex-empty[hidden] { display: none; }
.ex-book { flex: 0 0 210px; font-size: 12px; display: flex; flex-direction: column; }
.ex-bh, .ex-row { display: flex; justify-content: space-between; padding: 1px 6px; }
.ex-bh { opacity: .6; font-size: 11px; }
.ex-row { position: relative; cursor: pointer; font-variant-numeric: tabular-nums; }
.ex-row::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: var(--w); opacity: .18; pointer-events: none; }
.ex-row.ask span:first-child, .down { color: #ff6b6b; } .ex-row.bid span:first-child, .up { color: #5ad17a; }
.ex-row.ask::before { background: #ff6b6b; } .ex-row.bid::before { background: #5ad17a; }
.ex-row:hover { background: rgba(255,255,255,.06); }
.ex-mid { text-align: center; padding: 3px; margin: 2px 0; border-block: 1px solid rgba(214,176,98,.25); }
.ex-none { padding: 4px 6px; }
.ex-form { margin-top: 10px; padding: 8px; border: 1px solid rgba(214,176,98,.3); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.ex-side, .ex-mode { display: flex; gap: 6px; flex-wrap: wrap; } .ex-side .ow-tab { flex: 1; }
.ex-mode label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.ex-fields { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ex-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .ex-fields label[hidden] { display: none; }
.ex-fields .ow-input { width: 130px; }
.ex-go { align-self: stretch; } .ex-go:disabled { opacity: .5; cursor: default; }
.ex-tabs { margin-top: 10px; }
.ex-list { max-height: 170px; overflow-y: auto; touch-action: pan-y; }
.ex-li { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.ex-li .ow-btn { padding: 2px 8px; font-size: 11px; }
.ex-foot { margin-top: 6px; font-size: 11px; line-height: 1.5; } .ex-foot .ow-btn { margin-right: 6px; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 520px) {
  .ex-chart { height: 128px; } .ex-book { flex-basis: 180px; font-size: 11px; } .ex-stats { padding-bottom: 4px; }
  .ex-fields .ow-input { width: 110px; } .ex-last b { font-size: 18px; } .ex-form { margin-top: 6px; padding: 6px; gap: 4px; }
}
@media (max-width: 560px) { .ex-top { flex-direction: column; } .ex-book { flex-basis: auto; } }