.player-health {
  --health-accent: #baff57;
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #e5f9d7;
}

.player-health[data-health-state="low"] { --health-accent: #f4c55f; }
.player-health[data-health-state="critical"] { --health-accent: #ff8b79; }

.player-health-label {
  color: #d4e7c5;
  font: 800 8px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.player-health-value {
  min-width: 7ch;
  font: 700 9px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.player-health-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid #b0e77e59;
  border-radius: 3px;
  background: #09110a;
}

.player-health-fill {
  display: block;
  height: 100%;
  transform: scaleX(var(--player-health-ratio, 1));
  transform-origin: left center;
  background: linear-gradient(#edffcd, var(--health-accent) 40%, var(--health-accent) 65%, #395923);
  box-shadow: 0 0 7px var(--health-accent);
  transition: transform 180ms ease-out;
}

.player-damage-edges,
.player-damage-edges::after,
.player-damage-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.player-damage-edges { z-index: 10; }
.player-damage-edges::after,
.player-damage-flash {
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 52%, #b9261952 82%, #f33d23a8 100%);
  box-shadow: inset 0 0 42px #e72f2466;
}

.player-damage-edges::after { content: ''; }
.hero[data-player-critical="true"] .player-damage-edges::after { animation: danger-pulse 1.14s ease-in-out infinite; }
.hero[data-player-critical="true"] .player-health-track { animation: danger-meter 1.14s ease-in-out infinite; }

@keyframes danger-pulse { 0%,100% { opacity: .24; } 50% { opacity: .75; } }
@keyframes danger-meter { 0%,100% { box-shadow: 0 0 2px #ff402433; } 50% { box-shadow: 0 0 12px #ff4828c2; } }

.player-defeat {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: min(250px, calc(100vw - 32px));
  padding: 19px;
  transform: translate(-50%, -50%);
  border: 1px solid #b5ed7d99;
  border-radius: 13px;
  color: #edf9db;
  background: radial-gradient(ellipse at 50% 2%, #3e542e, #101c12 65%, #0b140d);
  box-shadow: 0 10px 32px #020603c7, inset 0 1px 2px #dcffb334;
  text-align: center;
}

.player-defeat-kicker {
  color: #bfe895;
  font: 800 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.player-defeat h2 { margin: 6px 0 13px; font: 900 24px/1 var(--mono); }

.player-defeat button {
  padding: 8px 15px;
  border: 1px solid #b0d979;
  border-radius: 6px;
  color: #121e0d;
  background: #ceff83;
  font: 900 11px/1 var(--mono);
}

.player-defeat button:hover { background: #e4ffa7; }

@media (prefers-reduced-motion: reduce) {
  .player-health-fill { transition: none; }
  .hero[data-player-critical="true"] .player-damage-edges::after { animation: none; opacity: .44; }
  .hero[data-player-critical="true"] .player-health-track { animation: none; border-color: #ff8b79; }
}