.hud-spell-slots button.empty-spell {
  background: #070b0d !important;
  border: 1px solid #263038 !important;
  box-shadow: inset 0 0 0 2px #020405, inset 0 0 7px #000;
}
.hud-spell-slots .add-spell {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: auto;
  border-radius: 50%;
  background: #26343f;
  color: #9aabb7;
  font: bold 13px/16px Arial;
  text-shadow: 0 1px #000;
  box-shadow: inset 0 1px #3e5260, 0 1px 2px #000;
}
.hud-spell-slots .empty-spell:hover .add-spell { background: #344a59; color: #d3e1e9; }
.action-bars { height: auto !important; min-height: 78px; }
#cooldown-strip { min-height: 20px; display: flex; justify-content: center; gap: 3px; padding: 2px; }
#cooldown-strip[hidden] { display: none; }
#cooldown-strip span { position: relative; width: 20px; height: 20px; display: grid; place-items: center; background: #080c0e; border: 1px solid #34434a; }
#cooldown-strip img { max-width: 18px; max-height: 18px; image-rendering: pixelated; }
#cooldown-strip b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: bold 8px Tahoma; text-shadow: 1px 1px #000; background: #0005; }

.hud-spell-slots button .spell-cooldown{position:absolute;z-index:5;inset:1px;display:grid;place-items:center;pointer-events:none;font-style:normal;color:#fff;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;background:linear-gradient(to top,rgba(0,0,0,.84) var(--cooldown-fill,100%),rgba(0,0,0,.18) var(--cooldown-fill,100%));border:1px solid #69777eaa}
.hud-spell-slots button .spell-cooldown[hidden]{display:none}
.hud-spell-slots button .spell-cooldown b{font:bold 15px Tahoma;color:#fff}
.hud-spell-slots button .spell-cooldown small{position:absolute;left:2px;right:2px;bottom:1px;font:bold 6px Tahoma;letter-spacing:.35px;color:#f1c85a;text-align:center}
.hud-spell-slots button.cooling-down>span img{filter:grayscale(.35) brightness(.55)}
.header-player { grid-template-columns: auto auto auto !important; }
.header-player #recover-vitals { padding: 3px 7px; border: 1px solid #566a5b; background: #1d2b21; color: #9fe3ae; cursor: pointer; }

.action-bars { overflow: visible; }
.action-bars:not(.dock-custom-position) {
  position: fixed;
  left: calc(50vw + 120px);
  right: auto;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 30;
}
.hotbar-tabs {
  position: absolute;
  left: -23px;
  top: 5px;
  display: grid;
  gap: 2px;
  width: 22px;
  padding: 3px 2px;
  background: #111511 url('assets/client-hud/images/background.png');
  border: 2px solid transparent;
  border-image: url('assets/client-hud/images/3pixel-frame-borderimage.png') 3 fill repeat;
  box-shadow: 0 2px 5px #000b;
}
.hotbar-tabs button {
  width: 16px;
  height: 18px !important;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid #434941 !important;
  background: linear-gradient(#30352f,#171a17) !important;
  color: #858b82 !important;
  font: bold 9px/16px Tahoma !important;
  text-shadow: 1px 1px #000;
  box-shadow: inset 0 0 0 1px #0b0d0b;
}
.hotbar-tabs button:hover { color: #d1cfbd !important; border-color: #777c70 !important; }
.hotbar-tabs button.active {
  color: #fff2a1 !important;
  border-color: #c7a83f !important;
  background: linear-gradient(#695c2d,#302817) !important;
  box-shadow: inset 0 0 0 1px #e3c85e, 0 0 5px #e5bd3caa;
}
.hotbar-tabs button.active::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 5px;
  border-width: 4px 0 4px 4px;
  border-style: solid;
  border-color: transparent transparent transparent #d8b94e;
}

.dock-controls {
  position: absolute; z-index: 4; top: -20px; right: 3px; height: 19px;
  display: flex; align-items: center; gap: 2px; padding: 1px 2px 0;
  background: #0b1012f2; border: 1px solid #39454a; border-bottom: 0;
  box-shadow: 0 -1px 4px #0009;
}
.dock-controls button, .dock-drag-handle {
  box-sizing: border-box; width: 20px; height: 17px; display: grid; place-items: center;
  padding: 0; border: 1px solid #303b40; background: linear-gradient(#202a2f,#101619);
  color: #aeb9bd; font: 11px/1 "Segoe UI Symbol",Tahoma,sans-serif;
  text-shadow: 1px 1px #000; user-select: none;
}
.dock-controls button { cursor: pointer; }
.dock-controls button:hover { color: #fff1a8; border-color: #6c785f; }
.dock-drag-handle { width: 22px; color: #4c585d; cursor: not-allowed; touch-action: none; letter-spacing: -4px; padding-right: 4px; }
.action-bars.dock-unlocked .dock-drag-handle { color: #b9c7cc; cursor: grab; }
.action-bars.dock-dragging .dock-drag-handle { cursor: grabbing; }
.action-bars.dock-custom-position { position: fixed !important; z-index: 1400; }
.action-bars.dock-dragging { will-change: transform; transition: none !important; user-select: none; }

.google-login-container {
  min-height: 42px;
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.google-login-container.unavailable {
  min-height: 38px;
  padding: 8px;
  border: 1px solid #4b4d48;
  background: #141613;
  color: #8d8f89;
  font-size: 11px;
}
/* Preserve a readable central action bar even with both side rails visible. */
@media(min-width:1051px){.action-bars:not(.dock-custom-position){left:calc(50vw + 120px)!important;bottom:6px!important;width:min(650px,calc(100vw - var(--hud-rail-width,0px) - 405px))!important;min-width:540px!important;min-height:88px!important;padding:7px 9px!important}.hud-spell-slots{gap:4px!important}.hud-spell-slots button{height:50px!important;min-width:0}.hud-spell-slots button img{max-width:42px!important;max-height:42px!important}.action-bars kbd{font-size:8px!important}.hud-vitals{margin-top:5px!important}}

/* The action bar is a permanent bottom HUD element, including during Hunts. */
#action-bars,#action-bars.dock-custom-position{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:6px!important;
  transform:translateX(-50%)!important;
  visibility:visible!important;
  opacity:1!important;
}
#action-bars .dock-controls{display:none!important}