/* Игровая: главный ивент, карточки «скоро», панель мини-игр */

#games-panel {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 4px;
}
#games-panel.active { display: flex; }

/* ==================== ГЛАВНЫЙ ИВЕНТ ==================== */
.game-hero {
  background: var(--bg-messages);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Шапка целиком по центру: название, строка состояния и пауза столбиком.
   Значок «Главный ивент» — это метка, а не содержимое, поэтому он в углу. */
.game-hero-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.game-title {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.game-sub {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.9;
  text-align: center;
}
/* Таймер — главное, на что смотрят в фазе: крупнее и акцентом */
#bunker-timer {
  display: inline-block;
  font-size: 15px;
  color: var(--text-secondary);
  vertical-align: middle;
  margin-left: 2px;
}
.game-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--btn-bg);
  color: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 8px;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
  flex-shrink: 0;
}
body.light-theme .game-badge { text-shadow: none; }

/* ==================== ИГРОВОЕ ПОЛЕ ==================== */
/* Поле в центре, места игроков по бокам. Реплики всплывают рядом
   с говорящим — со своей стороны поля, а не общей лентой. */
.game-board {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 320px;
}
.board-stage {
  background: var(--admin-room-bg);
  border: 1px solid var(--admin-room-border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.board-empty { text-align: center; }
.board-empty-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.board-empty-title {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 6px;
}
.board-empty-text {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.7;
}

.board-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.board-right { align-items: stretch; }

/* Место игрока */
.seat {
  background: var(--bg-online);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.seat.is-me { border-color: var(--text-secondary); }
/* Прозрачность вешаем на содержимое, а НЕ на само место: opacity красит
   весь потомок разом, и всплывающее досье выбывшего становилось
   нечитаемым — сквозь него просвечивала сцена. Отменить изнутри нельзя,
   прозрачность потомка перемножается с родительской. */
.seat.is-out > *:not(.seat-cards) { opacity: 0.45; }
.seat.is-out { border-color: var(--divider); }
.seat-avatar { font-size: 18px; flex-shrink: 0; line-height: 1; }
.seat-name {
  font-size: 8px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Всплывающая реплика: у левых игроков уходит вправо, у правых — влево */
.seat-bubble {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* Ширину задаём явно: реплика позиционируется относительно места игрока,
     а оно узкое — при автоширине текст сжимался в столбик по букве */
  width: 210px;
  background: var(--reaction-picker-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 8px;
  line-height: 1.7;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.board-left .seat-bubble { left: calc(100% + 8px); }
.board-right .seat-bubble { right: calc(100% + 8px); }
.seat-bubble.show { opacity: 1; visibility: visible; }

/* ==================== КАРТЫ ==================== */
.game-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 9px;
}
.cards-toggle {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 8px;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  margin: 0;
}
.cards-toggle:hover { background: var(--online-user-hover); }

.game-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* карты игрока стоят по центру, а не растягиваются на всю ширину */
  justify-content: center;
}
.game-cards.collapsed { display: none; }
.game-card {
  /* не растягиваем: иначе пять карт разъезжаются от края до края */
  flex: 0 1 150px;
  min-width: 110px;
  max-width: 170px;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-align: center;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--text-secondary); }
.game-card.picked {
  border-color: var(--text-secondary);
  background: var(--online-user-hover);
}
.card-kind { font-size: 7px; color: var(--text-muted); margin-bottom: 5px; }
.card-icon { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.card-value { font-size: 8px; color: var(--text-primary); line-height: 1.6; }

.game-actions { display: flex; justify-content: center; }
.game-start {
  background: var(--btn-bg);
  color: #fff;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 9px 26px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px var(--shadow-color);
  margin: 0;
}
.game-start:hover { background: var(--btn-hover); }

/* ==================== КАРТОЧКИ «СКОРО» ==================== */
.game-soon-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.game-soon {
  background: var(--bg-messages);
  border: 1px dashed var(--border-light);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  position: relative;
  opacity: 0.75;
}
.soon-icon { font-size: 30px; line-height: 1; margin-bottom: 9px; }
.soon-name { color: var(--text-secondary); font-size: 11px; line-height: 1.5; margin-bottom: 7px; }
.soon-text { color: var(--text-muted); font-size: 8px; line-height: 1.7; }
.soon-badge {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 7px;
  color: var(--text-muted);
}

/* ==================== МИНИ-ИГРЫ ==================== */
.mini-games {
  background: var(--bg-online);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
}
.mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mini-head h4 { margin: 0; color: var(--text-secondary); font-size: 11px; }
.mini-note { color: var(--text-muted); font-size: 7px; }
/* Гибкая строка, а не сетка: auto-fill оставлял пустую колонку в конце,
   и карточки выходили разной ширины. Здесь каждая строка заполняется целиком */
.mini-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mini-card {
  flex: 1 1 130px;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.mini-card:hover { transform: translateY(-3px); border-color: var(--text-secondary); }
.mini-card.locked { opacity: 0.5; cursor: default; }
.mini-card.locked:hover { transform: none; border-color: var(--border-light); }
.mini-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.mini-name { color: var(--text-primary); font-size: 9px; line-height: 1.5; margin-bottom: 6px; }
.mini-best { color: var(--text-muted); font-size: 7px; }

@media (max-width: 768px) {
  /* На узком экране места игроков уходят под поле, чтобы оно не сжималось */
  .game-board { grid-template-columns: 1fr; }
  .board-side { flex-direction: row; flex-wrap: wrap; }
  .seat { flex: 1 1 130px; }
  .seat-bubble {
    position: static;
    transform: none;
    width: auto;
    margin-top: 6px;
    display: none;
  }
  .seat-bubble.show { display: block; }
  .game-soon-row { grid-template-columns: 1fr; }
}

/* ==================== ПАУЗА ==================== */
/* Кнопка стоит посередине верхней строки блока */
.game-hero-head { position: relative; }
.hero-left { min-width: 0; width: 100%; text-align: center; }
.bunker-pause {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: #fff;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 5px 16px 7px;
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
  box-shadow: 0 0 10px var(--shadow-color);
  text-shadow: 1px 1px 0 #000;
  margin: 0;
  white-space: nowrap;
  z-index: 2;
}
body.light-theme .bunker-pause { text-shadow: none; }
.bunker-pause:hover { background: var(--btn-hover); }
.bunker-pause.is-paused { background: #4caf50; border-color: #4caf50; }

/* ==================== МЕСТА ==================== */
.seat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.seat-note { font-size: 6px; color: var(--text-muted); line-height: 1.4; }
.seat.is-bot { border-style: dashed; }
.seat.is-waiting > *:not(.seat-cards) { opacity: 0.65; }

/* ==================== СТОЛ ==================== */
.table-open { width: 100%; text-align: center; }
.table-title { color: var(--text-secondary); font-size: 9px; margin-bottom: 10px; }
.table-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.table-card {
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 9px;
  min-width: 92px;
}
.board-empty .game-start { margin-top: 12px; }

/* ==================== КАРТЫ ==================== */
.card-state { font-size: 6px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }
.game-card.card-locked { cursor: default; }
.game-card.card-locked:hover { transform: none; border-color: var(--border-light); }
.cards-hint {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.8;
  padding: 10px 2px;
}
.game-actions { gap: 10px; flex-wrap: wrap; }
.game-start.ghost {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}
.game-start.ghost:hover { background: var(--online-user-hover); }

@media (max-width: 768px) {
  /* на узком экране метка уходит из угла в поток, иначе налезает на заголовок */
  .game-badge { position: static; order: -1; }
}

/* ==================== ТЕМП ПАРТИИ ==================== */
.speed-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 8px;
}

/* ==================== ГОЛОСОВАНИЕ ==================== */
.vote-card {
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px 12px;
  min-width: 92px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.vote-card:hover { transform: translateY(-3px); border-color: var(--text-secondary); }
.vote-card.picked {
  border-color: var(--text-secondary);
  background: var(--online-user-hover);
}
/* галочка у своего голоса — чтобы было видно, за кого уже отдан */
.vote-card.picked::after {
  content: '✓';
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-secondary);
}
.seat-votes {
  font-size: 7px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ==================== ОКНО МИНИ-ИГР ==================== */
/* Одно окно на все игры: меняется только содержимое mini-stage */
#mini-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 4000;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  overflow-y: auto;
}
#mini-overlay.active { display: flex; }

#mini-modal {
  /* непрозрачный фон: --bg-messages полупрозрачный и страница просвечивает */
  background: var(--reaction-picker-bg);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 0 40px var(--shadow-color);
  padding: 16px;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.mini-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
#mini-modal h2 {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.mini-close {
  background: var(--btn-bg);
  color: #fff;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 8px;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  flex-shrink: 0;
}
.mini-close:hover { background: var(--btn-hover); }

.mini-status {
  color: var(--text-primary);
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
  min-height: 14px;
}
#mini-stage { display: flex; justify-content: center; width: 100%; }
.mini-canvas {
  display: block;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}

.mini-tip {
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.8;
  text-align: center;
}
.mini-result {
  display: none;
  color: var(--text-secondary);
  background: var(--online-user-hover);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
}
.mini-result.show { display: block; }

/* ==================== ТАБЛИЦА ЛИДЕРОВ ==================== */
.mini-board {
  width: 100%;
  border-top: 1px solid var(--divider);
  padding-top: 10px;
}
.mini-board-title { color: var(--text-secondary); font-size: 9px; margin-bottom: 8px; text-align: center; }
.mini-board-empty { color: var(--text-muted); font-size: 8px; text-align: center; line-height: 1.8; }
.mini-board-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: 7px;
}
.mini-board-row.me { background: var(--online-user-hover); color: var(--text-secondary); }
.mini-board-row .place { color: var(--text-muted); }
.mini-board-row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-board-row .val { color: var(--text-secondary); }

/* ==================== НАЙДИ ПАРУ ==================== */
/* Размер сетки и кегль ставит скрипт: поля растут от 4×4 до 12×12 */
.memo-grid { display: grid; gap: 6px; width: 100%; margin: 0 auto; }
.memo-card {
  aspect-ratio: 1/1;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  perspective: 600px;
}
/* карта именно переворачивается, а не меняет текст */
.memo-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}
.memo-card.open .memo-inner { transform: rotateY(180deg); }
.memo-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  line-height: 1;
}
.memo-back { background: var(--input-bg); color: var(--text-muted); }
.memo-front { background: var(--online-user-hover); transform: rotateY(180deg); }
.memo-card.found .memo-front { border-color: var(--text-secondary); }
.memo-card.found { cursor: default; }
.memo-card:not(.open):hover .memo-back { background: var(--online-user-hover); }

/* ==================== ТРИ В РЯД ==================== */
.m3-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

/* Пирог наполняется по кругу — видно, сколько начинки уже собрано */
.pie-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.pie {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  background: conic-gradient(var(--btn-bg) var(--p, 0%), var(--input-bg) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: background 0.3s ease;
}
.pie-side { flex: 1; min-width: 0; }
.pie-title { font-size: 8px; color: var(--text-muted); margin-bottom: 6px; }
.pie-needs { display: flex; gap: 6px; flex-wrap: wrap; }
.need {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 7px;
}
.need b { font-size: 13px; font-weight: normal; line-height: 1; }
.need.done { border-color: #4caf50; color: #4caf50; }

.m3-grid {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 360px;
}
.m3-cell {
  aspect-ratio: 1/1;
  background: var(--input-bg);
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.m3-cell:hover { background: var(--online-user-hover); }
.m3-cell.picked { border-color: var(--text-secondary); background: var(--online-user-hover); }
/* собранные ягоды схлопываются, а не пропадают мгновенно */
.m3-cell.pop {
  transform: scale(0.15);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
/* если игрок завис — поле само подрагивает нужной парой */
.m3-cell.hint { animation: m3-hint 0.7s ease-in-out infinite; }
@keyframes m3-hint {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-2px, 1px) rotate(-5deg); }
  75%      { transform: translate(2px, -1px) rotate(5deg); }
}

/* ==================== СУДОКУ ==================== */
.sud-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sud-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  width: 100%;
  max-width: 340px;
  background: var(--divider);
  border: 2px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}
.sud-cell {
  aspect-ratio: 1/1;
  background: var(--input-bg);
  border: none;
  /* глобальный стиль кнопок скругляет углы — в сетке это разваливает поле */
  border-radius: 0;
  font-family: inherit;
  font-size: 11px;
  /* свои цифры пишем акцентом, подсказки — обычным текстом: как в бумажном судоку */
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}
/* толстые линии между блоками 3×3 рисуем тенью: рамка ломала сетку */
.sud-cell.edge-r { box-shadow: inset -2px 0 0 var(--border-light); }
.sud-cell.edge-b { box-shadow: inset 0 -2px 0 var(--border-light); }
.sud-cell.edge-r.edge-b { box-shadow: inset -2px 0 0 var(--border-light), inset 0 -2px 0 var(--border-light); }
.sud-cell.given { color: var(--text-primary); font-weight: bold; cursor: default; }
.sud-cell.picked { outline: 2px solid var(--text-secondary); outline-offset: -2px; }
.sud-cell.bad { color: #e05555; }
.sud-pad { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.sud-key {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.sud-key:hover { background: var(--online-user-hover); }

/* ==================== САПЁР ==================== */
.min-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.min-bar { display: flex; justify-content: center; }
.min-hint {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 8px;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
}
.min-hint:hover:not(:disabled) { background: var(--online-user-hover); }
.min-hint:disabled { opacity: 0.4; cursor: default; }

/* размер поля ставит скрипт: раунды идут от 9×9 и растут */
.min-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 auto;
}
.min-cell {
  aspect-ratio: 1/1;
  background: var(--btn-bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.min-cell:hover { background: var(--btn-hover); }
.min-cell.open {
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: default;
}
.min-cell.open:hover { background: var(--input-bg); }
.min-cell.n1 { color: #5b8dd9; }
.min-cell.n2 { color: #4caf50; }
.min-cell.n3 { color: #e05555; }
.min-cell.n4 { color: #7e57c2; }
.min-cell.n5 { color: #d98b3a; }
.min-cell.n6 { color: #26a69a; }
.min-cell.n7 { color: var(--text-primary); }
.min-cell.n8 { color: var(--text-muted); }

@media (max-width: 768px) {
  #mini-modal { padding: 12px; }
  .sud-key { width: 26px; height: 26px; font-size: 9px; }
}

/* ==================== ОТМЕТКИ У МЕСТ ==================== */
.seat-mark { font-size: 10px; line-height: 1; flex-shrink: 0; }
/* чей сейчас ход — видно без вчитывания в подпись */
/* Чей ход — видно издалека. Раньше активное место и своё красились одним
   цветом --text-secondary и различались только внутренней тенью в 1 пиксель,
   поэтому очередь и не читалась. */
.seat.is-turn {
  border-color: var(--ход-цвет);
  box-shadow: 0 0 0 2px var(--ход-тень), 0 0 16px var(--ход-тень);
  animation: ход-пульс 1.8s ease-in-out infinite;
}
.seat.is-turn .seat-name { color: var(--ход-цвет); }
.seat.is-turn .seat-mark { font-size: 13px; }
@keyframes ход-пульс {
  0%, 100% { box-shadow: 0 0 0 2px var(--ход-тень), 0 0 10px var(--ход-тень); }
  50%      { box-shadow: 0 0 0 3px var(--ход-цвет), 0 0 22px var(--ход-тень); }
}

/* Строка «ходит N» на столе и его карта в общей выкладке */
.ход-строка {
  font-size: 13px;
  color: var(--ход-цвет);
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.4;
}
.ход-строка b { font-size: 15px; }
.table-card.ход {
  border-color: var(--ход-цвет);
  box-shadow: 0 0 0 1px var(--ход-тень), 0 0 12px var(--ход-тень);
}
.seat.is-accused { border-color: #e05555; }
.table-card.accused { border-color: #e05555; }

/* ==================== РАЗБОР ПОСЛЕ ПАРТИИ ==================== */
.showdown-in, .showdown-out {
  display: inline-block;
  margin-left: 8px;
  font-size: 7px;
  border-radius: 7px;
  padding: 3px 8px;
  vertical-align: middle;
}
.showdown-in { color: #4caf50; border: 1px solid #4caf50; }
.showdown-out { color: #e05555; border: 1px solid #e05555; }

/* темп не выбирают — рядом со значением поясняем, откуда он взялся */
.speed-why { color: var(--text-muted); font-size: 7px; }
.speed-pick b { color: var(--text-secondary); font-weight: normal; }

/* история шаблона на вводном экране */
.intro-story {
  color: var(--text-primary);
  font-size: 8px;
  line-height: 2;
  margin-bottom: 8px;
  text-align: center;
}
.intro-bunker {
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.9;
  margin-bottom: 8px;
  text-align: center;
}
.intro-bunker b { color: var(--text-secondary); font-weight: normal; }

/* голосовать против себя можно — своя карточка помечена, но кликабельна */
.vote-card.self { border-style: dashed; }

/* ==================== ИТОГ: ШАНС ==================== */
/* Показываем только итоговый процент. Ценности карт — техническая величина
   и до клиента вообще не доезжают. */
.итог-шанс { margin-top: 14px; }
.шанс-число { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.шанс-число.удача { color: #4caf50; }
.шанс-число.провал { color: #e05555; }
.шанс-шкала {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 8px;
  margin: 0 auto;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  overflow: hidden;
}
.шанс-шкала span {
  display: block;
  height: 100%;
  background: #e05555;
}
.шанс-шкала.удача span { background: #4caf50; }
/* засечка порога: видно, дотянули или нет */
.шанс-порог {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--text-secondary);
}
.шанс-подпись { color: var(--text-muted); font-size: 7px; margin-top: 6px; }

/* ==================== ДОСЬЕ ИГРОКА ==================== */
/* Карты прошлых кругов не занимают стол: они висят на своём игроке
   и всплывают, когда на него наводят мышью */
.seat { cursor: default; }
.seat-cards {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 262px;
  background: var(--reaction-picker-bg);
  border: 1px solid var(--text-secondary);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.board-left .seat-cards { left: calc(100% + 8px); }
.board-right .seat-cards { right: calc(100% + 8px); }
.seat:hover .seat-cards { opacity: 1; visibility: visible; }
.seat-cards-head {
  font-size: 7px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.seat-card-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: baseline;
  gap: 6px;
  font-size: 7px;
  color: var(--text-primary);
}
.seat-card-icon { font-size: 10px; line-height: 1; }
.seat-card-kind { color: var(--text-muted); }
.seat-card-value { text-align: right; }
.seat-card-round {
  color: var(--text-muted);
  border: 1px solid var(--divider);
  border-radius: 5px;
  padding: 0 4px;
}

@media (max-width: 768px) {
  /* на узком экране всплывашка не влезает сбоку — показываем под местом */
  .seat-cards {
    position: static;
    transform: none;
    width: auto;
    margin-top: 6px;
    display: none;
    box-shadow: none;
  }
  .seat:hover .seat-cards { display: flex; }
}

/* ==================== КАРТЫ ТЕКУЩЕГО КРУГА ==================== */
/* Держатся на столе и во время голосования: иначе последняя брошенная
   карта исчезает раньше, чем её успевают прочитать */
.круг-карты {
  margin-top: 12px;
  border-top: 1px solid var(--divider);
  padding-top: 10px;
}
.круг-карты-титул {
  font-size: 7px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ==================== ПОЛОСА ИЗГНАННЫХ ==================== */
.dead-panel { display: none; }
.dead-panel.active {
  display: block;
  margin-top: 12px;
  background: var(--bg-online);
  border: 1px dashed var(--divider);
  border-radius: 10px;
  padding: 9px 11px;
}
.dead-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 8px;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.dead-note { color: var(--text-muted); font-size: 7px; }
.dead-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dead-chip {
  font-size: 7px;
  color: var(--text-muted);
  border: 1px solid var(--divider);
  border-radius: 7px;
  padding: 3px 8px;
  opacity: 0.75;
}
.dead-chip.me { color: var(--text-secondary); border-color: var(--text-secondary); opacity: 1; }
.dead-vote { margin-top: 9px; text-align: center; }
.dead-vote .dead-note { display: block; margin-bottom: 7px; }

/* закрытые карты в досье видно, но без значения */
.seat-card-row.закрыта { opacity: 0.55; }
.seat-card-row.закрыта .seat-card-value { font-style: italic; }

/* ==================== ВИЗИТКА В ДОСЬЕ ==================== */
/* В ней сразу пять деталей — мелкой строкой они не читаются,
   поэтому идёт крупной карточкой, а прочие карты списком под ней */
.визитка {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--online-user-hover);
  border: 1px solid var(--text-secondary);
  border-radius: 9px;
  padding: 8px 9px;
  margin-bottom: 6px;
}
.визитка.закрыта {
  background: var(--input-bg);
  border-color: var(--divider);
  opacity: 0.6;
}
.визитка-верх { display: flex; align-items: center; gap: 7px; }
.визитка-значок { font-size: 20px; line-height: 1; }
.визитка-имя {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}
.визитка-строка {
  font-size: 8px;
  color: var(--text-primary);
  line-height: 1.5;
}
.визитка-строка b { color: var(--text-secondary); font-weight: normal; font-size: 10px; }

/* ==================== DOOM ==================== */
/* Эмулятор сам рисует канвас по размеру контейнера, нам надо только дать
   ему прямоугольник 4:3 и не дать вылезти за окно */
.doom-frame {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  background: #000;
  border: 2px solid var(--divider);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.doom-frame { display: block; border: 2px solid var(--divider); }

/* ==================== ВРЕЗКА «ЧТО ДАЛЬШЕ» ==================== */
/* Пять секунд между фазами: стол читает, что будет, и не гадает,
   почему экран замер */
.объявление {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px;
  text-align: center;
}
.объявление-что {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.объявление-когда { font-size: 11px; color: var(--text-primary); }
.объявление-когда b { font-size: 20px; color: var(--text-secondary); }
.объявление-зачем {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 340px;
}

/* Свои карты, которые прямо сейчас можно открыть: когда ход ваш — видно сразу */
.game-card.можно-открыть {
  border-color: var(--ход-цвет);
  box-shadow: 0 0 0 1px var(--ход-тень), 0 0 14px var(--ход-тень);
  animation: ход-пульс 1.8s ease-in-out infinite;
}
.game-card.можно-открыть:hover {
  border-color: var(--ход-цвет);
  animation: none;
  box-shadow: 0 0 0 2px var(--ход-цвет), 0 0 20px var(--ход-тень);
}