/* Anti-Kotopark game screen styles */
/* Вёрстка: по центру поле с котами, справа статистика */
.anti-game-stage {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  max-width: 100%;
}

/* Статистика справа от поля: точные координаты (left/top) задаёт JS в
   positionStats(), чтобы игровое поле оставалось строго по центру экрана,
   а счётчики — справа от него с тем же отступом, что был раньше (20px).
   На мобильных (<769px) правила main.css/anti-game.css возвращают счётчики
   в поток (статичная колонка под полем). */
.anti-game-stage .stats {
  position: absolute;
  left: auto;
  top: auto;
  right: auto;
  transform: none;
  width: auto;
  min-width: 180px;
  flex: 0 0 auto;
  color: #fff;
}

/* В абсолютной позиции верх счётчиков JS ставит точно по верху игрового поля,
   поэтому прежний margin-top 12px (выравнивание в потоке) больше не нужен. */
@media (min-width: 769px) {
  .anti-game-stage .stats,
  .anti-game-stage .stats.level10-stats {
    margin-top: 0;
  }
}

/* Панель статистики анти-уровня: компактная колонка */
.anti-game-stage .level10-stats {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  width: auto;
}

/* Кнопки социотипов (переиспользуем существующие анти-тайп-кнопки) */
.anti-type-btn {
  padding: 8px 12px;
  font-size: 12px;
  border: 2px solid var(--cell-border);
  border-radius: 8px;
  background: #310d1b;
  color: var(--button-text);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.anti-type-btn:hover {
  background: #4a1830;
  transform: scale(1.02);
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.anti-type-btn:active {
  transform: scale(0.98);
}

/* ===== Всплывающее окно выбора социотипа =====
   Каркас окна (подложка, центрирование, закрытие по фону/Escape) даёт Tingle.js;
   ниже — оформление самой карточки контента. */
.socio-modal-card {
  background: #220f13;
  border: 2px solid var(--gilt, #d49a3c);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(212, 154, 60, 0.2);
  /* ПК: прямоугольное окно — ширина по контенту, высота ограничена так,
     чтобы влезать на экран. Мобильная версия (≤768px) задаётся ниже. */
  width: max-content;
  min-width: 260px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
  position: relative;
  /* Быстрое появление: короткое затухание + лёгкое увеличение (150 мс),
     а одновременно вокруг окна «выходит» огненный ореол (flame burst). */
  transform-origin: center;
  will-change: transform, opacity;
  animation:
    socio-modal-in 150ms ease-out,
    socio-modal-fire-in 620ms ease-out;
}

/* Изображения декорации в модальном окне социотипов */
.socio-modal-decoration-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px; /* было 60px — чуть увеличил */
  height: 72px; /* было 60px — чуть увеличил */
  background-image: url("../assets/socio-modal/left.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  pointer-events: none;
  z-index: 1;
}

.socio-modal-decoration-right {
  position: absolute;
  top: 0;
  right: 58px;
  width: 60px;
  height: 60px;
  background-image: url("../assets/socio-modal/right.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 1;
}

/* Закрытие: быстрое затухание окна (200 мс) вместе с коротким огненным
   «всплеском», гаснущим одновременно — окно уходит «в огонь», а не просто
   пропадает. Длительности держим равными, чтобы hide сработал синхронно. */
.socio-modal-card.closing {
  animation:
    socio-modal-out 200ms ease-in forwards,
    socio-modal-fire-out 200ms ease-in forwards;
}

@keyframes socio-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes socio-modal-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ===== Огненный ореол вокруг модального окна =====
   Анимируем box-shadow самой карточки (она не обрезается своим overflow),
   поэтому «пламя» живёт за границей золотой рамки. Вспышка на ПОЯВЛЕНИЕ
   разгорается и чуть «дрожит», на ЗАКРЫТИЕ — коротко ярче и гаснет. */
@keyframes socio-modal-fire-in {
  0%   { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0),    0 0 0 0 rgba(255, 60, 0, 0),     0 0 0 0 rgba(255, 220, 60, 0); }
  18%  { box-shadow: 0 0 6px 1px rgba(255, 150, 0, .45),  0 0 14px 4px rgba(255, 80, 0, .18), 0 0 22px 10px rgba(255, 220, 60, .10); }
  32%  { box-shadow: 0 0 9px 2px rgba(255, 170, 0, .55),  0 0 18px 6px rgba(255, 100, 0, .26), 0 0 26px 12px rgba(255, 230, 120, .16); }
  47%  { box-shadow: 0 0 7px 1px rgba(255, 130, 0, .42),  0 0 16px 5px rgba(255, 80, 0, .22),  0 0 24px 11px rgba(255, 200, 60, .14); }
  62%  { box-shadow: 0 0 10px 3px rgba(255, 170, 0, .5),  0 0 19px 7px rgba(255, 100, 0, .26), 0 0 28px 13px rgba(255, 236, 130, .18); }
  80%  { box-shadow: 0 0 7px 1px rgba(255, 140, 0, .38),  0 0 12px 3px rgba(255, 70, 0, .16),  0 0 18px 6px rgba(212, 154, 60, .16); }
  100% { box-shadow: 0 0 16px 2px rgba(212, 154, 60, .35), 0 0 26px 10px rgba(212, 154, 60, .12); }
}

@keyframes socio-modal-fire-out {
  0%   { box-shadow: 0 0 16px 2px rgba(212, 154, 60, .35),  0 0 26px 10px rgba(212, 154, 60, .12); }
  35%  { box-shadow: 0 0 10px 3px rgba(255, 170, 0, .6),    0 0 24px 9px rgba(255, 100, 0, .3),  0 0 32px 15px rgba(255, 220, 60, .2); }
  70%  { box-shadow: 0 0 6px 1px rgba(255, 130, 0, .45),    0 0 12px 4px rgba(255, 70, 0, .22),  0 0 16px 8px rgba(212, 154, 60, .1); }
  100% { box-shadow: 0 0 0 0 rgba(255, 120, 0, 0),          0 0 0 0 rgba(255, 60, 0, 0),        0 0 0 0 rgba(212, 154, 60, 0); }
}

.socio-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(212, 154, 60, 0.4);
  flex-shrink: 0;
}

.socio-modal-title {
  font-size: 23px; /* ПК-версия: было 16px, чуть увеличил */
  font-weight: bold;
  color: var(--gilt-highlight, #f3d27a);
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.socio-modal-close {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  color: var(--gilt-highlight, #f3d27a);
  border: 1px solid rgba(212, 154, 60, 0.5);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.socio-modal-close:hover {
  background: rgba(212, 154, 60, 0.2);
  transform: rotate(90deg);
}

/* Сетка типов: колонки шириной по самой длинной кнопке (текст в одну строку,
   ничего не обрезается). Окно само расширяется по ширине содержимого. */
.socio-modal-list {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 6px;
  padding: 12px;
  width: max-content;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Все кнопки одной ширины (ячейки сетки 1fr), текст по центру,
   длинные имена аккуратно переносятся внутри ячейки */
.socio-modal-list .socio-modal-type-btn {
  text-align: center;
  font-size: 25px; /* ПК-версия: 25px */
  padding: 8px 4px;
  justify-self: stretch;
  align-self: stretch;
  white-space: nowrap; /* текст типа — всегда в одну строку */
  line-height: 1.2;
  color: #fff;
}

/* При первом открытии ни один вариант не должен быть «отмечен»: фокус-подсветка
   появляется только у элемента, к которому реально перешли (клавиатурой).
   Фокус от мыши/тача кнопке рамку не добавляет — иначе браузер показывал бы
   один из вариантов выделенным ещё до выбора игрока. */
.socio-modal-type-btn:focus {
  outline: none;
}
.socio-modal-type-btn:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 1px;
}

/* Пока окно не открыли для реального выбора, кнопки не должны выглядеть
   «полными как выбранные». appearance в вариантах как default системных
   контролов; фокус, полученный мышь/тачем (не клавиатурой), рамки не даёт. */
.socio-modal-list .socio-modal-type-btn {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.socio-modal-type-btn:focus:not(:focus-visible) {
  box-shadow: none;
}
/* пока держится «hold»-класс — гасим и hover, и фокус-подсветку одновременно */
.socio-modal-card.socio-modal-hold .socio-modal-type-btn:hover {
  box-shadow: none;
}

/* Highlight for type-selected cat */
.cell.type-selected {
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.8), 0 0 15px rgba(255, 152, 0, 0.5);
  z-index: 10;
}

/* Win overlay */
.win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.win-content {
  background: var(--cell-bg);
  border: 3px solid var(--primary-color);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  color: var(--button-text);
  max-width: 400px;
}

.win-content h2 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #4caf50;
}

.win-content p {
  font-size: 16px;
  margin: 8px 0;
}

.win-restart-btn,
.win-menu-btn {
  margin-top: 16px;
  padding: 12px 24px;
  font-size: 16px;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  margin: 8px;
}

.win-restart-btn:hover,
.win-menu-btn:hover {
  background: var(--button-hover);
}

/* Mobile responsive: поле по центру, статистика внизу.
   Окно выбора социотипа на телефоне — КОМПАКТНОЕ (не растягивается на весь
   экран): подложка затемняет всё, но само окно центрировано и ограничено по
   ширине/высоте так, чтобы помещаться на любом маленьком экране. Кнопки
   социотипов всегда остаются в ДВА СТОЛБЦА и прокручиваются внутри окна,
   если не хватает высоты. */
@media (max-width: 768px) {
  .anti-game-stage {
    flex-direction: column;
    align-items: center;
    padding: 10px;
    gap: 10px;
  }

  .board-area {
    order: 1;
  }

  .anti-game-stage .stats {
    order: 2;
    width: 100%;
    max-width: 400px;
  }

  /* Подложку и центрирование окна теперь даёт Tingle.js (см. css/tingle-theme.css),
     поэтому здесь остаются только размеры компактной карточки. */

  /* Компактная карточка: авто-ширина под 2 колонки, но не шире экрана;
     высота по содержимому, но не выше вьюпорта. */
  .socio-modal-card {
    width: min(420px, calc(100vw - 24px));
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 40px);
    max-height: calc(100vh - 40px); /* фолбэк без dvh */
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .socio-modal-header {
    flex-shrink: 0;
    padding: 14px 16px;
  }

  .socio-modal-title {
    font-size: 17px; /* как было в git до правки фиксмодал (было 8px) */
    white-space: normal;
    line-height: 1.3;
  }

  /* На мобильной версии заголовок условно «Выберите <br> социотип — кот №N»
     складываем в 2 ряда: 1-я строка «Выберите», 2-я «социотип — кот №N». */
  .socio-modal-title-prefix,
  .socio-modal-title-cat {
    display: block;
  }

  .socio-modal-close {
    width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 22px;
  }

  /* Кнопки социотипов — строго в 2 столбца на любом маленьком экране.
     Если высоты не хватает, список прокручивается внутри окна. */
  .socio-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .socio-modal-list .socio-modal-type-btn {
    font-size: 22px; /* текст в кнопках: в 2 раза крупнее (было 13px) */
    padding: 12px 8px;
    min-height: 48px;
    white-space: nowrap; /* одна строка без переноса */
  }
}

/* ==== Тестовая кнопка для заказчика ====
   «Открыть типы всех котов» (показывается на уровнях 1–30) —
   визуально отличается от боевой кнопки рыбок (пунктирная рамка). */
.test-tool-btn {
  border: 2px dashed #d49a3c !important;
  background: linear-gradient(135deg, rgba(94, 22, 56, 0.9) 0%, rgba(42, 10, 20, 0.95) 100%) !important;
  font-size: 13px !important;
  min-height: 32px !important;
}

.test-tool-btn:hover {
  background: #4a1830 !important;
}

.test-tool-btn:active {
  transform: scale(0.98);
}

/* ==== Чит-код «Aushra» ====
   Набор «Aushra» на клавиатуре: +1000 рыбок, кнопка «Открыть типы всех котов»
   появляется с анимацией, на игровом поле всплывает и гаснет надпись
   «Чит-код активирован». */

/* Анимация появления кнопки после чит-кода */
.test-tool-btn-appear {
  animation: cheatBtnAppear 0.5s ease-out;
}

@keyframes cheatBtnAppear {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Надпись на игровом поле: появляется и через ~1 секунду исчезает */
.cheat-code-float {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(212, 154, 60, 0.95) 0%, rgba(243, 210, 122, 0.95) 100%);
  color: #2a0a14;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  border: 2px solid #f3d27a;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1001;
  animation: cheatCodeFloat 1s ease forwards;
}

@keyframes cheatCodeFloat {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1.06); }
  30%  { transform: translateX(-50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px); }
}