/* 2026-11-11（使用者：電腦網頁版這個重新整理規劃 不要缺口一堆很醜）：電腦版（非觸控、非直式）底部快捷列整理成一整塊。
   - 底框改用 dock-frame-790.png（原版 shortcut-frame.png 只把右側玻璃管加長 56px），框盒仍是 734px，程式量的位置（聊天框、技能頁）不變；
     視覺多出的 56px 用 translateX 往左補，整塊仍置中。
   - 左上 tray-left.png、右上 tray-right.png 都是原版 shortcut-row2.png（橫管＋格子）裁切拼成：橫管跟第二排同高，
     左邊長格放金錢、右邊四格放「屬性／守護／靈魂／氣力」圓鈕；左邊雕花、右邊圓窗照原版疊在前面。
   - 經驗條放進加長的玻璃管（內徑 210px），文字一行在管內：名稱｜數字｜百分比。
   - 1/5 換頁鈕保留黑底白字（10/23 使用者要求），高度對齊下排格子。
   觸控版、直式（body.touch-client／html[data-portrait]）完全不套用；寬度不到 820px 時維持舊排版。 */
@media (min-width:820px){
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar{
 background:none!important;
 transform:translateX(calc(-50% - 28px)) scale(var(--desktop-dock-scale,1))!important;
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar::after{
 content:'';position:absolute;left:0;top:0;width:790px;height:98px;z-index:-1;pointer-events:none;
 background:
  url('/assets/ui/desktop-hud-20261111/dock-frame-790.png?v=20261111hud1') 0 0/790px 98px no-repeat,
  url('/assets/ui/desktop-hud-20261111/tray-left.png?v=20261111hud1') 0 7px/131px 47px no-repeat,
  url('/assets/ui/desktop-hud-20261111/tray-mid.png?v=20261111hud1') 520px 7px/114px 47px no-repeat,
  url('/assets/ui/desktop-hud-20261111/tray-right.png?v=20261111hud1') 634px 7px/156px 55px no-repeat;
}

/* 金錢：左上長格內，靠右對齊到金色捲飾前 */
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .bottom-nav{
 position:absolute!important;left:8px!important;top:19px!important;bottom:auto!important;right:auto!important;
 width:79px!important;height:13px!important;margin:0!important;padding:0!important;text-align:right!important;pointer-events:none
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .bottom-nav .gold{display:block;height:13px;margin:0;padding:0;line-height:13px}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .gold b{
 display:inline;font:700 11px/13px var(--font,sans-serif)!important;color:#f0cf7c!important;
 font-variant-numeric:tabular-nums;letter-spacing:0;text-shadow:0 1px 1px #000,0 0 2px #000;white-space:nowrap
}

/* 換頁鈕：黑底白字，佔原版小方格＋直長格，高度＝下排格子 */
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .skill-page-toggle{
 left:-46px!important;top:0!important;width:40px!important;height:30px!important;
 border:1px solid #8f7d55!important;border-radius:3px!important;background:#050505!important;
 font:700 14px/28px var(--font,sans-serif)!important;box-shadow:inset 0 0 0 1px #000,0 1px 2px #000a!important
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .skill-page-toggle:hover{border-color:#e2c47d!important;background:#15120b!important}

/* 經驗條：加長玻璃管內 x571～782、y72～83 */
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience{
 position:absolute!important;left:571px!important;top:72px!important;bottom:auto!important;right:auto!important;
 width:211px!important;height:11px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience .xp-track{
 position:absolute!important;inset:0!important;width:auto!important;height:11px!important;margin:0!important;padding:0!important;
 border:0!important;border-radius:6px!important;background:#000a!important;box-shadow:inset 0 1px 2px #000!important;overflow:hidden
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience .xp-track>span{
 display:block;height:100%!important;border-radius:6px!important;
 background:linear-gradient(#7affd6,#19c3c9 55%,#0b8d9e)!important;box-shadow:inset 0 1px #e6fff8b0!important;opacity:.9
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience>div:first-child{
 position:absolute!important;inset:0 40px 0 6px!important;z-index:2;display:flex!important;align-items:center;justify-content:space-between;gap:6px;
 height:11px!important;margin:0!important;padding:0!important;line-height:11px!important;white-space:nowrap;overflow:hidden
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience :is(#xp-label,#xp-text){
 font:700 9px/11px var(--font,sans-serif)!important;color:#f4fffb!important;text-shadow:0 0 2px #000,0 1px 1px #000,1px 0 1px #000!important;
 font-variant-numeric:tabular-nums;white-space:nowrap
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience #xp-label{flex:none;color:#ffe9a8!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience #xp-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar .experience #xp-pct{right:6px!important;font:700 9px/1 var(--font,sans-serif)!important;color:#fff!important;z-index:2}

/* 右上四格：屬性、守護（在快捷列裡）、靈魂、氣力（固定定位，照快捷列位置算） */
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar>:is(#element-gear-toggle,#guardian-quick-toggle){
 top:21px!important;width:30px!important;height:30px!important;min-width:0!important;min-height:0!important;
 font:700 11px/1 var(--font,sans-serif)!important;box-sizing:border-box!important
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar>#element-gear-toggle{left:639px!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar>#guardian-quick-toggle{left:678px!important;border-width:1px!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client) .actionbar>#guardian-quick-toggle>span{font:inherit!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client)>:is(#soul-quick-toggle,#spirit-quick-toggle){
 position:fixed!important;top:auto!important;bottom:47px!important;width:30px!important;height:30px!important;min-width:0!important;min-height:0!important;
 box-sizing:border-box!important;font-size:11px!important
}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client)>#soul-quick-toggle{left:calc(50% + 322px)!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client)>#spirit-quick-toggle{left:calc(50% + 361px)!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client)>#spirit-quick-toggle>span{transform:scale(.78)!important}
html:not([data-portrait="true"]) body.desktop-client:not(.touch-client)>#spirit-quick-toggle>small{
 bottom:-3px!important;padding:0 2px!important;border-radius:3px!important;background:#000c!important;font-size:8px!important;line-height:9px!important
}
}