/* V26 — HOTBAR ONLY.
   IMPORTANT: this file intentionally touches only #hotbar and its descendants.
   Chat, quick buttons, target settings, footer geometry and topbar are untouched. */

#hotbar{
  --zk-hb-slot:clamp(34px,2.45vw,48px);
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:6px 8px!important;
  display:grid!important;
  grid-template-columns:repeat(10,var(--zk-hb-slot))!important;
  grid-template-rows:repeat(2,var(--zk-hb-slot))!important;
  gap:4px!important;
  justify-content:center!important;
  align-content:center!important;
  overflow:hidden!important;
  border:1px solid #0876aa!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(3,23,37,.985),rgba(2,14,24,.99))!important;
  box-shadow:
    inset 0 0 0 1px rgba(0,190,255,.10),
    inset 0 8px 18px rgba(9,58,84,.18)!important;
}

#hotbar .action-slot{
  box-sizing:border-box!important;
  position:relative!important;
  width:var(--zk-hb-slot)!important;
  height:var(--zk-hb-slot)!important;
  min-width:var(--zk-hb-slot)!important;
  min-height:var(--zk-hb-slot)!important;
  margin:0!important;
  padding:3px!important;
  display:block!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url('assets/ui/hotbar_v26/slot_normal.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
  color:#fff!important;
  cursor:pointer!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

#hotbar .action-slot::after{display:none!important;content:none!important}

#hotbar .action-slot:hover{
  border:0!important;
  background-image:url('assets/ui/hotbar_v26/slot_hover.png')!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

#hotbar .action-slot:focus-visible{
  outline:1px solid #9cecff!important;
  outline-offset:-3px!important;
}

#hotbar .action-slot.disabled:not(.empty){
  opacity:.68!important;
  filter:none!important;
  background-image:url('assets/ui/hotbar_v26/slot_disabled.png')!important;
}

#hotbar .action-slot.disabled:not(.empty):hover{
  opacity:.82!important;
  filter:none!important;
  background-image:url('assets/ui/hotbar_v26/slot_disabled.png')!important;
}

#hotbar .action-slot img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:calc(var(--zk-hb-slot) - 10px)!important;
  height:calc(var(--zk-hb-slot) - 10px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  filter:none!important;
  z-index:1!important;
}

#hotbar .slot-title,
#hotbar .slot-kind{display:none!important}

#hotbar .action-slot .slot-key{
  position:absolute!important;
  left:4px!important;
  right:auto!important;
  top:2px!important;
  bottom:auto!important;
  z-index:4!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#ffd326!important;
  font:900 clamp(7px,.56vw,9px)/1 Arial,sans-serif!important;
  text-shadow:0 1px 1px #000!important;
}

#hotbar .action-slot .slot-count{
  position:absolute!important;
  right:4px!important;
  left:auto!important;
  bottom:3px!important;
  top:auto!important;
  z-index:4!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f4f8ff!important;
  font:800 clamp(7px,.56vw,9px)/1 Arial,sans-serif!important;
  text-shadow:0 1px 2px #000!important;
}

#hotbar .action-slot .empty-plus{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:auto!important;
  height:auto!important;
  color:#7894aa!important;
  font:300 clamp(18px,1.55vw,26px)/1 Arial,sans-serif!important;
  text-shadow:none!important;
}

#hotbar .action-slot.empty:hover .empty-plus{color:#b9e8ff!important}

#hotbar .action-slot .cooldown-mask{
  position:absolute!important;
  left:4px!important;
  right:4px!important;
  bottom:4px!important;
  z-index:3!important;
  background:rgba(0,7,13,.72)!important;
  border-radius:2px!important;
  pointer-events:none!important;
}

/* Keep the hotbar responsive without changing any neighboring module. */
@media (max-width:1180px){
  #hotbar{--zk-hb-slot:clamp(31px,3.15vw,39px);gap:3px!important;padding:5px 6px!important}
}