/* ═══ ชุด UI ใหม่ (22 ก.ย. 2569) — ดู UI_REDESIGN.md ════════════════════════
   โหลดท้ายสุดจึงชนะไฟล์เดิมโดยไม่ต้องรื้อของเก่าทิ้ง ทำทีละส่วนได้
   ⚠️ ห้ามเขียนกฎที่ต้องชนะด้วยจำนวน id (บทเรียนข้อ 3 ใน UI_REDESIGN) — ไฟล์นี้อยู่ท้ายสุดอยู่แล้ว
      ถ้ารู้สึกว่าต้องเติม id เพื่อเอาชนะ แปลว่ากฎเก่าที่ควรลบยังอยู่ ให้ไปลบตัวนั้นแทน
   ══════════════════════════════════════════════════════════════════════════ */

/* ── การ์ดตัวละคร (มุมซ้ายบน) ──────────────────────────────────────────────
   kit/hud-charcard.webp วาดวงกลมรูปหน้ากับรางหลอดมาให้ในตัวไฟล์แล้ว ทุกชิ้นจึงต้อง
   วางทับ "ตำแหน่งที่วัดจากไฟล์จริง" ไม่ใช่กะเอา · วัดจากไฟล์ขนาด 640x317 ได้:
     วงกลมรูปหน้า  x 68–223  y 93–247
     รางหลอด HP    x 335–592 y 176–203
     รางหลอด SP    x 335–591 y 231–260
   ถ้าสั่งภาพใหม่มา ให้วัดใหม่แล้วแก้ตัวเลขชุดนี้ที่เดียว */
body #basic {
  position: fixed; top: 6px; left: 6px;
  width: var(--cc-w, 272px); height: auto; padding: 0;
  background: none; border: 0; border-image: none; box-shadow: none;
}
body #basic > header { display: none; }              /* กรอบใหม่มีหัวในตัวแล้ว */
body #basic .bi { display: block; padding: 0; }
body #basic .bi-main { display: block; min-width: 0; }

body #basic .cc {
  position: relative; width: 100%; aspect-ratio: 640 / 317;
  /* ⚠️ ตัวหนังสือทุกตัวบนการ์ดต้องคิดจาก "ความกว้างการ์ด" (cqw) ไม่ใช่ px คงที่ —
     การ์ดกว้าง 272px บนจอ PC แต่เหลือ ~174px บนมือถือ ถ้าใช้ px เท่ากันทั้งคู่
     ชื่ออาชีพจะโดนตัดเหลือ "L…" และเลขเลือดจะล้นออกนอกราง (เจอจริงตอนถ่ายจอมือถือ) */
  container-type: inline-size;
  background: url(assets/ui/kit/hud-charcard.webp) center/100% 100% no-repeat;
  /* ⚠️ เคยมี filter: drop-shadow() ตรงนี้ — ถอดออกแล้ว
     filter ดันกล่องนี้ขึ้นเป็นเลเยอร์ของตัวเอง ถ้าไฟล์ภาพพื้นหลังมาถึงหลังเลเยอร์
     ถูกวาดไปแล้ว Chrome ไม่วาดซ้ำให้ ผลคือการ์ดโล่ง เห็นแต่หลอดเปล่ากับชื่อลอย ๆ
     (ผู้ใช้เรียกว่า "กราฟฟิคทับซ้อน" · ทำซ้ำได้ในการทดสอบ แต่ไม่ทุกครั้ง)
     ยืนยันได้ว่าเป็นเรื่องการวาด ไม่ใช่ไฟล์หาย: ตอนโล่ง ภาพ decode สำเร็จ 640x317
     และ CSS ถูกต้องทุกค่า พอสั่ง background-color ทับหนึ่งครั้งให้เกิดการวาดใหม่
     ลายก็โผล่มาครบทันที · เงาใต้การ์ดไม่คุ้มกับความเสี่ยงที่การ์ดจะไม่ขึ้นเลย */
}

/* รูปหน้า — ครึ่งตัวบนของตัวละครจริง วาดด้วย portrait() (ui.js: drawFace) */
body #basic .cc-face {
  position: absolute; left: 10.6%; top: 29.3%; width: 24.2%; height: 48.6%;
  border-radius: 50%; overflow: hidden;
}
body #basic .cc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ชื่อชิดซ้าย · เลเวล+อาชีพชิดขวา — ชื่อยาวจะโดนตัดด้วย … ไม่ดันอาชีพตกบรรทัด */
/* ⚠️ ชื่อกับ "Lv 99 · อาชีพ" ต้องคนละบรรทัด — วางเรียงกันแนวนอนแล้วบนมือถือ
   (แผ่นครีมกว้างราว 35px) ชื่ออาชีพยาว 50px จึงถูกตัดเหลือ "…" ทุกครั้ง */
/* วัดแผ่นครีมจากไฟล์: x 270–603 (42.2%–94.2%) y 89–161 (28.1%–50.8%) */
body #basic .bi-name {
  position: absolute; left: 45%; right: 7.5%; top: 28.1%; height: 22.7%;
  display: flex; flex-direction: column; justify-content: center; gap: 0; margin: 0; min-width: 0;
}
body #basic .bi-name b {
  font: 700 5cqw/1.1 var(--font-head); color: #4a3418;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body #basic .bi-name span {
  font-size: 3.8cqw; line-height: 1.15; color: #8a6a3a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* หลอด: ภาพวาดหลอด "เต็ม" ไว้แล้ว ส่วนที่หายไปจึงวาดเป็นแผ่นทึบทับจากขวาเข้ามา
   ทำแบบนี้แทนการวาดหลอดของตัวเองทับ เพื่อเก็บเงา/ความมันของภาพต้นฉบับไว้ครบ */
/* ⚠️ กล่องนี้ต้องพอดีกับ "ช่องสีด้านในหลอด" เป๊ะ ๆ ไม่ใช่พอดีกับรางทั้งราง
   แผ่นทับส่วนที่หายไปวาดเต็มกล่องนี้ ถ้ากล่องเล็กกว่าช่องสี จะเหลือเส้นสีเดิม
   โผล่ตามขอบ (เคยเหลือเส้นแดงบาง ๆ ใต้ช่วงที่เลือดหมด อ่านเป็น "กรอบซ้อนกัน")
   ถ้ากล่องใหญ่กว่า ก็จะไปทับเส้นขลิบทองที่ลายวาดไว้ ทำให้ขลิบขาดเป็นช่วง ๆ

   ตัวเลขข้างล่างวัดจากไฟล์จริงทีละพิกเซล (640x317) ที่ x=460:
     HP  ขลิบทองบน y168-174 · เส้นเงา y175 · เนื้อสีแดง y176-204 · ขลิบล่าง y207-211
     SP  ขลิบทองบน y226-230 · เส้นเงา y231 · เนื้อสีน้ำเงิน y232-259 · ขลิบล่าง y261-266
     แนวนอน เนื้อสีทั้งสองหลอด x325-592 (ซ้าย 50.78% · ขวา 7.34%)
   ถ้าสั่งลายการ์ดใหม่ ต้องวัดใหม่แล้วแก้ตัวเลขชุดนี้ที่เดียว */
body #basic .cc .bi-bar {
  position: absolute; left: 50.78%; right: 7.34%;
  display: block; height: 9.15%; column-gap: 0; margin: 0;
}
/* ⚠️ ห้ามใช้ :nth-of-type ตรงนี้ — มันนับตามชนิดแท็ก (div) ไม่ใช่ตามคลาส
   ลูกตัวแรกของ .cc คือวงรูปหน้า กฎจึงไปตกใส่ผิดตัวและหลอดไม่ขึ้นเลย */
body #basic .cc-hp { top: 55.52%; height: 9.15%; }    /* y 176-204 */
body #basic .cc-sp { top: 73.19%; height: 8.83%; }    /* y 232-259 */
body #basic .cc .bi-bar label { display: none; }
body #basic .cc .bi-bar .rbar {
  position: absolute; inset: 0; width: auto; height: auto;
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; overflow: hidden;
}
/* ⚠️ ไส้หลอดถูกพลิกความหมาย: มันคือ "ส่วนที่หายไป" ยึดขวา ไม่ใช่ส่วนที่เหลือยึดซ้าย
   ui.js ยังตั้ง width เป็น % ของเลือดที่เหลือเหมือนเดิม จึงต้องกลับค่าที่ ui.js (drawBars) */
body #basic .cc .bi-bar .rbar > i {
  position: absolute; top: 0; bottom: 0; right: 0; left: auto;
  background: linear-gradient(#241408, #3a2614);
  border-radius: 3px 5px 5px 3px; box-shadow: inset 3px 0 4px #0008;
  transition: width .18s ease-out;
}
body #basic .cc .bi-bar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 3.7cqw/1 var(--font-head); color: #fff; padding: 0 3%;
  text-shadow: 0 1px 2px #000b, 0 0 3px #0009; pointer-events: none;
}

/* แถบรองใต้การ์ด: EXP + Gold + ปุ่มเสียง — ภาพต้นแบบไม่มี แต่ลบทิ้งไม่ได้ เพราะ Gold
   กับปุ่ม "ลื่น" คือของที่ผู้เล่นใช้จริง · ทำเป็นแผ่นเข้มบางใต้การ์ดแทน */
body #basic .bi-lv, body #basic .bi-zeny {
  margin: 2px 10px 0; padding: 0 6px; border-radius: 7px;
  background: #241a10b8; box-shadow: inset 0 0 0 1px #00000030;
  color: #fff3dc;
}
body #basic .bi-lv > span:first-child, body #basic .bi-lv em { color: #f2e2c2; }
body #basic .bi-zeny { padding: 2px 6px; }
body #basic .bi-zeny b { color: #ffd76a; }
body #basic #b-buffs { margin: 3px 10px 0; }

/* ── ชื่อหน้าต่าง: เดิม 11px อยู่ในแถบสูงเท่าขอบกรอบ (13px) แล้วโดน overflow ตัด
   ผู้ใช้อ่านไม่ออกจริง ๆ ทั้งบน PC และมือถือ · ให้แถบสูงขึ้นและตัวหนังสือโตขึ้น
   ⚠️ แถบนี้ลอยอยู่ "บนขอบกรอบ" (top ติดลบ) การเพิ่มความสูงจึงต้องเลื่อน top ขึ้นเท่ากัน
      ไม่งั้นชื่อจะไหลลงไปทับเนื้อหาแถวแรก */
/* ── หัวหน้าต่างทุกบาน ───────────────────────────────────────────────────
   ⚠️ ต้องใส่ html[data-skin="wood"] ด้วย ไม่ใช่เพื่อ "เอาชนะ" แต่เพราะกฎเดิมที่ตั้ง 11px
      อยู่ในขอบเขตสกินไม้ กฎที่ไม่มีสกินจะแพ้เสมอไม่ว่าจะโหลดทีหลังแค่ไหน

   สามอาการที่วัดเจอว่าเพี้ยนพร้อมกันทุกบาน (4 จาก 5 บนจอคอม):
     1. ชื่อเรื่องทับปุ่มปิด — ชื่อเป็น flex:1 จัดกลางโดยไม่เว้นที่ให้ปุ่ม
        ชื่อยาวอย่าง "กระดานบอส MVP" จึงไหลไปอยู่ใต้ปุ่ม
     2. ปุ่มปิดโผล่พ้นขอบกรอบขึ้นไป 5px — ปุ่มสูงกว่าแถบหัวที่มันอยู่
     3. ปุ่มปิดกว้าง 15px เล็กเกินกดจริง โดยเฉพาะบนจอสัมผัส
   แก้ทั้งสามด้วยการตรึงขนาดปุ่มให้พอดีแถบ + เว้นที่ให้ปุ่มด้วย padding ของชื่อ
   + ขยาย "พื้นที่กด" ด้วย ::before โปร่งใส โดยไม่ขยายตัวปุ่มที่มองเห็น */
html[data-skin="wood"] body .rwin > header,
html[data-skin="wood"] body .win > header,
body .rwin > header,
body .win > header {
  display: flex; align-items: center;
  height: calc(var(--fr, 13px) + 8px);
  top: calc(-1 * var(--fr) - 5px);
  line-height: 1;
  font-size: 14px;
  overflow: visible;
}
/* ชื่อ: จัดกลางแถบ แต่เว้นที่ขวาไว้ให้ปุ่มปิดเท่า ๆ กับซ้าย จะได้ยังดูกลางจริง */
html[data-skin="wood"] body .rwin > header > span,
html[data-skin="wood"] body .win > header > span,
body .rwin > header > span,
body .win > header > span {
  flex: 1; min-width: 0; text-align: center;
  padding: 0 26px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body .rwin > header > span { padding: 0 6px; }        /* กล่องพวกนี้ไม่มีปุ่มปิด */
/* ── ปุ่มปิด ──────────────────────────────────────────────────────────────
   ⚠️ สองสกินวางแถบหัวไม่เหมือนกัน กฎเดียวใช้ทั้งคู่ไม่ได้:
      สกินไม้   — แถบหัว position:absolute ลอยอยู่บนลายกรอบ
      สกิน classic — แถบหัวอยู่ในลำดับปกติของเนื้อหา
   ตอนแรกเขียน position:absolute รวมทั้งสองสกิน ผลคือบน classic ปุ่มไปเกาะ
   "ก้นหน้าต่าง" (ตัวที่ positioned ตัวถัดไปคือ .win เอง) หลุดจากแถบหัวไป 300-600px
   — วัดเจอ 4 บานทั้งบนมือถือและจอคอม ตาเปล่าไม่มีทางเดาได้ว่ามันไปอยู่ไหน */
html[data-skin="wood"] body .win > header button,
body .win > header button {
  /* ⚠️ ขนาดคิดจาก --fr ไม่ใช่ตรึงเป็น px — หน้าต่างเสริมใช้กรอบบางกว่า (--fr:11px)
     แถบหัวจึงเตี้ยกว่า ปุ่มขนาดตรึงเลยสูงกว่าแถบที่มันอยู่ (วัดเจอ 3 บาน) */
  flex: none; align-self: center; margin-left: auto;
  width: calc(var(--fr, 13px) + 6px); height: calc(var(--fr, 13px) + 6px);
  min-height: 0; min-width: 0; padding: 0;
  line-height: 1; font-size: 13px; font-weight: 700;
}
/* สกินไม้เท่านั้น: จัดกลางแนวตั้งของแถบหัว ให้ตรงกับกึ่งกลางป้ายชื่อ
   ⚠️ เดิมยึด bottom:0 ซึ่งพอดีตอนแถบหัวสูง 21px แต่พอแถบสูงขึ้นเป็น 34px
      เพราะมีป้ายชื่อ ปุ่มก็เลื่อนลงไปเกาะขอบล่าง ดูเหมือนลอยหลุดจากป้าย
      (เห็นชัดที่หน้าต่างแผนที่ซึ่งกว้าง 820px — ผู้ใช้ทักเอง) */
html[data-skin="wood"] body .win > header button {
  position: absolute; right: 5px; top: 50%; bottom: auto; margin-left: 0;
  translate: 0 -50%;
  width: 22px; height: 22px; border-radius: 6px; font-size: 12px;
}
/* พื้นที่กดกว้างกว่าตัวปุ่ม — นิ้วกดง่ายโดยที่ปุ่มไม่โตจนล้นแถบ */
html[data-skin="wood"] body .win > header button::before,
body .win > header button::before {
  content: ''; position: absolute; inset: -9px; border-radius: 10px;
}
@media (max-width: 760px), (pointer: coarse) {
  html[data-skin="wood"] body .win > header button,
  body .win > header button { width: calc(var(--fr, 13px) + 8px); height: calc(var(--fr, 13px) + 8px); font-size: 14px; }
  html[data-skin="wood"] body .win > header button { right: 5px; width: 24px; height: 24px; }
  html[data-skin="wood"] body .win > header button::before,
  body .win > header button::before { inset: -10px; }
  html[data-skin="wood"] body .win > header > span,
  body .win > header > span { padding: 0 34px; }
}

/* ── ป้ายชื่อและลูกโป่งคำพูดเหนือหัว ─────────────────────────────────────
   เดิม 11px ตายตัว · ป้ายพวกนี้เป็น DOM ที่วางทับฉาก ไม่ได้ย่อขยายตามกล้อง
   ผู้เล่นจึง "ซูมเข้าไปแล้วตัวหนังสือก็เท่าเดิม" — ต้องแก้ที่ขนาดตัวอักษร ไม่ใช่ที่กล้อง */
body .label { font-size: 13px; }
body .label .bubble {
  font-size: 14px; line-height: 1.35; padding: 4px 9px; border-radius: 7px;
  max-width: 260px; font-weight: 500; box-shadow: 0 2px 5px #00000040;
}
@media (max-width: 760px), (pointer: coarse) {
  body .label { font-size: 14px; }
  body .label .bubble { font-size: 15px; max-width: 210px; padding: 5px 10px; }
  html[data-skin="wood"] body .rwin > header, html[data-skin="wood"] body .win > header,
  body .rwin > header, body .win > header { font-size: 15px; }
}

/* ── แถบบอกสกิลที่เลือก (#aim-bar) ต้องเริ่มใต้การ์ด ────────────────────
   เดิมตรึงไว้ที่ 80px ซึ่งพอดีกับกล่อง HUD เก่า · การ์ดใหม่สูงกว่านั้น แถบจึงไปทับ
   (check-mobile-hud จับได้ 4 ขนาดจอ) · --hud-b คือขอบล่างจริงของการ์ด ui.js วัดให้ */
/* ⚠️ ใช้ max() ไม่ใช่ค่าสำรองของ var() — --aim-top ถูกตั้งจาก "ขอบล่างของกล่องเป้าหมาย"
   ซึ่งอยู่สูงกว่าการ์ดใหม่ ค่าสำรองจึงไม่มีวันถูกใช้และแถบไปทับการ์ดอยู่ดี
   max() บังคับว่าไม่ว่าเป้าหมายจะอยู่ตรงไหน แถบนี้ต้องไม่ขึ้นไปเหนือขอบล่างของการ์ด */
html.touch-ui body #hud #aim-bar.touch {
  /* 124px = ขอบบน 6 + ความสูงการ์ดสูงสุดบนมือถือ (กว้างสุด 206px × 317/640 ≈ 102) + เว้น 8
     เป็นพื้นขั้นต่ำเผื่อกรณีที่ --hud-b ยังไม่ถูกวัด (เช่น HUD ถูกบังคับให้โผล่โดยไม่ได้ต่อเซิร์ฟเวอร์
     ซึ่งเป็นสภาพที่ check-mobile-hud ใช้ตรวจ) — ไม่ใช่เลขสุ่ม แต่คำนวณจากความกว้างสูงสุดของการ์ด */
  /* พื้นขั้นต่ำ 158px = ขอบบน 6 + ความสูงมินิแมพสูงสุดบนมือถือ (132 + กรอบ 12) + เว้น 8
     ใช้ตอนที่ --hud-b / --map-b ยังไม่ถูกวัด (HUD ถูกบังคับให้โผล่โดยไม่ได้ต่อเซิร์ฟเวอร์)
     แถบนี้เป็นป้ายบอกชั่วคราว ดันลงมาหน่อยไม่เสียหาย แต่ทับแผนที่นี่เสียหาย */
  top: max(var(--aim-top, 0px), calc(var(--hud-b, 80px) + 8px), calc(var(--map-b, 0px) + 8px), 158px);
}

/* ── มินิแมพ: แถบบอกที่อยู่ที่ขอบล่าง (ภาพต้นแบบมือถือ) ──────────────────
   เดิมชื่อโซนกับพิกัดอยู่คนละที่ — พิกัดซ่อนอยู่บนหัวกรอบตัว 11px ส่วนมือถือ
   ไม่เห็นพิกัดเลย · รวมเป็นแถบเดียว อ่านออกทั้งสองจอ
   ⚠️ กฎเดิมซ่อนแถบนี้บนจอคอม (html:not(.touch-ui) #zone-name{display:none})
      ต้องเปิดคืนด้วยตัวเลือกที่มี :not() เท่ากัน ไม่งั้นแพ้ */
html:not(.touch-ui) body #zone-name,
body #zone-name {
  display: block;
  left: 4px; right: 4px; bottom: 4px; translate: none; max-width: none;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(16, 22, 32, .82); color: #ffe9a8;
  font: 600 12px/1.45 var(--font-head); text-align: center;
}
html:not(.touch-ui) body #zone-name::before,
body #zone-name::before { content: '📍 '; }
/* หัวกรอบของมินิแมพไม่มีข้อความแล้ว — ปล่อยให้แถบล่างทำหน้าที่แทน */
body #mapbox > header { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  /* จอแคบ: ตัดหมุดทิ้งแล้วยอมให้ตกบรรทัดได้ — ชื่อโซนไทยยาวกว่าแผนที่เสมอ
     ถ้าบังคับบรรทัดเดียวจะเหลือ "กรีนเวล…" ซึ่งบอกอะไรไม่ได้เลย */
  html:not(.touch-ui) body #zone-name, body #zone-name {
    font-size: 11.5px; line-height: 1.3; white-space: normal; padding: 2px 4px;
  }
  body #zone-name::before { content: none; }
}

/* แผงปาร์ตี้อยู่ใต้มินิแมพ — เดิมตรึงไว้ที่ top:222px ซึ่งพอดีกับแผนที่ขนาดเก่า
   พอแผนที่กว้างขึ้นตามภาพต้นแบบ แผงจึงไปทับ · อ้างขอบล่างจริงของแผนที่แทน */


/* ── ปุ่มกลมมุมซ้าย (เมนู / แชท / ช่องลัด) ────────────────────────────────
   เดิมเป็นไฟล์ภาพสามไฟล์ที่ต้องเข้าชุดกันเอง — สองใบเป็นของที่วาดขึ้นเองเพราะชุดที่
   ส่งมาเป็นภาพเปล่า ผลคือใบแชทดูดีใบเดียว อีกสองใบดูแปลกแยก (ผู้ใช้ทักเอง)
   ตอนนี้วาดด้วย CSS ทั้งสามใบ: แผ่นกลมเข้ม + ขอบทอง + สัญลักษณ์ครีม
   ⚠️ ข้อดีที่ตั้งใจ: มันเป็นกฎเดียวกันทั้งสามใบ จึงเพี้ยนจากกันไม่ได้เลย
      สีดูดมาจากปุ่มแชทเดิม (ขอบนอก #722e1d · ขอบทอง #e2a648 · แผ่น #313a43) */
html.touch-ui body #hud #fabs button {
  background: radial-gradient(circle at 50% 32%, #47525e, #2b333c 72%);
  border: 2px solid #e2a648;
  box-shadow: 0 0 0 2px #722e1d, 0 3px 7px #0006;
  color: transparent;                     /* ซ่อนอีโมจิเดิมที่ยังอยู่ในปุ่ม */
  font-size: 0;
  overflow: visible;
}
html.touch-ui body #hud #fabs button.on {
  background: radial-gradient(circle at 50% 32%, #f3d79a, #d9a544 72%);
  box-shadow: 0 0 0 2px #722e1d, 0 0 10px #ffd47a66, 0 3px 7px #0006;
}
/* สัญลักษณ์: วาดจากกล่องเปล่าสองใบ (::before คือแกนกลาง · box-shadow ทำสำเนาที่เหลือ) */
html.touch-ui body #hud #fabs button::before {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: #f3e8ce;
}
/* ☰ เมนู — สามขีดนอน */
html.touch-ui body #hud #fabs [data-key="menu"]::before {
  width: 20px; height: 2.5px; border-radius: 2px;
  box-shadow: 0 -7px #f3e8ce, 0 7px #f3e8ce;
}
/* 💬 แชท — ลูกโป่งคำพูด (กล่องมน + หางสามเหลี่ยมด้วย ::after) */
html.touch-ui body #hud #fabs [data-key="chat"]::before {
  width: 22px; height: 16px; border-radius: 6px; translate: -50% -58%;
}
html.touch-ui body #hud #fabs [data-key="chat"]::after {
  content: ''; position: absolute; left: 38%; top: 62%;
  border: 5px solid transparent; border-top-color: #f3e8ce; border-right-width: 0;
}
/* ⋯ ช่องลัด — ตาราง 2x2 */
html.touch-ui body #hud #fabs [data-key="hot"]::before {
  width: 7px; height: 7px; border-radius: 2px; translate: -50% -50%;
  box-shadow: 10px 0 #f3e8ce, 0 10px #f3e8ce, 10px 10px #f3e8ce;
  margin: -5px 0 0 -5px;
}
html.touch-ui body #hud #fabs button.on::before,
html.touch-ui body #hud #fabs button.on::after { filter: brightness(.28) saturate(0); }

/* ป้ายชื่อใต้ปุ่ม ตามภาพต้นแบบมือถือ — ลอยอยู่นอกปุ่ม ไม่กินพื้นที่แตะ */
/* ป้ายชื่อกินที่ใต้ปุ่มราว 11px — ถ้าไม่ถ่างระยะห่าง ป้ายของใบบนจะไปนั่งบนใบล่าง */
html.touch-ui body #hud #fabs { gap: 18px; }
html.touch-ui body #hud #fabs button > span.fab-lb {
  position: absolute; left: 50%; top: calc(100% + 1px); translate: -50% 0;
  font: 600 9.5px/1 var(--font-head); color: #fff2d8;
  text-shadow: 0 1px 2px #000, 0 0 3px #000a; pointer-events: none; white-space: nowrap;
}

/* ── บอกให้เห็นว่า "ลากได้" ─────────────────────────────────────────────
   ระบบลากมีมาตั้งแต่แรกแต่ไม่มีอะไรบอก ผู้ใช้ถามตรง ๆ ว่า "หน้าสกิลจะลากยังไง"
   ของที่ลากได้จึงต้องดูต่างจากของที่ลากไม่ได้ ก่อนจะแตะมันด้วยซ้ำ */
body .sk-row .ic[data-sk],
body .grid .slot[data-uid],
body #hotbar .slot {
  cursor: grab;
  touch-action: none;                 /* กันเบราว์เซอร์กินการลากไปเลื่อนหน้าจอเสียก่อน */
}
body .sk-row .ic[data-sk]:active,
body .grid .slot[data-uid]:active { cursor: grabbing; }
/* จุดจับเล็ก ๆ มุมบนขวา — เห็นแล้วรู้ว่าหยิบได้ ไม่กินที่และไม่บังไอคอน */
body .sk-row .ic[data-sk], body .grid .slot[data-uid] { position: relative; }
body .sk-row .ic[data-sk]::after,
body .grid .slot[data-uid]::after {
  content: ''; position: absolute; right: 2px; top: 2px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #6b4f19;
  box-shadow: 0 4px #6b4f19, 4px 0 #6b4f19, 4px 4px #6b4f19;
  opacity: .42; pointer-events: none;
}

/* ═══ รอบเก็บงานจอคอม (22 ก.ย.) ═══════════════════════════════════════════
   โครงหน้าจอผ่านแล้ว รอบนี้แก้ "ลำดับความสำคัญ · ความหนาแน่น · การอ่านออก"
   ไม่ย้ายตำแหน่งอะไร ไม่แตะกลไกเกม
   ⚠️ ทุกกฎในบล็อกนี้ล้อม html:not(.touch-ui) — ห้ามให้หลุดไปโดนมือถือ (มือถือถือคนละมือ) */

@media (min-width: 761px) and (pointer: fine) {
html:not(.touch-ui) body {
  /* ตัวหนังสือฐานโตขึ้นจาก 12 → 14px · ไทยกับอังกฤษใช้ลำดับเดียวกัน */
  font-size: 14px;
}
html:not(.touch-ui) body .win { font-size: 14px; line-height: 1.5; }
html:not(.touch-ui) body .small,
html:not(.touch-ui) body .win small { font-size: 13px; }
html:not(.touch-ui) body .win > header,
html:not(.touch-ui) body .rwin > header { font-size: 16px; }

/* ── ต้นไม้สกิล: แถวโปร่งขึ้น ปุ่มช่องลัดเลิกเป็นปุ่มใหญ่ซ้ำทุกแถว ──────────
   เดิมทุกแถวมีปุ่ม "+ ช่องลัด" เต็มรูปแบบ ทั้งที่เป็นงานรอง — ตาไปจับปุ่มก่อนชื่อสกิล
   ตอนนี้เหลือปุ่มสี่เหลี่ยมเล็กคู่กับ ▲ ส่วนทางหลักคือลากรูปสกิลลงช่องลัด */
html:not(.touch-ui) body .sk-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px; padding: 7px 10px; align-items: center;
}
html:not(.touch-ui) body .sk-row .ic { width: 34px; height: 34px; border-radius: 7px; font-size: 12px; }
html:not(.touch-ui) body .sk-row .nm { font-size: 14px; line-height: 1.3; }
html:not(.touch-ui) body .sk-row .lv { font-size: 12.5px; margin-top: 1px; }
html:not(.touch-ui) body .sk-btns { flex-direction: row; gap: 4px; align-items: center; }
html:not(.touch-ui) body .sk-btns .rbtn { min-width: 30px; height: 28px; padding: 0 6px; font-size: 13px; }
html:not(.touch-ui) body .sk-btns .hot { font-size: 15px; line-height: 1; opacity: .72; }
html:not(.touch-ui) body .sk-row:hover .sk-btns .hot { opacity: 1; }
/* หัวกลุ่มสกิล (Assassin / Thief) — เว้นบนให้เห็นว่าเป็นคนละกลุ่ม */
html:not(.touch-ui) body .sk-head {
  font-size: 13.5px; margin: 14px 0 4px; padding: 3px 10px 4px; letter-spacing: .01em;
}
html:not(.touch-ui) body .sk-head:first-child { margin-top: 2px; }

/* ── กล่อง "ว่าง" ของปาร์ตี้กับห้องคุย: เดิมสูงจนกินครึ่งจอโดยไม่มีข้อมูลอะไรเลย ──
   ย่อภาพประกอบ บีบระยะ และทำให้ปุ่มที่ต้องกดเด่นกว่าคำอธิบาย */
/* ⚠️ ต้องเป็น .empty-art img ไม่ใช่ .empty-art — เขียนผิดรอบแรกแล้วไปตั้งความกว้าง
   ให้ "กล่อง" ทั้งกล่องเหลือ 92px ย่อหน้าเลยไหลเป็นบันไดทีละสองคำ */
html:not(.touch-ui) body .win .empty-art img,
html:not(.touch-ui) body .win img.empty { width: 92px; height: auto; }
html:not(.touch-ui) body .win .ept { padding: 10px 12px 12px; gap: 6px; }
html:not(.touch-ui) body .win .ept b { font-size: 15px; }
html:not(.touch-ui) body .win .ept p,
html:not(.touch-ui) body .win .ept small { font-size: 13px; line-height: 1.45; max-width: 34ch; margin: 0 auto; }

/* ── ช่องของในกระเป๋า: ใหญ่ขึ้นให้ไอคอนอ่านออก และมีสถานะที่ต่างกันจริง ── */
html:not(.touch-ui) body .grid .slot { width: 44px; height: 44px; border-radius: 7px; }
html:not(.touch-ui) body .grid .slot .ic,
html:not(.touch-ui) body .grid .slot img { width: 80%; height: 80%; object-fit: contain; }
html:not(.touch-ui) body .grid .slot:hover { background: #fff8e6; box-shadow: inset 0 0 0 1px #c8a24e; }
html:not(.touch-ui) body .grid .slot.sel {
  box-shadow: inset 0 0 0 2px #2f8f96, 0 0 0 1px #e8b64a; background: #eefaf9;
}

/* ── แท็บหมวดของในกระเป๋า: เดิมเป็นแถบตั้งแคบ ๆ ตัวหนังสือตะแคง กดยากและอ่านยาก ── */
html:not(.touch-ui) body .win[data-win="items"] .tabs,
html:not(.touch-ui) body .win[data-win="gear"] .tabs { gap: 4px; }
html:not(.touch-ui) body .win .tabs button {
  min-height: 30px; padding: 0 12px; font-size: 13.5px; writing-mode: horizontal-tb;
}
}

@media (min-width: 761px) and (pointer: fine) {
/* ── พื้นตัวหนังสือในหน้าต่าง: ไล่เก็บของที่ยังต่ำกว่า 12.5px ─────────────
   วัดจากหน้าจอจริงแล้วไล่ทีละคลาส ไม่ใช่เดา — ปุ่ม ค่าสถานะ ราคา ป้ายจำนวน
   ล้วนตั้ง px ไว้เองทั้งนั้น การขยายตัวอักษรฐานจึงไม่ถึงมัน */
/* ⚠️ ห้ามเขียนกว้าง ๆ ว่า `.win button` — มันไปโดนปุ่มปิดบนหัวหน้าต่างด้วย
   แล้วดันความสูงเป็น 28px ทั้งที่แถบหัวสูงแค่ 19px (วัดเจอบนสกิน classic 4 บาน) */
html:not(.touch-ui) body .win .rbtn,
html:not(.touch-ui) body .win .body button,
html:not(.touch-ui) body .win .foot button,
html:not(.touch-ui) body .win .actions button { font-size: 13px; min-height: 28px; }
html:not(.touch-ui) body .win .st-row .v,
html:not(.touch-ui) body .win .st-row b { font-size: 14px; }
html:not(.touch-ui) body .win .cost,
html:not(.touch-ui) body .win .detail p,
html:not(.touch-ui) body .win p { font-size: 13px; line-height: 1.5; }
html:not(.touch-ui) body .win b,
html:not(.touch-ui) body .win span:not(.qty):not(.ic):not(.el):not(.key) { font-size: inherit; }
/* ป้ายจำนวนบนช่องของเป็น "ตัวเลขติดมุม" ไม่ใช่เนื้อความ เล็กกว่าได้แต่ไม่ควรต่ำกว่า 11 */
html:not(.touch-ui) body .win .qty,
html:not(.touch-ui) body #hotbar .qty { font-size: 11px; }
html:not(.touch-ui) body .win > header button { font-size: 13px; }

/* ── ระดับความหนาของกรอบ: ไม่ให้ทุกอย่างสำคัญเท่ากัน ─────────────────────
   A = หน้าต่างหลัก (กระเป๋า สวมใส่ สกิล สถานะ) — กรอบไม้เต็มรูปแบบตามเดิม
   B = หน้าต่างเสริม (ปาร์ตี้ ผู้เล่น อันดับ บอส) — ลดลายมุมลงราวหนึ่งในสาม
   C = ป้าย HUD (เป้าหมายตอนนี้) — กรอบบางสุด แทบไม่มีลายทอง
   ทำด้วยการย่อ --fr (ความหนากรอบ) ต่อหน้าต่าง ซึ่งเป็นตัวแปรที่สกินใช้อยู่แล้ว */
html:not(.touch-ui) body .win[data-win="party"],
html:not(.touch-ui) body .win[data-win="social"],
html:not(.touch-ui) body .win[data-win="rank"],
html:not(.touch-ui) body .win[data-win="mvp"] { --fr: 11px; }
html:not(.touch-ui) body #goal { --fr: 8px; }
html:not(.touch-ui) body #goal b { font-size: 14px; }
html:not(.touch-ui) body #goal .small { font-size: 12.5px; }
}

@media (min-width: 761px) and (pointer: fine) {
/* ไล่เก็บรอบสอง — วัดแล้วยังเหลือสามคลาสนี้ที่กฎเดิมตั้ง px ไว้แน่นกว่า */
html:not(.touch-ui) body .win .v,
html:not(.touch-ui) body .win .cost,
html:not(.touch-ui) body .win .small,
html:not(.touch-ui) body .win .lv,
html:not(.touch-ui) body .win .foot,
html:not(.touch-ui) body .win footer,
html:not(.touch-ui) body .win footer * { font-size: 13px; }
html:not(.touch-ui) body .win .v { font-size: 14px; font-weight: 700; }
}

@media (min-width: 761px) and (pointer: fine) {
/* แถวค่าสถานะ: สกินไม้ตั้ง .st-row ไว้ 11px + สูงตายตัว 20px ซึ่งเป็นต้นทางของ
   ตัวเลขเล็กทั้งแถว · ขยายที่ตัวแถวเลย แล้วปล่อยความสูงให้ยืดตามตัวอักษร
   (ต้องใส่ขอบเขตสกินด้วย เพราะกฎต้นทางอยู่ในขอบเขตนั้น) */
html[data-skin="wood"]:not(.touch-ui) body .st-row,
html:not(.touch-ui) body .st-row { font-size: 13px; height: auto; min-height: 24px; }
html[data-skin="wood"]:not(.touch-ui) body .st-row .v,
html:not(.touch-ui) body .st-row .v { font-size: 14px; }
}

@media (min-width: 761px) and (pointer: fine) {
/* ── แท็บหมวดของในกระเป๋า: จากแถบตั้งกว้าง 20px ตัวหนังสือตะแคง 10px
   เป็นแถวนอนปกติ · ของเดิมกดยากและอ่านยากทั้งสองอย่าง (ผู้ใช้ทักมาเอง) */
html[data-skin="wood"]:not(.touch-ui) body .inv,
html:not(.touch-ui) body .inv { grid-template-columns: minmax(0, 1fr); gap: 6px; }
html[data-skin="wood"]:not(.touch-ui) body .vtabs,
html:not(.touch-ui) body .vtabs { flex-direction: row; gap: 4px; padding: 2px 0; }
html[data-skin="wood"]:not(.touch-ui) body .vtabs button,
html:not(.touch-ui) body .vtabs button {
  writing-mode: horizontal-tb; transform: none;
  font: 600 13px var(--font-head); padding: 0 12px; min-height: 28px; flex: 1;
}

/* ── กล่องว่าง (ยังไม่มีปาร์ตี้ / ยังไม่มีห้อง): ย่อลงราวหนึ่งในสาม ──────────
   ภาพประกอบเดิมกินความสูงเท่าเนื้อหาจริงทั้งหน้าต่าง ทั้งที่ไม่มีข้อมูลอะไรเลย
   ปุ่มที่ต้องกด (create) ต้องเด่นกว่าคำอธิบาย ไม่ใช่จมอยู่ใต้ย่อหน้ายาว */
html:not(.touch-ui) body .empty-art { gap: 5px; padding: 8px 10px 10px; }
html:not(.touch-ui) body .empty-art img { width: 84px; height: auto; }
html:not(.touch-ui) body .empty-art b { font-size: 15px; color: var(--ink); }
html:not(.touch-ui) body .empty-art p {
  font-size: 12.5px; line-height: 1.45; margin: 0; max-width: 32ch;
}
html:not(.touch-ui) body .win .actions button.main {
  font-size: 14px; min-height: 32px; padding: 0 16px; font-weight: 700;
}
}

@media (min-width: 761px) and (pointer: fine) {
/* หน้าต่างเสริมต้องกว้างพอให้ข้อความไม่ไหลเป็นบันไดทีละ 2-3 คำ
   (ย่อกล่องว่างแล้วเจอว่าย่อหน้าไปเรียงตัวเป็นคอลัมน์แคบแทน ซึ่งแย่กว่าเดิม) */
html:not(.touch-ui) body .win[data-win="party"],
html:not(.touch-ui) body .win[data-win="social"] { min-width: 264px; }
}

@media (min-width: 761px) and (pointer: fine) {
/* .empty-art เป็น grid ที่ตั้ง place-items:center ลูกจึงถูกบีบเป็น fit-content
   ย่อหน้าเลยไหลเป็นบันไดทีละ 2-3 คำแทนที่จะใช้ความกว้างที่มี — ยืดให้เต็มคอลัมน์ */
html:not(.touch-ui) body .empty-art > * { justify-self: stretch; }
html:not(.touch-ui) body .empty-art img { justify-self: center; }
html:not(.touch-ui) body .empty-art p { max-width: none; padding: 0 2px; }
}

@media (min-width: 761px) and (pointer: fine) {
/* สองจุดสุดท้ายที่ยังเป็น 10px — ช่องสวมใส่หมวกอาชีพ กับปุ่มเล็กในช่องนั้น
   (สกินไม้ตั้งไว้ตอนที่กล่องยังเล็กกว่านี้) */
html[data-skin="wood"]:not(.touch-ui) body .eqslot.classhat,
html:not(.touch-ui) body .eqslot.classhat { font-size: 12.5px; line-height: 1.35; }
html[data-skin="wood"]:not(.touch-ui) body .eqslot .rbtn,
html:not(.touch-ui) body .eqslot .rbtn { min-height: 24px; padding: 0 10px; font-size: 12.5px; }
html:not(.touch-ui) body .eqslot { font-size: 13px; min-height: 34px; }
}

/* ── ป้ายเป้าหมาย: ต้องเริ่มใต้การ์ดตัวละคร ──────────────────────────────
   ค่า top:80px เดิมพอดีกับกล่อง HUD แบบเก่าที่จบราว y 72 · การ์ดใหม่จบที่ ~111
   ป้ายจึงไปทับชื่อกับหลอดเลือดของตัวเอง (ผู้ใช้ส่งภาพมาให้ดู)
   ใช้ --hud-b ที่ ui.js วัดสดอยู่แล้ว วิธีเดียวกับแถบเล็งเป้า พร้อมพื้นขั้นต่ำเผื่อกรณียังไม่วัด */

/* ── ป้ายเป้าหมายที่เป็น "คน": ปุ่มชวนเข้าปาร์ตี้ต้องดูกดได้ ────────────────
   เดิมเป็นปุ่มพื้นเรียบขนาดข้อความ กลืนไปกับบรรทัดข้อมูล */
#target .t-inv {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px; padding: 0 12px; min-height: 30px;
  border: 1px solid #8d6a22; border-radius: 8px;
  background: linear-gradient(#f6dca2, #d9a741);
  color: #43310d; font: 700 13px var(--font-head); cursor: pointer;
  box-shadow: 0 1px 3px #0005, inset 0 1px 0 #fff8;
}
#target .t-inv:hover { background: linear-gradient(#fff0c8, #e6b752); }
#target .t-inv:active { translate: 0 1px; box-shadow: 0 0 2px #0006, inset 0 1px 0 #fff6; }

/* ── แผ่นลอย (.sheet) — ตัวเลือกช่องลัด · รายละเอียดสกิล ────────────────────
   ⚠️ เคยยืมคลาส .ctx (เมนูกดชื่อ) มาใช้ แล้วเจอสองปัญหาพร้อมกัน:
      1. ui-mobile.css ตั้ง .ctx เป็นแผ่นชิดขอบล่างด้วย left/top !important
         กฎตำแหน่งของเราจึงแพ้ และแผ่นบวมผิดรูป (ผู้ใช้ส่งภาพมาให้ดู)
      2. .ctx เป็น flex column ลูกจึงถูกยืดเต็มความสูง ป้ายข้อมูลกลายเป็นก้อนสูง ๆ
   คลาสของตัวเองจบปัญหาทั้งสอง และไม่ไปกวนเมนูกดชื่อที่ยังใช้ .ctx อยู่
   ⚠️ ห้ามจัดกลางด้วย translate — อนิเมชันเปิดใช้ property เดียวกัน (ดูคอมเมนต์ด้านล่าง) */
.sheet {
  position: fixed; inset: 0; margin: auto; z-index: 60;
  width: min(92vw, 360px); height: max-content; max-height: 84vh; overflow-y: auto;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(#fdf6e4, #efdcb4);
  border: 1px solid #a88433; box-shadow: 0 10px 30px #2a1b0080;
  color: var(--ink);
  animation: popIn .16s var(--pop-in);
}
/* มือถือ: แผ่นชิดขอบล่าง นิ้วเอื้อมถึงง่ายกว่ากลางจอ */
@media (max-width: 760px), (pointer: coarse) {
  .sheet { inset: auto 8px calc(10px + var(--safe-b, 0px)) 8px; width: auto; max-height: 76vh; }
}

#slot-pick { display: grid; gap: 8px; text-align: center; }

/* ── ปุ่มสกิลมือถือ: 4 ปุ่ม เรียงบนส่วนโค้งเดียวกัน ─────────────────────────
   ที่ 3 ปุ่ม สายเวทย์ต้องกดสลับ "ชุด" กลางสู้ ซึ่งทำได้ยาก จึงเพิ่มเป็น 4

   ⚠️ ปุ่มพวกนี้ **ไม่ได้วางด้วยตาราง** แม้ #touch-acts จะตั้ง grid-template-columns ไว้ —
      บนจอเล็กมันเป็น display:block แล้ววางทีละปุ่มด้วย right/bottom เป็นส่วนโค้ง
      รอบปุ่มโจมตี (ui-mobile.css ท้ายไฟล์) · ปุ่มที่เพิ่มมาโดยไม่ประกาศพิกัดจะได้
      right:auto แล้วไปโผล่ที่ x=390 คือนอกจอพอดี (วัดเจอ ไม่ใช่เดา)

   ⚠️ และตำแหน่งเดิมทั้งสามปุ่มไม่ได้อยู่บนวงเดียวกัน (รัศมีจริง 89 · 125 · 146)
      พอเพิ่มปุ่มที่สี่เข้าไปมันจึงอ่านเป็น "กระจัดกระจาย" ไม่ใช่โค้ง (ผู้ใช้ทักว่าเพี้ยน)
      รอบนี้คำนวณใหม่ทั้งสี่ปุ่มบนวงเดียว แล้ววัดว่าไม่ชนอะไรก่อนใส่:

        ศูนย์กลาง = ศูนย์ปุ่มโจมตี (right 61, bottom 61 จากมุมขวาล่าง) · รัศมี 150
        มุม 100° · 75° · 50° · 25° → กระจายเท่ากันทีละ 25°

      ⚠️ รัศมีต้อง 150 ไม่ใช่ 118 — ที่ 118 ระยะจากกึ่งกลางปุ่มหนึ่งถึงอีกปุ่มคือ 51px
         แต่ปุ่มกว้าง 58px วงจึงกินกันเอง ดูเป็นก้อนเดียวไม่ใช่สี่ปุ่ม
         ที่ 150 ระยะเป็น 65px เหลือช่องว่างระหว่างวง 7px กำลังแยกออกจากกันพอดี
        right/bottom = ศูนย์ + รัศมี×cos/sin − ครึ่งปุ่ม(29)

      ตรวจแล้วทั้งสี่ปุ่มไม่ชนปุ่มโจมตี ไม่ชนปุ่มชุด และไม่ชนจอย (ขอบซ้ายสุด 193 > 94) */
@media (max-width: 760px), (pointer: coarse) {
  html.touch-ui body #hud #touch-acts [data-slot] { width: 58px; height: 58px; }
  html.touch-ui body #hud #touch-acts [data-slot="0"] { right: 6px;   bottom: 180px; }
  html.touch-ui body #hud #touch-acts [data-slot="1"] { right: 71px;  bottom: 177px; }
  html.touch-ui body #hud #touch-acts [data-slot="2"] { right: 128px; bottom: 147px; }
  html.touch-ui body #hud #touch-acts [data-slot="3"] { right: 168px; bottom: 95px; }
}

/* ── รายละเอียดสกิล (#sk-info) ────────────────────────────────────────────
   คำอธิบายสกิลเคยอยู่ใน title="" เท่านั้น = ทูลทิปที่ต้องเอาเมาส์ไปชี้ค้าง
   บนมือถือไม่มีเมาส์ จึงไม่มีทางอ่านได้เลย · แผ่นนี้คือที่อ่านของมัน
   ⚠️ ต้องลอยเหนือหน้าต่างสกิล (z สูงกว่า .win) ไม่งั้นโผล่ใต้แผ่นแล้วมองไม่เห็น */
#sk-info { display: grid; gap: 9px; text-align: left; }
#sk-info .si-top { display: flex; align-items: center; gap: 10px; }
#sk-info .si-ic {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; font: 700 13px var(--font-head);
  box-shadow: inset 0 -3px 0 #00000030;
}
#sk-info .si-name { min-width: 0; display: grid; }
#sk-info .si-name b { font: 700 16px var(--font-head); }
#sk-info .si-name small { font-size: 12.5px; opacity: .8; }
#sk-info .si-desc { margin: 0; font-size: 13.5px; line-height: 1.5; }
#sk-info .si-facts { display: flex; flex-wrap: wrap; gap: 5px; }
#sk-info .si-facts span {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 8px; border-radius: 99px; background: #00000012; font-size: 12.5px;
}
#sk-info .si-facts i { font-style: normal; opacity: .65; font-size: 11.5px; }
#sk-info .si-req { margin: 0; font-size: 12.5px; color: #b3541e; }
/* ⚠️ อย่าใช้ flex:1 กับทุกปุ่ม — ปุ่มจะถูกบีบเท่ากันหมดแล้วตัวหนังสือขาด
   ("ใส่ช่องลัด" เหลือ "ใส่ช่องล") · ให้แต่ละปุ่มกว้างตามข้อความ แล้วปุ่มหลักกินที่ที่เหลือ */
#sk-info .si-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
#sk-info .si-btns .rbtn {
  flex: 0 1 auto; min-height: 34px; padding: 0 12px; font-size: 13.5px; white-space: nowrap;
}
#sk-info .si-btns .main { flex: 1 1 auto; font-weight: 700; }

/* ── ปุ่ม AUTO บนมือถือ + ปุ่มสกิลที่ยังว่าง ──────────────────────────────
   ⚠️ ปุ่มแดงใหญ่เคยทำหน้าที่ "สลับโหมดอัตโนมัติ" ไม่ใช่ "ตี" — ซึ่งไม่ตรงกับเกมมือถือ
      ทุกเกมที่ปุ่มใหญ่คือตีหนึ่งที · ผู้เล่นกดแล้วไม่เห็นอะไรเกิดขึ้นทันที เลยงงว่าปุ่มนี้ทำอะไร
      แยกเป็นสองปุ่ม: แดง = ตี · AUTO = สลับโหมด (เล็กกว่า อยู่ใต้ปุ่มแดง) */
@media (max-width: 760px), (pointer: coarse) {
  html.touch-ui body #hud #touch-acts [data-auto] {
    /* วางระหว่างปุ่มแดง (สูงถึง 100 จากขอบล่าง) กับปุ่มสกิลใบแรก (เริ่มที่ 158)
       ช่อง 104–150 จึงพอดี เหลือช่องว่าง 4px บน 8px ล่าง — วัดแล้วไม่ทับทั้งคู่ */
    position: absolute; right: 14px; bottom: 104px;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 32%, #47525e, #2b333c 72%);
    border: 2px solid #e2a648; box-shadow: 0 0 0 2px #722e1d, 0 3px 7px #0006;
  }
  html.touch-ui body #hud #touch-acts [data-auto] small {
    font: 700 11px/1 var(--font-head); color: #f3e8ce; letter-spacing: .02em;
  }
  html.touch-ui body #hud #touch-acts [data-auto].on {
    background: radial-gradient(circle at 50% 32%, #7fe3e0, #2f8f96 72%);
    box-shadow: 0 0 0 2px #722e1d, 0 0 12px #6fd8de88, 0 3px 7px #0006;
  }
  html.touch-ui body #hud #touch-acts [data-auto].on small { color: #08262a; }

  /* ช่องสกิลที่ยังว่าง: ต้องดูออกว่า "ว่าง" ไม่ใช่ลูกแก้วสวย ๆ ที่กดแล้วไม่มีอะไรเกิด
     เดิมมันแสดงรูปลูกแก้วเหมือนช่องที่มีสกิล ผู้เล่นจึงไม่รู้ว่าต้องใส่สกิลเอง */
  html.touch-ui body #hud #touch-acts [data-slot]:not(.filled) > img { opacity: .18; }
  html.touch-ui body #hud #touch-acts [data-slot]:not(.filled)::after {
    content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
    font: 300 30px/1 var(--font-head); color: #fff8e0cc; text-shadow: 0 1px 3px #0009;
    pointer-events: none;
  }
  html.touch-ui body #hud #touch-acts [data-slot]:not(.filled) > b { display: none; }
}

@media (min-width: 761px) and (pointer: fine) {
/* ── เก็บงานจอคอมรอบที่ 2 — ตัวเลขทุกตัวมาจากการวัดของจริง ไม่ใช่กะเอา ──────

   แถบนำทางขวาล่าง (บรีฟข้อ 10): ขอพื้นที่กดอย่างน้อย 40x40 — วัดแล้วมี 3 จาก 13 ปุ่ม
   ที่ยังไม่ถึง · ป้ายชื่อใต้ไอคอน 10px เล็กเกินอ่าน */
html:not(.touch-ui) body #menu [data-win],
html:not(.touch-ui) body #menu [data-act] { min-width: 44px; min-height: 44px; }
html:not(.touch-ui) body #menu [data-win] small,
html:not(.touch-ui) body #menu [data-act] small { font-size: 11.5px; letter-spacing: .01em; }
html:not(.touch-ui) body #menu [data-win]:hover,
html:not(.touch-ui) body #menu [data-act]:hover { filter: brightness(1.06); }
html:not(.touch-ui) body #menu [data-win]:active,
html:not(.touch-ui) body #menu [data-act]:active { translate: 0 1px; }
/* ปุ่มที่มีของรออยู่ (แต้มสถานะ/แต้มสกิล) — จุดแจ้งเตือนมุมบนขวา ไม่ใช่แค่เปลี่ยนสีทั้งปุ่ม */
html:not(.touch-ui) body #menu .attn { position: relative; }
html:not(.touch-ui) body #menu .attn::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e8503a; box-shadow: 0 0 0 1.5px #fff2d8;
}

/* ช่องลัด (บรีฟข้อ 9): เลขปุ่ม F1-F9 อยู่ที่ 9px — เล็กจนต้องเพ่ง */
html:not(.touch-ui) body #hotbar .slot .key { font-size: 11px; opacity: .8; }
html:not(.touch-ui) body #hotbar .slot { transition: box-shadow .12s, translate .12s; }
html:not(.touch-ui) body #hotbar .slot:hover { box-shadow: inset 0 0 0 2px #e8b64a; translate: 0 -1px; }
html:not(.touch-ui) body #hotbar .slot.armed { box-shadow: inset 0 0 0 2px #2f8f96, 0 0 8px #2f8f9666; }

/* ช่องสวมใส่ (บรีฟข้อ 6): สูง 34px เล็กเกินจะเป็นเป้าหมายรับของที่ลากมา */
html:not(.touch-ui) body .eqslot { min-height: 40px; transition: box-shadow .12s; }
html:not(.touch-ui) body .eqslot:hover { box-shadow: inset 0 0 0 2px #c8a24e; }
/* ช่องว่างต้องดูออกว่าว่าง — เส้นประบอกว่า "ตรงนี้รับของได้" */
html:not(.touch-ui) body .eqslot.empty { border: 1px dashed #b89a5e88; }

/* แชท (บรีฟข้อ 11): ช่องพิมพ์สูง 16px ตัวหนังสือ 12px — พิมพ์แล้วแทบมองไม่เห็นว่าพิมพ์อะไร
   เพิ่มที่ว่างในกล่องข้อความด้วย แต่ยังคงเป็นแผ่นโปร่งเข้ม ไม่ใส่กรอบไม้หนาตามบรีฟ */
html:not(.touch-ui) body #chat-in { min-height: 26px; font-size: 13.5px; padding: 0 8px; }
html:not(.touch-ui) body #chat-log { padding: 5px 8px; line-height: 1.45; }
html:not(.touch-ui) body #chat-log .ln { padding: 2px 4px; border-radius: 4px; }
html:not(.touch-ui) body .chat-tabs button { min-height: 26px; padding: 0 10px; font-size: 12.5px; }
html:not(.touch-ui) body .chat-tabs button.on { box-shadow: inset 0 -2px 0 #e8b64a; }
}

/* ── แถวสกิล: ปุ่มสามอย่างแยกหน้าที่ชัด ▲ เพิ่มเลเวล · + ใส่ช่องลัด · i รายละเอียด ─────
   เดิม "แตะแถว" เปิดแผ่นรายละเอียด ซึ่งเดาไม่ได้ว่าจะได้อะไร — ผู้เล่นที่ตั้งใจเลือกสกิล
   ใส่ปุ่มเจอแผ่นอะไรไม่รู้เด้งมาแทน · ย้ายรายละเอียดมาอยู่ปุ่มที่กดโดยตั้งใจ */
body .sk-btns .rbtn.info {
  font: 700 13px/1 var(--font-head); font-style: italic;
  color: #6b5320; opacity: .75;
}
body .sk-row:hover .sk-btns .rbtn.info { opacity: 1; }
@media (max-width: 760px), (pointer: coarse) {
  body .sk-btns { gap: 6px; }
  body .sk-btns .rbtn { min-width: 40px; min-height: 40px; font-size: 15px; }
}

/* แถบบอกว่ากำลังเลือกสกิลใส่ปุ่มไหน — ติดบนสุดของรายการ พร้อมทางออก */
body .sk-pick {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 6px; padding: 8px 10px; border-radius: 9px;
  background: linear-gradient(#2f8f96, #24737a); color: #fff;
  box-shadow: 0 2px 6px #0003;
}
body .sk-pick b { flex: 1; min-width: 0; font: 700 13.5px var(--font-head); }
body .sk-pick .rbtn { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* ── ลากสกิลออกจากปุ่มกลม = เอาออก ────────────────────────────────────────
   ใส่เข้าไปได้แล้วต้องเอาออกได้ ไม่งั้นเปลี่ยนสกิลไม่ได้เลย
   กดค้าง 280ms → ปุ่มจางลง มีเงาตามนิ้ว → ลากออกไกลเกิน 48px แล้วปล่อย = เอาออก */
html.touch-ui body #hud #touch-acts [data-slot].lifting { opacity: .35; }
.slot-yank {
  position: fixed; z-index: 999; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 32%, #47525e, #2b333c 72%);
  border: 2px solid #e2a648; box-shadow: 0 4px 12px #0007;
  scale: 1.1; transition: border-color .12s, box-shadow .12s;
}
.slot-yank > * { width: 70%; height: 70%; object-fit: contain; }
/* ออกไกลพอจะปล่อยแล้ว — เปลี่ยนเป็นแดงให้รู้ว่าปล่อยแล้วของจะหลุดออก */
.slot-yank.drop { border-color: #e8503a; box-shadow: 0 0 14px #e8503a88, 0 4px 12px #0007; }
.slot-yank.drop::after {
  content: 'เอาออก'; position: absolute; top: 100%; left: 50%; translate: -50% 4px;
  font: 700 11px/1 var(--font-head); color: #fff; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}

/* ปุ่มสลับชุด: "ชุด 1" เฉย ๆ ไม่บอกว่ามีกี่ชุดหรือกดแล้วเกิดอะไร — เติม /3 เข้าไป */
html.touch-ui body #hud #touch-acts [data-page] i {
  font-style: normal; font-size: 10px; opacity: .6; margin-left: 1px;
}

/* ── ป้ายบอกว่ากำลังต่อใหม่ (#recon) ──────────────────────────────────────
   ไม่บังจอ ไม่ปิดกั้นการกด — แค่บอกว่าระบบกำลังทำอะไรอยู่ เพราะการเงียบ
   ระหว่างหลุดคือสิ่งที่ทำให้ผู้เล่นคิดว่าเกมค้างแล้วปิดทิ้ง */
#recon {
  position: fixed; left: 50%; translate: -50% 0; top: 10px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(20, 26, 36, .92); color: #ffe9a8;
  font: 600 13px/1 var(--font-head); box-shadow: 0 4px 14px #0007;
  pointer-events: none;
}
#recon[hidden] { display: none; }
#recon .spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid #ffe9a855; border-top-color: #ffe9a8;
  animation: reconSpin .7s linear infinite;
}
@keyframes reconSpin { to { rotate: 360deg; } }
@media (max-width: 760px), (pointer: coarse) {
  #recon { top: auto; bottom: calc(14px + var(--safe-b, 0px)); font-size: 13.5px; }
}

/* ═══ หน้าสร้างตัวละคร — เก็บงานตามภาพต้นแบบ (22 ก.ย.) ════════════════════
   ไม่แตะโค้ดสร้างตัวละคร ไม่แตะการยืนยันตัวตน — งานนี้เป็นเรื่องหน้าตาล้วน */

/* หัวข้อหน้า: ของเดิมไม่มีเลย ผู้เล่นจึงไม่รู้ว่ากำลังอยู่ขั้นตอนไหน */
#l-create .cc-title {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 4px; color: #6b4f19;
  font: 700 21px/1.2 var(--font-head); text-align: center;
}
#l-create .cc-title::before, #l-create .cc-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a96322, #c9a963aa, #c9a96322, transparent);
}

/* ── ตัวละครคือพระเอกของหน้า ─────────────────────────────────────────── */
html:not(.touch-ui) #l-create .cc { grid-template-columns: minmax(0, 286px) minmax(0, 1fr); gap: 22px; }
html:not(.touch-ui) #l-create .cprev { height: 348px; }
#l-create .cprev {
  border-radius: 12px;
  background: linear-gradient(#cfe9f2 0%, #e7f1f3 46%, #f0e4c6 100%);  /* ฟ้า→ทราย เหมือนฉากในเกม */
  box-shadow: inset 0 0 0 1px #00000014, inset 0 -18px 28px -18px #b98a4a55;
}
/* เงาใต้เท้า — ของเดิมตัวละครลอยอยู่บนพื้นเรียบ ไม่มีอะไรบอกว่ายืนอยู่ */
#l-create .cprev-floor {
  position: absolute; left: 50%; bottom: 13%; translate: -50% 0;
  width: 46%; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center, #6b543022 0%, #6b543014 45%, transparent 72%);
  pointer-events: none;
}

/* ── ฝั่งตัวเลือก: ป้ายหมวดเรียงตรงกัน ระยะห่างเท่ากันทุกกลุ่ม ───────────
   ⚠️ อย่าเปลี่ยน .row เป็น grid เพื่อทำคอลัมน์ป้าย — ชิปเป็นลูกโดยตรงของ .row
      grid จะจับชิปแต่ละใบลงคนละแถว (เคยลอง: ชาย/หญิง กลายเป็นเรียงลงมาสองแถว)
      ใช้ padding-left + ป้ายลอยแทน ชิปจึงยังไหลและห่อบรรทัดอยู่ในคอลัมน์ของตัวเอง */
html:not(.touch-ui) #l-create .cc-opt { gap: 15px; }
html:not(.touch-ui) #l-create .cc-opt .row {
  position: relative; padding-left: 74px; gap: 7px; align-items: center;
}
html:not(.touch-ui) #l-create .cc-opt .row > span:first-child {
  position: absolute; left: 0; top: 7px; width: 66px;
  font: 600 14.5px/1.2 var(--font-head); color: #6b5320;
}
html:not(.touch-ui) #l-create .cc-opt label {
  display: grid; gap: 6px; font: 600 14.5px/1.2 var(--font-head); color: #6b5320;
}
html:not(.touch-ui) #l-create .cc-opt .chip { min-height: 34px; padding: 0 15px; font-size: 14px; }
html:not(.touch-ui) #l-create .name-row input { min-height: 46px; font-size: 15px; }
html:not(.touch-ui) #l-create .name-row input:focus {
  outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333;
}
/* ปุ่มสุ่มชื่อเป็นงานรอง อย่าให้เด่นเท่าปุ่มหลัก */
html:not(.touch-ui) #l-create #l-dice {
  min-height: 46px; width: 46px; font-size: 18px; opacity: .85;
}
html:not(.touch-ui) #l-create #l-dice:hover { opacity: 1; }
html:not(.touch-ui) #l-create .swatches { gap: 8px; }
html:not(.touch-ui) #l-create .swatches button { width: 30px; height: 30px; }

/* ── ปุ่มหลัก: ต้องเป็นสิ่งที่เด่นที่สุดในหน้า ──────────────────────────── */
html:not(.touch-ui) #l-create #l-go {
  min-height: 52px; font-size: 17px; letter-spacing: .01em; margin-top: 4px;
}
html:not(.touch-ui) #l-create #l-back { font-size: 13.5px; opacity: .8; }
html:not(.touch-ui) #l-create #l-back:hover { opacity: 1; }

/* ── แยกการ์ดออกจากฉากหลัง โดยไม่ทำให้ภาพพื้นหลังจมหาย ─────────────────
   บรีฟกำชับว่าห้ามเบลอหรือทำให้ภาพมืดทั้งภาพ — ใช้เงานุ่มใต้การ์ดแทน */
html:not(.touch-ui) body .login-card {
  filter: drop-shadow(0 18px 40px rgba(40, 26, 8, .34));
}

/* ปุ่มหลักในภาพต้นแบบเป็นทองอุ่น ของเราเป็นครีมซีด กลืนไปกับพื้นการ์ด
   ลาย 9-slice ของกรอบปุ่มต้องอยู่ (มันให้ความนูน) จึงย้อมทับด้วย multiply
   แทนการทับพื้นหลังทั้งใบ — เงา/ไฮไลต์ในลายยังอ่านออกเหมือนเดิม */
html[data-skin="wood"] body .login-card #l-go { position: relative; isolation: isolate; }
html[data-skin="wood"] body .login-card #l-go::after {
  content: ''; position: absolute; inset: -16px -20px; pointer-events: none;
  background: linear-gradient(180deg, #ffd980, #eaa93a 62%, #d8922b);
  mix-blend-mode: multiply;
  /* ⚠️ ต้องตัดด้วยลายเดียวกับกรอบปุ่ม ไม่งั้นสีทองล้นเป็นสี่เหลี่ยมรอบปุ่ม
     (มุมปุ่มโปร่งใส สี่เหลี่ยมทึบจึงโผล่ออกมาเป็นขอบเรือง — เห็นจริงตอนทดสอบ)
     mask-border = border-image ฉบับหน้ากาก ใช้เลข 9-slice ชุดเดียวกันเป๊ะ */
  -webkit-mask-box-image: url('assets/ui/frames/btn.png') 72 58 fill stretch;
  mask-border: url('assets/ui/frames/btn.png') 72 58 fill stretch;
}
html[data-skin="wood"] body .login-card #l-go:active::after {
  -webkit-mask-box-image-source: url('assets/ui/frames/btn-down.png');
  mask-border-source: url('assets/ui/frames/btn-down.png');
}
html[data-skin="wood"] body .login-card #l-go:disabled::after { display: none; }

/* ── ทรงผมเป็นปุ่มเลื่อน + แถวตัวเลือกกว้างเท่ากันทุกแถว (ตามภาพต้นแบบ) ──
   ภาพต้นแบบใช้ "‹ ชื่อทรง ›" แถวเดียว ไม่ใช่ชิปสี่ใบที่ห่อลงมาสองบรรทัด
   ข้อดีที่วัดได้คือทุกแถวกว้างเท่ากัน สายตาจึงไล่ลงมาเป็นคอลัมน์เดียว */
html:not(.touch-ui) .login-card:has(#l-create:not([hidden])) { width: min(740px, 100%); }
html:not(.touch-ui) #l-create .cc { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
html:not(.touch-ui) #l-create .cprev { height: 340px; }

#l-create .row:has(.step) [data-style] { display: none; }   /* ชิปยังอยู่ในหน้า แค่ไม่แสดง — ดู styleStepper ใน ui-skin.js */
#l-create .step {
  flex: 1; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center; min-height: 38px;
  border: 1px solid #c9a963; border-radius: 10px;
  background: linear-gradient(#fffdf4, #f4e7c9);
}
#l-create .step-now {
  text-align: center; font: 600 14.5px/1.2 var(--font-head); color: #4a3512;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#l-create .step-now::after {           /* "2/4" บอกว่ามีให้เลือกอีกกี่ทรง ไม่งั้นลูกศรดูเหมือนตกแต่ง */
  content: attr(data-of); margin-left: 7px; font-size: 12px; color: #9a7b3e;
}
#l-create .step-arrow {
  height: 100%; border: 0; background: none; color: #8a6c2c;
  font: 400 21px/1 system-ui, sans-serif; cursor: pointer; border-radius: 9px;
}
#l-create .step-arrow:hover:not(:disabled) { background: #e8d5a6; color: #4a3512; }
#l-create .step-arrow:disabled { opacity: .3; cursor: default; }

/* สีผมต้องอยู่แถวเดียวครบเก้าวง เหมือนภาพต้นแบบ */
html:not(.touch-ui) #l-create .swatches { flex-wrap: nowrap; gap: 6px; }
html:not(.touch-ui) #l-create .swatches button { width: 28px; height: 28px; flex: 0 0 auto; }

/* เพศ: ที่เลือกอยู่เป็น teal ทึบตามภาพต้นแบบ (teal คือสีประจำเกม)
   ของเดิมเป็นทอง ซึ่งไปชนกับปุ่ม "สร้างตัวละคร" ที่ควรเป็นสีเด่นที่สุดสีเดียว */
html:not(.touch-ui) #l-create .row:has([data-gender]) { gap: 8px; }
html:not(.touch-ui) #l-create [data-gender] { flex: 1; min-height: 38px; }
html[data-skin="wood"] body .login-card #l-create [data-gender].on {
  background: linear-gradient(#3d8286, #2f6f73); color: #fff;
  border-color: #245a5e; box-shadow: none; text-shadow: 0 1px 0 #0003;
}

/* ตัวเลือกสี่แถวเตี้ยกว่ากล่องตัวอย่าง จัดกึ่งกลางแนวตั้งให้ดูตั้งใจ
   ไม่ใช่ลอยค้างอยู่ข้างบนแล้วเหลือที่ว่างก้อนใหญ่ใต้สีผม */
html:not(.touch-ui) #l-create .cprev { height: 304px; }
html:not(.touch-ui) #l-create .cc-opt { align-content: center; }

/* มือถือ: สีผมเก้าวงต้องอยู่แถวเดียวเหมือนกัน ของเดิมตกบรรทัดเป็น 8+1
   ซึ่งอ่านเหมือนวงสุดท้ายเป็นคนละกลุ่ม · 9x28 + 8x5 = 292px พอดีจอ 360px ขึ้นไป */
html.touch-ui #l-create .swatches { flex-wrap: nowrap; gap: 5px; justify-content: space-between; }
html.touch-ui #l-create .swatches button { width: 28px; height: 28px; flex: 0 0 auto; }

/* ── ช่องว่างของหลอดเลือด/พลัง: ให้ดูเป็น "ร่องไม้ที่ว่าง" ไม่ใช่แผ่นดำแปะทับ ──
   ผู้ใช้ว่า "เหมือนใช้กราฟฟิคทับซ้อน" — ถูกแล้ว เพราะมันทับจริง ๆ และทับด้วยสี
   เกือบดำ (#241408) ซึ่งไม่มีอยู่ที่ไหนบนการ์ดเลย ตากับสมองจึงอ่านว่าเป็น
   ของคนละชิ้นมาวางซ้อน ไม่ใช่หลอดเดียวกันที่พร่องลง

   สีที่ใช้ตอนนี้ดูดจากไฟล์การ์ดจริงด้วย canvas ไม่ได้เดา:
     ในหลอด HP #fa5c61 (ขอบบน #ffa2a2 ขอบล่าง #e63f4d) · ในหลอด SP #379efa
     ปลายหลอดที่ x=592 #a93b3c / #2c518a · ไม้รอบนอก #77512f #4f2813
   ร่องว่างจึงเป็นไม้เข้มในโทนเดียวกับ #77512f ไม่ใช่สีดำ */
body #basic .cc .bi-bar .rbar > i {
  /* เข้มกว่ากรอบไม้รอบ ๆ (#6c4121 / #4f2813) นิดหน่อย จึงอ่านเป็น "ร่องที่ลึกลงไป"
     ถ้าสว่างเท่ากรอบ มันจะกลืนเป็นเนื้อเดียวกับกรอบ ไม่ใช่ช่องว่างในหลอด */
  background: linear-gradient(#452b18, #5c3a22);
  /* เดิม inset 3px 0 4px #0008 = เงาดำหนาที่ขอบซ้าย อ่านเป็น "ขอบของกล่องอีกใบ"
     ตอนนี้เหลือเงาบาง ๆ ให้รู้สึกลึก + เส้นเข้มบนล่างเหมือนร่องที่ถูกเซาะ */
  box-shadow: inset 2px 0 3px #00000045, inset 0 1px 1px #0000003d, inset 0 -1px 1px #ffffff14;
}
/* ปลายของเลือดที่เหลือ: เส้นสว่างบาง ๆ ในโทนสีของหลอดนั้น ทำให้เห็นว่า
   "หลอดจบตรงนี้" แทนที่จะเป็นรอยตัดทื่อ ๆ ระหว่างสองบล็อกสี */
body #basic .cc .bi-bar .rbar > i::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 2px 0 0 2px;
}
body #basic .cc-hp .rbar > i::before { background: linear-gradient(#ffc9c9, #ff8d8d); box-shadow: 0 0 4px #ff7a7a80; }
body #basic .cc-sp .rbar > i::before { background: linear-gradient(#c6e4ff, #7dbcff); box-shadow: 0 0 4px #6fb4ff80; }
/* หลอดเต็ม = ไม่มีช่องว่าง เส้นปลายจึงต้องไม่โผล่มาเป็นขีดลอยที่ขอบขวา */
body #basic .cc .bi-bar .rbar > i[style*="width: 0%"]::before { display: none; }

/* ═══ หัวหน้าต่างมาตรฐานเดียวทั้งเกม (23 ก.ย.) ═══════════════════════════
   ⚠️ ของเดิมเป็น "ป้ายไม้ลอย" ทับขอบบนของกรอบ ซึ่งแก้ปัญหาอ่านไม่ออกได้จริง
      แต่พอเปิดหลายบานพร้อมกัน ป้ายแต่ละบานกว้างไม่เท่ากันและลอยคนละระดับ
      จอเลยดูเหมือน widget หลายชุดมากกว่า UI ของเกมเดียวกัน (ผู้ใช้ทักเอง)
      ตอนนี้หัวอยู่ "ในกรอบ" เป็นแถบเดียวกันทุกบาน: [ไอคอน] ชื่อ ....... [ปิด]
   ⚠️ ห้ามให้บานไหนตั้งความสูงหัว/ขนาดปุ่มปิด/ระยะขอบเอง — ถ้าบานไหนต้องต่าง
      ให้เพิ่มระดับใหม่ในตาราง WIN_LEVEL ของ ui.js แทนการเขียนกฎเฉพาะบาน */
html[data-skin="wood"] body .win > header,
body .win > header {
  position: static; top: auto; left: auto; right: auto;
  display: flex; align-items: center; gap: 8px;
  height: 36px; min-height: 36px; padding: 0 5px 0 9px; margin: 0 0 7px;
  overflow: visible;
  background: linear-gradient(#fbf3de, #f0e1bc);
  border-bottom: 2px solid #dcc18a; border-radius: 7px 7px 0 0;
  color: #5b4524;
}
html[data-skin="wood"] body .win > header > .win-ic,
body .win > header > .win-ic { font-style: normal; font-size: 15px; line-height: 1; flex: none; }
html[data-skin="wood"] body .win > header > span,
body .win > header > span {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
  text-align: left; border: 0; border-image: none;
  font: 700 14.5px/1 var(--font-head); color: #5b4524; text-shadow: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ปุ่มปิดอยู่ในแถบ ไม่ลอยบนลายกรอบอีกแล้ว — ขนาดเท่ากันทุกบานโดยไม่ต้องคิดจาก --fr */
html[data-skin="wood"] body .win > header button,
body .win > header button {
  position: static; flex: none; margin: 0; translate: none;
  width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0;
  border-radius: 7px; border: 1px solid #c9a55e;
  background: linear-gradient(#fffaee, #ecd9a8);
  color: #7a5c22; font: 700 13px/1 var(--font-head);
}
html[data-skin="wood"] body .win > header button:hover,
body .win > header button:hover { background: linear-gradient(#fff, #f5e7c2); }

/* ── ระดับความหนักของกรอบ ─────────────────────────────────────────────────
   บรีฟขอให้ลดความ "กล่องลายเยอะ" ลง 20-30% โดยไม่ทิ้งเอกลักษณ์
   a = บานหลักที่ผู้เล่นใช้นาน · b = บานเสริมที่เปิดดูแล้วปิด */
html[data-skin="wood"] body .win[data-level="b"] { border-width: 14px; }
html[data-skin="wood"] body .win[data-level="b"] > header {
  height: 32px; min-height: 32px; background: linear-gradient(#fbf5e6, #f2e7ce);
  border-bottom-width: 1px;
}
html[data-skin="wood"] body .win[data-level="b"] > header > span { font-size: 13.5px; }

/* กล่องเป้าหมายกับกล่องหมดสติเป็น .rwin แต่มีชื่อเรื่อง — ใช้แถบเดียวกัน ไม่ใช่ป้ายลอย */
html[data-skin="wood"] body #goal > header,
html[data-skin="wood"] body .rwin.dlg > header {
  position: static; top: auto; display: flex; align-items: center; gap: 7px;
  height: 30px; min-height: 30px; padding: 0 9px; margin: 0 0 5px; overflow: visible;
  background: linear-gradient(#fbf3de, #f0e1bc);
  border-bottom: 1px solid #dcc18a; border-radius: 7px 7px 0 0;
}
html[data-skin="wood"] body #goal > header > span,
html[data-skin="wood"] body .rwin.dlg > header > span {
  flex: 1; margin: 0; padding: 0; min-height: 0; text-align: left;
  border: 0; border-image: none; text-shadow: none;
  font: 700 13px/1 var(--font-head); color: #5b4524;
}
html:not(.touch-ui) body #goal .body { padding-top: 2px; }

/* สกิน classic: หัวเป็นแถบไล่สีน้ำเงินอยู่แล้ว แค่ทำให้ตัวหนังสืออ่านออก */
html[data-skin="classic"] body .win > header > span {
  color: #fff; font-weight: 700; text-shadow: 0 1px 2px #00000066;
}

@media (max-width: 760px), (pointer: coarse) {
  html[data-skin="wood"] body .win > header,
  body .win > header { height: 40px; min-height: 40px; padding: 0 6px 0 10px; }
  html[data-skin="wood"] body .win > header button,
  body .win > header button { width: 32px; height: 32px; font-size: 15px; }
  html[data-skin="wood"] body .win > header > span,
  body .win > header > span { font-size: 15px; }
}
/* ═══ เก็บของที่ยังพูดคนละภาษากับชุด UI (22 ก.ย. รอบสอง) ══════════════════
   ผู้ใช้ไล่ดูจอทั้งใบแล้วชี้ว่ามีของหลายชิ้น "ต่างจากเพื่อน" ทั้งหมดในบล็อกนี้
   ใช้ของที่มีอยู่ในชุด UI แล้ว ไม่ได้สั่งภาพใหม่ */

/* ── ปุ่มโจมตีอัตโนมัติบนจอคอม ─────────────────────────────────────────────
   ⚠️ auto-attack.js สร้างปุ่ม .auto-atk มาตั้งแต่ต้น แต่ไม่เคยมี CSS สักบรรทัด
      (grep ทุกไฟล์ .css แล้วไม่เจอเลย) มันจึงเป็นตัวหนังสือเปล่าลอยอยู่ข้างช่องลัด
      ในจอที่ปุ่มอื่นมีกรอบไม้/แผ่นทองหมด */
html:not(.touch-ui) body .auto-atk {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px; border-radius: 9px;
  border: 1px solid #a07a2e; background: linear-gradient(#fff6e2, #e6cd93);
  color: #5b4524; font: 700 13px/1 var(--font-head); cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffffaa, 0 1px 3px #00000026;
}
html:not(.touch-ui) body .auto-atk:hover { background: linear-gradient(#fffdf4, #f0dcaa); }
html:not(.touch-ui) body .auto-atk .sw { font-size: 14px; }
/* ไฟบอกสถานะ: เทาเมื่อปิด · เขียวเรืองเมื่อเปิด อ่านออกจากมุมตาโดยไม่ต้องอ่านตัวหนังสือ */
html:not(.touch-ui) body .auto-atk .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #b7a67f;
  box-shadow: inset 0 1px 1px #00000033;
}
html:not(.touch-ui) body .auto-atk.on {
  border-color: #2f6f73; background: linear-gradient(#3d8286, #2f6f73);
  color: #fffdf4; text-shadow: 0 1px 0 #0003;
}
html:not(.touch-ui) body .auto-atk.on .dot { background: #9ff0a5; box-shadow: 0 0 6px #7ee38a; }

/* ── แถบ Base Lv / Job Lv / Gold ใต้การ์ดตัวละคร ──────────────────────────
   เดิมเป็นแผ่นสี่เหลี่ยมทึบ #241a10b8 ล้วน ๆ ซึ่งเป็นสีที่ไม่มีที่ไหนบนการ์ด
   ชุด UI มีแผ่นเข้มขอบทองอยู่แล้ว (kit/bar-dark-lg.webp 512x86) เอามาใช้
   แผ่นเดียวกับที่การ์ดใช้โทนทอง จึงอ่านเป็นของชุดเดียวกัน */
body #basic .bi-lv, body #basic .bi-zeny {
  background: none; box-shadow: none;
  border: 0 solid transparent; border-width: 6px 12px;
  border-image: url(assets/ui/kit/bar-dark-lg.webp) 12 58 12 58 fill stretch;
  margin: 3px 8px 0; padding: 0 2px; min-height: 22px;
}
body #basic .bi-zeny { padding: 0 2px; }

/* ── แท็บแชท ───────────────────────────────────────────────────────────────
   เดิมเป็นปุ่มครีมมุมมนเปล่า ๆ ไม่มีขอบทองเหมือนปุ่มอื่นในเกม
   ไม่ได้ใช้ kit/tab.webp เพราะลายมีดอกทองใหญ่กลางแท็บ พอย่อลงเหลือสูง 24px
   ดอกจะกินพื้นที่ตัวหนังสือจนอ่านชื่อแท็บไม่ออก — ใช้กฎเดียวกับปุ่มเมนูแทน */
html:not(.touch-ui) body #chat .chat-tabs button {
  min-height: 24px; padding: 0 10px; border-radius: 8px;
  border: 1px solid #b9954a; background: linear-gradient(#fff8e8, #ecd8a6);
  color: #6b5320; font: 600 12.5px/1 var(--font-head);
  box-shadow: inset 0 1px 0 #fff9;
}
html:not(.touch-ui) body #chat .chat-tabs button:hover { background: linear-gradient(#fffdf6, #f4e6bf); }
html:not(.touch-ui) body #chat .chat-tabs button.on {
  background: linear-gradient(#E8C578, #C4903A); color: #3a2a0c;
  border-color: #2f6f73; box-shadow: 0 0 0 2px #2f6f7333;
}

/* ── ช่องพิมพ์แชท ─────────────────────────────────────────────────────────
   กรอบสี่เหลี่ยมเทาธรรมดา ให้เป็นช่องกรอกแบบเดียวกับช่องชื่อในหน้าสร้างตัวละคร */
/* ⚠️ ช่องพิมพ์คือ #chat-in (ไม่มี type="text" ในมาร์กอัป กฎที่เล็งจาก type จึงพลาด)
   ปุ่ม "คุย" กับ "ส่ง" ข้าง ๆ ก็ต้องเข้าชุดกัน ไม่งั้นแถบล่างมีสามภาษาในแถวเดียว */
html:not(.touch-ui) body #chat-in {
  border: 1px solid #bc9a55; border-radius: 8px; background: #fffdf6;
  color: #4a3512; min-height: 28px; padding: 0 10px;
}
html:not(.touch-ui) body #chat-in:focus {
  outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333;
}
html:not(.touch-ui) body #chat-mode,
html:not(.touch-ui) body #chat-send {
  min-height: 28px; padding: 0 11px; border-radius: 8px;
  border: 1px solid #b9954a; background: linear-gradient(#fff8e8, #ecd8a6);
  color: #6b5320; font: 600 12.5px/1 var(--font-head); box-shadow: inset 0 1px 0 #fff9;
}
html:not(.touch-ui) body #chat-mode:hover,
html:not(.touch-ui) body #chat-send:hover { background: linear-gradient(#fffdf6, #f4e6bf); }

/* ═══ กระเป๋า: แยก "ระดับ" ของแท็บสองชั้นให้ชัด (23 ก.ย.) ══════════════════
   บนมือถือมีแท็บซ้อนกันสองชั้น: สวมใส่|กระเป๋า (เปลี่ยนหน้า) และ ของใช้|อุปกรณ์|อื่นๆ|การ์ด
   (กรองในหน้า) ของเดิมน้ำหนักใกล้กันจนดูเหมือนเมนูสองชุดที่ไม่รู้ว่าอันไหนสำคัญกว่า
   ชั้นบน = ปุ่มใหญ่มีสีเมื่อเลือก · ชั้นล่าง = ชิปเล็กแบน ๆ อ่านเป็นตัวกรอง */
html.touch-ui body .inv .vtabs { gap: 5px; padding: 6px 2px 8px; }
html.touch-ui body .inv .vtabs button {
  min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #d8c69a; background: #fbf5e6; color: #7a6a4a;
  font: 600 12.5px/1 var(--font-head); box-shadow: none;
}
html.touch-ui body .inv .vtabs button.on {
  background: #2f6f73; border-color: #2f6f73; color: #fffdf6;
}
/* ช่องของต้องกดถูกด้วยนิ้ว — ของเดิม 48px ซึ่งต่ำกว่าเกณฑ์นิ้วโป้ง */
html.touch-ui body .inv .grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; }
html.touch-ui body .inv .grid .slot { width: auto; aspect-ratio: 1; min-height: 58px; }

/* ภาษาอังกฤษ (client/i18n.js ตั้ง <html lang>) */
html[lang="en"] .slot-yank.drop::after { content: 'Remove'; }

/* ── ตัวเลือกจำนวน (ui.js askQty · 2 ต.ค.) — ฝาก/ถอนคลัง · โทนกระดาษครีมแบบเดียวกับแผ่นรายละเอียดสกิล ── */
#qty-pick { display: grid; gap: 12px; width: min(92vw, 340px); }
#qty-pick .qp-head { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
#qty-pick .qp-ic { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #fff8e8; border: 1px solid #e2cc98; }
#qty-pick .qp-ic img { max-width: 36px; max-height: 36px; }
#qty-pick .qp-head b { font: 700 16px var(--font-head, inherit); }
#qty-pick .qp-head small { font-size: 13px; color: #7a6548; }
#qty-pick .qp-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
#qty-pick .qp-row button { min-height: 44px; border-radius: 10px; border: 1.5px solid #c9ad72; background: #fff5dc; font: 800 22px/1 var(--font-head, inherit); color: #5c4a22; }
#qty-pick .qp-row input { min-height: 44px; text-align: center; font: 700 20px var(--font-head, inherit); border-radius: 10px; border: 1.5px solid #e2cc98; background: #fffdf6; color: #3e2c16; }
#qty-pick .qp-range { width: 100%; accent-color: #2f6f73; }
#qty-pick .qp-quick { display: flex; gap: 6px; }
#qty-pick .qp-quick button { flex: 1; min-height: 40px; border-radius: 999px; border: 1px solid #dcc898; background: #fbf4e2; font: 700 13px var(--font-head, inherit); color: #6b5530; }
#qty-pick .qp-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
#qty-pick .qp-act button { min-height: 46px; border-radius: 11px; border: 1.5px solid #e2cc98; background: #fbf3e0; font: 700 15px var(--font-head, inherit); color: #5a4630; }
#qty-pick .qp-act button.main { border-color: #2f6f73; background: linear-gradient(#3f8584, #2f6f73); color: #fff; }
/* จอเตี้ยแนวนอน: สองคอลัมน์ (หัว+ปุ่มลัด ซ้าย · ตัวเลข+ยืนยัน ขวา) ไม่ให้แผ่นสูงเกินจอ */
@media (max-height: 520px) {
  #qty-pick { width: min(92vw, 560px); grid-template-columns: 1fr 1fr; align-items: center; }
  #qty-pick .qp-head, #qty-pick .qp-quick { grid-column: 1; }
  #qty-pick .qp-row, #qty-pick .qp-range, #qty-pick .qp-act { grid-column: 2; }
  #qty-pick .qp-head { grid-row: 1; } #qty-pick .qp-row { grid-row: 1; } #qty-pick .qp-range { grid-row: 2; } #qty-pick .qp-quick { grid-row: 2; } #qty-pick .qp-act { grid-row: 3; }
}