/* Original BO3 Zombies HUD (web/game/hud.js). Units: --u is one LUI unit (720 per screen height), --h one
   640 x 480 hud-element unit (480 per screen height). Fonts are open stand-ins for BO3's own (see README). */
@font-face { font-family: HudDigits; src: url('../vendor/fonts/ShareTechMono-Regular.ttf'); }
@font-face { font-family: HudText; src: url('../vendor/fonts/BarlowSemiCondensed-Medium.ttf'); }
@font-face { font-family: HudNotice; src: url('../vendor/fonts/SairaExtraCondensed-Medium.ttf'); }

.native-hud { position: fixed; inset: 0; pointer-events: none; overflow: hidden; --u: calc(100vh / 720); --h: calc(100vh / 480); z-index: 2; }
.native-hud.hidden { display: none; }
.native-hud .glyph { position: absolute; }
.native-hud .glyph img, .native-hud img { position: absolute; max-width: none; user-select: none; }

/* Damage: blood filter and hit directions. */
.hud-blood { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 42%, #000 88%); mask-image: radial-gradient(ellipse at center, transparent 42%, #000 88%); }
.hud-hits { position: absolute; left: 50%; top: 50%; }
.hud-hit { width: calc(var(--u) * 150); left: 0; top: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--u) * -120)); animation: hud-hit 1.4s ease-out forwards; }
@keyframes hud-hit { 0% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: 0; } }

/* Crosshair: four short ticks. */
.hud-crosshair { position: absolute; left: 50%; top: 50%; transition: opacity .12s; }
.hud-crosshair i { position: absolute; background: #ffffffe0; box-shadow: 0 0 calc(var(--u) * 1) #000c; }
.hud-crosshair .top, .hud-crosshair .bottom { width: calc(var(--u) * 1.4); height: calc(var(--u) * 6.5); left: calc(var(--u) * -0.7); }
.hud-crosshair .left, .hud-crosshair .right { height: calc(var(--u) * 1.4); width: calc(var(--u) * 7.5); top: calc(var(--u) * -0.7); }
.hud-crosshair .top { bottom: var(--spread); }
.hud-crosshair .bottom { top: var(--spread); }
.hud-crosshair .left { right: var(--spread); }
.hud-crosshair .right { left: var(--spread); }

/* Score: portrait, points and the score streak; teammates above, smaller. */
.hud-score { position: absolute; left: calc(var(--u) * 26); height: calc(var(--u) * 44); width: calc(var(--u) * 200); }
.hud-score .portrait { left: 0; top: 0; width: calc(var(--u) * 44); height: calc(var(--u) * 44); object-fit: cover; }
.hud-score .streak { left: calc(var(--u) * 40); top: calc(var(--u) * -6); width: calc(var(--u) * 115); height: calc(var(--u) * 30); opacity: .95; filter: brightness(1.6); }
.hud-score .points { position: absolute; left: calc(var(--u) * 49); top: calc(var(--u) * -6.5); font: calc(var(--u) * 27.5)/1 HudDigits; color: #fff; transform: scaleX(.78); transform-origin: left top;
  text-shadow: 0 0 calc(var(--u) * 4) #fff9, 0 calc(var(--u) * 1) calc(var(--u) * 2) #000b; white-space: nowrap; }
.hud-score:not(.local) { transform: scale(.7); transform-origin: left bottom; }
.hud-score.down .portrait { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-40deg) brightness(.8); }
.hud-score.dead .portrait { filter: grayscale(1) brightness(.35); }
.hud-popup { position: absolute; left: calc(var(--u) * 128); top: calc(var(--u) * 548); font: calc(var(--u) * 21)/1 HudDigits; color: #ffb43c; white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 4) #ff7a00, 0 0 calc(var(--u) * 10) #ff5200b0; transform: scaleX(.85); animation: hud-pop 1.15s ease-out forwards; }
.hud-popup.spend { color: #ff4a36; text-shadow: 0 0 calc(var(--u) * 4) #d00, 0 0 calc(var(--u) * 9) #900b; }
@keyframes hud-pop { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }

/* Round counter: chalk tallies for rounds 1-5, numerals after. A new round burns in white and settles to red. */
.hud-round { position: absolute; left: calc(var(--u) * 23); bottom: calc(var(--u) * 25); width: calc(var(--u) * 76); height: calc(var(--u) * 70); }
.hud-round-marks, .hud-round-marks .stack { position: absolute; }
.hud-round-marks { inset: 0; }
.hud-round-marks .glyph { left: 0; top: 0; }
/* Resting strokes and numerals read as dark blood red on screen. */
.hud-round-marks.tally .def { filter: brightness(.62) saturate(1.25); }
.hud-round-marks .act, .hud-round-marks .glow { opacity: 0; }
.hud-round.changing .newest .glow { animation: rnd-glow 3s ease-out forwards; }
.hud-round.changing .newest .act { animation: rnd-act 3s ease-out forwards; }
.hud-round.changing .newest .def { animation: rnd-def 3s ease-out forwards; }
@keyframes rnd-glow { 0% { opacity: 0; } 8% { opacity: 1; } 40% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes rnd-act { 0%, 20% { opacity: 0; } 45% { opacity: 1; } 75% { opacity: 1; filter: sepia(.6) saturate(3) hue-rotate(-20deg); } 100% { opacity: 0; } }
@keyframes rnd-def { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.hud-round.ending:not(.changing) .glow { animation: rnd-pulse 1.6s ease-in-out infinite; }
.hud-round.ending:not(.changing) .def { animation: rnd-pulse-def 1.6s ease-in-out infinite; }
@keyframes rnd-pulse { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes rnd-pulse-def { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hud-round-spark { position: absolute; left: -45%; bottom: -35%; width: 190%; height: 190%; background: 0 0 / 1000% 300% no-repeat; opacity: 0; }
.hud-round.changing .hud-round-spark { animation: rnd-spark 1.4s linear forwards; }
@keyframes rnd-spark { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.hud-round-flash { left: -30%; bottom: -15%; width: 160%; opacity: 0; }
.hud-round.changing .hud-round-flash { animation: rnd-flash 1.1s ease-out forwards; }
@keyframes rnd-flash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }

/* Perk icons, positioned by hud.js in hud units. */
.hud-perk { position: absolute; }

/* Der Riese ammo counter. */
.hud-ammo { position: absolute; right: 0; bottom: 0; width: calc(var(--u) * 330); height: calc(var(--u) * 220); }
.hud-ammo-device { right: calc(var(--u) * 18); bottom: calc(var(--u) * 32); }
.hud-ammo-projection { right: calc(var(--u) * 92); bottom: calc(var(--u) * 46); width: calc(var(--u) * 170); opacity: .85; mix-blend-mode: screen; }
.hud-ammo-clip, .hud-ammo-reserve { position: absolute; filter: saturate(.15) brightness(1.6) drop-shadow(calc(var(--u) * -.8) 0 0 #ff4b5aa0) drop-shadow(calc(var(--u) * .8) 0 0 #3cffffa0) drop-shadow(0 0 calc(var(--u) * 3.5) #26d2ff); }
.hud-ammo-clip { right: calc(var(--u) * 204.7); bottom: calc(var(--u) * 90); height: calc(var(--u) * 38.7); }
.hud-ammo-reserve { right: calc(var(--u) * 144); bottom: calc(var(--u) * 82); height: calc(var(--u) * 27.3); }
.hud-ammo-clip .glyph, .hud-ammo-reserve .glyph { bottom: 0; }
.hud-ammo-clip.empty { filter: sepia(1) saturate(6) hue-rotate(-50deg) drop-shadow(0 0 calc(var(--u) * 3) #f20); }
.hud-ammo-name { position: absolute; right: calc(var(--u) * 142); bottom: calc(var(--u) * 47.5); font: calc(var(--u) * 19)/1 HudText; color: #f3f3f3; white-space: nowrap; text-shadow: 0 0 calc(var(--u) * 2) #000c, 0 0 calc(var(--u) * 5) #0006; }
.hud-ammo-lethals { position: absolute; right: calc(var(--u) * 127); bottom: calc(var(--u) * 116); width: calc(var(--u) * 40); height: calc(var(--u) * 23); }
.hud-lethal { position: absolute; bottom: 0; width: calc(var(--u) * 23); height: calc(var(--u) * 23); background: #effeff; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  filter: drop-shadow(0 0 calc(var(--u) * 1) #3fe4ff) drop-shadow(0 0 calc(var(--u) * 3) #12c4ff); }

/* Active power-ups, bottom centre; they blink as they run out. */
.hud-buffs { position: absolute; left: 50%; bottom: calc(var(--u) * 22); display: flex; gap: calc(var(--u) * 6); transform: translateX(-50%); }
.native-hud .hud-buff { position: static; width: calc(var(--u) * 46); height: calc(var(--u) * 46); }

/* Pickup notice: the Der Riese device over its atom-and-gear design, with the power-up's name. */
.hud-notices { position: absolute; left: 50%; top: calc(var(--u) * 26); }
.hud-notice { position: absolute; left: 0; top: 0; width: calc(var(--u) * 300); height: calc(var(--u) * 175); transform: translateX(-50%); animation: hud-notice 3.4s ease-out forwards; }
.hud-notice img, .hud-notice i { position: absolute; left: 50%; translate: -50% 0; }
.hud-notice .shade { top: calc(var(--u) * 4); width: calc(var(--u) * 210); height: calc(var(--u) * 150); background: radial-gradient(closest-side, #062a30d0 40%, #062a3000); }
.hud-notice .design { top: calc(var(--u) * 2); width: calc(var(--u) * 150); opacity: .85; }
.hud-notice .device { top: calc(var(--u) * 26); width: calc(var(--u) * 150); }
.hud-notice .streak { top: calc(var(--u) * 109); width: calc(var(--u) * 240); height: calc(var(--u) * 22); opacity: .55; filter: sepia(1) saturate(5) hue-rotate(150deg) brightness(1.3); }
.hud-notice .bar { top: calc(var(--u) * 109); width: calc(var(--u) * 140); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 5); background: linear-gradient(#0c3474, #051a44); box-shadow: 0 0 calc(var(--u) * 6) #0a8cffa0; }
.hud-notice .text { position: absolute; left: 50%; top: calc(var(--u) * 107); translate: -50% 0; font: calc(var(--u) * 25)/1.1 HudNotice; color: #cdf9ff; white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 3) #2bd6ff, 0 0 calc(var(--u) * 9) #0a9dff; letter-spacing: .02em; }
@keyframes hud-notice { 0% { opacity: 0; scale: .8; } 7% { opacity: 1; scale: 1.04; } 12% { scale: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* Hold-to-use prompt and the build progress bar. */
.hud-prompt { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); font: calc(var(--u) * 20)/1.3 HudText; color: #fff; white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 2) #000, 0 calc(var(--u) * 1) calc(var(--u) * 3) #000c; }
.hud-prompt kbd { font: inherit; color: #f6d93a; margin: 0 .05em; }
.hud-prompt.deny { animation: hud-deny .5s; }
@keyframes hud-deny { 50% { color: #ff5a4a; } }
.hud-progress { position: absolute; left: 50%; top: calc(61% + var(--u) * 20); width: calc(var(--u) * 230); height: calc(var(--u) * 64); transform: translateX(-50%); }
.hud-progress img { left: 0; top: 0; width: calc(var(--u) * 230); height: 100%; }
.hud-progress .fill { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; }

/* Downed teammates: revive skull with its bleed-out ring (white while being revived). */
.hud-waypoint { position: absolute; width: calc(var(--u) * 42); height: calc(var(--u) * 42); transform: translate(-50%, -100%); }
.hud-waypoint img { left: 0; top: 0; width: 100%; height: 100%; }
.hud-waypoint .glow { opacity: .5; }
.hud-waypoint .ring { -webkit-mask: conic-gradient(#000 calc(var(--bleed) * 1turn), transparent 0); mask: conic-gradient(#000 calc(var(--bleed) * 1turn), transparent 0); filter: sepia(1) saturate(8) hue-rotate(-50deg); }
.hud-waypoint.reviving .ring { -webkit-mask: conic-gradient(#000 calc(var(--revive) * 1turn), transparent 0); mask: conic-gradient(#000 calc(var(--revive) * 1turn), transparent 0); filter: none; }


/* Script hudelems (credits, the troll poster): the game's default hud font, left aligned, with a soft shadow. */
.hud-script { position: absolute; inset: 0; }
.hud-script-line { position: absolute; font-family: HudText, system-ui, sans-serif; line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 0 calc(var(--h) * 1.5) #000, 0 calc(var(--h) * .5) calc(var(--h) * 2) #000c; }
/* Last stand: the view drains of colour and the blood filter pulses. */
.native-hud.down .hud-blood { animation: hud-down-pulse 1.4s ease-in-out infinite; }
@keyframes hud-down-pulse { 50% { opacity: .55; } }
/* Hitmarker: the stock damage_feedback image (its X fills the top half of the 1:2 texture). */
.native-hud img.hud-hitmarker { position: absolute; opacity: 0; pointer-events: none; }