/* 吉倫（public/js/spellshop.js，站長 2026-10-30）：版面同萬物百貨商（supply.css 照抄、換成 #lmui-spellshop），後面加魔法書專用的 .ss-*。
   視窗外框、標題、.bd 捲動同其他 .lmui-ov（lmui.css）；魔法說明框 .sk-tip 同魔法視窗（lmui.css） */
#lmui-spellshop.sp .box { max-width: 480px; }
#lmui-spellshop .sp-gold { margin-left: 6px; font-size: 14px; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; }
#lmui-spellshop .sp-top { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 8px; border-bottom: 1px solid #4a3f30; }
#lmui-spellshop .sp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#lmui-spellshop .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-spellshop .sp-tabs button.on { background: #3a2c1a; color: #fde68a; border-color: #b7791f; }
#lmui-spellshop .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-spellshop .sp-q::placeholder { color: #7a6f5c; }
#lmui-spellshop .sp-q:focus { border-color: #b7791f; }
#lmui-spellshop .sp-none { padding: 24px 0; text-align: center; color: #94a3b8; }

/* 縮圖格：圖示＋名字＋價錢 */
#lmui-spellshop .sp-grid { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px 6px; padding-top: 4px; }
#lmui-spellshop .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-spellshop .sp-cell:active { filter: brightness(1.3); }
#lmui-spellshop .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-spellshop .sp-cic img { width: 36px; height: 36px; object-fit: contain; }
#lmui-spellshop .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-spellshop .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-spellshop .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-spellshop .sp-cp .gold-ic { width: 1.25em; height: 1.25em; }
#lmui-spellshop .sp-cp.short, #lmui-spellshop .sp-sub.short, #lmui-spellshop .sp-tot.short { color: #f87171; }
#lmui-spellshop .short .gold-ic { filter: grayscale(.4) brightness(.85); }

/* 點一格跳出的小視窗（手機從下面升起、矮的畫面置中） */
#lmui-spellshop .sp-pop { position: absolute; inset: 10px 22px 14px 14px; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
#lmui-spellshop .sp-pop[hidden] { display: none; }
#lmui-spellshop .sp-dim { position: absolute; inset: -10px -22px -14px -14px; background: rgba(0,0,0,.6); }
#lmui-spellshop .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-spellshop .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-spellshop .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-spellshop .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-spellshop button.sp-ic { cursor: pointer; }
#lmui-spellshop button.sp-ic:active { filter: brightness(1.35); }
#lmui-spellshop .sp-ic img { width: 34px; height: 34px; object-fit: contain; }
#lmui-spellshop .sp-hd { grid-area: hd; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding-right: 40px; }
#lmui-spellshop .sp-nm { min-width: 0; letter-spacing: .5px; font-size: 16px; color: #f5ecd8; overflow-wrap: anywhere; }
#lmui-spellshop .sp-n { font-size: 13px; font-weight: 700; color: #d6c7a6; }
#lmui-spellshop .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-spellshop .sp-sub small { margin-left: 2px; font-size: 12px; font-weight: 400; color: #9c8f78; }
#lmui-spellshop .sp-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#lmui-spellshop .sp-max { margin-right: auto; font-size: 13px; font-weight: 700; color: #86efac; white-space: nowrap; }
#lmui-spellshop .sp-max.no { color: #f87171; }
#lmui-spellshop .sp-tot { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: #d6c7a6; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lmui-spellshop .sp-tot:empty { display: none; }
#lmui-spellshop .sp-btns { display: flex; align-items: center; gap: 6px; }
#lmui-spellshop .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-spellshop .sp-qty:focus { border-color: #b7791f; }
#lmui-spellshop .sp-qty:disabled { opacity: .4; }
#lmui-spellshop .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-spellshop .sp-go:active { filter: brightness(1.25); }
#lmui-spellshop .sp-go:disabled { color: #6b6355; border-color: #3a332a; background: #1f1b16; cursor: default; filter: none; }
#lmui-spellshop .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-spellshop .sp-pmsg.bad { border-color: #7a3f3f; background: #251212; color: #fecaca; }

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

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

/* 魔法書格子：學得了＝綠框＋小綠點；學會了、學不了＝圖示變暗，左上角小牌子寫原因 */
#lmui-spellshop .ss-cell.can { border-color: #5f7d33; background: #191a0d; }
#lmui-spellshop .ss-cell.can::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,.8); }
#lmui-spellshop .ss-cell.off .sp-cic img, #lmui-spellshop .ss-cell.done .sp-cic img { opacity: .4; filter: grayscale(.6); }
#lmui-spellshop .ss-cell.off .sp-cnm, #lmui-spellshop .ss-cell.done .sp-cnm { color: #9c8f78; }
#lmui-spellshop .ss-tag { position: absolute; left: -6px; top: -7px; max-width: 64px; padding: 0 4px; border-radius: 4px; background: rgba(10,8,5,.92); border: 1px solid #7a3f3f;
  color: #fca5a5; font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lmui-spellshop .ss-cell.done .ss-tag { border-color: #3f6a4a; color: #a7f3d0; }
#lmui-spellshop .sp-cic img { border-radius: 4px; }

/* 小視窗：能不能學一行、魔法說明（同魔法視窗的說明框；名字上面已經有，不重複） */
#lmui-spellshop .sp-row { grid-template-areas: "ic hd" "ic sub" "st st" "tip tip" "ctl ctl" "msg msg"; }
#lmui-spellshop .ss-st { grid-area: st; margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-size: 15px; font-weight: 700; text-align: center; }
#lmui-spellshop .ss-st.ok { border: 1px solid #3f7a4a; background: #12251a; color: #bbf7d0; }
#lmui-spellshop .ss-st.done { border: 1px solid #4a4436; background: #1a1712; color: #c9bda4; }
#lmui-spellshop .ss-st.no { border: 1px solid #7a3f3f; background: #251212; color: #fecaca; }
#lmui-spellshop .ss-tip { grid-area: tip; margin-top: 8px; }
#lmui-spellshop .ss-tip .sk-tip { font-size: 14px; }
#lmui-spellshop .ss-tip .sk-tip > b { display: none; }
#lmui-spellshop .ss-tip .sk-tip em { font-size: 13px; }
@media (max-height: 500px) {
  #lmui-spellshop .ss-st { margin-top: 6px; padding: 4px 8px; font-size: 14px; }
  #lmui-spellshop .ss-tip { margin-top: 6px; }
  #lmui-spellshop .ss-tip .sk-tip { font-size: 13px; }
}

/* 分頁可能多到 10 個（全部、可學習、1～7 階、職業）：放不下一排就換行，每顆至少放得下三個字 */
#lmui-spellshop .sp-tabs { display: flex; flex-wrap: wrap; }
#lmui-spellshop .sp-tabs button { flex: 1 0 auto; min-width: 54px; padding-left: 4px; padding-right: 4px; }
/* 矮的畫面（手機橫放）：分頁一排、左右滑，格子才看得到兩排以上 */
@media (max-height: 500px) {
  #lmui-spellshop .sp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #lmui-spellshop .sp-tabs::-webkit-scrollbar { display: none; }
  #lmui-spellshop .sp-tabs button { flex: 1 0 auto; min-width: 48px; }
}