/* =====================================================================
   OWNER GAME — UI v40.2
   Все визуальные элементы — SVG-компоненты от дизайнера + локальные шрифты.
   Ничего не дорисовано, никаких inline-SVG: только background-image / mask
   на файлы из ./icons/.
   ===================================================================== */

/* ---------- Локальные шрифты ---------- */
@font-face {
  font-family: 'Bona Nova';
  src: url('./fonts/BonaNova-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: 'Cormorant Unicase';
  src: url('./fonts/CormorantUnicase-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: 'Cormorant Unicase';
  src: url('./fonts/CormorantUnicase-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-display: block;
}

:root {
  --c-white:      #ffffff;
  --c-fade:       rgba(255,255,255,0.55);
  --c-fade-soft:  rgba(255,255,255,0.30);
  --c-black:      #000000;
  --c-accent:     #A6FF00;
  --c-accent-dim: #4d7a00;
  --c-overlay-bg: rgba(0,0,0,0.62);

  --f-display: 'Bona Nova', 'Times New Roman', serif;
  --f-num:     'Cormorant Unicase', 'Times New Roman', serif;
  --f-ui:      'Inter', system-ui, sans-serif;
}

/* ---------- База ---------- */
/* Адаптивное масштабирование UI.
   На 14" Mac (logical width ~1280-1500) — компактный размер.
   На FHD (1920) — стандарт.
   На 2K (2560+) — крупнее. */
:root {
  --ui-scale: 1;
}
@media (max-width: 1500px) {
  :root { --ui-scale: 0.78; }
}
@media (min-width: 1501px) and (max-width: 2000px) {
  :root { --ui-scale: 0.92; }
}
@media (min-width: 2400px) {
  :root { --ui-scale: 1.18; }
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #111;
  color: #eee;
  font-family: var(--f-ui);
  /* Yandex.Games req 1.10.2: no browser swipe-to-refresh, no browser scroll */
  overscroll-behavior: none;
  /* Yandex.Games req 1.6.1.8 / 1.6.2.7: no text selection, no system context menu */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Prevent pinch-zoom / double-tap zoom on mobile */
  touch-action: none;
}
canvas { display: block; cursor: default; }

#crosshair {
  position: fixed; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--c-white); border-radius: 50%;
  box-shadow: 0 0 0 1px #0009, 0 0 4px #00000073;
  z-index: 9;
  pointer-events: none; user-select: none;
}
#versionLabel {
  position: fixed; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 8;
  color: var(--c-fade);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  pointer-events: none; user-select: none;
}

/* JS пишет в #levelTop "Уровень X · врагов A/B" — служебно, не показываем */
#levelTop {
  position: fixed;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}
#status { display: none; }

/* =====================================================================
   ВЕРХ-ЛЕВО — РОМБЫ "УРОВЕНЬ" / "ВРАГОВ"
   crown_diamond.svg = 97×140 (с короной над ромбом)
   standard_diamond.svg = 97×96 (без короны)
   line.svg = 113×10 (засечка под ромбом)
   ===================================================================== */
#topLeftPanel {
  position: fixed;
  left: 36px; top: 28px;
  z-index: 10;
  width: 130px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: none; user-select: none;
}

.diamondStat {
  position: relative;
  width: 113px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diamondShape {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diamondShape > .diamondImg {
  display: block;
  width: 100px;
  height: auto;
}
.diamondShape > span {
  position: absolute;
  left: 0; right: 0;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 28px;
  color: var(--c-white);
  text-align: center;
  line-height: 1;
}
/* В crown_diamond ромб занимает нижние 2/3 (вверху корона) */
#levelStat .diamondShape > span {
  top: 60%;
  transform: translateY(-50%);
}
#enemiesStat .diamondShape > span {
  top: 50%;
  transform: translateY(-50%);
}

.diamondCaption {
  margin-top: 6px;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--c-white);
}

.diamondBottom {
  display: block;
  width: 113px;
  height: auto;
  margin-top: 4px;
}

/* =====================================================================
   ВЕРХ-ЦЕНТР — ПОЛОСА HP (hp_bar.svg = 648×48)
   ===================================================================== */
#ui {
  position: fixed;
  left: 50%; top: 28px;
  transform: translateX(-50%);
  z-index: 10;
  user-select: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#barWrap {
  position: relative;
  width: 480px;            /* игра потом перезапишет через .style.width при апгрейдах */
  height: 36px;
  transition: width .25s ease;
}
/* Пустая «бледная» полоса — псевдоэлемент с маской, такого же размера как сама полоса.
   Подложка имеет ту же ширину что родитель, поэтому растёт вместе с #barWrap. */
#barWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url('./icons/hp_bar.svg') no-repeat left center / 100% 100%;
          mask: url('./icons/hp_bar.svg') no-repeat left center / 100% 100%;
  background: var(--c-fade-soft);
  pointer-events: none;
  z-index: 0;
}

/* Зелёная заливка. Игра пишет .style.width в процентах от родителя.
   Заполнение строго слева направо (left:0; transform-origin не нужен). */
#bar {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: var(--c-accent);
  /* mask-size фиксирована — это та же форма мазка, что подложка.
     При уменьшении width #bar просто обрезается по правому краю,
     обнажая подложку. */
  -webkit-mask: url('./icons/hp_bar.svg') no-repeat left center / var(--bar-full-w, 480px) 100%;
          mask: url('./icons/hp_bar.svg') no-repeat left center / var(--bar-full-w, 480px) 100%;
  z-index: 1;
  transition: background .35s ease;
}
/* HP < 30% → красная заливка HP-бара (v51.1) */
#barWrap.low #bar { background: #dc2626; }
/* HP < 10% → пульсирующая яркая красная (v51.1) */
#barWrap.critical #bar {
  background: #ff2a2a;
  animation: hpBarPulse 0.7s ease-in-out infinite;
}
@keyframes hpBarPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}

#hpText {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  text-align: center;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-white);
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  letter-spacing: 0.02em;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}

/* =====================================================================
   ВЕРХ-ПРАВО — ОРУЖИЕ
   gun_selected.svg = 240×170 (вся композиция «выбрано ружьё»)
   sword_selected.svg = 237×170 (вся композиция «выбран меч»)
   ===================================================================== */
#weaponPanel {
  position: fixed;
  right: 50px; top: 28px;
  width: 260px;
  z-index: 10;
  color: var(--c-white);
  text-align: center;
  pointer-events: none; user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#weaponSlots {
  position: relative;
  width: 240px;
  height: 170px;
  background: no-repeat center/contain;
  background-image: url('./icons/gun_selected.svg');
}
#weaponSlots[data-weapon="sword"] {
  background-image: url('./icons/sword_selected.svg');
}
/* Игровые элементы (innerHTML свои SVG-иконки) скрываем — отображаем композицию */
#weaponSlotActive, #weaponSlotInactive,
#weaponIcon, #weaponIconInactive {
  display: none;
}

/* Подсказка Q — отдельный ромб button.svg, сидит чуть НИЖЕ нижнего угла
   большого ромба, между композицией и подписью оружия. Шрифт/начертание
   взяты у подсказки дробовика (Inter 800, чтобы UI был единым). */
#weaponSwitchHint {
  position: absolute;
  left: 180px;
  top: 155px;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 44px; height: 44px;
  background: no-repeat center/contain;
  background-image: url('./icons/button.svg');
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 17px;
  color: var(--c-black);
  line-height: 1;
}

#weaponLabel {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.20em;
  color: var(--c-white);
  text-transform: uppercase;
  text-align: center;
  margin-top: 4px;
  padding-bottom: 12px;
  position: relative;
  min-height: 14px;
}
#weaponLabel::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 113px; height: 10px;
  background: no-repeat center/contain;
  background-image: url('./icons/line.svg');
}

#ammoPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  text-align: center;
}
#ammoPanel[style*="display: none"],
#ammoPanel[style*="display:none"] { display: none !important; }

.ammoLine {
  font-family: var(--f-num);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.1;
}
#ammoCurrent { font-size: 32px; }
#ammoCurrent #ammoText { display: inline-block; }

#ammoReserve {
  font-size: 20px;
  position: relative;
  padding-top: 14px;
  margin-top: 6px;
}
#ammoReserve::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 113px; height: 10px;
  background: no-repeat center/contain;
  background-image: url('./icons/line.svg');
}
#ammoReserve.empty { opacity: 0; }

/* Подсказки  — служебная (если игра показывает) */
.ammoSubLabel, #ammoSub { display: none !important; }

/* =====================================================================
   ЦЕНТР — КОНТЕКСТНАЯ ПОДСКАЗКА «[X] описание»
   button.svg = 60×60 ромбик
   ===================================================================== */
#contextHint {
  position: fixed;
  left: 50%; bottom: 18%;
  transform: translateX(-50%);
  z-index: 12;
  color: var(--c-white);
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  pointer-events: none; user-select: none;
  display: none;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
#contextHint[style*="display: block"],
#contextHint[style*="display:block"] {
  display: inline-flex !important;
}
#contextHint::before { display: none; }
#contextHint[data-key]::before {
  content: attr(data-key);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: no-repeat center/contain;
  background-image: url('./icons/button.svg');
  color: var(--c-black);
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
}

/* =====================================================================
   ВЫНОСЛИВОСТЬ
   stamina_bar.svg = 446×25
   Игра ставит staminaFill.style.background = "#e8e8e8" (норма) или "#ff4444" (исчерпана).
   Наша задача: только маскировать форму, не трогать цвет.
   ===================================================================== */
#staminaBox {
  position: fixed;
  left: 50%; bottom: 78px;
  transform: translateX(-50%);
  z-index: 12;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 446px;
  pointer-events: none; user-select: none;
}
#staminaBox[style*="display: block"],
#staminaBox[style*="display:block"] {
  display: flex !important;
}

#staminaText {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
}

#staminaWrap {
  width: 446px;
  height: 25px;
  -webkit-mask: url('./icons/stamina_bar.svg') no-repeat left center / 100% 100% !important;
          mask: url('./icons/stamina_bar.svg') no-repeat left center / 100% 100% !important;
  background: var(--c-fade-soft) !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: visible !important;
}
#staminaFill {
  height: 100%;
  width: 100%;
  -webkit-mask: url('./icons/stamina_bar.svg') no-repeat left center / 446px 25px;
          mask: url('./icons/stamina_bar.svg') no-repeat left center / 446px 25px;
  /* background не задаём — игра управляет цветом сама (e8e8e8 / ff4444) */
  transition: width .08s linear, background .3s ease;
}

/* =====================================================================
   СУБСТАНЦИЯ
   substance.svg = 82×103 (зелёный мазок с блёстками)
   ===================================================================== */
#healPopup {
  position: fixed;
  right: 110px;
  bottom: 130px;
  z-index: 11;
  color: var(--c-accent);
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 88px;
  text-align: center;
  opacity: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
  pointer-events: none; user-select: none;
  transition: opacity .16s linear, transform .5s ease-out;
}

.substanceIconWrap {
  display: inline-block;
  width: 38px;
  height: 48px;
  vertical-align: middle;
  background: no-repeat center/contain;
  background-image: url('./icons/substance.svg');
}
.substanceIconWrap.big {
  width: 66px;
  height: 83px;
}

#substancePanel {
  position: fixed;
  right: 40px; bottom: 32px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--c-accent);
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 40px;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  pointer-events: none; user-select: none;
  line-height: 1;
}
#substancePanel[style*="display: block"],
#substancePanel[style*="display:block"] {
  display: inline-flex !important;
}

#shotgunReadyText {
  position: fixed;
  left: 50%; bottom: 30%;
  transform: translateX(-50%);
  z-index: 12;
  display: none;
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  pointer-events: none; user-select: none;
}

/* v54.9 — coin counter, positioned just left of #substancePanel.
   Same fixed-bottom-right family as #substancePanel; icon is white per spec. */
.coinIconWrap {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  background: no-repeat center/contain;
  background-image: url('./icons/coin.svg');
  /* v54.9.22: force the icon white regardless of the SVG's own fill — some browsers
     cached the older black-fill version. brightness(0) flattens to black, invert(1)
     flips to white. drop-shadow combined. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
#coinPanel {
  position: fixed;
  right: 180px; bottom: 32px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--c-white, #fff);
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 40px;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  pointer-events: none; user-select: none;
  line-height: 1;
}

/* =====================================================================
   ЛЕВЫЙ НИЗ — ДРОБОВИК
   shotgun_diamond.svg = 96×97 (ромб-рамка)
   shotgun.svg = 86×55 (иконка пистолета внутри ромба)
   shotgun_shell.svg = 29×88 (патрон)
   ===================================================================== */
#shotgunPanel {
  position: fixed;
  left: 36px; bottom: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: none; user-select: none;
}

.shotgunSlot {
  position: relative;
  width: 96px;
  height: 97px;
  background: no-repeat center/contain;
  background-image: url('./icons/shotgun_diamond.svg');
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease, filter .18s ease;
}

#shotgunIcon {
  width: 72%;
  height: 50%;
  background: no-repeat center/contain;
  background-image: url('./icons/shotgun.svg');
}
/* Игра пишет innerHTML с SVG — скрываем содержимое, оставляем наш фон */
#shotgunIcon * { display: none; }

.shotgunSlot:has(#shotgunIcon.shotgunUnavailable),
.shotgunSlot.shotgunUnavailable {
  opacity: 0.42;
  filter: grayscale(1);
}

#shotgunHint {
  position: absolute;
  top: -4px; left: -4px;
  width: 28px; height: 28px;
  background: no-repeat center/contain;
  background-image: url('./icons/button.svg');
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 12px;
  color: var(--c-black);
  z-index: 2;
}
.shotgunSlot:has(#shotgunIcon.shotgunUnavailable) #shotgunHint,
.shotgunSlot.shotgunUnavailable #shotgunHint { opacity: 0.7; }

.shellGroup {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.shell {
  position: relative;
  width: 29px;
  height: 88px;
  background: no-repeat center/contain;
  background-image: url('./icons/shotgun_shell.svg');
  overflow: hidden;
}
/* Чёрная «израсходованная» часть прикреплена СВЕРХУ. height: 100% сразу после
   выстрела (весь патрон чёрный), и убывает к 0% по мере перезарядки —
   снизу появляется белый «готовый» патрон. То есть готовый патрон
   восстанавливается визуально СНИЗУ ВВЕРХ. */
.sgChargeFill {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: rgba(0,0,0,0.94);
  transition: height 0.12s linear;
}

#shotgunLabel { display: none !important; }

/* Масштабирование UI через media-queries: на маленьких экранах меньше отступы,
   на больших — больше. Применяется к фиксированным панелям. */
@media (max-width: 1500px) {
  #topLeftPanel  { left: 24px;  top: 18px; gap: 12px; transform: scale(0.78); transform-origin: top left; }
  #weaponPanel   { right: 24px; top: 18px; transform: scale(0.78); transform-origin: top right; }
  #shotgunPanel  { left: 24px;  bottom: 24px; transform: scale(0.78); transform-origin: bottom left; }
  #substancePanel{ right: 24px; bottom: 24px; transform: scale(0.78); transform-origin: bottom right; }
  #coinPanel     { right: 140px; bottom: 24px; transform: scale(0.78); transform-origin: bottom right; }
  #ui            { top: 18px; transform: translateX(-50%) scale(0.85); transform-origin: top center; }
  #staminaBox    { bottom: 56px; transform: translateX(-50%) scale(0.85); transform-origin: bottom center; }
}
@media (min-width: 2400px) {
  #topLeftPanel  { transform: scale(1.18); transform-origin: top left; }
  #weaponPanel   { transform: scale(1.18); transform-origin: top right; }
  #shotgunPanel  { transform: scale(1.18); transform-origin: bottom left; }
  #substancePanel{ transform: scale(1.18); transform-origin: bottom right; }
  #coinPanel     { transform: scale(1.18); transform-origin: bottom right; }
  #ui            { transform: translateX(-50%) scale(1.18); transform-origin: top center; }
  #staminaBox    { transform: translateX(-50%) scale(1.18); transform-origin: bottom center; }
}

/* =====================================================================
   OVERLAY ACTIVE — когда открыт pause/upgrade/death/level, HUD прячется
   ===================================================================== */
body.overlay-active #topLeftPanel,
body.overlay-active #ui,
body.overlay-active #weaponPanel,
body.overlay-active #shotgunPanel,
body.overlay-active #contextHint,
body.overlay-active #staminaBox,
body.overlay-active #healPopup,
body.overlay-active #shotgunReadyText,
body.overlay-active #substancePanel,
body.overlay-active #coinPanel,
body.overlay-active #crosshair,
body.overlay-active #versionLabel {
  display: none !important;
}
/* В меню улучшений показываем счётчик субстанции в шапке (#substanceText),
   но #substancePanel в нижнем правом углу всё равно скрыт. */

/* =====================================================================
   OVERLAYS
   ===================================================================== */
#pauseOverlay,
#levelOverlay,
#deathOverlay,
#upgradeOverlay,
#pauseHelp {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--c-overlay-bg);
  color: var(--c-white);
  pointer-events: none;
  user-select: none;
}
#pauseOverlay[style*="display: block"],
#pauseOverlay[style*="display:block"],
#pauseOverlay[style*="display: flex"],
#pauseOverlay[style*="display:flex"]   { display: flex !important; }
#levelOverlay[style*="display: block"],
#levelOverlay[style*="display:block"],
#levelOverlay[style*="display: flex"],
#levelOverlay[style*="display:flex"]   { display: flex !important; }
#deathOverlay[style*="display: block"],
#deathOverlay[style*="display:block"],
#deathOverlay[style*="display: flex"],
#deathOverlay[style*="display:flex"]   { display: flex !important; }
#upgradeOverlay[style*="display: block"],
#upgradeOverlay[style*="display:block"],
#upgradeOverlay[style*="display: flex"],
#upgradeOverlay[style*="display:flex"] { display: flex !important; pointer-events: auto; }
#pauseHelp[style*="display: block"],
#pauseHelp[style*="display:block"],
#pauseHelp[style*="display: flex"],
#pauseHelp[style*="display:flex"]      { display: flex !important; pointer-events: auto; }
#pauseOverlay { font-size: 0; line-height: 0; }

.overlayTitle {
  font-family: var(--f-display);
  font-weight: 700;
  /* v54.9: responsive scaling so overlay titles don't wrap on narrow screens.
     Clamp keeps minimum readable size at small viewports and original 88px on big screens. */
  font-size: clamp(28px, 8vmin, 88px);
  white-space: nowrap;
  letter-spacing: 0.04em;
  color: var(--c-white);
  margin: 0 0 32px;
  text-align: center;
  text-shadow: 0 4px 22px rgba(0,0,0,.9);
}

.overlayPrompt {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: var(--c-white);
  text-transform: uppercase;
}
.overlayPrompt .promptKey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: no-repeat center/contain;
  background-image: url('./icons/button.svg');
  color: var(--c-black);
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
}
/* Текст подсказки после .promptKey (нет дублирующего [X]) */
.overlayPrompt .promptText { font-weight: 700; }

/* ---- ПАУЗА ---- */
.pauseBox {
  width: min(820px, 90vw);
  max-height: 92vh;
  overflow: auto;
  padding: 32px 32px 28px;
  text-align: center;
  background: transparent;
  border: none;
  position: relative;
}
/* ---- Language switcher (RU/EN) in bottom-right of pauseBox ---- */
.langSwitcher {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.langBtn {
  appearance: none;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(220, 200, 160, 0.35);
  color: rgba(240, 230, 210, 0.75);
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.langBtn:hover {
  background: rgba(40, 40, 48, 0.7);
  color: rgba(255, 245, 220, 0.95);
  border-color: rgba(240, 215, 165, 0.55);
}
.langBtn.active {
  background: rgba(230, 200, 130, 0.85);
  color: #1c1812;
  border-color: rgba(230, 200, 130, 0.95);
}
.pauseBox .overlayTitle {
  /* v54.9: responsive scaling — was 92px hardcoded */
  font-size: clamp(30px, 8vmin, 92px);
  white-space: nowrap;
  margin-bottom: 40px;
}

.pauseList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 44px;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
}

.pauseItem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 5px 0 9px;
  position: relative;
}
.pauseItem::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 9px;
  background: no-repeat center/100% 100%;
  background-image: url('./icons/divider.svg');
}
.pauseItem .kbd {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--c-white);
  text-align: left;
  padding-left: 4px;
}
.pauseItem .dash { display: none; }
.pauseItem .caption {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.85);
  /* v52.4: left-aligned for easier scanning (was right-aligned) */
  text-align: left;
  padding-right: 4px;
}

/* v52.4: row of two prompts at the bottom of the pause box (P=continue, Z=menu) */
.overlayPromptRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* v52.4: RU/EN switcher pinned to the very bottom of the screen during pause,
   so it doesn't crowd the controls box. */
.pauseBottomLang {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  right: auto;
  top: auto;
  z-index: 21;
  pointer-events: auto;
}

/* ---- УРОВЕНЬ ЗАВЕРШЁН ---- */
.levelCompleteWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.levelCompleteTitle {
  font-family: var(--f-display);
  font-weight: 700;
  /* v54.9: was 96px hardcoded — bug reported that "УРОВЕНЬ ЗАВЕРШЁН" wrapped on small screens */
  font-size: clamp(30px, 8.5vmin, 96px);
  white-space: nowrap;
  letter-spacing: 0.06em;
  color: var(--c-white);
  text-shadow: 0 4px 30px rgba(0,0,0,.9);
}
.ornamentDivider {
  display: block;
  width: 591px;
  height: auto;
  margin-top: 16px;
}

/* ---- ПОГИБ ---- */
.deathWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(620px, 92vw);
  pointer-events: none;
}
.deathWrap .overlayTitle {
  /* v54.9: was 100px hardcoded */
  font-size: clamp(32px, 9vmin, 100px);
  white-space: nowrap;
  margin-bottom: 48px;
}

#deathStats {
  margin: 0 0 48px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}
#deathStats h3, #deathStats br { display: none; }
#deathStats:not(:has(.deathStatsTable)) { color: transparent; }

.deathStatsTable {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--c-white);
}
.deathStatRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 14px 0;
  position: relative;
}
.deathStatRow::before,
.deathStatRow:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 9px;
  background: no-repeat center/100% 100%;
  background-image: url('./icons/divider.svg');
}
.deathStatRow::before { top: -4px; }
.deathStatRow:last-child::after { bottom: -4px; }

.deathStatLabel {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--c-white);
  text-align: left;
  padding-left: 4px;
}
.deathStatValue {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 30px;
  color: var(--c-accent);
  text-align: right;
  padding-right: 4px;
}

/* ---- УЛУЧШЕНИЯ ---- */
#upgradeBox {
  width: min(960px, 94vw);
  max-height: 96vh;
  overflow: hidden;       /* upgradeList scrolls instead — keeps footer pinned */
  padding: 28px 36px 22px;
  background: transparent;
  border: none;
  text-align: left;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.upgradeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-shrink: 0;         /* header stays visible */
}
.upgradeHeaderLeft { flex: 1; }
.upgradeTitle {
  /* v54.9: was 68px hardcoded */
  font-size: clamp(24px, 6vmin, 68px);
  white-space: nowrap;
  margin: 0 0 4px;
  text-align: left;
  line-height: 1;
}
#upgradeControls {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.75);
  margin: 0;
  text-transform: uppercase;
}
.upgradeHeaderRight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}
#substanceText {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 46px;
  color: var(--c-accent);
  line-height: 1;
}

.upgradeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  flex: 1 1 auto;         /* take all remaining space */
  overflow-y: auto;       /* this is the only scrollable area */
  min-height: 0;          /* allow flex shrinking — required for overflow to work */
}

.upgradeBtn {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  margin: 0;
  transition: background .15s ease, border-color .15s ease;
  position: relative;
}
.upgradeBtn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.32);
}
.upgradeBtn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.55);
}
.upgradeBtn .upgradeLine { display: contents; }

.upgradeNumberCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: no-repeat center/contain;
  background-image: url('./icons/button.svg');
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 20px;
  color: var(--c-black);
}
/* v55.26 — upgrade-type icon centred on the diamond */
.upgradeNumberCell .upgradeIcon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.upgradeBtn .upgradeText {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: inherit;
}

.upgradeBtn .upgradeCost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 24px;
  color: var(--c-accent);
  white-space: nowrap;
}
.upgradeBtn .upgradeCost .substanceIconWrap {
  width: 24px; height: 30px;
}
.upgradeBtn .upgradeCost.tooExpensive { color: var(--c-accent-dim); }
.upgradeBtn .upgradeCost.tooExpensive .substanceIconWrap { filter: brightness(0.5); }
.upgradeBtn .upgradeCost.flashRed {
  animation: upgradeErrFlash 0.55s ease-out;
}
.upgradeBtn:has(.upgradeCost.flashRed) {
  animation: upgradeErrFlashRow 0.55s ease-out;
}
@keyframes upgradeErrFlash {
  0%   { color: #ff5050; text-shadow: 0 0 8px rgba(255,80,80,.8); }
  60%  { color: #ff7070; text-shadow: 0 0 4px rgba(255,80,80,.5); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes upgradeErrFlashRow {
  0%   { background-color: rgba(255, 60, 60, 0.22); }
  60%  { background-color: rgba(255, 60, 60, 0.10); }
  100% { background-color: transparent; }
}
.upgradeBtn.disabled .upgradeCost { color: rgba(255,255,255,0.35); }
.upgradeBtn.disabled .upgradeCost .substanceIconWrap { filter: brightness(0.5) grayscale(1); }

.upgradeFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-shrink: 0;         /* always visible — never compressed */
}
/* v55.28 — NEW RUN + CANCEL prompts on one row */
.upgradeFooterRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

/* Полоса удержания E (упрощённая, без SVG-маски — надёжно работает на всех разрешениях) */
#upgradeHoldWrap {
  width: min(720px, 80%);
  height: 16px;
  background: var(--c-fade-soft);
  border-radius: 8px;
  overflow: hidden;
  /* Опциональная SVG-маска как декор поверх (если загрузится — красиво; не загрузится — всё равно видно) */
  -webkit-mask: url('./icons/progress_transition.svg') no-repeat left center / 100% 100%;
          mask: url('./icons/progress_transition.svg') no-repeat left center / 100% 100%;
}
#upgradeHoldFill {
  height: 100%;
  width: 0%;
  background: var(--c-white);
  border-radius: 8px;
  transition: width .08s linear;
}

/* ---- ЭФФЕКТЫ ---- */
#lowHpVignette {
  position: fixed; inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(220,30,30,.30) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
/* HP < 30% — лёгкое затемнение по краям (v51.1) */
#lowHpVignette.active { opacity: 0.55; }
/* HP < 10% — насыщенная красная виньетка с пульсацией (v51.1) */
#lowHpVignette.critical {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,30,30,.65) 100%);
  opacity: 1;
  animation: vignetteCritPulse 1.1s ease-in-out infinite;
}
@keyframes vignetteCritPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.0; }
}

#hurtFlash {
  position: fixed; inset: 0;
  z-index: 8;
  pointer-events: none;
  background: #dc1e1e80;
  opacity: 0;
  transition: opacity .3s ease-out;
}

/* ============================================================ */
/* v51.3 — Main menu (first screen on game start)               */
/* ============================================================ */

#mainMenu {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  background: transparent;
  pointer-events: auto;
  user-select: none;
  color: var(--c-white);
  /* Subtle vignette so HUD-like backdrop reads as a menu */
  box-shadow: inset 0 0 220px rgba(0,0,0,0.55);
}

#mainMenu .mainMenuTitle {
  /* v53.6: position relative to buttons (which are centered at top:50%) so the gap below
     the title equals the combined height of both buttons (~140px = 2 × ~63px + 14px gap).
     Buttons block is centered at 50%, half-height ≈ 70px, so its top edge is at calc(50% - 70px).
     Title sits 140px above that edge; title height is ~78px → top = calc(50% - 70px - 140px - 78px). */
  position: absolute;
  top: calc(50% - 288px);
  left: 64px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 78px;
  letter-spacing: 0.04em;
  color: var(--c-white);
  text-shadow: 0 4px 22px rgba(0,0,0,.9);
  line-height: 1;
}

#mainMenu .mainMenuVersion {
  position: absolute;
  bottom: 24px;
  left: 64px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(240,230,210,0.55);
  text-transform: uppercase;
}

#mainMenu .mainMenuButtons {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

#mainMenu .mainMenuBtn {
  appearance: none;
  background: rgba(20, 20, 24, 0.45);
  border: 1px solid rgba(220, 200, 160, 0.40);
  color: rgba(240, 230, 210, 0.92);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.06em;
  padding: 14px 36px;
  min-width: 280px;
  text-align: left;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.06s;
}
#mainMenu .mainMenuBtn:hover {
  background: rgba(40, 40, 48, 0.65);
  color: rgba(255, 245, 220, 1);
  border-color: rgba(240, 215, 165, 0.7);
}
#mainMenu .mainMenuBtn:active {
  transform: translateY(1px);
}

#mainMenu .mainMenuLangSwitcher {
  position: absolute;
  right: 24px;
  bottom: 20px;
}

/* Controls subscreen — same look as pause but no langSwitcher inside */
#mainMenuControls {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--c-overlay-bg);
  color: var(--c-white);
  pointer-events: auto;
  user-select: none;
}
#mainMenuControls[style*="display: block"],
#mainMenuControls[style*="display:block"],
#mainMenuControls[style*="display: flex"],
#mainMenuControls[style*="display:flex"] {
  display: flex !important;
}

/* When main menu is open, hide HUD chrome so only the arena backdrop + menu show */
body.menuOpen #topLeftPanel,
body.menuOpen #ammoPanel,
body.menuOpen #shotgunPanel,
body.menuOpen #substancePanel,
body.menuOpen #coinPanel,
body.menuOpen #barWrap,
body.menuOpen #barTop,
body.menuOpen #status,
body.menuOpen #hpText,
body.menuOpen #weaponPanel,
body.menuOpen #staminaBox,
body.menuOpen #contextHint,
body.menuOpen #crosshair,
body.menuOpen #shotgunReadyText,
body.menuOpen #lowHpVignette,
body.menuOpen #hurtFlash,
body.menuOpen #versionLabel {
  display: none !important;
}