/* In-game HUD - owned by the HUD module (src/ui/hud*.js).
   RDR2-like minimal overlay in a period register: off-white ink with soft dark shadows,
   brass accents, IM Fell English / Rye. Sizes are in em: HUD.js sets the root font-size
   from the viewport height (16px at 1080p), so everything scales together.
   Opacity of most blocks is driven from JS (contextual fades); CSS only transitions it. */

#ui-root > .hud {
  pointer-events: none;
}

.hud {
  --hud-ink: #efe6d3;
  --hud-dim: rgba(239, 230, 211, 0.66);
  --hud-faint: rgba(239, 230, 211, 0.38);
  --hud-brass: #d8b25a;
  --hud-brass-hi: #ecd08a;
  --hud-blood: #d0453a;
  --hud-panel: rgba(16, 12, 9, 0.62);
  --hud-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 0.55em rgba(0, 0, 0, 0.55);
  --hud-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --hud-num: 'IM Fell DW Pica', 'IM Fell English', Georgia, serif;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 5;
  color: var(--hud-ink);
  font-family: 'IM Fell English', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.25;
  text-shadow: var(--hud-shadow);
  user-select: none;
  transition: opacity 0.35s ease;
}
.hud * { box-sizing: border-box; }
.hud img { display: block; }
.hud .off { display: none !important; }
.hud.paused { opacity: 0; }

@keyframes hud-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes hud-flash { 50% { filter: brightness(1.8); } }
@keyframes hud-glow {
  0% { background-color: rgba(216, 178, 90, 0.42); }
  100% { background-color: rgba(216, 178, 90, 0); }
}

/* ------------------------------------------------------------------ radar + cores */

.hud-radar {
  position: absolute;
  left: 2.3em;
  bottom: 2.3em;
  border-radius: 50%;
  transition: opacity 0.6s ease;
}
.hud-radar-map {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: filter 0.6s ease;
}
.hud-radar-rim {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(18, 13, 9, 0.9);
  box-shadow: inset 0 0 0 1.5px rgba(216, 178, 90, 0.6), 0 0 1.4em rgba(0, 0, 0, 0.55), 0 0.15em 0.4em rgba(0, 0, 0, 0.6);
}
.hud-radar-north {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #1b140e;
  border: 1px solid rgba(216, 178, 90, 0.75);
  color: var(--hud-brass);
  font-family: var(--hud-sc);
  font-size: 0.78em;
  line-height: 1.25em;
  text-align: center;
  text-shadow: none;
}
.hud.focus .hud-radar-map { filter: sepia(0.6) saturate(0.85) brightness(0.96); }

.hud-cores { position: absolute; left: 0; top: 0; }
.hud-core {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.5s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.hud-core.hidden { display: none; }
.hud-core-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-core-bg { fill: rgba(18, 13, 9, 0.74); }
.hud-core-track { fill: none; stroke: rgba(239, 230, 211, 0.16); stroke-width: 3; }
.hud-core-ring { fill: none; stroke: var(--hud-ink); stroke-width: 3; stroke-linecap: round; transition: stroke 0.3s ease; }
.hud-core-focus .hud-core-ring { stroke: var(--hud-brass); }
.hud-core-horse .hud-core-ring { stroke: #c9b08a; }
.hud-core.low .hud-core-ring { stroke: var(--hud-blood); }
.hud-core-health.low { animation: hud-pulse 0.75s ease-in-out infinite alternate; }
.hud-core-icon { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; }
.hud-cores.focus .hud-core-ring { stroke: var(--hud-brass-hi); }
.hud-cores.focus .hud-core-bg { fill: rgba(70, 48, 14, 0.82); }
.hud-cores.focus .hud-core-focus { filter: drop-shadow(0 0 0.35em rgba(236, 208, 138, 0.95)); }

.hud-bandage {
  position: absolute;
  left: 86%;
  top: -34%;
  display: flex;
  align-items: center;
  gap: 0.12em;
  padding: 0.05em 0.42em 0.05em 0.22em;
  border-radius: 0.8em;
  background: rgba(18, 13, 9, 0.78);
  border: 1px solid rgba(239, 230, 211, 0.22);
  font-family: var(--hud-num);
  font-size: 0.74em;
  line-height: 1.2;
  white-space: nowrap;
}
.hud-bandage-icon { width: 1.15em; height: 1.15em; }
.hud-bandage.none { opacity: 0.55; }
.hud-bandage.none .hud-bandage-num { color: var(--hud-blood); }
.hud-bandage.flash { animation: hud-flash 0.35s ease 3; }

/* ------------------------------------------------------------------ battle meter */

.hud-meter {
  position: absolute;
  top: 1.35em;
  left: 50%;
  width: 22em;
  margin-left: -11em;
  text-align: center;
  transition: opacity 0.6s ease;
}
.hud-meter-row { display: flex; align-items: center; gap: 0.55em; }
.hud-meter-flag {
  width: 1.55em;
  height: 0.95em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  opacity: 0.94;
}
.hud-meter-bar {
  position: relative;
  flex: 1;
  height: 0.42em;
  background: linear-gradient(#97907f, #6f695e);
  border: 1px solid rgba(10, 8, 6, 0.9);
  box-shadow: 0 0 0.55em rgba(0, 0, 0, 0.55);
}
.hud-meter-blue {
  position: absolute;
  inset: 0;
  background: linear-gradient(#5b7cc0, #33508c);
  transform-origin: left center;
}
.hud-meter-mid {
  position: absolute;
  left: 50%;
  top: -0.22em;
  bottom: -0.22em;
  width: 1px;
  background: rgba(239, 230, 211, 0.5);
}
.hud-meter-track { position: absolute; inset: 0; }
.hud-meter-needle { position: absolute; left: 50%; top: -0.46em; width: 0; height: 1.34em; }
.hud-meter-needle::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--hud-brass-hi);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.95);
}
.hud-meter-needle::after {
  content: '';
  position: absolute;
  left: -0.27em;
  top: -0.3em;
  width: 0.54em;
  height: 0.54em;
  background: var(--hud-brass);
  border: 1px solid rgba(20, 14, 8, 0.9);
  transform: rotate(45deg);
}
.hud-meter-chev {
  position: absolute;
  top: 0.08em;
  display: flex;
  font-family: Georgia, serif;
  font-size: 1.05em;
  line-height: 1;
}
.hud-meter-chev.right { left: 0.45em; color: #9db8f0; }
.hud-meter-chev.left { right: 0.45em; flex-direction: row-reverse; color: #d6cfbf; }
.hud-meter-chev i { font-style: normal; opacity: 0; margin: 0 -0.04em; transition: opacity 0.4s ease; }
.hud-meter-chev.n1 i:nth-child(1),
.hud-meter-chev.n2 i:nth-child(-n + 2),
.hud-meter-chev.n3 i { opacity: 1; }
.hud-meter-info {
  margin-top: 0.42em;
  font-family: var(--hud-sc);
  font-size: 0.86em;
  letter-spacing: 0.08em;
  color: var(--hud-dim);
  white-space: nowrap;
}
.hud-meter-sep { margin: 0 0.5em; }
.hud-meter-time { font-family: var(--hud-num); letter-spacing: 0.04em; color: var(--hud-ink); }
.hud-meter-time.urgent { color: var(--hud-blood); animation: hud-pulse 0.6s ease-in-out infinite alternate; }

.hud-bounds {
  position: absolute;
  left: 50%;
  top: 6.3em;
  transform: translateX(-50%);
  font-family: var(--hud-sc);
  font-size: 0.95em;
  letter-spacing: 0.12em;
  color: #eab0a6;
  white-space: nowrap;
  opacity: 0;
}

/* ------------------------------------------------------------------ objectives + toasts (left) */

.hud-left {
  position: absolute;
  left: 2.2em;
  top: 1.7em;
  width: 27em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hud-obj { max-width: 27em; transition: opacity 0.6s ease; }
.hud-obj-head {
  display: none;
  font-family: var(--hud-sc);
  font-size: 0.82em;
  letter-spacing: 0.18em;
  color: var(--hud-brass);
  padding-bottom: 0.3em;
  margin-bottom: 0.45em;
  border-bottom: 1px solid rgba(216, 178, 90, 0.42);
}
.hud-obj.expanded {
  padding: 0.7em 1.1em 0.8em 0.85em;
  border-left: 2px solid rgba(216, 178, 90, 0.65);
  background: linear-gradient(90deg, rgba(16, 12, 9, 0.74), rgba(16, 12, 9, 0.4) 80%, rgba(16, 12, 9, 0));
}
.hud-obj.expanded .hud-obj-head { display: block; }
.hud-obj-row {
  display: none;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.14em 0.2em;
  font-size: 0.95em;
}
.hud-obj-row.primary { display: flex; font-size: 1.04em; }
.hud-obj.expanded .hud-obj-row { display: flex; }
.hud-obj-icon { flex: 0 0 1em; width: 1em; height: 1em; margin-top: 0.14em; }
.hud-obj-text { flex: 0 1 auto; }
.hud-obj-prog { flex: 0 0 auto; font-family: var(--hud-num); color: var(--hud-brass); margin-left: 0.15em; white-space: nowrap; }
.hud-obj-row.complete .hud-obj-text { color: var(--hud-dim); text-decoration: line-through; text-decoration-color: rgba(216, 178, 90, 0.75); }
.hud-obj-row.failed .hud-obj-text { color: rgba(234, 140, 128, 0.8); text-decoration: line-through; }
.hud-obj-row.flash { animation: hud-glow 1.1s ease-out 2; }
.hud-obj-hint { margin-top: 0.2em; font-size: 0.78em; font-style: italic; color: var(--hud-dim); }
.hud-obj.expanded .hud-obj-hint { display: none; }

.hud-toasts { display: flex; flex-direction: column; gap: 0.35em; margin-top: 0.7em; }
.hud-toast {
  display: none;
  align-items: center;
  gap: 0.5em;
  max-width: 27em;
  padding: 0.34em 1.6em 0.34em 0.6em;
  border-left: 2px solid rgba(239, 230, 211, 0.5);
  background: linear-gradient(90deg, rgba(16, 12, 9, 0.7), rgba(16, 12, 9, 0));
  font-size: 0.92em;
}
.hud-toast.on { display: flex; }
.hud-toast.good { border-left-color: var(--hud-brass); }
.hud-toast.bad { border-left-color: var(--hud-blood); }
.hud-toast.medal { border-left-color: var(--hud-brass-hi); }
.hud-toast-icon { flex: 0 0 1.05em; width: 1.05em; height: 1.05em; }
.hud-toast-merit { font-family: var(--hud-num); color: var(--hud-brass); padding-left: 0.6em; white-space: nowrap; }

/* ------------------------------------------------------------------ kill feed (right) */

.hud-right {
  position: absolute;
  right: 2.2em;
  top: 5.4em;
  width: 30em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hud-feed { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3em; }
.hud-feed-row {
  display: none;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.3em 0.3em 2em;
  background: linear-gradient(270deg, rgba(16, 12, 9, 0.66), rgba(16, 12, 9, 0));
  font-size: 0.92em;
  white-space: nowrap;
}
.hud-feed-row.on { display: flex; }
.hud-feed-icon { width: 1.1em; height: 1.1em; }
.hud-feed-meta { color: var(--hud-dim); font-style: italic; }
.hud-feed-merit { min-width: 3.2em; padding-left: 0.4em; text-align: right; font-family: var(--hud-num); color: var(--hud-brass); }
.hud-feed-row.hv .hud-feed-name { color: #f4dfa8; }
.hud-feed-row.head .hud-feed-meta { color: #eab0a6; }
.hud-feed-row.friendly .hud-feed-name,
.hud-feed-row.friendly .hud-feed-merit { color: var(--hud-blood); }

/* ------------------------------------------------------------------ weapon panel (bottom right) */

.hud-weapon {
  position: absolute;
  right: 2.4em;
  bottom: 2.2em;
  width: 18em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  transition: opacity 0.5s ease;
}
.hud-wp-top { display: flex; align-items: center; gap: 0.6em; }
.hud-wp-icon {
  width: 8.6em;
  height: 2.7em;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 0.4em rgba(0, 0, 0, 0.5));
}
.hud-wp-ring { width: 1.9em; height: 1.9em; opacity: 0; transition: opacity 0.2s ease; }
.hud-wp-ring.on { opacity: 1; }
.hud-wp-ring svg { display: block; width: 100%; height: 100%; }
.hud-wp-ring-track { fill: rgba(18, 13, 9, 0.6); stroke: rgba(239, 230, 211, 0.2); stroke-width: 3; }
.hud-wp-ring-arc { fill: none; stroke: var(--hud-brass); stroke-width: 3; stroke-linecap: round; }
.hud-wp-name { margin-top: 0.12em; font-family: var(--hud-sc); font-size: 0.92em; letter-spacing: 0.1em; }
.hud-wp-rounds { display: flex; align-items: center; gap: 0.75em; margin-top: 0.28em; }
.hud-wp-pips { display: flex; gap: 0.24em; }
.hud-wp-pip {
  width: 0.44em;
  height: 1.18em;
  border-radius: 0.22em 0.22em 0.08em 0.08em;
  border: 1px solid rgba(239, 230, 211, 0.5);
  background: rgba(18, 13, 9, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.hud-wp-pip.full {
  border-color: #f2e4bf;
  background: linear-gradient(180deg, #a3a49c 0, #a3a49c 30%, #dccaa0 30%, #c8ad78 100%);
}
.hud-wp-pip.off { display: none; }
.hud-wp-reserve { min-width: 1.6em; font-family: var(--hud-num); font-size: 1.5em; line-height: 1; }
.hud-wp-reserve.low { color: #ecb26a; }
.hud-wp-reserve.empty { color: var(--hud-blood); }
.hud-wp-sub {
  display: flex;
  justify-content: flex-end;
  gap: 0.9em;
  margin-top: 0.22em;
  font-size: 0.82em;
  font-style: italic;
  color: var(--hud-dim);
  white-space: nowrap;
}
.hud-wp-ammo.explosive { color: #ecb26a; }
.hud-wp-elev { font-style: normal; font-family: var(--hud-num); color: var(--hud-ink); }
.hud-wp-alt { margin-top: 0.12em; font-size: 0.72em; color: var(--hud-faint); white-space: nowrap; }

/* ------------------------------------------------------------------ hints, prompt, subtitles */

.hud-hint {
  position: absolute;
  right: 2.4em;
  bottom: 12.6em;
  max-width: 26em;
  text-align: right;
  font-size: 0.9em;
  font-style: italic;
  color: #f2dca6;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hud-hint.show { opacity: 1; }
.hud-hint.hidden { opacity: 0; }

.hud-prompt {
  position: absolute;
  right: 2.4em;
  bottom: 14.8em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  opacity: 0;
  transform: translate3d(0, 0.3em, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hud-prompt.show { opacity: 1; transform: none; }
.hud-prompt.hidden { opacity: 0; }
.hud-prompt-key {
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.42em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.24em;
  background: #efe6d3;
  color: #1b1611;
  font-family: var(--hud-sc);
  font-size: 0.92em;
  text-shadow: none;
  box-shadow: 0 2px 0 #8c816d, 0 0 0.6em rgba(0, 0, 0, 0.6);
}
.hud-prompt-label { font-size: 1.02em; }

.hud-sub {
  position: absolute;
  left: 50%;
  bottom: 3.9em;
  width: max-content;
  max-width: 46em;
  padding: 0.3em 1.2em;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1.12em;
  line-height: 1.38;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(closest-side, rgba(10, 8, 6, 0.5), rgba(10, 8, 6, 0.22) 60%, rgba(10, 8, 6, 0));
}
.hud-sub.show { opacity: 1; }
.hud-sub-who { margin-right: 0.45em; font-family: var(--hud-sc); letter-spacing: 0.05em; color: var(--hud-brass-hi); }

/* ------------------------------------------------------------------ centre: crosshair, hits, detection, damage */

.hud-center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hud.cinematic .hud-center,
.hud.dead .hud-center { opacity: 0; }

.hud-xh { position: absolute; left: 0; top: 0; transition: opacity 0.15s ease; }
.hud-xh.off { opacity: 0; }
.hud-xh-dot {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hud-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  opacity: 0.8;
}
.hud-xh-tick {
  position: absolute;
  background: var(--hud-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hud-xh.aim .hud-xh-tick { opacity: 0.88; }
.hud-xh-t, .hud-xh-b { left: -1px; width: 2px; height: 7px; }
.hud-xh-t { top: -7px; }
.hud-xh-b { top: 0; }
.hud-xh-l, .hud-xh-r { top: -1px; width: 7px; height: 2px; }
.hud-xh-l { left: -7px; }
.hud-xh-r { left: 0; }

.hud-hit { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.hud-hit i {
  position: absolute;
  left: -0.32em;
  top: -1px;
  width: 0.64em;
  height: 2px;
  background: #f6eedb;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
}
.hud-hit-a { transform: rotate(45deg) translateX(0.85em); }
.hud-hit-b { transform: rotate(135deg) translateX(0.85em); }
.hud-hit-c { transform: rotate(225deg) translateX(0.85em); }
.hud-hit-d { transform: rotate(315deg) translateX(0.85em); }
.hud-hit.kill i { height: 3px; top: -1.5px; width: 0.8em; left: -0.4em; background: #e2463a; }
.hud-hit-skull {
  position: absolute;
  left: -0.6em;
  top: 1.35em;
  width: 1.2em;
  height: 1.2em;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}
.hud-hit.head .hud-hit-skull { opacity: 1; }

.hud-arc, .hud-dmg {
  position: absolute;
  left: -9.375em;
  top: -9.375em;
  width: 18.75em;
  height: 18.75em;
  opacity: 0;
}
.hud-arc svg, .hud-dmg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-arc-path { fill: none; stroke: #d8392d; stroke-width: 5; stroke-linecap: round; }
.hud-arc-tip { fill: #d8392d; }
.hud-arc svg { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.75)); }
.hud-dmg-path { fill: rgba(176, 22, 14, 0.72); stroke: rgba(255, 128, 108, 0.45); stroke-width: 1; }
.hud-dmg svg { filter: drop-shadow(0 0 6px rgba(150, 0, 0, 0.8)); }

.hud-eye {
  position: absolute;
  left: -1.7em;
  top: -10.9em;
  width: 3.4em;
  text-align: center;
  opacity: 0;
}
.hud-eye-svg { display: block; width: 3.4em; height: 2em; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); }
.hud-eye-bg { fill: rgba(18, 13, 9, 0.6); }
.hud-eye-fill { fill: #e2b552; transition: fill 0.3s ease; }
.hud-eye.warn .hud-eye-fill { fill: #e47b2e; }
.hud-eye.spotted .hud-eye-fill { fill: #d2382c; }
.hud-eye-line { fill: none; stroke: var(--hud-ink); stroke-width: 1.7; }
.hud-eye-pupil { fill: #1a120c; opacity: 0; transition: opacity 0.2s ease; }
.hud-eye.spotted .hud-eye-pupil { opacity: 0.9; }
.hud-eye.spotted .hud-eye-svg { animation: hud-pulse 0.5s ease-in-out infinite alternate; }
.hud-eye-label {
  position: absolute;
  left: -3em;
  right: -3em;
  bottom: 100%;
  margin-bottom: 0.2em;
  font-family: var(--hud-sc);
  font-size: 0.7em;
  letter-spacing: 0.14em;
  color: #ea5a4e;
  opacity: 0;
  white-space: nowrap;
}
.hud-eye.spotted .hud-eye-label { opacity: 1; }

/* ------------------------------------------------------------------ world markers */

.hud-markers { position: absolute; inset: 0; transition: opacity 0.4s ease; }
.hud.scoped .hud-markers .hud-mk-dist { opacity: 0.8; }
.hud-mk { position: absolute; left: 0; top: 0; display: none; will-change: transform; }
.hud-mk.on { display: block; }
.hud-mk-pin {
  position: absolute;
  left: -0.86em;
  top: -0.86em;
  width: 1.72em;
  height: 1.72em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(239, 230, 211, 0.9);
  background: rgba(20, 14, 10, 0.6);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
}
.hud-mk-icon { width: 1.05em; height: 1.05em; }
.hud-mk.foe .hud-mk-pin { border-color: #e0574b; background: rgba(96, 18, 12, 0.66); }
.hud-mk.friend .hud-mk-pin { border-color: #9db8f0; background: rgba(24, 36, 70, 0.66); }
.hud-mk.obj .hud-mk-pin,
.hud-mk.ammo .hud-mk-pin { border-color: var(--hud-brass); border-radius: 0.2em; transform: rotate(45deg); background: rgba(40, 28, 10, 0.7); }
.hud-mk.obj .hud-mk-icon,
.hud-mk.ammo .hud-mk-icon { transform: rotate(-45deg); }
.hud-mk.dead .hud-mk-pin { opacity: 0.55; border-color: rgba(239, 230, 211, 0.45); }
.hud-mk.occluded .hud-mk-pin { opacity: 0.42; }
.hud-mk-dist {
  position: absolute;
  left: -4em;
  top: 1.15em;
  width: 8em;
  text-align: center;
  font-family: var(--hud-num);
  font-size: 0.78em;
  white-space: nowrap;
  color: var(--hud-ink);
}
.hud-mk.obj .hud-mk-dist,
.hud-mk.ammo .hud-mk-dist { color: var(--hud-brass-hi); }
.hud-mk-label {
  position: absolute;
  left: 1.25em;
  top: -0.68em;
  padding: 0.05em 0.5em 0.1em 0.35em;
  font-size: 0.86em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(90deg, rgba(16, 12, 9, 0.6), rgba(16, 12, 9, 0));
}
.hud-mk.focus .hud-mk-label { opacity: 1; }
.hud-mk-arrow { position: absolute; left: -1.7em; top: -1.7em; width: 3.4em; height: 3.4em; display: none; }
.hud-mk.edge .hud-mk-arrow { display: block; }
.hud-mk-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.1em;
  margin-left: -0.36em;
  border-left: 0.36em solid transparent;
  border-right: 0.36em solid transparent;
  border-bottom: 0.48em solid var(--hud-ink);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
.hud-mk.foe .hud-mk-arrow::before { border-bottom-color: #e0574b; }
.hud-mk.obj .hud-mk-arrow::before,
.hud-mk.ammo .hud-mk-arrow::before { border-bottom-color: var(--hud-brass); }

/* ------------------------------------------------------------------ cards and banners */

.hud-card {
  position: absolute;
  left: 50%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease, transform 1.1s ease;
}
.hud-card.show { opacity: 1; }
.hud-card-art { margin: 0 auto 0.45em; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)); }
.hud-card-kicker { font-family: var(--hud-sc); letter-spacing: 0.3em; color: var(--hud-dim); }
.hud-card-title { color: #f3e9d4; }
.hud-card-rule {
  position: relative;
  height: 1px;
  margin: 0.55em auto 0.5em;
  background: linear-gradient(90deg, rgba(216, 178, 90, 0), var(--hud-brass), rgba(216, 178, 90, 0));
}
.hud-card-rule i {
  position: absolute;
  left: 50%;
  top: -0.27em;
  width: 0.54em;
  height: 0.54em;
  margin-left: -0.27em;
  background: var(--hud-brass);
  transform: rotate(45deg);
}
.hud-card-sub { font-style: italic; }
.hud-card-merit { margin-top: 0.3em; font-family: var(--hud-num); color: var(--hud-brass); }

.hud-title {
  top: 37%;
  width: 60em;
  margin-left: -30em;
  transform: translateY(-50%) scale(0.985);
}
.hud-title.show { transform: translateY(-50%) scale(1); }
.hud-title::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -40%;
  bottom: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 6, 4, 0.58), rgba(8, 6, 4, 0.3) 55%, rgba(8, 6, 4, 0));
}
.hud-title .hud-card-art { display: none; }
.hud-title .hud-card-kicker { font-size: 1.05em; }
.hud-title .hud-card-title { font-family: 'Rye', 'IM Fell English SC', Georgia, serif; font-size: 3.6em; line-height: 1.08; letter-spacing: 0.02em; }
.hud-title .hud-card-rule { width: 18em; }
.hud-title .hud-card-sub { font-size: 1.2em; }
.hud-title.chapter .hud-card-title { font-size: 4.4em; }
.hud-title.phase .hud-card-title { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 2.3em; }
.hud-title.phase .hud-card-rule { width: 12em; }
.hud-title.phase .hud-card-sub { display: none; }
.hud-title.victory .hud-card-title { font-size: 5.2em; color: var(--hud-brass-hi); }
.hud-title.defeat .hud-card-title { font-size: 5.2em; color: #d35a4c; }

.hud-banner {
  top: 6.4em;
  width: 36em;
  margin-left: -18em;
  padding: 0.6em 1.5em 0.8em;
  transform: translate3d(0, -0.5em, 0);
}
.hud-banner::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 18%;
  bottom: -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 8, 6, 0.5), rgba(10, 8, 6, 0.24) 55%, rgba(10, 8, 6, 0));
}
.hud-banner.show { transform: none; }
.hud-banner .hud-card-art { width: 2.2em; height: 2.2em; }
.hud-banner.medal .hud-card-art,
.hud-banner.rank .hud-card-art { width: 6.2em; height: 6.2em; }
.hud-banner .hud-card-kicker { font-size: 0.84em; color: var(--hud-brass); }
.hud-banner.failed .hud-card-kicker { color: var(--hud-blood); }
.hud-banner .hud-card-title { font-size: 1.5em; line-height: 1.2; }
.hud-banner.medal .hud-card-title,
.hud-banner.rank .hud-card-title { font-family: 'Rye', 'IM Fell English SC', Georgia, serif; font-size: 1.9em; }
.hud-banner .hud-card-rule { width: 10em; margin: 0.4em auto; }
.hud-banner .hud-card-sub { font-size: 0.92em; color: var(--hud-dim); }
.hud-banner .hud-card-sub:empty,
.hud-banner .hud-card-merit:empty { display: none; }

/* ------------------------------------------------------------------ campaign additions (CAMPAIGN_PLAN §4 HUD row) */

/* objectives: live progress tones */
.hud-obj-prog.warn { color: #ecb26a; }
.hud-obj-prog.bad { color: #ea6a5c; }
.hud-obj-prog.good { color: var(--hud-brass-hi); }

/* campaign strip under the battle meter */
.hud-cp {
  position: absolute;
  top: 4.35em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
  transition: opacity 0.5s ease;
}
.hud-cp-chip {
  display: flex;
  align-items: center;
  gap: 0.38em;
  padding: 0.16em 0.85em 0.18em 0.6em;
  background: linear-gradient(90deg, rgba(16, 12, 9, 0), rgba(16, 12, 9, 0.62) 16%, rgba(16, 12, 9, 0.62) 84%, rgba(16, 12, 9, 0));
  font-family: var(--hud-sc);
  font-size: 0.86em;
  letter-spacing: 0.06em;
}
.hud-cp-icon { width: 1.08em; height: 1.08em; }
.hud-cp-chip.warn { color: #ecb26a; }
.hud-cp-chip.urgent { color: #ef5d4f; animation: hud-pulse 0.55s ease-in-out infinite alternate; }
.hud-cp-chip.done { color: var(--hud-brass-hi); }
.hud-cp-chip.pulse { animation: hud-flash 0.6s ease 3; }
.hud-cp-bar {
  position: relative;
  display: inline-block;
  width: 4.4em;
  height: 0.34em;
  overflow: hidden;
  border: 1px solid rgba(239, 230, 211, 0.42);
  background: rgba(239, 230, 211, 0.14);
}
.hud-cp-bar i { position: absolute; inset: 0; background: var(--hud-brass); transform-origin: left center; transform: scaleX(0); }
.hud-cp-chip.warn .hud-cp-bar i { background: #c9813e; }
.hud-cp-pct { font-family: var(--hud-num); min-width: 2.4em; text-align: right; }

/* weapon panel: flash word, ring modes, scaled pips, caps / gear / handling chips */
.hud-wp-flash {
  position: absolute;
  right: 11.4em;      /* beside the ring and silhouette, clear of the hint and prompt lines above */
  top: 0.55em;
  font-family: var(--hud-sc);
  font-size: 1.15em;
  letter-spacing: 0.12em;
  color: var(--hud-ink);
  white-space: nowrap;
  opacity: 0;
}
.hud-wp-flash.bad { color: #f06a5a; }
.hud-wp-flash.good { color: var(--hud-brass-hi); }
.hud-wp-flash.big { font-family: 'Rye', 'IM Fell English SC', Georgia, serif; font-size: 1.7em; letter-spacing: 0.04em; }
.hud-wp-ring.recap .hud-wp-ring-arc { stroke: #c9d2d6; }
.hud-wp-ring.jam .hud-wp-ring-arc { stroke: var(--hud-blood); }
.hud-wp-pips.n-m { gap: 0.18em; }
.hud-wp-pips.n-m .hud-wp-pip { width: 0.36em; height: 1.02em; }
.hud-wp-pips.n-l { display: grid; grid-template-columns: repeat(8, auto); gap: 0.16em 0.17em; }
.hud-wp-pips.n-l .hud-wp-pip { width: 0.3em; height: 0.8em; border-radius: 0.15em 0.15em 0.06em 0.06em; }
.hud-wp-pip.chamber { border-color: rgba(216, 178, 90, 0.85); }
.hud-wp-pips:not(.n-l) .hud-wp-pip.chamber { margin-right: 0.22em; }
.hud-wp-pip.chamber.full { border-color: var(--hud-brass-hi); background: linear-gradient(180deg, #c9c2a8 0, #c9c2a8 30%, #ecd9a4 30%, #d8b25a 100%); }
.hud-wp-ammo.bad { color: #f07a6c; font-style: normal; }
.hud-wp-kit {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.3em;
  margin-top: 0.3em;
  font-size: 0.74em;
}
.hud-wp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.06em 0.5em 0.08em 0.36em;
  border: 1px solid rgba(239, 230, 211, 0.22);
  border-radius: 0.75em;
  background: rgba(18, 13, 9, 0.55);
  color: var(--hud-dim);
  white-space: nowrap;
}
.hud-wp-chip-icon { width: 1.08em; height: 1.08em; }
.hud-wp-caps { font-family: var(--hud-num); color: var(--hud-ink); }
.hud-wp-caps.low { color: #ecb26a; border-color: rgba(236, 178, 106, 0.55); }
.hud-wp-caps.empty { color: #f06a5a; border-color: rgba(208, 69, 58, 0.75); animation: hud-pulse 0.6s ease-in-out infinite alternate; }
.hud-wp-period { border-color: rgba(216, 178, 90, 0.5); color: var(--hud-brass); font-family: var(--hud-sc); letter-spacing: 0.05em; }
.hud-wp-fogchip { color: #d6dde0; }

/* crosshair: hold-fire warning */
.hud-xh.warn .hud-xh-dot,
.hud-xh.warn .hud-xh-tick { background: #e8483b; box-shadow: 0 0 0 1px rgba(40, 0, 0, 0.7), 0 0 6px rgba(232, 72, 59, 0.75); opacity: 1; }
.hud-xh.warn .hud-xh-dot { transform: scale(1.5); }
.hud-xh-warn {
  position: absolute;
  left: 0;
  top: 1.65em;
  transform: translate3d(-50%, 0, 0);
  padding: 0.14em 0.75em 0.18em;
  font-family: var(--hud-sc);
  font-size: 0.92em;
  letter-spacing: 0.08em;
  color: #f4a092;
  white-space: nowrap;
  background: radial-gradient(closest-side, rgba(40, 6, 4, 0.62), rgba(40, 6, 4, 0.28) 70%, rgba(40, 6, 4, 0));
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hud-xh-warn.on { opacity: 1; }
.hud-xh-warn.friendly { color: #f2c98a; }
.hud.cinematic .hud-xh-warn,
.hud.dead .hud-xh-warn { opacity: 0; }

/* world markers: count badge, protect shield, bars, NPC names, areas, pickups, units */
.hud-mk-count {
  position: absolute;
  right: -0.95em;
  top: -0.62em;
  display: none;
  min-width: 1.25em;
  padding: 0 0.28em;
  border-radius: 0.6em;
  background: var(--hud-brass);
  color: #1b1611;
  font-family: var(--hud-num);
  font-size: 0.7em;
  line-height: 1.3;
  text-align: center;
  text-shadow: none;
}
.hud-mk.cluster .hud-mk-count { display: block; }
.hud-mk.obj .hud-mk-count,
.hud-mk.ammo .hud-mk-count { transform: rotate(-45deg); }
/* (.hud-mk scope: '.hud img' would otherwise force every badge visible) */
.hud-mk .hud-mk-shield { position: absolute; left: -0.62em; top: -0.62em; width: 0.95em; height: 0.95em; display: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.hud-mk.protect .hud-mk-shield { display: block; }
.hud-mk-bar {
  position: absolute;
  left: -1.05em;
  top: 1.06em;
  width: 2.1em;
  height: 0.28em;
  display: none;
  border: 1px solid rgba(239, 230, 211, 0.45);
  background: rgba(18, 13, 9, 0.72);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.hud-mk.hasbar .hud-mk-bar { display: block; }
.hud-mk.hasbar .hud-mk-dist { top: 1.62em; }
.hud-mk-fill { position: absolute; inset: 0; background: #ece2c8; transform-origin: left center; transform: scaleX(1); }
.hud-mk-tick { position: absolute; top: -0.22em; bottom: -0.22em; width: 2px; margin-left: -1px; background: var(--hud-brass-hi); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
.hud-mk.foe .hud-mk-fill,
.hud-mk.unit .hud-mk-fill { background: #e3a04c; }
.hud-mk.tone-good .hud-mk-fill { background: var(--hud-brass-hi); }
.hud-mk.bar-loss .hud-mk-fill,
.hud-mk.wounded .hud-mk-fill { background: #d8473b; }
.hud-mk.npc.friend .hud-mk-fill { background: #b9cdf4; }
.hud-mk.npc.wounded .hud-mk-fill { background: #d8473b; }
.hud-mk.npc .hud-mk-label { opacity: 1; font-size: 0.8em; top: -0.72em; }
.hud-mk.npc.focus .hud-mk-label { font-size: 0.86em; }
.hud-mk.npc.edge .hud-mk-label { opacity: 0; }
.hud-mk-tag {
  margin-left: 0.45em;
  padding: 0 0.32em;
  border: 1px solid rgba(216, 178, 90, 0.7);
  border-radius: 0.2em;
  font-family: var(--hud-sc);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--hud-brass-hi);
}
.hud-mk.protect .hud-mk-pin { border-color: var(--hud-brass-hi); box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(216, 178, 90, 0.45); }
.hud-mk.wounded .hud-mk-pin { border-color: #e0574b; animation: hud-pulse 0.7s ease-in-out infinite alternate; }
.hud-mk.tone-warn .hud-mk-dist { color: #ecb26a; }
.hud-mk.tone-bad .hud-mk-dist { color: #ef6a5c; }
.hud-mk.tone-good .hud-mk-dist { color: var(--hud-brass-hi); }
.hud-mk.area.tone-bad .hud-mk-pin { border-color: #e0574b; animation: hud-pulse 0.55s ease-in-out infinite alternate; }
.hud-mk.pickup .hud-mk-pin { width: 1.42em; height: 1.42em; left: -0.71em; top: -0.71em; }
.hud-mk.pickup .hud-mk-icon { width: 0.9em; height: 0.9em; }
.hud-mk.unit .hud-mk-pin { border-radius: 0.3em; }
.hud-mk.unit.foe .hud-mk-pin { border-color: #e3a04c; }
.hud-mk.edge .hud-mk-dist { font-size: 0.68em; }
.hud-mk.edge.hasbar .hud-mk-dist { top: 1.75em; }
.hud-mk.crowded .hud-mk-pin { opacity: 0.38; }
.hud-mk.crowded .hud-mk-dist,
.hud-mk.crowded .hud-mk-bar,
.hud-mk.crowded .hud-mk-label { display: none; }

/* toasts: the strong (Reputation lost) variant */
.hud-toast.strong {
  padding: 0.5em 2em 0.5em 0.75em;
  border-left: 3px solid var(--hud-blood);
  background: linear-gradient(90deg, rgba(118, 22, 14, 0.82), rgba(70, 12, 8, 0.45) 72%, rgba(16, 12, 9, 0));
  color: #fde6de;
  font-family: var(--hud-sc);
  font-size: 1.04em;
  letter-spacing: 0.04em;
}

/* cards: the campaign protagonist line and the Reputation card */
.hud-card-who { margin-top: 0.55em; font-family: var(--hud-sc); letter-spacing: 0.12em; color: var(--hud-brass-hi); }
.hud-card-who:empty { display: none; }
.hud-title .hud-card-who { font-size: 1.02em; }
.hud-banner .hud-card-who { display: none; }
.hud-title.reputation .hud-card-kicker { color: #ef6a5c; letter-spacing: 0.34em; }
.hud-title.reputation .hud-card-title { font-size: 3.6em; color: #e1604f; }
.hud-title.reputation .hud-card-rule { background: linear-gradient(90deg, rgba(208, 69, 58, 0), var(--hud-blood), rgba(208, 69, 58, 0)); }
.hud-title.reputation .hud-card-rule i { background: var(--hud-blood); }

/* ------------------------------------------------------------------ narrow screens */

@media (max-aspect-ratio: 4/3) {
  .hud-left, .hud-obj, .hud-toast { max-width: 20em; }
  .hud-right { width: 22em; }
  .hud-title { width: 40em; margin-left: -20em; }
}