/* หน้าต่างแลก/คราฟ — ดู craft-window.js · โทนเดียวกับโต๊ะตีบวก (ui-refine.css) แต่สองคอลัมน์
   ร้านแลกรางวัล (.cw.token) ใช้ทองเทศกาล · ช่างคราฟใช้ไม้อุ่น */
#windows .win[data-win="craft"] { width: min(94vw, 760px); max-height: min(90vh, 640px); }
html[data-skin="wood"] body .win[data-win="craft"] > .body { max-height: none; }
#windows .win[data-win="craft"] > .body { max-height: none; overflow: auto; padding: 0; }

.cw { display: grid; gap: 8px; padding: 2px; position: relative; }

.cw-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(100deg, #f7edd6, #fdf6e6 42%, #f1e2c4);
  border: 1px solid #e0cda0;
}
.cw.token .cw-head { background: linear-gradient(100deg, #fff1c8, #fff9e6 45%, #ffe7a8); border-color: #e8b64a; }
.cw-title b { display: block; font: 700 19px/1.15 var(--font-head); color: #6b4510; }
.cw-title span { font-size: 11.5px; color: #9a8258; letter-spacing: .06em; }
.cw-say { justify-self: start; padding: 7px 11px; border-radius: 10px; background: #fffdf6; border: 1px solid #e0d2ab; font-size: 12.5px; line-height: 1.4; color: #5b4524; }
.cw-npc { width: 76px; height: 76px; object-fit: contain; margin: -12px 0 -12px; filter: drop-shadow(0 2px 4px #8a5a1a44); }   /* Poppy/Tobin (assets/ui/npc) */
.cw-bal { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #e8b64a; }
.cw-bal b { font: 700 17px/1 var(--font-head); color: #8a5a12; }
.cw-bal span:last-child { font-size: 11px; color: #9a8258; }

.cw-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-tabs button {
  padding: 5px 12px; border-radius: 999px; border: 1px solid #d8c294; background: #fbf4e2;
  font: 700 12.5px/1.2 inherit; color: #6b5530; cursor: pointer;
}
.cw-tabs button.on { background: #2f6f73; border-color: #2f6f73; color: #fff; }

.cw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; min-height: 300px; }
.cw-list { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow: auto; padding-right: 2px; }
.cw-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left;
  padding: 5px 8px; border-radius: 9px; border: 1px solid #e3d4ae; background: #fffaf0; cursor: pointer;
}
.cw-item.on { border-color: #2f6f73; box-shadow: 0 0 0 2px #2f6f7333; background: #f3faf8; }
.cw-item.lock { opacity: .55; }
.cw-tx b { display: block; font: 700 13px/1.25 inherit; color: #3b3320; }
.cw-tx span { font-size: 11.5px; color: #8a7650; }
.cw-dot { width: 9px; height: 9px; border-radius: 50%; background: #5cbf6a; box-shadow: 0 0 0 2px #fff; }
.cw-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #f3e9cf; font-size: 20px; overflow: hidden; }
.cw-ic.sm { width: 26px; height: 26px; font-size: 14px; border-radius: 6px; }
.cw-ic img { width: 100%; height: 100%; object-fit: contain; }

.cw-detail { padding: 10px 12px; border-radius: 12px; border: 1px solid #e3d4ae; background: #fffdf7; display: flex; flex-direction: column; gap: 6px; }
.cw-big { width: 96px; height: 96px; align-self: center; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff8de, #f1e2bd); font-size: 42px; overflow: hidden; }
.cw-big img { width: 100%; height: 100%; object-fit: contain; }
.cw-big-nm { text-align: center; font: 700 16px/1.2 var(--font-head); color: #3b3320; }
.cw-big-nm small { font-size: 13px; color: #8a7650; }
.cw-kind { text-align: center; font-size: 11.5px; color: #8a7650; }
.cw-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cw-stats span { padding: 2px 8px; border-radius: 999px; background: #eef4ef; border: 1px solid #b9d6c0; font: 700 11.5px/1.3 inherit; color: #2c5a3c; }
.cw-warn { margin: 0; padding: 5px 8px; border-radius: 7px; background: #fff4e0; font-size: 11.5px; color: #8a5a1a; }
.cw-desc { margin: 0; font-size: 12px; line-height: 1.45; color: #5b4f38; }
.cw-sub { margin-top: 4px; font: 700 12px/1 inherit; color: #6b5530; }
.cw-mat { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 7px; background: #f6fbf4; }
.cw-mat.lack { background: #fdf0ec; }
.cw-mat.lack b { color: #c8423a; }
.cw-mat-nm { font-size: 12.5px; color: #3b3320; }
.cw-mat b { font: 700 12.5px/1 inherit; color: #2c6b3c; }
.cw-coin { width: 18px; height: 18px; margin: 0 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e8b64a 60%, #a8781a); }
.cw-n { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #6b5530; }
.cw-n button { min-width: 30px; height: 28px; border-radius: 7px; border: 1px solid #d8c294; background: #fbf4e2; font-weight: 700; cursor: pointer; }
.cw-n button[data-n="max"] { padding: 0 8px; }
.cw-n b { min-width: 22px; text-align: center; font: 700 15px/1 var(--font-head); }
.cw-go {
  margin-top: auto; padding: 10px 12px; border-radius: 10px; border: 1px solid #1f5558;
  background: linear-gradient(#3f8a8e, #2f6f73); color: #fff; font: 700 14px/1.2 inherit; cursor: pointer;
}
.cw.token .cw-go { border-color: #a8781a; background: linear-gradient(#f3cf6a, #e0a93a); color: #4a300a; }
.cw-go:disabled { filter: grayscale(.7); opacity: .6; cursor: default; }
.cw-foot { font-size: 11.5px; color: #8a7650; padding: 0 4px; }
.cw-empty { padding: 20px 8px; text-align: center; color: #9a8a6a; font-size: 12.5px; }
.cw-flash {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 12px 20px; border-radius: 12px;
  background: #fffdf2; border: 2px solid #e8b64a; box-shadow: 0 6px 20px #0003; font-size: 15px; color: #3b3320;
  animation: cwPop .25s ease-out;
}
@keyframes cwPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* มือถือแนวตั้ง: รายการบน รายละเอียดล่าง · หัวยุบเหลือชื่อ + ยอดเหรียญ */
@media (max-width: 640px) {
  .cw-head { grid-template-columns: minmax(0, 1fr) auto; }
  .cw-say { display: none; }
  .cw-npc { width: 52px; height: 52px; }
  .cw-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cw-cols { grid-template-columns: 1fr; }
  .cw-list { max-height: 200px; }
}