/* ผู้ดูแลเมือง (storage-window.js) — พักฟื้น + คลังเก็บของ · กระดาษครีม ขอบทอง ปุ่มทอง/เขียวน้ำเงิน ชุดเดียวกับการ์ดไอเทม
   จอกว้าง: [กระเป๋า] [ฝาก→ ←ถอน] [คลัง] · จอสัมผัส/แคบ (.stw-one): ทีละฝั่ง + แผ่นเลือกจำนวน — ไม่ย่อหน้าต่างคอมลงมือถือ */
#windows .win[data-win="storage"] { box-sizing: border-box; width: clamp(0px, 72vw, 1100px); min-width: min(860px, 96vw); height: min(86vh, 760px); max-height: none; display: flex; flex-direction: column; }
#windows .win[data-win="storage"] > .body { padding: 10px 12px; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; max-height: none; }
html[data-skin="wood"] body .win[data-win="storage"] > .body { max-height: none; }
#windows .win[data-win="storage"] > header span small { margin-left: 8px; font-size: 12px; opacity: .8; font-weight: 400; }
#windows .win[data-win="storage"] > .foot { display: flex; align-items: center; gap: 10px; }
#windows .win[data-win="storage"] > .foot .small { flex: 1; }

/* หัว NPC + บริการ */
.stw-top { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.stw-face { width: 64px; height: 64px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .25)); }
.stw-who { flex: none; }
.stw-who b { display: block; font-size: 17px; color: #4a3520; }
.stw-who small { color: #7a6548; font-size: 13px; }
.stw-say { margin: 0; flex: 1; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #e3d3a8; font-size: 13.5px; color: #4a3520; line-height: 1.4; }
.stw-svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stw-svc { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; text-align: left; font: inherit; color: #4a3520; cursor: pointer; border-radius: 14px; border: 1.5px solid #d8c49a; background: linear-gradient(#fffaf0, #f6ebd0); }
.stw-svc .si { font-size: 24px; }
.stw-svc b { display: block; font-size: 15px; }
.stw-svc small { display: block; font-size: 12px; color: #7a6548; }
.stw-svc.on { background: linear-gradient(#3b8186, #2f6f73); border-color: #e8b64a; color: #fff; box-shadow: 0 0 0 1px #e8b64a inset; }
.stw-svc.on small { color: #d7efec; }

/* แผงสองฝั่ง */
.stw-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); gap: 10px; }
.stw-pane { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 14px; background: #fbf4e2; border: 1.5px solid #e6d3a6; }
.stw-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stw-ph b { font-size: 16px; color: #4a3520; }
.stw-cap { font-size: 13px; color: #6b5a38; font-weight: 700; }
.stw-cap.near { color: #b8741a; }
.stw-cap.full { color: #b3402a; }
.stw-filters { display: flex; flex-direction: column; gap: 6px; }
.stw-search { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid #d8c49a; }
.stw-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: #3b2a14; }
.stw-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.stw-chips button { flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #d8c49a; background: #fffaf0; font: inherit; font-size: 13px; color: #4a3520; cursor: pointer; }
.stw-chips button.on { background: #2f6f73; border-color: #2f6f73; color: #fff; font-weight: 700; }
.stw-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); grid-auto-rows: min-content; gap: 7px; padding: 8px; border-radius: 12px; background: #f3e8d0; border: 1px solid #e6d3a6; align-content: start; }
.stw-grid .slot { position: relative; width: auto; height: auto; aspect-ratio: 1; min-width: 0; padding: 0; display: grid; place-items: center; font: inherit; font-size: 24px; cursor: pointer; }
.stw-grid .slot .ic3d { width: 76%; height: 76%; }
.stw-grid .slot .qty { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 800; color: #3b2a14; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.stw-grid .slot .key { position: absolute; left: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: #2f6f73; text-shadow: 0 0 3px #fff; }
.stw-grid .slot .eq { position: absolute; top: 1px; right: 3px; font-size: 10px; font-weight: 800; color: #b3402a; }
.stw-grid .slot .chk { position: absolute; top: 1px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #2f8a3a; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.stw-grid .slot.sel { border: 2px solid #2f6f73; background: radial-gradient(circle at 50% 40%, #f3fbf9, #cfe8e4); box-shadow: 0 0 0 2px #2f6f7355; }
.stw-grid .slot:hover { filter: brightness(1.04); }
.stw-grid .slot.ghost { border: 1.5px dashed #e0cfa3; background: transparent; box-shadow: none; pointer-events: none; }
.stw-grid .slot.flash { animation: stw-pop .35s ease-out; }
@keyframes stw-pop { 0% { transform: scale(.88); box-shadow: 0 0 0 0 #e8b64acc; } 100% { transform: scale(1); box-shadow: 0 0 0 8px #e8b64a00; } }
.stw-pf { display: flex; justify-content: space-between; font-size: 12.5px; color: #6b5a38; }
.stw-wt.l1, .stw-wt.l2 { color: #b8741a; font-weight: 700; }
.stw-empty { text-align: center; padding: 4px 6px; color: #6b5a38; }
.stw-empty img { width: 56px; height: 56px; object-fit: contain; opacity: .9; }
.stw-empty b { display: block; margin-top: 2px; color: #4a3520; }
.stw-empty p { margin: 2px 0 0; font-size: 13px; }
.stw-none { margin: 0; text-align: center; font-size: 13px; color: #6b5a38; }

/* ปุ่มกลาง ฝาก → / ← ถอน */
.stw-ctr { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.stw-ctr button, .stw-act button, .stq-act button { min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1.5px solid #d8c49a; background: linear-gradient(#fffaf0, #f6ebd0); font: inherit; font-weight: 700; color: #4a3520; cursor: pointer; }
.stw-ctr button.main, .stw-act button.main, .stq-act button.main { border-color: #b88a1e; background: linear-gradient(#f4c85c, #e8b64a); color: #3b2a08; }
.stw-ctr button.sm { min-height: 34px; font-size: 12.5px; font-weight: 600; }
.stw-ctr button[disabled], .stw-act button[disabled], .stq-act button[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.stw-ctr button:not([disabled]):active, .stw-act button:active, .stq-act button:active { transform: translateY(1px); }
.stw-ctr button:not(.main):not(.sm):not([disabled]) { background: linear-gradient(#3b8186, #2f6f73); border-color: #e8b64a; color: #fff; }

/* แถบล่าง: ของที่เลือก + จัดเรียง */
.stw-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid #e3d3a8; min-height: 48px; }
.stw-sel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.stw-selic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.stw-selic .ic3d { width: 32px; height: 32px; }
.stw-seltx b { display: block; font-size: 14px; color: #3b2a14; }
.stw-seltx small { display: block; font-size: 12.5px; color: #6b5a38; }
.stw-seltx .bad, .stq-why { color: #b3402a; font-style: normal; }
.stw-hint { font-size: 13px; color: #6b5a38; }
.stw-sort { font-size: 13px; color: #6b5a38; display: flex; align-items: center; gap: 6px; }
.stw-sort select { min-height: 34px; border-radius: 10px; border: 1px solid #d8c49a; background: #fffaf0; font: inherit; padding: 0 8px; color: #3b2a14; }

/* ฝากทั้งหมด: ยืนยันบนหน้า (ไม่ใช้ confirm()) */
.stw-bulk { padding: 8px 12px; border-radius: 12px; background: #fff4de; border: 1.5px solid #e8b64a; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stw-bulk p { margin: 0; flex: 1; min-width: 200px; font-size: 13.5px; color: #4a3520; }
.stw-bulk .warn { color: #b8741a; font-style: normal; }
.stw-act { display: flex; gap: 8px; }
.stw-act button { min-width: 96px; }

/* พักฟื้น */
.stw-heal { flex: 1; display: grid; place-content: center; text-align: center; gap: 8px; padding: 16px; border-radius: 14px; background: #fbf4e2; border: 1.5px solid #e6d3a6; }
.stw-heal h4 { margin: 0; font-size: 18px; color: #4a3520; }
.stw-heal p { margin: 0; color: #6b5a38; }
.stw-heal .stw-act { justify-content: center; margin-top: 6px; }
.stw-heal small { color: #8a7a58; }

/* ทีละฝั่ง (จอสัมผัส/แคบ) */
.stw-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stw-seg button { min-height: 44px; border-radius: 12px; border: 1.5px solid #d8c49a; background: #fffaf0; font: inherit; font-weight: 700; color: #4a3520; cursor: pointer; }
.stw-seg button small { font-weight: 600; opacity: .85; margin-left: 4px; }
.stw-seg button.on { background: #2f6f73; border-color: #e8b64a; color: #fff; }
.stw-one .stw-panes { grid-template-columns: minmax(0, 1fr); }
.stw-one .stw-pane.off { display: none; }
.stw-one .stw-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
.stw-one .stw-pf .stw-share { display: none; }

/* แผ่นเลือกจำนวน */
.stw-sheet { width: min(380px, calc(100vw - 24px)); padding: 14px; border: 2px solid #e8b64a; border-radius: 16px; background: #fbf4e2; color: #3b2a14; }
.stw-sheet::backdrop { background: rgba(60, 40, 10, .35); }
.stq-head { display: flex; gap: 10px; align-items: center; }
.stq-ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid #e3d3a8; }
.stq-ic .ic3d { width: 38px; height: 38px; }
.stq-head b { display: block; font-size: 16px; }
.stq-head small { color: #6b5a38; font-size: 13px; }
.stq-row { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; margin: 12px 0 6px; }
.stq-row button, .stq-row input { min-height: 48px; border-radius: 12px; border: 1.5px solid #d8c49a; background: #fff; font: inherit; font-size: 20px; font-weight: 700; text-align: center; color: #3b2a14; }
.stq-row button { cursor: pointer; }
.stq-quick { display: flex; gap: 8px; }
.stq-quick button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid #d8c49a; background: #fffaf0; font: inherit; font-weight: 700; cursor: pointer; }
.stq-space { margin: 10px 0 0; font-size: 13px; color: #6b5a38; }
.stq-why { margin: 10px 0 0; font-weight: 700; }
.stq-act { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 12px; }
.stq-act button { min-height: 50px; }

/* จอสัมผัสแนวนอน: เต็มจอ ชิดขอบปลอดภัย · แผ่นเลือกจำนวนชิดขวาเต็มความสูง (เห็นรายการทางซ้าย) */
@media (max-width: 899px) { html.touch-ui.land #windows .win[data-win="storage"] { left: max(6px, env(safe-area-inset-left)) !important; right: max(6px, env(safe-area-inset-right)); top: 6px !important; width: auto !important; min-width: 0; height: calc(100dvh - 12px) !important; } }
html.touch-ui.land #windows .win[data-win="storage"] > .body { padding: 6px 10px; gap: 6px; }
html.touch-ui.land .stw-say, html.touch-ui.land .stw-who small { display: none; }
html.touch-ui.land .stw-face { width: 40px; height: 40px; }
html.touch-ui.land .stw-top { gap: 8px; padding: 0; }
html.touch-ui.land .stw-svcs { gap: 8px; }
html.touch-ui.land .stw-svc { min-height: 40px; padding: 2px 10px; }
html.touch-ui.land .stw-svc small { display: none; }
html.touch-ui.land .stw-seg button { min-height: 40px; }
html.touch-ui.land .stw-pane { padding: 6px 8px; gap: 4px; }
html.touch-ui.land .stw-filters { flex-direction: row; align-items: center; }
html.touch-ui.land .stw-search { flex: 1; min-width: 0; min-height: 34px; }
html.touch-ui.land .stw-chips { flex: 1.4; min-width: 0; }
html.touch-ui.land .stw-pf { display: none; }
html.touch-ui.land .stw-bar { min-height: 0; padding: 4px 8px; }
html.touch-ui.land .stw-hint { font-size: 12px; }
html.touch-ui .stw-sheet { position: fixed; margin: 0; inset: 6px 6px 6px auto; width: min(340px, 46vw); height: calc(100dvh - 12px); max-height: none; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
html.touch-ui .stw-sheet:not([open]) { display: none; }

/* จอเตี้ย (มือถือแนวนอน ~360–390px): แถวเดียว [กระเป๋า|คลัง] + พักฟื้น · ไม่มีหัว NPC/แถบล่าง/ท้ายหน้าต่าง — ตารางไอเทมได้พื้นที่มากสุด */
.stw-row { display: flex; gap: 8px; }
.stw-row .stw-seg { flex: 1; }
.stw-heal-btn { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #d8c49a; background: linear-gradient(#fffaf0, #f6ebd0); font: inherit; font-weight: 700; color: #4a3520; cursor: pointer; }
.stw-sort-sel { min-height: 34px; max-width: 110px; border-radius: 10px; border: 1px solid #d8c49a; background: #fffaf0; font: inherit; font-size: 13px; padding: 0 6px; color: #3b2a14; }
.stw-one .stw-ph .stw-cap:not(.near):not(.full), .stw-one .stw-ph b { display: none; }
.stw-one .stw-ph { justify-content: flex-end; }
.stw-one .stw-ph:not(:has(.near, .full)) { display: none; }
html.touch-ui.land #windows .win[data-win="storage"] > .foot { display: none !important; }
html.touch-ui .stw-pane { padding: 6px 8px; }

/* iPad แนวนอน (กว้าง ≥ 900): หน้าต่างลอยกลางจอเหมือนคอม แต่ปุ่ม/ช่องใหญ่พอแตะ */
@media (min-width: 900px) { html.touch-ui #windows .win[data-win="storage"] { min-width: min(860px, 96vw); } html.touch-ui .stw-ctr button { min-height: 52px; } html.touch-ui .stw-chips button { min-height: 38px; }
  html.touch-ui.land .stw-filters { flex-direction: column; align-items: stretch; } html.touch-ui.land .stw-search { flex: none; } html.touch-ui.land .stw-chips { flex: none; }
  html.touch-ui.land .stw-say, html.touch-ui.land .stw-who small { display: block; } html.touch-ui.land .stw-face { width: 64px; height: 64px; } html.touch-ui.land .stw-pf { display: flex; } html.touch-ui.land #windows .win[data-win="storage"] > .foot { display: flex !important; } }