/* CS2 in-game HUD — clean, hand-authored replica of the Panorama widgets, in
 * literal design px at the 1080-height reference (the corner wrappers in frame.css
 * scale them by --s). Values transcribed from the decompiled Panorama styles
 * (tools/_hud_panorama/panorama/styles/hud/*): health/ammo 42px, armor 18px,
 * reserve 32px, money 38px, HA band 800x72, health bar 65x8, centre logo 64,
 * weapon icon uniform height, weapon name/slot 16px, radar 250 round. Colours per
 * source: health/armour/ammo/money are WHITE; team colour appears only on the
 * centre team logo, the radar, and the weapon wash. currentColor tints the SVGs. */

/* ============================ MONEY (bottom-left) ======================== */
.c2-money {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  padding: 0 0 8px 32px;           /* inset from the screen's bottom-left corner */
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(0,0,0,0.87), 1px 1px 0 rgba(0,0,0,0.53);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.c2-money.c2-money--gain { color: #8fff6f; }   /* AddMoneyColor, brief on income */
.c2-money.c2-money--loss { color: #fd3535; }   /* RemoveMoneyColor, brief on spend */

/* ==================== HEALTH / ARMOUR / AMMO (bottom-centre) ============= */
.c2-ha {
  position: relative;
  width: 800px;       /* HA-width */
  height: 72px;       /* .hud-HA height */
  margin-bottom: 6px;
}
/* Numbers baseline sit low in the band; big readouts are 42px. */
.c2-ha-num {
  font-size: 42px;
  font-weight: 700;
  line-height: 0.9;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px rgba(0,0,0,0.55);
}

/* left cluster: armour then health, hugging the left of the centre circle */
.c2-ha-left {
  position: absolute; right: 50%; bottom: 6px;
  margin-right: 56px;
  display: flex; align-items: flex-end; gap: 16px;
}
.c2-ha-armor { display: flex; align-items: center; gap: 6px; padding-bottom: 5px; }
.c2-ha-armor.c2-off { visibility: hidden; }
.c2-ha-armor-ic { display: flex; color: #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); }
.c2-ha-armor-ic svg { height: 27px; width: auto; display: block; }
.c2-ha-armor-num { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.6); }

.c2-ha-health { display: flex; flex-direction: column; align-items: flex-end; }
.c2-ha-bar {
  width: 65px; height: 8px; margin-top: 3px;
  border: 1px solid #000;
  /* red "lost health" track: solid at the left, fading right (Panorama gradient) */
  background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,0,0,0.1) 100%);
  overflow: hidden;
}
.c2-ha-bar-fill { height: 100%; width: 100%; background: #fff; }   /* white fill = current HP% */

/* centre team-logo circle, dead-centre of the band */
.c2-ha-center {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.60);
  display: flex; align-items: center; justify-content: center;
}
.c2-ha-center::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.14);
}
.c2-ha-logo { display: flex; color: var(--cs2-team-color, #f2f4f6); }
.c2-ha-logo svg { width: 38px; height: 38px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* right cluster: ammo (clip + reserve), hugging the right of the circle */
.c2-ha-right {
  position: absolute; left: 50%; bottom: 6px;
  margin-left: 56px;
  display: flex; align-items: flex-end; gap: 10px;
}
.c2-ha-right.c2-off { visibility: hidden; }
/* reserve number + mag icon, vertically centred on each other (flex-end drops the
 * icon into the digit's descender space and reads as misaligned) */
.c2-ha-reserve { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; }
.c2-ha-reserve-num { font-size: 32px; font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px rgba(0,0,0,0.6); }
.c2-ha-reserve-ic { display: flex; align-items: center; color: #fff; }
.c2-ha-reserve-ic svg { height: 20px; width: auto; display: block; }

/* critical / low health: numbers + bar go red (Panorama .hud-HA--critical) */
.c2-ha.c2-crit .c2-ha-health .c2-ha-num { color: #ff4040; }
.c2-ha.c2-crit .c2-ha-bar-fill { background: #ff2b2b; }
.c2-ha.c2-low .c2-ha-health .c2-ha-num { color: #ffd0d0; }
.c2-ha.c2-dead { opacity: 0; }

/* ==================== WEAPON SELECTION (bottom-right) ==================== */
/* Lifted off the absolute bottom so the stack's lowest row sits on the bottom-HUD
 * line (level with the money), not jammed against the screen edge — like CS2. */
.c2-wsel { display: flex; flex-direction: column; align-items: flex-end; padding: 0 30px 30px 0; }
.c2-wsel-list { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }

/* Each slot row: the weapon icon(s) on the left and the slot number in the fixed
 * right column, aligned to the icon LINE; the active weapon's NAME sits directly
 * under its icon (CS2 shows it there, not at the bottom of the stack). The number
 * column stays put (min-height matches the icon row) so numbers form a straight
 * column and the name grows downward without shifting anything. */
.c2-wrow { display: flex; align-items: flex-start; justify-content: flex-end; gap: 22px; }
.c2-wcol { display: flex; flex-direction: column; align-items: flex-end; }
.c2-wicons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 40px; }
.c2-wname {
  font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap;
  letter-spacing: 0.3px; text-shadow: 0 0 3px rgba(0,0,0,0.7); margin-top: 1px;
}
.c2-wnum {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 40px; min-width: 15px;
  font-size: 17px; font-weight: 700; color: #fff; opacity: 0.85;
  text-align: right; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px rgba(0,0,0,0.6);
}
.c2-wrow.c2-active .c2-wnum { opacity: 1; }

/* Icons: uniform height, FLIPPED to face left like CS2 (our sprite faces right);
 * washed with the HSV-transformed team colour (T #d2ae53 / CT #8bb6e1) at 0.8
 * opacity, the active weapon bright white. Grenades (slot 4) form a horizontal
 * cluster, a touch smaller, and are NOT flipped. */
.c2-wicon { display: flex; align-items: center; }
.c2-wicon svg {
  height: 34px; width: auto; display: block;
  color: var(--cs2-team-wash, #b0c3d9); opacity: 0.8;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.c2-wrow:not(.c2-naderow) .c2-wicon svg { transform: scaleX(-1); }
.c2-wicon.c2-on svg { color: #fff; opacity: 1; filter: brightness(1.25) drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.c2-naderow .c2-wicons { gap: 15px; }
.c2-naderow .c2-wicon svg { height: 30px; }
/* Slot 4 with no grenades: invisible but still occupies its row height, so slots
 * 1/2/3 hold their fixed positions whether or not the player is carrying nades. */
.c2-wrow.c2-empty { visibility: hidden; }

/* ============================ RADAR (top-left) ========================== */
.c2-radar { margin: 18px 0 0 18px; width: 250px; height: 250px; }
.c2-radar canvas {
  width: 250px; height: 250px; display: block;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: #0e1418;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}