/* หน้าต่างแลกของตัวต่อตัว (trade-window.js · 28 ก.ย.) — ชุดเดียวกับการ์ดไอเทม/หน้าต่าง NPC:
   กระดาษครีม ขอบทอง มุมมน · สองแผ่นหันหน้าเข้าหากัน (คุณ = teal · อีกฝ่าย = ทอง) · สถานะล็อกอ่านจากสีขอบแผ่น
   ⚠️ ตัวอักษรขั้นต่ำ 13px · ปุ่ม/ช่องบนจอสัมผัสสูง ≥ 44px · ไม่มีเลื่อนแนวนอน */

#windows .win[data-win="trade"] { width: min(700px, calc(100vw - 16px)) !important; }
#windows .win[data-win="trade"] .body { padding: 12px 14px 8px; }
.tw { display: grid; gap: 10px; color: #3e2c16; }

/* ── สองแผ่น ─────────────────────────────────────────────── */
.tw-sides { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.tw-swap { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 700 17px/1 var(--font-head, inherit); color: #7a5a2a; background: radial-gradient(circle at 50% 40%, #fffaf0, #f0dfb4); border: 1.5px solid #e2c47e; }
.tw-side { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 14px; border: 2px solid #e3d2a8;
  background: linear-gradient(#fffaf0, #f8eed8); box-shadow: inset 0 -3px 0 #0000000a; transition: border-color .2s, box-shadow .2s; }
.tw-side.me { border-color: #a9cfcf; background: linear-gradient(#f7fdfc, #eaf5f2); }
.tw-side.s-lock { border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7322, inset 0 -3px 0 #0000000a; }
.tw-side.them.s-lock { border-color: #d9a83a; box-shadow: 0 0 0 3px #e8b64a33, inset 0 -3px 0 #0000000a; }
.tw-side.s-ok { border-color: #3f9a55; box-shadow: 0 0 0 3px #3f9a5533, inset 0 -3px 0 #0000000a; }
.tw-side.flash { animation: twFlash .9s ease; }
@keyframes twFlash { 0%, 100% { background: linear-gradient(#fffaf0, #f8eed8); } 30% { background: linear-gradient(#fff3c4, #f6dd92); } }

.tw-side > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.tw-side > header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #f3e6c6; border: 2px solid #e2cc98; }
.tw-side.me > header img { border-color: #8cc0c0; background: #dcefec; }
.tw-side > header div { display: grid; min-width: 0; }
.tw-side > header b { font: 700 15px/1.25 var(--font-head, inherit); color: #3e2c16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-side > header small { font-size: 13px; color: #7a6548; }
.tw-st { padding: 2px 9px; border-radius: 999px; font: 600 13px/1.6 var(--font-head, inherit); white-space: nowrap; color: #7a6548; background: #f3e8cf; border: 1px solid #e6d4a8; }
.s-lock .tw-st { color: #fff; background: #2f6f73; border-color: #2f6f73; }
.them.s-lock .tw-st { color: #4a3008; background: linear-gradient(#f2c14e, #d99a26); border-color: #d9a83a; }
.s-ok .tw-st { color: #fff; background: #3f9a55; border-color: #3f9a55; }

.tw-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tw-slot, .tw-bag-i { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 44px; padding: 0; border-radius: 10px;
  border: 2px solid #d8c49a; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); font-size: 24px; cursor: pointer; color: inherit; }
.tw-slot.empty { border-style: dashed; border-color: #e6d6b0; background: #fbf5e6; cursor: default; }
.tw-slot .ic3d, .tw-bag-i .ic3d { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .22)); }
:is(.tw-slot, .tw-bag-i).r-uncommon { border-color: #9fd08f; background: radial-gradient(circle at 50% 40%, #fbfff4, #dcefcf); }
:is(.tw-slot, .tw-bag-i):is(.r-good, .r-rare) { border-color: #8fbdf0; background: radial-gradient(circle at 50% 40%, #f6fbff, #d3e5f8); }
:is(.tw-slot, .tw-bag-i).r-epic { border-color: #c29af0; background: radial-gradient(circle at 50% 40%, #fbf6ff, #e6d6f8); }
:is(.tw-slot, .tw-bag-i).r-legend { border-color: #e8b64a; background: radial-gradient(circle at 50% 40%, #fffbea, #f6e0a8); }
.tw-side.me .tw-slot[data-out]:hover { outline: 2px solid #c0392b55; outline-offset: 1px; }
.tw-q, .tw-r, .tw-sig { position: absolute; font: 700 13px/1 var(--font-head, inherit); pointer-events: none; }
.tw-q { right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 6px; color: #fff; background: #3e2c16cc; }
.tw-r { left: 3px; top: 3px; padding: 1px 4px; border-radius: 6px; color: #4a3008; background: linear-gradient(#f7d77a, #e8b64a); }
.tw-sig { right: 3px; top: 3px; font-size: 13px; color: #9a4ae8; text-shadow: 0 0 2px #fff; }

.tw-gold { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border-radius: 10px; border: 1.5px solid #e2cc98; background: #fffdf6; }
.tw-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff3c0, #e8b64a 58%, #b8841c); box-shadow: inset 0 -2px 0 #9a6a1044; }
.tw-gold input { min-width: 0; width: 100%; border: 0; background: transparent; font: 700 17px/1 var(--font-head, inherit); color: #6b4a14; text-align: right; outline: none; }
.tw-gold input:disabled { color: #9a8a6a; }
.tw-gold b { font: 700 17px/1 var(--font-head, inherit); color: #6b4a14; text-align: right; font-variant-numeric: tabular-nums; }
.tw-gold small { font-size: 13px; color: #7a6548; }
.tw-side.me .tw-gold:focus-within { border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7322; }

/* ── คำเตือน ─────────────────────────────────────────────── */
.tw-warn { display: grid; gap: 5px; }
.tw-warn p { margin: 0; padding: 7px 11px 7px 34px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; position: relative; background: #fbf3e0; border: 1px solid #efe1bf; color: #4a3a26; }
.tw-warn p::before { position: absolute; left: 10px; top: 6px; font-size: 15px; }
.tw-warn .w-free { background: #fdecea; border-color: #f2c4bd; color: #8a2a1e; } .tw-warn .w-free::before { content: '⚠️'; }
.tw-warn .w-gold::before { content: '🪙'; }
.tw-warn .w-eye { background: #f3ecfd; border-color: #dccbf4; color: #4a2e78; } .tw-warn .w-eye::before { content: '🔍'; }

/* ── กระเป๋า ─────────────────────────────────────────────── */
.tw-bagbox { display: grid; gap: 7px; padding: 10px; border-radius: 14px; background: #fbf5e6; border: 1px solid #efe1bf; }
.tw-bag-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tw-bag-h b { font: 700 14px/1.3 var(--font-head, inherit); color: #6b4a14; }
.tw-bag-h small { font-size: 13px; color: #7a6548; }
.tw-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.tw-bag-i.used { opacity: .55; }
.tw-bag-i.pick { border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333; }
.tw-bag-i:disabled { cursor: default; opacity: .4; }
.tw-empty { margin: 0; font-size: 13.5px; color: #7a6548; }
.tw-qty { display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px 64px 44px auto auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #fffdf6; border: 1.5px solid #a9cfcf; }
.tw-qty-ic { display: grid; place-items: center; font-size: 22px; } .tw-qty-ic .ic3d { width: 30px; height: 30px; object-fit: contain; }
.tw-qty b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-qty input { min-width: 0; height: 40px; border-radius: 8px; border: 1px solid #e2cc98; text-align: center; font: 700 15px var(--font-head, inherit); color: #3e2c16; background: #fff; }
.tw-qty button { min-height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid #e2cc98; background: #f5e8c8; font: 600 13.5px var(--font-head, inherit); color: #5a4630; cursor: pointer; }
.tw-qty button.main { background: #2f6f73; border-color: #2f6f73; color: #fff; }

/* ── ท้ายหน้าต่าง ────────────────────────────────────────── */
.tw-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; width: 100%; }
.tw-foot button { min-height: 44px; padding: 0 16px; border-radius: 11px; font: 700 14px var(--font-head, inherit); cursor: pointer; border: 1.5px solid #e2cc98; background: #fbf3e0; color: #5a4630; }
.tw-foot .tw-cancel { color: #8a2a1e; }
.tw-foot .tw-lock.on { background: #2f6f73; border-color: #2f6f73; color: #fff; }
.tw-foot .tw-go { background: linear-gradient(#5cb86a, #3f9a55); border-color: #3a8a4c; color: #fff; box-shadow: inset 0 -3px 0 #00000022; }
.tw-foot .tw-go:disabled { background: #e9dfc6; border-color: #dccb9e; color: #8a7a5a; box-shadow: none; cursor: default; }

/* ── สำเร็จ ──────────────────────────────────────────────── */
.tw-done { display: grid; justify-items: center; gap: 6px; padding: 26px 12px 20px; text-align: center; animation: twPop .35s cubic-bezier(.2, 1.4, .4, 1); }
.tw-done-ic { width: 72px; height: 72px; display: grid; place-items: center; font-size: 40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fffbea, #f6e0a8); border: 2px solid #e8b64a; box-shadow: 0 0 0 6px #e8b64a22; }
.tw-done b { font: 700 20px/1.3 var(--font-head, inherit); color: #2f6f73; }
.tw-done p { margin: 0; font-size: 14px; color: #4a3a26; max-width: 420px; }
@keyframes twPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── คำขอแลก (การ์ดลอยเหนือแถบลัด) ───────────────────────── */
#trade-invite { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 118px; z-index: 60;   /* ไม่ใช้ translateX — twPop เขียนทับ transform แล้วการ์ดเยื้องขวาทับเมนู */ display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: min(460px, calc(100vw - 24px));
  padding: 10px 12px 14px; border-radius: 16px; border: 2px solid #e8b64a; background: linear-gradient(#fffaf0, #f8eed8);
  box-shadow: 0 10px 26px rgba(60, 40, 10, .22); color: #3e2c16; overflow: hidden; animation: twPop .3s cubic-bezier(.2, 1.4, .4, 1); }
#trade-invite img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #f3e6c6; border: 2px solid #e2cc98; }
#trade-invite .ti-t { display: grid; min-width: 0; }
#trade-invite .ti-t b { font: 700 15px/1.3 var(--font-head, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trade-invite .ti-t small { font-size: 13px; color: #7a6548; }
#trade-invite button { min-height: 44px; padding: 0 14px; border-radius: 11px; font: 700 14px var(--font-head, inherit); cursor: pointer; border: 1.5px solid #e2cc98; background: #fbf3e0; color: #5a4630; }
#trade-invite button.main { background: #2f6f73; border-color: #2f6f73; color: #fff; }
#trade-invite .ti-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #e8b64a, #2f6f73); transform-origin: left; animation: tiBar linear forwards; }
@keyframes tiBar { to { transform: scaleX(0); } }

/* กรอบเป้าหมาย: ปุ่มแลกของต่อท้ายปุ่มชวนปาร์ตี้ */
#target #t-info .t-trade { margin-left: 4px; background: #2f6f73; color: #fff; }

/* ── มือถือ: แผ่นซ้อนบน-ล่าง · ช่อง 5 ต่อแถวยังพอ · ท้ายหน้าต่างปุ่มยืนยันเต็มแถว ── */
@media (max-width: 640px) {
  .tw-sides { grid-template-columns: minmax(0, 1fr); }
  .tw-swap { justify-self: center; transform: rotate(90deg); }
  .tw-foot { grid-template-columns: 1fr 1fr; }
  .tw-foot .tw-go { grid-column: 1 / -1; }
  .tw-qty { grid-template-columns: 30px minmax(0, 1fr) 44px 56px 44px; }
  .tw-qty [data-q="max"], .tw-qty [data-put] { grid-column: span 2; }
  .tw-qty [data-put] { grid-column: 3 / -1; }
  #trade-invite { bottom: 96px; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr); }
  #trade-invite .ti-t { grid-column: 2 / 4; }
  #trade-invite button { grid-row: 2; }
  #trade-invite .ti-no { grid-column: 1 / 3; } #trade-invite .ti-ok { grid-column: 3 / 4; }
}
html.touch-ui.land .tw-bag { max-height: 110px; }
html.touch-ui.land .tw-sides { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }

/* มือถือ: กรอบเป้าหมาย + ปุ่ม "เปลี่ยนเป้า" ลอยทับหัวหน้าต่างแลกของ — ซ่อนระหว่างเปิดหน้าต่างนี้ */
html.touch-ui body:has(#windows .win[data-win="trade"]:not([hidden])) :is(#target, #tgt-switch) { visibility: hidden; }
@media (max-width: 640px) { body:has(#windows .win[data-win="trade"]:not([hidden])) :is(#target, #tgt-switch) { visibility: hidden; } }