/* 主城補給商人（public/js/supply.js；伺服器第 141 項）：版面同製作工匠（craft.css 的縮圖格＋小視窗），尺寸、顏色照抄那份，前綴 .sp-*。
   視窗外框、標題、.bd 捲動同其他 .lmui-ov（lmui.css） */
#lmui-supply.sp .box { max-width: 480px; }
#lmui-supply .sp-gold { margin-left: 6px; font-size: 14px; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; }
#lmui-supply .sp-top { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 8px; border-bottom: 1px solid #4a3f30; }
#lmui-supply .sp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#lmui-supply .sp-tabs button { min-width: 0; padding: 9px 0; border: 1px solid #5a4630; border-radius: 6px; background: #17120c; color: #b9ad98;
  font: 700 16px/1.1 inherit; font-family: inherit; letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
#lmui-supply .sp-tabs button.on { background: #3a2c1a; color: #fde68a; border-color: #b7791f; }
#lmui-supply .sp-q { -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box; padding: 6px 10px; font: 16px/1.2 inherit; font-family: inherit;
  color: #f0e2bf; background: #0f0c09; border: 1px solid #4a3c29; border-radius: 6px; outline: none; }
#lmui-supply .sp-q::placeholder { color: #7a6f5c; }
#lmui-supply .sp-q:focus { border-color: #b7791f; }
#lmui-supply .sp-none { padding: 24px 0; text-align: center; color: #94a3b8; }

/* 縮圖格：圖示＋名字＋價錢 */
#lmui-supply .sp-grid { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px 6px; padding-top: 4px; }
#lmui-supply .sp-cell { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 3px 6px;
  border: 1px solid #3d3326; border-radius: 8px; background: #16110b; color: #d9cbb0; font-family: inherit; cursor: pointer; }
#lmui-supply .sp-cell:active { filter: brightness(1.3); }
#lmui-supply .sp-cic { position: relative; flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #0f0b08; border: 1px solid #4a3c29; border-radius: 6px; }
#lmui-supply .sp-cic img { width: 36px; height: 36px; object-fit: contain; }
#lmui-supply .sp-cn { position: absolute; right: -5px; bottom: -5px; padding: 0 3px; border-radius: 4px; background: rgba(10,8,5,.9); border: 1px solid #5a4630;
  color: #fde68a; font-size: 11px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
#lmui-supply .sp-cnm { width: 100%; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; color: #f5ecd8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#lmui-supply .sp-cp { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lmui-supply .sp-cp .gold-ic { width: 1.25em; height: 1.25em; }
#lmui-supply .sp-cp.short, #lmui-supply .sp-sub.short, #lmui-supply .sp-tot.short { color: #f87171; }
#lmui-supply .short .gold-ic { filter: grayscale(.4) brightness(.85); }

/* 點一格跳出的小視窗（手機從下面升起、矮的畫面置中） */
#lmui-supply .sp-pop { position: absolute; inset: 10px 22px 14px 14px; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
#lmui-supply .sp-pop[hidden] { display: none; }
#lmui-supply .sp-dim { position: absolute; inset: -10px -22px -14px -14px; background: rgba(0,0,0,.6); }
#lmui-supply .sp-card { position: relative; width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 12px;
  border: 1px solid #8a6a2a; border-radius: 10px; background: #15100a; box-shadow: 0 -4px 24px rgba(0,0,0,.7); }
#lmui-supply .sp-pclose { position: absolute; top: 6px; right: 6px; z-index: 1; width: 34px; height: 34px; padding: 0; border: 1px solid #5a4630; border-radius: 8px;
  background: #1f1810; color: #e7c977; font-size: 16px; line-height: 1; cursor: pointer; }
#lmui-supply .sp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic hd" "ic sub" "ctl ctl" "msg msg"; column-gap: 8px; row-gap: 2px; }
#lmui-supply .sp-ic { grid-area: ic; align-self: start; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: #0f0b08; border: 1px solid #4a3c29; border-radius: 6px; }
#lmui-supply button.sp-ic { cursor: pointer; }
#lmui-supply button.sp-ic:active { filter: brightness(1.35); }
#lmui-supply .sp-ic img { width: 34px; height: 34px; object-fit: contain; }
#lmui-supply .sp-hd { grid-area: hd; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding-right: 40px; }
#lmui-supply .sp-nm { min-width: 0; letter-spacing: .5px; font-size: 16px; color: #f5ecd8; overflow-wrap: anywhere; }
#lmui-supply .sp-n { font-size: 13px; font-weight: 700; color: #d6c7a6; }
#lmui-supply .sp-sub { grid-area: sub; display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; }
#lmui-supply .sp-sub small { margin-left: 2px; font-size: 12px; font-weight: 400; color: #9c8f78; }
#lmui-supply .sp-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#lmui-supply .sp-max { margin-right: auto; font-size: 13px; font-weight: 700; color: #86efac; white-space: nowrap; }
#lmui-supply .sp-max.no { color: #f87171; }
#lmui-supply .sp-tot { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: #d6c7a6; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lmui-supply .sp-tot:empty { display: none; }
#lmui-supply .sp-btns { display: flex; align-items: center; gap: 6px; }
#lmui-supply .sp-qty { width: 56px; padding: 8px 2px; font-size: 16px; text-align: center; color: #fff; background: #0f0c09; border: 1px solid #4a3c29; border-radius: 5px; outline: none; }
#lmui-supply .sp-qty:focus { border-color: #b7791f; }
#lmui-supply .sp-qty:disabled { opacity: .4; }
#lmui-supply .sp-go { padding: 10px 26px; font: 700 16px/1 inherit; font-family: inherit; color: #fde68a; border: 1px solid #a07a2c; border-radius: 6px;
  background: linear-gradient(180deg, #5c4320, #3a2a12); cursor: pointer; white-space: nowrap; }
#lmui-supply .sp-go:active { filter: brightness(1.25); }
#lmui-supply .sp-go:disabled { color: #6b6355; border-color: #3a332a; background: #1f1b16; cursor: default; filter: none; }
#lmui-supply .sp-pmsg { grid-area: msg; margin-top: 10px; padding: 6px 10px; border: 1px solid #3f7a4a; border-radius: 6px; background: #12251a; color: #bbf7d0;
  font-size: 15px; font-weight: 700; text-align: center; }
#lmui-supply .sp-pmsg.bad { border-color: #7a3f3f; background: #251212; color: #fecaca; }

/* 矮的畫面（手機橫放、電腦版面）：分頁、格子縮一點 */
@media (max-height: 500px) {
  #lmui-supply .sp-top { gap: 4px; padding-bottom: 6px; }
  #lmui-supply .sp-tabs { gap: 4px; }
  #lmui-supply .sp-tabs button { padding: 6px 0; font-size: 14px; letter-spacing: .04em; }
  #lmui-supply .sp-q { padding: 4px 8px; font-size: 13px; }
  #lmui-supply .sp-cell { padding: 6px 2px 4px; }
  #lmui-supply .sp-cic { width: 38px; height: 38px; }
  #lmui-supply .sp-cic img { width: 32px; height: 32px; }
  #lmui-supply .sp-cnm { font-size: 11px; }
  #lmui-supply .sp-pop { align-items: center; padding: 2px; }
  #lmui-supply .sp-card { padding: 8px 8px 10px; }
  #lmui-supply .sp-ctl { margin-top: 8px; }
  #lmui-supply .sp-go { padding: 8px 20px; font-size: 15px; }
}

/* supply8b（站長 2026-10-24「補給商人新增分頁 試煉道具」）：分頁 3 或 4 個都平分一排；四個字的「試煉道具」放得下 */
#lmui-supply .sp-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#lmui-supply .sp-tabs button { font-size: 15px; letter-spacing: 0; }
@media (max-height: 500px) { #lmui-supply .sp-tabs button { font-size: 13px; } }