/* ============================================================
   介面外觀：深色石板＋金邊（2026-10-07）

   素材在 assets/ui/，由 tools/uikit_import.py 從 Flow 圖切出來：
     ui_frame   大外框（上下正中的金飾已拆掉，框才能任意拉長）
     ui_orn     拆下來的金飾，另外貼在面板標題上方
     ui_tile    石板底紋（可無縫拼）
     ui_btn     按鈕　ui_slot 技能格　ui_bar 血條框　ui_divider 分隔線
     ui_title   標題牌　ui_close 關閉鈕　ui_tab 頁籤

   為什麼是獨立一個檔、而且排在 index.html 的 <style> 後面：
     index.html 裡的 #uiPanel / button / #hud 規則跟這裡的選擇器一樣強，
     誰排後面誰贏。放在最後載入，就不用去動原本那份骨架樣式，
     要退回舊外觀只要拿掉一行 <link>。
   ============================================================ */

:root {
  --panel:   #141822;
  --panel-2: rgba(14, 17, 27, .82);
  --line:    #3b465e;
  --line-2:  #55637e;
  --gold:    #d6b25e;
  --slate-ink: #0b0e16;
}

/* ---------- 共用：石板外框 ----------
   底色畫在 ::before 上、往內縮一點 —— 外框四角的菱形比石板凸出去，
   背景直接鋪滿整個盒子的話，菱形外側會露出一塊方角。 */
#uiPanel > .p-box,
#hud, #uiTracker, #uiTutorial {
  border: 0 solid transparent; border-radius: 0; isolation: isolate; background: none;
}
#uiPanel > .p-box::before,
#hud::before, #uiTracker::before, #uiTutorial::before {
  content: ''; position: absolute; inset: 8px; z-index: -1;
  background:
    linear-gradient(rgba(8, 10, 18, .62), rgba(8, 10, 18, .62)),
    url(../assets/ui/ui_tile.png) 0 0 / 128px 128px;
}
/* 框畫在 ::after、疊在最上層。
   不能直接畫在盒子本身的 border-image：z-index:-1 的底色是畫在「盒子自己的邊框之後」，
   會把框整圈蓋掉（第一版就是這樣，實機只剩一條細線）。
   框的中間是透明的，蓋在內容上也不擋字；pointer-events:none 讓按鈕照樣點得到。 */
#uiPanel > .p-box::after,
#hud::after, #uiTracker::after, #uiTutorial::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/ui_frame.png) 34 / 26px round;
}

/* ---------- 大面板 ---------- */
#uiPanel { background: rgba(4, 6, 12, .78); }
#uiPanel > .p-box {
  background: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .7);
  padding: 22px 22px 18px;
}
/* 頂邊正中央的金飾 —— 原圖就有，拆下來是為了讓框能拉長不變形。
   掛在標題上（標題水平置中、緊貼面板頂邊），往上推到框的位置 */
#uiPanelTitle { position: relative; }
#uiPanelTitle::before {
  content: ''; position: absolute; left: 50%; top: -24px; width: 44px; height: 30px; z-index: 3;
  transform: translateX(-50%);
  background: url(../assets/ui/ui_orn.png) center / contain no-repeat;
  image-rendering: pixelated; pointer-events: none;
}
#uiPanelTitle {
  border-bottom: 0; text-align: center; padding: 8px 46px 18px;
  font-size: calc(17 * var(--ui-fs) * 1px); letter-spacing: 3px;
  color: #f0d488; text-shadow: 0 2px 0 #000, 0 0 10px rgba(214, 178, 94, .35);
  background: url(../assets/ui/ui_divider.png) center bottom 4px / 300px 15px no-repeat;
  image-rendering: pixelated;
}
#uiPanelBody { padding: 10px 10px 4px; }
#uiPanelClose {
  right: 18px; top: 16px; width: 30px; height: 30px; font-size: 0; border-radius: 0; z-index: 4;
  background: url(../assets/ui/ui_close.png) center / contain no-repeat;
  image-rendering: pixelated;
}
#uiPanelClose:hover { background-color: transparent; filter: brightness(1.35); }

/* 面板內捲軸：細、深色，不要預設那條亮灰的 */
#uiPanelBody::-webkit-scrollbar { width: 10px; }
#uiPanelBody::-webkit-scrollbar-track { background: rgba(0, 0, 0, .35); }
#uiPanelBody::-webkit-scrollbar-thumb { background: #4a5670; border: 2px solid #1a1f2c; }

/* ---------- 按鈕 ---------- */
button {
  border: 0 solid transparent; border-radius: 0; background: none;
  border-image: url(../assets/ui/ui_btn.png) 18 fill / 8px stretch;
  color: #f2e6c4; text-shadow: 0 1px 0 #000;
  padding: 6px 14px;
}
button:hover { background: none; filter: brightness(1.25); }
button:active { transform: translateY(1px); filter: brightness(.95); }
.p-mini { padding: 4px 10px; border-image-width: 6px; }
/* 這幾種按鈕的顏色本身就是資訊（危險／已選），不能被石板蓋掉 */
.q-btn-danger, .p-slot-on {
  border-image: none; border: 1px solid; border-radius: 4px;
}
.p-slot-on { background: var(--gold); border-color: #f0d488; color: #1a1410; text-shadow: none; }
.tut-btns button { border: 0 solid transparent; border-radius: 0; background: none; }
.tut-btns button:hover { color: #f0d488; }

input[type=text] { background: #0a0d15; border-color: var(--line-2); border-radius: 3px; }

/* ---------- 卡片：比面板再深一階，細線框 ---------- */
.p-item, .p-craft, .cx-cell, .cx-row, .dr-card, .eq-slot, .ls-card, .ls-row, .sk-item {
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 0 rgba(0, 0, 0, .5);
}
.p-item:hover, .cx-cell:hover { border-color: #6a7896; }
.dr-worn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.p-tag, .sk-key { border-color: var(--line-2); border-radius: 2px; }
.p-mat { background: #0a0d15; border-radius: 3px; }

/* 頁籤（圖鑑等）*/
.cx-tabs { border-bottom: 0; padding-bottom: 10px;
  background: url(../assets/ui/ui_divider.png) center bottom / 100% 9px no-repeat; }
.cx-tab {
  border: 0 solid transparent; border-radius: 0; background: none; color: #a8b0c4;
  border-image: url(../assets/ui/ui_tab.png) 16 fill / 7px stretch;
  padding: 5px 14px;
}
.cx-tab:hover { background: none; color: #f2e6c4; filter: brightness(1.2); }
.cx-tab.cx-on, .cx-tab[data-on="1"] {
  background: none; color: #ffe39a; filter: brightness(1.35);
  text-shadow: 0 0 6px rgba(214, 178, 94, .6);
}

/* 進度條 */
.cx-bar, .ls-bar { background: #080a10; border-color: #4a5670; border-radius: 2px; }

/* ---------- 左上狀態框 ---------- */
#hud { padding: 14px 18px 12px; min-width: 214px; }
#hud::after, #uiTracker::after { border-image-width: 18px; }
#hud::before { inset: 5px; }
.hud-row b { color: #f0d488; }
/* 血條／體力／經驗：石框裡裝色條。框是圖、條是 CSS，寬度才能跟著數值走 */
.hud-bar {
  width: 178px; height: 14px; padding: 3px 5px; margin: 3px 0;
  background: #06080d; border: 0 solid transparent; border-radius: 7px;
  border-image: url(../assets/ui/ui_bar.png) 12 20 / 5px 8px stretch;
}
.hud-bar .f { border-radius: 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.f.hp { background: linear-gradient(#e0505e, #a02838); }
.f.st { background: linear-gradient(#62c47e, #2f8a4e); }
.f.xp { background: linear-gradient(#8a9cf0, #4a5ab8); }

/* ---------- 任務追蹤、導覽 ---------- */
#uiTracker { padding: 14px 16px; }
#uiTracker::before { inset: 5px; }
#uiTutorial { background: none; box-shadow: none; padding: 18px 22px 18px; }
.tut-head { border-bottom: 0; padding-bottom: 12px;
  background: url(../assets/ui/ui_divider.png) center bottom / 100% 9px no-repeat; }

/* 紀錄、提示、按鍵說明、通知：小膠囊，只換成石板色系 */
#uiLog, #uiKeys, #uiToast, #uiHint {
  background: rgba(10, 13, 21, .82); border: 1px solid #3b465e; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
#uiHint { border-color: rgba(214, 178, 94, .7); }
#uiToast { border-color: rgba(214, 178, 94, .55); }

/* 小地圖：金細框。2026-10-08 毛怪「野區地圖往上移放在角落」：原本 top:120（index.html），貼到右上角 */
#uiMinimapWrap { top: 12px; }
#uiMinimap { border: 2px solid #8a7440; border-radius: 3px; box-shadow: 0 0 0 2px #1a1f2c, 0 4px 12px rgba(0,0,0,.6); }

/* ---------- 下方快捷列：方形技能格 ---------- */
#uiBottomBar { gap: 14px; }
#uiSkillBar, #uiItemBar { gap: 4px; }
.sk {
  width: 64px; height: auto; padding: 0; gap: 2px; min-width: 0;
  flex-direction: column; align-items: center; justify-content: flex-start;
  background: none; border: 0 solid transparent; border-radius: 0;
}
.sk-frame {
  position: relative; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(#1c2436, #080a12);
  border: 0 solid transparent;
  border-image: url(../assets/ui/ui_slot.png) 20 / 9px stretch;
}
.sk .sk-img { width: 44px; height: 44px; image-rendering: auto; border-radius: 2px; }
.sk .sk-itemico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.sk .sk-itemico svg { max-width: 100%; max-height: 100%; }
.sk .sk-key {
  position: absolute; left: 3px; top: 1px; z-index: 3;
  font-size: calc(11 * var(--ui-fs) * 1px); font-weight: 700; color: #ffe39a;
  text-shadow: 0 1px 0 #000, 0 0 3px #000; border: 0 solid transparent; padding: 0;
}
.sk .sk-qty { position: absolute; right: 4px; bottom: 1px; z-index: 3; margin: 0;
  text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.sk .sk-name {
  max-width: 68px; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(10.5 * var(--ui-fs) * 1px); color: #d8d2e8;
  text-shadow: 0 1px 2px #000; white-space: nowrap;
}
.sk.empty .sk-frame, .sk.locked .sk-frame { opacity: .55; }
.sk.empty .sk-name, .sk.locked .sk-name { color: #7f8aa0; }
.sk .sk-lockico { font-size: 18px; opacity: .6; }
/* 冷卻：暗色遮罩從上往下蓋，剩越久蓋越多 */
/* 舊的技能預覽也有一個 .sk-fill（inset:0 的淡藍底），這裡要把 inset 蓋掉 */
.sk .sk-fill {
  position: absolute; inset: auto; top: 7px; left: 7px; right: 7px; z-index: 1;
  max-height: 44px; background: rgba(0, 0, 0, .66);
}
.sk .sk-cd {
  position: absolute; inset: 0; z-index: 2; background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(14 * var(--ui-fs) * 1px); font-weight: 700; color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 4px #000;
}

/* 裝備欄（快捷列右邊）跟技能格同一套框 */
.gr-slot {
  background: radial-gradient(#1c2436, #080a12); border: 0 solid transparent; border-radius: 0;
  border-image: url(../assets/ui/ui_slot.png) 20 / 8px stretch;
  padding: 6px 4px 4px;
}
.gr-empty { opacity: .5; }

/* ---------- 技能面板 ---------- */
.skslot {
  background: var(--panel-2); border: 0 solid transparent; border-radius: 0; height: 50px;
  border-image: url(../assets/ui/ui_slot.png) 20 / 8px stretch;
  padding: 0 12px;
}
.skslot .sk-img { width: 32px; height: 32px; }
.sk-item .p-craft-head .sk-img { width: 36px; height: 36px; border: 1px solid #55637e; }
.sk-prev-box { background: #080a12; border-color: var(--line-2); border-radius: 2px; }

/* 倉庫分組條 */
.wh-grp { background: #141a28; border-left-color: var(--gold); }

/* 快捷列改成方格之後高了一截（46 → 79px），疊在它上面的兩條要跟著往上推，
   不然按鍵說明的下緣會壓到右邊的裝備格、[E] 提示會貼著技能名 */
#uiKeys { bottom: 100px; }
#uiHint { bottom: 104px; }

/* ---------- 技能預覽（Panels.skillPreview）----------
   角色、野狼、特效都是絕對定位的圖層，由 Panels._skpTick 每 50ms 切格數與透明度 */
.sk-prev-box { width: 220px; height: 110px; padding: 0; overflow: hidden; }
.skp {
  position: relative; overflow: hidden;
  background:
    linear-gradient(transparent 87%, rgba(90, 110, 80, .35) 87%, rgba(40, 50, 36, .5)),
    radial-gradient(ellipse at 50% 30%, #1d2638, #0a0d15);
}
.skp-actor, .skp-l { position: absolute; }
.skp-actor > .skp-l { left: 0; top: 0; }
.skp-actor svg { display: block; }

.skp-sheet { opacity: 0; image-rendering: pixelated; pointer-events: none; z-index: 2; }
.skp-ring { opacity: 0; border: 3px solid; border-radius: 50%; z-index: 1; box-shadow: 0 0 8px currentColor; }
.skp-tag  { position: absolute; left: 5px; bottom: 2px; font-size: 12px; font-weight: 700; z-index: 3;
            text-shadow: 0 1px 0 #000; }
.skp-hits { position: absolute; right: 6px; top: 3px; font-size: 13px; font-weight: 700; z-index: 3;
            text-shadow: 0 1px 0 #000; }

/* ---------- 右下角圓形技能盤（2026-10-08 毛怪「技能放在右下角、不要用按鈕」）----------
   技能列搬出下方快捷列，改成三顆圓形圖示排成弧形：J 最大、在最右下，K、L 往左上排。
   只是顯示，放招按 J/K/L —— 所以不做按下去的樣子、不吃滑鼠。
   冷卻：圖示上蓋一層「時鐘式」的暗色扇形（conic-gradient），剩越久蓋越多，逆時針退去。 */
#uiSkillBar {
  position: absolute; right: 22px; bottom: 20px; z-index: 5;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
#uiSkillBar .sk { width: auto; }
#uiSkillBar .sk-frame {
  width: 60px; height: 60px; border-radius: 50%; border-image: none;
  border: 3px solid #b8964a; overflow: hidden;
  background: radial-gradient(#26304a, #0a0d16);
  box-shadow: 0 0 0 2px #141824, 0 4px 12px rgba(0, 0, 0, .65), inset 0 0 8px rgba(0, 0, 0, .7);
}
#uiSkillBar .sk:first-child .sk-frame { width: 76px; height: 76px; }          /* J：主招最大 */
#uiSkillBar .sk:nth-child(2) { margin-bottom: 34px; }                          /* K、L 往左上排成弧 */
#uiSkillBar .sk:nth-child(3) { margin-bottom: 62px; margin-right: -6px; }
#uiSkillBar .sk .sk-img { width: 100%; height: 100%; border-radius: 50%; }
#uiSkillBar .sk-name { display: none; }                                         /* 名字收起來，滑過看 title */
#uiSkillBar .sk .sk-key {
  left: 50%; top: auto; bottom: -2px; transform: translateX(-50%);
  min-width: 18px; text-align: center; padding: 0 4px; border-radius: 8px;
  background: #1a1f2c; border: 1px solid #b8964a; font-size: 11px; line-height: 15px;
}
#uiSkillBar .sk .sk-fill {
  inset: 0; top: 0; left: 0; right: 0; max-height: none; height: 100% !important;
  border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, .72) calc(var(--p, 0) * 1%), transparent 0);
}
#uiSkillBar .sk .sk-cd { font-size: 16px; }
#uiSkillBar .sk.locked .sk-frame, #uiSkillBar .sk.empty .sk-frame { opacity: .5; border-color: #5a5a6a; }
/* 技能盤佔掉右下角 → 下方的道具／裝備列和 [E] 提示往左挪一點，窄視窗時才不會跟 K、L 疊在一起 */
/* 2026-10-08 毛怪「物品快捷鍵放在右下技能上面」：道具列改靠右、疊在技能盤正上方（bottom 由 UI.placeKeys 量技能盤高度算） */
#uiBottomBar { left: auto; right: 22px; transform: none; bottom: 230px; }
#uiHint { left: calc(50% - 70px); }
/* 普攻加入後的排法：普攻最大在最右下，J、K、L 由左往上繞成一道弧（蓋過上面舊的 nth-child 位置） */
#uiSkillBar { gap: 8px; }
#uiSkillBar .sk:first-child .sk-frame { width: 84px; height: 84px; }            /* 普攻 */
#uiSkillBar .sk:nth-child(2) { margin-bottom: 0; }                             /* J：普攻左邊 */
#uiSkillBar .sk:nth-child(2) .sk-frame { width: 62px; height: 62px; }
#uiSkillBar .sk:nth-child(3) { margin-bottom: 58px; margin-right: -14px; }     /* K：左上 */
#uiSkillBar .sk:nth-child(4) { margin-bottom: 98px; margin-right: -30px; }     /* L：正上方偏左 */
#uiSkillBar .sk-atk .sk-frame { border-color: #d8b860; }
#uiSkillBar .sk-atk .sk-frame > span:first-child { display: flex !important; align-items: center; justify-content: center; }
#uiSkillBar .sk-atk .sk-key { font-size: 10px; }
/* 按鍵說明的高度由 UI.placeKeys 動態算（會讓開技能盤），這裡不寫死 */
/* 技能盤可以直接點（2026-10-08）：滑過亮一點、按下縮一下，看得出是能按的 */
#uiSkillBar { pointer-events: none; }
#uiSkillBar .sk-frame { pointer-events: auto; cursor: pointer; transition: transform .06s, filter .1s;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#uiSkillBar .sk-frame:hover { filter: brightness(1.18); }
#uiSkillBar .sk-frame:active { transform: scale(.92); filter: brightness(1.35); }
#uiSkillBar .sk.locked .sk-frame, #uiSkillBar .sk.empty .sk-frame { cursor: default; }
#uiSkillBar img { pointer-events: none; -webkit-user-drag: none; }

/* ---------- 背包：右側「目前裝備」（2026-10-08） ---------- */
.bag-wrap { display: flex; gap: 14px; align-items: flex-start; }
.bag-main { flex: 1; min-width: 0; }
.bag-worn {
  flex: 0 0 230px; position: sticky; top: 0;
  background: rgba(10, 12, 20, .55); border: 1px solid #4a3e22; box-shadow: inset 0 0 0 1px rgba(216, 184, 96, .12);
  padding: 8px 10px 10px;
}
.bag-worn > .p-sub { color: #f0d488; text-align: center; letter-spacing: 2px; margin: 0 0 6px; }
.bw-slot { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(216, 184, 96, .14); }
.bw-slot.bw-empty { opacity: .55; }
.bw-txt { min-width: 0; line-height: 1.35; }
.bw-label { font-size: calc(11 * var(--ui-fs) * 1px); color: #9aa4b8; }
.bw-name { font-size: calc(13 * var(--ui-fs) * 1px); color: #e8e2d0; font-weight: bold; }
.bw-lv { color: #ffd166; }
.bw-stat, .bw-dur { font-size: calc(11 * var(--ui-fs) * 1px); }
.bw-total { margin-top: 8px; text-align: center; font-size: calc(12 * var(--ui-fs) * 1px); color: #c8d0e0; }
.bw-total b { color: #ffd166; }
.bw-hint { margin-top: 4px; text-align: center; font-size: calc(11 * var(--ui-fs) * 1px); color: #7a8296; }
/* 窄視窗：裝備欄改到物品上方，不擠成兩條細欄 */
@media (max-width: 680px) {
  .bag-wrap { flex-direction: column-reverse; }
  .bag-worn { flex: none; width: 100%; position: static; box-sizing: border-box; }
}
.bw-stat span { white-space: nowrap; }

/* ---------- 右側選單鈕：技能／背包／寵物／圖鑑／系統（2026-10-08） ----------
   直排貼右邊，緊接在右上角小地圖下面。層級低於面板（面板開著時被壓暗，用 ✕ 或同一顆鍵關）。 */
#uiMenuBar {
  /* 2026-10-08 毛怪「五個介面按鈕也往上移排在地圖下面」：小地圖在右上角（top 12、高約 164 含區域名），
     緊接在它下面。主城沒有小地圖，按鈕也放在同一個位置 —— 每個畫面都在同一處，手不用重新找。 */
  position: absolute; right: 12px; top: 188px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
#uiMenuBar .mb-btn {
  position: relative; width: 52px; height: 52px; box-sizing: border-box; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(#2a3040, #171b26); border: 2px solid #8a7440;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .12), 0 2px 6px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform .06s, filter .1s;
}
#uiMenuBar .mb-btn:hover { filter: brightness(1.2); border-color: #d8b860; }
#uiMenuBar .mb-btn:active { transform: scale(.92); filter: brightness(1.35); }
#uiMenuBar .mb-btn.on { border-color: #ffd166; box-shadow: 0 0 10px rgba(255, 209, 102, .55), inset 0 0 0 1px rgba(255, 220, 140, .3); }
#uiMenuBar .mb-btn svg { pointer-events: none; }
#uiMenuBar .mb-name { font-size: 11px; color: #e8dcc0; line-height: 1; text-shadow: 0 1px 0 #000; pointer-events: none; }
#uiMenuBar .mb-key {
  position: absolute; left: -6px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  font-size: 10px; line-height: 14px; text-align: center; color: #1a1408; font-weight: bold;
  background: #d8b860; border: 1px solid #5a4410; pointer-events: none;
}

/* ---------- 道具快捷格可以點（2026-10-08 毛怪「物品快捷鍵跟技能一樣可以按螢幕上的按鈕」） ---------- */
#uiItemBar .sk[data-slot] .sk-frame { pointer-events: auto; cursor: pointer; transition: transform .06s, filter .1s;
  user-select: none; -webkit-user-select: none; touch-action: none; }
#uiItemBar .sk[data-slot] .sk-frame:hover { filter: brightness(1.18); }
#uiItemBar .sk[data-slot] .sk-frame:active { transform: scale(.92); filter: brightness(1.35); }
#uiItemBar .sk[data-slot] .sk-frame * { pointer-events: none; }

/* 2026-10-08 毛怪「把按鍵功能提示移除」—— 右下那條「WASD移動 · 空白鍵攻擊…」不顯示。
   按鍵現在都標在按鈕上（技能盤、道具格、右側五顆的小徽章）；進野區時紀錄裡、魔王戰開場提示裡還各有一行按鍵說明。 */
#uiKeys { display: none !important; }

/* ---------- 技能盤：J／K／L 用 1/4 圓弧圍住普攻（2026-10-08 毛怪） ----------
   普攻在右下角當圓心，三招放在同一個半徑 104px 的圓上：J 正左（180°）、K 左上（135°）、L 正上（90°）。
   改成絕對定位（蓋過上面 flex＋margin 的排法）；盒子固定 184×184，UI.placeKeys 量到的高度也跟著固定。
   相鄰兩招中心距 104×2×sin(22.5°)≈80px > 62px 的圓，不會疊在一起。 */
#uiSkillBar { display: block; width: 184px; height: 184px; gap: 0; }
#uiSkillBar .sk { position: absolute; margin: 0 !important; transform: translate(-50%, -50%); }
#uiSkillBar .sk:nth-child(1) { left: 142px; top: 142px; }      /* 普攻：圓心（距右、距下各 42 = 半徑） */
#uiSkillBar .sk:nth-child(2) { left: 38px;  top: 142px; }      /* J：正左 */
#uiSkillBar .sk:nth-child(3) { left: 68.5px; top: 68.5px; }    /* K：左上 45° */
#uiSkillBar .sk:nth-child(4) { left: 142px; top: 38px; }       /* L：正上 */
#uiSkillBar .sk:nth-child(3) .sk-frame, #uiSkillBar .sk:nth-child(4) .sk-frame { width: 62px; height: 62px; }

/* ---------- 普攻圈變互動鍵（2026-10-08 毛怪「碰到泉水、NPC、祭壇時攻擊鍵變成相對應功能」） ----------
   換成大字（恢復／製作／釣魚…），金框加亮發光，讓玩家看得出「現在按下去不是打人」。 */
#uiSkillBar .sk-ctx .sk-frame {
  border-color: #ffd166; background: radial-gradient(#4a3c1c, #1a140a);
  box-shadow: 0 0 0 2px #141824, 0 0 16px rgba(255, 209, 102, .55), inset 0 0 10px rgba(0, 0, 0, .6);
  /* 不做呼吸動畫：技能盤每幀重畫（innerHTML），動畫每幀都會從頭開始，等於不會動 */
}
#uiSkillBar .sk-ctx .sk-ctxlbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: bold; letter-spacing: 1px; color: #ffe39a;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(255, 209, 102, .6); pointer-events: none;
}

/* 背包右欄最上面：角色外觀（2026-10-08 毛怪） */
.bag-worn .bw-char {
  display: flex; justify-content: center; align-items: flex-end; height: 132px; margin: 2px 0 4px;
  background: radial-gradient(ellipse 60% 14% at 50% 92%, rgba(0, 0, 0, .55), transparent 70%),
              radial-gradient(circle at 50% 55%, rgba(216, 184, 96, .14), transparent 65%);
}
.bag-worn .bw-char svg { image-rendering: pixelated; shape-rendering: crispEdges; }
.bag-worn .bw-who { text-align: center; color: #f0d488; font-weight: bold; font-size: calc(13 * var(--ui-fs) * 1px); margin-bottom: 6px; }
.bag-worn .bw-skin { color: #9aa4b8; font-weight: normal; font-size: calc(11 * var(--ui-fs) * 1px); }

/* ---------- 按鈕圖示（2026-10-08 毛怪「先補按鈕的」，Flow 生的 assets/ui/btn_*.png） ---------- */
#uiMenuBar .mb-ico { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; border-radius: 3px; }
#uiMenuBar .mb-btn { gap: 0; }
/* 互動鍵：圖示在上、字在下（字縮小），沒有圖示的照舊只有大字置中 */
#uiSkillBar .sk-ctx .sk-ctxico {
  position: absolute; left: 50%; top: 9px; width: 46px; height: 46px; transform: translateX(-50%);
  image-rendering: pixelated; border-radius: 6px; pointer-events: none;
}
#uiSkillBar .sk-ctx.has-ico .sk-ctxlbl { align-items: flex-end; padding-bottom: 17px; font-size: 13px; letter-spacing: 0; }

/* 背包藥水那一列：「使用」＋ U/I/O 放第二行（2026-10-08） */
.p-iact { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.p-iact .p-slotset { margin-left: auto; }

/* ---------- 手機虛擬搖桿（2026-10-08 毛怪「用手機玩時移動的蘑菇頭」；UI.initStick 只在觸控裝置建立）---------- */
#uiStick {
  position: absolute; left: 28px; bottom: 28px; width: 132px; height: 132px; z-index: 6;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
}
#uiStick .st-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,26,40,.35) 0%, rgba(10,13,21,.55) 70%);
  border: 2px solid rgba(214,178,94,.55); box-shadow: inset 0 0 0 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.5);
}
#uiStick .st-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 34%, #f3e2b0 0%, #c9a65a 45%, #7a5f2a 100%);
  border: 2px solid #3a2c14; box-shadow: 0 3px 6px rgba(0,0,0,.6);
}
#uiStick.on .st-base { border-color: rgba(240,212,136,.9); }

/* ---------- 手機／小視窗：介面跟遊戲畫面同比例縮（2026-10-08 毛怪「把手機版的排版也調一下」）----------
   --hs／--ht／--hp 由 UI.applyScale 依視窗大小設定；1280×720 以上全是 1，電腦版不變。
   用 transform 縮（不用 zoom）：UI.placeKeys 用 getBoundingClientRect 量「看起來的大小」再排，縮了也量得準。
   每個元件從它貼的那個角縮，才不會縮完離開角落。 */
#hud           { transform: scale(var(--hs, 1)); transform-origin: top left; }
#uiLog         { transform: scale(var(--hs, 1)); transform-origin: bottom left; }
#uiTracker     { transform: translateY(-50%) scale(var(--hs, 1)); transform-origin: left center; }
#uiTutorial    { transform: translateX(-50%) scale(var(--hs, 1)); transform-origin: top center; top: calc(108px * var(--hs, 1)); }
#uiToast       { transform: translateX(-50%) scale(var(--hs, 1)); transform-origin: top center; top: calc(64px * var(--hs, 1)); }
#uiHint        { transform: translateX(-50%) scale(var(--hs, 1)); transform-origin: bottom center; }
#uiMinimapWrap { transform: scale(var(--hs, 1)); transform-origin: top right; }
#uiSkillBar    { transform: scale(var(--ht, 1)); transform-origin: bottom right; }
#uiBottomBar   { transform: scale(var(--ht, 1)); transform-origin: bottom right; }
#uiStick       { transform: scale(var(--ht, 1)); transform-origin: bottom left; }
#uiMenuBar     { transform: scale(var(--ht, 1)); transform-origin: top right; top: calc(188px * var(--hs, 1)); }
/* 面板用 zoom：它在畫面正中央、內容會捲動，要的是「版面本身變小」，transform 只會縮外觀、捲動高度不變 */
#uiPanel > .p-box { zoom: var(--hp, 1); max-height: calc(88vh / var(--hp, 1)); width: min(940px, calc(94vw / var(--hp, 1))); }

/* 手機橫拿（高度不到 560）：五顆選單鈕改成右上角橫排；right 由 UI.placeKeys 依小地圖位置設定 */
body.compact #uiMenuBar { top: 8px; flex-direction: row; }
body.compact #uiMenuBar .mb-key { display: none; }       /* 手機沒有鍵盤，按鍵小徽章收起來 */

/* 直拿手機：遊戲畫面只剩中間一條 → 請玩家轉橫 */
#uiRotate { display: none; }
body.portrait-touch #uiRotate {
  display: flex; position: fixed; inset: 0; z-index: 999; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #0a0d15; color: #f0d488; font-size: 20px; font-family: 'Microsoft JhengHei', sans-serif;
}
body.portrait-touch #uiRotate div:first-child { font-size: 54px; }
#uiTracker.below-hud { transform: scale(var(--hs, 1)); transform-origin: top left; }   /* top 由 UI.placeKeys 接在狀態框下面 */

/* 手機：長按不跳出選字／存圖選單、連點兩下不放大、拉過頭不會整頁回彈（2026-10-08 網頁版加到主畫面） */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* 新手導覽框半透明（2026-10-08 毛怪「新手導覽指引會擋住畫面，用透明一些」）：
   底色從 62% 不透明＋石紋改成 30% 純色、外框淡一點；字加黑邊，底變淡也讀得清楚。 */
#uiTutorial::before { background: rgba(8, 10, 18, .30); }
#uiTutorial::after  { opacity: .55; }
#uiTutorial .tut-text, #uiTutorial .tut-head { text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#uiTutorial .tut-head { border-bottom-color: rgba(255, 255, 255, .12); }

/* 釣魚畫面：普攻圈＝釣魚鈕、J 位置＝離開（2026-10-08 毛怪「攻擊鍵會變成釣魚按鈕」，UI.fishMode） */
#uiSkillBar .sk-fish .sk-ctxlbl { line-height: 1.05; text-align: center; }
#uiSkillBar .sk-fish.hot .sk-frame {
  border-color: #fff1b0; background: radial-gradient(#7a5a1c, #2a1c08);
  box-shadow: 0 0 0 2px #141824, 0 0 26px rgba(255, 220, 120, .95), inset 0 0 10px rgba(0, 0, 0, .5);
}
#uiSkillBar .sk-exit .sk-frame { border-color: #8a9ab0; background: radial-gradient(#2a3446, #10141e); }
#uiSkillBar .sk-exit .sk-exitlbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: bold; color: #d8d2e8; text-shadow: 0 2px 0 #000; pointer-events: none;
}

/* 關閉鈕改到左上角（2026-10-08 毛怪「把關閉按鈕從右上改為左上」）。
   面板標題左右本來就各留 46px，換邊不會壓到標題字。大地圖的關閉原本是地圖下方一行字，也改成左上角同一顆鈕。 */
#uiPanelClose { right: auto; left: 18px; }
#uiBigMapClose {
  position: absolute; left: 18px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; font-size: 14px; color: #e8dcc0; text-shadow: 0 1px 0 #000;
  background: rgba(10, 13, 21, .82); border: 1px solid #8a7440; user-select: none; -webkit-user-select: none;
}
#uiBigMapClose::before {
  content: ''; width: 26px; height: 26px; background: url(../assets/ui/ui_close.png) center / contain no-repeat; image-rendering: pixelated;
}
#uiBigMapClose:hover { filter: brightness(1.25); }

/* 主選單／選角／開機載入時不顯示任何遊戲介面（2026-10-08 毛怪）。
   body.in-game 由 UI.setMenuButtons 加上（主城、野區、魔王戰建場景時都會呼叫）、MenuScene 拿掉。 */
body:not(.in-game) #hud, body:not(.in-game) #uiTracker, body:not(.in-game) #uiTutorial,
body:not(.in-game) #uiLog, body:not(.in-game) #uiHint, body:not(.in-game) #uiKeys,
body:not(.in-game) #uiBottomBar, body:not(.in-game) #uiSkillBar, body:not(.in-game) #uiMenuBar,
body:not(.in-game) #uiMinimapWrap, body:not(.in-game) #uiStick { display: none !important; }

/* 2026-10-08 毛怪「移除鍵盤按鍵所有功能，現在是手機遊戲」：按鈕上的小徽章不再寫按鍵，
   技能格、道具格改成寫第幾格（1／2／3，跟技能面板、背包的「裝到第 N 格」對得上）；普攻和選單鈕沒有徽章。 */
#uiMenuBar .mb-key { display: none !important; }
/* 互動提示可以點的時候（原本的「[E] …」）：做成按鈕的樣子 */
#uiHint.act {
  pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  border-color: #ffd166; color: #ffe39a; background: rgba(42, 32, 10, .88);
  box-shadow: 0 0 10px rgba(255, 209, 102, .45);
}
#uiHint.act:active { filter: brightness(1.3); }

/* 背包物品說明框（2026-10-08 毛怪「點擊物品時會跳出一個框框介紹該物品，點擊框外可關閉」，Panels.openItemTip） */
.p-item-tip { cursor: pointer; }
.p-item-tip:active { filter: brightness(1.15); }
#uiItemTip {
  display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: min(380px, 86%); max-height: 80%; overflow: auto; box-sizing: border-box; padding: 16px 18px 12px;
  background: linear-gradient(#1c2232, #10141e); border: 2px solid #b8964a;
  box-shadow: 0 0 0 2px #0a0d15, 0 12px 40px rgba(0, 0, 0, .8);
}
#uiItemTip .it-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
#uiItemTip .it-name { font-size: 18px; font-weight: bold; text-shadow: 0 1px 0 #000; margin-bottom: 4px; }
#uiItemTip .it-tags { display: flex; flex-wrap: wrap; gap: 4px; }
#uiItemTip .it-desc { color: #e0d8c8; line-height: 1.6; padding: 8px 0; border-top: 1px solid rgba(184, 150, 74, .3); }
#uiItemTip .it-note { color: #9ad08a; font-size: 13px; padding-top: 4px; }
#uiItemTip .it-close { color: #7a7468; font-size: 11px; text-align: center; margin-top: 10px; }

/* 死亡虛弱倒數（2026-10-08 毛怪「死亡後看不到虛弱倒數時間」）：畫面正上方的紅色徽章，手機上最小縮到 0.72 */
#uiDebuffBadge {
  display: none; position: absolute; left: 50%; top: 10px; z-index: 7; pointer-events: auto;
  transform: translateX(-50%) scale(var(--ht, 1)); transform-origin: top center;
  padding: 5px 14px; white-space: nowrap; font-size: 15px; font-weight: bold; color: #fff0f0;
  background: rgba(120, 18, 24, .92); border: 2px solid #ff6a6a; border-radius: 4px;
  text-shadow: 0 1px 0 #000; box-shadow: 0 0 12px rgba(255, 60, 60, .5);
}
body:not(.in-game) #uiDebuffBadge { display: none !important; }

/* 關閉鈕改紅色（2026-10-08 毛怪「關閉按鈕用紅色的」）：原本那張灰藍框棕叉重新上色成紅框白叉（assets/ui/ui_close_red.png，
   由 ui_close.png 依冷暖色分開上色：框→紅、叉→白，像素不變）。面板 ✕ 和大地圖左上的關閉鈕一起換。 */
#uiPanelClose { background-image: url(../assets/ui/ui_close_red.png); }
#uiBigMapClose::before { background-image: url(../assets/ui/ui_close_red.png); }
#uiBigMapClose { border-color: #c83a3a; background: rgba(60, 10, 12, .88); }