/* ui-skin.css — สกิน UI ภาพวาดจาก ChatGPT (แผ่นสไปรต์ UI กรมท่า+ทอง) · ตั๊บ 2026-10-15
   ชิ้นส่วน: assets/img/ui/*.webp (ตัดด้วย tools/cut-ui.js) · ตอนนี้ลองแค่หน้าต่างตัวละคร .pop-char2
   กรอบใหญ่ใช้ border-image (9-slice) → ยืดได้ทุกขนาด มุมไม่เบี้ยว · ตัวหนังสือ/ตัวเลขยังเป็น HTML เหมือนเดิม */

/* หน้าต่าง */
.rpg-window.pop-char2{isolation:isolate;border:0;background:none;border-radius:0;box-shadow:0 18px 60px #000a}
.rpg-window.pop-char2:before{content:'';position:absolute;inset:0;top:0;left:0;color:transparent;font-size:0;z-index:-1;pointer-events:none;
  border:solid transparent;border-width:59px 36px 36px;border-image:url(../img/ui/win.webp) 84 52 52 52 fill / 59px 36px 36px}
.pop-char2 .rpg-window-title{height:46px;background:none;border:0;padding:0 50px}
.pop-char2 .rpg-window-title>b{display:flex;align-items:center;justify-content:center;width:250px;height:49px;margin-top:10px;padding:0 24px 0 44px;
  border:0;border-radius:0;background:url(../img/ui/title.webp) center/100% 100% no-repeat;font-size:19px;color:#ffe9b0;text-shadow:0 2px #0b1630,0 0 6px #000}
.pop-char2 .rpg-x{top:8px;right:14px;width:30px;height:30px;min-height:0;border:0;border-radius:0;background:url(../img/ui/close.webp) center/100% 100% no-repeat;color:transparent;font-size:0}
.pop-char2 .rpg-x:hover{filter:brightness(1.15)}
.pop-char2 .cv{padding:10px 26px 24px;color:#efe6cf}

/* แถบลูกทีม: วงแหวนทอง */
.pop-char2 .cv-face{padding-top:4px}
.pop-char2 .cv-face:before{content:'';position:absolute;top:-1px;left:50%;width:56px;height:56px;transform:translateX(-50%);background:url(../img/ui/ring.webp) center/contain no-repeat;pointer-events:none;z-index:1}
.pop-char2 .cv-face.on:before{background-image:url(../img/ui/ring-on.webp);width:60px;height:60px;top:-3px}
.pop-char2 .cv-face canvas{width:44px;height:44px;border:0;box-shadow:none}
.pop-char2 .cv-face.on canvas{box-shadow:none}
.pop-char2 .cv-face em{z-index:2}
.pop-char2 .cv-face small{margin-top:5px}
.pop-char2 .cv-legend{color:#c9b78a}

/* การ์ดโชว์ตัวละคร: พื้นยังเป็นสีประจำอาชีพ (ล็อกไว้) + กรอบทอง */
.pop-char2 .cv-show{border:0;border-radius:6px;box-shadow:inset 0 0 40px #0009;padding:0 20px 20px}
.pop-char2 .cv-show .cv-art{padding-top:58px}
.pop-char2 .cv-show:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  border:solid transparent;border-width:22px;border-image:url(../img/ui/panel.webp) 44 / 22px}
.pop-char2 .cv-plate{left:20px;top:20px;border-radius:6px;background:#0b1630d0;border:1px solid #d8a04888}
.pop-char2 .cv-lv{width:40px;height:40px;min-width:40px;border:0;border-radius:0;background:url(../img/ui/lv.webp) center/contain no-repeat;color:#fff;text-shadow:0 1px 2px #000}
.pop-char2 .cv-bars{padding:0 6px;gap:4px}
.pop-char2 .cv-bar{height:17px;border:0;border-radius:0;background:url(../img/ui/bar.webp) center/100% 100% no-repeat;overflow:visible}
.pop-char2 .cv-bar i{inset:3px auto 3px 4px;max-width:calc(100% - 8px);border-radius:0;background:url(../img/ui/bar-hp.webp) left center/100% 100% no-repeat}
.pop-char2 .cv-bar.xp i{background-image:url(../img/ui/bar-xp.webp)}
.pop-char2 .cv-bar b{line-height:17px;font-size:10px}
.pop-char2 .cv-belt{padding:8px 4px 4px;background:none}

/* ช่องอุปกรณ์ */
.pop-char2 .cv-eq{border:0;border-radius:0;background:url(../img/ui/slot.webp) center/contain no-repeat}
.pop-char2 .cv-eq.has{box-shadow:none;filter:drop-shadow(0 0 5px var(--r))}
.pop-char2 .cv-eq.lock{opacity:.85;background-image:url(../img/ui/slot-lock.webp)}
.pop-char2 .cv-eq.lock b,.pop-char2 .cv-eq.lock i{display:none}

/* แผงขวา + แท็บ */
.pop-char2 .cv-panel{border:solid transparent;border-width:14px;border-radius:0;background:none;border-image:url(../img/ui/panel.webp) 44 fill / 22px}
.pop-char2 .cv-tabs{border:0;gap:4px;padding:2px 2px 4px}
.pop-char2 .cv-tabs button{height:34px;border:solid transparent;border-width:0;border-image:url(../img/ui/tab.webp) 20 26 fill / 10px 13px;color:#c9d2e6;background:none}
.pop-char2 .cv-tabs button.on{border-image-source:url(../img/ui/tab-on.webp);color:#3a2614;background:none}

/* แถวค่าพลัง + เพชรเกรด */
.pop-char2 .cv-st{background:none;border-radius:0;border:solid transparent;border-width:0;border-image:url(../img/ui/row.webp) 24 26 fill / 12px 13px;padding:4px 12px 4px 18px}
.pop-char2 .cv-st span{color:#f8d878}
.pop-char2 .cv-list{gap:5px}
.pop-char2 .cv-st{grid-template-columns:1fr auto 30px}
.pop-char2 .cv-st i.g{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-4px 0;background:url(../img/ui/grade.webp) center/contain no-repeat;
  font:900 16px/1 Tahoma,sans-serif;font-style:normal;-webkit-text-stroke:3px #0b1020;paint-order:stroke fill;text-shadow:0 0 4px #000}
.pop-char2 .cv-st i.gS{color:#ff6a5a}.pop-char2 .cv-st i.gA{color:#ffc04a}.pop-char2 .cv-st i.gB{color:#8fe0ff}.pop-char2 .cv-st i.gC{color:#a8ec90}.pop-char2 .cv-st i.gD{color:#d4d4d4}
.pop-char2 .cv-radar .rs{fill:#d8a048;fill-opacity:.35;stroke:#f8d878}
.pop-char2 .cv-radar .rg{stroke:#f8d87833}