/* ===== 桌機版（js/pc.js 依「滑鼠＋可懸停＋視窗 ≥1024×600」在 <html> 加上 .pc）=====
   手機直式／橫式不會有 .pc，這裡的規則全部碰不到。倍率變數由 pc.js 算（已依 DPR 封頂，圖不會被放大超過原始像素）。 */

/* HUD：整塊用 zoom 放大，排版沿用直式那一套 */
html.pc #hud{zoom:var(--ui,1)}
html.pc #hud .sk{zoom:var(--skz,1)}
html.pc body.inmode #bBoss{left:calc(50vw / var(--ui,1) - 2px)}
html.pc #hud button,html.pc #hud [data-a],html.pc #pn [data-a],html.pc #dlg [data-a],html.pc .tog,html.pc .tb{cursor:pointer}
/* 技能鈕／選單鈕上的按鍵提示 */
html.pc .sb:before{position:absolute;right:-3px;bottom:-4px;z-index:2;min-width:17px;height:17px;padding:0 3px;border-radius:5px;background:#2a1b3d;border:1.5px solid #f6c95a;color:#ffe38a;font:900 11px/14px ui-rounded,"PingFang TC",sans-serif;text-align:center;pointer-events:none}
html.pc #s0:before{content:"1"}html.pc #s1:before{content:"2"}html.pc #s2:before{content:"3"}html.pc #s3:before{content:"4"}html.pc #s4:before{content:"5"}html.pc #s5:before{content:"6"}html.pc #s6:before{content:"7"}html.pc #s7:before{content:"8"}html.pc #s8:before{content:"0"}
html.pc .mb[data-v]:after{position:absolute;left:-4px;top:-5px;min-width:15px;height:15px;padding:0 2px;border-radius:5px;background:#2a1b3d;border:1.5px solid #f6c95a;color:#ffe38a;font:900 10px/12px ui-rounded,"PingFang TC",sans-serif;text-align:center;pointer-events:none}
html.pc .mb[data-v=bag]:after{content:"B"}html.pc .mb[data-v=quest]:after{content:"Q"}html.pc .mb[data-v=guild]:after{content:"G"}
html.pc .sb.kp{transform:scale(.9);filter:brightness(1.25)}html.pc #auto.kp{transform:scale(.94)}
html.pc .rb:hover,html.pc .mb:hover{filter:brightness(1.12)}html.pc .sb:hover{filter:brightness(1.15)}html.pc #auto:hover{filter:brightness(1.08)}
html.pc .tb:hover{border-color:#e0a83a}html.pc .li[data-a]:hover,html.pc .it:hover{filter:brightness(1.06)}

/* 劇情框：置中、限寬、跟 HUD 一起放大 */
html.pc #story{zoom:var(--uis,1)}
html.pc .sbox{left:50%;right:auto;width:min(760px,calc(100% - 16px));transform:translateX(-50%)}

/* ---------- 面板 ----------
   win.webp 的上緣中段有標題牌和葉飾，拉寬到 900px 會變形且超過原始像素，所以桌機面板改用 CSS 畫的同色系外框（任何 DPR 都銳利）。 */
html.pc .modal{padding:24px}
html.pc #pn .win{width:min(700px,calc(100vw - 64px));max-height:calc(100vh - 56px);display:flex;flex-direction:column;
  border:3px solid #ebbb4c;border-image:none;border-radius:22px;padding:56px 24px 20px;
  background:linear-gradient(#fff8e9,#fae8c6);filter:none;
  box-shadow:0 0 0 2.5px #7a4a14,inset 0 0 0 2px #fff6dc,inset 0 0 0 6px rgba(240,196,90,.28),0 18px 44px rgba(0,0,0,.45)}
html.pc #pn .win h2{top:-21px;left:50%;right:auto;transform:translateX(-50%);min-width:220px;padding:8px 44px;font-size:19px;line-height:24px;white-space:nowrap;
  background:linear-gradient(#46519c,#262c5e);border:3px solid #f0c45a;border-radius:99px;box-shadow:0 0 0 2.5px #7a4a14,0 5px 10px rgba(0,0,0,.35)}
html.pc #pn .win .x{right:-17px;top:-17px;width:42px;height:42px}
html.pc #pn .win>div{max-height:none}
html.pc #pn .win>div.tabs{zoom:var(--uip,1);margin:0 0 10px;flex:none;flex-wrap:wrap;overflow:visible}
html.pc #pnB{flex:1 1 auto;min-height:0;max-height:none;zoom:var(--uip,1);padding-right:4px}
html.pc #pnF{zoom:var(--uip,1);flex:none}
html.pc #pn[data-w=w] .win{width:min(1000px,calc(100vw - 64px));height:min(820px,calc(100vh - 56px))}
/* 分頁多的面板：分類放左邊一欄 */
html.pc #pn[data-l=side] .win{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:16px}
html.pc #pn[data-l=side] .win>div.tabs{grid-column:1;grid-row:1/3;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;margin:0;gap:7px;padding:2px 14px 2px 0;border-right:2px dashed rgba(160,115,50,.3)}
html.pc #pn[data-l=side] .tb{text-align:left;padding:8px 18px;font-size:13px;border-radius:12px;min-width:112px}
html.pc #pn[data-l=side] #pnB{grid-column:2;grid-row:1}
html.pc #pn[data-l=side] #pnF{grid-column:2;grid-row:2}
/* 清單型內容：兩欄（標題、說明、表格等其他元素仍佔整列） */
html.pc #pn[data-g="2"] #pnB{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:6px;align-content:start}
html.pc #pn[data-g="2"] #pnB>*{grid-column:1/-1;margin-bottom:0}
html.pc #pn[data-g="2"] #pnB>.li,html.pc #pn[data-g="2"] #pnB>.slot,html.pc #pn[data-g="2"] #pnB>.offer{grid-column:auto}
/* 背包：左邊身上裝備、右邊背包，兩欄各自捲動 */
html.pc #pnB.pcs{overflow:hidden}
html.pc .pc2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;height:100%}
html.pc .pc2>div{min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 6px 2px}
html.pc .pc2>.pcR{border-left:2px dashed rgba(160,115,50,.3);padding-left:14px}

/* 對話框：框圖在 Retina 上不放大（--uid=1），一般螢幕整個放大 */
html.pc #dlg .win{zoom:var(--uid,1)}

/* 設定裡的快捷鍵說明 */
.pckeys .kg{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 12px;align-items:center;margin:8px 0}
.pckeys .kg i{font-style:normal;font-weight:700;opacity:.9}
.pckeys kbd,#pctip kbd{display:inline-block;min-width:20px;padding:0 5px;margin:0 1px;border-radius:6px;background:#f3e2bd;color:#5a3a12;border:1.5px solid #c9a05a;border-bottom-width:3px;font:900 11px/16px ui-rounded,"PingFang TC",sans-serif;text-align:center;text-shadow:none}

/* 滑鼠提示框（放在 body，不吃 zoom，字級跟面板倍率走） */
#pctip{position:fixed;left:0;top:0;z-index:20;display:none;pointer-events:none;max-width:calc(300px * var(--uip,1));padding:8px 11px;border-radius:10px;
  background:rgba(22,18,46,.96);border:1.5px solid #f6c95a;box-shadow:0 0 0 1.5px #3a2616,0 6px 16px rgba(0,0,0,.45);color:#fff;
  font-size:calc(12.5px * var(--uip,1));font-weight:700;line-height:1.45}
#pctip b{font-size:1.08em}#pctip p{margin:3px 0}#pctip small{display:block;opacity:.75;font-size:.9em}#pctip small.lv{display:inline;color:#ffe38a;opacity:1}
#pctip .af{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0}#pctip .rw{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
/* 圖示格子不要因為面板變寬而放大（圖示來源約 128px：72px×DPR2 以內不超過原始像素） */
html.pc #pn .bag{grid-template-columns:repeat(auto-fill,minmax(52px,72px))!important;justify-content:start}
/* 地圖面板的畫布 720px：顯示寬度不超過 720/DPR */
html.pc #mapc{max-width:calc(720px / var(--dpr,1) / var(--uip,1));margin:0 auto}