.life {
  position: relative;
  height: 9px;
  overflow: hidden;
}

.life #hp {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: #ab6957;
  overflow: hidden;
  border-radius: 2px;
}

.life #shield-meter {
  position: absolute;
  inset: 0 auto auto 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, #5aa9ffcc, #b9e8ff);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}

.life #shield-meter.active {
  opacity: .88;
}

.meter-label em {
  color: #76bdff;
  font-style: normal;
  text-shadow: 0 0 7px #4aa2ff;
}