/* ═══ GSA helmet HUD ═══ */
#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 20;
  font-family: var(--font-hud);
}

/* Visor frame — subtle helmet curvature */
#visor-frame {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 115% 105% at 50% 50%, transparent 62%, rgba(2, 6, 12, 0.55) 96%);
  box-shadow: inset 0 0 140px rgba(10, 30, 50, 0.35);
}

/* Damage feedback */
#damage-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(255, 30, 20, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
#lowhealth-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(200, 10, 10, 0.4) 100%);
  opacity: 0;
}
#lowhealth-overlay.active { animation: lowhealth-pulse 1.4s ease-in-out infinite; }
@keyframes lowhealth-pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 0.75; } }

/* Crosshair */
#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  transition: transform 0.08s;
}
#crosshair span {
  position: absolute;
  background: var(--gsa-cyan);
  box-shadow: 0 0 4px rgba(94, 214, 255, 0.8);
}
#crosshair span:nth-child(1) { left: 50%; top: 0;    width: 1px; height: 7px; transform: translateX(-50%); }
#crosshair span:nth-child(2) { left: 50%; bottom: 0; width: 1px; height: 7px; transform: translateX(-50%); }
#crosshair span:nth-child(3) { top: 50%; left: 0;    height: 1px; width: 7px; transform: translateY(-50%); }
#crosshair span:nth-child(4) { top: 50%; right: 0;   height: 1px; width: 7px; transform: translateY(-50%); }
#crosshair i {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 2px;
  background: var(--gsa-cyan);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
#crosshair.spread { transform: translate(-50%, -50%) scale(1.6); }

#hitmarker {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
}
#hitmarker::before, #hitmarker::after {
  content: '';
  position: absolute; background: var(--gsa-white);
}
#hitmarker::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
#hitmarker::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
#hitmarker.show { animation: hitmarker-pop 0.22s ease-out; }
#hitmarker.kill::before, #hitmarker.kill::after { background: var(--gsa-red); }
@keyframes hitmarker-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.9); }
}

/* Panels */
.hud-panel {
  position: absolute;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(8, 18, 30, 0.66), rgba(8, 18, 30, 0.38));
  border: 1px solid rgba(94, 214, 255, 0.22);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.hud-label {
  font-size: 9px; letter-spacing: 3px;
  color: var(--gsa-cyan-dim);
  margin-bottom: 4px;
}

#hud-topleft { top: 26px; left: 30px; max-width: 360px; }
#objective-text { font-size: 13px; letter-spacing: 1px; color: var(--gsa-orange); line-height: 1.5; }

#hud-topright { top: 26px; right: 30px; text-align: right; min-width: 120px; }
#keycard-list { display: flex; gap: 6px; justify-content: flex-end; }
.keycard-chip {
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 8px;
  border: 1px solid var(--gsa-orange);
  color: var(--gsa-orange);
  animation: chip-in 0.4s ease-out;
}
@keyframes chip-in { from { transform: translateY(-8px); opacity: 0; } }
#flashlight-ind { font-size: 9px; letter-spacing: 2px; color: var(--gsa-cyan); margin-top: 6px; }

/* Health / armour */
#hud-bottomleft { bottom: 30px; left: 30px; width: 250px; }
.hud-bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.hud-icon { width: 14px; font-size: 12px; color: var(--gsa-cyan-dim); text-align: center; }
.hud-bar {
  flex: 1; height: 8px;
  background: rgba(94, 214, 255, 0.12);
  border: 1px solid rgba(94, 214, 255, 0.25);
  overflow: hidden;
}
.hud-bar.wide { height: 10px; width: 100%; }
#health-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #2fbf5f, var(--gsa-green));
  box-shadow: 0 0 8px rgba(125, 255, 138, 0.5);
  transition: width 0.2s ease-out;
}
#health-bar.low { background: linear-gradient(90deg, #bf2f2f, var(--gsa-red)); box-shadow: 0 0 8px rgba(255, 68, 68, 0.6); }
#armour-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gsa-cyan-dim), var(--gsa-cyan));
  box-shadow: 0 0 8px rgba(94, 214, 255, 0.5);
  transition: width 0.2s ease-out;
}
.hud-num { width: 34px; font-size: 15px; text-align: right; color: var(--gsa-white); }

/* Weapon */
#hud-bottomright { bottom: 30px; right: 30px; text-align: right; min-width: 190px; }
#weapon-name { font-size: 12px; letter-spacing: 3px; color: var(--gsa-cyan); }
#ammo-display { font-size: 30px; line-height: 1.15; color: var(--gsa-white); }
#ammo-display.empty #ammo-mag { color: var(--gsa-red); animation: lowhealth-pulse 0.8s infinite; }
.ammo-sep { color: var(--gsa-cyan-dim); font-size: 18px; margin: 0 4px; }
#ammo-reserve { font-size: 16px; color: var(--gsa-cyan-dim); }
#weapon-slots { display: flex; gap: 5px; justify-content: flex-end; margin-top: 5px; }
.wslot {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  border: 1px solid rgba(94, 214, 255, 0.2);
  color: rgba(94, 214, 255, 0.3);
}
.wslot.owned { color: var(--gsa-cyan-dim); border-color: rgba(94, 214, 255, 0.45); }
.wslot.active { color: var(--gsa-orange); border-color: var(--gsa-orange); }

/* Interact prompt */
#interact-prompt {
  position: absolute; left: 50%; top: 58%;
  transform: translateX(-50%);
  font-size: 13px; letter-spacing: 2px;
  padding: 8px 16px;
  background: rgba(8, 18, 30, 0.75);
  border: 1px solid var(--gsa-line);
}
#interact-prompt b {
  display: inline-block;
  min-width: 20px; text-align: center;
  padding: 1px 5px; margin-right: 8px;
  border: 1px solid var(--gsa-orange);
  color: var(--gsa-orange);
  font-weight: 400;
}

/* Data download */
#download-progress {
  position: absolute; left: 50%; top: 34%;
  transform: translateX(-50%);
  width: 320px; text-align: center;
}
#download-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gsa-orange), #ffc266);
  box-shadow: 0 0 10px rgba(255, 157, 51, 0.6);
}

/* Sniper scope overlay */
#scope-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
#scope-overlay::before, #scope-overlay::after {
  /* black borders masking the sides, leaving a central circle */
  content: ''; position: absolute; background: #000;
}
#scope-circle {
  position: absolute; left: 50%; top: 50%;
  width: 74vh; height: 74vh; max-width: 92vw; max-height: 92vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #05070a;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.94), inset 0 0 60px rgba(0,0,0,0.9);
}
.scope-cross { position: absolute; background: rgba(10,14,20,0.9); }
.scope-v { left: 50%; top: 4%; width: 1px; height: 92%; transform: translateX(-50%); }
.scope-h { top: 50%; left: 4%; height: 1px; width: 92%; transform: translateY(-50%); }
.scope-tick { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: 1px solid var(--gsa-red); border-radius: 50%; transform: translate(-50%,-50%); }

/* Mary escort / condition bar */
#escort-status {
  position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  width: 300px; text-align: center;
}
#escort-status .hud-label { color: var(--gsa-pink, #ff9bb6); }
#escort-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #d64f74, #ff9bb6);
  box-shadow: 0 0 10px rgba(255, 120, 150, 0.6);
  transition: width 0.2s ease-out;
}
#escort-bar.low { background: linear-gradient(90deg, #bf2f2f, var(--gsa-red)); box-shadow: 0 0 10px rgba(255, 68, 68, 0.7); }

/* Radio subtitles */
#subtitles {
  position: absolute; left: 50%; bottom: 110px;
  transform: translateX(-50%);
  max-width: 640px; min-height: 20px;
  text-align: center;
  font-size: 15px; line-height: 1.6;
}
.sub-line {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(4, 8, 14, 0.78);
  animation: sub-in 0.25s ease-out;
}
.sub-speaker { color: var(--gsa-cyan); letter-spacing: 1px; }
.sub-speaker.tim { color: var(--alien-green); }
.sub-speaker.damian { color: var(--gsa-red); }
.sub-speaker.fred { color: var(--gsa-orange); }
@keyframes sub-in { from { transform: translateY(8px); opacity: 0; } }

/* Objective toast */
#objective-toast {
  position: absolute; left: 50%; top: 22%;
  transform: translateX(-50%);
  font-size: 16px; letter-spacing: 4px;
  color: var(--gsa-orange);
  text-shadow: 0 0 16px rgba(255, 157, 51, 0.6);
  padding: 10px 26px;
  border-top: 1px solid var(--gsa-orange);
  border-bottom: 1px solid var(--gsa-orange);
  background: rgba(8, 14, 24, 0.6);
  animation: toast-in 3.5s ease-out forwards;
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}