/* หน้าต่างพ่อค้า (market-window.js) — ภาษาภาพเดียวกับโต๊ะตีบวก (ui-refine.css):
   หัวครีมไล่สี + ตรา + บอลลูนคำพูด · คอลัมน์เป็นการ์ดครีมขอบทองอ่อน · ปุ่มหลัก teal ประจำเกม
   ⚠️ ปลดความสูงของ .win/.body แบบเดียวกับหน้าตีบวก ไม่งั้นสกินไม้บีบเหลือครึ่งจอ */
#windows .win.mk-win { max-width: 96vw; max-height: min(92vh, 780px); }
html[data-skin="wood"] body .win.mk-win > .body { max-height: none; }
#windows .win.mk-win > .body { max-height: none; overflow: auto; padding: 0; }

.mk { position: relative; display: grid; gap: 10px; padding: 2px; color: #3b3020; }

/* ── หัวหน้าต่าง ───────────────────────────────────────────────────── */
.mk-head {
  display: grid; grid-template-columns: 54px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; min-height: 74px;
  background: linear-gradient(100deg, #f7edd6, #fdf6e6 42%, #f6e3c4);
  border: 1px solid #e0cda0; box-shadow: inset 0 0 26px #e8a04022;
}
.mk-head.has-face { grid-template-columns: 54px auto minmax(0, 1fr) auto 120px; }
.mk-crest { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 3px #8a5a1a44); }
.mk-htitle b { display: block; font: 700 20px/1.15 var(--font-head); color: #6b4510; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-htitle span { font-size: 12px; color: #9a8258; letter-spacing: .04em; }
.mk-say {
  justify-self: end; position: relative; max-width: 320px; padding: 8px 12px; border-radius: 12px;
  background: #fffdf6; border: 1px solid #e0d2ab; font-size: 12.5px; line-height: 1.45; color: #5b4524;
}
.mk-face { width: 120px; height: 120px; object-fit: contain; object-position: bottom; margin: -16px 0 -12px; }

/* ป้ายหน้าร้าน (ตัวอย่างในหัว = หน้าตาเดียวกับป้ายลอยบนแผงในฉาก) */
.mk-preview { display: grid; justify-items: center; gap: 4px; }
.mk-preview i { font-style: normal; font-size: 10.5px; color: #9a8258; }
.mk-sign > span, .label.stall .stall-sign {
  display: inline-flex; align-items: center; gap: 6px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 12px; border-radius: 9px; background: linear-gradient(#3a8589, #2f6f73);
  color: #fff6dc; border: 1.5px solid #e8b64a; box-shadow: 0 2px 0 #1f4d50, 0 3px 8px #0003;
  font: 700 13px/1.2 var(--font-head);
}
.mk-pill { font: 700 11.5px/1 var(--font-head); padding: 4px 9px; border-radius: 999px; }
.mk-pill.on { color: #2f7a36; background: #e3f4e1; border: 1px solid #a9d8a4; }
.mk-pill.off { color: #8a5a3a; background: #f6e8dc; border: 1px solid #e2c3a8; }

/* ความจุหีบโชคลาภในหัว */
.mk-cap { justify-self: end; display: grid; gap: 4px; min-width: 190px; }
.mk-cap-n { font-size: 12px; color: #8a7a5a; } .mk-cap-n b { font: 700 20px/1 var(--font-head); color: #6b4510; }
.mk-cap-b { font-size: 11.5px; color: #8a7a5a; } .mk-cap-b b { color: #b0791f; }

/* ── คอลัมน์ ───────────────────────────────────────────────────────── */
.mk-cols { display: grid; gap: 9px; align-items: start; }
.mk-cols.two { grid-template-columns: 1fr 1fr; }
.mk-cols.three { grid-template-columns: 24fr 46fr 30fr; }
.mk-cols.buy { grid-template-columns: 56fr 44fr; }
.mk-col { padding: 10px; border-radius: 11px; background: #fffdf6; border: 1px solid #e6dabb; max-height: min(56vh, 460px); overflow: auto; }
.mk-col h4 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #efe4c9;
  font: 700 13px/1.1 var(--font-head); color: #8a6a3a;
}
.mk-col h4 span { font: 400 11px/1.2 var(--font); color: #9a8c70; }

/* แท็บหมวด */
.mk-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mk-tabs button { font: 600 11.5px/1 var(--font-head); padding: 5px 9px; border-radius: 999px; cursor: pointer;
  background: #faf4e6; border: 1px solid #ece0c4; color: #8a6a3a; }
.mk-tabs button.on { background: #2f6f73; border-color: #2f6f73; color: #fff; }

/* ช่องไอเท็ม */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
.mk-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 27px;
  border-radius: 9px; background: linear-gradient(#fffaf0, #f5ead2); border: 1px solid #e3d4ae; transition: transform .08s, box-shadow .08s; }
.mk-slot:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px #e8b64a88; }
.mk-slot:active { transform: scale(.95); }
.mk-slot.cart { background: linear-gradient(#f1f7f4, #dcebe4); border-color: #b9d4c8; }
.mk-slot .ic3d, .mk-slot img { width: 34px; height: 34px; object-fit: contain; }
.mk-q { position: absolute; right: 3px; bottom: 1px; font: 700 10.5px/1 var(--font-head); color: #3b3020; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.mk-r { position: absolute; left: 3px; top: 2px; font: 700 10px/1 var(--font-head); color: #b0791f; }
.mk-legend { margin-top: 8px; font-size: 11px; color: #9a8c70; display: flex; align-items: center; gap: 5px; }
.mk-legend i { width: 12px; height: 12px; border-radius: 3px; background: #dcebe4; border: 1px solid #b9d4c8; }

/* รายการแบบแถว (ของบนแผง · ผลค้นหา) */
.mk-rows { display: grid; gap: 5px; }
.mk-line {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center;
  width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; font: inherit; color: inherit;
  background: #fffaf0; border: 1px solid #ece0c4;
}
.mk-line.ro, .mk-line.pick { grid-template-columns: 40px minmax(0, 1fr) auto; }
.mk-line.pick { cursor: pointer; }
.mk-line.pick:hover { background: #fff7e4; }
.mk-line.on { background: #fdf0d2; border-color: #e8b64a; box-shadow: 0 0 0 2px #e8b64a55; }
.mk-line.low { border-color: #e2a79a; background: #fdf3ef; }
.mk-line-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #f5ead2; font-size: 25px; }
.mk-line-ic .ic3d, .mk-line-ic img { width: 30px; height: 30px; object-fit: contain; }
.mk-line-tx { min-width: 0; }
.mk-line-tx b { display: block; font: 600 13px/1.25 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-line-tx span { font-size: 11px; color: #8a7a5a; }
.mk-plus { font-style: normal; color: #b0791f; }
.mk-tag { font-style: normal; font: 700 10px/1 var(--font-head); color: #fff; background: #3d8a2a; padding: 2px 6px; border-radius: 999px; vertical-align: 1px; }
.mk-price { display: inline-flex; align-items: center; gap: 5px; font: 700 15px/1 var(--font-head); color: #6b4510; white-space: nowrap; }
.mk-lab { display: grid; gap: 3px; font-size: 10.5px; color: #9a8c70; }
.mk-lab .mk-step { justify-self: start; }
/* แถวตั้งราคา: ชื่อของต้องอ่านครบ (เดิมตัดเหลือ "Blue Poti…") — ยอมให้ขึ้นสองบรรทัด */
.mk-line:not(.pick):not(.ro) { grid-template-columns: 40px minmax(80px, 1fr) 96px 120px 26px; }
.mk-line:not(.pick):not(.ro) .mk-step input { width: 38px; }
.mk-line:not(.pick):not(.ro) .mk-price-in input { width: 78px; }
.mk-line:not(.pick):not(.ro) .mk-line-tx b { white-space: normal; }
.mk-x { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e3d4ae; background: #fff; color: #a0523a; cursor: pointer; font-size: 16px; line-height: 1; }

/* เหรียญ — วาดด้วย CSS ให้เหมือนเหรียญของโต๊ะตีบวก */
.mk-coin { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px;
  background: radial-gradient(circle at 34% 30%, #ffe9a8, #e8b64a 62%, #b98a2a); box-shadow: inset 0 0 0 1px #b98a2a88; }

/* ช่องกรอก */
.mk-price-in { display: flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 8px; background: #fff; border: 1px solid #e0d2ab; }
.mk-price-in input { width: 92px; border: 0; outline: 0; background: none; font: 700 14px/30px var(--font-head); color: #3b3020; }
.mk-step { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid #e0d2ab; background: #fff; }
.mk-step button { width: 28px; border: 0; background: #faf4e6; color: #6b4510; font: 700 16px/1 var(--font-head); cursor: pointer; }
.mk-step button:active { background: #f1e3c0; }
.mk-step input { width: 46px; border: 0; outline: 0; text-align: center; font: 700 14px/30px var(--font-head); color: #3b3020; -moz-appearance: textfield; }
.mk input[type=number]::-webkit-inner-spin-button, .mk input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mk-title-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 12px var(--font-head); color: #8a6a3a; }
.mk-title-in input, .mk-search input {
  font: 500 14px var(--font); padding: 7px 10px; border-radius: 8px; border: 1px solid #e0d2ab; background: #fff; color: #3b3020;
  -webkit-user-select: text; user-select: text;
}
.mk-title-in input:focus, .mk-search input:focus, .mk-price-in:focus-within, .mk-step:focus-within { outline: 2px solid #2f6f7355; border-color: #2f6f73; }

/* สรุป · เงิน */
.mk-sum { display: grid; gap: 5px; font-size: 12.5px; }
.mk-sum > div:not(.mk-meter) { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 7px; background: #faf4e6; }
.mk-sum span { color: #8a7a5a; } .mk-sum b { color: #3b3020; display: inline-flex; align-items: center; gap: 5px; }
.mk-sum b.neg { color: #a0523a; }
.mk-sum .total { background: linear-gradient(#fff6dc, #f6e3a8) !important; border: 1px solid #e8b64a; padding: 8px !important; }
.mk-sum .total b { font: 700 17px/1 var(--font-head); color: #6b4510; }
.mk-meter { height: 8px; border-radius: 999px; background: #efe4c9; overflow: hidden; }
.mk-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e8b64a, #f2aa12); transition: width .25s; }
.mk-meter.time i { background: linear-gradient(90deg, #3a8589, #5ab0a0); }
.mk-earn { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; margin-bottom: 9px; border-radius: 11px; background: #faf4e6; border: 1px solid #ece0c4; }
.mk-earn.has { background: linear-gradient(#fff6dc, #f6e3a8); border-color: #e8b64a; box-shadow: 0 0 18px #e8b64a44; }
.mk-earn span { font-size: 12px; color: #8a7a5a; }
.mk-earn b { display: inline-flex; align-items: center; gap: 7px; font: 700 28px/1 var(--font-head); color: #6b4510; }
.mk-earn .mk-coin { width: 22px; height: 22px; }

.mk-log { display: grid; gap: 5px; }
.mk-sale { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 5px 7px; border-radius: 9px; background: #f3faf3; border: 1px solid #d6ead3; }
.mk-sale b { display: block; font: 600 12px/1.25 var(--font-head); }
.mk-sale i { font-style: normal; font-size: 10.5px; color: #8a7a5a; }
.mk-sale em { font-style: normal; font: 700 13px var(--font-head); color: #3d8a2a; }

/* สถานะ/คำเตือน */
.mk-ok, .mk-warn { margin-top: 9px; padding: 8px 10px; border-radius: 9px; font-size: 12px; line-height: 1.5; }
.mk-ok { background: #eef7ef; border: 1px solid #bfdfc0; color: #2f7a36; }
.mk-warn { display: grid; gap: 6px; background: #fdf0ec; border: 1px solid #e2a79a; color: #8a3a2a; }
.mk-warn b { font: 700 12.5px var(--font-head); }
.mk-warn.small { display: block; margin-top: 8px; }
.mk-empty { grid-column: 1 / -1; padding: 16px 8px; text-align: center; font-size: 12px; color: #9a8c70; line-height: 1.6; }
.mk-empty b { display: block; font: 700 13.5px var(--font-head); color: #8a6a3a; }
.mk-empty.big { padding: 36px 10px; }

/* แผงซื้อ (ขวา) */
.mk-big { display: grid; place-items: center; height: 96px; font-size: 60px; }
.mk-big .ic3d, .mk-big img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 6px #8a5a1a33); }
.mk-big-nm { text-align: center; font: 700 16px/1.3 var(--font-head); }
.mk-big-k { text-align: center; font-size: 11.5px; color: #8a7a5a; margin-bottom: 6px; }
.mk-desc { font-size: 12px; line-height: 1.55; color: #5b4524; padding: 7px 9px; border-radius: 8px; background: #faf4e6; }
.mk-desc .small:last-child { display: none; }       /* "ราคาขาย NPC" ของ describeItem ไม่เกี่ยวกับการซื้อจากแผง */
.mk-buybox { display: grid; gap: 7px; margin-top: 9px; }
.mk-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 9px;
  background: linear-gradient(#fff6dc, #f6e3a8); border: 1px solid #e8b64a; }
.mk-total span { font-size: 12px; color: #8a6a3a; }
.mk-total b { display: inline-flex; align-items: center; gap: 6px; font: 700 20px/1 var(--font-head); color: #6b4510; }
.mk-why { text-align: center; font-size: 12px; color: #a0523a; }
.mk-after { text-align: center; font-size: 11.5px; color: #8a7a5a; }
.mk-walk { margin-top: 7px; }
.rbtn.wide { width: 100%; }

/* ปุ่มหลัก — teal ประจำเกม ใหญ่กว่าปุ่มรอง ให้ตาไปหาก่อน
   ⚠️ ต้องคุมทุกสถานะ (hover/active/focus) เอง — สกินไม้เปลี่ยนพื้น .rbtn:hover เป็นครีม
      ตัวหนังสือขาวบนครีม = ปุ่ม "ซื้อ" หายไปทั้งปุ่มตอนเมาส์ชี้ (เจอในภาพทดสอบ) */
#windows .win.mk-win .rbtn.mk-go, #windows .win.mk-win .rbtn.mk-go:hover, #windows .win.mk-win .rbtn.mk-go:focus, #windows .win.mk-win .rbtn.mk-go:active {
  background: linear-gradient(#3a8589, #2f6f73); color: #fff; border-color: #245a5d; font-weight: 700; padding-inline: 18px; }
#windows .win.mk-win .rbtn.mk-go:hover:not([disabled]) { background: linear-gradient(#44969a, #347c80); }
#windows .win.mk-win .rbtn.mk-go:active:not([disabled]) { background: linear-gradient(#2f6f73, #285f62); transform: translateY(1px); }
.win.mk-win .rbtn[disabled] { opacity: .5; cursor: not-allowed; }
.win.mk-win .foot { gap: 8px; }
.mk-hint { margin-right: auto; font-size: 11.5px; color: #8a7a5a; }
.mk-wallet { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8a7a5a; }
.mk-wallet b { font: 700 15px var(--font-head); color: #6b4510; }

.mk-search { display: flex; gap: 6px; }
.mk-search input { flex: 1; }

/* กล่องยืนยัน (ซื้อแพง · เก็บแผง) — ทับเฉพาะในหน้าต่าง */
.mk-confirm { position: absolute; inset: 0; display: grid; place-items: center; background: #3b302055; border-radius: 12px; z-index: 5; }
.mk-confirm-in { display: grid; gap: 8px; justify-items: center; min-width: 280px; max-width: 90%; padding: 18px 22px; border-radius: 14px;
  background: #fffdf6; border: 2px solid #e8b64a; box-shadow: 0 10px 30px #0004; text-align: center; }
.mk-confirm-in > b { font: 700 17px var(--font-head); color: #6b4510; }
.mk-confirm-in p { margin: 0; font-size: 13px; line-height: 1.55; color: #5b4524; }
.mk-confirm-item { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-head); }
.mk-confirm-item .ic3d, .mk-confirm-item img { width: 34px; height: 34px; object-fit: contain; }
.mk-confirm-act { display: flex; gap: 8px; }

/* ── ป้ายเหนือแผงในฉาก ─────────────────────────────────────────────── */
.label.stall { text-align: center; }
.label.stall .small { margin-top: 3px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000a; font-size: 11px; }

/* แจ็กพอตของ Fortune Smash */
.dmg.crit.jackpot { color: #fff2b0; font-size: 22px; letter-spacing: 1px; }
.dmg.crit.jackpot::before { background: radial-gradient(circle, #f2aa12 0 40%, #c07a10 41% 62%, transparent 63%); }

/* ── จอเล็ก: คอลัมน์ซ้อนลงมา หัวย่อ ────────────────────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  #windows .win.mk-win { width: 100vw !important; max-width: 100vw; }
  .mk-cols.two, .mk-cols.three, .mk-cols.buy { grid-template-columns: 1fr; }
  .mk-col { max-height: none; }
  .mk-head, .mk-head.has-face { grid-template-columns: 44px minmax(0, 1fr); min-height: 0; padding: 8px 10px; }
  .mk-crest { width: 44px; height: 44px; }
  .mk-say, .mk-face { display: none; }
  .mk-preview, .mk-cap { grid-column: 1 / -1; justify-self: stretch; }
  /* แถวตั้งราคาต้องชนะกฎ 5 คอลัมน์ข้างบน (specificity สูงกว่า) — เดิมกว้าง 410px ในคอลัมน์ 360px ที่จอ 390 (Codex วัด) */
  .mk-line, .mk-line:not(.pick):not(.ro) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mk-line .mk-lab { grid-column: 2 / -1; }
  .mk-line:not(.pick):not(.ro) .mk-lab { display: inline-grid; grid-column: auto; }
  .mk-line:not(.pick):not(.ro) .mk-x { grid-column: 3; grid-row: 1; }
  .mk-slot { font-size: 24px; }
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .mk-hint { display: none; }
}

/* ── คำตอบของตลาดในหน้าต่าง (market-window.js marketSys · 4 ต.ค.) — เดิมลงแชทอย่างเดียว มือถือมองไม่เห็น ── */
.mk-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 8px 8px 12px;
  border-radius: 10px; background: #fdf0ec; border: 1.5px solid #e2a79a; color: #8a3a2a;
  position: sticky; top: 0; z-index: 3; box-shadow: 0 4px 10px #3e2c1622; }   /* เลื่อนลงไปแถวตั้งราคาอยู่ก็ยังเห็น */
.mk-note > span { font: 700 16px/1 var(--font-head); }
.mk-note p { margin: 0; font: 600 13.5px/1.45 var(--font-head); }
.mk-note.ok { background: #eef7ea; border-color: #a9d19a; color: #2f6f3c; }
.mk-note-x { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
html.touch-ui .mk-note-x { width: 40px; height: 40px; }

/* ของที่ขายไม่ได้: ช่องจาง + ป้ายเหตุผล (แตะ = บอกวิธีแก้) */
.mk-win .mk-slot.lock, .mk-slot.lock { cursor: help; background: #ece6d8; border-color: #d8ccb2; }
.mk-slot.lock :is(.ic3d, img) { opacity: .42; filter: grayscale(.7); }
.mk-lock { position: absolute; left: 1px; right: 1px; bottom: 1px; padding: 1px 0; border-radius: 0 0 8px 8px; background: #6b5a40d9; color: #fffaf0;
  font: 700 9.5px/1.2 var(--font-head); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-slot.lock .mk-q { bottom: 13px; }
.mk-legend { flex-wrap: wrap; column-gap: 10px; row-gap: 3px; }
.mk-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mk-legend i.lock { background: #ece6d8; border-color: #d8ccb2; }

/* มือถือแนวนอน (จอสัมผัส กว้าง > 640): หน้าต่างเต็มจอกว้างพอให้แถวตั้งราคาเป็น 5 คอลัมน์แบบคอม
   เดิมกฎจอเล็กข้างบนบังคับปุ่ม × ไปคอลัมน์ 3 แต่แม่แบบ 5 คอลัมน์ (ui-npc-polish) ชนะ → ช่องราคาเหลือ 28px ล้นขอบขวา (ตรวจ 4 ต.ค. จอ 844×390) */
@media (pointer: coarse) and (min-width: 641px) {
  #windows .mk-win .mk-line:not(.pick):not(.ro) { grid-template-columns: 44px minmax(90px, 1fr) auto auto 44px; }   /* ปุ่ม × จอสัมผัสกว้าง 44 */
  .mk-win .mk-line:not(.pick):not(.ro) .mk-x { grid-column: auto; grid-row: auto; }
  .mk-win .mk-line:not(.pick):not(.ro) .mk-lab { display: grid; grid-column: auto; }
}

/* ราคาเกินเพดาน: เตือนทันทีตอนพิมพ์ */
.mk-line.over { border-color: #d9826e; background: #fdf0ec; }
.mk-line.over .mk-price-in { border-color: #c8553d; box-shadow: 0 0 0 2px #c8553d33; }
.mk-line.over .mk-price-in input { color: #b23a22; }
.mk-cap-hint { grid-column: 1 / -1; margin-top: -2px; font: 700 12.5px/1.3 var(--font-head); color: #b23a22; text-align: right; }
.mk-cap-hint[hidden] { display: none; }