/* ==========================================================================
   Game Center — Дурак (1v1 против бота, колода 36 карт)

   Каркас экрана — .game/.game__bg/.game__stage/.game__info/.game__panel/
   .controls/.bet/.spin-btn/.winbar из slot.css, карты — .pcard/.pcard-row
   и стол — .cardtable__felt/.cardtable__hand-label/.cardtable__message из
   cards.css (переиспользуются как есть, см. cards.js — то же зелёное сукно,
   что у Блэкджека/Видео-покера/Баккары). Здесь только то, чего в общих
   файлах ещё нет: верхняя строка козырь/колода/бот и центр стола.
   ========================================================================== */

/* ------------------------------ Верхняя строка --------------------------- */

.durak-top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 6vw, 28px);
  flex-wrap: wrap;
}

.durak-top__trump,
.durak-top__deck,
.durak-top__bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.durak-top__trump {
  /* Козырь — самая важная карта на столе, крупнее счётчиков рядом. */
  --card-w: clamp(44px, 13vw, 60px);
}
.durak-top__trump .pcard {
  width: var(--card-w);
  height: calc(var(--card-w) * 1.42);
}

.durak-top__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
}

.durak-top__deckcard,
.durak-top__botcard {
  width: clamp(30px, 8vw, 40px);
  height: calc(clamp(30px, 8vw, 40px) * 1.42);
  /* Раздача сюда не анимируется (счётчик просто меняется числом) — статичный
     жетон, без pcard-deal, чтобы не дёргался при каждом обновлении счёта. */
  animation: none;
}

.durak-top__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}

/* --------------------------------- Центр стола ---------------------------- */

.durak-center {
  /* ИСПРАВЛЕНО 2026-08-18: --card-w тут не был задан вообще (в отличие от
     .durak-top__trump/.pcard-row у руки, которые задают его каждый на
     себе) — карта атаки/защиты на столе (.durak-center__card .pcard)
     наследовала var(--card-w) НИОТКУДА, свойство было невалидным, и
     width/height/border-radius в .pcard (все через calc(var(--card-w)*..))
     схлопывались в мусор — карта на столе рендерилась микроскопической
     (жалоба: "какие-то пиксели"). min-height ниже уже ссылался на то же
     значение 72-108px текстом в calc(), но саму переменную никогда не
     объявляли — тот самый размер и добавлен сюда явно. */
  --card-w: clamp(72px, 24vw, 108px);
  min-height: calc(var(--card-w) * 1.42 * 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.durak-center__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.durak-center__card {
  display: flex;
}

.durak-center__empty {
  font-size: 12.5px;
  color: var(--dim);
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-sm);
  padding: 14px 22px;
}

/* --------------------------- Панель во время хода -------------------------- */

/* Пока раунд идёт, действия — клики по картам в руке, а не центральная
   .spin-btn (та занята только «Старт»/«Играть снова», см. showRules в
   durak.js) — здесь только подсказка или кнопка «Взять» (переиспользует
   .cardtable__action/--primary из cards.css, тот же язык, что «Хватит» в
   Блэкджеке). */
.durak-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding-bottom: 6px;
}

.durak-panel .cardtable__action--primary {
  min-width: 160px;
}

.durak-panel__hint {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* --------------------------- Подсказка по руке ---------------------------- */

/* Чисто визуальная подсказка (не блокирует ничего) — карта в руке, которой
   ТЕОРЕТИЧЕСКИ можно отбиться от текущей атаки, см. canBeat() в durak.js.
   Сервер всё равно проверяет ход сам; это просто ускоряет решение игрока. */
.pcard-slot--candidate .pcard {
  outline: 2px solid color-mix(in srgb, var(--gold) 75%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--gold) 65%, transparent);
}