/* V1.49 · Health damage trail, heal convergence and critical threshold language. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"] {
  position: relative !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"] > i {
  position: relative !important;
  z-index: 2 !important;
  transition: width 180ms cubic-bezier(.2,.72,.22,1), background 220ms ease !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-state="healthy"] > i {
  background: linear-gradient(180deg, rgba(255,255,255,.48), transparent 48%), linear-gradient(90deg, #5bd09a, #2d9b70) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-state="wounded"] > i {
  background: linear-gradient(180deg, rgba(255,255,255,.46), transparent 48%), linear-gradient(90deg, #f0c959, #c67a36) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-state="critical"] > i {
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 48%), linear-gradient(90deg, #f27a5f, #b93242) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"] > .hp-damage-trail {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  width: 100%;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(255, 201, 80, .84), rgba(239, 76, 64, .94)) !important;
  box-shadow: 0 0 8px rgba(255, 91, 63, .3) !important;
  transition: width 480ms cubic-bezier(.18,.72,.2,1) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter.hp-damaged {
  animation: hp-meter-damage 520ms ease-out both !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter.hp-healed {
  animation: hp-meter-heal 540ms ease-out both !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-state="critical"]::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: -2px !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 103, 82, .68) !important;
  border-radius: inherit !important;
  box-shadow: 0 0 10px rgba(238, 58, 55, .28) !important;
  animation: hp-critical-breathe 1.25s ease-in-out infinite !important;
}

@keyframes hp-meter-damage {
  0% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 rgba(239,64,54,0); }
  32% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 1px rgba(255,126,99,.44), 0 0 12px rgba(239,64,54,.24); }
  100% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 rgba(239,64,54,0); }
}

@keyframes hp-meter-heal {
  0% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 rgba(72,211,143,0); }
  38% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 1px rgba(125,239,178,.46), 0 0 12px rgba(72,211,143,.26); }
  100% { box-shadow: inset 0 0 9px rgba(0,0,0,.52), 0 0 0 rgba(72,211,143,0); }
}

@keyframes hp-critical-breathe {
  0%, 100% { opacity: .38; }
  50% { opacity: .86; }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-state="critical"]::after {
    inset: -1px !important;
    box-shadow: 0 0 7px rgba(238,58,55,.24) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"]::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"] > i,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .meter.meter.meter[data-health-feedback="v149"] > .hp-damage-trail {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    transition-delay: 0ms !important;
  }
}
