#canvasMinimap { display: block; }
canvas {
  display: block;
  background: #12121a;
  border: 1px solid #2a2a38;
}
canvas.hidden { display: none; }
#status {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: #808090;
}
.combatLogLine { color: #a0a0b0; word-break: break-word; }
#combatLogOverlay { min-height: 0; }
#combatLogOverlay .combatLogLine { color: #c0c0d0; }
.invGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 1px;
  box-sizing: border-box;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1;
  height: auto;
  flex: 0 0 auto;
  align-self: center;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  overflow: hidden;
  background: #252535;
  min-width: 0;
}
.invGrid .invSlot {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #222230;
}
.invGrid .invItem {
  font-size: 0.58rem;
  line-height: 1.15;
  padding: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #b0b8c8;
  aspect-ratio: auto;
  max-height: none;
  cursor: pointer;
}
.invGrid .invItem.invItem--pistol {
  padding: 4px;
  position: relative;
}
.invGrid .invItem.invItem--ammo9mm {
  padding: 3px;
  position: relative;
}
.invGrid .invItem.invItem--medkit {
  padding: 3px;
  position: relative;
}
.invGrid .invItem .invItemAmmo--stack {
  font-size: 0.62rem;
}
.invGrid .invItem .invItemAmmo {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 0.58rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #d8e0f0;
  text-shadow: 0 0 3px #1a1a22, 0 0 2px #1a1a22;
  pointer-events: none;
}
.invGrid .invItem .invItemSvg {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: block;
  pointer-events: none;
}
.invGrid.invGrid--placing {
  outline: 2px solid #4a6a8a;
  outline-offset: 1px;
}
.invGrid.invGrid--placing .invSlot:not(.invItem) {
  cursor: cell;
}
.invGrid .invItem.invItem--corpseLoot {
  box-shadow: inset 0 0 0 1px rgba(180, 140, 90, 0.5);
  background: #2a2830;
}
/* Окно обыска: две колонки одной ширины, сетки 168×168, слоты под текст сверху/снизу симметричны */
.lootModalBody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 1.25rem;
  align-items: start;
  justify-content: center;
  width: 100%;
}
.lootModalCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.lootModalColTitle {
  font-size: 0.82rem;
  color: #a0a8b8;
}
.lootModalColSlot {
  width: 100%;
  max-width: 168px;
  min-height: 2.85rem;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lootModalColSlot--top {
  font-size: 0.65rem;
  line-height: 1.3;
  color: #808890;
}
.lootModalColSlot--bottom {
  font-size: 0.72rem;
  line-height: 1.3;
  color: #9090a8;
}
#lootModalInvGrid.invGrid,
#lootModalGroundGrid.invGrid {
  width: 168px;
  height: 168px;
  max-width: 168px;
  aspect-ratio: auto;
  align-self: center;
}
#characterSheetInvItemPopup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.45);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
#characterSheetInvItemPopup.lootItemPopup {
  z-index: 1110;
}
#characterSheetInvItemPopup.lootItemPopup #characterSheetInvItemThrow,
#characterSheetInvItemPopup.lootItemPopup #characterSheetInvItemDiscard {
  display: none;
}
#characterSheetInvItemPopup .characterSheetInvItemPopupInner {
  background: #1a1a24;
  border: 1px solid #2a2a38;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  min-width: 220px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
#characterSheetInvItemPopupTitle {
  font-size: 0.95rem;
  color: #c0c0c0;
  margin-bottom: 0.35rem;
  text-align: center;
}
#characterSheetInvItemPopupWeight {
  font-size: 0.8rem;
  color: #9090a8;
  margin-bottom: 0.85rem;
  text-align: center;
}
#characterSheetInvItemPopup .invPopupBtnRow {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#characterSheetInvItemPopup button.invPopupBtn {
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: 0.88rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #3a4a5a;
  background: #2a3a4a;
  color: #c0c0c0;
}
#characterSheetInvItemPopup button.invPopupBtn:hover {
  background: #3a4a5a;
  border-color: #4a5a6a;
}
#characterSheetInvItemPopup button.invPopupBtnSecondary {
  background: #2a2a38;
  border-color: #3a4a4a;
  color: #9090a0;
  font-size: 0.82rem;
}
#characterSheetInventoryLoad {
  font-size: 0.72rem;
  line-height: 1.3;
  color: #9090a8;
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 168px;
  align-self: center;
}

/* Перки военного в листе: иконка + уровень; полный текст только по клику */
.militaryPerkRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}
.militaryPerkIconBtn {
  position: relative;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #3a4a5a;
  background: #1a1e28;
  color: #8ab4d8;
  cursor: pointer;
  flex-shrink: 0;
}
.militaryPerkIconBtn:hover {
  border-color: #5a7090;
  background: #222830;
  color: #a8c8e8;
}
.militaryPerkIconBtn:focus-visible {
  outline: 2px solid #6a8ab0;
  outline-offset: 2px;
}
.militaryPerkIconBtn .militaryPerkIconSvg {
  width: 26px;
  height: 26px;
  display: block;
}
.militaryPerkLevelBadge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 1rem;
  padding: 0 3px;
  font-size: 0.62rem;
  line-height: 1.05rem;
  text-align: center;
  border-radius: 3px;
  background: #2a3548;
  color: #d0dce8;
  font-weight: 600;
}
.militaryPerkDetail {
  flex-basis: 100%;
  display: none;
  margin-top: 0.15rem;
  padding: 0.5rem 0.55rem;
  background: #1a1a24;
  border-radius: 4px;
  border: 1px solid #2a2a38;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #a8a8b8;
  white-space: pre-line;
}
.militaryPerkDetail.is-open {
  display: block;
}
.militaryPerkDetailLead {
  font-weight: 600;
  color: #b8c0d0;
  margin-bottom: 0.35rem;
}

#mainMenu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #0a0a0e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}
#mainMenu.hidden { display: none; }
#mainMenu .main-menu-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  width: 100%;
  max-width: 560px;
  margin: 0 0 0.5rem 0;
}
#mainMenu .main-menu-title-top,
#mainMenu .main-menu-title-bottom {
  font-family: Consolas, 'Courier New', monospace;
  font-weight: bold;
  color: #44ff99;
  text-shadow: 0 0 12px rgba(0, 255, 140, 0.45), 0 0 3px #0d8a4a;
  margin: 0;
  width: 100%;
  line-height: 1.12;
}
#mainMenu .main-menu-title-top {
  font-size: clamp(1.05rem, 3.2vw, 1.55rem);
}
#mainMenu .main-menu-title-bottom {
  font-size: clamp(1.4rem, 4.2vw, 2rem);
}
#mainMenu .menuButtons { display: flex; flex-direction: column; gap: 0.75rem; min-width: 200px; }
#mainMenu .menuButtons button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background: #2a2a38;
  color: #c0c0c0;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  cursor: pointer;
}
#mainMenu .menuButtons button:hover { background: #3a3a4a; }
#mainMenu .menuButtons button.primary { background: #1a3a2a; border-color: #2a5a3a; }
#mainMenu .menuButtons button.primary:hover { background: #2a5a3a; }
#mainMenu .menuLink {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 0.75rem;
  color: #8ab0c8;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid #3a4555;
  border-radius: 6px;
  background: #1a1a22;
}
#mainMenu .menuLink:hover { background: #2a2a38; color: #c0d8e8; }
#settingsPanel { display: none; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 280px; }
#settingsPanel.visible { display: flex; }
#settingsPanel .row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0; }
#settingsPanel .row label { color: #b0b0c0; font-size: 0.95rem; }
#settingsPanel input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
#settingsPanel #btnSettingsIntroReplay {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  width: 100%;
  max-width: 280px;
  background: #2a2a38;
  color: #c0c0c0;
  border: 1px solid #3a4a4a;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0.5rem;
}
#settingsPanel #btnSettingsIntroReplay:hover { background: #3a3a4a; }
#settingsPanel #btnSettingsBack {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  background: #2a2a38;
  color: #c0c0c0;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0.5rem;
}
#settingsPanel #btnSettingsBack:hover { background: #3a3a4a; }

/* Intro splash (intro-splash.js) */
#introSplash {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #020204;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#introSplash.hidden {
  display: none;
}
#introImageWrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#introImage {
  display: block;
  width: 100%;
  height: 100%;
  /* contain: вписываем иллюстрацию (1376×768, ≈16:9) в окно игрока целиком,
   * без обрезки по сторонам; по нужной оси остаётся чёрная рамка — тот же
   * фон #introSplash, т.е. визуально просто «не растянуто». */
  object-fit: contain;
}
#introContent {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 1.5rem 1.25rem;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}
#introTextStack {
  pointer-events: auto;
  width: 100%;
  min-height: 3.4rem;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-line {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #b5121a;
  /* Без фона у бокса — тень нужна, чтобы текст читался поверх любой
   * иллюстрации. */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 10px rgba(0, 0, 0, 0.9);
  margin: 0;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.intro-line.intro-line-visible {
  opacity: 1;
}
#introSplash.intro-reduced-motion .intro-line {
  transition: none;
}
#introEpic {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 10vh 1.5rem;
  box-sizing: border-box;
  pointer-events: none;
}
#introEpic.visible {
  display: flex;
}
#introEpicTop,
#introEpicBottom {
  font-family: Consolas, 'Courier New', monospace;
  font-weight: bold;
  color: #44ff99;
  margin: 0;
}
#introEpicTop {
  font-size: clamp(1.15rem, 3.5vw, 1.65rem);
  align-self: flex-start;
  width: 100%;
}
#introEpicBottom {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  align-self: flex-end;
  width: 100%;
}
#btnIntroSkip {
  position: fixed;
  right: 1rem;
  bottom: 1.1rem;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-family: Consolas, 'Courier New', monospace;
  color: #b5121a;
  background: rgba(16, 6, 6, 0.9);
  border: 1px solid #3a0c10;
  border-radius: 4px;
}
#btnIntroSkip:hover {
  color: #ff3030;
  border-color: #6a1018;
}

/* Всплывающее меню режима укрытия (как shootingModePopup / сайдбар) */
#coverModeMenu.coverModeMenu {
  position: fixed;
  z-index: 1103;
  display: none;
  min-width: 200px;
  max-width: min(92vw, 280px);
  padding: 8px 8px 10px;
  margin: 0;
  background: #1a1a24;
  border: 1px solid #2a2a38;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  line-height: 1.3;
  color: #c0c0c0;
  font-family: inherit;
}
#coverModeMenu .coverModeMenuHeader {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9090a0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 2px 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2a38;
}
#coverModeMenu .coverModeMenuList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#coverModeMenu .coverModeMenuItem {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.38rem 0.55rem;
  margin: 0;
  border: 1px solid #3a3a4a;
  border-radius: 4px;
  background: #2a2a38;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  color: #c0c0c0;
}
#coverModeMenu .coverModeMenuItem:hover,
#coverModeMenu .coverModeMenuItem:focus {
  background: #3a3a4a;
  border-color: #4a5a6a;
  color: #e0e8f0;
  outline: none;
}
#coverModeMenu .coverModeMenuItem:active {
  background: #323240;
}