/* Боевой HUD в духе классических шутеров: янтарные цифры по низу экрана, круглый зелёный радар, тонкий зелёный прицел.
   Подключается последним и перекрывает прежнюю раскладку; на сенсорных экранах прежние кнопки остаются. */

:root {
  --cs-amber: #ffb22c;
  --cs-amber-dim: #ffb22cb3;
  --cs-low: #ff4a2e;
  --cs-green: #5dff5d;
  --cs-font: 'Arial Black', 'Arial Bold', Impact, system-ui, sans-serif;
}

/* ---------- Нижняя строка ---------- */

#cs-hud {
  position: fixed;
  inset: auto 0 calc(34px + var(--safe-b)) 0;
  height: 56px;
  pointer-events: none;
  z-index: 14;
  color: var(--cs-amber);
  font: 900 44px/1 var(--cs-font);
  letter-spacing: 0.02em;
  text-shadow: 0 0 3px #000, 0 2px 4px #0009;
}

.cs-cell {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.cs-cell[hidden] {
  display: none;
}

.cs-cell svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  filter: drop-shadow(0 0 2px #000);
  opacity: 0.9;
}

.cs-health { left: calc(24px + var(--safe-l)); }
.cs-hunger { left: calc(210px + var(--safe-l)); }
.cs-timer { left: 50%; transform: translateX(-50%); }
.cs-ammo { right: calc(24px + var(--safe-r)); }
.cs-ammo i { font-style: normal; color: var(--cs-amber-dim); font-weight: 400; margin: 0 2px; }
.cs-ammo .cs-reserve { color: var(--cs-amber-dim); }
.cs-ammo.reloading b:first-child { animation: cs-blink 0.5s steps(2) infinite; }

.cs-money {
  right: calc(24px + var(--safe-r));
  bottom: 62px;
  font-size: 36px;
}

#cs-hud.low .cs-health { color: var(--cs-low); animation: cs-blink 0.8s steps(2) infinite; }
.cs-money.gain { color: #8cff6a; }

@keyframes cs-blink {
  50% { opacity: 0.35; }
}

/* ---------- Список оружия справа при переключении ---------- */

#cs-weapons {
  position: fixed;
  right: calc(18px + var(--safe-r));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 6px;
  z-index: 14;
  pointer-events: none;
  font: 700 15px/1.2 Arial, sans-serif;
  color: var(--cs-amber);
  text-transform: uppercase;
}

#cs-weapons[hidden] {
  display: none;
}

#cs-weapons div {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  padding: 9px 12px;
  border: 1px solid #ffb22c40;
  background: #1a120466;
  opacity: 0.7;
}

#cs-weapons div.sel {
  opacity: 1;
  border-color: var(--cs-amber);
  background: #ffb22c2e;
}

#cs-weapons b {
  font: 900 18px var(--cs-font);
}

#cs-weapons small {
  font-size: 13px;
  color: var(--cs-amber-dim);
}

/* ---------- Прицел ---------- */

#crosshair {
  filter: none;
}

#crosshair i {
  background: var(--cs-green);
  box-shadow: 0 0 1px #000;
}

#crosshair b {
  display: none;
}

#crosshair.hit i {
  background: #fff35a;
}

#damage-readout {
  color: var(--cs-amber);
  font: 700 14px Arial, sans-serif;
  text-shadow: 0 0 3px #000;
  background: none;
  border: 0;
}

/* ---------- Раскладка для мыши: радар слева сверху, панели — под ним и справа ---------- */

@media (pointer: fine) {
  #vitals,
  #ammo-hud,
  #reload-btn,
  #crouch-btn,
  #weapon-select,
  #city-brand {
    display: none !important;
  }

  /* Мини-карта в 2,5 раза больше прежних 196 px, но не выше половины экрана */
  :root { --radar-size: min(490px, 50vh); }
  #radar {
    top: calc(14px + var(--safe-t));
    left: calc(14px + var(--safe-l));
    bottom: auto;
    width: var(--radar-size);
    height: var(--radar-size);
    padding: 0;
    border: 2px solid #5dff5d55;
    border-radius: 50%;
    background: #183d18;
    box-shadow: 0 0 0 1px #000a, 0 4px 14px #0008;
  }

  #radar header,
  #radar footer {
    display: none;
  }

  #radar #minimap {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Зелёный тон карты рисует сам холст (ui.js drawMinimap), чтобы метки солдат и дронов остались красными */
    --mini-filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.4) brightness(0.92);
  }

  #radar.expanded {
    top: auto;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: min(1000px, calc(100vw - 40px));
    height: auto;
    border-radius: 6px;
    background: #121713;
  }

  #radar.expanded header,
  #radar.expanded footer {
    display: flex;
  }

  #radar.expanded #minimap {
    height: min(66vh, 650px);
    --mini-filter: none;
  }

  #ping { top: calc(var(--radar-size) + 20px + var(--safe-t)); left: calc(20px + var(--safe-l)); }
  #voice-panel { top: calc(var(--radar-size) + 52px + var(--safe-t)); left: calc(20px + var(--safe-l)); }
  #voice-self { top: calc(var(--radar-size) + 96px + var(--safe-t)); left: calc(20px + var(--safe-l)); }
  #audio-panel { top: calc(var(--radar-size) + 130px + var(--safe-t)); left: calc(20px + var(--safe-l)); }

  #menu-btn { left: auto; right: calc(16px + var(--safe-r)); top: calc(16px + var(--safe-t)); }
  /* Список игроков — по зажатому Tab, по центру, как таблица счёта */
  #players { display: none; }
  body.scoreboard #players { display: block; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 40px)); max-height: 70vh; z-index: 30; }

  #chat { bottom: calc(120px + var(--safe-b)); left: calc(24px + var(--safe-l)); }
  .chat-row { background: #0008; color: #ffe2a8; }

  #hint { bottom: calc(150px + var(--safe-b)); }
  #speedo { bottom: calc(150px + var(--safe-b)); }
}

/* ---------- Сенсорные экраны: строка компактнее, остальное как было ---------- */

@media (pointer: coarse) {
  #cs-hud { height: 36px; bottom: calc(8px + var(--safe-b)); font-size: 26px; }
  .cs-cell svg { width: 20px; height: 20px; }
  .cs-hunger, .cs-money, .cs-ammo { display: none; }
  .cs-health { left: calc(12px + var(--safe-l)); }
  #cs-weapons { display: none; }
}

/* ---------- Улучшения оружия и сила броска ---------- */

.cs-upgrades {
  right: calc(24px + var(--safe-r));
  bottom: 108px;
  gap: 6px;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}

.cs-upgrades span {
  padding: 5px 8px;
  border: 1px solid currentColor;
  background: #0009;
}

.upg-ricochet { color: #4fc3f7; }
.upg-explosive { color: #ff7043; }
.upg-rapid { color: #ffe14d; }

#grenade-power {
  position: fixed;
  left: var(--aim-x, 50%);
  top: calc(var(--aim-y, 50%) + 26px);
  transform: translateX(-50%);
  width: 96px;
  height: 7px;
  border: 1px solid #ffb22c99;
  background: #0008;
  pointer-events: none;
  z-index: 14;
}

#grenade-power[hidden] {
  display: none;
}

#grenade-power i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cs-amber);
}

@media (pointer: coarse) {
  .cs-upgrades { bottom: 52px; right: calc(12px + var(--safe-r)); display: flex; }
}

/* Лазерный прицел (обвес зомби-режима): красная точка в центре */
#crosshair.laser b {
  display: block;
  left: 11px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px #ff3b30;
}
/* Перекрестия нет (aim.js, как в Escape from Tarkov): центр экрана ничем не отмечен; линии вспыхивают только
   отметкой попадания, точка — только у лазерного прицела и только от бедра */
#crosshair{left:50%!important;top:50%!important}#crosshair i{opacity:0;transition:opacity .08s}#crosshair.hit i{opacity:1}#crosshair b{display:none}#crosshair.laser:not(.ads) b{display:block}