/* =====================================================================
   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;
}

/* ---------- База ---------- */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #111;
  color: #eee;
  font-family: var(--f-ui);
}
canvas { display: block; cursor: none; }

#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;
  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;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: width .25s ease;
}
/* «Пустая» полоса HP — фоновая подложка для #bar */
#barWrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 36px;
  -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;
}

#bar {
  position: relative;
  width: 100%;
  height: 36px;
  background: var(--c-accent);
  -webkit-mask: url('./icons/hp_bar.svg') no-repeat left center / 480px 100%;
          mask: url('./icons/hp_bar.svg') no-repeat left center / 480px 100%;
  z-index: 1;
}

#hpText {
  display: block;
  margin-top: 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;
}

/* =====================================================================
   ВЕРХ-ПРАВО — ОРУЖИЕ
   gun_selected.svg = 240×170 (вся композиция «выбрано ружьё»)
   sword_selected.svg = 237×170 (вся композиция «выбран меч»)
   ===================================================================== */
#weaponPanel {
  position: fixed;
  right: 50px; top: 28px;
  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, над стыком ромбов */
#weaponSwitchHint {
  position: absolute;
  right: 76px;
  bottom: 50px;
  z-index: 3;
  width: 26px; height: 26px;
  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: 11px;
  color: var(--c-black);
}

#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 {
  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;
}

/* =====================================================================
   ЛЕВЫЙ НИЗ — ДРОБОВИК
   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;
}
/* width 0% = есть патрон, 100% = израсходован */
.sgChargeFill {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,0.94);
  transition: width 0.12s linear;
}

#shotgunLabel { display: none !important; }

/* =====================================================================
   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;
  font-size: 88px;
  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;
}
.pauseBox .overlayTitle {
  font-size: 92px;
  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 14px 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 {
  width: 9px; height: 9px;
  background: var(--c-white);
  transform: rotate(45deg);
  justify-self: center;
}
.pauseItem .caption {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.85);
  text-align: right;
  padding-right: 4px;
}

/* ---- УРОВЕНЬ ЗАВЕРШЁН ---- */
.levelCompleteWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.levelCompleteTitle {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 96px;
  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 {
  font-size: 100px;
  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: auto;
  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;
}
.upgradeHeaderLeft { flex: 1; }
.upgradeTitle {
  font-size: 68px;
  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;
}

.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);
}

.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.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;
}

/* progress_transition.svg = 955×16 — полоса удержания E */
#upgradeHoldWrap {
  width: min(720px, 80%);
  height: 16px;
  -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%;
  background: var(--c-fade-soft);
}
#upgradeHoldFill {
  height: 100%;
  width: 0%;
  background: var(--c-white);
  -webkit-mask: url('./icons/progress_transition.svg') no-repeat left center / 720px 16px;
          mask: url('./icons/progress_transition.svg') no-repeat left center / 720px 16px;
  transition: width .08s linear;
}

/* ---- ЭФФЕКТЫ ---- */
#lowHpVignette {
  position: fixed; inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(220,30,30,.55) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
#lowHpVignette.active { opacity: 1; }

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