.room-run-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-run-meters {
  position: absolute;
  bottom: max(61px, calc(env(safe-area-inset-bottom) + 57px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  min-width: min(224px, 74vw);
  padding: 8px 13px;
  transform: translateX(-50%);
  border: 1px solid #b9fa828c;
  border-radius: 10px;
  background: linear-gradient(135deg, #18301ce8, #06120bf0 68%);
  color: #ddffb6;
  box-shadow: 0 6px 20px #020904a3, inset 0 1px 1px #caff9e3c;
}

.room-run-score {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 51px;
  font: 800 8px / 1 var(--mono);
  letter-spacing: .11em;
}

.room-run-score output {
  display: flex;
  align-items: center;
  font: 900 clamp(21px, 4vw, 34px) / 1 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.07em;
}

.room-run-health { flex: 1; min-width: 80px; }
.room-run-health > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 5px;
  font: 800 8px / 1 var(--mono);
  letter-spacing: .07em;
}

.room-health-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #a7db745b;
  border-radius: 4px;
  background: #071009;
}

.room-health-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--room-health, 1));
  transform-origin: left;
  background: linear-gradient(#ecffd0, #8ae345 65%, #54a42b);
  transition: transform .16s ease-out;
}

.room-health-track[data-low="true"] span { background: linear-gradient(#ffe3aa, #f58958 70%, #9f351d); }

.room-run-hud .score-rise { z-index: 0; bottom: 121px; }
.room-damage-flare,
.room-run-hud::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, #801f075c 78%, #e34e236b 100%);
}

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

.room-run-upgrade {
  position: absolute;
  bottom: 127px;
  left: 50%;
  display: grid;
  gap: 3px;
  padding: 7px 12px;
  transform: translateX(-50%);
  border: 1px solid #b3ed78a8;
  border-radius: 7px;
  background: #102916e8;
  color: #eaffc8;
  text-align: center;
  white-space: nowrap;
}

.room-run-upgrade span { font: 800 8px / 1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .room-health-track span { transition: none; }
  .room-run-hud[data-room-critical="true"]::after { animation: none; opacity: .44; }
  .room-run-hud[data-room-critical="true"] .room-health-track { animation: none; border-color: #ff8b79; }
}