/* ================== Wolfenstein Steel HUD Shell ================== */
:root{
  /* steel palette (shared with boss HUD accent) */
  --steel-0: #0d0d0d;   /* deep shadow */
  --steel-1: #171717;   /* panel base */
  --steel-2: #1f1f1f;   /* inner bevel */
  --steel-3: #2a2a2a;   /* face */
  --steel-4: #3a3a3a;   /* highlight edge */
  --steel-5: #555555;   /* bright edge */
  --accent-warn: #ffc107;  /* existing yellow accent */
}

/* Shared bezel look for both top & bottom bars */
.hud-bezel {
  background:
    linear-gradient(#090909, #090909) padding-box,
    linear-gradient(90deg, rgba(255,193,7,.4), rgba(255,193,7,0), rgba(255,193,7,.4)) border-box;
  border: 2px solid transparent;
  box-shadow:
    inset 0 1px 0 var(--steel-5),
    inset 0 -1px 0 var(--steel-0),
    0 6px 20px rgba(0,0,0,.65);
  color: var(--hud-green);
  font-family: var(--font);
  text-shadow: 0 1px 0 #000;
}

/* Thin pixel rim + inner steel plate */
.hud-plate {
  background:
    linear-gradient(180deg, var(--steel-3), var(--steel-2));
  border: 1px solid #222;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6);
}

/* ---------- TOP BAR (Round/Sector) ---------- */
/* Remove top HUD entirely */
.hud-top{ display:none !important; }

.hud-bottom .cluster{ display:flex; gap:12px; align-items:center; }
.hud-bottom .tag{
  display:flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:0;
  pointer-events:none;
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2));
  border: 1px solid #242424;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.6);
}
.hud-bottom .lbl{ color:var(--accent-warn); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.hud-bottom .val{ color:var(--hud-green); font-size:12px; font-weight:900; letter-spacing:.06em; }

/* Hide top bar in boss fights, like before */
#screen-hud.boss-mode .hud-top{ display:none; }

/* ---------- BOTTOM BAR (HP/Ammo/Score) ---------- */
.hud-bottom{
  position:absolute; bottom:10px; left:10px; right:10px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 16px;
  pointer-events:none; z-index:20;
  /* Match boss panel steel look more closely */
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2));
  border: 2px solid #232323;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.8), 0 -6px 20px rgba(0,0,0,.65);
  color: var(--hud-green);
  text-shadow: 0 1px 0 #000;
}

.hud-seg{ display:flex; align-items:center; gap:12px; }
.hud-label{ color:var(--accent-warn); font-size:12px; text-transform:uppercase; white-space:nowrap; letter-spacing:.08em; }
.hud-value{ color:var(--hud-green); font-size:14px; font-weight:900; white-space:nowrap; letter-spacing:.06em; }

/* HP bar — steel groove */
.hp-bar{
  position:relative; width:220px; height:20px; pointer-events:none;
  /* EXACTLY match boss bar styling */
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2));
  border: 2px solid #232323;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.35);
}
.hp-fill{
  position:absolute; left:1px; top:1px; bottom:1px;
  /* EXACTLY match boss bar fill */
  background: linear-gradient(90deg, #8a1111, #e05353);
  box-shadow: inset 0 0 8px rgba(0,0,0,.35), 0 0 3px rgba(229,62,62,.7);
  transition: width .2s ease-out;
}

/* Ammo pips — steel casings with amber on */
.pips{ display:flex; gap:4px; align-items:center; }
.pip{
  width:14px; height:18px;
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2));
  border:1px solid #2a2a2a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.7);
}
.pip.on{
  background: linear-gradient(180deg, #f6c446, #9e6f0c);
  border-color: #5a4207;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.8), 0 0 4px rgba(255,193,7,.35);
}

/* Make boss HP shell use exact same steel styling on name/bar containers */
.boss-name,
.boss-hp-bar-container{
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2));
  border: 1px solid #242424;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 0 2px rgba(255,193,7,.25);
}
.boss-hp-label{ color:var(--accent-warn); }

/* ===== Wolfenstein shell — forced overrides ===== */

/* 0) Ensure the wrapper isn't painting over the bars */
#screen-hud,
#hud,
.hud {
  background: transparent !important;
}

/* 1) Match both class and id versions */
#screen-hud .hud-bottom,
.hud-bottom,
#hud-bottom {
  /* size/position stays as you had */
  background:
    linear-gradient(#090909, #090909) padding-box,
    linear-gradient(90deg, rgba(255,193,7,.4), rgba(255,193,7,0), rgba(255,193,7,.4)) border-box !important;
  border: 2px solid transparent !important;     /* kill any old yellow borders */
  box-shadow:
    inset 0 1px 0 var(--steel-5),
    inset 0 -1px 0 var(--steel-0),
    0 6px 20px rgba(0,0,0,.65) !important;
  color: var(--hud-green) !important;
  text-shadow: 0 1px 0 #000 !important;
}

/* 2) Inner tag/plates look (round/sector capsules etc.) */
#screen-hud .hud-bottom .tag,
.hud-bottom .tag,
#hud-bottom .tag {
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2)) !important;
  border: 1px solid #242424 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6) !important;
}

/* 3) HP groove + ammo pips in steel */
#screen-hud .hp-bar, .hp-bar {
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2)) !important;
  border: 1px solid #232323 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.7) !important;
}
#screen-hud .hp-fill, .hp-fill {
  background: linear-gradient(90deg, #b54646, #e05353) !important;
}

#screen-hud .pips .pip, .pips .pip {
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2)) !important;
  border: 1px solid #2a2a2a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.7) !important;
}
#screen-hud .pips .pip.on, .pips .pip.on {
  background: linear-gradient(180deg, #f6c446, #c38c10) !important;
  border-color: #6a4f07 !important;
}

/* 4) Make boss HUD shell match (in case other styles linger) */
#screen-hud .boss-name, .boss-name,
#screen-hud .boss-hp-bar-container, .boss-hp-bar-container {
  background: linear-gradient(180deg, var(--steel-3), var(--steel-2)) !important;
  border: 1px solid #242424 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 0 2px rgba(255,193,7,.25) !important;
}

/* Boss HP bar visuals (chunky) */
.boss-hp-bar{
  position: relative; width: clamp(240px, 60vw, 720px); height: 22px;
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2));
  border: 2px solid #232323;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.35);
}
.boss-hp-fill{
  position:absolute; left:2px; top:2px; bottom:2px;
  background: linear-gradient(90deg, #8a1111, #e05353);
  box-shadow: inset 0 0 8px rgba(0,0,0,.35), 0 0 3px rgba(229,62,62,.7);
}
.boss-name-text, .boss-hp-text{
  font-family: var(--font);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

/* Hide boss bar by default; show only when boss is active */
.boss-hp-container { display: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); gap: 10px; align-items: center; }
#screen-hud.boss-active .boss-hp-container { display: flex; }