/* ── 電腦版面（js/pcui.js 在畫面寬 ≥ 高時加 body.pcui：電腦、手機橫放、平板橫放都是；直式沒有這個 class，這個檔對它完全不作用）──
   照 3.5C 用戶端主介面（Sprite.pak 431，640×149）：最下面一整條全寬面板，高 129 個用戶端像素 × --pk（pcui.js 照畫面高度算，0.25 一階；手機橫放 0.75）。
   iPhone 橫放：左右瀏海、下面的橫條（safe-area）讓開，--pc-sl／--pc-sr／--pc-sb（電腦都是 0）。
     左欄 112：角色狀態（431 左邊那塊原圖：上面多疊一條同樣的橫條放名字＋金幣）｜等級＋經驗｜防禦 ○ 魔防｜負重｜飽食｜正義值
     中欄：龍頭帶（體力／魔力，431 上緣，蓋在地圖下緣、上面透明）＋聊天；聊天「小」＝撐滿面板，「中」「大」往上長（hud.js chatLevels）
     右欄 146：快捷格 3 排 × 4（F1～F12，431 的金色繩紋外框）＋主選單小圖示（431 右下那排）
   地圖（#cv）＝面板上面整塊（--m-nav-h＝面板高，hud.js measureNav 量），沒有上下黑邊。
   疊法：#m-nav（面板底、左欄、主選單、經驗）降到 HUD 底下（49 < 50），HUD 裡的聊天、龍頭帶、快捷格疊在面板上 */
body.pcui {
  --pc-h: calc(var(--pk, 2) * 129px);
  --pc-l: calc(var(--pk, 2) * 112px);
  --pc-r: calc(var(--pk, 2) * 146px);
  --pc-sl: env(safe-area-inset-left, 0px); --pc-sr: env(safe-area-inset-right, 0px); --pc-sb: env(safe-area-inset-bottom, 0px);
}

/* 面板底：石紋（全寬，中欄被聊天蓋住；左右兩欄各自貼原圖） */
body.pcui #m-nav { z-index: 49; height: calc(var(--pc-h) + var(--pc-sb)); padding: 0; border: 0; box-shadow: none; pointer-events: none;
  background: linear-gradient(rgba(10,8,12,.3), rgba(10,8,12,.5)), url("/data/ui/ch-stone.png") 0 0 / calc(var(--pk) * 300px) auto repeat, #2a262c; }
body.pcui.pcui-art #m-nav { background: linear-gradient(rgba(10,8,12,.3), rgba(10,8,12,.5)), url("/data/ui/pc-stone.png") 0 0 / calc(var(--pk) * 300px) auto repeat, #2a262c; image-rendering: pixelated; }
body.pcui #lmui-hud { bottom: 0; }
/* 頭像列換成面板左欄；線上名單往上補位 */
body.pcui #lmui-tl { display: none; }
body.pcui #lmui-who { left: calc(5px + var(--pc-sl)); top: 4px; }
body.pcui #lmui-wholist { max-height: calc(calc(var(--dvh1, 1dvh) * 100) - var(--m-nav-h) - var(--pk) * 46px - 120px - var(--lmui-pt-h, 0px)); }
body.pcui #lmui-status, body.pcui .afk-tm-mm { right: calc(6px + var(--pc-sr)); }

/* ── 中欄：龍頭帶＋聊天（#lmui-lower 本身就是中欄，由上到下：訊息、龍頭帶、聊天；快捷格、AUTO 那排用 fixed 搬到右欄） ── */
body.pcui #lmui-lower { left: calc(var(--pc-l) + var(--pc-sl)); right: calc(var(--pc-r) + var(--pc-sr)); bottom: var(--pc-sb); width: auto; height: auto; transform: none; display: flex; flex-direction: column;
  pointer-events: none; background: none; box-shadow: none; }
body.pcui #lmui-band { position: relative; left: auto; top: auto; width: auto; height: calc(var(--pk) * 46px); margin: 0; flex: none; }
body.pcui #lmui-band > i { height: calc(var(--pk) * 46px); }
body.pcui #lmui-band .bl { width: calc(var(--pk) * 28px); }
body.pcui #lmui-band .bd { width: calc(var(--pk) * 51px); height: calc(var(--pk) * 48px); }
body.pcui #lmui-band .br { width: calc(var(--pk) * 24px); }
body.pcui .lmui-bar { height: calc(var(--pk) * 46px); }
body.pcui .lmui-bar i, body.pcui .lmui-bar.vfx-hurt::after { top: calc(var(--pk) * 19px); height: calc(var(--pk) * 20px); }
body.pcui .lmui-bar span { top: calc(var(--pk) * 25px); height: calc(var(--pk) * 15px); font-size: max(12px, calc(var(--pk) * 7.5px)); letter-spacing: .3px; }
body.pcui.lmui-hollow.lmui-white #lmui-hp { background: url("/data/ui/band-hp-hollow.png") no-repeat 0 0 / 100% 100%, url("/data/ui/bar-white-hp.png") no-repeat 0 calc(var(--pk) * 19px) / 100% calc(var(--pk) * 20px); }
body.pcui.lmui-hollow.lmui-white #lmui-mp { background: url("/data/ui/band-mp-hollow.png") no-repeat 0 0 / 100% 100%, url("/data/ui/bar-white-mp.png") no-repeat 0 calc(var(--pk) * 19px) / 100% calc(var(--pk) * 20px); }
/* 地名＋夥伴列：龍頭帶正上方（讓開左端小龍）；開著視窗也留著（視窗在畫面中間，蓋不到這裡） */
body.pcui #lmui-mapline { left: calc(var(--pk) * 30px); right: calc(var(--pk) * 30px); top: auto; bottom: calc(100% - var(--pk) * 9px); height: auto; align-items: flex-end; justify-content: flex-start; }
body.pcui #lmui-mapname { max-width: 60%; }
body.pcui #lmui-mapname b { font-size: 15px; }
body.pcui.lmui-cover #lmui-mapline, body.pcui.lmui-cover #lmui-comp { visibility: visible; }
body.pcui #lmui-comp { position: static; left: auto; bottom: auto; max-width: none; margin: 0 0 -8px; }
/* 聊天：一直在（開著視窗也不藏，面板上不會空一塊）；「小」撐滿面板 */
body.pcui #lmui-bottom, body.pcui.lmui-cover #lmui-bottom { position: relative; left: auto; bottom: auto; width: auto; z-index: auto; display: flex; flex-direction: column; min-height: var(--pc-h); }
body.pcui #lmui-chat { flex: 1 1 auto; }
/* 聊天框很寬：石紋換成無接縫那張（tools/client-ui.mjs pc-stone，431 同一塊石紋），跟面板一樣放大 --pk 倍 */
body.pcui.pcui-art #lmui-chat::before { background: url("/data/ui/pc-stone.png") 0 0 / calc(var(--pk) * 300px) auto repeat, #3a363c; image-rendering: pixelated; }
body.pcui #lmui-linesbox { flex: 1 0 auto; }
body.pcui #lmui-tabs { padding: 0 9px 2px; }
body.pcui #lmui-tabs .row { gap: 3px; }
body.pcui #lmui-tabs button { padding: 2px 0; font-size: max(14px, calc(var(--pk) * 7px)); }
body.pcui #lmui-tabs .more { display: block; }
body.pcui #lmui-lines { font-size: max(14px, calc(var(--pk) * 7.5px)); line-height: 1.4; }
body.pcui #lmui-ch { padding: 2px 1px; }
body.pcui #lmui-send { padding: 4px 14px; }
/* 系統、掉落訊息：浮在龍頭帶上面（跟著聊天框高度走）；「訊息▾」收折鈕在左欄正上方 */
body.pcui #lmui-flt { position: relative; left: auto; right: auto; top: auto; height: 0; z-index: 2; }
body.pcui #lmui-flt .list { left: 8px; right: 30%; bottom: 14px; }
body.pcui #lmui-flt .tg { position: fixed; left: calc(6px + var(--pc-sl)); bottom: calc(var(--pc-h) + var(--pc-sb) + 6px); }

/* ── 右欄：掛機紀錄、AUTO、⊞ 浮在面板右欄正上方（⊞ 的選單往上彈）；開著視窗也看得到 ── */
body.pcui #lmui-vit { position: fixed; z-index: 8; left: auto; top: auto; right: var(--pc-sr); bottom: calc(var(--pc-h) + var(--pc-sb)); width: var(--pc-r); height: 0; }
body.pcui.lmui-win-open #lmui-vit { visibility: visible; }
body.pcui #lmui-skbtn, body.pcui #lmui-fnmenu { right: 8px; }
body.pcui #lmui-bars { right: 54px; }
body.pcui #lmui-huntbtn { right: 108px; }
/* 快捷格：3 排 × 4（F1～F4／F5～F8／F9～F12，全部一直在，不用切排）；外框＝431 右邊那塊的金色繩紋（九宮格四邊），格線＝格子間的縫露出底色 */
body.pcui #lmui-hot { position: fixed; z-index: 3; left: auto; top: auto; right: var(--pc-sr); bottom: calc(var(--pk) * 25px + var(--pc-sb)); width: var(--pc-r); height: calc(var(--pk) * 104px); margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: max(1px, calc(var(--pk) * 1px));
  border-style: solid; border-color: #6b5636; border-width: calc(var(--pk) * 7px) calc(var(--pk) * 6px) calc(var(--pk) * 5px) calc(var(--pk) * 6px); background: #5f513b; }
body.pcui.pcui-art #lmui-hot { border-image: url("/data/ui/pc-hotframe.png") 7 6 5 6 stretch; image-rendering: pixelated; }   /* 拉長不重複：左右兩邊原圖在格線那裡有個接口，重複貼會一段一段出現 */
body.pcui #lmui-hotmode { display: none; }
body.pcui #lmui-hot[data-mode] .lmui-slot { display: flex; aspect-ratio: auto; width: auto; height: auto; min-height: 0; max-height: none; border: 0; border-radius: 0;
  background: linear-gradient(#1d1915, #0d0b09); box-shadow: inset 0 0 calc(var(--pk) * 4px) #000; image-rendering: auto; }
/* 鍵名照 431：格子正中間一個大大的暗灰「F5」，道具圖示疊在上面 */
body.pcui #lmui-hot .lmui-slot .fk { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: none;
  font: 700 calc(var(--pk) * 12px)/1 Arial, Helvetica, sans-serif; letter-spacing: -.03em; color: rgba(160,150,135,.2); text-shadow: none; }
body.pcui #lmui-hot .lmui-slot img { position: relative; z-index: 1; width: 82%; height: 82%; }
body.pcui #lmui-hot .lmui-slot .nm { position: relative; z-index: 1; font-size: max(11px, calc(var(--pk) * 5.5px)); }
body.pcui #lmui-hot .lmui-slot .cnt { z-index: 2; right: 3px; bottom: 2px; font-size: max(11px, calc(var(--pk) * 6px)); }
body.pcui #lmui-hot .lmui-slot:hover { box-shadow: inset 0 0 0 1px rgba(240,205,122,.55), inset 0 0 calc(var(--pk) * 4px) #000; }
body.pcui #lmui-hot .lmui-slot.sel { box-shadow: inset 0 0 0 2px #f2c14e, inset 0 0 calc(var(--pk) * 6px) rgba(242,193,78,.45); }   /* 滾輪選中的格子（中鍵點目標用這格；hud.js hotSel） */

/* 主選單：右欄最下面一排小圖示（431 右下那排：角色、十字、袋子、齒輪＝能力、魔法、背包、設定；狩獵場、聊天沒有原圖，畫成同樣的羊皮紙底）。
   滑鼠停上去看名字＋快捷鍵（pcui.js 加 title）；開著的那個亮起＋金框。沒有圖（data/ui 還沒重產）＝文字鈕 */
body.pcui #lmui-nav { position: absolute; left: auto; right: var(--pc-sr); bottom: var(--pc-sb); width: var(--pc-r); height: calc(var(--pk) * 25px); max-width: none; margin: 0; padding: 0 calc(var(--pk) * 4px) calc(var(--pk) * 1px);
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: calc(var(--pk) * 2px); pointer-events: auto; }
body.pcui .lmui-tool { position: relative; flex: 1 1 0; min-width: 0; height: calc(var(--pk) * 21px); padding: 0 2px; border: 1px solid #5a4630; border-radius: 3px;
  background: linear-gradient(#3b3022, #1c160e); box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 1px 2px #000; }
body.pcui .lmui-tool span { font-size: 12px; letter-spacing: 0; }
body.pcui.pcui-art .lmui-tool { flex: none; width: calc(var(--pk) * 19px); padding: 0; border: 0; border-radius: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated;
  box-shadow: 0 0 0 1px #0b0907, 0 1px 3px #000; }
body.pcui.pcui-art .lmui-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.pcui.pcui-art .lmui-tool[data-tool="stats"] { background-image: url("/data/ui/pc-ic-char.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="skill"] { background-image: url("/data/ui/pc-ic-skill.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="items"] { background-image: url("/data/ui/pc-ic-bag.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="automation"] { background-image: url("/data/ui/pc-ic-opt.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="stats"]:hover, body.pcui.pcui-art .lmui-tool[data-tool="stats"].on { background-image: url("/data/ui/pc-ic-char-on.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="skill"]:hover, body.pcui.pcui-art .lmui-tool[data-tool="skill"].on { background-image: url("/data/ui/pc-ic-skill-on.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="items"]:hover, body.pcui.pcui-art .lmui-tool[data-tool="items"].on { background-image: url("/data/ui/pc-ic-bag-on.png"); }
body.pcui.pcui-art .lmui-tool[data-tool="automation"]:hover, body.pcui.pcui-art .lmui-tool[data-tool="automation"].on { background-image: url("/data/ui/pc-ic-opt-on.png"); }
/* 狩獵場（摺起來的地圖）、聊天（對話框）：同 431 圖示的羊皮紙底、深色圖案 */
body.pcui.pcui-art .lmui-tool[data-tool="battle"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 21'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7e6b4'/%3E%3Cstop offset='.55' stop-color='%23ead09a'/%3E%3Cstop offset='1' stop-color='%23c99d55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='19' height='21' fill='url(%23g)'/%3E%3Cpath d='M2.5 6.2l4.5-1.8 5 1.8 4.5-1.8v11.4l-4.5 1.8-5-1.8-4.5 1.8z' fill='%23b07a3c' stroke='%232a1a0a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M7 4.4v11.4M12 6.2v11.4' stroke='%232a1a0a' stroke-width='1'/%3E%3Cpath d='M4 9.5l2 .8M8.5 8.5l2 1.5M13.5 11l1.6-.8' stroke='%23f3dfaa' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.pcui.pcui-art .lmui-tool[data-tool="chat"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 21'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7e6b4'/%3E%3Cstop offset='.55' stop-color='%23ead09a'/%3E%3Cstop offset='1' stop-color='%23c99d55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='19' height='21' fill='url(%23g)'/%3E%3Cpath d='M3 5h13v8.5H9.2l-3.7 3.2v-3.2H3z' fill='%234f5d5c' stroke='%23161a1a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='6.5' cy='9.3' r='1' fill='%23e8eded'/%3E%3Ccircle cx='9.5' cy='9.3' r='1' fill='%23e8eded'/%3E%3Ccircle cx='12.5' cy='9.3' r='1' fill='%23e8eded'/%3E%3C/svg%3E"); }
body.pcui.pcui-art .lmui-tool[data-tool="battle"]:hover, body.pcui.pcui-art .lmui-tool[data-tool="chat"]:hover,
body.pcui.pcui-art .lmui-tool[data-tool="battle"].on { filter: brightness(1.12) saturate(.9); }
body.pcui.pcui-art .lmui-tool.on { box-shadow: 0 0 0 1px #f0d58c, 0 0 calc(var(--pk) * 4px) rgba(240,205,122,.8); }
body.pcui.pcui-art .lmui-tool:active { filter: brightness(1.25); }

/* ── 左欄：角色狀態（431 左邊那塊：::before＝上面多疊的一條橫條、::after＝原圖 112×103；欄位位置照原圖量的，單位都是用戶端像素 × --pk） ── */
#pcui-left { display: none; }
body.pcui #pcui-left { display: block; position: absolute; left: var(--pc-sl); bottom: var(--pc-sb); z-index: 1; width: var(--pc-l); height: var(--pc-h); pointer-events: auto;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; color: #f3ead6; -webkit-user-select: none; user-select: none; }
body.pcui.pcui-art #pcui-left::before, body.pcui.pcui-art #pcui-left::after { content: ""; position: absolute; left: 0; width: 100%; z-index: -1; pointer-events: none;
  background: url("/data/ui/pc-main.png") no-repeat 0 calc(var(--pk) * -46px) / calc(var(--pk) * 640px) calc(var(--pk) * 149px); image-rendering: pixelated; }
body.pcui.pcui-art #pcui-left::before { top: 0; height: calc(var(--pk) * 26px); }
body.pcui.pcui-art #pcui-left::after { top: calc(var(--pk) * 26px); height: calc(var(--pk) * 103px); }
#pcui-left > * { position: absolute; }
#pcui-left .pl-id { left: calc(var(--pk) * 2px); top: calc(var(--pk) * 7px); width: calc(var(--pk) * 104px); height: calc(var(--pk) * 14px); display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 0 calc(var(--pk) * 3px); font-size: max(12px, calc(var(--pk) * 7px)); line-height: 1; white-space: nowrap; }
#pcui-left .pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #fff; }
#pcui-left .pl-gold { flex: none; font-weight: 700; color: #f5d77b; }
#pcui-left .pl-f, #pcui-left .pl-bar span, #pcui-left .pl-id { text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 3px #000; }
#pcui-left .pl-f { top: calc(var(--pk) * 57px); height: calc(var(--pk) * 11px); display: flex; align-items: center; justify-content: center; font: 700 max(12px, calc(var(--pk) * 7px))/1 "Microsoft JhengHei", sans-serif; color: #fff; }
#pcui-left .pl-ac { left: calc(var(--pk) * 22px); width: calc(var(--pk) * 23px); }
#pcui-left .pl-mr { left: calc(var(--pk) * 69px); width: calc(var(--pk) * 38px); }
/* 中間的圓：職業徽章，點了開裝備欄（同頭像） */
#pcui-left .pl-face { left: calc(var(--pk) * 48px); top: calc(var(--pk) * 54px); width: calc(var(--pk) * 17px); height: calc(var(--pk) * 17px); padding: calc(var(--pk) * 1.5px); border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(60,48,32,.6), rgba(8,6,4,.2)); cursor: pointer; }
#pcui-left .pl-face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(1.6) contrast(1.1) drop-shadow(0 1px 1px #000); }
#pcui-left .pl-face:hover { box-shadow: 0 0 0 1px rgba(240,205,122,.7), 0 0 6px rgba(240,205,122,.5); }
/* 負重、飽食、正義值：欄位裡面一條填色＋字 */
#pcui-left .pl-bar { left: calc(var(--pk) * 22px); width: calc(var(--pk) * 85px); height: calc(var(--pk) * 10px); overflow: hidden; }
#pcui-left .pl-wt { top: calc(var(--pk) * 77px); } #pcui-left .pl-food { top: calc(var(--pk) * 96px); } #pcui-left .pl-law { top: calc(var(--pk) * 115px); }
#pcui-left .pl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: .8; transition: width .3s; background: linear-gradient(#d9b35c, #8f6a22); }
#pcui-left .pl-bar span { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; justify-content: center; font: 700 max(11px, calc(var(--pk) * 6.5px))/1 "Microsoft JhengHei", sans-serif; color: #fff; white-space: nowrap; }
#pcui-left .pl-wt.wt-warn i { background: linear-gradient(#f2d43a, #a88512); }
#pcui-left .pl-wt.wt-over i { background: linear-gradient(#ee6060, #8e1c1c); }
#pcui-left .pl-wt.wt-warn span { color: #fde68a; } #pcui-left .pl-wt.wt-over span { color: #fecaca; }
#pcui-left .pl-food i { background: linear-gradient(#e39a52, #94501a); }
#pcui-left .pl-law i { background: linear-gradient(#78a6e6, #2a5498); }
#pcui-left .pl-law.neg i { background: linear-gradient(#e46a6a, #8c1f1f); }
/* 等級＋經驗：用原本的經驗條（#lmui-exp，hud.js 照常更新）搬進左欄第二條橫條 */
body.pcui #lmui-exp { position: fixed; z-index: 2; left: var(--pc-sl); right: auto; bottom: calc(var(--pk) * 82px + var(--pc-sb)); width: calc(var(--pk) * 107px + 22px); height: calc(var(--pk) * 14px); margin: 0; padding: 0 22px 0 0;
  flex: none; order: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; pointer-events: none; }
body.pcui #lmui-exp::before { display: none; }
body.pcui #lmui-exp::after { content: none; }
body.pcui #lmui-exp i { left: 0; top: 0; bottom: 0; max-width: none; opacity: .85; background: linear-gradient(#f2b35c, #c46f17 55%, #84440a); }
body.pcui #lmui-exp span { font-size: max(12px, calc(var(--pk) * 7px)); letter-spacing: .3px; }
body.pcui #lmui-exp .lv { justify-content: flex-start; padding-left: calc(var(--pk) * 4px); }
body.pcui #lmui-exp .pc { justify-content: flex-end; padding-right: calc(var(--pk) * 4px); }
/* 4:3 舞台（js/stage.js：--pk 固定 1，整個舞台放大 s 倍，1917×899＝1.5 倍）：左欄欄位只有 10～14 個邏輯像素高、85～104 寬，
   上面那些 max(12px, …) 的下限是給沒放大的畫面用的，在舞台裡會比欄位還大（「等級」擠成兩行、數字疊在一起）→ 字照欄位大小給固定值（畫面上＝×s）。
   名字（最多 10 個中文字）跟金幣（9 位數）一行放不下 → 最上面那條改成兩行（原圖那條只有一行高，改用同色系的框畫） */
html.stage43 body.pcui.pcui-art #pcui-left::before { top: 1px; left: 1px; width: 109px; height: 24px; background: linear-gradient(#3a3a40, #232327 45%, #1b1b1f); border: 1px solid #9a7339;
  border-radius: 3px 10px 10px 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.55); image-rendering: auto; }
html.stage43 body.pcui #pcui-left .pl-id { left: 2px; top: 2px; width: 107px; height: 22px; padding: 0 5px 0 3px; flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; font-size: 10px; }
html.stage43 body.pcui #pcui-left .pl-name { text-align: left; font-size: 9.5px; }   /* 10 個中文字＝95，框裡 99 */
html.stage43 body.pcui #pcui-left .pl-gold { text-align: right; font-size: 9.5px; }
html.stage43 body.pcui #pcui-left .pl-f { font-size: 9px; }
html.stage43 body.pcui #pcui-left .pl-bar { overflow: visible; }
html.stage43 body.pcui #pcui-left .pl-bar span { font-size: 9px; }
html.stage43 body.pcui #lmui-exp { grid-template-columns: auto 1fr; }
html.stage43 body.pcui #lmui-exp span { gap: 3px; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
/* 沒有 data/ui/pc-main.png（還沒重產）：欄位畫成深色框 */
body.pcui:not(.pcui-art) #pcui-left .pl-id, body.pcui:not(.pcui-art) #pcui-left .pl-f, body.pcui:not(.pcui-art) #pcui-left .pl-bar { background: rgba(8,6,10,.7); border: 1px solid #6b5636; border-radius: 3px; }
body.pcui:not(.pcui-art) #lmui-exp::after { content: ""; position: absolute; inset: 0 22px 0 0; clip-path: none; background: rgba(8,6,10,.7); border: 1px solid #6b5636; border-radius: 3px; }

/* ── 視窗（站長 2026-10-18「像原版一樣不會擋住正中間，且可以拉動背包等介面位置」）：照原版用戶端，左右兩側各一個窄視窗，
   從畫面頂端到龍頭帶上面，中間的角色、地面露出來。背包（含裝備欄、自動賣出）＝右邊 #lmui-win2，能力、魔法、設定、狩獵場＝左邊 #lmui-win，兩個可以同時開（hud.js inSide）。
   寬度約畫面 1/4（最窄 380＝手機直式的寬度、最寬 500），位置 --wx／--wy 由 pcui.js 設（拖動、記住、拉回畫面內）。
   hud.js 動右邊那個時會把兩個的 id 暫時對調 → 兩個 id 的樣式要完全一樣（右邊這份照抄 lmui.css 的 #lmui-win／「3.5 視窗外框」） ── */
body.pcui { --pc-ww: min(clamp(380px, calc(var(--vw1, 1vw) * 26), 500px), calc(calc(var(--vw1, 1vw) * 100) - 16px)); }
body.pcui :is(#lmui-win, #lmui-win2) { position: fixed; z-index: 60; left: var(--wx, 8px); top: var(--wy, 6px); right: auto; bottom: auto; transform: none;
  width: var(--pc-ww); height: min(calc(calc(var(--dvh1, 1dvh) * 100) - var(--lmui-pop-b, 340px) - 12px), 860px); display: flex; flex-direction: column; color: #e9dcc0;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; -webkit-user-select: none; user-select: none; }
body.pcui #lmui-win2 { isolation: isolate; min-width: 96px; min-height: 128px; padding: 17px 49px 21px 15px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body.pcui #lmui-win2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-style: solid; border-width: 64px 60px 60px 26px;
  border-image: url("/data/ui/win.png") 64 60 60 26 / 64px 60px 60px 26px repeat; image-rendering: pixelated; filter: drop-shadow(0 4px 10px rgba(0,0,0,.75)); }
body.pcui #lmui-win2::after { content: ""; position: absolute; inset: 20px 47px 23px 16px; z-index: -2; pointer-events: none; background: url("/data/ui/win-stone.png") 0 0 / 160px 232px repeat; image-rendering: pixelated; }
body.pcui #lmui-whead2 { flex: none; height: 28px; display: flex; align-items: center; justify-content: center; }
body.pcui #lmui-whead2 b { font-size: 17px; font-weight: 700; letter-spacing: .3em; color: #f3d48a; text-shadow: 0 1px 0 #000, 0 0 8px rgba(243,212,138,.35); }
body.pcui #lmui-whead2 button { position: absolute; z-index: 5; top: 0; right: 0; left: auto; bottom: auto; transform: none; width: 52px; min-width: 0; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0; color: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: none; }
body.pcui #lmui-whead2 button::after { content: "關閉"; position: absolute; top: 3px; right: 7px; width: 24px; height: 13px; display: flex; align-items: center; justify-content: center; overflow: visible; pointer-events: none;
  font: 500 13px/13px "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; letter-spacing: 0; white-space: nowrap; color: #ececec; transform: scaleX(.9); text-shadow: 1px 1px 0 #000, 0 0 2px rgba(0,0,0,.9); }
body.pcui #lmui-whead2 button:active::after { color: #f3d48a; }
body.pcui #lmui-wbody2 { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; scrollbar-width: none; }
body.pcui #lmui-wbody2::-webkit-scrollbar { display: none; }
body.pcui #lmui-win2.w-doll #lmui-wbody2 { display: flex; flex-direction: column; }
/* 標題列＝拖動的把手（雙擊放回預設位置）；拖的時候不要選到字 */
body.pcui :is(#lmui-whead, #lmui-whead2) { cursor: move; touch-action: none; }
body.pcui .pc-drag, body.pcui .pc-drag * { cursor: grabbing !important; }
/* 背包：照原版 4 欄；紙娃娃格子照視窗寬度算（手機版照畫面寬度） */
body.pcui :is(#lmui-wbody, #lmui-wbody2) .bag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
body.pcui #lmui-doll { --ld-c: clamp(32px, min(calc((var(--pc-ww) - 190px) / 4), calc((calc(var(--dvh1, 1dvh) * 100) - 470px) / 8)), 52px); }
/* 小視窗（道具、夥伴、掛機紀錄、掉寶、快捷格選單…）、NPC 對話、強化：不再蓋一層暗色擋住正中間，視窗放在旁邊——
   道具相關的（道具視窗、選快捷格、賣出、戒指、讀書確認、提煉魔石…）在右邊（背包那側），其他在左邊（下面 .pc-ov 那段接手；這兩行是還沒收編的那一瞬間） */
body.pcui :is(.lmui-ov, #npc-window, #enh-window) { background: transparent; justify-content: flex-start; padding: 6px 0 6px 8px; }
body.pcui :is(#lmui-itemwin, #lmui-hotpick, #lmui-sellyn, #lmui-slotpick, #lmui-bookyn, #lmui-stonepick, #lmui-gmpick, #lmui-gmqty, #lmui-gmench) { justify-content: flex-end; padding: 6px 8px 6px 0; }
body.pcui .lmui-ov .box, body.pcui #npc-window .npw-panel, body.pcui #enh-window .enh-panel, body.pcui #lmui-updwin.ingame .box { width: var(--pc-ww); max-width: var(--pc-ww); }
/* 小視窗可以拖、記位置（網頁 60，pcui.js ovAdopt 加 .pc-ov）：外面那層縮成框那麼寬、放在 --wx／--wy，而且不擋滑鼠——點地圖照常走路打怪，視窗也不會被關（關＝✕ 或 Esc）。
   那層的高度＝原本的高度（畫面頂端到龍頭帶上緣），框裡寫 height:100%／max-height:100% 的照舊算得對；框靠上（長的從那層頂端開始，短的照自己的高度）。
   :is() 裡放 id＝權重蓋得過 lmui.css 的 #npc-window／#enh-window／#lmui-updwin.ingame 原本的 inset、padding */
body.pcui { --pc-oh: calc(calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px) - var(--lmui-pop-b, 340px) - 12px); }
body.pcui :is(.lmui-ov, #npc-window, #enh-window, #lmui-updwin).pc-ov { position: fixed; inset: auto; left: var(--wx, 8px); top: var(--wy, 6px);
  width: var(--pc-ww); height: var(--pc-oh); padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; background: transparent; pointer-events: none; }
body.pcui :is(.lmui-ov, #npc-window, #enh-window, #lmui-updwin).pc-ov[hidden] { display: none; }
body.pcui .pc-ov > :is(.box, .npw-panel, .enh-panel) { pointer-events: auto; }
body.pcui .pc-ov > :is(.box, .npw-panel, .enh-panel) > :is(.hd, .npw-head, .enh-head) { cursor: move; touch-action: none; }

/* 設定 → 系統「視窗位置重設」（電腦版面才有） */
.st-ui .st-btn { padding: 6px 20px; }
/* 設定 → 系統第一排（回選角、更新紀錄、每日簽到）：電腦版面的視窗窄（380），三顆放不下就換行，不要被切掉 */
body.pcui :is(#lmui-wbody, #lmui-wbody2) > .st-box:first-child > .st-row:first-child { flex-wrap: wrap; }

/* 每日簽到：電腦版面的視窗是窄的（--pc-ww），照窄的排（4 欄兩排；signin.css 照整個畫面寬度會排成 8 欄一排，字擠在一起） */
body.pcui .si-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 4:3 舞台的視窗＝原版用戶端的大小（站長 2026-10-19「橫式版視窗內容再調整過，參照客戶端視窗大小」）：舞台 1 個邏輯像素＝原版 1 個用戶端像素，
   3.5C Sprite.pak：背包 549、角色 563c、選項（562 標準框）都是 257×336，魔法 537c 是 257×341（差 5px，同用 336）；win.png 就是 562 原圖，外框原樣一比一、四邊不用重複貼。
   沒有原版對應的（狩獵場、製作工匠、掛機紀錄、夥伴、NPC、強化、道具資訊、更新紀錄…）一律同大小：寬 257、高最多 336（短的照內容），聊天框拉大時再矮一點讓開。
   框裡的內容（分頁列、內容區、按鈕列）整塊 zoom 縮成 --pc-z（.65）：照 297 寬排（＝360 寬手機直式那種寬度，原本的排法都放得下），字、格子、按鈕一起照比例縮，太長就捲；
   不縮的：標題（另外給字級）、右上角關閉牌子（在原圖固定的位置）、捲動鈕（frame.js 照外框算）、強化特效層（enhance.js 照外框座標放）。
   手機橫放（pcui-sm，沒鎖舞台）同一套（站長 2026-10-22「手機版的橫式介面彈出的視窗太大，沒有跟電腦版一樣大小」）：外框、標題一比一，內容一樣照 297 寬排、縮成 --pc-z；
     手機只縮到 .72（電腦 .65 放大後字有 15px 上下，手機沒有放大，再小字就看不清楚），寬＝297×.72＋外框左右 64＝278；高照畫面剩下的（矮的手機一百九十上下，長的捲） ── */
/* 不認得 CSS zoom 的瀏覽器（Firefox 126 以前）：內容縮不下去，窄視窗會把分頁、按鈕切掉 → 照沒鎖舞台的電腦版面給寬視窗（380）、內容一比一，不錯位、不切字 */
@supports (zoom: 1) {
  html.stage43 body.pcui { --pc-ww: 257px; --pc-z: .65; }
  body.pcui.pcui-sm { --pc-z: .72; --pc-ww: calc(297px * var(--pc-z) + 64px); }
  :is(html.stage43 body, body.pcui-sm).pcui #lmui-doll { --ld-c: 34px; }
}
:is(html.stage43 body, body.pcui-sm).pcui {
  --pc-oh: min(336px, calc(calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px) - var(--lmui-pop-b, 340px) - 12px)); }
:is(html.stage43 body, body.pcui-sm).pcui :is(#lmui-win, #lmui-win2) { height: min(336px, calc(calc(var(--dvh1, 1dvh) * 100) - var(--lmui-pop-b, 340px) - 12px)); }
:is(html.stage43 body, body.pcui-sm).pcui :is(#lmui-win, #lmui-win2) > :not(#lmui-whead, #lmui-whead2, .l35-knob),
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .box > :not(.hd, .l35-knob),
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .npw-panel > :not(.npw-head, .l35-knob),
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .enh-panel > :not(.enh-head, .enh-fx, .l35-knob),
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .npw-panel > .npw-head > :not(.npw-close),
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .enh-panel > .enh-head > :not(.enh-x) { zoom: var(--pc-z); }
/* ⊞ 功能選單：裡面的按鈕跟小視窗的內容一樣縮成 --pc-z，一顆一行不折字（站長 2026-10-22「電腦版的右邊方塊彈出框的界面大小沒有修改到」：原本 15px 字、被擠到一顆折成三行） */
:is(html.stage43 body, body.pcui-sm).pcui #lmui-fnmenu > button[data-k] { zoom: var(--pc-z); white-space: nowrap; }
/* 標題：框裡頂端一行（原本 28 高、17px） */
:is(html.stage43 body, body.pcui-sm).pcui :is(#lmui-whead, #lmui-whead2) { height: 20px; }
:is(html.stage43 body, body.pcui-sm).pcui :is(#lmui-whead, #lmui-whead2) b { font-size: 13px; }
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .box > .hd { gap: 4px; padding: 0 4px 3px; font-size: 13px; line-height: 1.25; }
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov > .box > .hd img { max-height: 20px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-itemwin .iw-nm { font-size: 13px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-itemwin .iw-ic { width: 30px; height: 30px; }
/* NPC：名字＋職稱＋身上金幣一行放不下就折到第二行（不要把名字切成「…」）；倉庫的標題（寶箱＋大字）讓開的左右留白跟著縮 */
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .npw-heading { flex-wrap: wrap; row-gap: 0; white-space: normal; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .npw-name { white-space: nowrap; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window.wh .npw-head { padding: 0 34px; height: 44px; }
/* 下面一排按鈕（道具資訊的 替換／強化／自動賣出／賣出…）：左右留白縮小，四顆並排時四個字還放得下一行 */
:is(html.stage43 body, body.pcui-sm).pcui .pc-ov .ft button { padding-left: 1px; padding-right: 1px; font-size: 14px; }
/* 裝備欄（紙娃娃）：左右兩排 8 格一眼看完（格子 34，下面的六圍、防禦魔防捲下去看）；不照外框寬度算（格子大小在上面 @supports 裡） */
:is(html.stage43 body, body.pcui-sm).pcui .ld2-stats > div { padding-left: 6px; padding-right: 6px; }
:is(html.stage43 body, body.pcui-sm).pcui .ld2-stats em { white-space: nowrap; }

/* ── 面板比 1 倍小（手機橫放 0.75 倍，pcui.js 加 body.pcui-sm）── */
/* 像素圖照最近點縮小會掉線、一格粗一格細 → 改平滑縮小 */
body.pcui.pcui-sm :is(#m-nav, #lmui-hot, .lmui-tool, #lmui-band), body.pcui.pcui-sm #lmui-chat::before,
body.pcui.pcui-sm #pcui-left::before, body.pcui.pcui-sm #pcui-left::after { image-rendering: auto; }
/* 整個面板離畫面底至少 4px（有 safe-area 照它）：最下面那排主選單圖示、左欄最後一列不會貼著畫面底，底框看得到 */
body.pcui.pcui-sm { --pc-sb: max(env(safe-area-inset-bottom, 0px), 4px); }
/* 左欄的欄位只剩 8～10px 高：字用 10px、不換行（12px 比欄位高，「等級」會折成兩行、疊到上下兩列）；
   負重、飽食、正義那三條只有 7.5px 高、字比它高 → 不裁（原本 overflow:hidden，「正」上面那一橫被切掉看起來像「止」） */
body.pcui.pcui-sm #pcui-left .pl-id, body.pcui.pcui-sm #pcui-left .pl-f, body.pcui.pcui-sm #pcui-left .pl-bar span, body.pcui.pcui-sm #lmui-exp span { font-size: 10px; white-space: nowrap; }
body.pcui.pcui-sm #pcui-left .pl-bar { overflow: visible; }
body.pcui.pcui-sm #lmui-exp span { gap: 3px; letter-spacing: 0; }
/* 經驗那條只剩 80px：「等級」換成「Lv.」（同裝備欄抬頭的寫法），不然「等級 3」「24.0000%」會黏成「等級 324.0000%」 */
body.pcui.pcui-sm #lmui-exp { grid-template-columns: auto 1fr; }
body.pcui.pcui-sm #lmui-exp .lv em { font-size: 0; }
body.pcui.pcui-sm #lmui-exp .lv em::before { content: "Lv."; font-size: 10px; }
/* 主選單：一顆圖示只有 14px 寬，手指點不準 → 每顆撐滿右欄平分、整條高（圖示照原大小置中，按得到的範圍變大） */
body.pcui.pcui-sm.pcui-art .lmui-tool { flex: 1 1 0; width: auto; height: 100%; background-size: auto calc(var(--pk) * 21px); background-position: center; box-shadow: none; }
body.pcui.pcui-sm.pcui-art .lmui-tool.on { box-shadow: inset 0 0 0 1px #f0d58c; }
body.pcui.pcui-sm #lmui-nav { gap: 1px; padding: 0 calc(var(--pk) * 2px); }
/* 畫面矮（360～430），視窗只剩兩百高：AUTO、⊞ 那排縮成 34～36px（視窗下緣停在它上面，hud.js measureLayout），背包負重列壓扁一點；
   視窗的大小、標題、內容縮放跟 4:3 舞台同一套（上面那段） */
body.pcui.pcui-sm #lmui-skbtn { right: 6px; width: 32px; height: 32px; margin-bottom: 5px; }
body.pcui.pcui-sm #lmui-bars { right: 42px; width: 36px; height: 36px; margin-bottom: 3px; }
body.pcui.pcui-sm #lmui-auto { width: 34px; height: 34px; }
body.pcui.pcui-sm #lmui-force { right: 6px; width: 32px; height: 32px; margin-bottom: 43px; }   /* ⊞ 縮成 32px 那時：⊞ 正上方 6px */
body.pcui.pcui-sm #lmui-force img { width: 16px; }
body.pcui.pcui-sm #lmui-force span { font-size: 9px; line-height: 10px; }
body.pcui.pcui-sm #lmui-huntbtn { right: 84px; margin-bottom: 8px; padding: 3px 10px; font-size: 13px; }
body.pcui.pcui-sm .bag-wt { margin-bottom: 4px; }
/* 道具視窗（換裝比較框＋說明列）：下緣停在 AUTO 那排上面只剩 190 高，標題、按鈕扣掉後內容只露一條 → 這個視窗（點開看、看完就關）往下蓋過面板、用到畫面底；
   下面那排按鈕不換行（「自動賣出」四個字放得下一行，不會折成「自動賣／出」把按鈕撐成兩倍高） */
body.pcui.pcui-sm #lmui-itemwin.pc-ov { height: calc(calc(var(--dvh1, 1dvh) * 100) - 12px); }
body.pcui.pcui-sm #lmui-itemwin .ft button { padding-left: 2px; padding-right: 2px; white-space: nowrap; }

/* NPC 視窗（倉庫、商店…）在窄的電腦版面（4:3 舞台、手機橫放）：站長 2026-10-23「電腦版的介面文字壓迫到了」——內容照 297 寬排，倉庫一列的數量框＋存入鈕佔掉大半，
   名字被擠成一個字一行 → NPC 視窗加寬成內容照 400 寬排（外框照舊左右 64）；倉庫的名字一行、太長省略（滑鼠停著看全名），數量框、存取鈕縮一點 */
@supports (zoom: 1) {
  :is(html.stage43 body, body.pcui-sm).pcui #npc-window.pc-ov,
  :is(html.stage43 body, body.pcui-sm).pcui #npc-window .npw-panel { width: calc(400px * var(--pc-z) + 64px); max-width: calc(400px * var(--pc-z) + 64px); }
}
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-row { gap: 6px; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-name { display: flex; align-items: baseline; white-space: nowrap; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-cnt { flex: none; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-qty { width: 48px; padding: 0 4px; }
:is(html.stage43 body, body.pcui-sm).pcui #npc-window .whx-act { padding: 0 8px; gap: 3px; }
/*   電腦 4:3 舞台：視窗只有 336 高、清單一捲「倉庫／背包」那排就被捲到標題底下切掉一半 → 那排和分類列捲動時停在上面（倉庫內容區 padding 10：-10 貼齊頂端；分類列接在 46 高的鈕＋6 下面）。
     手機橫放不做：視窗只剩兩百多高，停住兩排後清單只露一列多，比整塊一起捲更難用 */
html.stage43 body.pcui #npc-window .whx-tabs:not(.whx-src) { position: sticky; top: -10px; z-index: 2; background: #17120e; box-shadow: 0 -10px 0 #17120e, 0 6px 0 #17120e; }
html.stage43 body.pcui #npc-window .whx-cats { position: sticky; top: 42px; z-index: 2; background: #17120e; }
/*   倉庫整塊（.whx）是內容區的 flex 子項，預設會被壓成內容區那麼高、清單溢出去 → 停住的那排跟著整塊一起捲走；不壓它 */
html.stage43 body.pcui #npc-window .whx { flex-shrink: 0; }

/* 電腦版拖拉放快捷格（js/hotdrag.js）：跟著滑鼠的半透明圖示、目標格可以放＝金框／不能放＝紅框、放好那格彈一下、拖出快捷列清掉＝圖示放大淡出 */
.hd-ghost { position: fixed; left: 0; top: 0; z-index: 400; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: .75; border: 1px solid rgba(242,193,78,.8); border-radius: 4px; background: rgba(20,16,12,.55); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hd-ghost img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.hd-ghost.hd-no { border-color: #d24a3a; }
.hd-ghost.hd-no img { filter: grayscale(.6); }
.hd-ghost.hd-out, .hd-ghost.hd-poof { transition: opacity .25s ease-out, scale .25s ease-out; opacity: 0; }   /* 放開沒放成＝淡出；拖出快捷列清掉＝放大淡出 */
.hd-ghost.hd-poof { scale: 1.6; }
body.hd-dragging, body.hd-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.hd-src { opacity: .45; }
body.pcui #lmui-hot .lmui-slot.hd-ok { box-shadow: inset 0 0 0 3px #ffd25e, 0 0 12px #f2c14e; z-index: 2; }
body.pcui #lmui-hot .lmui-slot.hd-no { box-shadow: inset 0 0 0 3px #ff4a36, 0 0 12px #d24a3a; z-index: 2; }
body.pcui #lmui-hot .lmui-slot.hd-drop { animation: hdDrop .4s ease-out; z-index: 2; }
@keyframes hdDrop {
  0% { transform: scale(1.25); box-shadow: inset 0 0 0 2px #fff3c4, 0 0 14px #f2c14e; }
  100% { transform: scale(1); box-shadow: inset 0 0 0 0 rgba(242,193,78,0), 0 0 0 rgba(242,193,78,0); }
}

/* ── 全視窗鈕（js/fullscr.js，站長 2026-10-23）：電腦版面＋滑鼠才有 body.fs-ok；左上角，跟「線上」鈕同一種膠囊樣式。
   壓在 HUD 上面（51，同 #guide-btn）、視窗（#lmui-win 60）下面；線上名單往下讓一格（鈕高約 23＋間隔 4），名單最大高度跟著扣 */
#fs-btn { display: none; }
body.fs-ok #fs-btn { display: flex; position: fixed; left: calc(5px + var(--pc-sl, 0px)); top: calc(4px + var(--orig-bar-h, 0px)); z-index: 51; align-items: center;
  padding: 2px 8px; font: 700 13px/1.3 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; color: #f0e2bf; border: 1px solid rgba(214,180,110,.75); border-radius: 11px;
  background: #0b0d10; box-shadow: 0 1px 4px rgba(0,0,0,.6); text-shadow: 0 1px 2px #000; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.fs-ok #fs-btn:hover { color: #fff3c4; border-color: #e9c77a; }
body.fs-ok.pcui #lmui-who { top: 31px; }
body.fs-ok.pcui #lmui-wholist { max-height: calc(calc(var(--dvh1, 1dvh) * 100) - var(--m-nav-h) - var(--pk) * 46px - 147px - var(--lmui-pt-h, 0px)); }

/* ── 面板左右兩欄加寬、聊天框縮窄（站長 2026-10-24，附截圖畫兩條線）：左欄往右到龍頭帶血條左端（＝左端小龍的寬 28）、右欄往左到「掛機紀錄」左邊（44），
   聊天框和上面的龍頭帶一起夾在中間。聊天框至少留 400 寬（手機橫放、窄視窗），不夠就兩欄少加一點（照 28：44 分）。
   左欄拿掉最上面的名字＋金幣那條（名字改成點自己人物看：party.js playerMenu），六列排滿整個面板高（＝右欄快捷格＋主選單那麼高）：
     等級＋經驗｜金幣｜防禦 ○ 魔防｜負重｜飽食｜正義。
   每一列照舊用 431 原圖（站長「使用原本的邊框設計」）：原圖固定 112 寬，加寬的那段不拉伸——每列切成左右兩半，左半貼原圖的左端、右半貼原圖的右端（::before／::after），
     接縫落在欄位中間那段（原圖橫向一樣的地方），看不出接過；金幣那列原圖沒有，借負重那條的框（不含小圖示）。
   前面的規則有 html.stage43、pcui-sm 好幾層（最高 1 個 id）→ 這段用兩個 id（#m-nav > #pcui-left）蓋過去，單位 u＝原圖 1 像素（--pk） ── */
body.pcui {
  --pc-mid: calc(calc(var(--vw1, 1vw) * 100) - var(--pc-l) - var(--pc-r) - var(--pc-sl) - var(--pc-sr));
  --pc-xl: clamp(0px, calc((var(--pc-mid) - 400px) * .39), calc(var(--pk, 1) * 28px));
  --pc-xr: clamp(0px, calc((var(--pc-mid) - 400px) * .61), calc(var(--pk, 1) * 44px));
  --pc-lw: calc(var(--pc-l) + var(--pc-xl)); --pc-rw: calc(var(--pc-r) + var(--pc-xr)); --u: calc(var(--pk, 1) * 1px);
}
/* 中欄（龍頭帶＋聊天框）整條跟著縮：龍頭帶兩端的小龍貼著聊天框的邊（站長 2026-10-24「血條沒有縮」），聊天框最小、中、大都一樣寬 */
body.pcui #lmui-lower { left: calc(var(--pc-lw) + var(--pc-sl)); right: calc(var(--pc-rw) + var(--pc-sr)); }
body.pcui #lmui-hot, body.pcui #lmui-nav { width: var(--pc-rw); }
/* 右欄最下面那排主選單：每顆平分撐滿整排（站長「左右不要留空」），圖示照原比例放在鈕的正中間，鈕底是深色框 */
body.pcui #lmui-nav { justify-content: stretch; padding: 0 calc(var(--u) * 3) calc(var(--u) * 1); gap: calc(var(--u) * 2); }
body.pcui.pcui-art #lmui-nav .lmui-tool { flex: 1 1 0; width: auto; height: calc(var(--u) * 21); padding: 0; border: 1px solid #5a4630; border-radius: 3px;
  background-color: #241c13; background-position: center; background-size: auto 100%; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 1px 2px #000; }
body.pcui.pcui-art #lmui-nav .lmui-tool.on { border-color: #f0d58c; box-shadow: 0 0 calc(var(--u) * 4) rgba(240,205,122,.8); }
body.pcui.pcui-art #lmui-nav .lmui-tool:hover { border-color: #8a6a3e; }
/* 左欄 */
body.pcui #m-nav > #pcui-left { width: var(--pc-lw); }
body.pcui #m-nav > #pcui-left::before, body.pcui #m-nav > #pcui-left::after { content: none; display: none; }
/* 原圖切片：--ay＝那一列在原圖的上緣、--ax＝左端在原圖的 x；右半一律對齊原圖 x 110（左欄那塊的右緣） */
body.pcui #m-nav > #pcui-left :is(.pl-fd, .pl-bar), html body.pcui #lmui-exp { box-sizing: border-box; height: calc(var(--u) * 18); overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.pcui #m-nav > #pcui-left .pl-fd { --ay: 93; --ax: 16; }
body.pcui #m-nav > #pcui-left .pl-bar { --ay: 93; --ax: 0; left: 0; right: calc(var(--u) * 2); width: auto; }
body.pcui #m-nav > #pcui-left .pl-food { --ay: 112; } body.pcui #m-nav > #pcui-left .pl-law { --ay: 131; }
html body.pcui #lmui-exp { --ay: 49; --ax: 0; height: calc(var(--u) * 21); }
body.pcui.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar)::before, body.pcui.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar)::after,
html body.pcui.pcui-art #lmui-exp::before, html body.pcui.pcui-art #lmui-exp::after {
  content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: auto; right: auto; inset-block: 0; width: calc(50% + 1px); clip-path: none; border: 0; pointer-events: none;
  background: url("/data/ui/pc-main.png") no-repeat calc(var(--u) * var(--ax) * -1) calc(var(--u) * var(--ay) * -1) / calc(var(--u) * 640) calc(var(--u) * 149); image-rendering: pixelated; }
body.pcui.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar)::before, html body.pcui.pcui-art #lmui-exp::before { left: 0; }
body.pcui.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar)::after, html body.pcui.pcui-art #lmui-exp::after { right: 0; width: 50%; background-position: right calc(var(--u) * -530) top calc(var(--u) * var(--ay) * -1); }
body.pcui.pcui-sm.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar, .pl-ic, .pl-face)::before, body.pcui.pcui-sm.pcui-art #m-nav > #pcui-left :is(.pl-fd, .pl-bar)::after,
html body.pcui.pcui-sm.pcui-art #lmui-exp::before, html body.pcui.pcui-sm.pcui-art #lmui-exp::after, body.pcui.pcui-sm.pcui-art #m-nav > #pcui-left :is(.pl-ic, .pl-face) { image-rendering: auto; }
/* 沒有原圖（data/ui 還沒重產）：深色框 */
body.pcui:not(.pcui-art) #m-nav > #pcui-left :is(.pl-fd, .pl-bar) { background: rgba(8,6,10,.7); border: 1px solid #6b5636; border-radius: 3px; }
/* 第一列：等級＋經驗（#lmui-exp 是 fixed，照面板左下角放；原圖最上面那條，左端沒有收邊） */
html body.pcui #lmui-exp { left: var(--pc-sl); bottom: calc(var(--pc-sb) + var(--u) * 105); width: calc(var(--pc-lw) - var(--u) * 2); padding: 0; }
html body.pcui #lmui-exp i { left: 0; top: calc(var(--u) * 3); bottom: calc(var(--u) * 3); max-width: calc(100% - var(--u) * 7); }
html body.pcui #lmui-exp span { font-size: 10px; }
html body.pcui #lmui-exp .lv { padding-left: calc(var(--u) * 5); }
html body.pcui #lmui-exp .pc { padding-right: calc(var(--u) * 9); }
body.pcui:not(.pcui-art) #lmui-exp::after { inset: 0; }
/* 第二列：金幣 */
body.pcui #m-nav > #pcui-left .pl-g { top: calc(var(--u) * 27); left: calc(var(--u) * 16); right: calc(var(--u) * 2); width: auto; display: flex; align-items: center; justify-content: center; }
body.pcui #m-nav > #pcui-left .pl-g b { position: relative; padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 2); font: 700 10px/1 "Microsoft JhengHei", sans-serif; color: #f5d77b; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 3px #000; }
body.pcui #m-nav > #pcui-left .pl-ic { left: 0; width: calc(var(--u) * 16); height: calc(var(--u) * 18); display: flex; align-items: center; justify-content: center; }
body.pcui #m-nav > #pcui-left .pl-ic-g { top: calc(var(--u) * 27); }
body.pcui #m-nav > #pcui-left .pl-ic-g .gold-ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin: 0; vertical-align: 0; }
/* 第三列：防禦 ○ 魔防（兩格平分，中間職業徽章＝原圖那個圓） */
body.pcui #m-nav > #pcui-left .pl-ic-ac { top: calc(var(--u) * 47); }
body.pcui.pcui-art #m-nav > #pcui-left .pl-ic-ac { background: url("/data/ui/pc-main.png") no-repeat 0 calc(var(--u) * -73) / calc(var(--u) * 640) calc(var(--u) * 149); image-rendering: pixelated; }
body.pcui #m-nav > #pcui-left .pl-f { top: calc(var(--u) * 47); width: calc((var(--pc-lw) - var(--u) * 35) / 2); font-size: 10px; }
body.pcui #m-nav > #pcui-left .pl-ac { left: calc(var(--u) * 16); }
body.pcui #m-nav > #pcui-left .pl-mr { left: auto; right: calc(var(--u) * 2); }
body.pcui #m-nav > #pcui-left .pl-face { top: calc(var(--u) * 47); left: calc(var(--u) * 16 + (var(--pc-lw) - var(--u) * 35) / 2); width: calc(var(--u) * 17); height: calc(var(--u) * 18); padding: calc(var(--u) * 3);
  border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2a2630, #0c0a0e); }
body.pcui.pcui-art #m-nav > #pcui-left .pl-face { border-radius: 0; background: url("/data/ui/pc-main.png") no-repeat calc(var(--u) * -47) calc(var(--u) * -73) / calc(var(--u) * 640) calc(var(--u) * 149); image-rendering: pixelated; }
body.pcui #m-nav > #pcui-left .pl-face:hover { box-shadow: none; filter: brightness(1.3); }
/* 第四～六列：負重、飽食、正義（小圖示在原圖那列裡）；填色只畫在欄位裡面那格 */
body.pcui #m-nav > #pcui-left .pl-wt { top: calc(var(--u) * 67); }
body.pcui #m-nav > #pcui-left .pl-food { top: calc(var(--u) * 87); }
body.pcui #m-nav > #pcui-left .pl-law { top: calc(var(--u) * 107); }
body.pcui #m-nav > #pcui-left .pl-in { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 3.5);   /* 站長 2026-11-01「正義值是滿的但條不是滿的，負重飽食都一樣」：原本 7，滿格時右端還空一截 */ top: calc(var(--u) * 3); bottom: calc(var(--u) * 4); overflow: hidden; border-radius: 0 calc(var(--u) * 3) calc(var(--u) * 3) 0; }
body.pcui #m-nav > #pcui-left .pl-bar span { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 3.5); top: 0; bottom: 0; height: auto; font-size: 10px; }
body.pcui:not(.pcui-art) #m-nav > #pcui-left .pl-bar :is(.pl-in, span) { left: calc(var(--u) * 16); right: 0; top: 0; bottom: 0; }
/* 魔法延遲倒數的秒數（lmui.css 最後面）：電腦版快捷格跟著 --pk 放大 */
body.pcui #lmui-hot .lmui-slot.sk::after { font-size: max(15px, calc(var(--pk) * 9px)); }

/* 電腦版視窗往下延伸到血條上方（站長 2026-10-25「電腦版的視窗再往下延伸」：原本照原版 336 高，下面空一大塊）：上限 336 → 460，實際照畫面剩下的高度（扣掉底部聊天框那塊） */
:is(html.stage43 body, body.pcui-sm).pcui { --pc-oh: min(460px, calc(calc(var(--dvh1, 1dvh) * 100) - var(--orig-bar-h, 0px) - var(--lmui-pop-b, 340px) - 12px)); }
:is(html.stage43 body, body.pcui-sm).pcui :is(#lmui-win, #lmui-win2) { height: min(460px, calc(calc(var(--dvh1, 1dvh) * 100) - var(--lmui-pop-b, 340px) - 12px)); }

/* 電腦版裝備欄格子加大（站長 2026-10-25「道具圖欄位太小了」）：視窗加高到 460 後放得下，34 → 49；名字、經驗那兩行縮小、放進兩排格子中間的上方（站長「ID 往內縮、裝備圖往上移、再放大一點」），格子從最上面開始排，能力值照樣不用捲 */
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll { --ld-c: 49px; position: relative; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-col { gap: 2px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll { gap: 3px; padding-top: 4px; padding-bottom: 4px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-stats > div { padding-top: 2px; padding-bottom: 2px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title { font-size: 18px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title { position: absolute; z-index: 2; top: 6px; left: calc(var(--ld-c) + 14px); right: calc(var(--ld-c) + 14px); flex-wrap: wrap; gap: 0 6px; font-size: 15px; line-height: 1.2; pointer-events: none; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .lv, :is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .cl { font-size: 13px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-xp { position: absolute; z-index: 2; top: 30px; left: calc(var(--ld-c) + 14px); right: calc(var(--ld-c) + 14px); margin: 0; font-size: 11px; line-height: 1.3; pointer-events: none; }
/* 站長 2026-10-25「Exp 負重不顯示、顯示 ID 等級職業、血魔條放人物上方、裝備欄再放大」：經驗那行藏起來；名字一行、等級職業一行；血魔條改直排放名字底下（不佔下面的位置） */
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-xp, :is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .wt-note { display: none; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title { flex-direction: column; align-items: center; gap: 1px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .nm { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .lv { display: inline; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-bars { position: absolute; z-index: 2; top: 50px; left: calc(var(--ld-c) + 16px); right: calc(var(--ld-c) + 16px); flex-direction: column; gap: 3px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title { display: block; text-align: center; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .nm { display: block; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-title .cl { margin-left: 5px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-bars { top: 46px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-bars .ld2-bar { flex: none; height: 16px; }
:is(html.stage43 body, body.pcui-sm).pcui #lmui-doll .ld2-bar span { font-size: 11px; line-height: 16px; }