/* ============================================================
   塔之冒險 — 面板與 HUD 樣式

   為什麼有這個檔案:
     原本這些樣式全部在 index.html 的 <style> 裡,那個檔案被一行
     io.open(f,'w').write(io.open(f).read()) 清成 0 bytes 之後,
     重建的骨架只補了 HUD,面板的 108 個 class 全部沒有樣式 ——
     背包、工匠、圖鑑、任務欄、技能、寵物都變成裸 div 疊在一起。

   拆成獨立檔案而不是塞回 index.html:
     index.html 和 dev.html 是同一份骨架,樣式寫在裡面就要維護兩份,
     改一邊忘另一邊就會兩個入口長得不一樣。

   配色沿用骨架:底 #0a0a12 / 面板 #16141e / 框線 #3a3450 /
                 文字 #e8e4dc / 次要 #8a849a / 金 #c8a24a
   ============================================================ */

:root {
  /* 介面字級總開關。1 = 原本大小,1.18 = 放大約兩成。
     底下 74 條 font-size 全部乘上這個值,要調字級只改這一行。
     只放大字,不動 padding 與固定高度 —— 留白本來就配好了,
     一起放大面板會變得鬆散。 */
  --ui-fs: 1.18;

  --bg:      #0a0a12;
  --panel:   #16141e;
  --panel-2: #1d1a28;
  --line:    #3a3450;
  --line-2:  #4a4460;
  --fg:      #e8e4dc;
  --fg-dim:  #8a849a;
  --fg-off:  #5a5468;
  --gold:    #c8a24a;
  --green:   #7ad06a;
  --red:     #ff7070;
  --blue:    #8ad0ff;
}

/* ---------- 面板通用 ---------- */
.p-sub { color: var(--fg-dim); font-size: calc(12 * var(--ui-fs) * 1px); line-height: 1.7; margin: 0 0 10px; }
.p-sub b { color: var(--fg); }
.p-empty, .empty { color: var(--fg-off); font-size: calc(12 * var(--ui-fs) * 1px); padding: 18px 0; text-align: center; }

/* 兩欄:左邊清單、右邊預覽。窄畫面自動疊成一欄 */
.p-cols { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
@media (max-width: 720px) { .p-cols { grid-template-columns: 1fr; } }

/* 背包格 */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 7px; }
.p-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 8px; min-height: 46px;
}
.p-itxt { flex: 1; min-width: 0; }
.p-name { font-size: calc(12.5 * var(--ui-fs) * 1px); font-weight: 600; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
.p-isub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.p-tag { font-size: calc(10 * var(--ui-fs) * 1px); color: var(--fg-off); border: 1px solid var(--line);
         border-radius: 4px; padding: 0 4px; }
.p-qty { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); margin-left: auto; }

/* 圖示盒 —— 裡面裝的是 partsToSVG 產生的 svg */
.p-ico { width: 34px; height: 34px; display: flex; align-items: center;
         justify-content: center; flex: none; }
.p-ico-sm  { width: 24px; height: 24px; }
.p-ico-lg  { width: 52px; height: 52px; }
.p-ico-wpn { width: 46px; height: 46px; }
.p-ico-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); }
.p-ico svg, .p-ico-lg svg, .p-ico-wpn svg { max-width: 100%; max-height: 100%; }

/* 小按鈕(使用/卸下/裝備) */
.p-mini { font-size: calc(11 * var(--ui-fs) * 1px); padding: 3px 8px; flex: none; }

/* 配方素材 chip */
.p-mats { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.p-mat {
  display: inline-flex; align-items: center; gap: 4px; font-size: calc(11.5 * var(--ui-fs) * 1px);
  background: #100e18; border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 7px 2px 3px;
}
.p-mat-no { border-color: #5a2a34; }
/* 可以點開產地的晶片。滑過去才變色 —— 常駐高亮會跟「素材不足」的紅框打架 */
.p-mat-click { cursor: pointer; }
.p-mat-click:hover { border-color: #6a6a95; background: #171426; }
/* 展開的產地那一行。縮排對齊晶片,左邊一條線表示它從屬於上一排 */
.p-matsrc {
  display: none; font-size: calc(11.5 * var(--ui-fs) * 1px); color: #a8a8c0; line-height: 1.5;
  margin: 2px 0 4px 3px; padding: 3px 8px; border-left: 2px solid #4a4a70;
  background: #0e0c16; border-radius: 0 4px 4px 0;
}
.p-matsrc b { color: #d8d8ea; }

/* 製作/任務/商店共用的卡片 */
.p-craft {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 9px;
}
.p-craft-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                font-size: calc(13.5 * var(--ui-fs) * 1px); margin-bottom: 4px; }
.p-craft-head b { color: var(--fg); }
.p-craft-info { color: var(--fg-dim); font-size: calc(11.5 * var(--ui-fs) * 1px); margin: 3px 0; }
.p-craft-need { color: var(--gold); font-size: calc(11.5 * var(--ui-fs) * 1px); margin: 3px 0; }
.p-craft-row  { display: flex; align-items: center; gap: 10px; }
.p-craft-skill { color: var(--blue); font-size: calc(11.5 * var(--ui-fs) * 1px); margin: 3px 0; }
.p-craft-btns { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- 任務 ---------- */
.q-desc {
  color: #b2acc0; font-size: calc(12.5 * var(--ui-fs) * 1px); line-height: 1.75;
  white-space: pre-line;               /* desc 裡有 \n 分段,要保留 */
  margin: 3px 0 6px;
}
/* 目標是從 type/target/count 生成的,跟 desc 的散文分開 —— 見 Quests.objectiveText */
.q-obj {
  color: var(--gold); font-size: calc(12 * var(--ui-fs) * 1px); margin: 5px 0 3px;
  padding-left: 8px; border-left: 2px solid var(--gold);
}
.q-prog   { color: var(--fg); font-size: calc(12 * var(--ui-fs) * 1px); margin: 3px 0 0; }
/* 進度的計算規則。接受任務時會把既往累計補進來,不寫的話進度像憑空跳的 */
.q-note   { color: #7f7a8e; font-size: calc(11 * var(--ui-fs) * 1px); margin: 0 0 3px; }
.q-req    { color: var(--fg-dim); font-size: calc(11.5 * var(--ui-fs) * 1px); margin-top: 6px; }
.q-reward { color: var(--green); font-size: calc(11.5 * var(--ui-fs) * 1px); margin-top: 6px; }
.q-dim    { opacity: 0.45; }

.q-badge { font-size: calc(10 * var(--ui-fs) * 1px); border-radius: 4px; padding: 1px 6px; font-weight: 600; }
.q-new     { background: #2a3a5a; color: var(--blue); }
.q-doing   { background: #4a3a10; color: #ffd166; }
.q-done    { background: #4a1a22; color: #ff8a8a; }
.q-claimed { background: #2a2636; color: var(--fg-off); }

/* ---------- 任務追蹤(HUD 右上) ---------- */
/* 字級整體放大一階(12.5/11/11 → 16/14/14)。
   追蹤框是玩家「隨時要瞄一眼」的東西,不是說明文件 ——
   原本的 11px 壓在野區的暗綠地面上,實機截圖裡整塊糊成一團。
   目標那行也一併提亮:它才是真正要看的內容(名稱是氛圍標題)。 */
.tr-item { margin-bottom: 10px; }
.tr-item:last-child { margin-bottom: 0; }
.tr-name { font-size: calc(16 * var(--ui-fs) * 1px); font-weight: 600; color: var(--gold); line-height: 1.45; }
/* 追蹤框原本只有名稱+進度,名稱是氛圍標題,玩家不知道要幹嘛。這行補上目標。 */
.tr-obj  { font-size: calc(14 * var(--ui-fs) * 1px); color: #ccc6da; margin: 2px 0; line-height: 1.45; }
/* 產地那行。比目標小一階、偏藍 —— 它是「去哪」的補充,不該跟目標搶注意力 */
.tr-src  { font-size: calc(13 * var(--ui-fs) * 1px); color: #8ab8d8; margin: 1px 0 2px; line-height: 1.4; }
.tr-prog { font-size: calc(14 * var(--ui-fs) * 1px); color: #a8a2b8; line-height: 1.45; }
.tr-done .tr-prog { color: var(--green); }

/* ---------- 圖鑑 ---------- */
.cx-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px;
           border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.cx-tab  { font-size: calc(12 * var(--ui-fs) * 1px); padding: 4px 11px; border-radius: 6px; cursor: pointer;
           background: #2a2636; border: 1px solid var(--line-2); color: var(--fg-dim); }
.cx-tab:hover { background: var(--line); color: var(--fg); }
.cx-tab.cx-on, .cx-tab[data-on="1"] { background: var(--gold); border-color: var(--gold); color: #1a1410; }

.cx-cell {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 8px;
}
.cx-row {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; margin-bottom: 8px;
}
.cx-icon { width: 46px; height: 46px; display: flex; align-items: center;
           justify-content: center; flex: none; }
.cx-icon-lg { width: 62px; height: 62px; }
.cx-icon svg { max-width: 100%; max-height: 100%; }
.cx-info, .cx-body { flex: 1; min-width: 0; }
.cx-name { font-size: calc(12.5 * var(--ui-fs) * 1px); font-weight: 600; }
.cx-sub  { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); line-height: 1.6; margin-top: 2px; }
/* 素材的產地。偏藍是為了跟灰色的 cx-sub 分開 —— 那是統計,這是「去哪拿」 */
.cx-src  { font-size: calc(11 * var(--ui-fs) * 1px); color: #8ab8d8; line-height: 1.6; margin-top: 1px; }
.cx-q    { color: var(--fg-off); font-size: calc(22 * var(--ui-fs) * 1px); }
.cx-unknown { opacity: 0.55; }
/* 素材的碎片敘事 —— 只在圖鑑裡出現,背包不放(背包是要快速找東西的地方) */
.cx-flavor { font-size: calc(11 * var(--ui-fs) * 1px); color: #7f7a8e; line-height: 1.65;
             margin-top: 4px; font-style: normal; }
/* 素材格改成上下排,說明才有橫向空間 */
.cx-cell { align-items: flex-start; }
.cx-mini { font-size: calc(10.5 * var(--ui-fs) * 1px); color: var(--fg-off); }
.cx-ms   { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cx-num  { color: var(--gold); font-weight: 600; }
/* 圖鑑完成度進度條 */
.cx-prog { margin: 8px 0 12px; }
.cx-bar  { height: 7px; background: #23202e; border: 1px solid var(--line);
           border-radius: 4px; overflow: hidden; }
.cx-bar > i { display: block; height: 100%; background: var(--gold); }

/* ---------- 造型 / 改名卡 ---------- */
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.dr-card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px; text-align: center;
}
.dr-worn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.dr-no   { opacity: 0.5; }
.dr-pic  { height: 74px; display: flex; align-items: center; justify-content: center; }
.dr-pic svg { max-width: 100%; max-height: 100%; }
.dr-name { font-size: calc(12.5 * var(--ui-fs) * 1px); font-weight: 600; margin-top: 4px; }
.dr-desc { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); line-height: 1.6; margin: 3px 0 6px; }
.dr-info { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); }
.dr-own  { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--green); }
.dr-err  { font-size: calc(11.5 * var(--ui-fs) * 1px); color: var(--red); margin-top: 6px; }
.dr-rename { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.dr-rename input { flex: 1; min-width: 0; }

/* ---------- 裝備欄 ---------- */
.p-eq   { margin-bottom: 12px; }
.eq-row { display: flex; gap: 9px; flex-wrap: wrap; }
.eq-slot {
  flex: 1 1 132px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px; text-align: center;
}
.eq-empty { border-style: dashed; opacity: 0.7; }
.eq-slot-name { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); margin-bottom: 4px; }
.eq-slot .p-ico-lg { margin: 0 auto; }
.eq-slot-item { font-size: calc(12 * var(--ui-fs) * 1px); margin: 5px 0 7px; }

/* ---------- 生活技能 ---------- */
.ls-table { display: flex; flex-direction: column; gap: 7px; }
.ls-card  { background: var(--panel-2); border: 1px solid var(--line);
            border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.ls-head  { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ls-ico   { width: 30px; height: 30px; display: flex; align-items: center;
            justify-content: center; flex: none; font-size: calc(20 * var(--ui-fs) * 1px); }
.ls-name  { font-size: calc(13.5 * var(--ui-fs) * 1px); font-weight: 600; color: var(--fg); }
.ls-lv    { font-size: calc(12 * var(--ui-fs) * 1px); color: var(--gold); margin-left: auto; }
.ls-bar   { height: 6px; background: #23202e; border: 1px solid var(--line);
            border-radius: 4px; overflow: hidden; }
.ls-bar > i { display: block; height: 100%; background: var(--green); }
.ls-note  { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); line-height: 1.6; margin-top: 5px; }
.ls-doc   { font-size: calc(11.5 * var(--ui-fs) * 1px); color: var(--fg-dim); line-height: 1.75; }
.ls-row   { display: flex; align-items: center; gap: 9px;
            background: var(--panel-2); border: 1px solid var(--line);
            border-radius: 7px; padding: 7px 10px; }
.ls-got   { border-color: #2a5a34; }
.ls-ok    { color: var(--green); font-size: calc(11.5 * var(--ui-fs) * 1px); }
.ls-rlv   { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); flex: none; min-width: 42px; }
.ls-ritems{ font-size: calc(11.5 * var(--ui-fs) * 1px); flex: 1; min-width: 0; }

/* ---------- 技能 ---------- */
.sk-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; margin-bottom: 8px;
}
.sk-icon { width: 40px; height: 40px; display: flex; align-items: center;
           justify-content: center; flex: none; font-size: calc(22 * var(--ui-fs) * 1px);
           background: #100e18; border: 1px solid var(--line-2); border-radius: 7px; }
.sk-detail { flex: 1; min-width: 0; }
.sk-name { font-size: calc(13 * var(--ui-fs) * 1px); font-weight: 600; color: var(--fg); }
.sk-lock { opacity: 0.5; }
.locked  { opacity: 0.45; }
.sk-key  { font-size: calc(10 * var(--ui-fs) * 1px); border: 1px solid var(--line-2); border-radius: 4px;
           padding: 0 5px; color: var(--fg-dim); }
.sk-cd   { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--blue); }
.sk-prev-box { width: 96px; height: 96px; flex: none; position: relative;
               background: #0d0b14; border: 1px solid var(--line); border-radius: 7px;
               overflow: hidden; }
.sk-prev { position: absolute; inset: 0; }
/* 技能預覽裡的示意元素 */
.sk-beam  { position: absolute; background: var(--blue); opacity: 0.65; border-radius: 2px; }
.sk-burst { position: absolute; border: 2px solid #ffd166; border-radius: 50%; opacity: 0.7; }
.sk-fly   { position: absolute; background: #ffd166; border-radius: 50%; }
.sk-ring  { position: absolute; border: 2px solid var(--blue); border-radius: 50%; opacity: 0.6; }
.sk-ring2 { position: absolute; border: 1px solid #a06ae0; border-radius: 50%; opacity: 0.45; }
.sk-fill  { position: absolute; inset: 0; background: rgba(138,208,255,.12); }

/* 畫面下方技能列 */
.skbar  { display: flex; gap: 6px; }
.sksrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }

/* 快捷格。
   原本 .skslot(面板)與 .sk(HUD)共用「固定 46x46」,但兩邊裝的東西完全不同:
   HUD 那格要放 鍵號 + 圖示 + 技能名,面板那格還要多一顆「卸下」按鈕。
   46px 塞不下 → 文字被擠成「一行一個字」往外溢,蓋到旁邊的說明文字。
   實測:面板的技能名撐到 20x120(往上溢出 37px,整塊壓在標題上)、
   按鈕右緣 246 而容器只到 233;HUD 的技能名撐到 13x59。
   改成「高度固定、寬度自適應」,內容排成一列。 */
.skslot, .sk {
  height: 46px; position: relative;
  background: rgba(20,18,26,.85); border: 1px solid var(--line);
  border-radius: 8px; display: flex; align-items: center;
  color: var(--fg);
  width: auto; min-width: 46px; padding: 0 10px; gap: 7px;
  justify-content: flex-start; font-size: calc(13 * var(--ui-fs) * 1px);
}
/* 鍵號:原本是絕對定位貼在左上角的小字,那是「只有圖示」時的排法。
   現在整格是一列,鍵號就當成一般的第一個元素排進去,才不會壓在圖示上。 */
.skslot .sk-key, .sk .sk-key {
  position: static; font-size: calc(11 * var(--ui-fs) * 1px); font-weight: 700; border: 0;
  color: var(--gold); flex: none; min-width: 10px;
}
.sk .sk-icon { width: 22px; height: 22px; font-size: calc(17 * var(--ui-fs) * 1px); flex: none; }
.sk .sk-name, .sk .sk-lock { font-size: calc(12 * var(--ui-fs) * 1px); white-space: nowrap; }
/* 面板版:鍵號用 <b>,技能名用 <span>,後面還有「卸下」 */
.skslot > b { font-size: calc(11 * var(--ui-fs) * 1px); font-weight: 700; color: var(--gold); flex: none; }
.skslot > span { font-size: calc(13 * var(--ui-fs) * 1px); white-space: nowrap; }
.skslot.locked { opacity: .55; }
/* 冷卻遮罩:由下往上退去 */
.skslot .sk-cd, .sk .sk-cd {
  position: absolute; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13 * var(--ui-fs) * 1px); color: #fff; border-radius: 7px;
}

/* ---------- 星塵 ---------- */
.sd-bar  { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sd-ico  { width: 20px; height: 20px; flex: none; }
.sd-num  { color: #c0a0ff; font-weight: 600; }
.sd-note { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); }

/* ---------- 增益圖示(HUD) ---------- */
.buff { display: inline-block; margin-right: 6px; font-size: calc(11 * var(--ui-fs) * 1px); color: var(--blue); }


/* ---------- 裝備欄（畫面下方，技能列旁邊） ----------
   角色身上不再顯示裝備，所以這裡是玩家唯一看得到「自己穿什麼」的地方。
   外觀的變化交給造型（買了才變）。 */
#uiGearBar { display: flex; gap: 6px; }
.gr-slot {
  width: 54px; background: rgba(20,18,26,.85); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 3px 3px; text-align: center; position: relative;
}
.gr-empty { border-style: dashed; opacity: .55; }
.gr-ico { height: 34px; display: flex; align-items: center; justify-content: center; }
.gr-ico svg { max-width: 100%; max-height: 100%; }
.gr-name {
  font-size: calc(9.5 * var(--ui-fs) * 1px); color: var(--fg-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 強化等級：右上角，跟造型的角標分開 */
.gr-lv {
  position: absolute; right: 2px; top: 1px;
  font-size: calc(9 * var(--ui-fs) * 1px); font-weight: 600; color: var(--gold);
}
/* ============================================================
   新手導覽 + 小地圖資訊
   ============================================================
   這兩組是 index.html 被清空那次的漏網之魚。
   .tut-* 五個 class 都寫在 tutorial.js 的 innerHTML 裡,但 ui.css 從來沒有對應規則,
   於是導覽面板長成「一團浮在畫面上的裸文字」—— 沒有背景、沒有邊框、沒有間距,
   標題跟步數擠在同一行。那是新手看到的第一個東西。
   容器 #uiTutorial 在 index.html 裡只有定位,外觀要在這裡給。 */
#uiTutorial {
  width: 460px; max-width: 88vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
.tut-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
/* 步數用小字弱化,標題才是主角 —— 兩個同樣大小的話讀起來像一句話 */
.tut-step  { font-size: calc(11 * var(--ui-fs) * 1px); color: var(--fg-dim); letter-spacing: .04em; white-space: nowrap; }
.tut-title { font-size: calc(15 * var(--ui-fs) * 1px); font-weight: 600; color: var(--gold); }
.tut-text  { font-size: calc(13 * var(--ui-fs) * 1px); line-height: 1.75; color: var(--fg); }
.tut-btns  { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* 容器是 pointer-events:none(不擋滑鼠),按鈕要自己收回來 */
.tut-btns button {
  pointer-events: auto;
  font-size: calc(12.5 * var(--ui-fs) * 1px); padding: 6px 16px;
  color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: 5px; cursor: pointer;
}
.tut-btns button:hover { border-color: var(--gold); color: var(--gold); }

/* 小地圖底下那一行:區域名 / 危險度 / 探索度,三段要分得開 */
#uiMinimapInfo { display: flex; justify-content: center; gap: 10px; padding-top: 4px; }
.mm-region { color: var(--fg); font-weight: 600; }
.mm-tier   { color: var(--gold); }
.mm-pct    { color: var(--fg-dim); }

/* 委託人。從任務要的素材推出來的(見 Quests.posterOf),顏色沿用主城那個 NPC 的識別色 */
.q-poster { font-size: calc(11.5 * var(--ui-fs) * 1px); margin: 2px 0 4px; letter-spacing: .3px; }

/* 接不了的委託按鈕。不用 disabled —— 按得下去才能再講一次完整原因,
   死鈕會讓玩家以為是壞掉。灰掉只是讓「現在不能接」一眼看得出來。 */
.q-btn-off { background: #241f30; color: #7f7a8e; border-color: #3a3450; cursor: not-allowed; }
.q-btn-off:hover { background: #2a2438; }

/* 追蹤框補上的三行:難度徽章、委託人、需繳交。
   面板上早就有這些,追蹤框卻只有名稱+目標+進度 ——
   玩家在野區看的是追蹤框,不會為了看「還要交什麼」特地跑回主城開面板。 */
.tr-dif  { font-size: calc(11 * var(--ui-fs) * 1px); margin-left: 6px; padding: 0 5px; border-radius: 4px;
           border: 1px solid; vertical-align: 2px; font-weight: 600; }
.tr-who  { font-size: calc(12 * var(--ui-fs) * 1px); color: #9a94aa; margin: 1px 0 2px; }
.tr-req  { font-size: calc(13 * var(--ui-fs) * 1px); color: #a8a2b8; margin: 2px 0; line-height: 1.4; }

/* 道具快捷鍵的剩餘數量。技能沒有這一欄 —— 技能不會用完,道具會。 */
.sk-qty { font-size: calc(11 * var(--ui-fs) * 1px); color: #ffc861; margin-left: 4px; font-weight: 600; }

/* 背包裡的快捷鍵設定鈕(4/5/6)。做成一排小方鈕而不是下拉選單 ——
   玩家要的是「把這瓶藥丟到 4」,一次點擊就該完成。 */
.p-slotset { display: flex; gap: 3px; margin-left: 4px; }
.p-slotbtn { padding: 2px 6px; font-size: calc(11 * var(--ui-fs) * 1px); min-width: 22px; line-height: 1.2; }
.p-slot-on { background: var(--gold); border-color: var(--gold); color: #1a1410; font-weight: 700; }

/* 「確定放棄？」—— 只有按了第一次才會出現。
   紅底是刻意的:它跟旁邊的「回報領獎」長得必須完全不一樣,
   兩顆並排時才不會按錯。 */
.q-btn-danger { font-size: calc(11 * var(--ui-fs) * 1px); padding: 3px 9px;
  background: #4a1a22; color: #ff9a9a; border-color: #7a2a34; }
.q-btn-danger:hover { background: #5e2029; color: #ffc0c0; }

/* 倉庫的分組標題 —— 依「第幾層 · 怎麼拿到的」把清單切開 */
.wh-grp {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 10px 0 4px; padding: 3px 8px; font-size: calc(11.5 * var(--ui-fs) * 1px);
  background: #17142a; border-left: 3px solid #6a5ab0; border-radius: 0 4px 4px 0;
  color: #c8c8e0; position: sticky; top: 0;
}
.wh-grp b { color: #8a8ab0; font-weight: normal; font-size: calc(11 * var(--ui-fs) * 1px); }
.wh-grp:first-child { margin-top: 0; }

/* 「可以按，但現在做不到」的按鈕。
   以前這些是 disabled —— 玩家按下去完全沒反應也沒有原因，
   分不出是「條件不足」還是「按鈕壞了」。現在一律可按，由處理器講原因。 */
.btn-cant { opacity: 0.5; }
.btn-cant:hover { opacity: 0.75; }

/* 追蹤框裡「這個素材去哪拿」那幾行。縮排一格,表示它從屬於上面的「需繳交」 */
.tr-src-in { margin-left: 10px; font-size: calc(12.5 * var(--ui-fs) * 1px); color: #7aa8c8; }

/* Scale.FIT 會把 1280x720 的畫布用 CSS 縮到視窗大小(實測 0.6097 倍),
   而瀏覽器預設用雙線性去縮 —— Phaser 那邊關掉濾波之後,這一層還是會糊。
   兩層都要關,少關一層就前功盡棄。 */
#gameContainer canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}