/* ═══════════ แก้ layout หน้าต่าง/ป๊อปอัปทั้งเกม (ไล่ตรวจ 6 ขนาดจอ · 27 ก.ย. คืน) ═══════════
   ที่มา: สคริปต์เปิดทุกหน้าต่างที่ คอม 1440/1366 · มือถือตั้ง 390/360 · มือถือนอน 844×390/667×375 แล้วดูภาพทีละใบ
   โหลดท้ายสุด (หลัง ui-ux.css) · ทุกกฎขึ้นต้นด้วย html…body #windows ให้ชนะกฎเดิมของแต่ละหน้าต่าง */

/* ── 1. มือถือแนวนอน (จอเตี้ย): หัวหน้าต่างกินเกือบครึ่งจอ เนื้อหาจริงเหลือแถบเดียว ──
      ช่างคราฟ/ร้านแลกรางวัล/ป้ายข่าว/ตีบวก/กระดานตลาด: ตัดรูป NPC + บอลลูนคำพูดออก เหลือชื่อแถวเดียว
      (รูป/คำพูดยังอยู่ครบในจอตั้งและคอม — จอเตี้ยต้องเห็นของที่จะกดก่อน) */
html.touch-ui.land body #windows :is(.cw-head, .rw-head, .mk-head) { min-height: 0; padding: 6px 10px; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; }
html.touch-ui.land body #windows :is(.cw-say, .cw-npc, .rw-say, .rw-ferra, .mk-say, .mk-face) { display: none; }
html.touch-ui.land body #windows .rw-head img:not(.rw-ferra) { width: 30px; height: 30px; }
html.touch-ui.land body #windows :is(.cw-title b, .rw-head b, .mk-head b) { font-size: 16px; }
html.touch-ui.land body #windows :is(.cw-title span, .rw-head span, .mk-head span) { font-size: 12px; }
html.touch-ui.land body #windows .cw-bal { padding: 3px 9px; }
html.touch-ui.land body #windows .hw-top { padding: 6px 10px; min-height: 0; }
html.touch-ui.land body #windows .hw-top .hw-lyra, html.touch-ui.land body #windows .hw-top span { display: none; }
html.touch-ui.land body #windows .hw-top b { font-size: 16px; }
/* แท็บหมวด: แถวเดียวเลื่อนข้าง (เดิมตกสองแถว กินที่อีก 40px) */
html.touch-ui.land body #windows :is(.cw-tabs, .hw-tabs, .mk-tabs) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.touch-ui.land body #windows :is(.cw-tabs, .hw-tabs, .mk-tabs) > * { flex: 0 0 auto; }
/* อันดับแนวนอน: แท่นซ้าย/รายชื่อขวา — ย้ายไป ui-touch.css (1 ต.ค.) */

/* ── 2. ตัวอักษรเล็ก 10–11.5px ในหน้าต่างที่หลุดกฎขั้นต่ำ 13px (ui-type.css) ──
      ไล่เก็บจากการสแกนทุกหน้าต่าง (คอม + มือถือ) — ปุ่มรอง (rbtn) · วันที่ · คำอธิบายย่อย · ราคา · หมวดของ */
html body #windows :is(.rbtn, .shop-sell, .mk-go, .rw-buy, .rw-link, .mk-tabs button, .actions .main) { font-size: 13px; }
html body #windows :is(.cw-foot, .cw-kind, .cw-title span, .cw-tx span, .cw-bal span, .cw-n span, .cw-n b) { font-size: 13px; }
html body #windows :is(.rw-sub, .rw-worn, .rw-item-tx span, .rw-info li, .rw-info i, .rw-after-t, .rw-why, .rw-title span) { font-size: 13px; }
html body #windows :is(.hw-loc, .hw-feat time, .hw-row time, .hw-feat i, .hw-foot) { font-size: 13px; }
html body #windows :is(.mv-kill, .mv-map, .mv-chip, .mv-fame-t) { font-size: 13px; }
html body #windows :is(.mk-empty, .mk-empty b, .mk-wallet, .mk-htitle, .mk-line-tx span) { font-size: 13px; }
html body #windows :is(.sw-hint, .st-row .cost, .qd-bonus, .empty-art p, .bs-nm i) { font-size: 13px; }
html body #windows .sk-row .lv, html body #windows .sk-row p { font-size: 13px; }
/* ป้ายเล็กในกรอบแคบ (ธาตุบนไอคอนสกิล · สถานะบอส · ป้ายโปรร้านเพชร) — 12px พอดีกรอบ ไม่ดันแถว */
html body #windows :is(.nm .el, .sk-row .ic, .mv-pill) { font-size: 12px; }
html body #gem-shop :is(.gs-foot, .gs-foot a, .gs-pct, .gs-tag, .gs-x2) { font-size: 12px; }
html body #gem-shop :is(.gs-lead, .gs-lead b, .gs-gems small) { font-size: 13px; }

/* ── 3. จุดเฉพาะหน้าต่าง ── */
/* กระดานตลาด/แผง แนวนอน: หัว "กระดานตลาด Market Board" ซ้ำกับแถบชื่อหน้าต่าง → รายการผลค้นหาเหลือบรรทัดเดียว
   · กฎมือถือเดิมตั้งกว้าง 100vw แต่ตำแหน่งซ้ายเยื้อง −6px (ขอบซ้ายโดนตัด) → วางในกรอบจอ ขอบละ 6px */
html.touch-ui.land body #windows .mk-head { display: none; }
html.touch-ui.land body #windows .win.mk-win { left: 6px !important; width: calc(100vw - 12px) !important; max-width: none; }
html.touch-ui.land body #windows .mk-search input { height: 38px; }
/* ป้ายข่าว: เนื้อหาเกินกรอบ 9px ทำให้เลื่อนข้างได้ (ลากนิ้วขึ้นลงแล้วหน้าเลื่อนเฉียง) */
html body #windows .win[data-win="herald"] > .body { overflow-x: hidden; }
/* หมอ (Lina/Nadia): ปุ่มบริการเป็นแถวเต็มความกว้าง (ui.js renderNpc สาขา heal) */
html body #windows .npc-opts { display: grid; gap: 8px; margin-top: 10px; }
html body #windows .npc-opt {
  display: grid; gap: 2px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid #e3d4ae; background: linear-gradient(#fffdf6, #fbf2de); box-shadow: 0 2px 0 #e8dcc2;
}
html body #windows .npc-opt:hover { border-color: #2f6f73; background: #f3faf8; }
html body #windows .npc-opt b { font: 700 15px var(--font-head, inherit); color: #4a3418; }
html body #windows .npc-opt span { font-size: 13px; color: #8a7650; }
html.touch-ui body #windows .npc-opt { min-height: 56px; }
/* แนวนอน: หน้าต่างสูงเต็มจอ แต่เนื้อหาไม่ยืด (flex 0 1 auto) ปุ่มท้ายลอยกลางหน้าต่าง ใต้ปุ่มว่างเปล่า (คลังของเห็นชัด) */
html.touch-ui.land body #windows .win > .body { flex: 1 1 auto; min-height: 0; }
html.touch-ui.land body #windows .win[data-win="storage"] .grid { min-height: 100%; }
/* สวมใส่ (คอม): กว้าง 380 ช่องซ้าย/ขวาแคบ ~120px — "หมวกอาชีพ ใส่อยู่" ตัด 3 บรรทัดเบียดปุ่มถอด ชื่ออาวุธตัดสองบรรทัด → 450 */
html:not(.touch-ui) body #windows .win[data-win="equip"] { width: 450px !important; }   /* makeWin ตั้งกว้างเป็น inline style */
html:not(.touch-ui) body #windows .win[data-win="equip"] .eqw { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); }
/* แผงเมนูคอม: ป้ายใต้ไอคอนกว้างช่องละ 44px — "ร้านเพชร" กว้าง 48px ถูกตัดเหลือ "ร้านเพช"
   ขนาดตัวอักษรคงไว้ 13px ตามกฎขั้นต่ำ (ui-type.css !important) → บีบระยะห่างตัวอักษร + ให้ป้ายกินขอบปุ่มได้นิดหน่อย */
html:not(.touch-ui) body #menu button small { letter-spacing: -0.6px; white-space: nowrap; margin-inline: -3px; overflow: visible; }
html:not(.touch-ui) body #menu button { overflow: visible; }
html body #windows .win[data-win="storage"] .empty-art { text-align: center; padding: 8px 6px 4px; }
html body #windows .win[data-win="storage"] .empty-art img { width: 64px; height: 64px; object-fit: contain; opacity: .9; }
html body #windows .win[data-win="storage"] .empty-art b { display: block; margin-top: 4px; }
html body #windows .win[data-win="storage"] .grid:empty { display: none; }

/* ── 4. HUD ── */
/* ปุ่มไม้ตาย (จอสัมผัส) ตั้งไว้สูงจากขอบล่าง 296px — แนวนอนจอสูง 375–390px ปุ่มลอยขึ้นไปทับมินิแมปมุมขวาบน
   → แนวนอนวางมุมล่าง ซ้ายของกลุ่มปุ่มต่อสู้ (ที่ว่างที่วัดจากภาพ 844×390 และ 667×375 — ไม่ชนปุ่ม + / ชุด / แชท) */
html.touch-ui.land body #ult-btn.touch { right: calc(env(safe-area-inset-right, 0px) + 232px); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
/* แท็บเล็ต (จอสัมผัสจอกว้าง): ได้ขนาดปุ่มแบบคอม — แท็บ/ชิปหมวดสูง 28–30px เล็กเกินนิ้ว (มือถือได้กฎใหญ่อยู่แล้ว)
   → ทุกจอสัมผัส แท็บ/ชิปในหน้าต่างสูงอย่างน้อย 40px */
@media (pointer: coarse) {   /* แท็บเล็ตไม่ได้คลาส touch-ui (ใช้หน้าตาแบบคอม) — ดูจากนิ้วแทน */
  html body #windows :is(.tabs, .cw-tabs, .mk-tabs, .shop-tabs, .shop-subs, .hw-tabs, .vtabs) :is(button, .chip),
  html body #windows [role="tab"], html body #windows button.chip, html body #windows .rank-tabs button,
  html body #windows [data-t], html body #windows .cw-n button, html body #windows .sw-new { min-height: 40px; }
}
/* หน้าจอตาย: ภาพเคยตั้ง loading=lazy ตอนซ่อนอยู่ → ตายครั้งแรกเห็นกล่องขาวโล่งจนภาพโหลดเสร็จ (index.html เอา lazy ออกแล้ว)
   สีรองพื้นโทนภาพไว้กันเน็ตช้า */
html body #death .dth-art { background: linear-gradient(#bfdcef, #e8d9b0); }
/* จอ 320 (มือถือเล็กรุ่นเก่า): หน้าต่างตัวละคร/สวมใส่ กว้าง 336 ในพื้นที่ 296 — คอลัมน์ขวาหายนอกจอ (check-ui-polish: equip bodyFits)
   → รูปตัวละครแคบลง คอลัมน์ข้างหดได้ · แถวแฟชั่น 5 ช่อง → 3 ช่องต่อแถว */
@media (max-width: 359px) {
  html body #windows .win:is([data-win="gear"], [data-win="equip"]) .eqw { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: 3px; }
  html body #windows .win:is([data-win="gear"], [data-win="equip"]) .eqslot { min-width: 0; font-size: 12px; padding-inline: 3px; }
  html body #windows .win:is([data-win="gear"], [data-win="equip"]) .eqcos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 5. จากสแกนเต็มรอบสุดท้าย ── */
/* ยืนยันเปลี่ยนอาชีพ (Rowan) จอ ≤ 380: เนื้อหากว้างกว่ากล่อง ข้อความขวาถูกตัด ("Wande…") ปุ่มยืนยันล้น */
@media (max-width: 380px) {
  html body #windows .job-dlg { width: calc(100% - 12px); padding: 14px 12px; }
  html body #windows .job-dlg > * { min-width: 0; }
  html body #windows .jc-flow { flex-wrap: wrap; gap: 6px; font-size: 14px; }
  html body #windows .jc-list { grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; font-size: 13px; }
  html body #windows .jc-list > * { min-width: 0; overflow-wrap: anywhere; }
  html body #windows .job-dlg .jc-a { margin: 0 -12px -14px; padding: 10px 12px 12px; }
  html body #windows .job-dlg .jc-a .rbtn { flex: 1 1 0; padding: 0 8px; }
}
/* กระดานตลาดจอ 320: ช่องค้นหาดันกว้างเกิน 11px (เลื่อนข้างได้) */
@media (max-width: 359px) {
  html body #windows .mk-search input { min-width: 0; }
  html body #windows :is(.mk-cols, .mk-search) > * { min-width: 0; }
}
/* ช่างคราฟแนวนอนจอเล็ก (667×375): สองคอลัมน์ดันกว้างเกิน 18px */
html.touch-ui.land body #windows :is(.cw, .cw-cols, .cw-cols > *) { min-width: 0; }
/* หน้าจอตายบนมือถือ: ปุ่ม "กลับจุดเซฟ/นอนรอ" สูง 31px */
html.touch-ui body #death .dth-acts .rbtn { min-height: 44px; }