/* HUD поверх кадра из игры. Материалы повторяют HudStyle: стекло, матовое, графит, аврора, светлая, моно.
   Размеры в дизайн-пикселях кадра 1600x1000, блок масштабируется целиком, как .gui. */

.hudstage {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--r-panel);
  aspect-ratio: 16 / 10;
  background: #111;
  box-shadow: 0 0 0 1px var(--hairline);
}
.hudstage__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hud { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; font: 500 14px/1.2 var(--font); }

.hudstage {
  --h-bg: rgba(14, 14, 16, 0.55); --h-blur: blur(13px) saturate(1.3); --h-ink: #f2f2f3; --h-muted: rgba(242, 242, 243, 0.55);
  --h-line: rgba(255, 255, 255, 0.1); --h-edge: none; --h-accent: var(--accent); --h-shadow: 0 8px 21px rgba(0, 0, 0, 0.25);
}
.hudstage[data-hud="matte"] { --h-bg: rgba(20, 20, 22, 0.94); --h-blur: none; }
.hudstage[data-hud="graphite"] { --h-bg: linear-gradient(180deg, #2a2a2e, #1b1b1e); --h-blur: none; --h-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14); --h-shadow: 0 13px 34px rgba(0, 0, 0, 0.45); }
.hudstage[data-hud="aurora"] { --h-bg: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%), rgba(14, 14, 16, 0.55); }
.hudstage[data-hud="light"] { --h-bg: rgba(246, 246, 248, 0.92); --h-blur: blur(13px); --h-ink: #141416; --h-muted: rgba(20, 20, 22, 0.55); --h-line: rgba(0, 0, 0, 0.1); }
.hudstage[data-hud="mono"] { --h-accent: #d4d4d8; --h-bg: rgba(24, 24, 26, 0.8); }

.h {
  position: absolute; color: var(--h-ink);
  background: var(--h-bg); backdrop-filter: var(--h-blur); -webkit-backdrop-filter: var(--h-blur);
  box-shadow: var(--h-edge), var(--h-shadow), 0 0 0 1px var(--h-line);
  border-radius: 13px;
  transition: background 0.3s, color 0.3s;
}
.h--pill { border-radius: 999px; display: flex; align-items: center; height: 32px; padding: 0 13px; gap: 8px; }
.h small { color: var(--h-muted); font-size: 11px; font-weight: 500; }
.h .sep { width: 1px; height: 14px; background: var(--h-line); }
.h img.logo { width: 18px; height: 17px; }
.hudstage[data-hud="light"] .h img.logo { filter: invert(1); }

.h-keys { padding: 8px 13px; display: grid; grid-template-columns: auto 21px; gap: 8px 21px; align-items: center; }
.h-keys span:nth-child(even) { justify-self: end; width: 17px; height: 17px; border-radius: 5px; background: var(--h-line); color: var(--h-muted); font-size: 10px; display: grid; place-items: center; }

.h-pots { padding: 8px 13px; display: grid; grid-template-columns: auto auto; gap: 8px 34px; font-size: 13px; }
.h-pots span:nth-child(even) { justify-self: end; font-variant-numeric: tabular-nums; }

.h-target { display: flex; align-items: center; gap: 13px; padding: 8px 13px 8px 8px; width: 304px; height: 66px; border-radius: 21px; }
.h-target .face { width: 47px; height: 47px; border-radius: 50%; background: #b5694c; position: relative; overflow: hidden; image-rendering: pixelated; }
.h-target .face::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(#6b3a2a 0 30%, transparent 30%),
  radial-gradient(circle at 30% 55%, #fff 0 7%, transparent 8%), radial-gradient(circle at 70% 55%, #fff 0 7%, transparent 8%),
  linear-gradient(transparent 72%, #7a3a2a 72% 80%, transparent 80%); }
.h-target .who { flex: 1; }
.h-target .who b { font-size: 15px; font-weight: 500; }
.h-target .armor { display: flex; gap: 6px; margin-top: 5px; }
.h-target .armor img { width: 14px; height: 14px; image-rendering: pixelated; }
.ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.ring svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .track { stroke: var(--h-line); }
.ring .bar { stroke: var(--h-accent); stroke-linecap: round; stroke-dasharray: 125.6; stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s var(--ease-out); }

.h-stats { display: flex; gap: 13px; height: 21px; padding: 0 10px; border-radius: 999px; font-size: 11px; align-items: center; }
.h-bar { display: flex; gap: 5px; padding: 5px; border-radius: 13px; }
.h-bar span { width: 36px; height: 36px; border-radius: 8px; background: var(--h-line); display: grid; place-items: center; position: relative; }
.h-bar span.on { box-shadow: inset 0 0 0 2px var(--h-accent); }
.h-bar img { width: 24px; height: 24px; image-rendering: pixelated; }
.h-bar i { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 11px; font-weight: 600; text-shadow: 0 1px 0 #000; color: #fff; }
.h-armor { display: flex; gap: 8px; padding: 8px 10px; border-radius: 13px; }
.h-armor span { display: grid; justify-items: center; gap: 3px; }
.h-armor img { width: 22px; height: 22px; image-rendering: pixelated; }
.h-armor u { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--h-accent); text-decoration: none; }
.crosshair { position: absolute; left: 792px; top: 492px; width: 16px; height: 16px; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.85); }
.crosshair::before { left: 7px; top: 0; width: 2px; height: 16px; }
.crosshair::after { top: 7px; left: 0; width: 16px; height: 2px; }