/* ==========================================================================
   ПРИМИТИВЫ КИТА — design/mockups/00-ui-kit-final.png

   Кнопка, поле, степпер, сегменты, тумблер, ползунок, разделитель,
   иконочная кнопка, шторка. Всё — на токенах из tokens.css: ни одного числа
   руками, кроме толщины линии и того, что из токенов считается.

   Классы с префиксом `.k-`. Существующие классы не переименовываются и не
   трогаются: экраны переедут сюда фазами, по одному.

   Из принципов кита (раздел 22), которые видно прямо здесь: ни градиентов,
   ни свечения, ни стекла, ни золота, ни «таблеток» в полэкрана. Зелёный
   появляется там, где есть действие или состояние, и больше нигде.

   ЗЕЛЁНЫЙ ТЕПЕРЬ ТЁМНЫЙ (#137A43), и из этого следуют два правила, которые
   видно в этом файле: надпись на зелёной заливке только светлая (4.98), а
   зелёным как цветом мелкого текста не пишут вообще (3.04 на поверхности).
   Поэтому «плюс» в рейтинге получил зелёную точку вместо зелёных цифр.
   ========================================================================== */

/*
 * Кит стоит сам. `box-sizing` живёт в style.css, и если экран загрузит
 * только кит, поля с внутренним отступом вылезут за край: `width: 100%`
 * плюс поля плюс рамка — это больше ста процентов. Глобального `*` здесь
 * нарочно нет: кит — это добавка к существующим стилям, и трогать всё
 * подряд он не вправе.
 */
.k-btn, .k-icon-btn, .k-input, .k-field, .k-stepper, .k-seg, .k-segmented,
.k-slider, .k-sheet, .k-actions, .k-toggle { box-sizing: border-box; }

/* -------------------------------------------------------------- типографика */

.k-title     { font: var(--k-w-semibold) var(--k-fs-title)/var(--k-lh-title) var(--k-font); color: var(--k-text); }
.k-section   { font: var(--k-w-semibold) var(--k-fs-section)/var(--k-lh-section) var(--k-font); color: var(--k-text); }
.k-component { font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font); color: var(--k-text); }
.k-body      { font: var(--k-w-regular) var(--k-fs-body)/var(--k-lh-body) var(--k-font); color: var(--k-text); }
.k-secondary { font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font); color: var(--k-text-2); }
.k-caption   { font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font); color: var(--k-text-2); }
/* Крупное число: цифры не пляшут по ширине, иначе счёт дёргается при росте. */
.k-num       { font: var(--k-w-semibold) var(--k-fs-num)/var(--k-lh-num) var(--k-font); color: var(--k-text); font-variant-numeric: tabular-nums; }
/* Игровое число — то же начертание, что заголовок раздела; роль другая. */
.k-num-game  { font: var(--k-w-semibold) var(--k-fs-section)/var(--k-lh-section) var(--k-font); color: var(--k-text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ кнопки */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s8);
  min-height: var(--k-control-h);
  padding: 0 var(--k-pad-x);
  border: 1px solid transparent;
  border-radius: var(--k-r-md);
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  text-align: center;
  /*
   * Ярлык кнопки не переносится: «½ бан-\nка» — это не кнопка. Не влезает
   * ряд — переносится ряд, а не слово.
   *
   * Но кнопка НИКОГДА не делает страницу шире себя: подпись бывает любой
   * длины, и ширину экрана определяет экран, а не текст на кнопке. Поэтому
   * жёсткий потолок в ширину родителя, а слишком длинное обрезается
   * многоточием. Без этого «Дополнительные настройки →» на 320 вылезала за
   * край — и вылезала она не всегда, а в зависимости от того, какой шрифт
   * подобрала система: такие вещи ловятся через раз и чинятся вслепую.
   */
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-btn:focus-visible { outline: 2px solid var(--k-green); outline-offset: 2px; }
/* Во всю ширину — в липкой зоне действий и в шторке. */
.k-btn--block { display: flex; width: 100%; }
/*
 * Компактная — ряд быстрого выбора: доли банка в шторке рейза (кит, 17).
 * Меньше поля и мельче текст, высота та же: палец всё равно должен попадать.
 */
.k-btn--compact { padding: 0 var(--k-s12); font-size: var(--k-fs-secondary); line-height: var(--k-lh-secondary); }

.k-btn--primary { background: var(--k-green); color: var(--k-on-green); }
.k-btn--primary:active:not(:disabled) { background: var(--k-green-pressed); }

.k-btn--secondary { background: var(--k-elevated); color: var(--k-text); border-color: var(--k-divider); }
.k-btn--secondary:active:not(:disabled) { background: var(--k-surface); }

.k-btn--ghost { background: transparent; color: var(--k-text); border-color: var(--k-divider); }
.k-btn--ghost:active:not(:disabled) { background: var(--k-press); }

/*
 * Выключенная кнопка не прячется и не бледнеет до невидимости: человек
 * должен видеть, что действие есть, и прочесть рядом, чего не хватает
 * («Нужно минимум 2 игрока» в ките).
 */
.k-btn:disabled {
  background: var(--k-elevated);
  color: var(--k-disabled);
  border-color: transparent;
  cursor: default;
}

/* Иконочная кнопка: иконка 24, поля по 12 — ровно 48 на палец. */
.k-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--k-control-h);
  height: var(--k-control-h);
  padding: 0;
  border: 0;
  border-radius: var(--k-r-md);
  background: transparent;
  color: var(--k-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-icon-btn:active:not(:disabled) { background: var(--k-press); }
.k-icon-btn:disabled { color: var(--k-disabled); cursor: default; }
.k-icon-btn:focus-visible { outline: 2px solid var(--k-green); outline-offset: -2px; }
.k-icon-btn svg { width: var(--k-icon); height: var(--k-icon); display: block; }

/* ------------------------------------------------------------------- поля */

.k-field { display: flex; flex-direction: column; gap: var(--k-s8); }
.k-label { font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font); color: var(--k-text-2); }

.k-input {
  width: 100%;
  min-height: var(--k-control-h);
  padding: 0 var(--k-pad-x);
  background: var(--k-elevated);
  color: var(--k-text);
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-md);
  font: var(--k-w-regular) var(--k-fs-body)/var(--k-lh-body) var(--k-font);
}
.k-input::placeholder { color: var(--k-text-2); }
.k-input:focus { outline: none; border-color: var(--k-green); }
.k-input:disabled { color: var(--k-disabled); background: var(--k-surface); }
/* Красный — только ошибка (docs/redesign.md §2). */
.k-input[aria-invalid='true'] { border-color: var(--k-suit-red); }
/* Текст ошибки — светлый: красным в 12 пикселей это 3.65 на фоне. Красным
   остаётся рамка поля, и ей 3:1 достаточно. */
.k-error { font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font); color: var(--k-text); }

/* Числовое поле со степпером: − значение + */
.k-stepper {
  display: grid;
  grid-template-columns: var(--k-control-h) 1fr var(--k-control-h);
  align-items: center;
  min-height: var(--k-control-h);
  background: var(--k-elevated);
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-md);
  overflow: hidden;
}
.k-stepper > .k-icon-btn { border-radius: 0; }
.k-stepper-value {
  text-align: center;
  font: var(--k-w-semibold) var(--k-fs-num)/var(--k-lh-num) var(--k-font);
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}
.k-stepper[data-disabled] .k-stepper-value { color: var(--k-disabled); }

/* --------------------------------------------------------- сегменты */

.k-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--k-s4);
  background: var(--k-surface);
  border-radius: var(--k-r-md);
  overflow: hidden;
}
.k-seg {
  /* Сегмент — такой же орган управления, как кнопка: в него должен попадать
     палец, поэтому высота общая, а не «как в макете поменьше». */
  min-height: var(--k-control-h);
  padding: 0 var(--k-s12);
  border: 0;
  border-radius: var(--k-r-sm);
  background: transparent;
  color: var(--k-text-2);
  font: var(--k-w-semibold) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Выбранное верное — зелёным, это состояние, а не украшение. */
.k-seg[aria-selected='true'] { background: var(--k-green); color: var(--k-on-green); border-radius: var(--k-r-sm); }
.k-seg:disabled { color: var(--k-disabled); cursor: default; }
.k-seg:focus-visible { outline: 2px solid var(--k-green); outline-offset: -2px; }

/* ---------------------------------------------------------- тумблер */

/*
 * Тумблер выглядит по киту — 48 на 32, — но НАЖИМАЕТСЯ на 44 в высоту:
 * палец не попадает в 32, а уменьшать его ради попадания значит рисовать не
 * то, что нарисовано. Поэтому зона нажатия больше рисунка, а дорожка стоит
 * ровно посередине неё.
 */
.k-toggle {
  position: relative;
  display: inline-block;
  width: var(--k-s48);
  height: var(--k-tap);
  flex: none;
}
/* Отступ сверху и снизу, чтобы дорожка 32 встала по центру зоны 44. */
.k-toggle { --k-toggle-inset: calc((var(--k-tap) - var(--k-s32)) / 2); }
.k-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.k-toggle-track {
  position: absolute;
  inset: var(--k-toggle-inset) 0;
  border-radius: var(--k-r-pill);
  background: var(--k-disabled);
  transition: background-color var(--k-fast) var(--k-ease);
  pointer-events: none;
}
.k-toggle-knob {
  position: absolute;
  top: calc(var(--k-toggle-inset) + var(--k-s4));
  left: var(--k-s4);
  width: var(--k-s24);
  height: var(--k-s24);
  border-radius: 50%;
  background: var(--k-text);
  transition: transform var(--k-fast) var(--k-ease);
  pointer-events: none;
}
.k-toggle input:checked ~ .k-toggle-track { background: var(--k-green); }
.k-toggle input:checked ~ .k-toggle-knob { transform: translateX(var(--k-s16)); }
.k-toggle input:disabled ~ .k-toggle-track { background: var(--k-surface); }
.k-toggle input:disabled ~ .k-toggle-knob { background: var(--k-disabled); }
.k-toggle input:focus-visible ~ .k-toggle-track { outline: 2px solid var(--k-green); outline-offset: 2px; }

/* --------------------------------------------------------- ползунок */

.k-slider { display: flex; flex-direction: column; gap: var(--k-s8); }
.k-slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* Дорожка тонкая, а браться за неё нужно пальцем: высота по порогу
     нажатия, сама дорожка рисуется по центру. */
  height: var(--k-tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.k-slider input[type='range']::-webkit-slider-runnable-track {
  height: var(--k-s4);
  border-radius: var(--k-r-pill);
  /* Заполнено до бегунка — зелёным: это выбранное значение, то есть состояние. */
  background: linear-gradient(to right,
    var(--k-green) 0 var(--k-fill, 50%), var(--k-divider) var(--k-fill, 50%) 100%);
}
.k-slider input[type='range']::-moz-range-track {
  height: var(--k-s4);
  border-radius: var(--k-r-pill);
  background: linear-gradient(to right,
    var(--k-green) 0 var(--k-fill, 50%), var(--k-divider) var(--k-fill, 50%) 100%);
}
.k-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--k-s24);
  height: var(--k-s24);
  margin-top: calc((var(--k-s4) - var(--k-s24)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--k-text);
}
.k-slider input[type='range']::-moz-range-thumb {
  width: var(--k-s24);
  height: var(--k-s24);
  border: 0;
  border-radius: 50%;
  background: var(--k-text);
}
.k-slider input[type='range']:focus-visible { outline: 2px solid var(--k-green); outline-offset: 2px; }
.k-slider-ends {
  display: flex;
  justify-content: space-between;
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text-2);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- разделитель */

.k-divider { height: 1px; border: 0; margin: 0; background: var(--k-divider); }

/* ------------------------------------------------------------ шторка */

.k-sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); }
.k-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Скругление только сверху — кит, раздел 4. */
  border-radius: var(--k-r-sheet) var(--k-r-sheet) 0 0;
  background: var(--k-surface);
  /* Было: тень в 32 пикселя размытия. Тень рисует объём, которого на плоском
     экране нет, — отделяет шторку от страницы линия. */
  border-top: var(--k-sheet-line);
  padding: var(--k-s12) var(--k-screen-x) var(--k-sticky-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--k-s16);
}
/* Ручка: за неё тянут, и она же говорит, что шторку можно смахнуть. */
.k-sheet-grab {
  width: var(--k-s32);
  height: var(--k-s4);
  margin: 0 auto;
  border-radius: var(--k-r-pill);
  background: var(--k-divider);
}
.k-sheet-head { display: flex; flex-direction: column; gap: var(--k-s4); text-align: center; }

/* Липкая зона действий — кит, раздел 14. */
.k-actions {
  display: flex;
  flex-direction: column;
  gap: var(--k-s8);
  padding: var(--k-sticky-top) var(--k-screen-x) var(--k-sticky-bottom);
  background: var(--k-bg);
  border-top: 1px solid var(--k-divider);
}
.k-actions--row { flex-direction: row; }
.k-actions--row > .k-btn { flex: 1; }

/* ------------------------------------------------------------- витрина */

/* Полоса состояния — кит, раздел 8. Цвет здесь и есть смысл. */
.k-dot { width: var(--k-s12); height: var(--k-s12); border-radius: 50%; display: inline-block; }
.k-dot--neutral { background: var(--k-text-2); }
/* Точка несёт смысл цветом, поэтому к ней всегда стоит слово — кит, 8. */
.k-dot--active, .k-dot--success { background: var(--k-green); }
.k-dot--disabled { background: var(--k-disabled); }

@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-toggle-track, .k-toggle-knob { transition: none; }
}

/* ==========================================================================
   ОБЩИЕ КОМПОНЕНТЫ — кит, разделы 5, 8, 10–16, 19

   Те, что живут во всех трёх играх и на всех экранах. Собраны из примитивов
   выше и тех же токенов: ни одного нового цвета, отступа или скругления.

   Каждый — ОДИН компонент с состояниями. Место за столом не шесть
   компонентов, а один с шестью состояниями: иначе «обычное» и «сбросил»
   разъедутся при первой же правке.
   ========================================================================== */

/* ------------------------------------------------------- шапка (кит, 5) */

/*
 * Шапка экрана и шапка игры — одна вещь в двух видах, а не две вещи.
 * Отличается только тем, что под заголовком: подзаголовок экрана или
 * строка партии.
 */
.k-header {
  display: grid;
  grid-template-columns: var(--k-control-h) 1fr var(--k-control-h);
  align-items: center;
  gap: var(--k-s8);
  padding: var(--k-s8) var(--k-screen-x);
  border-bottom: 1px solid var(--k-divider);
}
.k-header-mid { min-width: 0; text-align: center; }
.k-header-title {
  display: block;
  font: var(--k-w-semibold) var(--k-fs-section)/var(--k-lh-section) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-header-sub {
  display: block;
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Шапка игры — та же, но компактнее: над ней стол, и место дорого. */
.k-header--game { padding-top: var(--k-s4); padding-bottom: var(--k-s4); }

/* ----------------------------------------------------- аватар (кит, 10) */

/*
 * Кружок у всех одинаковый — тот же размер, та же обводка, то же место.
 * Отличается только содержимое: своё фото настоящее (его отдаёт initData),
 * у остальных буква с цветом от имени. Чужих фото Telegram не отдаёт, и
 * подставлять вместо них что-то выдуманное хуже, чем честная буква.
 */
.k-av {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--k-av-lg);
  height: var(--k-av-lg);
  border-radius: var(--k-r-pill);
  /*
   * Цвет буквы отличает людей — и только. Весь круг оттенков рябит, особенно
   * на зелёном сукне, поэтому приходящий тон сжимается в спокойную полосу от
   * синего к сливовому: она далеко от сукна (оно зелёное, ~162°), и соседние
   * аватары остаются различимы, не споря с интерфейсом.
   */
  background: hsl(calc(195 + var(--k-hue, 0) * 0.36) 30% 42%);
  color: var(--k-text);
  font: var(--k-w-semibold) var(--k-fs-component)/1 var(--k-font);
  overflow: hidden;
  user-select: none;
}
.k-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-av--md { width: var(--k-av-md); height: var(--k-av-md); font-size: var(--k-fs-secondary); }
.k-av--sm { width: var(--k-av-sm); height: var(--k-av-sm); font-size: var(--k-fs-caption); }
.k-av--xs { width: var(--k-av-xs); height: var(--k-av-xs); font-size: var(--k-fs-caption); }
/* Пустое место: приподнятая поверхность и вторичный значок — своего цвета у него нет. */
.k-av--empty { background: var(--k-elevated); color: var(--k-text-2); }
.k-av--empty svg { width: 60%; height: 60%; }

/* Группа: аватары внахлёст и «+N» последним кружком. */
.k-avs { display: inline-flex; align-items: center; }
.k-avs > * + * { margin-left: calc(var(--k-s8) * -1); }
.k-avs .k-av { box-shadow: 0 0 0 2px var(--k-bg); }
.k-av--more { background: var(--k-elevated); color: var(--k-text-2); }

/* ------------------------------------------------ строка игрока (кит, 11) */

.k-player {
  display: flex;
  align-items: center;
  gap: var(--k-s12);
  min-height: var(--k-tap);
  padding: var(--k-s8) 0;
}
.k-player-body { min-width: 0; flex: 1; }
.k-player-name {
  display: block;
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-player-marks {
  display: flex;
  align-items: center;
  gap: var(--k-s4);
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text-2);
}
.k-player--empty .k-player-name { color: var(--k-text-2); font-weight: var(--k-w-regular); }

/* --------------------------------------------- строка рейтинга (кит, 12) */

.k-rank {
  display: flex;
  align-items: center;
  gap: var(--k-s12);
  min-height: var(--k-tap);
  padding: var(--k-s8) 0;
}
.k-rank-place {
  width: var(--k-s24);
  text-align: center;
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.k-rank-name {
  flex: 1;
  min-width: 0;
  display: block;
  font: var(--k-w-regular) var(--k-fs-body)/var(--k-lh-body) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * Плюс зелёный, минус красный — и больше ничего красным. Проигравший не
 * ошибка (docs/redesign.md §2), поэтому красный тут только у знака числа.
 */
.k-rank-points {
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  font-variant-numeric: tabular-nums;
  flex: none;
}
/*
 * Цвет ушёл с цифр на точку перед ними: зелёным это было 3.04, красным
 * 3.17 — хватает неТексту, но не числу в 16 пикселей. Точке 3:1
 * достаточно, а знак числа по-прежнему виден боковым зрением.
 */
.k-rank-points--up, .k-rank-points--down { color: var(--k-text); }
.k-rank-points--up::before, .k-rank-points--down::before {
  content: '';
  display: inline-block;
  width: var(--k-s8);
  height: var(--k-s8);
  margin-right: var(--k-s4);
  border-radius: 50%;
  vertical-align: 0.04em;
}
.k-rank-points--up::before { background: var(--color-success); }
.k-rank-points--down::before { background: var(--color-danger); }
.k-rank-points--zero { color: var(--k-text-2); }

/* ----------------------------------------------- строка стола (кит, 13) */

.k-table-row {
  display: flex;
  align-items: center;
  gap: var(--k-s12);
  width: 100%;
  min-height: var(--k-tap);
  padding: var(--k-s12) 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-table-row:focus-visible { outline: 2px solid var(--k-green); outline-offset: -2px; }
.k-table-body { flex: 1; min-width: 0; }
.k-table-title {
  display: block;
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-table-sub {
  display: block;
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  /* Одна строка. Строка стола — это ряд в списке: разъехавшись на три,
     список перестаёт читаться как список. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-table-state {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--k-s8);
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  flex: none;
  white-space: nowrap;
}
.k-table-chevron { color: var(--k-text-2); flex: none; display: grid; place-items: center; }

/*
 * На самых узких телефонах в строку не помещается всё сразу, и чем-то надо
 * поступиться. Поступаемся ПОДПИСЬЮ состояния, а не названием стола: за
 * названием человек и пришёл, а состояние несёт точка — цвет здесь и есть
 * смысл. Подпись остаётся в разметке для тех, кто читает экран голосом.
 */
/*
 * Порог — 420: макет строки нарисован под ~426 логических пикселей, и там
 * в ряд честно помещается всё. Ниже этого чем-то надо поступиться.
 *
 * Поступаемся АВАТАРАМИ. На 32 пикселях лица всё равно не узнать — это
 * украшение; а состояние это то, ради чего в список и смотрят. И словом, а
 * не точкой: точка это значение одним цветом — ровно то, от чего мы уходили
 * в UNOQ, добавляя фигуры мастей. Зелёная и серая точки различаются хуже,
 * чем кажется, а три состояния — «ждут игроков», «заполнен», «идёт игра» —
 * в одну точку не умещаются, и решение по ней не принять.
 */
@media (max-width: 420px) {
  /*
   * В один ряд всё не влезает, а резать нечего: название, «3 из 6» и
   * состояние нужны все три. Поэтому ряд разворачивается в две строки —
   * текст получает полную ширину, шеврон остаётся справа. Аватары уходят:
   * на 32 пикселях лица не узнать, это украшение.
   */
  .k-table-row {
    display: grid;
    grid-template-columns: 1fr var(--k-s24);
    grid-template-areas: 'body chev' 'state chev';
    align-items: center;
    column-gap: var(--k-s12);
    row-gap: var(--k-s4);
  }
  .k-table-row .k-avs { display: none; }
  .k-table-body { grid-area: body; }
  .k-table-state { grid-area: state; }
  .k-table-chevron { grid-area: chev; }
}
.k-table-chevron svg { width: var(--k-icon); height: var(--k-icon); }
/* Недоступный стол: войти нельзя, но видно, что он есть и что там идёт игра. */
.k-table-row--off { cursor: default; }
.k-table-row--off .k-table-title, .k-table-row--off .k-table-sub { color: var(--k-disabled); }
.k-table-row--off .k-av { opacity: 0.5; }

/* ------------------------------------------- место за столом (кит, 19) */

/*
 * ОДИН компонент с состояниями: обычное, со ставкой, сбросил, его ход,
 * победитель. Разводить их по разным компонентам нельзя — разъедутся.
 */
/* Зазор 8, а не 4: под аватаром висит значок D/SB/BB или часы, и имя не
   должно к ним прижиматься. */
.k-seat { display: inline-flex; flex-direction: column; align-items: center; gap: var(--k-s8); }
.k-seat-pod { position: relative; }
.k-seat-name {
  max-width: calc(var(--k-av-lg) * 2);
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.k-seat-stack {
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  font-variant-numeric: tabular-nums;
}
/* Ставка — рядом с местом, числом: это деньги, а не подпись. */
.k-seat-bet {
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}
/* Значок D / SB / BB — на кружке, снизу справа. */
.k-seat-badge {
  position: absolute;
  right: calc(var(--k-s8) * -1);
  bottom: 0;
  min-width: var(--k-av-xs);
  height: var(--k-av-xs);
  padding: 0 var(--k-s4);
  border-radius: var(--k-r-pill);
  background: var(--k-elevated);
  color: var(--k-text);
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-av-xs) var(--k-font);
  text-align: center;
}
/* Чей ход — зелёное кольцо и число секунд. Цвет здесь и есть смысл. */
/* Чей ход — зелёное кольцо, и светлое снаружи: места стоят на сукне, а
   зелёное к сукну это 2.24. */
.k-seat--turn .k-av { box-shadow: 0 0 0 2px var(--k-green), 0 0 0 3px var(--on-felt-accent-line); }
.k-seat--turn .k-seat-name { color: var(--k-text); }
.k-seat-clock {
  position: absolute;
  right: calc(var(--k-s8) * -1);
  bottom: 0;
  min-width: var(--k-av-xs);
  height: var(--k-av-xs);
  padding: 0 var(--k-s4);
  border-radius: var(--k-r-pill);
  background: var(--k-bg);
  color: var(--k-text);
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-av-xs) var(--k-font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Сбросил — выбыл из раздачи, но со стола не исчез. */
.k-seat--folded { opacity: 0.45; }
/* Победитель — светлая подпись: зелёной в 12 пикселях это 2.24 на сукне,
   где места и стоят. Без золота и без свечения (кит, 22). */
.k-seat-win {
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text);
}

/* ------------------------------------------- статус-бар игры (кит, 15) */

/* Полоса, которую не нажимают: она только говорит, чего ждут. */
.k-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-s4);
  padding: var(--k-s12) var(--k-screen-x);
  text-align: center;
}
.k-status-main {
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  color: var(--k-text);
}
.k-status-sub {
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
}

/* --------------------------------------- зона действий игры (кит, 16) */

/* Три в ряд, главное посередине — под большим пальцем. */
/*
 * Три в ряд, главное посередине — под большим пальцем. Главная кнопка берёт
 * столько, сколько нужно её подписи («Уравнять 1 000» — самая длинная из
 * настоящих), боковые ужимаются: сокращать надо число, а не слово, а если
 * ужимать нечего — пусть ужмётся «Сбросить», а не сумма.
 */
.k-game-actions {
  display: flex;
  gap: var(--k-s8);
  padding: var(--k-sticky-top) var(--k-screen-x) var(--k-sticky-bottom);
}
.k-game-actions > .k-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--k-s12); }
.k-game-actions > .k-btn--primary { flex: 0 1 auto; }

/*
 * На самых узких телефонах три кнопки в ряд не помещаются: «Уравнять 1 000»
 * забирает половину, и «Сбросить» с «Повысить» срезаются до огрызков —
 * «броси», «овыси». Огрызок хуже переноса, поэтому ряд разворачивается в две
 * строки. Главная уходит ВНИЗ, а не вверх: она под большим пальцем, и это
 * важнее порядка чтения.
 */
@media (max-width: 360px) {
  .k-game-actions { flex-wrap: wrap; }
  .k-game-actions > .k-btn--primary { order: 2; flex: 1 0 100%; }
}

/* Липкая зона действий прижата к низу и знает про безопасную зону. */
.k-actions--sticky { position: sticky; bottom: 0; z-index: 2; }