/* CS2 HUD mount + anchoring (hand-written, not generated).
 *
 * The HUD is authored in literal CS2 Panorama pixels at a 1080-height reference
 * and scaled by HEIGHT (`--s` = boxHeight/1080), exactly like the game: elements
 * keep their design px and every cluster is pinned to a real edge/corner of the
 * render box, so on any aspect ratio or device the corners stay put and only the
 * scale changes. `#cs2-hud` is sized/positioned by JS to the #stage box (the game
 * view, which compacts when the review panel docks) — never the raw window — so
 * the POV HUD always lines up with what's actually rendered. Falls back to the
 * viewport when there's no #stage (standalone preview harness). */
#cs2-hud {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;   /* JS overrides to the #stage box */
  z-index: 38;
  pointer-events: none;
  font-family: 'Stratum2', 'Rajdhani', 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  color: #fff;
  --s: 1;         /* boxHeight / 1080, set by JS every stage resize */
  overflow: hidden;
}
#cs2-hud.hidden { display: none; }

/* Corner clusters: pinned to a render-box edge, scaled about that anchor so the
 * design px stay literal. Height-based scale matches CS2's UI scaling. */
#cs2-hud .c2-corner { position: absolute; pointer-events: none; }
#cs2-hud .c2-tl { top: 0;  left: 0;  transform: scale(var(--s)); transform-origin: top left; }
#cs2-hud .c2-bl { left: 0;  bottom: 0; transform: scale(var(--s)); transform-origin: bottom left; }
#cs2-hud .c2-br { right: 0; bottom: 0; transform: scale(var(--s)); transform-origin: bottom right; }
/* Bottom-centre spans the width and flex-centres its (design-width) band, then
 * scales it about its bottom-centre so it stays centred on the render box. */
#cs2-hud .c2-bc {
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: flex-end;
}
#cs2-hud .c2-bc > * { transform: scale(var(--s)); transform-origin: bottom center; }

/* Top-centre (team counter / score-timer — out of scope here, kept scaling) and
 * screen-centre (round-win alerts, buy menu) wrappers, same flex-centre + scale. */
#cs2-hud .c2-tc { left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: flex-start; }
#cs2-hud .c2-tc > * { transform: scale(var(--s)); transform-origin: top center; }
#cs2-hud .c2-mid { inset: 0; display: flex; justify-content: center; align-items: center; }
#cs2-hud .c2-mid > * { transform: scale(var(--s)); transform-origin: center center; }

/* Interactive widgets (buy menu) re-enable pointer events on themselves. */
#cs2-hud .c2-interactive { pointer-events: auto; }