/* =============================================================================
 * Counter-Strike 1.6 (WebGL2) — HUD, buy menu, scoreboard
 * ========================================================================== */

.hud {
  position: absolute;
  inset: 0;
  font-family: var(--font);
  pointer-events: none;
}

/* ------------------------------- crosshair ------------------------------ */

.crosshair {
  --ch-color: #39ff6a;
  --ch-spread: 6px;
  --ch-len: 7px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transition: opacity 0.12s;
}

.ch-line {
  position: absolute;
  background: var(--ch-color);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  border-radius: 1px;
}

.ch-t { width: 2px; height: var(--ch-len); left: -1px; top: calc(-1 * (var(--ch-spread) + var(--ch-len))); }
.ch-b { width: 2px; height: var(--ch-len); left: -1px; top: var(--ch-spread); }
.ch-l { height: 2px; width: var(--ch-len); top: -1px; left: calc(-1 * (var(--ch-spread) + var(--ch-len))); }
.ch-r { height: 2px; width: var(--ch-len); top: -1px; left: var(--ch-spread); }

.ch-dot {
  position: absolute;
  width: 3px; height: 3px;
  left: -1.5px; top: -1.5px;
  background: var(--ch-color);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  display: none;
}

.crosshair.firing .ch-line { background: #fff; }

/* ------------------------------- hit marker ----------------------------- */

.hitmarker {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
}

.hitmarker.show { animation: hm 0.34s ease-out; }

@keyframes hm {
  0% { opacity: 1; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.05); }
}

.hitmarker > div {
  position: absolute;
  width: 10px; height: 10px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.hm-tl { left: 0; top: 0; border-left-width: 2.5px; border-top-width: 2.5px; }
.hm-tr { right: 0; top: 0; border-right-width: 2.5px; border-top-width: 2.5px; }
.hm-bl { left: 0; bottom: 0; border-left-width: 2.5px; border-bottom-width: 2.5px; }
.hm-br { right: 0; bottom: 0; border-right-width: 2.5px; border-bottom-width: 2.5px; }

.hitmarker.headshot > div { border-color: #ff5b4a; }
.hitmarker.kill > div { border-color: #ffcf4a; }

/* --------------------------- damage indicators -------------------------- */

.damage-indicators {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
}

.damage-arrow {
  position: absolute;
  left: -60px; top: -60px;
  width: 120px; height: 120px;
  opacity: 0;
  transition: opacity 0.2s;
}

.damage-arrow::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 0; height: 0;
  margin-left: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 20px solid rgba(255, 60, 45, 0.85);
  filter: drop-shadow(0 0 6px rgba(255, 40, 30, 0.7));
}

.damage-arrow.show { opacity: 1; }

/* --------------------------------- blocks ------------------------------- */

.hud-block { position: absolute; }

.hud-bottom-left {
  left: 26px; bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 9px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.stat-icon {
  width: 22px; height: 22px;
  opacity: 0.9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.icon-health {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8f1f6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.icon-armor {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa3b0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 5-3 7-7 9-4-2-7-4-7-9V6z'/%3E%3C/svg%3E");
}

.icon-armor.has-armor {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235aa8ff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 5-3 7-7 9-4-2-7-4-7-9V6z'/%3E%3C/svg%3E");
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #eaf3f8;
  min-width: 62px;
}

.stat-value.critical { color: #ff5b4a; animation: pulse 1s infinite; }
.stat-value.dead { color: #6b747b; }

@keyframes pulse { 50% { opacity: 0.45; } }

.helmet-mark {
  font-size: 11px;
  color: var(--ct);
  margin-left: -4px;
}

.hud-bottom-right {
  right: 26px; bottom: 22px;
  text-align: right;
}

.weapon-name {
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a9b8c2;
  margin-bottom: 2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.ammo-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.ammo-mag {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f2f8fb;
}

.ammo-mag.low { color: #ff8a3d; }
.ammo-sep { font-size: 20px; color: #66727a; }
.ammo-reserve {
  font-size: 20px;
  color: #9fadb6;
  font-variant-numeric: tabular-nums;
}

.grenade-row {
  margin-top: 7px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.gren {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(20, 26, 31, 0.82);
  border: 1px solid rgba(150, 170, 180, 0.28);
  color: #cfdae1;
}

.gren.hegrenade { border-color: rgba(255, 150, 60, 0.5); color: #ffc48a; }
.gren.flashbang { border-color: rgba(255, 240, 140, 0.55); color: #fff3a8; }
.gren.smokegrenade { border-color: rgba(150, 200, 255, 0.45); color: #bcdcff; }
.gren.decoy { border-color: rgba(200, 150, 255, 0.45); color: #dcc4ff; }
.gren.bomb { border-color: rgba(255, 70, 60, 0.75); color: #ff8a80; animation: pulse 1.1s infinite; }
.gren.kit { border-color: rgba(120, 255, 160, 0.5); color: #a8ffc4; }

.hud-bottom-center {
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  text-align: center;
  min-width: 260px;
}

.money-text {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--money);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.progress-wrap { margin-top: 8px; }
.progress-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd08a;
  margin-bottom: 4px;
}
.progress-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb03a, #ffe08a);
  box-shadow: 0 0 12px rgba(255, 190, 80, 0.6);
  transition: width 0.08s linear;
}

/* ------------------------------ top centre ------------------------------ */

.hud-top-center {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  text-align: center;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 14, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  padding: 6px 14px;
  backdrop-filter: blur(3px);
}

.score {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
}
.score.ct { color: var(--ct); }
.score.t { color: var(--t); }

.round-timer {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #eef6fa;
  min-width: 74px;
}

.round-timer.urgent { color: #ff5b4a; animation: pulse 0.7s infinite; }
.round-timer.bomb { color: #ff8a3d; }

.bomb-status {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b8c6ce;
  min-height: 15px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.bomb-status.armed { color: #ff5b4a; font-weight: 700; animation: pulse 0.9s infinite; }

.alive-row {
  margin-top: 5px;
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 1px;
}
.alive.ct { color: var(--ct); }
.alive.t { color: var(--t); }

/* ------------------------------- kill feed ------------------------------ */

.killfeed {
  position: absolute;
  right: 20px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  max-width: 460px;
}

.kf-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  background: rgba(8, 11, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  padding: 3px 9px;
  animation: kfin 0.22s ease-out;
  white-space: nowrap;
}

@keyframes kfin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.kf-killer, .kf-victim { font-weight: 600; }
.kf-killer.ct, .kf-victim.ct { color: var(--ct); }
.kf-killer.t, .kf-victim.t { color: var(--t); }
.kf-killer:not(.ct):not(.t) { color: #9aa7af; }
.kf-weapon { color: #93a1aa; font-size: 11.5px; }
.kf-weapon .hs { color: #ffcf4a; margin-left: 3px; }

/* ----------------------------- notifications ---------------------------- */

.notifications {
  position: absolute;
  left: 50%;
  top: 108px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  max-width: 620px;
}

.notify {
  font-size: 13.5px;
  padding: 7px 16px;
  border-radius: 7px;
  background: rgba(10, 14, 18, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #dbe6ec;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s;
  text-align: center;
}

.notify.show { opacity: 1; transform: none; }
.notify.kill { border-color: rgba(255, 207, 74, 0.5); color: #ffe9a8; }
.notify.bomb { border-color: rgba(255, 74, 61, 0.6); color: #ffb0a8; font-weight: 600; }
.notify.warn { border-color: rgba(255, 160, 60, 0.5); color: #ffd0a0; }
.notify.buy { border-color: rgba(120, 255, 160, 0.45); color: #b6ffcf; }
.notify.radio { border-color: rgba(150, 200, 255, 0.4); color: #cfe4ff; font-style: italic; }
.notify.round { border-color: rgba(255, 255, 255, 0.28); color: #fff; font-weight: 600; letter-spacing: 0.04em; }

/* --------------------------------- radar -------------------------------- */

.radar-wrap {
  position: absolute;
  left: 22px;
  top: 16px;
  width: 200px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(8, 11, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

.radar { display: block; width: 200px; height: 200px; }

.radar-label {
  position: absolute;
  left: 8px; bottom: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(220, 235, 245, 0.7);
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

/* ------------------------------ round banner ---------------------------- */

.round-banner {
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.9);
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}

.round-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.round-banner.ct { color: var(--ct); }
.round-banner.t { color: var(--t); }
.round-banner.draw { color: #cfd8de; }

/* -------------------------------- overlays ------------------------------ */

.flash-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.scope-overlay {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(0, 0, 0, 0.98) 27.6% 100%);
}

.death-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(60, 6, 3, 0.22);
  z-index: 3;
}

.death-overlay.show { display: flex; }

.death-text {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  color: #ff8f80;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

.death-hint {
  font-size: 13px;
  color: #d9b8b3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ------------------------------- scoreboard ----------------------------- */

.scoreboard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  max-height: 76vh;
  overflow: auto;
  background: rgba(9, 12, 15, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 14px 16px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
}

.sb-head, .sb-row {
  display: grid;
  grid-template-columns: 1fr 42px 42px 42px 60px 54px;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
}

.sb-head {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.sb-num { text-align: right; font-variant-numeric: tabular-nums; color: #c3cfd6; }

.sb-team {
  display: flex;
  justify-content: space-between;
  margin: 9px 0 3px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 5px;
}

.sb-team.ct { background: rgba(90, 168, 255, 0.16); color: var(--ct); }
.sb-team.t { background: rgba(255, 160, 60, 0.16); color: var(--t); }
.sb-teamscore { font-variant-numeric: tabular-nums; }

.sb-row:nth-child(even) { background: rgba(255, 255, 255, 0.028); }
.sb-row.you { background: rgba(57, 255, 106, 0.12); box-shadow: inset 0 0 0 1px rgba(57, 255, 106, 0.3); }
.sb-row.dead .sb-name { color: #6f7b83; }
.sb-name { color: #e5eef3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bombmark { color: #ff5b4a; font-size: 10.5px; }
.botmark { color: #7d8a93; font-size: 9.5px; font-style: normal; letter-spacing: 0.06em; }

/* -------------------------------- buy menu ------------------------------ */

.buy-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  max-height: 82vh;
  background: rgba(9, 12, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 16px 18px;
  display: none;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}

.buy-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dbe6ec;
}

.buy-money {
  font-size: 20px;
  font-weight: 700;
  color: var(--money);
  margin: 2px 0 12px;
  font-variant-numeric: tabular-nums;
}

.buy-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.buy-cat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 28, 34, 0.9);
  color: #c8d4db;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}

.buy-cat:hover { background: #212b33; }
.buy-cat.active { border-color: rgba(57, 255, 106, 0.55); background: rgba(57, 255, 106, 0.12); color: #cfffd9; }

.buy-key {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #93a1aa;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  padding: 0 4px;
  min-width: 15px;
  text-align: center;
}

.buy-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 7px;
  overflow: auto;
  padding-right: 4px;
}

.buy-item {
  display: grid;
  grid-template-columns: 20px 92px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(21, 27, 33, 0.9);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.buy-item:hover { background: #212b33; border-color: rgba(255, 255, 255, 0.24); }
.buy-item:active { transform: translateY(1px); }
.buy-item.unavailable { opacity: 0.34; cursor: not-allowed; }
.buy-item.expensive { opacity: 0.55; }
.buy-item.expensive .buy-price { color: #ff7a6a; }
.buy-item.owned { border-color: rgba(120, 255, 160, 0.4); }
.buy-item.owned .buy-price::after { content: " ✓"; color: var(--accent); }

.buy-ic { width: 92px; height: 38px; display: flex; align-items: center; justify-content: center; }
.buy-ic img { max-width: 100%; max-height: 100%; image-rendering: auto; }

.buy-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.buy-info b { font-size: 13px; color: #e9f1f6; font-weight: 600; }
.buy-info i {
  font-style: normal;
  font-size: 10.5px;
  color: #85939c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-price {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--money);
  white-space: nowrap;
}

.buy-hint {
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--dim);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 9px;
}

/* ------------------------------ radio menu ------------------------------ */

.radio-menu {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  display: none;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 5px;
  background: rgba(9, 12, 15, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 11px 13px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7);
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  padding: 5px 9px;
  border-radius: 6px;
  color: #cfdae1;
  cursor: pointer;
}

.radio-item:hover { background: rgba(57, 255, 106, 0.12); }
.radio-key {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #93a1aa;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  padding: 0 4px;
  min-width: 15px;
  text-align: center;
}

/* --------------------------- pointer-lock prompt ------------------------ */

.lock-prompt {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border-radius: 9px;
  background: rgba(9, 12, 15, 0.86);
  border: 1px solid rgba(57, 255, 106, 0.32);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  text-align: center;
  animation: lockpulse 2.2s ease-in-out infinite;
}

.lock-prompt b {
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b8ffcd;
}

.lock-prompt span {
  font-size: 11.5px;
  color: var(--dim);
  max-width: 420px;
  line-height: 1.5;
}

@keyframes lockpulse {
  50% { border-color: rgba(57, 255, 106, 0.7); }
}

/* -------------------------------- responsive ---------------------------- */

@media (max-width: 820px) {
  .radar-wrap { width: 130px; }
  .radar { width: 130px; height: 130px; }
  .hud-bottom-left { left: 14px; bottom: 14px; }
  .hud-bottom-right { right: 14px; bottom: 14px; }
  .stat-value { font-size: 24px; min-width: 46px; }
  .ammo-mag { font-size: 28px; }
  .killfeed { max-width: 300px; }
  .buy-items { grid-template-columns: 1fr; }
  .radio-menu { grid-template-columns: 1fr; }
}