/* V32 — REAL GENERATED ASSETS, IN-GAME.
   Base: V29. Only bottom HUD modules are reskinned/repositioned.
   Chat/topbar/world/game logic untouched. */

:root{
  --zk32-h: clamp(92px, 6.15vw, 116px);
  --zk32-status-w: clamp(249px, 16.72vw, 314px);
  --zk32-center-w: clamp(370px, 24.82vw, 466px);
  --zk32-right-w: clamp(226px, 15.18vw, 285px);
  --zk32-gap: 4px;
  --zk32-origin-x: calc(50% - 590px);
}

/* ----- LEFT STATUS: keep existing live IDs, replace only its presentation. ----- */
.hunter-status{
  position:fixed!important;
  left:var(--zk32-origin-x)!important;
  right:auto!important;
  top:auto!important;
  bottom:9px!important;
  width:var(--zk32-status-w)!important;
  height:var(--zk32-h)!important;
  z-index:66!important;
  transform:none!important;
  pointer-events:none!important;
}
.hunter-status .status-window{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:transparent url('assets/ui/hotbar_v32/status_panel.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
.hunter-status .window-body{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:transparent!important;
  overflow:visible!important;
}
.hunter-status .charline,.hunter-status .status-badges{display:none!important}

/* HP / KI live tracks: cover the painted placeholder fills and 0/0 values. */
.hunter-status .hud-meter-line{
  position:absolute!important;
  left:21.3%!important;
  width:67.5%!important;
  height:14.5%!important;
  margin:0!important;
  padding:0!important;
}
.hunter-status .hp-line{top:21.2%!important}
.hunter-status .ki-line{top:40.2%!important}
.hunter-status .hud-meter-line .meter{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:72%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(19,125,183,.92)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#061727,#020b13)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75),inset 0 0 8px rgba(0,145,220,.18)!important;
  overflow:hidden!important;
}
.hunter-status .hud-meter-line .meter i{
  position:absolute!important;
  left:0!important;top:0!important;height:100%!important;
  border-radius:999px!important;
  box-shadow:inset 0 1px 3px rgba(255,255,255,.35)!important;
}
.hunter-status .hp-line .meter i{background:linear-gradient(90deg,#e52116,#ff6c16,#ffd43a)!important}
.hunter-status .ki-line .meter i{background:linear-gradient(90deg,#0476ff,#03c8ff,#65efff)!important}
.hunter-status .hud-meter-line .meter span{
  position:absolute!important;
  left:104%!important;
  top:-4%!important;
  width:37%!important;
  height:108%!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border-radius:5px!important;
  background:#071421!important;
  color:#f7fbff!important;
  font:800 clamp(7px,.58vw,10px)/1 Arial,sans-serif!important;
  letter-spacing:-.15px!important;
  text-shadow:0 1px 2px #000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

/* EXP track + level + exp value. */
.hunter-status .hud-row{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.hunter-status .hud-row b{
  position:absolute!important;
  left:12.8%!important;
  top:62.6%!important;
  width:9%!important;
  font-size:0!important;
  color:#fff!important;
  text-align:center!important;
}
.hunter-status .hud-row b #levelHud{
  font:900 clamp(7px,.60vw,10px)/1 Arial,sans-serif!important;
  color:#ffd23d!important;
  text-shadow:0 1px 2px #000!important;
}
.hunter-status .hud-exp{
  position:absolute!important;
  left:75.7%!important;
  top:57.6%!important;
  width:13.6%!important;
  height:14%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:5px!important;
  background:#071421!important;
  color:#fff3c1!important;
  font:800 clamp(6.8px,.55vw,9.5px)/1 Arial,sans-serif!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.hunter-status .xp-meter{
  position:absolute!important;
  left:18.2%!important;
  top:58.0%!important;
  width:49.9%!important;
  height:13.2%!important;
  margin:0!important;
  border:1px solid rgba(19,125,183,.92)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#061727,#020b13)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.72)!important;
  overflow:hidden!important;
}
.hunter-status .xp-meter i{
  height:100%!important;
  background:linear-gradient(90deg,#ffb000,#ffd42c,#fff067)!important;
  border-radius:999px!important;
}

/* STA live track. Existing staminaText2 becomes the right-side value. */
.hunter-status .stamina-row{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.hunter-status #staminaText2{
  position:absolute!important;
  left:75.3%!important;
  top:76.3%!important;
  width:13.4%!important;
  height:13.4%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:5px!important;
  background:#071421!important;
  color:#d9f8ff!important;
  font:800 clamp(6.8px,.55vw,9.5px)/1 Arial,sans-serif!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.hunter-status .capacity-hud{display:none!important}
.hunter-status .stamina{
  position:absolute!important;
  left:18.1%!important;
  top:77.0%!important;
  width:49.0%!important;
  height:12.4%!important;
  margin:0!important;
  border:1px solid rgba(19,125,183,.92)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#061727,#020b13)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.72)!important;
  overflow:hidden!important;
}
.hunter-status .stamina i{
  height:100%!important;
  background:linear-gradient(90deg,#08b9c8,#35e2ef,#80f8ff)!important;
  border-radius:999px!important;
}

/* ----- CENTER + RIGHT GROUP ----- */
.hunter-footer{
  position:fixed!important;
  left:calc(var(--zk32-origin-x) + var(--zk32-status-w) + var(--zk32-gap))!important;
  right:auto!important;
  top:auto!important;
  bottom:9px!important;
  width:calc(var(--zk32-center-w) + var(--zk32-right-w) + var(--zk32-gap))!important;
  height:var(--zk32-h)!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  overflow:visible!important;
  z-index:67!important;
  pointer-events:none!important;
}
.hunter-centerbar{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.hunter-centerbar::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;
  width:var(--zk32-center-w)!important;
  height:var(--zk32-h)!important;
  background:transparent url('assets/ui/hotbar_v32/hotbar_panel.png') center/100% 100% no-repeat!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* Real clickable tabs aligned over the baked labels. */
.hunter-quick{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:var(--zk32-center-w)!important;
  height:21%!important;
  display:grid!important;
  grid-template-columns:7.5% 27% 38% 27% .5%!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:auto!important;
  z-index:4!important;
}
#depotQuick{grid-column:2!important}
#quickSell{grid-column:3!important}
#blessingsQuick{grid-column:4!important}
.hunter-quick button{
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  text-shadow:none!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.hunter-quick button:hover{background:rgba(255,255,255,.035)!important;filter:none!important}
#huntDetailsQuick,#leaveHunt,#imbuementsQuick{display:none!important}

/* 20 live slots sit inside the 20 baked openings. */
#hotbar{
  position:absolute!important;
  left:0!important;
  top:clamp(24px,1.6vw,30px)!important;
  width:var(--zk32-center-w)!important;
  height:calc(var(--zk32-h) - clamp(29px,1.9vw,35px))!important;
  margin:0!important;
  box-sizing:border-box!important;
  padding:0 clamp(13px,.9vw,17px) clamp(5px,.35vw,7px)!important;
  display:grid!important;
  grid-template-columns:repeat(10,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  column-gap:1.22%!important;
  row-gap:5.1%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:auto!important;
  pointer-events:auto!important;
  z-index:3!important;
}
#hotbar::before,#hotbar::after{display:none!important;content:none!important}
#hotbar .action-slot{
  position:relative!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:3px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  opacity:1!important;
  cursor:pointer!important;
}
#hotbar .action-slot:hover{
  background:rgba(20,185,255,.07)!important;
  box-shadow:inset 0 0 0 1px rgba(93,223,255,.42),0 0 6px rgba(0,176,255,.18)!important;
}
#hotbar .action-slot.disabled:not(.empty){opacity:.52!important;filter:saturate(.65) brightness(.8)!important}
#hotbar .action-slot img{
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:72%!important;height:72%!important;
  max-width:none!important;max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
#hotbar .slot-title,#hotbar .slot-kind{display:none!important}
#hotbar .action-slot .slot-key{
  position:absolute!important;
  left:3px!important;right:auto!important;top:2px!important;bottom:auto!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  color:#ffd43b!important;font:900 clamp(6px,.45vw,8px)/1 Arial,sans-serif!important;
  text-shadow:0 1px 2px #000!important;z-index:5!important
}
#hotbar .action-slot .slot-count{
  position:absolute!important;
  right:3px!important;bottom:2px!important;left:auto!important;top:auto!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  color:#fff3c8!important;font:800 clamp(6px,.43vw,8px)/1 Arial,sans-serif!important;
  text-shadow:0 1px 2px #000!important;z-index:5!important
}
#hotbar .action-slot .empty-plus{
  position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
  color:#7f9ab1!important;font:300 clamp(15px,1.05vw,21px)/1 Arial,sans-serif!important
}
#hotbar .action-slot.empty:hover .empty-plus{color:#d1f4ff!important}
#hotbar .action-slot .cooldown-mask{
  position:absolute!important;left:6%!important;right:6%!important;bottom:6%!important;
  background:rgba(0,5,10,.70)!important;border-radius:4px!important;pointer-events:none!important;z-index:3!important
}
#hotbar .action-slot.zk-hotbar-dragging{opacity:.30!important}
#hotbar .action-slot.zk-hotbar-drop-target{
  background:rgba(255,203,36,.10)!important;
  box-shadow:inset 0 0 0 2px rgba(255,205,40,.85),0 0 8px rgba(255,190,0,.35)!important;
}
#hotbar .action-slot.zk-hotbar-drop-target::before{display:none!important}

/* ----- RIGHT PANEL: existing live controls on the generated target shell. ----- */
.combat-settings{
  position:absolute!important;
  left:calc(var(--zk32-center-w) + var(--zk32-gap))!important;
  right:auto!important;
  top:0!important;
  width:var(--zk32-right-w)!important;
  height:var(--zk32-h)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent url('assets/ui/hotbar_v32/target_panel.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#eaf8ff!important;
  pointer-events:auto!important;
  z-index:3!important;
}
.combat-settings .setting-line{
  position:absolute!important;
  left:37.7%!important;
  width:54.0%!important;
  height:16.2%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}
.combat-settings .loadout-line{top:14.0%!important}
.combat-settings label.setting-line{top:36.0%!important}
.combat-settings .setting-line>span{display:none!important}
.combat-settings .loadout-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.combat-settings .dropdown-trigger,.combat-settings select{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 19% 0 5%!important;
  border:0!important;
  border-radius:4px!important;
  outline:0!important;
  background:#061421!important;
  color:#f2f9ff!important;
  font:800 clamp(6.5px,.50vw,9px)/1 Arial,sans-serif!important;
  box-shadow:none!important;
  appearance:none!important;
}
.combat-settings .dropdown-arrow{display:none!important}
.combat-settings .hud-dropdown{font-size:10px!important;z-index:90!important}

.combat-bottom-row{
  position:absolute!important;
  left:8.2%!important;
  top:62.4%!important;
  width:85.0%!important;
  height:27.0%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}
.combat-mini-icons{
  position:absolute!important;
  left:0!important;top:0!important;
  width:51.8%!important;height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:5.5%!important;
}
.combat-mini-icons button{
  width:auto!important;height:auto!important;min-width:0!important;
  margin:0!important;padding:9%!important;border:0!important;border-radius:5px!important;
  background:transparent!important;box-shadow:none!important;cursor:pointer!important
}
.combat-mini-icons button:hover{background:rgba(34,190,255,.07)!important}
.combat-mini-icons img{width:100%!important;height:100%!important;object-fit:contain!important;image-rendering:pixelated!important}
.range-inline{
  position:absolute!important;
  left:61.2%!important;top:0!important;
  width:38.8%!important;height:100%!important;
  display:grid!important;
  grid-template-columns:28% 44% 28%!important;
  align-items:stretch!important;
  gap:0!important;
}
.range-inline span{display:none!important}
.range-inline button{
  width:auto!important;height:auto!important;min-width:0!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  color:transparent!important;box-shadow:none!important;cursor:pointer!important
}
.range-inline button:hover{background:rgba(255,190,0,.05)!important}
.range-inline b{
  display:grid!important;place-items:center!important;
  min-width:0!important;width:auto!important;height:auto!important;
  margin:8% 6%!important;
  border-radius:4px!important;
  background:#071421!important;
  color:#ffbf27!important;
  font:900 clamp(8px,.65vw,12px)/1 Arial,sans-serif!important;
  text-shadow:0 1px 2px #000!important;
}

/* Preserve compact layout and avoid collisions on notebook/tablet widths. */
@media(max-width:1350px){
  :root{
    --zk32-h:92px;
    --zk32-status-w:249px;
    --zk32-center-w:370px;
    --zk32-right-w:226px;
    --zk32-origin-x:calc(50% - 590px);
  }
}
@media(max-width:1180px){
  :root{--zk32-origin-x:8px}
  .hunter-chat{display:none!important}
}
@media(max-width:880px){
  :root{
    --zk32-h:82px;
    --zk32-status-w:222px;
    --zk32-center-w:330px;
    --zk32-right-w:200px;
    --zk32-origin-x:6px;
  }
}