/* ============================================================
   WEEP WORLD — health bars over what you are fighting (js/health-bars.js)
   ============================================================
   Same skin as the HUD: near-black glass, gold hairline, pink fill. Thin and
   short so a crowd of them does not cover the fight. */

.hud > .hbars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hbar {
  position: absolute;
  left: 0; top: 0;
  width: 46px;
  height: 7px;
  padding: 1px;
  box-sizing: border-box;
  background: rgba(8, 6, 12, 0.78);
  border: 1px solid var(--ww-line-hi, rgba(255, 200, 60, 0.55));
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform, opacity;
}
.hbar.on { opacity: 1; }
.hbar-fill,
.hbar-ghost {
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  right: 1px;
  transform-origin: left center;
  border-radius: 1px;
}
/* The chunk you just took off lingers in gold for a beat, then drains. */
.hbar-ghost {
  background: var(--ww-gold, #ffc83c);
  transition: transform 0.6s ease 0.25s;
}
.hbar-fill {
  background: linear-gradient(180deg, var(--ww-pink-soft, #ff5c8a), var(--ww-pink, #ff2f6a));
  transition: transform 0.08s linear;
}
.hbar.mid .hbar-fill { background: linear-gradient(180deg, #ffd36a, var(--ww-amber, #ffb454)); }
.hbar.low .hbar-fill { background: linear-gradient(180deg, #ff6f6f, var(--danger, #ff4d5e)); }
.hbar.mid .hbar-ghost,
.hbar.low .hbar-ghost { background: var(--ww-cream, #efe8da); }
/* The one under your aim: a touch bigger, solid gold frame. */
.hbar.aim {
  width: 56px;
  height: 8px;
  border-color: var(--ww-gold, #ffc83c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 200, 60, 0.35);
}

body.mobile .hbar { width: 40px; height: 6px; }
body.mobile .hbar.aim { width: 48px; height: 7px; }

@media (prefers-reduced-motion: reduce) {
  .hbar, .hbar-fill, .hbar-ghost { transition: none; }
}