.cell { position: relative; }
.cell img.cat { width: var(--cat-size); height: var(--cat-size); pointer-events: none; filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)); position: relative; z-index: 3; }
.cell .label { margin-top: 2px; position: relative; z-index: 3; }

/* Клетка с котом кликабельна (открывает меню социотипа) */
.cell:has(> img.cat) {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Anti-Kotopark: Cat number badge */
.cell .cat-number {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  z-index: 4;
  pointer-events: none;
}

/* Anti-Kotopark: Sociotype label at bottom */
.cell .cat-type-label {
  margin-top: 2px;
  font-size: 11px;
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
}

.cell .cat-type-label.unknown {
  color: #ff9800;
  background: rgba(255, 152, 0, 0.15);
}

.cell .cat-type-label.known {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
}
.cell[data-mood="-6"] .label,
.cell[data-mood="-5"] .label,
.cell[data-mood="-4"] .label,
.cell[data-mood="-3"] .label,
.cell[data-mood="-2"] .label,
.cell[data-mood="-1"] .label { color: #a00; }
.cell[data-mood="0"] .label { color: #666; }
.cell[data-mood="1"] .label,
.cell[data-mood="2"] .label,
.cell[data-mood="3"] .label,
.cell[data-mood="4"] .label,
.cell[data-mood="5"] .label,
.cell[data-mood="6"] .label { color: #070; }

/* Jumping animation for non-green cats */
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ПРОИЗВОДИТЕЛЬНОСТЬ: раньше все недовольные коты (mood <= 0) имели
   бесконечную CSS-анимацию jump + will-change:transform. При 10–40 котах это
   означало десятки одновременно анимируемых слоёв с drop-shadow-фильтром —
   постоянная перерисовка 60 раз/сек и просадка FPS («замедления на поле»).
   Теперь прыжок — одиночная короткая анимация только у ЯВНО недовольных
   котов (mood <= -1), проигрывается один раз за смену настроения
   (её запускает JS через класс .cat-land / .mood-change) и не крутится вечно.
   Нейтральные коты (mood 0) больше не анимируются вовсе. */
.cell[data-mood="-6"] img.cat,
.cell[data-mood="-5"] img.cat,
.cell[data-mood="-4"] img.cat,
.cell[data-mood="-3"] img.cat,
.cell[data-mood="-2"] img.cat,
.cell[data-mood="-1"] img.cat {
  animation: jump 1s ease-in-out 1;
}

/* Progressive golden glow for happy cats */
.cell[data-mood="2"] img.cat {
  filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 3px rgba(255, 215, 0, 0.35));
}
.cell[data-mood="3"] img.cat {
  filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}
.cell[data-mood="4"] img.cat {
  filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 7px rgba(255, 215, 0, 0.65));
}
.cell[data-mood="5"] img.cat {
  filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}
.cell[data-mood="6"] img.cat {
  filter: drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

/* Golden flash for new kings */
.cell .golden-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0) 70%);
  z-index: 5;
  pointer-events: none;
  animation: flash 0.4s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Экран победы */
#win-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  z-index: 100;
}
#win-screen img { width: 240px; max-width: 70vw; }
#win-screen .win-title { font-size: 26px; font-weight: bold; }
#win-screen .win-stats {
  margin: 0 16px;
  color: #fff;
}
#win-screen .win-stat-value {
  color: #fff;
}
#win-screen .win-stat-label,
#win-screen .win-stat-detail {
  color: rgba(255, 255, 255, 0.85);
}

/* Экран импичмента */
#impeachment-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #fff;
  z-index: 200;
  padding: 20px;
}

#impeachment-screen .win-stats {
  margin: 0 16px;
  color: #fff;
  max-width: min(640px, 90vw);
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
}

.impeachment-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff6b6b;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
}

.impeachment-video-wrap {
  width: fit-content;
  max-width: min(640px, 90vw);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.impeachment-video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(640px, 90vw);
  max-height: min(70vh, 480px);
  background: transparent;
  opacity: 0.7;
}

.impeachment-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Сворачивание/разворачивание окна победы и импичмента */
.result-collapse-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  border: 2px solid var(--primary-color);
  width: auto;
  transition: transform 0.2s;
}

.result-collapse-btn:hover {
  background: var(--button-hover);
  transform: scale(1.05);
}

.result-reopen-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 500;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 999px;
  background: var(--primary-color);
  border: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.result-reopen-btn:hover {
  opacity: 0.9;
}

/* Кнопка «Рыбки»: весь визуал (размеры, отступы, шрифт, цвета, рамка, тень,
   выравнивание) переиспользует существующий класс .stat-item — те же правила,
   что у счётчиков HUD, во всех брейкпоинтах, ориентациях и темах. Здесь —
   только свойства, присущие именно кнопке. */
.rocket-btn {
  width: 100%;
  font-family: inherit; /* кнопки не наследуют шрифт body — синхронизируем со счётчиками */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Внутри кнопки: убираем лишние отступы иконки рыбки, чтобы пробел после картинки был ровно один (как в "Рыбки: N") */
.rocket-btn .fish-icon {
  margin: 0;
}

.rocket-btn:hover {
  background: #4a1830;
}

.rocket-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Rocket launch animation */
.rocket-launch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: rocketFly 0.8s ease-out forwards;
  z-index: 10;
}

@keyframes rocketFly {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-60px);
  }
}

/* Floating text animations */
.floating-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #00ff00;
  font-weight: bold;
  font-size: 18px;
  animation: floatUp 1s ease-out forwards;
  z-index: 10;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px);
  }
}

/* Screen shake animation */
.screen-shake {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (min-width: 769px) {
  .cell img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55));
  }
  .cell[data-mood="2"] img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 3px rgba(255, 215, 0, 0.35));
  }
  .cell[data-mood="3"] img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
  }
  .cell[data-mood="4"] img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px rgba(255, 215, 0, 0.65));
  }
  .cell[data-mood="5"] img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
  }
  .cell[data-mood="6"] img.cat {
    filter: drop-shadow(5px 14px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
  }
}

/* ===== Супер-анимации котов ===== */

/* ПРОИЗВОДИТЕЛЬНОСТЬ: пульсация box-shadow — НЕ композитится GPU и заставляет
   перерисовывать слой каждый кадр. Раньше одновременно пульсировали выбранная
   клетка, все клетки-цели и т.д. Сейчас вместо бесконечной анимации
   используется статичный box-shadow (отрисовывается один раз), а «живость»
   даёт лёгкий композитный transition при наведении/касании. */
#board .cell.selected {
  box-shadow: 0 0 12px 4px rgba(255, 0, 0, 0.75);
  transition: box-shadow 0.18s ease;
}

/* Подсветка клетки-цели — статичная, без бесконечной анимации */
#board .cell.target {
  box-shadow: inset 0 0 8px 2px rgba(80, 200, 255, 0.85);
  transition: box-shadow 0.18s ease;
}

/* ===== Рыбка: показываем куда прибавилось + полёт (вау) ===== */
.boost-float {
  position: fixed;
  transform: translateX(-50%);
  color: #ffcc00;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 3000;
  animation: boostFloatUp 1.1s ease-out forwards;
}
@keyframes boostFloatUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(1); }
}
 .boost-glow {
   position: fixed;
   border-radius: 8px;
   box-sizing: border-box;
   pointer-events: none;
   z-index: 2999;
   animation: boostGlow 0.9s ease-out forwards;
 }
 @keyframes boostGlow {
   0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); background: rgba(255, 204, 0, 0); }
   30%  { box-shadow: 0 0 16px 5px rgba(255, 204, 0, 0.9); background: rgba(255, 204, 0, 0.28); }
   100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); background: rgba(255, 204, 0, 0); }
 }

 /* Красные зеркальные копии boost-glow/boost-float для штрафов.
    Та же структура, длительность и форма появления/исчезновения,
    отличаются только цветом (anti-kotopark). */
 .boost-glow-red {
   position: fixed;
   border-radius: 8px;
   box-sizing: border-box;
   pointer-events: none;
   z-index: 2999;
   animation: boostGlowRed 0.9s ease-out forwards;
 }
 @keyframes boostGlowRed {
   0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); background: rgba(255, 59, 59, 0); }
   30%  { box-shadow: 0 0 16px 5px rgba(255, 59, 59, 0.9); background: rgba(255, 59, 59, 0.28); }
   100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); background: rgba(255, 59, 59, 0); }
 }

 .boost-float-red {
   position: fixed;
   transform: translateX(-50%);
   color: #ff3333;
   font-weight: bold;
   font-size: 20px;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
   pointer-events: none;
   z-index: 3000;
   animation: boostFloatUpRed 1.1s ease-out forwards;
 }
 @keyframes boostFloatUpRed {
   0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
   20%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.15); }
   100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(1); }
 }
.board-area { position: relative; }
.rocket-fly-big {
  position: absolute;
  left: 12%;
  bottom: 8%;
  font-size: 44px;
  pointer-events: none;
  z-index: 20;
  animation: rocketFlyBig 1s ease-in forwards;
}
@keyframes rocketFlyBig {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(220px, -260px) rotate(35deg) scale(1.2); }
}
/* Иконка рыбки: картинка вместо эмодзи — удлинена по горизонтали в 1.5 раза (высота та же, что при ширине auto) */
.fish-icon {
  height: 1em;
  width: calc(1em * 130 / 73 * 1.5);
  vertical-align: middle;
  display: inline-block;
  margin: 0 0.1em;
}

/* ===== Коты: приземление после хода и превращение при смене настроения ===== */
/* Анимация «приземления» играет ровно в момент перемещения кота на новую
   клетку (cat-land, класс добавляет игра). Ускорена для мгновенного отклика
   и быстрого визуала движения; остальные анимации (mood-change, jump и пр.)
   не трогаем. */
@keyframes catLand {
  0%   { transform: translateY(-30%) scale(0.85); }
  100% { transform: translateY(0) scale(1); }
}
#board .cell .cat.cat-land {
  animation: catLand 0.12s ease-out !important;
  z-index: 6;
}
@keyframes moodChange {
  0%   { transform: scale(1) rotateY(0deg); filter: brightness(1); }
  40%  { transform: scale(1.35) rotateY(180deg); filter: brightness(1.6); }
  60%  { transform: scale(1.35) rotateY(180deg); }
  100% { transform: scale(1) rotateY(360deg); filter: brightness(1); }
}
#board .cell .cat.mood-change {
  animation: moodChange 0.8s ease-out !important;
  z-index: 6;
}

/* Размеры кнопки «Рыбки» больше НЕ дублируются здесь: во всех брейкпоинтах
   (xs/sm/md/lg/xl, портрет/ландшафт) их задают общие правила .stat-item из
   main.css / mobile.css — кнопка визуально идентична счётчикам. */

/* ============================================================
 * Надписи под котами: читаемость на всех темах.
 * Цвет ТЕКСТА зафиксирован тёмным (#222) и НЕ зависит от темы,
 * чтобы подписи были контрастными на светлом фоне-плашке.
 * ============================================================ */
:root {
  --cat-label-bg: rgba(255, 255, 255, 0.92);
  --cat-label-text: #222;                     /* фиксированный тёмный, не меняется по теме */
  --cat-label-border: rgba(0, 0, 0, 0.35);
  --cat-label-shadow: rgba(0, 0, 0, 0.45);
  --cat-label-negative: #8b0000;              /* тёмно-красный */
  --cat-label-neutral: #222;                  /* тёмный */
  --cat-label-positive: #1b5e20;              /* тёмно-зелёный */
  --cat-type-unknown-text: #ffffff;            /* белый */
  --cat-type-unknown-bg: #000000;              /* чёрная плашка для контраста */
  --cat-type-known-text: #ffffff;              /* белый */
  --cat-type-known-bg: #000000;                /* чёрная плашка для контраста */
}

.cell .label,
.cell .cat-type-label {
  display: inline-block;
  max-width: calc(var(--cell-w, 90px) - 8px);
  margin-top: 4px;
  padding: 3px 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1.7vw, 13px);
  font-weight: normal;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--cat-label-text);
  background: var(--cat-label-bg);
  border: 1px solid var(--cat-label-border);
  border-radius: 8px;
  text-shadow:
    0 1px 2px var(--cat-label-shadow),
    0 0 6px rgba(0, 0, 0, 0.25);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  /* Имя социотипа всегда в одну строку: шрифт при необходимости
     уменьшает JS (fitTypeLabel), но не переносим на две строки. */
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  position: relative;
  z-index: 7;
  pointer-events: none;
}

/* ===== Интерактивная подпись социотипа (как кнопка) ===== */
.cell .cat-type-label.cat-type-btn-label {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    box-shadow 0.25s ease,
    filter 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

/* Свечение при наведении (ПК) */
.cell .cat-type-label.cat-type-btn-label:hover {
  filter: brightness(1.15);
  transform: scale(1.06);
  border-color: var(--gilt-highlight, #f3d27a);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.22),
    0 0 10px rgba(255, 215, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Короткая анимация при касании (смартфоны) */
.cell .cat-type-label.cat-type-btn-label:active,
.cell .cat-type-label.cat-type-btn-label.cat-type-label--tap {
  transform: scale(0.92);
  filter: brightness(1.25);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(255, 215, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Цвета по настроению кота */
.cell[data-mood="-6"] .label,
.cell[data-mood="-5"] .label,
.cell[data-mood="-4"] .label,
.cell[data-mood="-3"] .label,
.cell[data-mood="-2"] .label,
.cell[data-mood="-1"] .label {
  color: var(--cat-label-negative);
}

.cell[data-mood="0"] .label {
  color: var(--cat-label-neutral);
}

.cell[data-mood="1"] .label,
.cell[data-mood="2"] .label,
.cell[data-mood="3"] .label,
.cell[data-mood="4"] .label,
.cell[data-mood="5"] .label,
.cell[data-mood="6"] .label {
  color: var(--cat-label-positive);
}

/* Социотип: неизвестный / известный.
   Белый текст + тёмная плашка + тёмная тень букв —
   подпись контрастна на любом фоне клетки и темы. Шрифт не меняется. */
.cell .cat-type-label.unknown {
  color: var(--cat-type-unknown-text);
  background: var(--cat-type-unknown-bg);
  border-color: rgba(255, 255, 255, 0.4);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
}

.cell .cat-type-label.known {
  color: var(--cat-type-known-text);
  background: var(--cat-type-known-bg);
  border-color: rgba(255, 255, 255, 0.4);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* Мобильная адаптация надписей */
@media (max-width: 575.98px) {
  .cell .label,
  .cell .cat-type-label {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 6px;
    max-width: calc(var(--cell-w, 90px) - 10px);
  }
}

/* Мобильная адаптация блока социотипа под котом (360–768px, брейкпоинты Bootstrap):
   имя социотипа всегда в ОДНУ строку — шрифт при необходимости дополнительно
   уменьшает JS (fitTypeLabel), перенос на две строки отключён. */
@media (max-width: 767.98px) {
  #board .cell img.cat {
    width: calc(var(--cat-size) * 0.8);
    height: calc(var(--cat-size) * 0.8);
  }

  .cell .cat-type-label {
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: clip;
    line-height: 1.05;
    padding: 1px 2px;
    margin-top: 2px;
    font-size: 8px;
    max-width: calc(var(--cell-w, 90px) - 4px);
  }
}