/* V1.75 · Portrait-local critical health edge and restrained danger semantics. */
#battle:not([hidden]) :is(.fighter, .seat-fighter).health-critical-combatant :is(.avatar, .team-art) {
  position: relative;
  isolation: isolate;
}

#battle:not([hidden]) :is(.fighter, .seat-fighter) :is(.avatar, .team-art) > .critical-health-cue {
  --critical-edge: rgba(255, 92, 70, .72);
  --critical-glow: rgba(225, 36, 45, .3);
  position: absolute;
  z-index: 14;
  inset: 4px;
  display: block;
  overflow: visible;
  border: 1px solid var(--critical-edge);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(186, 18, 33, .22), transparent 58%),
    linear-gradient(180deg, rgba(255, 77, 61, .06), transparent 24% 70%, rgba(132, 8, 25, .14));
  box-shadow:
    inset 0 0 18px rgba(195, 21, 35, .15),
    0 0 9px var(--critical-glow);
  pointer-events: none;
  animation: critical-health-local-breathe 1.45s ease-in-out infinite;
}

#battle:not([hidden]) .fighter.health-critical-combatant .avatar > .critical-health-cue > strong,
#battle:not([hidden]) .seat-fighter.health-critical-combatant .team-art > .critical-health-cue > strong {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 2px 6px 3px;
  border: 1px solid rgba(255, 189, 126, .56);
  border-radius: 999px;
  color: #fff0d2;
  background: linear-gradient(180deg, rgba(142, 24, 31, .94), rgba(48, 7, 15, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 3px 9px rgba(33, 3, 9, .38);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .1em;
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
  white-space: nowrap;
}

#battle:not([hidden]) .seat-fighter.health-critical-combatant .team-art > .critical-health-cue {
  inset: 3px;
}

#battle:not([hidden]) .seat-fighter.health-critical-combatant .team-art > .critical-health-cue > strong {
  top: 3px;
  right: 3px;
  min-height: 13px;
  padding: 1px 4px 2px;
  font-size: 6px;
}

@keyframes critical-health-local-breathe {
  0%, 100% {
    opacity: .56;
    box-shadow: inset 0 0 14px rgba(195, 21, 35, .1), 0 0 5px rgba(225, 36, 45, .18);
  }
  50% {
    opacity: 1;
    box-shadow: inset 0 0 22px rgba(195, 21, 35, .2), 0 0 12px rgba(225, 36, 45, .34);
  }
}

body[data-vfx-quality="low"] #battle:not([hidden]) .critical-health-cue {
  animation: none;
  opacity: .78;
  box-shadow: inset 0 0 10px rgba(195, 21, 35, .11);
}

@media (max-width: 720px) {
  #battle:not([hidden]) .fighter.health-critical-combatant .avatar > .critical-health-cue {
    inset: 3px;
  }

  #battle:not([hidden]) .fighter.health-critical-combatant .avatar > .critical-health-cue > strong {
    top: 3px;
    right: 3px;
    min-height: 14px;
    padding: 1px 5px 2px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #battle:not([hidden]) .critical-health-cue {
    animation: none !important;
    opacity: .86;
  }
}