/* In-game HUD layout. Visual identity lives in the ui-*.css files imported below (frames, gauges, action bar, objective, buttons, overlays). */
@import url("ui-ornaments.css");
@import url("ui-gauges.css");
@import url("ui-frames.css");
@import url("ui-actionbar.css");
@import url("ui-objective.css");
@import url("ui-hudbtns.css");
@import url("ui-overlays.css");
@import url("worldmap.css");
#hud { position: absolute; inset: 0; pointer-events: none; --pad: clamp(8px, 1.1vw, 16px); }
.frames { position: absolute; left: var(--pad); top: var(--pad); width: clamp(236px, 22vw, 310px); display: flex; flex-direction: column; gap: 10px; }
.teamframes { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.topright { position: absolute; right: var(--pad); top: var(--pad); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bottom { position: absolute; left: 50%; bottom: var(--pad); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--pad)); }
.bottomright { position: absolute; right: var(--pad); bottom: var(--pad); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.overlays { position: absolute; inset: 0; }
@media (max-width: 1400px) { .bottomright { bottom: calc(var(--pad) + clamp(112px, 11vw, 150px)); } }