/* ===== Уровень 10 «Антикотопарк» — стили (план v4) ===== */

/* Тап-состояния кота */
/* Красная подсветка выбранного кота. ПРОИЗВОДИТЕЛЬНОСТЬ: раньше тут была
   бесконечная анимация box-shadow (catSelectedPulse 1s infinite), которая
   заставляет браузер перерисовывать слой каждый кадр. Заменено на статичную
   рамку + мягкое свечение: визуально выделение сохранилось, но GPU/CPU больше
   не нагружается постоянной перерисовкой. */
.cell.cat--selected {
  outline: 3px solid red;
  z-index: 5;
  box-shadow: 0 0 12px 4px rgba(255, 0, 0, 0.75);
  transition: box-shadow 0.18s ease;
}

.cell.cat--error {
  outline: 3px solid #ff3b3b;
  box-shadow: 0 0 14px rgba(255, 59, 59, 0.9);
  animation: catErrorFlash 0.4s ease;
}

@keyframes catErrorFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* HUD уровня 10 */
.level10-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  max-width: 760px;
  margin: 8px auto;
  width: 100%;
}

.level10-stats .stat-item {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* Выравниваем верх счётчиков с верхом игрового поля:
   #board имеет margin-top 12px (css/board.css), поэтому у колонки счётчиков
   тоже верхний отступ 12px, чтобы её верх совпадал с верхней границей поля. */
.stats.level10-stats {
  margin-top: 12px;
}

/* Меню социотипов (столбик справа/снизу) */
.socio-menu {
  max-width: 420px;
  margin: 10px auto;
  padding: 12px;
  background: linear-gradient(135deg, rgba(94, 22, 56, 0.9) 0%, rgba(42, 10, 20, 0.95) 100%);
  border: 1px solid rgba(212, 154, 60, 0.6);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 6px;
}

.socio-menu[hidden] {
  display: none;
}

.socio-menu-title {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: var(--text-color, #f4e6b0);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 154, 60, 0.35);
  margin-bottom: 4px;
}

.socio-type-btn {
  padding: 7px 10px;
  font-size: 13px;
  background: #310d1b;
  color: var(--button-text, #f4e6b0);
  border: 1px solid rgba(212, 154, 60, 0.45);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.socio-type-btn:hover {
  background: #4a1830;
  transform: translateY(-2px);
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 10px rgba(212, 154, 60, 0.5);
}

/* Всплывающий бонус */
.level10-bonus-float {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: rgba(212, 154, 60, 0.2);
  border: 1px solid var(--gilt, #d49a3c);
  color: var(--gilt-highlight, #f3d27a);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
  z-index: 999;
  animation: level10BonusFloat 1.4s ease forwards;
}

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

/* Оверлей результата (победа/импичмент) */
.level10-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.level10-result-card {
  background: linear-gradient(135deg, rgba(94, 22, 56, 0.95) 0%, rgba(42, 10, 20, 0.98) 100%);
  border: 2px solid var(--gilt, #d49a3c);
  border-radius: 18px;
  padding: 28px 34px;
  max-width: 420px;
  text-align: center;
  color: var(--text-color, #f4e6b0);
  box-shadow: 0 0 30px rgba(212, 154, 60, 0.35);
}

.level10-result-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  color: var(--gilt-highlight, #f3d27a);
}

.level10-result-card p {
  margin: 6px 0;
  font-size: 16px;
}

.level10-result-card .level10-result-extra {
  font-size: 14px;
  opacity: 0.9;
  background: rgba(212, 154, 60, 0.15);
  border-radius: 8px;
  padding: 8px;
  margin-top: 12px;
}

.level10-result-card .win-btn {
  margin: 10px 6px 0;
  padding: 10px 22px;
  font-size: 15px;
}

/* Мобильная адаптация: меню социотипов в одну колонку */
@media (max-width: 560px) {
  .socio-menu {
    grid-template-columns: 1fr;
  }
  .level10-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Заблокированные уровни в выборе уровней ===== */
.level-btn.locked {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}