/* =====================================================================
   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-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-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, 38px); grid-auto-flow: row; gap: 2px; 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: 38px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .1s; }
.ow-topmenu .tm-btn:hover { transform: scale(1.1); } .ow-topmenu .tm-btn img { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .ow-topmenu { right: 6px; top: 150px; grid-template-columns: repeat(2, 34px); } .ow-topmenu .tm-btn { width: 34px; height: 34px; } } /* มือถือ: 2 คอลัมน์ใต้แผนที่เล็ก */
.ow-dash { position: fixed; right: 16px; bottom: 150px; width: 64px; height: 64px; 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 .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; }
.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-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; }
  .ow-window:not(.ow-basic):not(.ow-minimap):not(.ow-chat):not(.ow-shortcut) { max-height: 90vh; overflow: auto; }
}

/* ---------- หน้าแรก: ล็อกอิน / เลือกตัวละคร / สร้างตัวละคร (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; }
.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; }
.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-reset { width: 100%; margin-top: 8px; min-height: 24px; }
.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; } }

/* ---------- หน้าต่างสกิล 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; } .sh-etc { font-size: 12px; min-height: 28px; }

/* หน้าต่างคำสั่ง 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-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 */