/* ========================================================
   DOOM HUD & FORTNITE IN-GAME TELEMETRY STYLES
   Position: bottom: 45px; left: 45px;
   Size: 96x96px (Face Portrait Focus)
   Palette:
     Styleguide Green: #63B22F
     Styleguide Dark Gray: #414141
     Styleguide Neon: #D9FF3D
     Styleguide Pink: #FF8EAB
     Fortnite Cyan: #00d4ff
     Fortnite Shield Blue: #0088ff
     Fortnite Orange: #ff8000
   ======================================================== */

:root {
  --doom-hud-size: 96px;
  --doom-hud-bottom: 45px;
  --doom-hud-left: 45px;
  --fn-orange: #ff8000;
  --fn-orange-dim: #cc6600;
  --style-green: #63B22F;
  --style-darkgray: #414141;
  --style-neon: #D9FF3D;
  --style-pink: #FF8EAB;
  --cyan: #00d4ff;
  --shield-blue: #0088ff;
  --shield-aura: rgba(0, 212, 255, 0.85);
  --damage-red: #ff2a2a;
}

/* Container */
#doom-hud-container,
.doom-hud-container {
  position: fixed;
  bottom: var(--doom-hud-bottom);
  left: var(--doom-hud-left);
  width: var(--doom-hud-size);
  height: var(--doom-hud-size);
  min-width: var(--doom-hud-size);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              bottom 0.4s ease, left 0.4s ease;
  opacity: 0;
  transform: scale(0.85);
  visibility: hidden;
}

/* Visibility triggers: active class, or fortnite theme on html/body/parent */
#doom-hud-container.is-visible,
.doom-hud-container.is-visible,
html[data-theme="fortnite"] #doom-hud-container,
html[data-cam-theme="fortnite"] #doom-hud-container,
html[data-layer="fortnite"] #doom-hud-container,
body.theme-fortnite #doom-hud-container,
.theme-fortnite #doom-hud-container {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
}

/* Frame */
#doom-hud-frame,
.doom-hud-frame {
  width: var(--doom-hud-size);
  height: var(--doom-hud-size);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, #1c1c1f 0%, #141416 100%);
  border: 2px solid var(--style-darkgray);
  box-shadow:
    0 0 0 1px rgba(255, 128, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.75),
    inset 0 0 10px rgba(0, 0, 0, 0.6);
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

/* Outer decorative border flow accent */
#doom-hud-frame::before,
.doom-hud-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(90deg, var(--style-darkgray), var(--fn-orange), var(--style-darkgray));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: doom-border-flow 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes doom-border-flow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* Face Portrait Image */
#doom-hud-face,
.doom-hud-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: block;
  transition: transform 0.1s ease, filter 0.2s ease;
  position: relative;
  z-index: 2;
}

/* ========================================================
   HUD STATE MAPPINGS
   ======================================================== */

/* Neutral State (HP 80-100) */
.state-neutral {
  border-color: var(--style-green);
}

/* Tense State (HP 40-79) */
.state-tense {
  border-color: var(--fn-orange);
}

/* Panic State (HP 1-39) */
.state-panic {
  border-color: var(--style-pink);
  box-shadow: 0 0 12px rgba(255, 142, 171, 0.4), inset 0 0 8px rgba(255, 42, 42, 0.3) !important;
}

/* Dead State (HP == 0 or alive == false) */
.state-dead,
.is-dead,
#doom-hud-frame.is-dead {
  border-color: #555558 !important;
  filter: grayscale(1) contrast(0.9) drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)) !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.9) !important;
  opacity: 0.85;
}

#doom-hud-frame.is-dead #doom-hud-face {
  filter: grayscale(1) !important;
}

/* Shield Active Glow ((shield + overshield) > 0) */
.shield_active,
.shield-glow {
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 18px var(--shield-aura),
    0 0 8px var(--shield-blue),
    inset 0 0 12px rgba(0, 212, 255, 0.5) !important;
  filter: drop-shadow(0 0 12px var(--cyan)) drop-shadow(0 0 6px var(--shield-blue));
}

/* Shield Break Effect ((shield + overshield) == 0 when previously > 0) */
.shield_break,
.shield-break {
  animation: doom-shield-break-anim 0.4s ease-out !important;
}

@keyframes doom-shield-break-anim {
  0% {
    box-shadow: 0 0 28px #ffffff, 0 0 18px var(--cyan), inset 0 0 20px #ffffff !important;
    border-color: #ffffff !important;
    filter: brightness(2) drop-shadow(0 0 18px var(--cyan)) !important;
    transform: scale(1.12);
  }
  35% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.9), inset 0 0 12px rgba(0, 212, 255, 0.6) !important;
    border-color: var(--cyan) !important;
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75) !important;
    border-color: var(--style-darkgray) !important;
    filter: none !important;
    transform: scale(1);
  }
}

/* Flinch / Hit Reaction (Delta HP < 0) */
.flinch,
.is-flinching,
.damage-flash {
  animation: doom-flinch-anim 0.18s ease-in-out !important;
  border-color: var(--style-pink) !important;
  box-shadow:
    0 0 22px rgba(255, 142, 171, 0.95),
    0 0 10px rgba(255, 42, 42, 1),
    inset 0 0 16px rgba(255, 42, 42, 0.7) !important;
  filter: drop-shadow(0 0 16px var(--style-pink)) drop-shadow(0 0 6px var(--damage-red));
}

@keyframes doom-flinch-anim {
  0%   { transform: scale(1.08) translate(-3px, 2px); filter: brightness(1.6) drop-shadow(0 0 14px var(--style-pink)); }
  25%  { transform: scale(0.95) translate(3px, -2px); }
  50%  { transform: scale(1.05) translate(-2px, -1px); filter: brightness(1.3) drop-shadow(0 0 8px var(--damage-red)); }
  75%  { transform: scale(0.98) translate(1px, 1px); }
  100% { transform: scale(1) translate(0, 0); filter: none; }
}

/* Kill Glow (Styleguide Neon & Green) */
.kill-glow {
  border-color: var(--style-neon) !important;
  box-shadow:
    0 0 20px rgba(217, 255, 61, 0.85),
    0 0 10px rgba(99, 178, 47, 0.9),
    inset 0 0 14px rgba(217, 255, 61, 0.4) !important;
  filter: drop-shadow(0 0 14px var(--style-neon)) drop-shadow(0 0 6px var(--style-green));
}

/* Heal / Medkit Glow (Styleguide Green) */
.heal-glow {
  border-color: var(--style-green) !important;
  box-shadow:
    0 0 18px rgba(99, 178, 47, 0.9),
    0 0 8px rgba(99, 178, 47, 1),
    inset 0 0 12px rgba(99, 178, 47, 0.5) !important;
  filter: drop-shadow(0 0 12px var(--style-green));
}

/* Fire / Shooting Glow (Fortnite Orange) */
.fire-glow,
.firing-glow {
  border-color: var(--fn-orange) !important;
  box-shadow:
    0 0 18px rgba(255, 128, 0, 0.9),
    0 0 8px rgba(255, 128, 15, 1),
    inset 0 0 12px rgba(255, 128, 0, 0.6) !important;
  filter: drop-shadow(0 0 14px var(--fn-orange)) drop-shadow(0 0 6px #ff800f);
  animation: doom-shake 0.12s ease-in-out infinite alternate;
}

@keyframes doom-shake {
  0%   { transform: translate(1px, 1px) scale(1.03); }
  50%  { transform: translate(-1px, -1px) scale(1.05); }
  100% { transform: translate(1px, -1px) scale(1.03); }
}

/* ========================================================
   STAT BARS (Hidden - Face Portrait Focused)
   ======================================================== */

.doom-hud-stats,
#doom-hud-stats {
  display: none !important;
}