/* Fortress HUD: shipped stone texture and fixed-size modular metal corners.
   One desktop dock owns resource meters, F1–F4, skills and equipment actions. */
#hotbar-dock {
  position:absolute;bottom:14px;left:50%;width:780px;max-width:calc(100vw - 180px);
  transform:translateX(-50%) scale(calc(var(--ui-scale) * var(--hud-hotbar-scale)));
  transform-origin:bottom center;pointer-events:auto;image-rendering:pixelated;
  color:var(--art-cream);font-family:Outfit,system-ui,sans-serif;
}
#hotbar-dock:has(.hot-ability ~ .hot-ability){width:900px}
#hud-effects{position:absolute;bottom:calc(100% + 16px);left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;pointer-events:none}
#hud-effects #hud-buffs,#hud-effects #hud-debuffs{display:flex;flex-wrap:wrap;gap:4px;align-items:end;margin:0;min-width:0;pointer-events:auto}
#hud-effects #hud-debuffs{justify-content:flex-end}
#hud-buff-icons,#hud-debuff-icons{display:flex;flex-wrap:wrap;gap:4px}
#hud-debuff-icons{justify-content:flex-end}
#hud-buff-icons:empty,#hud-debuff-icons:empty{display:none}
#hud-effects .buff-icon{width:40px;height:44px;box-sizing:border-box;flex-shrink:0;border-radius:2px;background:#111a20 var(--art-stone) repeat;background-size:64px 64px}
#hud-effects .buff-icon img{width:28px;height:28px;image-rendering:pixelated}
#hud-effects .buff-icon .g{font-size:20px}
#hud-effects .buff-icon:has(.buff-remaining:not([hidden])) > :is(img,.g){margin-top:-12px}
#hud-effects .buff-remaining{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;text-align:center;background:#0d1416;color:#fff1d8;font:700 12px/16px Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums}
#hud-effects .buff-icon.bad .buff-remaining{color:#ffb9ac}
#hud-effects .buff-remaining[hidden]{display:none}
#hud-effects :is(#xp-boost-badge,#food-badge,#torch-badge,#temper-badge){margin:0}
.mobile #hud-effects{position:static;gap:8px}
body:not(.mobile) #char-hud > .bar { display:none; }
/* Keep the party panel's mount point, without the old desktop nameplate/frame. */
body:not(.mobile) #char-hud { display:contents; }
body:not(.mobile) #hud-name,
body:not(.mobile) #char-hud::before,
body:not(.mobile) #char-hud::after { display:none; }
#hotbar-dock #hotbar {
  position:relative;inset:auto;transform:none;width:100%;max-width:none;box-sizing:border-box;
  padding:8px 62px 14px;gap:6px;border:2px solid #647078!important;border-top:0!important;border-image:none!important;
  border-radius:0 0 3px 3px!important;
  background:#111a20 var(--art-stone) repeat!important;background-size:128px 128px!important;
  box-shadow:inset 0 0 0 2px #0d1416,inset 0 -4px #303c44,0 3px #0d1416!important;
}
#hotbar-dock #hotbar::before,#hotbar-dock #hotbar::after {
  width:32px;height:32px;top:auto;bottom:0;transform:none;
  background-size:32px 32px;image-rendering:pixelated;
}
#hotbar-dock #hotbar::before{left:0;background-image:url('/assets/ui/ornaments/corner-bl-v1.png')}
#hotbar-dock #hotbar::after{right:0;background-image:url('/assets/ui/ornaments/corner-br-v1.png')}
#hotbar-vitals {
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
  align-items:center;gap:8px;box-sizing:border-box;min-height:66px;padding:5px 62px 0;
  border:2px solid #647078;border-bottom:0;border-radius:3px 3px 0 0;
  background:#111a20 var(--art-stone) repeat;background-size:128px 128px;
  box-shadow:inset 0 0 0 2px #0d1416,inset 0 4px #78868a;
}
#hotbar-vitals::before,#hotbar-vitals::after {
  content:'';position:absolute;top:0;width:32px;height:32px;pointer-events:none;
  background-size:32px 32px;image-rendering:pixelated;
}
#hotbar-vitals::before{left:0;background-image:url('/assets/ui/ornaments/corner-tl-v1.png')}
#hotbar-vitals::after{right:0;background-image:url('/assets/ui/ornaments/corner-tr-v1.png')}
.hb-vital {
  display:flex;align-items:center;gap:8px;min-width:0;padding:5px 7px;
  border:2px solid #485660;background:#111a20 var(--art-stone) repeat;
  background-size:64px 64px;box-shadow:inset 0 0 0 1px #0d1416,0 2px #0d1416;
}
.hb-vital > b{font:700 12px/1 Cinzel,serif;color:#e7dfc5;text-shadow:1px 1px #0d1416}
.hb-vital-track{position:relative;flex:1;min-width:0;height:20px;border:2px solid #0d1416;background:#080f14;box-shadow:0 0 0 1px #66747c}
.hb-vital-fill{position:absolute;inset:0 auto 0 0;max-width:100%;background:#b74138;box-shadow:inset 0 3px #d46a53,inset 0 -3px #782b2d}
.hb-mp .hb-vital-fill{background:#356d9e;box-shadow:inset 0 3px #649db8,inset 0 -3px #224460}
.hb-vital-track > span{position:absolute;inset:0;display:grid;place-items:center;font:700 11px/1 Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff1d8;text-shadow:1px 1px #0d1416,-1px -1px #0d1416;white-space:nowrap}
#hb-xp-meter {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-top:-15px;padding:5px 3px 2px;min-height:72px;box-sizing:border-box;
  background:#111a20 var(--art-stone) repeat;background-size:64px 64px;
  border:2px solid #6b7980;border-bottom:0;box-shadow:inset 0 3px #8e9894;
  clip-path:polygon(0 12px,8px 12px,8px 4px,20px 4px,20px 0,calc(100% - 20px) 0,calc(100% - 20px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 12px,100% 12px,100% 100%,0 100%);
}
.hb-xp-orb {
  --xp-circle:polygon(0 30%,10% 30%,10% 20%,20% 20%,20% 10%,30% 10%,30% 0,70% 0,70% 10%,80% 10%,80% 20%,90% 20%,90% 30%,100% 30%,100% 70%,90% 70%,90% 80%,80% 80%,80% 90%,70% 90%,70% 100%,30% 100%,30% 90%,20% 90%,20% 80%,10% 80%,10% 70%,0 70%);
  position:relative;width:42px;height:42px;box-sizing:border-box;flex-shrink:0;
  background:#c9a35c;clip-path:var(--xp-circle);
}
/* Liquid grows from its bottom within the stepped circle. */
.hb-xp-orb::before{content:'';position:absolute;inset:3px;background:#0d1416;clip-path:var(--xp-circle);pointer-events:none}
.hb-xp-liquid{position:absolute;inset:5px;background:#080f14;clip-path:var(--xp-circle)}
#hb-xp-fill{position:absolute;bottom:0;left:0;right:0;max-height:100%;background:#c3a04c var(--art-wood-selected) repeat;background-size:64px 64px;background-blend-mode:luminosity;box-shadow:inset 0 3px #e1c77d,inset 0 -3px #8d6b30}
#hb-xp-meter > span{margin-top:1px;color:#e1c77d;font:700 10px/1 Cinzel,serif}
#hb-xp-meter > small{margin-top:2px;color:#e7dfc5;font:700 9px/1 Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums}
#hb-xp-meter:focus-visible{outline:2px solid #e1c77d;outline-offset:2px}
#hb-xp-rate{position:absolute;top:16px;left:calc(50% + 23px);padding:2px 3px;border:1px solid #6d7357;background:#111a20 var(--art-stone) repeat;background-size:64px 64px;color:#aab6a7;font:700 9px/1 Outfit,system-ui,sans-serif;white-space:nowrap}
#hb-xp-rate[data-boosted='true']{color:#e1c77d;border-color:#c9a35c;background-image:var(--art-wood-selected)}
#hotbar-frame{position:relative}
#hotbar-tool-modes{position:absolute;inset:0;z-index:3;pointer-events:none}
#hotbar-tool-modes .hb-modes{position:absolute;inset:0;display:block;margin:0;padding:0;border:0;pointer-events:none}
#hotbar-tool-modes .hb-mode{
  position:absolute;width:40px;height:38px;box-sizing:border-box;display:flex;flex-direction:column;
  justify-content:center;gap:1px;padding:3px;border:1px solid #66747c;border-radius:2px;
  background:#111a20 var(--art-stone) repeat;background-size:64px 64px;
  box-shadow:inset 0 0 0 1px #0d1416;pointer-events:auto;transition:none;
}
#hotbar-tool-modes [data-tool='combat']{left:12px;top:15px}
#hotbar-tool-modes [data-tool='torch']{left:12px;bottom:18px}
#hotbar-tool-modes [data-tool='fish']{right:12px;top:15px}
#hotbar-tool-modes [data-tool='mine']{right:12px;bottom:18px}
#hotbar-tool-modes .hb-mode .hbm-k{font:700 9px/1 Outfit,system-ui,sans-serif;color:#e7dfc5;opacity:1}
#hotbar-tool-modes .hb-mode .hbm-k.pad-key{font-size:8px;white-space:nowrap}
#hotbar-tool-modes .hb-mode .hbm-g{font-size:16px;line-height:18px}
#hotbar-tool-modes .hb-mode .hbm-n{position:absolute;right:2px;bottom:1px;font-size:9px;margin:0;text-shadow:1px 1px #0d1416}
#hotbar-tool-modes .hb-mode:hover{background-image:var(--art-wood-hover);border-color:#e1c77d}
#hotbar-tool-modes .hb-mode.active{background-image:var(--art-wood-selected);border-color:#c9a35c;box-shadow:inset 0 -2px #c9a35c,inset 0 0 0 1px #0d1416}
#hotbar-tool-modes .hb-mode:focus-visible{outline:2px solid #e1c77d;outline-offset:1px}
#hotbar-dock #hotbar .hot-slot{box-sizing:border-box;width:48px;height:48px;border-color:#66747c!important;border-radius:1px!important;background:#111a20 var(--art-stone) repeat!important;background-size:64px 64px!important;box-shadow:inset 0 0 0 1px #0d1416,inset 0 2px #a2aba344,0 2px #0d1416!important}
#hotbar-dock #hotbar .hot-slot:hover{border-color:#e1c77d!important;box-shadow:inset 0 0 0 1px #c9a35c,0 2px #0d1416!important}
#hotbar-dock #hotbar .hot-slot .key{background:#111a20 var(--art-stone) repeat;color:#e7dfc5;border-color:#8d9b9c;border-radius:1px}
.mobile #hotbar-dock{display:none}
#hotbar-dock #hotbar .hot-slot.ultimate-ready{border-color:#e1c77d!important;box-shadow:inset 0 0 0 2px #c9a35c,0 2px #0d1416!important}
.ultimate-ready-mark{position:absolute;right:2px;top:1px;z-index:5;color:#e1c77d;font:700 12px/1 Outfit,system-ui,sans-serif;text-shadow:1px 1px #0d1416;pointer-events:none}
.act-skill.ultimate-ready{outline:2px solid #e1c77d;outline-offset:-2px}
@media(max-width:1500px){
  body:not(.mobile) #chat{bottom:calc(var(--hotbar-dock-height,180px) * var(--ui-scale) * var(--hud-hotbar-scale) + 24px)}
}
@media(max-width:1100px){
  #hotbar-dock,#hotbar-dock:has(.hot-ability ~ .hot-ability){max-width:calc(100vw - 32px);width:780px}
  #hotbar-dock .hb-wallet{left:auto;right:0;bottom:calc(var(--hotbar-dock-height,180px) + 14px);flex-direction:row;gap:12px;min-width:0}
}
@media(max-width:760px){
  #hotbar-dock #hotbar{padding-left:56px;padding-right:56px;gap:4px}
  #hotbar-dock #hotbar .hot-slot{width:42px;height:42px}
  #hotbar-vitals{padding-left:56px;padding-right:56px;gap:5px;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}
  .hb-vital{gap:4px;padding:4px}.hb-vital > b{font-size:10px}.hb-vital-track > span{font-size:10px}
}