/* CS2's in-game HUD (src/hud.js, src/radar.js), as CS2's Panorama draws it for a CT, which a ZE human is: the round
   radar top left with the stage and its clock beside it, health and armor in the middle at the bottom (around the CT
   emblem), the ammo right of it, the weapons bottom right, a boss's health above the middle (GFL's BossHUD).
   After the friend's trainer (ze-laser-practice, ui/hud.css and ui/radar.css), which took the numbers from CS2's
   hud.vcss, hudhealthammocenter.vcss, hudweaponselection.vcss and hudradar.vcss: sizes are Panorama's 1080p px times
   --u. The fonts and icons are Valve's, from the local CS2 install (python tools/export_hud.py panorama, into
   panorama/, which deploy ships with the code). Only index.html loads this: the explorer keeps style.css's crosshair. */

@font-face { font-family: 'Stratum2 TF'; font-weight: 700; font-display: swap; src: url(panorama/fonts/stratum2_tf_bold.otf) format('opentype'); }
@font-face { font-family: 'Stratum2'; font-weight: 700; font-display: swap; src: url(panorama/fonts/stratum2-bold.otf) format('opentype'); }
@font-face { font-family: 'Stratum2'; font-weight: 500; font-display: swap; src: url(panorama/fonts/stratum2-medium.otf) format('opentype'); }
@font-face { font-family: 'Stratum2 Mono'; font-weight: 700; font-display: swap; src: url(panorama/fonts/stratum2mono-bold.otf) format('opentype'); }

#hud {
  --u: calc(100vh / 1080);
  --team: rgb(150 200 250); /* csgostyles.vcss ct-color: hud-colorize-wash */
  --cs-num: 'Stratum2 TF', 'Stratum2', var(--call);
  --cs-text: 'Stratum2', var(--ui);
  color: #fff;
}
/* a phone: CS2's sizes for the screen's height, but no wider than the screen takes (src/touch.js has the thumbs) */
body.touch #hud { --u: min(calc(100vh / 1080), calc(100vw / 900)); }
.pano { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
#hud:not(.pano-on) .pano { visibility: hidden; } /* no icons exported (tools/export_hud.py): the numbers alone */

/* ---- the crosshair: CS2's default, four green lines with a dark outline (and a hitmarker for a hit on a boss) ---- */
#crosshair { width: 0; height: 0; margin: 0; background: none; border-radius: 0; }
#crosshair i, #hitmarker i { position: absolute; }
#crosshair i { background: #4cff4c; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.8); }
#crosshair i:nth-child(1) { left: -1px; top: -12px; width: 2px; height: 8px; }
#crosshair i:nth-child(2) { left: -1px; top: 4px; width: 2px; height: 8px; }
#crosshair i:nth-child(3) { left: -12px; top: -1px; width: 8px; height: 2px; }
#crosshair i:nth-child(4) { left: 4px; top: -1px; width: 8px; height: 2px; }
#hitmarker { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
#hitmarker.on { opacity: 1; }
body:not(.playing) #hitmarker { display: none; }
#hitmarker i { width: 10px; height: 2px; background: #fff; box-shadow: 0 0 2px #000; }
#hitmarker i:nth-child(1) { left: 6px; top: 6px; transform: rotate(45deg); }
#hitmarker i:nth-child(2) { left: -16px; top: 6px; transform: rotate(-45deg); }
#hitmarker i:nth-child(3) { left: 6px; top: -8px; transform: rotate(-45deg); }
#hitmarker i:nth-child(4) { left: -16px; top: -8px; transform: rotate(45deg); }

/* ---- the radar (hudradar): a 300 px panel, the 250 px round radar in its middle on hud-blur-bg-color over the
   blurred world, inside a 1 px ring of the team colour; its black is see-through (tools/export_hud.py additive) ---- */
#radar { position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * var(--u)); }
#radar[hidden] { display: none; }
#radar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#radar .radar-bg, #radar .radar-ring { position: absolute; inset: calc(25 * var(--u)); border-radius: 50%; }
#radar .radar-bg { background: #000000a0; -webkit-backdrop-filter: blur(calc(2 * var(--u))); backdrop-filter: blur(calc(2 * var(--u))); }
#radar .radar-ring { border: max(1px, calc(1 * var(--u))) solid var(--team); }

/* ---- the stage, its clock and what is set for the run: top left, beside the radar when there is one ---- */
#stage { position: absolute; left: calc(20 * var(--u)); top: calc(16 * var(--u)); max-width: 46vw; text-shadow: 0 0 calc(2 * var(--u)) rgb(0 0 0 / 0.9), 0 1px 3px rgb(0 0 0 / 0.6); }
#hud.has-radar #stage { left: calc(330 * var(--u)); }
#stage-name { overflow: hidden; font: 700 max(12px, calc(18 * var(--u))) / 1.25 var(--cs-text); letter-spacing: 0.04em; white-space: nowrap; text-overflow: ellipsis; opacity: 0.9; }
#stage-name:empty { display: none; }
#stage-clock { font: 700 max(18px, calc(34 * var(--u))) / 1.1 var(--cs-num); white-space: nowrap; }
#stage-clock b { font: inherit; }
#stage-sub { display: flex; flex-wrap: wrap; gap: 0 calc(12 * var(--u)); margin-top: calc(2 * var(--u)); }
#stage-sub > span { font: 500 max(11px, calc(16 * var(--u))) / 1.35 var(--cs-text); letter-spacing: 0.02em; color: rgb(255 255 255 / 0.75); }
#stage-sub > span:empty { display: none; }
#stage-sub > #practice, #stage-sub > #ranked { color: #fff; }
/* playing together: who is in the round goes under the radar and the stage */
#hud.has-radar #roster { top: calc(330 * var(--u)); }

/* ---- the map items held (GFL's EntWatch HUD): under the radar, one line each, in the item's colour ---- */
#cs-items { position: absolute; left: calc(20 * var(--u)); top: calc(120 * var(--u)); font: 700 max(12px, calc(19 * var(--u))) / 1.35 var(--cs-text);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 calc(2 * var(--u)) rgb(0 0 0 / 0.9); white-space: nowrap; }
#cs-items[hidden] { display: none; }
#hud.has-radar #cs-items { left: calc(30 * var(--u)); top: calc(318 * var(--u)); }
#hud.has-radar:has(#cs-items:not([hidden])) #roster { top: calc(380 * var(--u)); }

/* ---- the speed (the trainer's own, for hopping and surfing): over the health and ammo, in the middle ---- */
#hud > #stats { position: absolute; left: 50%; bottom: calc(96 * var(--u)); transform: translateX(-50%); display: block; padding: 0; border: 0; border-radius: 0;
  background: none; font: 500 calc(16 * var(--u)) var(--cs-text); letter-spacing: 0.06em; text-transform: none; color: rgb(255 255 255 / 0.7);
  text-shadow: 0 0 calc(2 * var(--u)) rgb(0 0 0 / 0.9), 0 1px 3px rgb(0 0 0 / 0.6); white-space: nowrap; }
#hud > #stats b { margin-right: calc(4 * var(--u)); font: 700 calc(26 * var(--u)) / 1 var(--cs-num); letter-spacing: 0; color: #fff; }

/* ---- health, armor and ammo (CSGOHudHealthAmmoCenter): 800 x 72, 16 px from the bottom, in the team colour ---- */
#cs-ha { position: absolute; left: 50%; bottom: calc(16 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; width: calc(800 * var(--u)); height: calc(72 * var(--u));
  text-shadow: 0 0 calc(2 * var(--u)) rgb(0 0 0 / 0.9), 0 1px 3px rgb(0 0 0 / 0.6); }
#cs-ha .ha-half { position: relative; display: flex; flex: 1; align-items: center; height: 100%; }
#cs-ha .ha-left { justify-content: flex-end; }
#cs-ha .ha-stroke { position: absolute; top: 50%; height: 1px; }
#cs-ha .ha-left .ha-stroke { right: 0; width: calc(200 * var(--u)); background: var(--team); }
#cs-ha .ha-right .ha-stroke { left: 0; width: 60%; background: linear-gradient(90deg, var(--team), transparent); }
#cs-ha .ha-main { position: relative; display: flex; align-items: center; gap: calc(14 * var(--u)); height: 100%; margin-right: calc(200 * var(--u)); }
#cs-ha .ha-big { font: 700 calc(42 * var(--u)) / 1 var(--cs-num); color: var(--team); }
#cs-ha .ha-armor { display: flex; align-items: center; gap: calc(4 * var(--u)); color: var(--team); }
#cs-ha .ha-armor .pano { width: calc(30 * var(--u)); height: calc(30 * var(--u)); --src: url(panorama/hud/armor_helmet.svg); }
#cs-ha .ha-armor b { font: 700 calc(26 * var(--u)) / 1 var(--cs-num); }
#cs-ha .ha-health { display: flex; flex-direction: column; align-items: flex-end; }
/* .hud-HA-bar: 65 x 8, the team colour over red (what is lost); health out of 100, more shows full */
#cs-ha .ha-bar { position: relative; overflow: hidden; width: calc(65 * var(--u)); height: max(3px, calc(8 * var(--u))); margin-top: calc(4 * var(--u)); border: 1px solid #000;
  background: linear-gradient(270deg, rgb(255 0 0 / 0.1), #f00 50%, #f00); }
#cs-ha .ha-bar i { position: absolute; inset: 0; background: var(--team); transform-origin: left; transition: transform 0.15s; }
#cs-ha .ha-bar.clip-bar { height: max(2px, calc(4 * var(--u))); background: rgb(255 255 255 / 0.1); }
#cs-ha.low-health .ha-health .ha-big { filter: brightness(1.75); text-shadow: 0 0 calc(9 * var(--u)) #d00, 0 0 calc(3 * var(--u)) #d00; }
#cs-ha .hit { animation: cs-jitter 0.15s ease-out; }
@keyframes cs-jitter { 0% { transform: translateY(calc(-3 * var(--u))); } 50% { transform: translateY(calc(2 * var(--u))); } 100% { transform: none; } }
/* the 64 px team circle: the blurred world under it, the team's ring, the CT emblem */
#cs-ha .ha-center { position: relative; display: grid; flex: none; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%;
  background: #000000a0; -webkit-backdrop-filter: blur(calc(6 * var(--u))); backdrop-filter: blur(calc(6 * var(--u))); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--team); }
#cs-ha .ha-center .pano { width: calc(42 * var(--u)); height: calc(42 * var(--u)); color: var(--team); --src: url(panorama/icons/ui/ct_logo_1c.svg); }
#cs-ha .ha-wpn { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); height: 100%; margin-left: calc(60 * var(--u)); color: var(--team); }
#cs-ha .ha-wpn.off { visibility: hidden; } /* the knife: no ammo */
#cs-ha .ha-wpn.changed { animation: cs-wpn-change 0.1s ease-in-out; }
@keyframes cs-wpn-change { from { transform: scale(0.75); } to { transform: none; } }
#cs-ha .ha-clip { display: flex; flex-direction: column; align-items: flex-start; }
#cs-ha .ha-mode { width: calc(26 * var(--u)); height: calc(26 * var(--u)); --src: url(panorama/hud/ammo_fullauto.svg); }
#cs-ha .ha-mode.none { display: none; } /* only a gun that switches modes shows its mode (can-change-fire-mode) */
#cs-ha .ha-reserve-n { margin-top: calc(-8 * var(--u)); font: 700 calc(26 * var(--u)) / 1 var(--cs-num); }
#cs-ha .ha-reserve { width: calc(20 * var(--u)); height: calc(26 * var(--u)); margin-top: calc(-8 * var(--u)); --src: url(panorama/hud/ammo_reserve_magazine.svg); }
#cs-ha .ha-reserve.banana_mag { --src: url(panorama/hud/ammo_reserve_banana_mag.svg); }
#cs-ha .ha-reserve.bizon_tube { --src: url(panorama/hud/ammo_reserve_bizon_tube.svg); }
#cs-ha .ha-reserve.box { --src: url(panorama/hud/ammo_reserve_box.svg); }
#cs-ha .ha-reserve.p90 { --src: url(panorama/hud/ammo_reserve_p90.svg); }
#cs-ha .ha-wpn.low-clip .ha-clip .ha-big { text-shadow: 0 0 calc(9 * var(--u)) #d00; }
#cs-ha .ha-wpn.reloading .ha-clip { opacity: 0.5; }
#cs-ha .ha-wpn.reloading .ha-reserve { animation: cs-reload 0.3s ease-in; }
@keyframes cs-reload { from { transform: translateY(calc(-6 * var(--u))); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* ---- the weapons (hudweaponselection): slot number, icon, and the held one's name, in the team colour ---- */
#cs-ws { position: absolute; right: calc(14 * var(--u)); bottom: calc(80 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(20 * var(--u));
  text-shadow: 1px 1px #00000088; }
#cs-ws .ws-row { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding-right: calc(4 * var(--u)); color: rgb(255 255 255 / 0.55); }
#cs-ws .ws-row[hidden] { display: none; }
#cs-ws .ws-row.held { color: var(--team); }
#cs-ws .ws-row b { position: absolute; top: calc(-14 * var(--u)); right: 0; font: 700 calc(14 * var(--u)) 'Stratum2 Mono', var(--mono); color: #fff; }
#cs-ws .ws-icon { width: calc(150 * var(--u)); height: calc(40 * var(--u)); -webkit-mask-position: right center; mask-position: right center; }
#ws-knife-icon { --src: url(panorama/icons/equipment/knife.svg); }
#ws-gun-icon { --src: url(panorama/icons/equipment/bizon.svg); }
#cs-ws .ws-name { margin-top: calc(4 * var(--u)); font: 500 calc(16 * var(--u)) var(--cs-text); color: #fff; visibility: hidden; }
#cs-ws .ws-row.held .ws-name { visibility: visible; }

/* ---- a boss's health: GFL's BossHUD text in CS2's message box over the middle (SendHudMessage) ---- */
#cs-boss { position: absolute; left: 50%; bottom: calc(150 * var(--u)); transform: translateX(-50%); min-width: calc(440 * var(--u));
  padding: calc(12 * var(--u)) calc(30 * var(--u)) calc(16 * var(--u)); text-align: center; font: 500 calc(21 * var(--u)) / 1.3 var(--cs-text); text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgb(20 26 32 / 0.88), rgb(10 14 18 / 0.92));
  border-inline: calc(2 * var(--u)) solid rgb(190 220 245 / 0.85); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 -1px 0 rgb(255 255 255 / 0.06); }
#cs-boss[hidden] { display: none; }
#cs-boss .bh-name, #cs-boss .bh-hp { font-weight: 700; }
#cs-boss .bh-hp b { font: 700 calc(25 * var(--u)) var(--cs-num); }
#cs-boss .bh-bar { width: calc(306 * var(--u)); height: calc(14 * var(--u)); margin: calc(8 * var(--u)) auto 0; background: #303133; }
#cs-boss .bh-bar i { display: block; height: 100%; transform-origin: left; }
#cs-boss .bh-line { white-space: nowrap; }

/* ---- a touch screen (src/touch.js): the radar and the stage under the top row of buttons, health and ammo
   between the stick and the action buttons (over them on a narrow screen), no weapon list (the buttons are there) ---- */
body.touch #radar { left: max(10px, env(safe-area-inset-left)); top: var(--touch-top, 64px); }
body.touch #stage { left: max(12px, env(safe-area-inset-left)); top: var(--touch-top, 64px); max-width: calc(100vw - 24px); }
body.touch #hud.has-radar #stage { left: calc(max(10px, env(safe-area-inset-left)) + 300 * var(--u)); top: calc(var(--touch-top, 64px) + 25 * var(--u)); max-width: calc(100vw - 300 * var(--u) - 20px); }
body.touch #cs-ws { display: none; }
body.touch #cs-items { left: max(12px, env(safe-area-inset-left)); top: calc(var(--touch-top, 64px) + 64px); }
body.touch #hud.has-radar #cs-items { left: calc(max(10px, env(safe-area-inset-left)) + 16 * var(--u)); top: calc(var(--touch-top, 64px) + 292 * var(--u)); }
/* what the map says goes under the radar, not over the stage beside it */
@media (orientation: portrait) {
  body.touch #hud.has-radar #hint { top: calc(var(--touch-top, 64px) + 300 * var(--u) + 6px); }
  body.touch #hud.has-radar:has(#cs-items:not([hidden])) #hint { top: calc(var(--touch-top, 64px) + 300 * var(--u) + 30px); }
}
body.touch #cs-ha { bottom: max(calc(16 * var(--u)), env(safe-area-inset-bottom)); }
body.touch #cs-ha .ha-armor b, body.touch #cs-ha .ha-reserve-n { font-size: max(11px, calc(26 * var(--u))); }
@media (orientation: portrait) {
  body.touch #cs-ha { bottom: calc(max(26px, env(safe-area-inset-bottom) + 6px) + 144px); }
}
body.touch #cs-boss { bottom: calc(max(26px, env(safe-area-inset-bottom) + 6px) + 144px + 82 * var(--u)); min-width: 0; width: max-content; max-width: calc(100vw - 24px); font-size: max(11px, calc(21 * var(--u))); }
@media (orientation: landscape) {
  body.touch #cs-boss { bottom: calc(96 * var(--u)); }
}
body.touch #cs-boss .bh-bar { width: min(calc(306 * var(--u)), 60vw); }

@media (prefers-reduced-motion: reduce) {
  #cs-ha .hit, #cs-ha .ha-wpn.changed, #cs-ha .ha-wpn.reloading .ha-reserve { animation: none; }
}