/* ==========================================================================
   THE DURAK TABLE — the others round the top, the pack and the table in the
   middle, your hand at the bottom, big. Its own cloth (deep teal), so it is
   never mistaken for the poker felt; everything else is the same room.
   ========================================================================== */

:root {
  /* Сукно дурака — плоское и одним цветом: три остановки градиента стали
     одним токеном. */
  --dk-1: var(--felt-durak);
  --dk-2: var(--felt-durak);
  --dk-3: var(--felt-durak);
  /*
   * Ролей больше не три цвета. Было: атакующий оранжевым, отбивающийся
   * синим, берущий янтарным — пять цветов мимо палитры ради того, что и так
   * написано словом. Важно не «какая роль», а КОГО СЕЙЧАС ЖДУТ.
   */
  --att: var(--bg-elevated);
  --def: var(--bg-elevated);
  --hw: clamp(52px, 16.5vw, 70px);
}

.dk-felt { position: relative; flex: 1; min-height: 230px; }
.dk-cloth {
  position: absolute;
  border-radius: 50% 50% 34px 34px / 44% 44% 34px 34px;
  background: var(--dk-1);
  box-shadow: 0 0 0 1px var(--rim);
}

.top-meta .suit { font-size: var(--k-fs-secondary); }
/* Красная масть — тот же красный, что в ките; чёрная — обычный текст. */
.suit.sH, .suit.sD { color: var(--color-danger); }
.suit.sS, .suit.sC { color: var(--text-primary); }

/* ---------------------------------------------------------------- seats */

.dk-seat {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 92px;
  height: 86px;
  transform: translate(-50%, -50%) scale(var(--u, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  transition: opacity 0.25s;
}
.dk-seat.away { opacity: 0.45; }
.dk-seat .pod { position: relative; width: 44px; height: 44px; flex: none; }
/* Кого ждут — зелёное кольцо со светлым снаружи: на сукне дурака зелёный
   даёт 2.28, и один он не виден. Пульсации нет. */
.dk-seat.turn .av {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--on-felt-accent-line);
}
.dk-seat.def .av { border-color: var(--def); }
.dk-seat.att .av { border-color: var(--att); }
.dk-seat.fool .av { border-color: var(--gold); box-shadow: none; }
.dk-seat .info { max-width: 90px; }
.dk-seat .sub2 { font-size: var(--k-fs-caption); color: var(--muted); font-weight: 700; white-space: nowrap; }
.dk-backs { position: absolute; left: 30px; top: 2px; display: flex; pointer-events: none; }
/* Углы и тень сняты: на картинке в 15 пикселей шириной это след, а не форма. */
.dk-backs img { width: 15px; aspect-ratio: 200 / 280; }
.dk-backs img + img { margin-left: -12px; }
.dk-backs img.b0 { rotate: -10deg; } .dk-backs img.b1 { rotate: -5deg; } .dk-backs img.b3 { rotate: 5deg; }
.dk-backs img.b4 { rotate: 10deg; }
.dk-count {
  position: absolute;
  right: -12px;
  bottom: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--k-r-pill);
  background: var(--text-primary);
  color: var(--bg-main);
  font-size: var(--k-fs-caption);
  font-weight: 900;
  display: grid;
  place-items: center;
  z-index: 4;
}
.fool-mark { position: absolute; right: -8px; top: -8px; font-size: var(--k-fs-secondary); }
.dk-seat .plate { max-width: 118px; }
.plate.attacker { background: var(--att); color: var(--text); border-color: var(--on-felt-line); }
.plate.defender { background: var(--def); color: var(--text); border-color: var(--on-felt-line); }
.plate.taking { background: var(--panel-hi); color: var(--text); border-color: var(--on-felt-line); }
.plate.passed { color: var(--muted); }
.plate.thinking { color: var(--text); border-color: var(--on-felt-line); }
.plate.out { color: var(--muted); }
.plate.fool { background: var(--gold); color: var(--gold-ink); border-color: transparent; }

/* ---------------------------------------------------------- the middle */

.dk-mid {
  --dcw: calc(44px * var(--u, 1));
  --tcw: calc(50px * var(--u, 1));
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--u, 1));
  z-index: 2;
  pointer-events: none;
}
.dk-mid > * { pointer-events: auto; }
/* Колода и бита — у краёв стола, обе подрезаны краем экрана. О них нужно
   знать ровно две вещи: что они есть и сколько в них. Середина остаётся
   кону — единственному, по чему принимают решение. */
.dk-stock { display: contents; }
.dk-deck, .dk-discard { position: absolute; top: 46%; transform: translateY(-50%); z-index: 1; }
.dk-fan { position: absolute; inset: 0; }
.dk-deck { left: calc(var(--dcw) * -0.6); width: calc(var(--dcw) * 1.75); height: calc(var(--dcw) * 1.4); }
/* Козырь торчит из-под колоды тем углом, где напечатан ранг: знать надо не
   только масть — от ранга зависит, тратить ли на это козырную шестёрку. */
.dk-trump { position: absolute; left: auto; right: 0; top: 50%; transform: translateY(-50%); }
.dk-trump img { width: var(--dcw); rotate: 90deg; }
.dk-deck img.deck { position: absolute; left: 0; top: 0; width: var(--dcw); }
.dk-deck-n {
  position: absolute;
  right: calc(var(--dcw) * -0.1);
  bottom: calc(var(--dcw) * -0.24);
  font-size: calc(12px * var(--u, 1));
  font-weight: 900;
  padding: 2px 7px;
  border-radius: var(--k-r-pill);
  /* Поверх сукна: сплошная поверхность и контур, который на сукне виден. */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--on-felt-line);
  white-space: nowrap;
  z-index: 2;
}
.dk-discard { right: 0; width: calc(var(--dcw) * 0.6); height: calc(var(--dcw) * 1.5); }
/* Веер биты обрезан правым краем: сброс в дураке закрыт, в него не смотрят. */
.dk-discard .dk-fan { overflow: hidden; }
.dk-discard img { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: var(--dcw); rotate: 10deg; opacity: 0.85; }
.dk-discard img.d1 { rotate: -6deg; translate: -4px -50%; }
/* Подпись растёт влево от края экрана — вправо ей некуда. */
.dk-discard .dk-deck-n { left: auto; right: 2px; bottom: calc(var(--dcw) * -0.24); }
.dk-empty {
  font-size: calc(12px * var(--u, 1));
  color: var(--text-2);
  font-weight: 800;
  border: 1px dashed var(--on-felt-line);
  border-radius: var(--k-r-sm);
  width: var(--dcw);
  height: calc(var(--dcw) * 1.4);
  display: grid;
  place-items: center;
}

.dk-pairs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: calc(8px * var(--u, 1)) calc(12px * var(--u, 1));
  min-height: calc(var(--tcw) * 1.4 + 18px * var(--u, 1));
}
.dk-pairs[data-n="0"] { visibility: hidden; }
.dk-pair { position: relative; width: calc(var(--tcw) + 12px * var(--u, 1)); height: calc(var(--tcw) * 1.4 + 18px * var(--u, 1)); }
.dk-pair img { position: absolute; width: var(--tcw); }
.dk-pair img.att { left: 0; top: 0; }
.dk-pair img.def { left: calc(12px * var(--u, 1)); top: calc(18px * var(--u, 1)); rotate: 9deg; }
/* Карту можно покрыть — контур, а не золотое мигание. Keyframes best-glow
   больше не существует: сияние убрано вместе с ним. */
.dk-pair.target img.att { box-shadow: 0 0 0 2px var(--gold); }
.dk-line {
  font-size: max(12px, calc(14px * var(--u, 1)));
  font-weight: 800;
  color: var(--text);
  text-align: center;
  max-width: 92%;
  line-height: 1.25;
}

/* ------------------------------------------------------------- your hand */

.hero.dk-hero { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px 10px; min-height: 0; }
.dk-role {
  align-self: center;
  font-size: var(--k-fs-caption);
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--k-r-pill);
  background: var(--panel-hi);
  border: 1px solid var(--line-hi);
  color: var(--text-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* «Ваш ход» — светлый текст на зелёной плашке (4.98), без пульсации.
   Зелёной надписью в 12 пикселей это было бы 3.04. */
.dk-role.go { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.dk-role.go.def { background: var(--accent); color: var(--accent-ink); }
.dk-role.go.urgent { background: var(--danger); color: var(--text); }
.dk-role.fool { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
/* «Вы вышли» — светлым: зелёной надписью в 12 пикселей это 3.04. */
.dk-role.won { color: var(--text); }
.dk-hand {
  --ov: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: calc(var(--hw) * 1.4 + 16px);
  padding-top: 14px;
}
.dk-hand { flex-direction: column; align-items: stretch; row-gap: 6px; }
.dk-row { display: flex; justify-content: center; align-items: flex-end; }
.dk-empty-hand { align-self: center; color: var(--faint); font-size: var(--k-fs-secondary); }
.dk-hand.none {
  align-items: center;
  color: var(--faint);
  font-size: var(--k-fs-secondary);
  border: 1px dashed var(--line-hi);
  border-radius: var(--k-r-lg);
  min-height: calc(var(--hw) * 1.1);
  padding: 8px;
}
.dk-card { position: relative; flex: none; transition: transform 0.15s var(--ease); }
.dk-row .dk-card + .dk-card { margin-left: calc(var(--ov) * -1); }
.dk-card img.card { width: var(--hw); border-radius: var(--k-r-md); transition: filter 0.2s, translate 0.15s var(--ease), box-shadow 0.2s; }
.dk-card img.no { filter: brightness(0.5) saturate(0.6); }
.hero.turn .dk-card img.ok { box-shadow: 0 0 0 2px var(--accent); }
.hero .dk-card img.picked { translate: 0 -16px; box-shadow: 0 0 0 3px var(--gold); filter: none; }
.dk-card:active img { translate: 0 -6px; }

.dk-score { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 0 2px; }
.dk-sc {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 12px;
  border-radius: var(--k-r-lg);
  background: var(--panel-hi);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--k-fs-secondary);
}
.dk-sc.me { border-color: var(--accent); }
.dk-sc b { color: var(--gold); font-size: var(--k-fs-component); }
.dk-sc-cap { width: 100%; text-align: center; font-size: var(--k-fs-caption); color: var(--muted); font-weight: 700; }
.hero .dk-card img.ok { box-shadow: 0 0 0 2px var(--accent); }

.dk-fly { width: calc(var(--tcw, 44px) * 0.9); }

.seats-grid.six { grid-template-columns: repeat(3, 1fr); }
.rules p { margin: 0 0 10px; color: var(--text-2); line-height: 1.45; font-size: var(--k-fs-secondary); }

@media (max-height: 640px) {
  :root { --hw: clamp(46px, 14vw, 60px); }
}
@media (max-height: 560px) {
  :root { --hw: 42px; }
  .dk-role { font-size: var(--k-fs-caption); padding: 3px 9px; }
  .dk-hand { padding-top: 10px; }
}

/* ==========================================================================
   СТОЛ ДУРАКА НА КИТЕ — фаза 5 редизайна.

   ЗДЕСЬ ТОЛЬКО ЦВЕТ И ФОРМА. РАСКЛАДКУ НЕ ДВИГАТЬ.

   Это не осторожность вообще, а вывод из фазы 4: в покере поля зоны
   действий, поднятые с 10 до 16, дали двадцать три наложения — стол сжался,
   и плашки мест доехали до банка. Здесь на столе теснее: шесть пар карт,
   колода с козырем и до шести мест по периметру. Любая правка отступа,
   высоты или кегля тут обязана проходить через npm run layout, а лучше не
   делаться вовсе.

   Что меняется по киту (раздел 22): ни золота, ни свечения, ни градиентов.
   Роли за столом были расписаны тремя цветами — атакующий оранжевым,
   отбивающийся синим, берущий янтарным. Цветов в ките столько нет, и
   значения они не несли: важно не «какая роль», а КОГО СЕЙЧАС ЖДУТ. Поэтому
   ждущий — зелёным, остальные — нейтральной поверхностью. Так и в макете 11:
   у отбивающегося зелёная точка и зелёная плашка, у прочих ничего.
   ========================================================================== */

body[data-screen='durak'] {
  /* Сукно плоское, и то же, что на значке игры в хабе: одна игра — один цвет. */
  --dk-1: var(--felt-durak);
  --dk-2: var(--felt-durak);
  --dk-3: var(--felt-durak);
  --rim: var(--k-divider);
  --panel: var(--k-surface);
  --panel-hi: var(--k-elevated);
  --bg: var(--k-bg);
  --bg-2: var(--k-bg);
  --text: var(--k-text);
  --text-2: var(--k-text-2);
  --muted: var(--k-text-2);
  --faint: var(--k-disabled);
  --line: var(--k-divider);
  --line-hi: var(--k-divider);
  --accent: var(--k-green);
  --accent-ink: var(--k-on-green);
  --accent-glow: transparent;
  --gold: var(--k-text);
  --gold-ink: var(--k-on-green);
  --danger: var(--k-suit-red);
  /* Ролей больше не три цвета, а одно состояние: ждут или не ждут. */
  --att: var(--k-elevated);
  --def: var(--k-elevated);
  --gold-ink: var(--bg-main);
  background: var(--k-bg);
}

body[data-screen='durak'] .dk-cloth {
  background: var(--felt-durak);
  box-shadow: 0 0 0 1px var(--border-color);
}

/* Масти: красная — та же, что в ките, чёрная — обычный текст. */
body[data-screen='durak'] .suit.sH, body[data-screen='durak'] .suit.sD { color: var(--k-suit-red); }
body[data-screen='durak'] .suit.sS, body[data-screen='durak'] .suit.sC { color: var(--k-text); }

/* ----------------------------------------------------------------- места */

/* Кого ждут — зелёным кольцом, без сияния. Это и есть то, ради чего зелёный. */
/* Зелёное кольцо на сукне — 2.28, поэтому к нему светлое снаружи. */
body[data-screen='durak'] .dk-seat.turn .av { box-shadow: 0 0 0 2px var(--k-green), 0 0 0 3px var(--on-felt-accent-line); }
body[data-screen='durak'] .dk-seat.def .av,
body[data-screen='durak'] .dk-seat.att .av { border-color: var(--on-felt-line); }
/* Дурак — не ошибка и не успех: нейтрально, слово само всё говорит. */
body[data-screen='durak'] .dk-seat.fool .av { border-color: var(--on-felt-line); box-shadow: none; }

body[data-screen='durak'] .plate.attacker,
body[data-screen='durak'] .plate.defender,
body[data-screen='durak'] .plate.taking,
body[data-screen='durak'] .plate.fool {
  background: var(--k-elevated);
  color: var(--k-text);
  border-color: var(--on-felt-line);
}
/* «ДУМАЕТ» и «БИТО?» — того ждут прямо сейчас. Светлый контур: зелёная
   плашка на сукне иначе не видна (2.28). */
body[data-screen='durak'] .plate.thinking { background: var(--k-green); color: var(--k-on-green); border-color: var(--on-felt-accent-line); }
body[data-screen='durak'] .plate.passed { color: var(--k-text-2); }

/* ------------------------------------------------------- поле и колода */

/* Карта, которую можно покрыть, — зелёным контуром вместо золотого сияния. */
body[data-screen='durak'] .dk-pair.target img.att,
body[data-screen='durak'] .dk-pair.drop-hover img.att {
  box-shadow: 0 0 0 2px var(--k-green), 0 0 0 3px var(--on-felt-accent-line);
  animation: none;
}

/* --------------------------------------------------------------- рука */

body[data-screen='durak'] .dk-role { background: var(--k-elevated); color: var(--k-text); border-color: var(--border-color); }
/* Ваш ход — зелёным и без пульсации: подсказка, а не сирена. */
body[data-screen='durak'] .dk-role.go,
body[data-screen='durak'] .dk-role.go.def {
  background: var(--k-green);
  color: var(--k-on-green);
  border-color: transparent;
  animation: none;
}
body[data-screen='durak'] .dk-role.go.urgent { background: var(--k-suit-red); color: var(--k-text); }
body[data-screen='durak'] .dk-role.fool { background: var(--k-elevated); color: var(--k-text); border-color: var(--k-divider); }

body[data-screen='durak'] .hero.turn .dk-card img.ok { box-shadow: 0 0 0 2px var(--k-green); }
body[data-screen='durak'] .hero .dk-card img.ok { box-shadow: 0 0 0 2px var(--k-green); }
/* Выбранная карта — зелёным контуром, без золота и без сияния. */
body[data-screen='durak'] .hero .dk-card img.picked {
  box-shadow: 0 0 0 3px var(--k-green);
  filter: none;
}

/* Свечения нет. Ваш ход показывает рамка и зелёная подпись над рукой —
   этого достаточно, сияние вокруг половины экрана уже перебор. */
body[data-screen='durak'] .hero.turn { box-shadow: 0 0 0 1px var(--k-green); }

/* «Взять» — обычный ход, а не ошибка: красный тут был неправдой. Красный в
   дураке остаётся только за истекающим временем. */
body[data-screen='durak'] .panel .btn.danger {
  background: var(--k-elevated);
  color: var(--k-text);
  border: 1px solid var(--k-divider);
  box-shadow: none;
}
body[data-screen='durak'] .panel .btn.danger small { color: var(--k-text-2); }

/* Итоги: «дурак N» — это счётчик, а не знак числа. Зелёный в ките значит
   «успех, ход, верно», красный — «ошибка»; ноль поражений не успех, а
   дважды дурак не ошибка. В макете 17-durak-game-results проигравший
   подписан обычным текстом, без красного. Поэтому здесь работает вес, а не
   цвет: кто был дураком — основным текстом, остальные вторичным.
   В покере ± остаётся цветным: там цвет несёт знак числа, а не оценку. */
body[data-screen='durak'] .res-row .pl.up { color: var(--k-text-2); }
body[data-screen='durak'] .res-row .pl.down { color: var(--k-text); }

.dk-card.can-cover { touch-action: none; cursor: grab; }
.dk-card.drag-source img { opacity: 0; }
.dk-drag-card {
  position: fixed;
  z-index: 35;
  pointer-events: none;
  border-radius: var(--k-r-md);
}