/* 製作工匠（public/js/craft.js；站長 2026-10-23 改版「簡單明瞭好看」：類型分頁＋搜尋＋一個配方一張卡）。
   視窗外框、標題、.bd 捲動同其他 .lmui-ov（lmui.css）；舊版的 .cf-* 樣式還在 lmui.css，這裡全部用 .cr-* 不互相影響 */
#lmui-craft.cr .box { max-width: 480px; }
#lmui-craft .cr-top { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 8px; border-bottom: 1px solid #4a3f30; }
#lmui-craft .cr-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#lmui-craft .cr-tabs::-webkit-scrollbar { display: none; }
#lmui-craft .cr-tabs button { flex: 1 1 0; min-width: 0; padding: 7px 2px; border: 1px solid #5a4630; border-radius: 6px; background: #17120c; color: #b9ad98;
  font: 700 15px/1.1 inherit; font-family: inherit; white-space: nowrap; cursor: pointer; }
#lmui-craft .cr-tabs button.on { background: #3a2c1a; color: #fde68a; border-color: #b7791f; }
#lmui-craft .cr-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-craft .cr-q::placeholder { color: #7a6f5c; }
#lmui-craft .cr-q:focus { border-color: #b7791f; }
#lmui-craft .cr-msg { margin: 6px 10px 0; padding: 6px 10px; border: 1px solid #3f7a4a; border-radius: 6px; background: #12251a; color: #bbf7d0; font-size: 15px; font-weight: 700; text-align: center; }
#lmui-craft .cr-msg[hidden] { display: none; }

/* 一張配方卡：圖示｜名字＋NPC｜可做幾個＋製作；下面一排材料、做不出來時「還缺」 */
#lmui-craft .cr-row { flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic hd ctl" "ic sub ctl" "mats mats mats" "lack lack lack";
  column-gap: 8px; row-gap: 2px; padding: 8px; border: 1px solid #3d3326; border-radius: 8px; background: #16110b; white-space: normal; }
#lmui-craft .cr-row.can { border-color: #6b5a2e; background: #1d170d; }
#lmui-craft .cr-row.task { border-color: #d4a843; box-shadow: inset 0 0 0 1px rgba(212,168,67,.35); }
#lmui-craft .cr-ic { grid-area: ic; align-self: start; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: #0f0b08; border: 1px solid #4a3c29; border-radius: 6px; cursor: default; }
#lmui-craft button.cr-ic { cursor: pointer; }
#lmui-craft button.cr-ic:active { filter: brightness(1.35); }
#lmui-craft .cr-ic img { width: 34px; height: 34px; object-fit: contain; }
#lmui-craft .cr-hd { grid-area: hd; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
#lmui-craft .cr-nm { flex: 0 1 auto; min-width: 0; white-space: normal; letter-spacing: .5px; font-size: 16px; color: #f5ecd8; overflow-wrap: anywhere; }
#lmui-craft .cr-n { font-size: 13px; font-weight: 700; color: #d6c7a6; }
#lmui-craft .cr-tag { align-self: center; padding: 1px 7px; border-radius: 9px; background: #d4a843; color: #1a1206; font-size: 11px; font-weight: 700; white-space: nowrap; }
#lmui-craft .cr-sub { grid-area: sub; min-width: 0; font-size: 12px; color: #9c8f78; overflow-wrap: anywhere; }
#lmui-craft .cr-sub .bad { color: #f87171; }
#lmui-craft .cr-ctl { grid-area: ctl; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; }
#lmui-craft .cr-max { font-size: 12px; font-weight: 700; color: #86efac; white-space: nowrap; }
#lmui-craft .cr-btns { display: flex; align-items: center; gap: 6px; }
#lmui-craft .cr-qty { width: 46px; padding: 6px 2px; font-size: 16px; text-align: center; color: #fff; background: #0f0c09; border: 1px solid #4a3c29; border-radius: 5px; outline: none; }
#lmui-craft .cr-qty:focus { border-color: #b7791f; }
#lmui-craft .cr-go { padding: 8px 16px; font: 700 15px/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-craft .cr-go:active { filter: brightness(1.25); }
#lmui-craft .cr-go:disabled { color: #6b6355; border-color: #3a332a; background: #1f1b16; cursor: default; filter: none; }
#lmui-craft .cr-qty:disabled { opacity: .4; }
#lmui-craft .cr-mats { grid-area: mats; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#lmui-craft .cr-mat { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px 2px 3px; border: 1px solid #2f281f; border-radius: 5px;
  background: #0f0c09; font-size: 13px; line-height: 1.25; color: #cfc3ab; }
#lmui-craft .cr-mat[data-info] { cursor: pointer; }
#lmui-craft .cr-mat[data-info]:active { filter: brightness(1.3); }
#lmui-craft .cr-mi { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
#lmui-craft .cr-mi img { width: 20px; height: 20px; object-fit: contain; }
#lmui-craft .cr-mn { min-width: 0; overflow-wrap: anywhere; }
#lmui-craft .cr-mat b { font-variant-numeric: tabular-nums; white-space: nowrap; }
#lmui-craft .cr-mat.ok b { color: #4ade80; }
#lmui-craft .cr-mat.mid b { color: #fbbf24; }
#lmui-craft .cr-mat.no { border-color: #4a2420; }
#lmui-craft .cr-mat.no b { color: #f87171; }
#lmui-craft .cr-mat i { font-style: normal; font-size: 11px; color: #fbbf24; white-space: nowrap; }
#lmui-craft .cr-mat em { font-style: normal; font-size: 11px; color: #a8a29e; white-space: nowrap; }
#lmui-craft .cr-lack { grid-area: lack; margin-top: 4px; font-size: 12px; color: #fca5a5; }
#lmui-craft .cr-none { padding: 24px 0; text-align: center; color: #94a3b8; }
#lmui-craft .cr-note { padding: 2px 2px 4px; font-size: 12px; color: #8a7d66; text-align: center; }

/* 矮的畫面（手機橫放、電腦版面）：分頁和搜尋擠成一排，配方多看得到幾張 */
@media (max-height: 500px) {
  #lmui-craft .cr-top { flex-direction: row; align-items: center; padding-bottom: 6px; }
  #lmui-craft .cr-tabs { flex: 1 1 auto; min-width: 0; }
  #lmui-craft .cr-tabs { gap: 2px; }
  #lmui-craft .cr-tabs button { padding: 6px 0; font-size: 11px; letter-spacing: 0; }
  #lmui-craft .cr-q { flex: 0 0 72px; width: 72px; padding: 5px 6px; font-size: 13px; }
  #lmui-craft .cr-row { padding: 6px 8px; }
  #lmui-craft .cr-mats { margin-top: 4px; }
}

/* craft8b（站長 2026-10-23）：搜尋框左邊「依類型／依 NPC」兩段切換；依 NPC＝分頁換成每位工匠（一排、左右滑），「全部」照 NPC 分段 */
#lmui-craft .cr-row1 { display: flex; align-items: center; gap: 6px; }
#lmui-craft .cr-row1 .cr-q { flex: 1 1 auto; width: auto; min-width: 0; }
#lmui-craft .cr-mode { flex: none; display: flex; padding: 2px; border: 1px solid #5a4630; border-radius: 7px; background: #0f0c09; }
#lmui-craft .cr-mode button { padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #9c8f78; font: 700 14px/1.1 inherit; font-family: inherit; white-space: nowrap; cursor: pointer; }
#lmui-craft .cr-mode button.on { background: #3a2c1a; color: #fde68a; box-shadow: inset 0 0 0 1px #b7791f; }
#lmui-craft .cr-tabs.npc { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
#lmui-craft .cr-tabs.npc button { flex: 0 0 auto; min-width: 0; padding: 7px 10px; white-space: nowrap; }
#lmui-craft .cr-sec { flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; font-size: 13px; font-weight: 700; color: #e7c977; }
#lmui-craft .cr-sec::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, #6b5636, transparent); }
#lmui-craft .bd > .cr-sec:first-child { margin-top: 0; }
#lmui-craft .cr-sub:empty { display: none; }
@media (max-height: 500px) {
  #lmui-craft .cr-top { flex-direction: column; align-items: stretch; gap: 4px; }
  #lmui-craft .cr-row1 .cr-q { flex: 1 1 auto; width: auto; padding: 4px 8px; }
  #lmui-craft .cr-mode button { padding: 4px 8px; font-size: 12px; }
  #lmui-craft .cr-tabs { gap: 3px; }
  #lmui-craft .cr-tabs button { padding: 5px 0; font-size: 13px; }
  #lmui-craft .cr-tabs.npc button { padding: 5px 8px; }
  #lmui-craft .cr-sec { font-size: 12px; margin-top: 4px; }
}

/* craft8c（站長 2026-10-23「下方顯示縮圖圖片及名稱，點擊才會看到製作材料跟製作按鈕」）：
   清單＝縮圖格（成品圖示＋名字，手機直式約 4 欄）；做得出來的框亮一點＋右上小綠點；新手任務金框＋小標。
   點一格 → .cr-pop 小視窗蓋在製作工匠裡（手機從下面升起、矮的畫面置中），點暗處或 ✕ 收起 */
#lmui-craft .cr-grid { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 6px; padding-top: 4px; }
#lmui-craft .cr-cell { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px 6px;
  border: 1px solid #3d3326; border-radius: 8px; background: #16110b; color: #d9cbb0; font-family: inherit; cursor: pointer; }
#lmui-craft .cr-cell:active { filter: brightness(1.3); }
#lmui-craft .cr-cell.can { border-color: #5f7d33; background: #191a0d; }
#lmui-craft .cr-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-craft .cr-cell.task { border-color: #d4a843; box-shadow: inset 0 0 0 1px rgba(212,168,67,.4); padding-top: 12px; }
#lmui-craft .cr-ctag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 8px; background: #d4a843; color: #1a1206;
  font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
#lmui-craft .cr-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-craft .cr-cic img { width: 36px; height: 36px; object-fit: contain; }
#lmui-craft .cr-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-craft .cr-cnm { width: 100%; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#lmui-craft .cr-cell.can .cr-cnm { color: #f5ecd8; }

#lmui-craft .cr-pop { position: absolute; inset: 10px 22px 14px 14px; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
#lmui-craft .cr-pop[hidden] { display: none; }
#lmui-craft .cr-dim { position: absolute; inset: -10px -22px -14px -14px; background: rgba(0,0,0,.6); }
#lmui-craft .cr-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-craft .cr-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-craft .cr-card .cr-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic hd" "ic sub" "mats mats" "lack lack" "ctl ctl";
  padding: 0; border: 0; background: transparent; box-shadow: none; }
#lmui-craft .cr-card .cr-hd { padding-right: 40px; }
#lmui-craft .cr-card .cr-ic { width: 44px; height: 44px; }
#lmui-craft .cr-card .cr-mats { margin-top: 10px; }
#lmui-craft .cr-card .cr-ctl { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#lmui-craft .cr-card .cr-max { margin-right: auto; font-size: 13px; }
#lmui-craft .cr-card .cr-go { padding: 10px 26px; font-size: 16px; }
#lmui-craft .cr-card .cr-qty { width: 56px; padding: 8px 2px; }
#lmui-craft .cr-pmsg { 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; }
@media (max-height: 500px) {
  #lmui-craft .cr-top { flex-direction: row; align-items: center; gap: 6px; }
  #lmui-craft .cr-q { flex: 0 0 76px; width: 76px; padding: 5px 6px; font-size: 13px; }
  #lmui-craft .cr-tabs button { padding: 6px 0; font-size: 12px; }
  #lmui-craft .cr-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 5px; }
  #lmui-craft .cr-cell { padding: 6px 2px 4px; }
  #lmui-craft .cr-cic { width: 38px; height: 38px; }
  #lmui-craft .cr-cic img { width: 32px; height: 32px; }
  #lmui-craft .cr-cnm { font-size: 11px; }
  #lmui-craft .cr-pop { align-items: center; padding: 2px; }
  #lmui-craft .cr-card { padding: 8px 8px 10px; }
  #lmui-craft .cr-card .cr-mats { margin-top: 6px; }
  #lmui-craft .cr-card .cr-ctl { margin-top: 8px; }
  #lmui-craft .cr-card .cr-go { padding: 8px 20px; font-size: 15px; }
}

/* craft8d：多了「煉金」分頁（8 個），矮的畫面一排擠不下 → 字距歸零、字縮一號、搜尋框再窄一點 */
@media (max-height: 500px) {
  #lmui-craft .cr-tabs { gap: 2px; }
  #lmui-craft .cr-tabs button { padding: 6px 0; font-size: 11px; letter-spacing: 0; }
  #lmui-craft .cr-q { flex: 0 0 56px; width: 56px; padding: 5px 4px; font-size: 12px; letter-spacing: 0; }
}

/* craft8e（站長 2026-10-23「這幾種數量直接點道具，在裡面選擇就好」）：同一個成品好幾個配方＝一格，點開後名字底下一排數量按鈕；
   選中的金框，做得出來的字是綠的；數量一樣、材料不一樣的按鈕後面小字是材料名字 */
#lmui-craft .cr-card .cr-row.multi { grid-template-areas: "ic hd" "ic sub" "vs vs" "mats mats" "lack lack" "ctl ctl"; }
#lmui-craft .cr-vs { grid-area: vs; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#lmui-craft .cr-v { display: inline-flex; align-items: baseline; gap: 4px; min-width: 64px; justify-content: center; padding: 7px 10px; border: 1px solid #4a3c29; border-radius: 6px;
  background: #0f0c09; color: #b9ad98; font: 700 15px/1.1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
#lmui-craft .cr-v small { font-size: 12px; font-weight: 400; color: inherit; opacity: .85; }
#lmui-craft .cr-v.can { color: #86efac; }
#lmui-craft .cr-v.on { border-color: #d4a843; background: #3a2c1a; color: #fde68a; box-shadow: inset 0 0 0 1px rgba(212,168,67,.5); }
#lmui-craft .cr-v.on.can { color: #bbf7d0; }
#lmui-craft .cr-v:active { filter: brightness(1.3); }
@media (max-height: 500px) {
  #lmui-craft .cr-vs { gap: 4px; margin-top: 6px; }
  #lmui-craft .cr-v { min-width: 52px; padding: 5px 8px; font-size: 13px; }
  #lmui-craft .cr-v small { font-size: 11px; }
}

/* craft8f（站長 2026-10-23「石頭用分頁做分類」）：數量按鈕上面一排材料小分頁（圖示＋名字，擠不下就換行）；
   .cr-vw 包住分頁和數量按鈕佔 vs 那一格，裡面的數量按鈕不再自己佔格 */
#lmui-craft .cr-vw { grid-area: vs; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#lmui-craft .cr-vw .cr-vs { margin-top: 0; }
#lmui-craft .cr-ms { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid #3d3326; }
#lmui-craft .cr-m { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 5px; border: 1px solid #3d3326; border-radius: 14px;
  background: #0f0c09; color: #9c8f78; font: 700 13px/1.2 inherit; font-family: inherit; white-space: nowrap; cursor: pointer; }
#lmui-craft .cr-m.can { color: #86efac; }
#lmui-craft .cr-m.on { border-color: #d4a843; background: #3a2c1a; color: #fde68a; }
#lmui-craft .cr-m:active { filter: brightness(1.3); }
@media (max-height: 500px) {
  #lmui-craft .cr-vw { gap: 5px; margin-top: 6px; }
  #lmui-craft .cr-ms { padding-bottom: 5px; }
  #lmui-craft .cr-m { padding: 3px 7px 3px 4px; font-size: 12px; }
}

/* 分頁分兩行、字大一點（站長 2026-10-23「製作工匠分頁太小，分兩行大一點」）：8 個分頁一行 4 個。不套 NPC 名單那排（.npc 照舊橫捲） */
#lmui-craft .cr-tabs:not(.npc) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; overflow: visible; }
#lmui-craft .cr-tabs:not(.npc) button { padding: 9px 0; font-size: 16px; letter-spacing: .08em; }
@media (max-height: 500px) {
  #lmui-craft .cr-tabs:not(.npc) { gap: 4px; }
  #lmui-craft .cr-tabs:not(.npc) button { padding: 6px 0; font-size: 14px; letter-spacing: .04em; }
}
/* 矮的畫面（手機橫放）：分頁兩行後搜尋框擠在右邊只剩一小格 → 搜尋框換到分頁下方佔滿一行 */
@media (max-height: 500px) {
  #lmui-craft .cr-top { flex-direction: column; align-items: stretch; gap: 4px; }
  #lmui-craft .cr-q { flex: none; width: auto; padding: 4px 8px; font-size: 13px; }
}

/* 伺服器第 174 項（站長 2026-10-25「工匠顯得太亂」）：分頁多了「可製作」共 9 個 → 一排 5 個，照舊兩排（站長 2026-10-23「分兩行大一點」）；
   防具分頁底下多一排部位（全部、頭盔、盔甲…，只列有配方的） */
#lmui-craft .cr-tabs:not(.npc) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#lmui-craft .cr-tabs:not(.npc) button { font-size: 15px; letter-spacing: 0; }
@media (max-height: 500px) {
  #lmui-craft .cr-tabs:not(.npc) button { font-size: 13px; }
}
#lmui-craft .cr-slots { display: flex; flex-wrap: wrap; gap: 4px; }
#lmui-craft .cr-slots[hidden] { display: none; }
#lmui-craft .cr-slots button { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #4a3c29; border-radius: 12px; background: #120e09; color: #a89c86;
  font: 700 13px/1.1 inherit; font-family: inherit; white-space: nowrap; cursor: pointer; }
#lmui-craft .cr-slots button.on { background: #3a2c1a; color: #fde68a; border-color: #b7791f; }
@media (max-height: 500px) {
  #lmui-craft .cr-slots { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #lmui-craft .cr-slots button { padding: 3px 7px; font-size: 11px; }
}

/* 圖鑑分頁（站長 2026-10-25）：一種圖鑑一張卡，名字、收集數、進度條 */
#lmui-craft .cr-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding-top: 4px; }
#lmui-craft .cr-book { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 18px; border: 1px solid rgba(200,160,80,.6); border-radius: 6px; background: linear-gradient(180deg, rgba(40,32,20,.95), rgba(16,12,8,.95)); color: #e8dcc0; font: inherit; cursor: pointer; text-align: left; }
#lmui-craft .cr-book b { color: #f2d77f; font-size: 15px; }
#lmui-craft .cr-book span { font-size: 13px; color: #c9b98f; }
#lmui-craft .cr-book i { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #d9b25e var(--p), rgba(255,255,255,.12) var(--p)); }
#lmui-craft .cr-book:hover { border-color: #e2bd6b; }

/* 圖鑑卡片精緻版（站長 2026-10-25「有點單調，能精緻他嗎」）：左邊道具圖示框（金框＋底光）、中間名字＋收集數＋進度條、右邊大百分比；未開放＝灰、不能點 */
#lmui-craft .cr-books { grid-template-columns: 1fr; gap: 10px; }
#lmui-craft .cr-book { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(214,170,80,.75); border-radius: 8px;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(214,170,80,.18), transparent 70%), linear-gradient(180deg, rgba(48,38,22,.96), rgba(18,13,8,.96));
  box-shadow: inset 0 1px 0 rgba(255,230,160,.25), inset 0 0 0 1px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.55); transition: border-color .15s, box-shadow .15s, filter .15s; }
#lmui-craft .cr-book:hover:not(.off) { border-color: #f2d77f; box-shadow: inset 0 1px 0 rgba(255,230,160,.35), 0 0 12px rgba(226,189,107,.35); filter: brightness(1.08); }
#lmui-craft .cr-book i { display: none; }
#lmui-craft .cr-book .cr-bk-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(214,170,80,.8); border-radius: 6px;
  background: radial-gradient(circle, rgba(255,214,120,.28), rgba(30,22,12,.95) 70%); box-shadow: inset 0 0 8px rgba(0,0,0,.8); }
#lmui-craft .cr-bk-ic img { max-width: 40px; max-height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255,214,120,.5)); }
#lmui-craft .cr-book .cr-bk-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#lmui-craft .cr-bk-tx b { color: #f6dc8c; font-size: 16px; letter-spacing: .12em; text-shadow: 0 1px 2px #000; }
#lmui-craft .cr-bk-tx small { color: #c9b98f; font-size: 12px; }
#lmui-craft .cr-bk-tx i { display: block; position: static; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #8a6420, #f2d77f var(--p), rgba(255,255,255,.1) var(--p)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
#lmui-craft .cr-book .cr-bk-pct { flex: none; color: #f2d77f; font-size: 24px; font-weight: 700; text-shadow: 0 0 8px rgba(226,189,107,.45), 0 1px 2px #000; }
#lmui-craft .cr-bk-pct u { text-decoration: none; font-size: 13px; margin-left: 1px; }
#lmui-craft .cr-book.off { cursor: default; border-color: rgba(140,130,110,.45); background: linear-gradient(180deg, rgba(34,32,28,.92), rgba(16,15,13,.92)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
#lmui-craft .cr-book.off .cr-bk-ic { border-color: rgba(140,130,110,.5); background: rgba(20,19,17,.9); }
#lmui-craft .cr-book.off .cr-bk-ic img { filter: grayscale(1) brightness(.55); }
#lmui-craft .cr-book.off .cr-bk-tx b { color: #9a9286; }
#lmui-craft .cr-book.off em { align-self: flex-start; padding: 1px 8px; border: 1px solid rgba(140,130,110,.5); border-radius: 10px; color: #9a9286; font-size: 12px; font-style: normal; }

/* 格子圖示左上的小牌子：名字尾巴的樓層、百分比（cellHtml 的 tail） */
#lmui-craft .cr-cic { position: relative; }
#lmui-craft .cr-cfl { position: absolute; left: -3px; top: -3px; z-index: 1; padding: 0 4px; border: 1px solid rgba(226,189,107,.85); border-radius: 3px; background: rgba(20,14,6,.92); color: #f6dc8c; font-size: 11px; font-weight: 700; line-height: 15px; white-space: nowrap; pointer-events: none; }

/* 圖鑑卡片動態（站長 2026-10-25「開通了會閃閃發亮嗎」→「兩個都做」）：
   lit＝開放的卡，每 4 秒一道光由左往右掃過；ready＝現在材料夠開通／升級（傲慢之塔圖鑑），金框一亮一暗 */
#lmui-craft .cr-book.lit { overflow: hidden; }
#lmui-craft .cr-book.lit::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,240,200,0) 0%, rgba(255,240,200,.28) 45%, rgba(255,255,255,.5) 50%, rgba(255,240,200,.28) 55%, rgba(255,240,200,0) 100%);
  transform: skewX(-18deg); animation: crBookSheen 4s ease-in-out infinite; }
@keyframes crBookSheen { 0% { left: -40%; } 35%, 100% { left: 120%; } }
#lmui-craft .cr-book.ready { animation: crBookReady 1.6s ease-in-out infinite; }
@keyframes crBookReady { 0%, 100% { border-color: rgba(214,170,80,.75); box-shadow: inset 0 1px 0 rgba(255,230,160,.25), 0 0 0 rgba(255,214,120,0); }
  50% { border-color: #ffe6a6; box-shadow: inset 0 1px 0 rgba(255,230,160,.4), 0 0 14px 2px rgba(255,214,120,.65); } }
#lmui-craft .cr-book.ready .cr-bk-ic { animation: crBookReadyIc 1.6s ease-in-out infinite; }
@keyframes crBookReadyIc { 0%, 100% { box-shadow: inset 0 0 8px rgba(0,0,0,.8); } 50% { box-shadow: inset 0 0 8px rgba(0,0,0,.8), 0 0 10px rgba(255,214,120,.7); } }
@media (prefers-reduced-motion: reduce) { #lmui-craft .cr-book.lit::after, #lmui-craft .cr-book.ready, #lmui-craft .cr-book.ready .cr-bk-ic { animation: none; } }

/* 圖鑑卡片閃亮亮的圖示（shine）：掃光、星星疊在圖示框裡 */
#lmui-craft .cr-book .cr-bk-ic { position: relative; overflow: hidden; }
#lmui-craft .cr-book .cr-bk-ic .hs-fx { display: block; }   /* 上面 .cr-book i { display: none } 會連星星一起藏 */
/* 圖鑑卡片圖示的星星（站長 2026-10-25「三個小星星輪流閃跑去後面了，看不到他閃」）：疊在最上層、放大、加金色光，亮的圖示上也看得到 */
#lmui-craft .cr-book .cr-bk-ic .hs-fx { z-index: 2; inset: 0; width: auto; height: auto; background: none; border-radius: 6px; }   /* 卡片舊進度條那條 .cr-book i 樣式（4px 高）會套到它 */
#lmui-craft .cr-book .cr-bk-ic .hs-fx b { width: 30%; background: #fff; }
#lmui-craft .cr-book .cr-bk-ic .hs-fx b:nth-child(1) { left: 6%; top: 8%; }
#lmui-craft .cr-book .cr-bk-ic .hs-fx b:nth-child(2) { right: 6%; top: 30%; width: 24%; }
#lmui-craft .cr-book .cr-bk-ic .hs-fx b:nth-child(3) { left: 40%; bottom: 8%; width: 26%; }
/* 樓層小牌子改放右上角（站長 2026-10-25「奧塔圖示顯示3456789，有點怪怪的，要麻21樓要麻21F」）：傳送符的用戶端圖示右上角畫了 3～10，蓋住它只留 21F；小視窗的成品圖示也加 */
#lmui-craft .cr-cfl { left: auto; right: -4px; top: -4px; padding: 0 5px; line-height: 17px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.8); }
#lmui-craft .cr-ic { position: relative; }

/* 做好了的動畫（craft.js playFx；站長 2026-10-29「製作道具給個製作動畫」）：
   0～0.6 秒材料圖示從四周收到中間 → 0.55 秒閃光＋光圈 → 0.65 秒成品彈出（背後光芒慢轉）＋火花迸發＋「製作成功」＋名字 → 2.3～2.6 秒整片淡出（2026-11-01 加大、加音效）。點一下就收掉 */
#lmui-craft .cr-fx { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 46%, rgba(40,28,10,.82), rgba(8,6,3,.9) 70%); cursor: pointer; overflow: hidden;
  animation: crfx-bg 2.6s ease both; -webkit-tap-highlight-color: transparent; }
#lmui-craft .cr-fx-stage { position: relative; width: 250px; height: 250px; flex: none; }
#lmui-craft .cr-fx-stage > * { position: absolute; left: 50%; top: 50%; }
#lmui-craft .cr-fx-mat { width: 44px; height: 44px; margin: -22px 0 0 -22px; display: flex; align-items: center; justify-content: center;
  background: #0f0b08; border: 1px solid #7a6334; border-radius: 8px; box-shadow: 0 0 10px rgba(253,224,138,.35); opacity: 0;
  animation: crfx-mat .62s cubic-bezier(.55,0,.85,.4) var(--d, 0ms) both; }
#lmui-craft .cr-fx-mat img { width: 36px; height: 36px; object-fit: contain; }
#lmui-craft .cr-fx-flash { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0, rgba(255,240,190,.95) 22%, rgba(250,204,21,.45) 48%, rgba(250,204,21,0) 70%);
  animation: crfx-flash .5s ease-out .55s both; }
#lmui-craft .cr-fx-ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid #fde68a; opacity: 0;
  box-shadow: 0 0 14px #facc15, inset 0 0 10px #facc15; animation: crfx-ring .65s ease-out .58s both; }
#lmui-craft .cr-fx-ray { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(rgba(253,230,138,.38) 0 8deg, rgba(253,230,138,0) 8deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: crfx-ray 2s linear .62s both; }
#lmui-craft .cr-fx-out { width: 92px; height: 92px; margin: -46px 0 0 -46px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #2a1f0d, #120d06); border: 2px solid #e2bd6b; border-radius: 12px;
  box-shadow: 0 0 22px rgba(250,204,21,.65), inset 0 0 12px rgba(250,204,21,.25); opacity: 0;
  animation: crfx-out .55s cubic-bezier(.2,1.6,.4,1) .62s both; }
#lmui-craft .cr-fx-out img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(253,230,138,.8)); }
#lmui-craft .cr-fx-nm { max-width: calc(100% - 32px); padding: 0 8px; text-align: center; color: #fde68a; font-size: 18px; font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(250,204,21,.6), 0 2px 2px #000; overflow-wrap: anywhere; opacity: 0; animation: crfx-nm .4s ease-out .8s both; }
#lmui-craft .cr-fx-ring.r2 { animation-delay: .78s; border-color: #fff4c2; }
#lmui-craft .cr-fx-spark { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff6cf; opacity: 0;
  box-shadow: 0 0 6px #facc15, 0 0 12px #f59e0b; animation: crfx-spark .7s cubic-bezier(.15,.7,.3,1) calc(.6s + var(--sd, 0ms)) both; }
#lmui-craft .cr-fx-ttl { font-size: 26px; font-weight: 900; letter-spacing: 8px; padding-left: 8px; opacity: 0;
  background: linear-gradient(180deg, #fff7d6, #f6d26b 50%, #b8862e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(250,204,21,.55)) drop-shadow(0 2px 1px #000); animation: crfx-ttl .5s cubic-bezier(.2,1.5,.4,1) .7s both; }
@keyframes crfx-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.3); } }
@keyframes crfx-ttl { 0% { opacity: 0; transform: scale(1.8); letter-spacing: 20px; } 100% { opacity: 1; transform: none; } }
@keyframes crfx-bg { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crfx-mat { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); } 22% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  100% { opacity: .2; transform: translate(0, 0) scale(.35) rotate(90deg); } }
@keyframes crfx-flash { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes crfx-ring { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes crfx-ray { 0% { opacity: 0; transform: rotate(0); } 25% { opacity: 1; } 100% { opacity: .8; transform: rotate(40deg); } }
@keyframes crfx-out { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes crfx-nm { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #lmui-craft .cr-fx-mat, #lmui-craft .cr-fx-flash, #lmui-craft .cr-fx-ring, #lmui-craft .cr-fx-ray, #lmui-craft .cr-fx-spark { display: none; }
  #lmui-craft .cr-fx-out, #lmui-craft .cr-fx-nm, #lmui-craft .cr-fx-ttl { animation: crfx-fade .3s ease both; }
}
@keyframes crfx-fade { 0% { opacity: 0; } 100% { opacity: 1; } }

/* 點拉比安尼只列她自己的配方：不放分頁和搜尋（站長 2026-10-30「拉比安妮不用有其他分頁」；.cr-top 有 display:flex，hidden 屬性要另外蓋） */
#lmui-craft .cr-top[hidden] { display: none; }