/* The original text nodes remain the source of truth; this layer only changes presentation. */
#player-hud { gap: 18px; }
#player-hud .health { width: 304px; height: 96px; padding: 15px 19px 14px 75px; }
#player-hud .ammo { width: 276px; min-width: 276px; height: 96px; padding: 16px 22px 14px 98px; }
#player-hud .health .eyebrow, #player-hud .ammo > span { font: 9px/1.3 Consolas, monospace; letter-spacing: .15em; color: #a4c4c9; }
#player-hud .health b, #player-hud .ammo b, #player-hud .ammo i {
  display: inline-block;
  font-family: Impact, 'Arial Black', 'Bahnschrift Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900; font-style: normal; font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1; line-height: .96; letter-spacing: -.025em;
  transform: skewX(-9deg); transform-origin: center bottom;
  color: #edfff8; -webkit-text-stroke: .65px #09202a;
  text-shadow: 1px 1px 0 #315461, 2px 3px 0 #020c13, 4px 5px 0 #020c1388, 0 0 12px #9bfff022;
}
#player-hud .health .eyebrow { display: block; }
#player-hud .health b { font-size: 44px; margin: 7px 0 0; }
#player-hud .ammo b { font-size: 48px; margin: 0; color: #fff4d8; }
#player-hud .ammo i { font-size: 22px; letter-spacing: .01em; color: #bed5dc; -webkit-text-stroke: .3px #09202a; }
#player-hud .ammo > div { gap: 9px; }
#player-hud .health .bar { left: 163px; right: 19px; bottom: 25px; height: 8px; }
#player-hud .health-symbol { left: 14px; top: 27px; width: 48px; height: 40px; color: #ff6470; filter: drop-shadow(0 0 5px #ff53622b); }
#player-hud .ammo-symbol { left: 19px; top: 34px; width: 65px; height: 46px; color: #ffd18a; filter: drop-shadow(0 0 4px #ffd18a2a); }
#player-hud .ammo[data-weapon=melee] .ammo-symbol { opacity: .3; }
#player-hud .health[data-low=true] b { color: #ffc0bc; text-shadow: 2px 3px 0 #27080c, 0 0 12px #ff354647; }
@media (max-width: 700px) {
  #player-hud { left: 16px; right: 16px; gap: 12px; }
  #player-hud .health { width: 160px; height: 82px; padding: 12px 11px 16px 45px; }
  #player-hud .ammo { width: 175px; min-width: 175px; height: 82px; padding: 12px 11px 14px 56px; }
  #player-hud .health b { font-size: 34px; margin-top: 7px; }
  #player-hud .ammo b { font-size: 35px; }
  #player-hud .ammo i { font-size: 16px; }
  #player-hud .ammo > div { gap: 5px; }
  #player-hud .health .bar { left: 45px; right: 12px; bottom: 10px; height: 5px; }
  #player-hud .health-symbol { width: 31px; height: 30px; left: 8px; top: 31px; }
  #player-hud .ammo-symbol { width: 39px; height: 32px; left: 10px; top: 33px; }
  #player-hud .health .eyebrow, #player-hud .ammo > span { font-size: 8px; letter-spacing: .05em; }
}
@media (max-width: 420px) {
  /* At narrow widths do not let a previously saved 115% HUD scale overlap the two readouts. */
  #player-hud .health, #player-hud .ammo { scale: min(var(--hud-scale, 1), 1); }
}
@media (max-width: 370px) {
  #player-hud { left: 10px; right: 10px; gap: 8px; }
  #player-hud .health { width: 140px; padding-left: 37px; }
  #player-hud .ammo { min-width: 152px; width: 152px; padding-left: 47px; }
  #player-hud .health b { font-size: 32px; }
  #player-hud .ammo b { font-size: 31px; }
  #player-hud .ammo i { font-size: 14px; }
  #player-hud .health .bar { left: 37px; }
  #player-hud .health-symbol { width: 27px; left: 5px; }
  #player-hud .ammo-symbol { width: 33px; left: 7px; }
}