/* หน้าต่าง NPC ชุดเดียวกับการ์ดไอเทม (ui-icard.css) — กระดาษครีม ขอบทอง มุมมน · หัวข้อแถบครีมเข้ม+เพชรทอง ·
   แถวรายการมีกรอบไอคอน · ปุ่มหลักเขียว · ป้ายความหายากสีเดียวกับการ์ด (rarityOf)
   ⚠️ โหลดท้าย index.html · ห้ามเขียนกฎที่ต้องชนะด้วย id — ใช้คลาสของหน้าต่างนั้น ๆ (.stv .bp ...) */

:root {
  --np-ink: #3e2c16; --np-mute: #7a6548; --np-line: #e3d2a8; --np-gold: #d9b56a; --np-head: #6b4a14;
  --np-paper: linear-gradient(#fffaf0, #f8eed8);
}

/* ── ป้ายความหายาก / ประเภท (ใช้ร่วมทุกหน้าต่าง) ─────────────────── */
.bp-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 12px/1.6 var(--font-head, inherit); font-style: normal;
  color: #7a5a2a; background: #f5e8c8; border: 1px solid #e2cc98; white-space: nowrap; }
.bp-rar { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 700 12px/1.6 var(--font-head, inherit); color: #fff; background: #8f8a80; white-space: nowrap; }
.bp-rar.r-uncommon { background: #5cae57; } .bp-rar.r-good { background: #2f8ae0; } .bp-rar.r-rare { background: #3f78d6; }
.bp-rar.r-epic { background: #9a4ae8; } .bp-rar.r-legend { background: linear-gradient(#f2c14e, #d99a26); color: #4a3008; } .bp-rar.r-style { background: #2f6f73; }
:is(.bp-ic, .stv-ic) { display: grid; place-items: center; border-radius: 12px; border: 2px solid #d8c49a;
  background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); box-shadow: inset 0 -3px 0 #0000000f; }
:is(.bp-ic, .stv-ic).r-uncommon { border-color: #9fd08f; background: radial-gradient(circle at 50% 40%, #fbfff4, #dcefcf); }
:is(.bp-ic, .stv-ic):is(.r-good, .r-rare) { border-color: #8fbdf0; background: radial-gradient(circle at 50% 40%, #f6fbff, #d3e5f8); }
:is(.bp-ic, .stv-ic).r-epic { border-color: #c29af0; background: radial-gradient(circle at 50% 40%, #fbf6ff, #e6d6f8); }
:is(.bp-ic, .stv-ic).r-legend { border-color: #e8b64a; background: radial-gradient(circle at 50% 40%, #fffbea, #f6e0a8); }
:is(.bp-ic, .stv-ic).r-style { border-color: #8cc0c0; background: radial-gradient(circle at 50% 40%, #f5fdfc, #d5ecea); }

/* ── รายละเอียดของที่จะซื้อ (แผงพ่อค้า + กระดานตลาด) ────────────── */
.bp { display: grid; gap: 9px; color: var(--np-ink); }
.bp-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; }
.bp-ic { width: 76px; height: 76px; font-size: 40px; cursor: pointer; }
.bp-ic .ic3d, .bp-ic img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .25)); }
.bp-tt { min-width: 0; display: grid; gap: 5px; }
.bp-tt > b { font: 700 18px/1.25 var(--font-head, inherit); color: #3e2c16; overflow-wrap: anywhere; }
.bp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.bp-desc { margin: 0; padding: 8px 11px; border-radius: 10px; background: #fbf3e0; border: 1px solid #efe1bf; font-size: 13.5px; line-height: 1.55; color: #4a3a26; }
.bp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.bp-stats p { margin: 0;  display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 7px; background: #f3e8cf; font-size: 13px; }
.bp-stats i { font-style: normal; color: var(--np-mute); }
.bp-stats b { color: #2f7a3c; font-variant-numeric: tabular-nums; }
.bp-info { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; padding: 4px 10px; border-radius: 10px; background: #fffdf6; border: 1px solid #efe3c8; font-size: 13.5px; }
.bp-info dt { padding: 5px 0; color: #5a4630; border-bottom: 1px dashed #eadcba; }
.bp-info dd { margin: 0; padding: 5px 0 5px 10px; text-align: right; font-weight: 700; color: #3e2c16; border-bottom: 1px dashed #eadcba;
  display: flex; justify-content: flex-end; align-items: center; gap: 5px; flex-wrap: wrap; }
.bp-info :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }
.bp-info dd .bad { color: #c0392b; }
.bp-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.bp-qty, .bp-total { display: grid; gap: 4px; align-content: center; padding: 7px 10px; border-radius: 10px; border: 1px solid #efe1bf; background: #fbf3e0; }
.bp-qty > small, .bp-total > small { font-size: 12.5px; color: var(--np-mute); }
.bp-qty > b { font: 700 16px/1.2 var(--font-head, inherit); }
.bp-qty .mk-step { justify-self: start; }
.bp-total { border-color: #e8cf8f; background: linear-gradient(#fff6dc, #fbe9bb); }
.bp-total b { display: inline-flex; align-items: center; gap: 6px; font: 700 20px/1 var(--font-head, inherit); color: #6b4510; }
/* ปุ่มซื้อ = ปุ่มหลักเขียวแบบการ์ดไอเทม · ไม่ใช้คลาส rbtn/mk-go (กฎ teal ใน ui-market.css ผูก id) */
html body .win .bp .bp-go {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border-radius: 12px; cursor: pointer;
  border: 1px solid #3d8a45; color: #fff; text-shadow: 0 1px 1px #1d4a2355; font: 700 17px/1.2 var(--font-head, inherit);
  background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37;
}
html body .win .bp .bp-go:hover:not([disabled]) { filter: brightness(1.05); }
html body .win .bp .bp-go:active:not([disabled]) { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff55, 0 1px 0 #357a37; }
html body .win .bp .bp-go[disabled] { cursor: default; filter: saturate(.3); opacity: .6; }
.bp-go .mk-coin { width: 18px; height: 18px; }
.bp .mk-why, .bp .mk-after { text-align: center; margin-top: -3px; }
/* จำนวน + ราคารวม + ปุ่มซื้อ ติดล่างคอลัมน์ที่เลื่อนได้ — จอ 768 ปุ่มซื้อเคยตกขอบต้องเลื่อนหา */
.bp-foot { position: sticky; bottom: -10px; z-index: 1; display: grid; gap: 8px; margin: 0 -10px -10px; padding: 9px 10px 10px;
  background: linear-gradient(#f8eed800, #f8eed8 14px); }

/* ── แผงพ่อค้า ────────────────────────────────────────────────── */
.mk.stv { gap: 10px; padding: 0 2px 2px; grid-template-columns: minmax(0, 1fr); }
.mk.stv > *, .stv-cols > * { min-width: 0; }   /* ไม่งั้นคอลัมน์กว้างตามเนื้อหา — จอ 320 ปุ่มค้นหาหลุดขอบ */
/* กันสาดผ้า: ลายทาง teal/ครีม ขอบล่างหยักเป็นลอน */
.stv-awning { height: 26px; margin: 0 -2px -4px; border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(90deg, #2f6f73 0 34px, #f6ecd4 34px 68px);
  -webkit-mask: radial-gradient(circle 17px at 17px 0, #000 98%, transparent) 0 9px / 34px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% 10px no-repeat;
          mask: radial-gradient(circle 17px at 17px 0, #000 98%, transparent) 0 9px / 34px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% 10px no-repeat;
  filter: drop-shadow(0 2px 1px #5a3d1422); }
.stv-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 300px); gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: var(--np-paper); border: 1.5px solid var(--np-gold); box-shadow: 0 0 0 3px #f3e3bd inset; }
.stv-crest { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 3px #8a5a1a44); }
.stv-ht { min-width: 0; display: grid; justify-items: start; gap: 3px; }
.stv-ht b { max-width: 100%; font: 700 21px/1.2 var(--font-head, inherit); color: #5a3a0e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stv-ht small { font-size: 13.5px; color: var(--np-mute); }
.stv-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font: 600 12.5px/1.5 var(--font-head, inherit); font-style: normal;
  color: #6b4510; background: #fbecc4; border: 1px solid #e8c878; }
.stv-say { position: relative; padding: 9px 12px; border-radius: 12px; background: #fffdf6; border: 1px solid #e3d4ae; font-size: 13px; line-height: 1.45; color: #5b4524; }
.stv-cols { display: grid; grid-template-columns: 55fr 45fr; gap: 10px; align-items: start; }
.stv-cols.solo { grid-template-columns: 1fr; }
.stv-empty { padding: 26px 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--np-mute); }
html body .win .stv-empty b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--font-head, inherit); color: var(--np-head); }
.stv-list, .stv-det { border-radius: 14px; background: var(--np-paper); border: 1.5px solid #e6d3a6; padding: 10px; max-height: min(58vh, 480px); overflow: auto;
  scrollbar-width: thin; scrollbar-color: #caa45e #f3e8d0; }
.stv-lh { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; }
.stv-tab { padding: 4px 16px 4px 26px; position: relative; border-radius: 9px; background: linear-gradient(#3f8588, #2b686c); color: #fffdf4;
  font: 700 14px/1.4 var(--font-head, inherit); box-shadow: 0 2px 0 #1f4d50; }
.stv-tab::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: #f2c14e; transform: rotate(45deg); border-radius: 1px; }
.stv-lh small { font-size: 13px; color: var(--np-mute); }
.stv-rows { display: grid; gap: 7px; }
.stv-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 10px 7px 7px;
  border-radius: 12px; border: 1.5px solid #ecdcb6; background: #fffdf7; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background-color .12s, border-color .12s; }
.stv-row:hover { background: #fff7e4; border-color: #dfc27e; }
.stv-row.on { background: #fdf2d6; border-color: #e8b64a; box-shadow: 0 0 0 2px #e8b64a55; }
.stv-ic { width: 54px; height: 54px; font-size: 30px; }
.stv-ic .ic3d, .stv-ic img { width: 42px; height: 42px; object-fit: contain; }
.stv-tx { min-width: 0; display: grid; justify-items: start; gap: 4px; }
.stv-tx b { max-width: 100%; font: 700 15px/1.25 var(--font-head, inherit); color: #3e2c16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stv-pr { display: grid; justify-items: end; gap: 4px; }
.stv-pr small { font-size: 12.5px; color: var(--np-mute); white-space: nowrap; }
.stv-pr b { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/1 var(--font-head, inherit); color: #6b4510; white-space: nowrap; }
.stv-pr .mk-coin, .bp-total .mk-coin { width: 17px; height: 17px; }

/* ── กระดานตลาด: ค้นหา + หมวด + ป้ายเสริมในแถว ───────────────────── */
.mkb-search { display: flex; gap: 8px; }
.mkb-search input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid #dcc796; background: #fffdf7; color: var(--np-ink); font: 15px/1 var(--font, inherit); }
.mkb-search input:focus { outline: 2px solid #2f6f7355; border-color: #2f6f73; }
html body .win .mkb-search .mkb-go { flex: none; min-height: 40px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid #285d61; color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); font: 700 15px/1 var(--font-head, inherit); box-shadow: 0 2px 0 #1f4d50; }
.mkb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
html body .win .mkb-tabs button { min-height: 32px; padding: 4px 14px; border-radius: 999px; cursor: pointer; font: 600 13.5px/1 var(--font-head, inherit);
  color: #7a5a2a; background: #fbf3e0; border: 1px solid #e2cc98; box-shadow: none; }
html body .win .mkb-tabs button.on { color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); border-color: #285d61; }
.stv-tx > small { max-width: 100%; font-size: 12.5px; color: var(--np-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stv-tags { display: flex; gap: 4px; }
.bp-tag.cheap { color: #2f7a36; background: #e3f4e1; border-color: #a9d8a4; }
.bp-tag.consign { color: #2f5f73; background: #e2f0f1; border-color: #a9cfcf; }   /* ฝากขายที่กระดาน (ไม่มีแผงให้เดินไปดู) */
html body .win .stv-det .mkb-walk { display: block; width: 100%; margin-top: 8px; min-height: 38px; border-radius: 12px; cursor: pointer;
  border: 1px solid #d8c49a; background: linear-gradient(#fffcf3, #ecddbc); color: #5a4020; font: 700 14px/1.2 var(--font-head, inherit); }
html body .win .stv-det .mkb-walk:hover { background: #fff6e0; border-color: #9a7736; }

/* ui-kit.css ตั้ง `.win b` / `.win span` = inherit (specificity 0,2,3+) — ขนาดตัวอักษรของชิ้นที่ตั้งเองต้องประกาศซ้ำที่นี่
   (ไฟล์นี้โหลดทีหลังจึงชนะเมื่อ specificity เท่ากัน) · ป้ายเล็กใช้ <em>/<small> แทน <span> เพราะ span ถูกบังคับหนักกว่า */
html body .win :is(.stv-ht b) { font-size: 21px; }
html body .win :is(.bp-tt > b) { font-size: 18px; }
html body .win :is(.stv-tx b) { font-size: 15px; }
html body .win :is(.stv-pr b) { font-size: 17px; }
html body .win :is(.bp-total b) { font-size: 20px; }
@media (max-width: 380px) { html body .win :is(.bp-total b) { font-size: 17px; } }
html body .win :is(.bp-qty > b) { font-size: 16px; }
html body .win :is(.bp-stats b, .bp-info b) { font-size: 13px; }

/* ── จอแคบ: ซ้อนคอลัมน์ · หัวย่อ ───────────────────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  .stv-head { grid-template-columns: 48px minmax(0, 1fr); padding: 8px 10px; }
  .stv-crest { width: 46px; height: 46px; }
  .stv-say { display: none; }
  .stv-cols { grid-template-columns: 1fr; }
  .stv-list, .stv-det { max-height: none; }
  .stv-det { overflow: visible; }     /* ให้ปุ่มซื้อ (sticky) ติดขอบล่างของ .body ที่เลื่อนอยู่ ไม่ใช่ของกล่องที่ไม่เลื่อน */
  .stv-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
  .stv-ic { width: 46px; height: 46px; }
  .stv-ic .ic3d, .stv-ic img { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  .stv-pr small { display: none; }
  .bp-total b { font-size: 17px; }
  .bp-stats { grid-template-columns: 1fr; }
}
/* มือถือแนวนอน: เตี้ยมาก — ซ่อนกันสาด/หัว (ui-win-fix ซ่อน .mk-head แบบเดียวกัน) · สองคอลัมน์ต่อ */
html.touch-ui.land body .mk.stv :is(.stv-awning, .stv-head) { display: none; }
html.touch-ui.land body .mk.stv .stv-cols:not(.solo) { grid-template-columns: 55fr 45fr; }
html.touch-ui.land body .mk.stv :is(.stv-list, .stv-det) { max-height: calc(100vh - 176px); }
html.touch-ui.land body .mk.stv .bp-desc { display: none; }     /* เตี้ยเกิน — คำอธิบายเต็มดูได้จากการ์ดไอเทม (แตะไอคอน) */
html.touch-ui.land body .mk.mkb .mkb-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.touch-ui.land body .mk.mkb .mkb-tabs > * { flex: 0 0 auto; }
/* แนวนอนเตี้ย 390: ค้นหา + หมวด แถวเดียวกัน · ทั้งหน้าต่างเลื่อน (คอลัมน์ไม่เลื่อนแยก) · ปุ่มซื้อ sticky ติดล่างหน้าต่าง */
html.touch-ui.land body .mk.mkb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
html.touch-ui.land body .mk.mkb > :is(.stv-cols, .mk-confirm) { grid-column: 1 / -1; }
html.touch-ui.land body .mk.mkb .mkb-search input, html.touch-ui.land body .win .mk.mkb .mkb-search .mkb-go { height: 36px; min-height: 36px; }
html.touch-ui.land body .mk.mkb :is(.stv-list, .stv-det) { max-height: none; overflow: visible; }
/* กระดานตลาดมีแถบค้นหา+หมวดเพิ่ม ~90px — คอลัมน์ต้องเตี้ยกว่าแผงพ่อค้า ไม่งั้นหน้าต่างทั้งบานเลื่อน (จอ 768 ปุ่มซื้อตกขอบ) */
@media (min-width: 761px) and (pointer: fine) { .mk.mkb :is(.stv-list, .stv-det) { max-height: max(220px, min(calc(min(92vh, 780px) - 350px), 480px)); } }
/* แนวนอน: แถบซื้อ (จำนวน · ราคารวม · ปุ่ม) เหลือแถวเดียว ~52px — เดิมสูง 160px บังรายละเอียดทั้งคอลัมน์ */
html.touch-ui.land body .bp-foot { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 6px; padding-top: 6px; }
html.touch-ui.land body .bp-foot .bp-buy { display: contents; }
html.touch-ui.land body .bp-foot :is(.bp-qty, .bp-total) { padding: 4px 8px; gap: 1px; }
html.touch-ui.land body .bp-foot :is(.bp-qty, .bp-total) > small { font-size: 11.5px; }
html.touch-ui.land body .win .bp-foot .bp-total b { font-size: 16px; }
html.touch-ui.land body .win .bp .bp-go { min-height: 0; height: 100%; font-size: 15px; }
html.touch-ui.land body .bp-foot :is(.mk-after, .mk-why) { grid-column: 1 / -1; margin: 0; font-size: 12px; }
html.touch-ui.land body .bp-foot .mk-step button { width: 30px; }
html.touch-ui.land body .bp-foot .mk-step input { width: 34px; }

/* ══ หน้าต่างพ่อค้าที่เหลือ (หีบโชคลาภ · ตั้งแผง · จัดการแผง · กล่องยืนยัน) — ปรับผิวชิ้น mk-* ให้เป็นชุดเดียวกัน ══
   โครง/การทำงานเดิมทั้งหมด · แก้แค่หน้าตา */
.mk-win .mk-head { background: var(--np-paper); border: 1.5px solid var(--np-gold); box-shadow: 0 0 0 3px #f3e3bd inset; border-radius: 14px; }
.mk-win .mk-crest { width: 60px; height: 60px; }
.mk-win .mk-head { grid-template-columns: 60px auto minmax(0, 1fr) auto; }
html body .win :is(.mk-htitle b) { font-size: 20px; color: #5a3a0e; }
.mk-win .mk-say { border-color: #e3d4ae; font-size: 13px; }
.mk-win .mk-col { background: var(--np-paper); border: 1.5px solid #e6d3a6; border-radius: 14px; scrollbar-width: thin; scrollbar-color: #caa45e #f3e8d0; }
/* หัวคอลัมน์: แถบครีมเข้ม + เพชรทอง (แบบหัวข้อในการ์ดไอเทม) */
.mk-win .mk-col h4 { position: relative; padding: 4px 10px 4px 24px; border: 0; border-radius: 8px; margin: 0 0 9px;
  background: linear-gradient(90deg, #f1e2bf, #f8efdb 80%, transparent); font: 700 14px/1.4 var(--font-head, inherit); color: var(--np-head); }
.mk-win .mk-col h4::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: #c8932e; transform: rotate(45deg); border-radius: 1px; }
.mk-win .mk-col h4 span { color: var(--np-mute); }
/* หมวด: ชิปแบบกระดานตลาด */
html body .win .mk-win .mk-tabs button, html body .win.mk-win .mk-tabs button { min-height: 30px; padding: 4px 12px; border-radius: 999px; font: 600 13px/1 var(--font-head, inherit);
  color: #7a5a2a; background: #fbf3e0; border: 1px solid #e2cc98; }
html body .win.mk-win .mk-tabs button.on { color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); border-color: #285d61; }
/* ช่องของ: กรอบไอคอนแบบการ์ด */
.mk-win .mk-slot { border-radius: 12px; border: 2px solid #e3d0a4; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); box-shadow: inset 0 -3px 0 #0000000f; }
.mk-win .mk-slot.cart { border-color: #9cc9bd; background: radial-gradient(circle at 50% 40%, #f5fdfb, #d7ece6); }
.mk-win .mk-line { border-radius: 12px; border: 1.5px solid #ecdcb6; background: #fffdf7; }
.mk-win .mk-line-ic { width: 42px; height: 42px; border-radius: 10px; border: 2px solid #e3d0a4; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); }
.mk-win .mk-line { grid-template-columns: 44px minmax(0, 1fr) auto auto auto; }
.mk-win .mk-line.ro { grid-template-columns: 44px minmax(0, 1fr) auto; }
html body .win :is(.mk-line-tx b) { font-size: 14px; }
.mk-win .mk-sum > div:not(.mk-meter) { border-radius: 9px; }
.mk-win .mk-sum .total { background: linear-gradient(#fff6dc, #fbe9bb); border: 1px solid #e8cf8f; }
.mk-win .mk-earn { border-radius: 14px; border: 1.5px solid #e8cf8f; background: linear-gradient(#fff6dc, #fbe9bb); }
html body .win :is(.mk-earn b) { font-size: 22px; }
.mk-win .mk-sale { border-radius: 12px; border: 1.5px solid #ecdcb6; background: #fffdf7; }
.mk-win .mk-confirm-in { border-radius: 16px; border: 2px solid var(--np-gold); background: var(--np-paper); box-shadow: 0 0 0 4px #f3e3bd, 0 0 0 5px #caa45e, 0 10px 26px rgba(70, 45, 10, .32); }
/* ปุ่มหลักของการทำธุรกรรม = เขียวแบบการ์ดไอเทม (เปิดแผง · รับเงิน · ยืนยัน) — ไม่ใช้ mk-go (กฎ teal ผูก id) */
html body .win.mk-win .rbtn.np-go { border: 1px solid #3d8a45; color: #fff; text-shadow: 0 1px 1px #1d4a2355; font-weight: 700;
  background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }
html body .win.mk-win .rbtn.np-go.np-go:hover:not(:disabled) { background: linear-gradient(#7ccd73, #4ea34b); border-color: #3d8a45; color: #fff; }
html body .win.mk-win .rbtn.np-go:disabled { filter: saturate(.3); opacity: .55; }
/* จอกลาง (761–1060 เช่นแท็บเล็ต 820): ตั้งแผง 3 คอลัมน์ทำแถวตั้งราคาถูกตัด (ปุ่ม + และ × หาย) →
   1 เลือกของ | 2 ตั้งราคา · 3 สรุป เต็มแถวล่าง */
@media (min-width: 761px) and (max-width: 1060px) and (pointer: fine) {
  .mk-win .mk-cols.three { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .mk-win .mk-cols.three > :nth-child(3) { grid-column: 1 / -1; }
}
/* แถวตั้งราคา: คอลัมน์จำนวน/ราคากว้างตามเนื้อหา — ปุ่ม ± บนจอสัมผัสใหญ่กว่า 96px ที่ตั้งไว้ เลยโดนช่องราคาทับ */
.mk-win .mk-line:not(.pick):not(.ro) { grid-template-columns: 44px minmax(90px, 1fr) auto auto 28px; }

/* ══ ช่างคราฟ + ร้านแลกรางวัล (craft-window.js) ══ */
.win[data-win="craft"] .cw-head { background: var(--np-paper); border: 1.5px solid var(--np-gold); box-shadow: 0 0 0 3px #f3e3bd inset; border-radius: 14px; }
.win[data-win="craft"] .cw.token .cw-head { background: linear-gradient(#fff8e2, #fcecc0); }
html body .win :is(.cw-title b) { font-size: 20px; color: #5a3a0e; }
html body .win[data-win="craft"] .cw-tabs button { min-height: 32px; padding: 4px 14px; border-radius: 999px; font: 600 13.5px/1 var(--font-head, inherit);
  color: #7a5a2a; background: #fbf3e0; border: 1px solid #e2cc98; }
html body .win[data-win="craft"] .cw-tabs button.on { color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); border-color: #285d61; }
.win[data-win="craft"] .cw-list { padding: 8px; border-radius: 14px; background: var(--np-paper); border: 1.5px solid #e6d3a6; gap: 6px;
  scrollbar-width: thin; scrollbar-color: #caa45e #f3e8d0; }
.win[data-win="craft"] .cw-item { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1.5px solid #ecdcb6; background: #fffdf7; }
.win[data-win="craft"] .cw-item:hover { background: #fff7e4; border-color: #dfc27e; }
.win[data-win="craft"] .cw-item.on { background: #fdf2d6; border-color: #e8b64a; box-shadow: 0 0 0 2px #e8b64a55; }
/* กรอบไอคอนสีตามความหายาก (ชุดเดียวกับ .stv-ic) */
.np-ic { border-radius: 11px; border: 2px solid #d8c49a; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); box-shadow: inset 0 -3px 0 #0000000f; }
.np-ic.r-uncommon { border-color: #9fd08f; background: radial-gradient(circle at 50% 40%, #fbfff4, #dcefcf); }
.np-ic:is(.r-good, .r-rare) { border-color: #8fbdf0; background: radial-gradient(circle at 50% 40%, #f6fbff, #d3e5f8); }
.np-ic.r-epic { border-color: #c29af0; background: radial-gradient(circle at 50% 40%, #fbf6ff, #e6d6f8); }
.np-ic.r-legend { border-color: #e8b64a; background: radial-gradient(circle at 50% 40%, #fffbea, #f6e0a8); }
.np-ic.r-style { border-color: #8cc0c0; background: radial-gradient(circle at 50% 40%, #f5fdfc, #d5ecea); }
.win[data-win="craft"] .cw-item .cw-ic { width: 46px; height: 46px; }
html body .win :is(.cw-tx b) { font-size: 14.5px; }
.win[data-win="craft"] .cw-detail { gap: 8px; padding: 10px 12px 0; border-radius: 14px; background: var(--np-paper); border: 1.5px solid #e6d3a6;
  max-height: 420px; overflow: auto; scrollbar-width: thin; scrollbar-color: #caa45e #f3e8d0; }
.win[data-win="craft"] .cw-detail .cw-big { width: 76px; height: 76px; align-self: auto; font-size: 38px; }
.win[data-win="craft"] .cw-detail .cw-big img { width: 62px; height: 62px; }
.bp-tt > b small { font-size: 14px; color: var(--np-mute); }
.cw-req { margin: 0; font-size: 13px; color: var(--np-mute); } .cw-req .bad { color: #c0392b; font-weight: 700; }
/* หัวข้อส่วน: แถบครีมเข้ม + เพชรทอง (แบบการ์ดไอเทม) — ใช้ได้ทุกหน้าต่าง */
.np-h { position: relative; margin: 2px 0 0; padding: 3px 10px 3px 22px; border-radius: 8px;
  background: linear-gradient(90deg, #f1e2bf, #f8efdb 80%, transparent); font: 700 14px/1.4 var(--font-head, inherit); color: var(--np-head); }
.np-h::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: #c8932e; transform: rotate(45deg); border-radius: 1px; }
.cw-mats { display: grid; gap: 4px; }
.win[data-win="craft"] .cw-mat { padding: 5px 8px; border-radius: 9px; background: #f3f9ef; border: 1px solid #d6e8cc; cursor: pointer; }
.win[data-win="craft"] .cw-mat.lack { background: #fdf1ec; border-color: #efcfc2; }
.win[data-win="craft"] .cw-mat .cw-ic.sm { width: 30px; height: 30px; }
/* จำนวน + ปุ่มทำ ติดล่างคอลัมน์ */
.cw-dfoot { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 7px; margin: auto -12px 0; padding: 10px 12px 12px;
  background: linear-gradient(#f8eed800, #f8eed8 12px); }
.win[data-win="craft"] .cw-n { margin: 0; }
.win[data-win="craft"] .cw-go, .win[data-win="craft"] .cw.token .cw-go { margin: 0; min-height: 44px; border-radius: 12px; border: 1px solid #3d8a45; color: #fff;
  text-shadow: 0 1px 1px #1d4a2355; font: 700 15px/1.25 var(--font-head, inherit); background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }
.win[data-win="craft"] .cw-go:hover:not(:disabled) { filter: brightness(1.05); }
.win[data-win="craft"] .cw-go:disabled { filter: saturate(.3); opacity: .6; }
.win[data-win="craft"] .cw-foot { padding: 6px 10px; border-radius: 10px; background: #fbf3e0; border: 1px solid #efe1bf; }
@media (max-width: 640px) {
  .win[data-win="craft"] .cw-detail { max-height: none; overflow: visible; }
}
/* รายการคราฟเป็น flex คอลัมน์ที่จำกัดความสูง — แถวต้องไม่หด (มือถือ max-height 200 เคยบีบแถวซ้อนกัน) */
.win[data-win="craft"] .cw-item { flex-shrink: 0; }
/* ป้ายยาว (เช่น "ของแต่งตัว (หมวก) · ไม่มีพลัง") ตัดท้ายแทนล้นกรอบ */
.bp-tags > em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* แนวนอน: หน้าต่างคราฟเต็มกว้าง (ตำแหน่งตั้งจาก JS ตอนเปิด — ต้อง !important แบบเดียวกับ .mk-win ใน ui-win-fix.css) */
html.touch-ui.land body .win:is([data-win="craft"], [data-win="refine"], [data-win="herald"]) { left: 6px !important; width: calc(100vw - 12px) !important; max-width: none; }
html.touch-ui.land body .win[data-win="craft"] :is(.cw-list, .cw-detail) { max-height: max(150px, calc(100vh - 232px)); }
html.touch-ui.land body .win[data-win="craft"] .cw-foot { display: none; }
html.touch-ui.land body .win[data-win="craft"] .cw-dfoot { gap: 5px; padding-top: 6px; }
html.touch-ui.land body .win[data-win="craft"] .cw-go { min-height: 38px; }
.win[data-win="craft"] .cw-tx { min-width: 0; }
.win[data-win="craft"] .cw-tx > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .win[data-win="craft"] :is(.cw-npc, .cw-bal span:last-child) { display: none; }
  .win[data-win="craft"] .cw-head { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ══ ช่างตีบวก (refine-window.js) — งานภาพ Astra อยู่แล้ว ปรับเฉพาะให้เข้าชุด ══ */
html body .win :is(.rw-title b) { font-size: 20px; color: #5a3a0e; }
.win[data-win="refine"] .rw-head { border: 1.5px solid var(--np-gold); box-shadow: 0 0 0 3px #f3e3bd inset; border-radius: 14px; }
.win[data-win="refine"] .rw-col { background: var(--np-paper); border: 1.5px solid #e6d3a6; border-radius: 14px; }
.win[data-win="refine"] .rw-col h4 { position: relative; padding: 4px 10px 4px 24px; border: 0; border-radius: 8px; margin: 0 0 9px;
  background: linear-gradient(90deg, #f1e2bf, #f8efdb 80%, transparent); font: 700 14px/1.4 var(--font-head, inherit); color: var(--np-head); }
.win[data-win="refine"] .rw-col h4::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: #c8932e; transform: rotate(45deg); border-radius: 1px; }
.win[data-win="refine"] .rw-item-ic { width: 36px; height: 36px; flex: none; }
.win[data-win="refine"] .rw-item-ic :is(.ic3d, img) { width: 28px; height: 28px; }
/* จอเตี้ย (≤ 820): รูป Ferra ในหัวสูง 148px กินที่ — ย่อหัวลง ตารางโอกาสจะได้ไม่ดันหน้าต่างล้น */
@media (max-height: 820px) and (min-width: 761px) {
  .win[data-win="refine"] .rw-head { min-height: 0; padding-block: 6px; }
  .win[data-win="refine"] .rw-ferra { width: 92px; height: 92px; margin-block: -8px -8px; }
}
.win[data-win="refine"] .rw-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding: 6px 8px 6px 6px; border-radius: 12px; border-width: 1.5px; }
html body .win :is(.rw-item-tx b) { font-size: 14px; }

/* ══ ร้าน NPC (shop-window.js · งานภาพ Astra) — แก้เฉพาะจุดที่ใช้งานไม่ได้ ══ */
/* ชิปหมวดย่อยแถวเดียว: ขอบขวาจางเมื่อยังมีชิปต่อ (shop-window.js ใส่ .more) */
.win[data-win="shop"] .shop-subs.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.win[data-win="shop"] .win-ic .win-ic-l { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b64a 70%, #b98a2a); color: #5a3a0e; font: 700 20px/1 var(--font-head, inherit); }

/* ══ คลัง (ui.js renderStorage) ══ */
.win[data-win="storage"] .stg-tip { margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; background: #fbf3e0; border: 1px solid #efe1bf; font-size: 13px; line-height: 1.45; color: #5a4630; }
.win[data-win="storage"] .stg-tip small { color: var(--np-mute); }
.win[data-win="storage"] .stg-grid { padding: 8px; border-radius: 14px; background: var(--np-paper); border: 1.5px solid #e6d3a6; }
.win[data-win="storage"] .stg-grid .slot.np-ic { border-radius: 12px; }
.win[data-win="storage"] .stg-grid .slot.np-ic:hover { filter: brightness(1.04); box-shadow: 0 0 0 2px #e8b64a88; }
.win[data-win="storage"] .foot { gap: 8px; }
.stg-cap { flex: 1; min-width: 60px; height: 8px; border-radius: 4px; background: #ece3cf; overflow: hidden; }
.stg-cap i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(#f2c14e, #d99a26); }
.stg-n { font-size: 13px; color: var(--np-mute); white-space: nowrap; }
/* กริดคลัง: ช่องกว้างตามคอลัมน์ (เดิม 34/46px ตายตัว แต่ช่องบนจอสัมผัสใหญ่กว่า → ซ้อนกัน) */
html body .win[data-win="storage"] .stg-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; }
html body .win[data-win="storage"] .stg-grid .slot { width: auto; height: auto; aspect-ratio: 1; min-width: 0; font-size: 26px; }
html body .win[data-win="storage"] .stg-grid .slot .ic3d { width: 78%; height: 78%; }

/* ══ ผู้ประกาศข่าว (herald-window.js · งาน Astra) — ขนาดตัวอักษรที่ ui-kit บีบทิ้ง ══ */
html body .win .hw-top b { font-size: 22px; }
html body .win .hw-feat-art .hw-ph-big { font-size: 64px; line-height: 1; }
@media (max-width: 640px) { html body .win .hw-top b { font-size: 18px; } }
html.touch-ui.land body .win .hw-top b { font-size: 16px; }

/* ══ Rowan (job-window.js) — แนวนอน: แถบเงื่อนไข+ปุ่มเปลี่ยนอาชีพสูง ~90px เหลือรายละเอียดอาชีพ ~50px
   → ซ่อนหัว/คำอธิบายใต้ปุ่ม · เงื่อนไขเรียงแถวเดียว · ปุ่มเตี้ยลง ══ */
html.touch-ui.land body .win .jd-foot { padding-block: 5px; gap: 8px; }
html.touch-ui.land body .win .jd-req h5, html.touch-ui.land body .win .jd-act > small { display: none; }
html.touch-ui.land body .win .jd-req ul { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; }
html.touch-ui.land body .win .jd-req li small { display: none; }
html.touch-ui.land body .win .jd-cta { min-height: 38px; padding-block: 6px; font-size: 15px; }

/* ══ เควสวันนี้: ปุ่มพาไปหาปาร์ตี้ในการ์ดเควส (ui.js renderQuests) ══ */
html body .win .qd-card .qd-go { margin-top: 6px; min-height: 30px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid #285d61; color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); font: 600 13px/1.2 var(--font-head, inherit); }
html body .win .qd-card .qd-go:hover { filter: brightness(1.06); }
/* ปุ่มนำทางเควส (ui.js questGo · 2 ต.ค.): ครบแล้ว = ทองส้ม "กลับไปส่ง" · อยู่ในพื้นที่แล้ว = ปุ่มรอง */
html body .win .qd-card .qd-go.qd-turnin { border-color: #b8761f; color: #3e2a10; background: linear-gradient(#f6c75a, #e8a43a); }
html body .win .qd-card .qd-go.qd-here { border-color: #8fb6b3; color: #285d61; background: #e8f3f1; }
html body .win .qd-card.done { box-shadow: 0 0 0 2px #e8b64a66 inset; }
/* มือถือ: แถวตั้งราคา (แผง + ฝากขาย) — ช่องจำนวน/ราคาลงแถวใต้ชื่อ ไม่ล้นขอบขวา (เห็นตอนตรวจฝากขาย 28 ก.ย. จอ 390) */
@media (max-width: 640px) {
  .mk-win .mk-line:not(.pick):not(.ro) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mk-win .mk-line:not(.pick):not(.ro) .mk-lab { display: grid; grid-column: 2 / -1; }
  .mk-win .mk-line:not(.pick):not(.ro) .mk-x { grid-column: 3; grid-row: 1; }
  .mk-win .mk-line:not(.pick):not(.ro) > span:empty { display: none; }
}

/* หน้า NPC/มอนบนการ์ดเควส (ui.js face) — วงกลมขอบทอง ใหญ่พอเห็นหน้า */
html body .win .qd-card .qd-ic.qd-face { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  background: #fff6dc; border: 2px solid #e8b64a; box-shadow: 0 1px 3px #0002; }
html body .win .qd-card .qd-ic.qd-face.mob { object-fit: contain; object-position: center; background: radial-gradient(circle at 50% 60%, #fff6dc, #ecdcb4); }
html body .win .qd-card:has(> .qd-face) { grid-template-columns: 54px 1fr; }
/* ความคืบหน้าอัตโนมัติไม่ใช้ช่องติ๊ก (ผู้ใช้ 2 ต.ค.) — ช่องว่างซ่อน · ครบแล้วเป็นป้าย ✓ เล็กมุมไอคอน */
html body .win .qd-card { position: relative; grid-template-columns: 36px 1fr; }
html body .win .qd-card > .qd-chk { position: absolute; left: 34px; top: 4px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; z-index: 1; }
html body .win .qd-card:not(.done) > .qd-chk { display: none; }