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

   Правила живут здесь, а не в style.css: там общая основа, на которой стоят
   ещё дурак и UNOQ, и переписывать её ради одной игры нельзя. Всё ниже
   ограничено `body[data-screen='poker']` — у экранов нет общего корня, и
   признак на body единственный способ отличить правило для покера от
   правила для всех.

   Что меняется по киту (раздел 22): нет золота, нет свечения, нет
   градиентов. Красный — только ошибка, поэтому FOLD перестал быть красным:
   сбросить карты не ошибка. Зелёный — только смысл, поэтому он остался за
   одним действием: тем, которое продолжает раздачу (CHECK или CALL).

   ПРАВИЛО СУКНА. Зелёный #137A43 к сукну #103D32 даёт 2.24, а разделитель
   #23343B — 1.07: ни заливка, ни контур на сукне сами по себе не видны.
   Поэтому всё, что лежит поверх сукна, получает контур из --on-felt-line
   (6.13) или, если под ним зелёная заливка, --on-felt-accent-line (11.18 к
   сукну и 4.98 к зелёному). Цифры считает npm run contrast.
   ========================================================================== */

body[data-screen='poker'] {
  --felt-1: var(--k-felt-poker);
  --felt-2: var(--k-felt-poker);
  --felt-3: var(--k-felt-poker);
  --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);
  /* Золота нет. Там, где оно было ролью «важное, но не главное», теперь
     обычная вторичная поверхность. */
  /* Светлая плашка с тёмной надписью — 17.46. Текст на зелёном стал светлым,
     и брать его в надпись на светлой плашке больше нельзя. */
  --gold: var(--k-text);
  --gold-ink: var(--bg-main);
  /* Красный один на весь кит. Минус в итогах — не ошибка, но и не повод
     заводить второй оттенок красного. */
  --danger: var(--k-suit-red);
  --allin: var(--k-suit-red);
  background: var(--k-bg);
}

/*
 * Сукно плоское: ни градиента, ни свечения по ободу.
 *
 * Селектор был .cloth — класса, которого на этом экране нет: овал покера
 * рисует .felt (miniapp/games/poker.js), а .dk-cloth это дурак. Правило не
 * применялось ни к чему, и сукно всё это время оставалось градиентным с
 * тенью в сорок пикселей. Теперь плоское и сукно, и правило.
 */
body[data-screen='poker'] .felt {
  background: var(--table-felt);
  box-shadow: 0 0 0 1px var(--border-color);
}

/* ------------------------------------------------------------ шапка */

body[data-screen='poker'] .stage { color: var(--k-text-2); background: var(--k-surface); border-color: var(--k-divider); }
body[data-screen='poker'] .top-meta { color: var(--k-text-2); }

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

body[data-screen='poker'] .plate {
  background: var(--k-elevated);
  color: var(--k-text);
  /* Контур на сукне: --k-divider здесь даёт 1.07, то есть ничего. */
  border-color: var(--on-felt-line);
}
/* Ставка, блайнды, «олл-ин» — это состояния, а не праздник: одна
   поверхность, разный текст. Пульсации у олл-ина больше нет. */
body[data-screen='poker'] .plate.bet,
body[data-screen='poker'] .plate.raise,
body[data-screen='poker'] .plate.call,
body[data-screen='poker'] .plate.sb,
body[data-screen='poker'] .plate.bb,
body[data-screen='poker'] .plate.hand {
  background: var(--k-elevated);
  color: var(--k-text);
  border-color: var(--on-felt-line);
}
body[data-screen='poker'] .plate.allin {
  background: var(--k-elevated);
  color: var(--k-text);
  border-color: var(--on-felt-line);
  animation: none;
}
/*
 * Чей ход — зелёным: это и есть состояние, ради которого зелёный существует.
 * Светлая надпись (4.98) и светлый контур, иначе зелёная плашка растворяется
 * в зелёном сукне (2.24).
 */
body[data-screen='poker'] .plate.turn,
body[data-screen='poker'] .plate.win {
  background: var(--k-green);
  color: var(--k-on-green);
  border-color: var(--on-felt-accent-line);
  box-shadow: none;
}

/* ------------------------------------------------------------ центр */

body[data-screen='poker'] .pot { background: var(--k-surface); box-shadow: none; }
body[data-screen='poker'] .pot small { color: var(--k-text-2); }
body[data-screen='poker'] .result-line { color: var(--k-text); }

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

body[data-screen='poker'] .hero { background: var(--k-surface); }
body[data-screen='poker'] .hero.turn { box-shadow: 0 0 0 1px var(--k-green); }
body[data-screen='poker'] .your-turn { background: var(--k-green); color: var(--k-on-green); }
body[data-screen='poker'] .hero-stack { font-variant-numeric: tabular-nums; }
/* Стек вырос: 24 пикселя полужирным — крупный текст, ему хватает 3:1 (3.04). */
body[data-screen='poker'] .hero-stack.up { color: var(--k-green); text-shadow: none; }

/* -------------------------------------------------------- зона действий */

/*
 * ГЕОМЕТРИЯ ЭТОГО ЭКРАНА НЕ ТРОГАЕТСЯ. Высота зоны действий вычитается из
 * сукна, сукно сжимается, и плашки мест доезжают до банка: npm run layout
 * поймал это на 23 раскладках. Отсюда правило — здесь только цвет и форма,
 * а отступы и высоты остаются теми, под которые стол уже выверен.
 */
body[data-screen='poker'] .panel {
  background: var(--k-bg);
  border-top: 1px solid var(--k-divider);
}
body[data-screen='poker'] .panel .btn {
  border-radius: var(--k-r-md);
  letter-spacing: normal;
}
/* Вторичные: сбросить и повысить. Красный тут был неправдой — сбросить
   карты не ошибка, а обычный ход. */
body[data-screen='poker'] .panel .btn.danger,
body[data-screen='poker'] .panel .btn.gold {
  background: var(--k-elevated);
  color: var(--k-text);
  border: 1px solid var(--k-divider);
  box-shadow: none;
}
/* Зелёная одна — та, что продолжает раздачу. */
body[data-screen='poker'] .panel .btn.primary {
  background: var(--k-green);
  color: var(--k-on-green);
  border: 0;
  box-shadow: none;
}
body[data-screen='poker'] .panel.note { color: var(--k-text-2); }
body[data-screen='poker'] .panel.note b { color: var(--k-text); }

/* ------------------------------------------------------- шторка рейза */

/* Ряд «− сумма +» — степпер кита: ползунком в ровное число попадаешь через
   раз, а 240 набирается руками за секунду. */
body[data-screen='poker'] .amount-row {
  display: grid;
  grid-template-columns: var(--k-control-h) 1fr var(--k-control-h);
  align-items: center;
  gap: var(--k-s8);
  margin-top: var(--k-s12);
}
body[data-screen='poker'] .amount-step {
  /* Удержание повторяет шаг: без двойного тапа-зума, выделения и системного меню */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-md);
  background: var(--k-elevated);
  color: var(--k-text);
}
body[data-screen='poker'] .amount-input {
  width: 100%;
  min-height: var(--k-control-h);
  padding: 0 var(--k-s12);
  text-align: center;
  background: var(--k-elevated);
  color: var(--k-text);
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-md);
  font: var(--k-w-semibold) var(--k-fs-num)/var(--k-lh-num) var(--k-font);
  font-variant-numeric: tabular-nums;
}
body[data-screen='poker'] .amount-input:focus { outline: none; border-color: var(--k-green); }
/* Красный — только ошибка. Здесь как раз она. */
body[data-screen='poker'] .amount-row.bad .amount-input { border-color: var(--k-suit-red); }
body[data-screen='poker'] .amount-err {
  min-height: var(--k-lh-caption);
  margin-top: var(--k-s4);
  text-align: center;
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-suit-red);
}
body[data-screen='poker'] .amount { display: none; }
body[data-screen='poker'] .amount-sub {
  text-align: center;
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text-2);
}
body[data-screen='poker'] .size-btn {
  min-height: var(--k-control-h);
  border-radius: var(--k-r-md);
  background: var(--k-elevated);
  color: var(--k-text);
  border: 1px solid var(--k-divider);
  font: var(--k-w-semibold) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  box-shadow: none;
}
body[data-screen='poker'] .size-btn.gold { background: var(--k-elevated); color: var(--k-text); }
/* «Точно весь стек?» — единственное место, где красный уместен: это
   предупреждение о необратимом. */
body[data-screen='poker'] .size-btn.danger { background: var(--k-suit-red); color: var(--k-text); border-color: transparent; }
/* Выключённое подтверждение видно, но не нажимается: экран не превращается
   в ошибку, поправить можно одним движением. */
body[data-screen='poker'] .sheet .btn:disabled {
  background: var(--k-elevated);
  color: var(--k-disabled);
  box-shadow: none;
}
/* Высоту шторки задаёт style.css с поправкой на клавиатуру — здесь её
   переопределять нечем и незачем. */
body[data-screen='poker'] .sheet-confirm {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-top: var(--k-s8);
  background: var(--k-bg);
}

/* ------------------------------------------------------------ вскрытие */

/*
 * Победителя показывает ЗЕЛЁНЫЙ — он для успеха и существует. Золота,
 * свечения и градиентов нет: кит запрещает их списком, и на столе их уже не
 * было, а на вскрытии они оставались.
 *
 * Размеры и отступы те же, что были: геометрия этого экрана выверена, и
 * двадцать три наложения тому причиной.
 */
/* Зелёный контур на сукне не виден (2.24) — поэтому к нему светлый. */
body[data-screen='poker'] #app .card.best {
  box-shadow: 0 0 0 2px var(--k-green), 0 0 0 3px var(--on-felt-accent-line);
  animation: none;
}
body[data-screen='poker'] .seat.win .av {
  border-color: var(--k-green);
  box-shadow: 0 0 0 2px var(--k-green), 0 0 0 3px var(--on-felt-accent-line);
}
body[data-screen='poker'] .seat.win .info { border-color: var(--on-felt-accent-line); box-shadow: none; }
/* Выигрыш — обычное число, а не плашка с сиянием. Зелёной надписью в 16
   пикселей это 3.04, поэтому надпись светлая: зелёный уже сказал своё
   кольцом вокруг победителя. Поля и скругление прежние — иначе поедет
   высота руки. */
body[data-screen='poker'] .gain {
  background: none;
  box-shadow: none;
  color: var(--k-text);
}

/* «не показал» — сноска, а не результат: вторичным текстом и без нажима. */
body[data-screen='poker'] .plate.muck { color: var(--k-text-2); background: transparent; border-color: transparent; }

/* -------------------------------------------------- наставник (школа) */

/* Подсказка — плоская плашка между столом и рукой, не поверх сукна. */
.coach {
  flex: none;
  margin: 0 var(--k-s12) var(--k-s8);
  padding: var(--k-s8) var(--k-s12);
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-lg);
  background: var(--k-surface);
  font-size: var(--k-fs-secondary);
  line-height: var(--k-lh-secondary);
  color: var(--k-text);
}
.coach .coach-head { display: flex; justify-content: space-between; gap: var(--k-s8); color: var(--k-text-2); font-size: var(--k-fs-caption); line-height: var(--k-lh-caption); margin-bottom: var(--k-s4); }
.coach .coach-more { padding: 0; border: 0; background: none; color: var(--k-text); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
.coach .coach-advice { margin-top: var(--k-s4); font-weight: var(--k-w-semibold); }
.coach.ok { border-color: var(--k-green); }
.coach.no { border-color: var(--color-danger); }
/* Кнопка, которую советует наставник, — с зелёным контуром: это смысл, а не украшение. */
body[data-screen='poker'] .panel .btn.advised { outline: 2px solid var(--k-green); outline-offset: 2px; }