/* =====================================================================
   SCOUNDREL — hud.css
   Bedrohungsbalken oben · Lebensbalken · Treffer-/Heil-Reaktion.
   ===================================================================== */

/* Bedrohung — noch lauernder Monsterschaden (oben) */
.threat{ margin-top:-2px; }
.threat-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); font-weight:700; font-size:clamp(10px,1.9vw,12px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--blood-hi);
  margin-bottom:6px; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.threat-label b{ font-size:clamp(14px,2.6vw,17px); color:var(--blood-hi); }
.threatbar{
  height:10px; border-radius:6px; background:rgba(90,30,20,.32);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55); overflow:hidden;
}
.threatbar > span{
  display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--blood-deep),var(--blood),var(--blood-hi));
  box-shadow:0 0 10px rgba(214,73,44,.5);
  transition:width .55s cubic-bezier(.4,1.1,.5,1);
}

/* Lebensbalken */
.hpbar{
  height:9px; border-radius:6px; margin:8px auto 6px; width:84%;
  background:rgba(90,60,30,.35);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
}
.hpbar > span{
  display:block; height:100%; border-radius:6px;
  transition:width .5s cubic-bezier(.4,1.3,.5,1), background .4s;
  box-shadow:0 0 8px rgba(134,200,115,.5);
  background:linear-gradient(90deg,var(--herb),var(--herb-hi)); /* Fallback */
}
/* Füllfarbe nach Lebensstand (von render.js gesetzt) */
.hpbar > span.hp-high{ background:linear-gradient(90deg,var(--herb),var(--herb-hi)); }
.hpbar > span.hp-mid { background:linear-gradient(90deg,var(--amber-deep),var(--amber)); }
.hpbar > span.hp-low { background:linear-gradient(90deg,var(--blood),var(--blood-hi)); }

/* Treffer-/Heil-Reaktion der Lebenszahl (#hpBig) */
.hp-pop{ animation:hpPop .5s ease; }
@keyframes hpPop{ 0%{transform:scale(1)} 35%{transform:scale(1.22)} 100%{transform:scale(1)} }
.hp-hurt{ animation:hpHurt .45s ease; }
@keyframes hpHurt{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }