/* หน้าต่างร้าน NPC บนจอคอม (shop-window.js) + รายละเอียดไอเทมที่ใช้ร่วมกัน (item-detail.js คลาส .idp-*)
   สีหลัก: ครีม #f3e6c8 · ทีล #2f6f73 (นำทาง/เลือกแท็บ) · ทอง #e8b64a (ของที่เลือก/ปุ่มหลัก) · น้ำตาล #8a5a32 · ตัวหนังสือ #342c26
   ⚠️ ตัวหนังสือไม่ต่ำกว่า 13px ที่ 1920x1080 · ไม่มีกรอบรอบทุกบรรทัด · กรอบไม้ชั้นเดียว (ของหน้าต่าง) พอ */

/* ขนาด/ตำแหน่งจริงมาจาก placeShop() (วัดพื้นที่ว่างรอบ HUD) · ค่านี้เป็นค่าตั้งต้นก่อนวัด */
/* ⚠️ border-box: สกินไม้ใส่กรอบ 20px รอบบาน — ถ้านับแบบ content-box บานจริงใหญ่กว่าที่ placeShop คำนวณ 40px แล้วไปทับเมนู (เจอแล้ว) */
#windows .win[data-win="shop"] { box-sizing: border-box; width: min(92vw, 840px); max-height: none; height: var(--shop-h, min(86vh, 680px)); display: flex; flex-direction: column; }
html[data-skin="wood"] body .win[data-win="shop"] > .body { max-height: none; }
/* สูงคงที่ → คอลัมน์ซ้ายเลื่อนเอง ขวาอยู่กับที่ (ทั้งบานไม่กลายเป็นหน้าเว็บยาว ๆ) */
#windows .win[data-win="shop"] > .body { padding: 0; overflow: hidden; flex: 1; min-height: 0; height: auto; display: flex; }
#windows .win[data-win="shop"] header .win-ic img { width: 30px; height: 30px; object-fit: cover; object-position: top; border-radius: 50%; background: #f3e6c8; }
#windows .win[data-win="shop"] header .shop-hgold { margin-left: auto; margin-right: 10px; display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-head, inherit); }
#windows .win[data-win="shop"] header .shop-hgold small { font-size: 13px; font-weight: 600; opacity: .8; }

#windows .shop { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; color: #342c26; font-size: 14px; }
#windows .shop .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* เหรียญวาดด้วย CSS — ไม่ใช้อีโมจิเป็นไอคอนหลัก */
#windows .coin { display: inline-block; width: 1em; height: 1em; flex: none; border-radius: 50%; vertical-align: -.14em;
  background: radial-gradient(circle at 38% 34%, #fff3c4 0 16%, #f2c75a 30%, #d99a26 72%, #a8701a 100%);
  box-shadow: inset 0 0 0 1.5px #b07a1c, inset 0 0 0 3px #f6d57a55; }
#windows .gold-amt { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#windows .gold-amt.short { color: #a8483a; }
#windows .gold-amt.big { font: 800 22px/1.1 var(--font-head, inherit); color: #5a3a12; }

/* ── แถบบน: ประเภทร้าน + บทพูดหนึ่งบรรทัด ─────────────────────────── */
#windows .shop-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: linear-gradient(90deg, #f6ead0, #fbf4e2); border-bottom: 1px solid #e3d2a8; }
#windows .shop-kind { flex: none; padding: 3px 10px; border-radius: 999px; background: #2f6f73; color: #fdf8ec; font: 700 13px/1.4 var(--font-head, inherit); }
#windows .shop-say { margin: 0; min-width: 0; font-size: 14px; color: #5b4a36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#windows .shop-say b { color: #8a5a32; }

#windows .shop-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 46%) minmax(0, 1fr); }

/* ── ซ้าย: แคตตาล็อก ───────────────────────────────────────────── */
#windows .shop-cat { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px 14px; border-right: 1px solid #e3d2a8; background: #fbf5e7; }
#windows .shop-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#windows .shop-tabs button { padding: 6px 12px; border-radius: 8px 8px 0 0; border: 1px solid #dcc796; border-bottom: 0; background: #efe1bf; color: #6b5438;
  font: 700 14px/1.2 var(--font-head, inherit); cursor: pointer; }
#windows .shop-tabs button.on { background: #2f6f73; border-color: #2f6f73; color: #fdf8ec; }
#windows .shop-tools { display: flex; gap: 6px; }
#windows .shop-search { flex: 1; min-width: 0; }
#windows .shop-search input, #windows .shop-sort { width: 100%; height: 34px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid #d6c294; background: #fffdf6; color: #342c26; font: 14px/1 inherit; }
#windows .shop-sort { width: auto; flex: none; padding-right: 6px; }
#windows .shop-search input:focus, #windows .shop-sort:focus { outline: 2px solid #2f6f7388; outline-offset: 0; }
#windows .shop-subs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#windows .shop-subs:empty { display: none; }
#windows .shop-subs .chip { padding: 3px 10px; border-radius: 999px; border: 1px solid #d6c294; background: #fffaf0; color: #5b4a36; font-size: 13px; cursor: pointer; }
#windows .shop-subs .chip.on { background: #e1efee; border-color: #2f6f73; color: #1f5558; font-weight: 700; }
#windows .shop-mine { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #5b4a36; cursor: pointer; white-space: nowrap; }
#windows .shop-mine input { accent-color: #2f6f73; }

#windows .shop-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 2px 0; scrollbar-width: thin; }
/* ⚠️ flex: none — รายการเป็น flex คอลัมน์ที่เลื่อนได้ ถ้าปล่อยให้หด แถวจะแบนจนไอคอนโดนตัด (เจอรอบแรก) */
#windows .shop-row { flex: none; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 60px; padding: 4px 10px 4px 6px; border-radius: 10px; border: 2px solid transparent; background: #fffdf7;
  text-align: left; color: inherit; font: inherit; cursor: pointer; box-shadow: 0 1px 0 #e7d8b4; }
#windows .shop-row:hover { background: #fff8e6; }
#windows .shop-row.sel { background: #fff3d2; border-color: #e8b64a; box-shadow: 0 2px 6px #c8963a33; }
#windows .shop-row.sel::before { content: ''; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: #2f6f73; }
#windows .shop-row.dim .shop-ic, #windows .shop-row.dim .shop-nm b { opacity: .6; }
#windows .shop-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #ffffff, #efe3c6); font-size: 26px; }
#windows .shop-ic .ic3d, #windows .shop-ic img { width: 48px; height: 48px; object-fit: contain; }
#windows .shop-nm { min-width: 0; display: grid; gap: 1px; }
#windows .shop-nm b { font: 700 15px/1.25 var(--font-head, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#windows .shop-nm small { font-size: 13px; color: #7a6a52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#windows .shop-badges { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
#windows .bd { font-style: normal; font-size: 13px; line-height: 1.3; padding: 0 6px; border-radius: 999px; white-space: nowrap; }
#windows .bd.eq { background: #e1efee; color: #1f5558; }
#windows .bd.own { background: #efe7d6; color: #6b5a40; }
#windows .bd.no { background: #f3e3dc; color: #8a4a3a; }
#windows .shop-row > .gold-amt { font-size: 15px; min-width: 64px; justify-content: flex-end; }
#windows .shop-count { font-size: 13px; color: #8a7a60; text-align: right; }
#windows .shop-empty { margin: 24px 8px; text-align: center; color: #8a7a60; font-size: 14px; }

/* ── ขวา: รายละเอียด ───────────────────────────────────────────── */
#windows .shop-detail { min-height: 0; display: flex; flex-direction: column; background: #fffaf0; }
#windows .shop-dscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 8px; scrollbar-width: thin; }
#windows .shop-bigic { width: 112px; height: 112px; display: grid; place-items: center; }
#windows .shop-stage { width: 128px; height: 150px; display: grid; place-items: center; }
#windows .shop-bigic .ic3d, #windows .shop-bigic img { width: 104px; height: 104px; object-fit: contain; }
#windows .shop-bigic { font-size: 64px; }
#windows .shop-stage canvas { width: 128px !important; height: 150px !important; }
#windows .shop-try { justify-self: start; margin-top: 4px; padding: 5px 14px; border-radius: 999px; border: 1px solid #2f6f73; background: #fff; color: #2f6f73; font: 700 13px/1.3 var(--font-head, inherit); cursor: pointer; }
#windows .shop-try.on { background: #2f6f73; color: #fff; }

#windows .shop-buy { flex: none; display: grid; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid #e3d2a8; background: linear-gradient(#fbf3df, #f6e8c8); }
#windows .shop-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#windows .shop-price > div { display: grid; gap: 2px; }
#windows .shop-price > div > span { font-size: 13px; color: #7a6a52; font-weight: 600; }
#windows .shop-disc { font-size: 13px; color: #2f6f73; }
#windows .shop-price dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 14px; text-align: right; }
#windows .shop-price dt { color: #7a6a52; }
#windows .shop-price dd { margin: 0; }
#windows .shop-price dd.bad { color: #a8483a; font-weight: 700; }
#windows .shop-qty { display: flex; align-items: center; gap: 6px; }
#windows .shop-qty button { min-width: 34px; height: 32px; border-radius: 8px; border: 1px solid #d6c294; background: #fffdf6; font: 700 16px/1 inherit; cursor: pointer; }
#windows .shop-qty button.max { padding: 0 10px; font-size: 13px; }
#windows .shop-qty output { min-width: 34px; text-align: center; font: 700 16px/1 var(--font-head, inherit); }
#windows .shop-buybtn { justify-self: end; width: min(100%, 220px); height: 50px; border-radius: 12px; border: 1px solid #b07a1c; cursor: pointer;
  background: linear-gradient(#f8d677, #e8b64a 55%, #d99a26); color: #3e2a0c; font: 800 19px/1 var(--font-head, inherit);
  box-shadow: inset 0 -3px 0 #0002, 0 3px 8px #b0741a44; }
#windows .shop-buybtn:hover:not([disabled]) { filter: brightness(1.05); }
#windows .shop-buybtn[disabled] { cursor: not-allowed; background: #e4dccb; border-color: #cdbf9f; color: #8a7a60; box-shadow: none; }
#windows .shop-buybtn.sm { width: auto; min-width: 120px; height: 44px; font-size: 17px; }

/* ── ยืนยันการซื้อ (ในหน้าต่าง ไม่ใช่ confirm() ของเบราว์เซอร์) ─────────── */
#windows .shop-modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #2b200f66; }
#windows .shop-modal[hidden] { display: none; }
#windows .shop-dlg { width: min(360px, 90%); display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #fffaf0; border: 2px solid #e8b64a; box-shadow: 0 12px 34px #0005; }
#windows .shop-dlg h4 { margin: 0; font: 800 18px/1.2 var(--font-head, inherit); color: #5a3a12; }
#windows .shop-dlg-item { display: flex; align-items: center; gap: 10px; font-size: 16px; }
#windows .shop-dlg dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
#windows .shop-dlg dt { color: #7a6a52; }
#windows .shop-dlg dd { margin: 0; text-align: right; }
#windows .shop-dlg-a { display: flex; justify-content: flex-end; gap: 8px; }
#windows .shop-dlg-a .rbtn { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* ── รายละเอียดไอเทมที่ใช้ร่วมกัน (.idp-*) ─────────────────────────── */
#windows .idp-head { display: flex; gap: 14px; align-items: center; }
#windows .idp-icon { flex: none; border-radius: 14px; background: radial-gradient(circle at 50% 42%, #ffffff, #efe2c2); box-shadow: inset 0 0 0 1px #e3d2a8; }
#windows .idp-title { min-width: 0; display: grid; gap: 3px; }
#windows .idp-title b { font: 800 21px/1.2 var(--font-head, inherit); color: #342c26; }
#windows .idp-title span { font-size: 14px; color: #7a6a52; }
#windows .idp-grade { justify-self: start; font-style: normal; font-size: 13px; padding: 0 8px; border-radius: 999px; background: #efe7d6; color: #6b5a40; }
#windows .idp-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #4a3f33; }
#windows .idp-stats { margin: 10px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; font-size: 14px; }
#windows .idp-stats dt { color: #6b5a44; }
#windows .idp-stats dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#windows .idp-stats dt { border-bottom: 1px dotted #e0d0aa; padding-bottom: 3px; }
#windows .idp-stats dd { border-bottom: 1px dotted #e0d0aa; padding-bottom: 3px; }
#windows .idp-req { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
#windows .idp-req li { padding: 3px 10px; border-radius: 8px; background: #f3ead6; font-size: 14px; font-weight: 700; color: #342c26; }
#windows .idp-req li span { font-weight: 400; color: #7a6a52; }
#windows .idp-req li.bad { background: #f7e4dc; color: #8a3a2a; }
#windows .idp-sec { margin-top: 14px; }
#windows .idp-sec h5 { margin: 0 0 4px; font: 700 14px/1.3 var(--font-head, inherit); color: #2f6f73; letter-spacing: .02em; }
#windows .idp-warn { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: #f7e4dc; color: #8a3a2a; font-size: 14px; font-weight: 600; }
#windows .idp-muted { margin: 2px 0 0; font-size: 14px; color: #8a7a60; }
#windows .idp-muted.small { font-size: 13px; }
#windows .idp-cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; font-size: 13px; color: #7a6a52; margin-bottom: 2px; }
#windows .idp-cmp-head span:last-child { text-align: right; color: #342c26; font-weight: 700; }
#windows .idp-cmp { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#windows .idp-cmp th { text-align: left; font-weight: 400; color: #6b5a44; padding: 3px 0; }
#windows .idp-cmp td { text-align: right; padding: 3px 0 3px 8px; }
#windows .idp-cmp td.arr { color: #b0a080; }
#windows .idp-cmp td.d { font-weight: 800; min-width: 48px; color: #8a7a60; }
#windows .idp-cmp td.d.up { color: #2c7a3c; }
#windows .idp-cmp td.d.down { color: #a8483a; }

/* จอคอมเล็ก (1366x768): บานแคบลงแต่ยังสองคอลัมน์ */
@media (max-width: 1400px) {
#windows .shop-main { grid-template-columns: minmax(280px, 45%) minmax(0, 1fr); }
#windows .shop-bigic, #windows .shop-stage { width: 112px; height: 132px; }
#windows .shop-bigic .ic3d, #windows .shop-bigic img { width: 104px; height: 104px; }
}

/* จอเตี้ย (≤ 820px เช่น 1366x768): แถวกระชับขึ้นให้เห็นรายการมากขึ้น · ตัวหนังสือยังไม่ต่ำกว่า 13px */
@media (max-height: 820px) {
  #windows .shop-row { min-height: 50px; grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  #windows .shop-ic { width: 44px; height: 44px; }
  #windows .shop-ic .ic3d, #windows .shop-ic img { width: 40px; height: 40px; }
  #windows .shop-top { padding: 5px 16px; }
  #windows .shop-bigic { width: 96px; height: 96px; }
  #windows .shop-bigic .ic3d, #windows .shop-bigic img { width: 88px; height: 88px; }
  #windows .shop-buybtn { height: 46px; }
}

/* ── รอบขัดเกลา (UX polish) ─────────────────────────────────────────
   ไอคอน: ของผอม ๆ สีอ่อน (ใบมีดขาว) กลืนพื้นครีม → พื้นเข้มขึ้นนิด + เงาใต้ของ ให้จำได้โดยไม่ต้องอ่านชื่อ */
#windows .shop-ic { background: radial-gradient(circle at 50% 40%, #f7efdc, #dccaa0); box-shadow: inset 0 0 0 1px #cdb582; }
#windows .shop-ic .ic3d, #windows .idp-icon .ic3d { filter: drop-shadow(0 1px 1.5px #3a2a1266); }
#windows .idp-icon { background: radial-gradient(circle at 50% 42%, #f7efdc, #dccaa0); box-shadow: inset 0 0 0 1px #cdb582; }
/* ค่าต่างเทียบของที่สวมในแถว ("ATK +8") */
#windows .shop-nm small .dl { font-weight: 700; }
#windows .shop-nm small .dl.up { color: #2c7a3c; }
#windows .shop-nm small .dl.down { color: #a8483a; }
/* ซื้อได้แต่ยังสวมไม่ได้ — เตือนเบากว่า Gold ไม่พอ (ไม่ได้ห้ามซื้อ) */
#windows .idp-warn.soft { background: #f6ecd6; color: #7a5220; font-weight: 600; }

/* ═══ รอบ polish 2: หัวร้าน · พรีวิวลองสวม · สรุปราคา (ระยะห่าง 8/12/16/24) ═══════════════════ */
/* หัว: รูป NPC 46px + ชื่อ + ประเภทร้าน — จำ NPC ได้ ไม่แย่งพื้นที่ของ */
#windows .win.shop-win > header { min-height: 56px; }
#windows .win.shop-win header .win-ic img { width: 46px; height: 46px; border-radius: 12px; border: 2px solid #e8b64a; background: #f3e6c8; object-fit: cover; object-position: top; }
#windows .win.shop-win header .win-ic { width: 46px; height: 46px; }
#windows .win.shop-win header > span:not(.shop-hgold) { display: grid; line-height: 1.15; }
#windows .win.shop-win header > span b { font: 800 18px/1.15 var(--font-head); }
#windows .win.shop-win header > span small { font: 600 13px/1.2 var(--font); opacity: .8; }
#windows .shop-top { padding: 8px 16px; }

/* รายละเอียด: ชื่อ → [รูปไอเทม | ตัวละครใส่ของ] → ค่าสถานะ → เทียบ · สัดส่วนพรีวิว ~40–45% */
#windows .shop-dscroll { padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
#windows .sd-title { display: grid; gap: 2px; }
#windows .sd-title b { font: 800 21px/1.2 var(--font-head); color: #342c26; }
#windows .sd-title > span { font-size: 14px; color: #7a6a52; }
#windows .idp-reqline { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #2f6f73; }
#windows .idp-reqline .bad { color: #a8483a; }
#windows .idp-reqline i { font-style: normal; color: #b0a080; font-weight: 400; }
#windows .sd-hero { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; }
#windows .sd-hero.solo { grid-template-columns: 1fr; justify-items: center; }
#windows .sd-item { width: 112px; height: 112px; align-self: center; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, #f7efdc, #dccaa0); box-shadow: inset 0 0 0 1px #cdb582; font-size: 56px; }
#windows .sd-hero.solo .sd-item { width: 136px; height: 136px; }
#windows .sd-item .ic3d, #windows .sd-item img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 1px 1.5px #3a2a1266); }
#windows .sd-hero.solo .sd-item .ic3d, #windows .sd-hero.solo .sd-item img { width: 124px; height: 124px; }
#windows .sd-char { display: grid; grid-template-rows: 1fr auto; gap: 4px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 85%, #e2d3ad 0 28%, transparent 29%), linear-gradient(#f4ecda, #eadcbc); box-shadow: inset 0 0 0 1px #d8c595; }
#windows .sd-char .shop-stage { width: 100%; height: 220px; display: block; }
#windows .sd-char .shop-stage canvas { width: 100% !important; height: 100% !important; display: block; }
#windows .sd-char small { padding: 0 10px 6px; font-size: 13px; color: #7a6a52; text-align: center; }
#windows .sd-toggle { align-self: flex-end; margin-top: -6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #5b4a36; cursor: pointer; }
#windows .sd-toggle input { accent-color: #2f6f73; }
#windows .idp-sec { margin-top: 0; }
#windows .idp-stats { margin-top: 4px; }
#windows .idp-cmp-head .arr { text-align: center; color: #b0a080; }
#windows .idp-cmp-head i { font-style: normal; color: #7a6a52; }

/* ราคา: กลุ่มเดียวติดปุ่มซื้อ — ราคา / Gold ของคุณ / หลังซื้อ (หรือ ต้องการเพิ่ม) */
#windows .shop-buy { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 16px; padding: 12px 16px 16px; }
#windows .shop-buy > .idp-warn { grid-column: 1 / -1; margin: 0; }
#windows .shop-sum { display: grid; gap: 8px; }
#windows .shop-sum dl { margin: 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 16px; align-items: center; font-size: 14px; }
#windows .shop-sum dt { color: #7a6a52; }
#windows .shop-sum dd { margin: 0; text-align: right; }
#windows .shop-sum dd.bad .gold-amt { color: #a8483a; }
#windows .shop-buybtn { width: 200px; }
#windows .shop-buybtn:active:not([disabled]) { transform: translateY(1px); box-shadow: inset 0 -1px 0 #0002, 0 1px 3px #b0741a44; }
#windows .shop-buybtn:focus-visible { outline: 3px solid #2f6f7399; outline-offset: 2px; }
@media (max-height: 820px) {
  #windows .sd-char .shop-stage { height: 170px; }
  #windows .sd-item { width: 96px; height: 96px; }
  #windows .sd-hero { grid-template-columns: 96px minmax(0, 1fr); }
  #windows .sd-item .ic3d, #windows .sd-item img { width: 86px; height: 86px; }
}

/* ค่าสถานะอยู่ใต้รูปไอเทม ข้างตัวละคร — ใช้ช่องว่างใต้รูป และดัน "เทียบกับที่สวมอยู่" ขึ้นมาอยู่ในจอโดยไม่ต้องเลื่อน */
#windows .sd-hero { grid-template-columns: minmax(150px, 44%) minmax(0, 1fr); }
#windows .sd-hero.solo { grid-template-columns: 1fr; justify-items: stretch; }
#windows .sd-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#windows .sd-left .sd-item { align-self: flex-start; }
#windows .sd-hero.solo .sd-left { flex-direction: row; align-items: flex-start; gap: 16px; }
#windows .sd-left .idp-sec h5 { margin-bottom: 2px; }
#windows .sd-left .idp-stats { gap: 3px 10px; font-size: 14px; }
#windows .sd-char .shop-stage { height: 200px; }
#windows .sd-toggle { margin-top: -4px; }
@media (max-height: 820px) { #windows .sd-hero { grid-template-columns: minmax(140px, 44%) minmax(0, 1fr); } #windows .sd-char .shop-stage { height: 160px; } }
#windows .sd-hero { align-items: start; }
#windows .sd-hero:not(.solo) { grid-template-columns: 128px minmax(0, 1fr); }
#windows .idp-stats.compact { grid-template-columns: auto auto; justify-content: space-between; }
#windows .idp-stats.compact dt { font-weight: 700; color: #6b5a44; }
#windows .idp-traits { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: #342c26; }
#windows .idp-traits i { font-style: normal; color: #7a6a52; }
@media (max-height: 820px) { #windows .sd-hero:not(.solo) { grid-template-columns: 112px minmax(0, 1fr); } }
#windows .sd-char .shop-stage { height: 184px; }
#windows .sd-char .sd-toggle { margin: 0; padding: 0 10px 6px; justify-content: center; font-size: 13px; color: #7a6a52; }
#windows .sd-left .idp-traits { margin: 0; display: grid; gap: 2px; font-size: 13px; }
#windows .sd-left .sd-toggle { margin: 0; align-self: flex-start; }
@media (max-height: 820px) { #windows .sd-char .shop-stage { height: 150px; } }

/* ═══ มือถือ ═══════════════════════════════════════════════════════════════════════════
   ปุ่ม "ขายของ" / "กลับไปรายการ" มีเฉพาะมือถือ · คอมซ่อน */
#windows .shop-sell, #windows .sd-back { display: none; }
html.touch-ui #windows .shop-sell { display: inline-flex; margin-left: auto; flex: none; min-height: 40px; }
html.touch-ui #windows .shop-top { gap: 8px; }
html.touch-ui #windows .shop-say { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; }
/* ปุ่ม/ช่องแตะต้องใหญ่พอสำหรับนิ้ว */
html.touch-ui #windows .shop-tabs button { min-height: 40px; }
html.touch-ui #windows .shop-subs .chip { min-height: 36px; padding: 4px 12px; }
html.touch-ui #windows .shop-search input, html.touch-ui #windows .shop-sort { height: 44px; min-height: 44px; font-size: 16px; }
html.touch-ui #windows .shop-row { min-height: 60px; }
html.touch-ui #windows .shop-qty button { min-width: 44px; height: 44px; }
html.touch-ui #windows .shop-buybtn { height: 50px; }
html.touch-ui #windows .win.shop-win header .win-ic, html.touch-ui #windows .win.shop-win header .win-ic img { width: 38px; height: 38px; }
html.touch-ui #windows .win.shop-win > header { min-height: 50px; }

/* แนวนอน: เต็มความกว้าง (ลบขอบปลอดภัย) สองคอลัมน์แบบคอม · ความสูงจากขอบบน/ล่างของแผ่น */
html.touch-ui.land #windows .win[data-win="shop"] { left: max(6px, env(safe-area-inset-left)) !important; right: max(6px, env(safe-area-inset-right)); width: auto !important; height: auto; max-height: none; }
/* จอเตี้ย: บทพูดเสียพื้นที่ — ชื่อร้านอยู่บนหัวแล้ว · แต่ปุ่ม "ขายของ" อยู่แถบเดียวกัน เดิมซ่อนทั้งแถบ
   ผู้เล่นมือถือแนวนอนเลยขายของที่ร้านไม่ได้เลย (27 ก.ย. check-ui-interactions) → ซ่อนแค่บทพูด ปุ่มขายลอยมุมขวาบนของช่องรายละเอียด (.shop เป็น relative) */
html.touch-ui.land #windows .shop-say { display: none; }
html.touch-ui.land #windows .win[data-win="shop"] .shop-top { position: absolute; top: 8px; right: 10px; z-index: 2; padding: 0; background: none; border: 0; }
html.touch-ui.land #windows .win[data-win="shop"] .shop-sell { min-height: 36px; margin: 0; }
html.touch-ui.land #windows .shop-main { grid-template-columns: minmax(260px, 44%) minmax(0, 1fr); }
html.touch-ui.land #windows .shop-cat { gap: 6px; padding: 6px 8px 6px 10px; }
html.touch-ui.land #windows .shop-row { min-height: 52px; grid-template-columns: 44px minmax(0, 1fr) auto auto; }
html.touch-ui.land #windows .shop-ic { width: 44px; height: 44px; }
html.touch-ui.land #windows .shop-ic .ic3d, html.touch-ui.land #windows .shop-ic img { width: 40px; height: 40px; }
html.touch-ui.land #windows .shop-dscroll { padding: 8px 12px 6px; gap: 8px; }
html.touch-ui.land #windows .sd-hero:not(.solo) { grid-template-columns: 100px minmax(0, 1fr); }
html.touch-ui.land #windows .sd-item { width: 88px; height: 88px; }
html.touch-ui.land #windows .sd-item .ic3d, html.touch-ui.land #windows .sd-item img { width: 80px; height: 80px; }
html.touch-ui.land #windows .sd-char .shop-stage { height: 130px; }
html.touch-ui.land #windows .shop-buy { padding: 6px 12px 8px; gap: 4px 12px; }
html.touch-ui.land #windows .shop-buybtn { height: 46px; width: 160px; }
/* แนวนอนจอแคบ (667×375): ช่องรายละเอียดกว้างแค่ ~345px — แถวจำนวน (−/+/สูงสุด ~250px) กับปุ่มซื้อ 160px
   ไม่พอวางข้างกัน ปุ่มซื้อทับปุ่ม "สูงสุด" (27 ก.ย.) → ซ้อนสองแถว รายละเอียดด้านบนเลื่อนได้อยู่แล้ว */
@media (max-width: 760px) {
  html.touch-ui.land #windows .shop-buy { grid-template-columns: 1fr; }
  html.touch-ui.land #windows .shop-buybtn { width: 100%; height: 44px; justify-self: stretch; }
  /* ปุ่มซื้อลงมาแถวล่าง ช่องรายละเอียดเหลือเตี้ย ภาพของ 88px กินจนค่าพลังโดนตัด → ภาพเล็กลง ค่าพลังขึ้นมาอยู่ข้างภาพ */
  html.touch-ui.land #windows .sd-hero:not(.solo) { grid-template-columns: 64px minmax(0, 1fr); }
  html.touch-ui.land #windows .sd-item { width: 60px; height: 60px; }
  html.touch-ui.land #windows .sd-item .ic3d, html.touch-ui.land #windows .sd-item img { width: 54px; height: 54px; }
  html.touch-ui.land #windows .sd-char .shop-stage { height: 104px; }
  html.touch-ui.land #windows .shop-dscroll { padding: 6px 10px 4px; gap: 6px; }
  /* ต้นเหตุจริงคือแถบซื้อสูง ~180px: ราคา 3 บรรทัด · "Gold ของคุณ" ซ้ำกับหัวหน้าต่าง → ซ่อน แล้วเหลือบรรทัดเดียว "ราคา … หลังซื้อ …" */
  html.touch-ui.land #windows .shop-sum dl { grid-template-columns: repeat(4, auto); gap: 0 8px; font-size: 13px; }
  html.touch-ui.land #windows .shop-sum dt:nth-of-type(2), html.touch-ui.land #windows .shop-sum dd:nth-of-type(2) { display: none; }
}
html.touch-ui.land #windows .gold-amt.big { font-size: 18px; }

/* แนวนอน: จอเตี้ย — แท็บแถวเดียวเลื่อนข้าง · ซ่อนชิปตัวกรองย่อย (ช่องค้นหาแทนได้) ให้รายการได้ความสูง */
html.touch-ui.land #windows .shop-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.touch-ui.land #windows .shop-tabs::-webkit-scrollbar { display: none; }
html.touch-ui.land #windows .shop-tabs button { flex: none; min-height: 36px; padding: 4px 10px; }
html.touch-ui.land #windows .shop-subs .chip { display: none; }
html.touch-ui.land #windows .shop-subs { min-height: 0; }
html.touch-ui.land #windows .shop-mine { margin-left: 0; }
html.touch-ui.land #windows .shop-search input, html.touch-ui.land #windows .shop-sort { height: 40px; min-height: 40px; }
html.touch-ui.land #windows .shop-count { display: none; }