/* 信箱、倉庫、交易所的視窗(public/mailbox.js、warehouse.js、exchange.js 建立內容)
   使用者 2026-10-26:「信件的介面顯示不要這麼誇大」:標題列、輸入框、按鈕、字都用小字(和組隊視窗一樣 12px),
   清單用分頁(◀ 1/3 ▶),不出現捲軸,也不會有被切掉的欄位。 */
.sw { background: #120e08ee; border: 2px solid #8b7646; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 6px 20px #000a; color: #e8dcc0; font-size: 12px; line-height: 1.35; text-shadow: 1px 1px 0 #000; image-rendering: auto; box-sizing: border-box; }
.sw.on { display: flex !important; flex-direction: column; }
.sw * { box-sizing: border-box; }
.sw .sw-hd { position: relative; padding: 4px 28px 4px 8px; background: linear-gradient(#3a2c14, #24190a); border-bottom: 1px solid #8b7646; color: #f0d58a; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw .sw-hd small { color: #b9a77c; font-weight: normal; margin-left: 6px; }
.sw .sw-x { position: absolute; right: 2px; top: 1px; width: 20px; height: 20px; line-height: 18px; text-align: center; color: #f0d58a; cursor: pointer; }
.sw .sw-x:hover { color: #fff; }
.sw .sw-tabs { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid #3d3220; }
.sw .sw-tabs span { padding: 2px 8px 3px; color: #a89668; cursor: pointer; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; white-space: nowrap; }
.sw .sw-tabs span.on { color: #f6e2a4; background: #2a2114; border-color: #5c4d2c; }
.sw .sw-tabs span b { color: #ff8a7a; font-weight: normal; }
.sw .sw-body { padding: 5px 6px; }
.sw .sw-ft { display: flex; gap: 4px; align-items: center; padding: 4px 6px 5px; border-top: 1px solid #3d3220; }
.sw .sw-ft .sp { flex: 1; }
.sw .muted { color: #8f8162; } .sw .gold { color: #ffd24a; } .sw .good { color: #7dff9a; } .sw .bad { color: #ff9a8a; }
.sw .empty { color: #8f8162; text-align: center; padding: 14px 0; }
.sw button { font: inherit; font-size: 12px; line-height: 16px; padding: 1px 7px; background: linear-gradient(#3a2c14, #24190a); color: #f0d58a; border: 1px solid #8b7646; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.sw button:hover { filter: brightness(1.25); }
.sw button:disabled { opacity: .45; cursor: default; filter: none; }
.sw button.ok { background: linear-gradient(#f0d58a, #b8933f); color: #120e08; text-shadow: none; font-weight: bold; }
.sw input, .sw select { font: inherit; font-size: 12px; height: 20px; padding: 1px 4px; background: #0b0905; color: #eadfc4; border: 1px solid #5c4d2e; border-radius: 2px; min-width: 0; }
.sw input:focus, .sw select:focus { border-color: #c9a65a; outline: none; }
.sw .row { display: flex; gap: 4px; align-items: center; margin: 3px 0; }
.sw .row > input { flex: 1; }
.sw .pager { display: flex; gap: 4px; align-items: center; color: #b9a77c; }
.sw .pager button { padding: 0 5px; }
/* 道具格子(小):圖示 + 數量 + 強化值 */
.sw .ic { position: relative; width: 30px; height: 30px; flex: 0 0 30px; background: radial-gradient(#3a3a44, #26262c); border: 1px solid #55555f; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.sw .ic img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.sw .ic .nm { font-size: 9px; line-height: 10px; color: #c8b685; text-align: center; }
.sw .ic .n { position: absolute; right: 1px; bottom: 0; font-size: 10px; color: #fff; line-height: 11px; }
.sw .ic .en { position: absolute; left: 1px; top: 0; font-size: 10px; font-weight: bold; color: #7dff9a; line-height: 11px; }
.sw .ic.sel { border-color: #ffe27a; box-shadow: inset 0 0 0 1px #ffe27a88; }
.sw .ic.off { opacity: .35; cursor: not-allowed; }
.sw .ic.worn { border-color: #f0c040; }
.sw .grid { display: grid; grid-template-columns: repeat(8, 30px); gap: 3px; justify-content: center; min-height: 99px; align-content: start; }
.sw .ic.blank { cursor: default; background: #1a1a1f; border-color: #2c2c33; }

/* ---- 信箱 ---- */
#mailwin.sw { right: 8px; top: 48px; width: 286px; }
#mailwin .ml { min-height: 200px; }
#mailwin .mrow { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-bottom: 1px solid #2a2114; cursor: pointer; }
#mailwin .mrow:hover { background: #ffffff0d; }
#mailwin .mrow.open { background: #2a211488; }
#mailwin .mrow .dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
#mailwin .mrow.unread .dot { background: #ff5a4a; box-shadow: 0 0 3px #ff5a4a; }
#mailwin .mrow .mt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9a77c; }
#mailwin .mrow.unread .mt { color: #f6e2a4; font-weight: bold; }
#mailwin .mrow .att { flex: 0 0 auto; color: #ffd24a; font-size: 11px; }
#mailwin .mrow .att.done { color: #6f6650; }
#mailwin .mrow .md { flex: 0 0 auto; color: #8f8162; font-size: 11px; }
#mailwin .mdet { padding: 4px 6px 5px 15px; border-bottom: 1px solid #2a2114; background: #0c0a06; }
#mailwin .mdet .mb { color: #cbb98d; white-space: pre-wrap; word-break: break-all; margin-bottom: 3px; }
#mailwin .mdet .ma { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin: 3px 0; }
#mailwin .mdet .mf { display: flex; gap: 4px; justify-content: flex-end; }
#mailwin .code input { width: 100%; }
#mailwin .sel { display: flex; flex-direction: column; gap: 2px; min-height: 26px; max-height: none; }
#mailwin .sel .si { display: flex; align-items: center; gap: 4px; }
#mailwin .sel .si .ic { width: 22px; height: 22px; flex-basis: 22px; } #mailwin .sel .si .ic img { width: 20px; height: 20px; }
#mailwin .sel .si span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailwin .sel .si input { width: 64px; flex: 0 0 64px; }
#mailwin .sel .si a { color: #ff9a8a; cursor: pointer; padding: 0 3px; }
#mailwin .lbl { color: #b9a77c; flex: 0 0 auto; }
#mailwin .grid { grid-template-columns: repeat(8, 30px); }
/* 信箱按鈕上的紅點:未讀或還沒領的信有幾封(使用者 2026-10-26) */
#navrow button[data-nav="mail"] { position: relative; }
.mbadge { position: absolute; right: -5px; top: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #e0302a; color: #fff; font-size: 10px; line-height: 15px; font-weight: bold; text-align: center; font-style: normal; box-shadow: 0 0 0 1px #000, 0 0 4px #ff5a4a; pointer-events: none; text-shadow: none; }

/* ---- 倉庫 ---- */
#whwin.sw { right: 8px; top: 48px; width: 286px; }
#whwin .grid { grid-template-columns: repeat(8, 30px); min-height: 132px; }
#whwin .pick { min-height: 48px; padding: 4px 2px 0; border-top: 1px solid #2a2114; margin-top: 4px; }
#whwin .pick .nmline { display: flex; gap: 4px; align-items: center; }
#whwin .pick .nmline b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f6e2a4; font-weight: normal; }
#whwin .pick input { width: 80px; }
#whwin .hist { min-height: 170px; }
#whwin .hist div { display: flex; gap: 4px; padding: 2px 0; border-bottom: 1px solid #2a2114; white-space: nowrap; overflow: hidden; }
#whwin .hist div span:last-child { margin-left: auto; color: #8f8162; }

/* ---- 交易所 ---- */
#exwin.sw { left: 50%; top: 56px; margin-left: -280px; width: 560px; }
#exwin .cats { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
#exwin .cats span { padding: 1px 7px; border: 1px solid #5c4d2c; border-radius: 10px; color: #b9a77c; cursor: pointer; }
#exwin .cats span.on { color: #120e08; background: #f0d58a; border-color: #f0d58a; text-shadow: none; }
#exwin .search { display: flex; gap: 4px; margin-bottom: 4px; }
#exwin .search input { flex: 1; }
#exwin table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#exwin th { color: #8f8162; font-weight: normal; text-align: left; padding: 2px 3px; border-bottom: 1px solid #3d3220; white-space: nowrap; }
#exwin td { padding: 2px 3px; border-bottom: 1px solid #2a2114; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 34px; }
#exwin td.r, #exwin th.r { text-align: right; }
#exwin td .it { display: flex; gap: 5px; align-items: center; min-width: 0; }
#exwin td .it span { overflow: hidden; text-overflow: ellipsis; }
#exwin td .en { color: #7dff9a; }
#exwin .tbl { min-height: 300px; }
#exwin .st-sold { color: #7dff9a; } #exwin .st-expired, #exwin .st-cancelled { color: #8f8162; }
#exwin .sell { display: grid; grid-template-columns: 290px 1fr; gap: 8px; min-height: 300px; }
#exwin .sell .form { background: #0c0a06; border: 1px solid #3d3220; border-radius: 3px; padding: 6px; }
#exwin .sell .form .row > span:first-child { flex: 0 0 56px; color: #b9a77c; }
#exwin .sell .form .big { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#exwin .sell .form .big .ic { width: 36px; height: 36px; flex-basis: 36px; } #exwin .sell .form .big b { color: #f6e2a4; font-size: 13px; }
#exwin .sell .note { color: #8f8162; line-height: 1.5; margin-top: 6px; white-space: normal; }
#exwin .grid { grid-template-columns: repeat(8, 30px); min-height: 200px; }

body.mobile #mailwin.sw, body.mobile #whwin.sw { left: 4px !important; right: 4px !important; width: auto !important; top: 84px !important; }
body.mobile #exwin.sw { left: 4px !important; right: 4px; width: auto; margin-left: 0; top: 84px !important; }
body.mobile #exwin .sell { grid-template-columns: 1fr; }
body.mobile #exwin .hide-m { display: none; }