/* ================================================================
   Русские шашки — оформление доски.

   Этот файл подключается ПОСЛЕ style.css и после временного блока
   стилей в шапке шашки.html. Значит все правила отсюда перебивают
   и то, и другое сами по себе — страницу для этого править не нужно.

   Что откуда берётся:
     • экраны, кнопки, заголовки, плашка итога, цвета темы Telegram —
       из общего style.css, они у двух игр одни;
     • всё, что касается доски, клеток и шашек, — здесь.

   Доска и шашки собраны из набора владельца (img/шашки/, см. эталон/
   шашки-набор/CLAUDE_CODE_INSTRUCTIONS_RU.md): клетки — текстуры дерева,
   шашки — картинки вместо рисованных CSS-кружков, дамка — SVG-корона
   поверх обычной шашки, подсветки — слои набора, рамка — полоса дерева
   с подписями. Устройство то же, что у шахмат (style-шахматы.css) —
   доски двух игр должны ощущаться одной парой рук, а не разными
   программами.

   Три правила, из которых выведено остальное:

   1. Доска сама себе цвет. Как карта в дураке всегда остаётся белой
      бумагой, так и доска всегда деревянная — и в светлой теме
      Telegram, и в тёмной. Если красить доску цветами темы, светлые
      поля в светлой теме сольются с фоном страницы, а шашки потеряют
      контур. Цвета доски всё равно вынесены в переменные и остаются
      цветом-подложкой под текстурой: обвязка при желании их подменит,
      но по умолчанию они свои.
   2. Клетка отдаёт всё место пальцу. Доска на телефоне идёт от края
      до края: восемь клеток в ряд — это тот случай, когда каждые
      отобранные у полей точки чувствуются пальцем. Поля экрана при
      этом остаются — их «съедает» обёртка доски, а кнопкам под
      доской они по-прежнему нужны.
   3. Подсветки различаются формой, а не только цветом: точка — тихий
      ход, кольцо — бой, заливка на весь квадрат — поднятая шашка
      и последний ход, дрожание — «так нельзя».
   ================================================================ */

:root {
  /* ---------- Цвета доски ----------
     Слева наше название, справа — запасной цвет. Первым идёт
     var(--шашки-…), чтобы обвязка (или тема) могла подставить своё,
     ничего здесь не переписывая. */
  --поле-светлое:  var(--шашки-поле-светлое, #ead8b4);
  --поле-тёмное:   var(--шашки-поле-тёмное,  #96663f);
  /* Тон рамки — из набора владельца (эталон/шашки-набор/layout_tokens.json,
     colors.woodDark): #4A2A18. Раньше здесь стоял свой подобранный
     коричневый — теперь рамка того же дерева, что и клетки. */
  --рамка-доски:   var(--шашки-рамка,        #4A2A18);

  /* Толщина рамки доски: та же формула, что у шахмат (устройство обеих
     досок одинаковое) — около 3,657% ширины доски. */
  --толщина-рамки: 3.657%;

  /* Шашки на доске — картинки набора владельца (img/шашки/pieces, см.
     блок «Шашка» ниже), а не заливка CSS. Эти четыре цвета остались
     не для них: --шашка-…-край рисует кружок цвета стороны перед
     «Ходят белые/чёрные» (см. «Строка хода» ниже — то же устройство,
     что у шахмат), а --шашка-…-знак — корону дамки, она тоже рисуется
     CSS поверх картинки шашки (см. блок «Дамка»). */
  --шашка-белая:      #f8f3e6;
  --шашка-белая-край: #6d4a2c;
  --шашка-белая-знак: #8a5a15;   /* корона дамки на белой */
  --шашка-чёрная:      #26262b;
  --шашка-чёрная-край: #08080a;
  --шашка-чёрная-знак: #ffc94d;  /* корона дамки на чёрной */

  /* Чем подсвечиваем выбор — золотой, и он тоже не зависит от темы.
     Сначала здесь стоял цвет кнопки Telegram (как везде в игре),
     и на снимке тёмной темы вышло плохо: кольцо получилось синим,
     а синее на белой шашке и на коричневом поле еле видно. Золото
     же одинаково хорошо читается и на белой шашке, и на чёрной,
     и на светлом поле, и на тёмном — то есть ровно на всём, что
     есть на доске. */
  --подсветка: var(--шашки-подсветка, #ffd66b);

  /* Светофор доски. Цвета не берём у Telegram нарочно: «сюда можно»
     и «так нельзя» обязаны значить одно и то же в любой теме, а тема
     присылает свой цвет кнопки — сегодня синий, завтра зелёный. */
  --ход-тихий:  #21c46b;   /* точка: обычный ход */
  --ход-бой:    #ff3b30;   /* кольцо: бой */
  --нельзя:     #ff3b30;   /* вспышка отказа */
  --побита:     #ff2d2d;   /* крест на уже съеденной шашке */

  /* Поля по бокам экрана. Доске они не мешают — их съедает обёртка
     доски (см. ниже), — а кнопкам под доской нужны, иначе они
     упираются в самые края телефона. */
  --поле-экрана: 8px;
}

/* =====================================================================
   ЦВЕТА СТРАНИЦЫ — тёмная, как весь сборник

   Правило владельца: страница тёмная с одним салатовым акцентом,
   сукно и дерево — только внутри стола. У шашек «стол» — сама доска:
   она остаётся деревянной внутри своей рамы (её цвета выше, в :root),
   а всё вокруг — экраны, кнопки, плашки — берёт общие цвета сборника.
   Раньше страница целиком была залита зелёным сукном из style.css,
   и рядом с дураком и нардами шашки выглядели чужой игрой.

   Устройство то же, что у нард (style-нарды.css, «ЦВЕТА СТРАНИЦЫ»):
   переменные подменяются на самом верхнем узле, и все готовые правила
   из style.css — кнопки, подписи, таблицы, экраны сети — сами
   переезжают на тёмный вид. За пределы шашек это не уходит: файл
   подключён только к «шашки.html».

   «--текст-тихий» задан явно, а не оставлен пересчитываться сам:
   на :root он уже вычислен из зелёного сукна, и одной подменой
   «--текст» с «--фон» его не сдвинуть. */
#приложение {
  --фон: var(--сб-фон);
  --панель: var(--сб-поверхность);
  --текст: var(--сб-текст);
  --текст-тихий: var(--сб-текст-тихий);
  --кнопка-фон: var(--сб-акцент);
  --кнопка-текст: var(--сб-акцент-текст);
  --акцент: var(--сб-акцент);
  --подложка: rgba(248, 245, 235, 0.06);
  --край: rgba(248, 245, 235, 0.16);

  color: var(--сб-текст);
  /* Тот же фон, что у витрины, стола дурака и нард: ровный тёмный
     и едва заметное салатовое свечение у верхнего края. */
  background:
    radial-gradient(75% 120px at 50% 0, rgba(210, 247, 107, 0.07), rgba(210, 247, 107, 0) 100%),
    var(--сб-фон);
}

/* Раньше здесь стояло правило «#приложение .кнопка:not(.кнопка--мелкая)
   :not(.кнопка--выбор)»: оно красило ЛЮБУЮ обычную кнопку сборника плоским
   салатовым, без притемнения (color-mix), которое даёт общий style.css.
   Внутри самой партии (#экран-шашек) под него не подпадало ни одной
   кнопки — там только «.кнопка--мелкая» (Предложить ничью, Сдаться,
   Отменить ход), — а вот кнопки ВНЕ доски («Создать игру» на экране
   «Играть онлайн», «Начать», «Играть ещё» и другие) заливались ровным
   цветом, не как у дурака (замечание штаба 24.09: у дурака та же кнопка
   с лёгким переливом). Правило убрано целиком — такие кнопки снова берут
   обычный вид из style.css, как у всех игр сборника. */

/* =====================================================================
   ЭКРАНЫ ВЫБОРА: «С кем играть» и «Игра с ботом»

   Раньше эти правила лежали временным блоком <style> прямо в шапке
   шашки.html — разработчику некуда было их положить. Теперь они здесь,
   и блок со страницы можно стирать.

   ЧТО БЫЛО СЛОМАНО. Владелец прислал снимок с компьютера (около
   1900×1080) и написал «нужно сделать посредине»: столбик стоял
   прижатым к нижнему краю, сверху зияла пустота на две трети экрана,
   а последняя кнопка уходила за край.

   Причина не в ширине экрана, а в одной строке временных правил:
   «#экран-режимов > :last-child { margin-bottom: auto }». Пустое поле
   снизу доставалось последнему узлу — а последний там невидимая
   кнопка-переходник «#кнопка-играть» (класс «скрыт», то есть
   display: none). У спрятанного узла полей не бывает вовсе: он в
   раскладке не участвует. Верхнее поле работало, нижнего не было —
   вот столбик и съезжал вниз. На телефоне это почти незаметно
   (содержимое занимает почти всю высоту), а на широком экране беда
   вылезла во весь рост.

   КАК ПОЧИНЕНО. Пустые поля держат не крайние узлы, а две распорки —
   псевдоэлементы самого экрана. Им всё равно, какой узел последний
   и не спрятан ли он: они всегда на месте. Тем же приёмом собрана
   витрина игр. Растяжка у них одинаковая, 1 к 1, — владелец просил
   ровно посередине.
   ===================================================================== */

#экран-режимов,
#экран-бота-шашек {
  align-items: center;
  gap: 14px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Распорки: пустое место сверху и снизу поровну. При переполнении
   растягивать нечего — они схлопываются в ноль сами, и экран
   прокручивается с самого верха, ничего не срезая. */
#экран-режимов::before,
#экран-режимов::after,
#экран-бота-шашек::before,
#экран-бота-шашек::after {
  content: "";
  flex: 1 0 0;
}

/* Снимаем прежние пустые поля у крайних узлов. Селектор нарочно
   с классом «.экран» — он сильнее временного блока в шапке страницы,
   и центрирование чинится ещё до того, как разработчик тот блок сотрёт.
   Когда блок исчезнет, эти две строки станут просто безвредными. */
#экран-режимов.экран > :first-child,
#экран-бота-шашек.экран > :first-child { margin-top: 0; }

#экран-режимов.экран > :last-child,
#экран-бота-шашек.экран > :last-child { margin-bottom: 0; }

/* Ничего не сплющивается по высоте: что не влезло — прокручивается.
   Иначе подпись в две строки вылезает за края сжатой кнопки. */
#экран-режимов > *,
#экран-бота-шашек > * { flex-shrink: 0; }

/* Только прямые дети: ряд кнопок выбора уровня лежит внутри блока
   «выбор», и его кнопки должны остаться в строку, а не встать
   столбиком по 260 точек. */
#экран-режимов > .кнопка,
#экран-бота-шашек > .кнопка { width: min(100%, 260px); }

/* «К выбору игры» и «Назад» — не действия, а уход: они у́же и тише
   остальных. Но по высоте всё равно 44 точки, как везде в обеих играх:
   общее правило мелкой кнопки даёт 40, и на этих экранах они такими
   и стояли — на четыре точки ниже того, во что уверенно попадает палец.
   Места на экранах выбора вдоволь, экономить тут нечего.
   Ровно так же подняты мелкие кнопки на экранах дурака. */
#экран-режимов > .кнопка.кнопка--мелкая,
#экран-бота-шашек > .кнопка.кнопка--мелкая {
  width: auto;
  min-width: 150px;
  min-height: 44px;
}

#экран-режимов > .кнопка.кнопка--главная,
#экран-бота-шашек > .кнопка.кнопка--главная {
  width: min(100%, 280px);
  min-height: 58px;
  font-size: 21px;
  line-height: 1.2;
  border-radius: 14px;
}

/* Просвет между главными кнопками шире обычного: иначе две одинаково
   залитые плитки читаются как одна большая с чертой посередине,
   и палец бьёт в границу между ними. */
#экран-режимов > .кнопка.кнопка--главная + .кнопка.кнопка--главная {
  margin-top: 8px;
}

/* «Выберите, с кем играть» относится ко всем трём кнопкам сразу,
   поэтому стоит от них чуть дальше, чем они друг от друга. */
#экран-режимов > .подпись { margin-bottom: 4px; }

/* Ряд уровней на экране игры с ботом — по ширине главной кнопки под ним,
   а не во весь экран: растянутый на всю ширину ряд спорил бы с ней
   за внимание. Число 280 то же, что у кнопки «Играть». */
#экран-бота-шашек .выбор { width: min(100%, 280px); }
#экран-бота-шашек .выбор-соперника.выбор__кнопки { width: 100%; }

/* Невысокое окно (шторка Telegram, невысокий телефон): три главные
   кнопки, заголовок в две строки и «К выбору игры» должны помещаться
   без прокрутки. Ужимаем всё вокруг кнопок, а высоту самих кнопок —
   в последнюю очередь и не ниже 50 точек. */
@media (max-height: 620px) {
  #экран-режимов,
  #экран-бота-шашек { gap: 10px; }

  #экран-режимов .заголовок,
  #экран-бота-шашек .заголовок { font-size: 26px; line-height: 1.05; }

  #экран-режимов > .кнопка.кнопка--главная,
  #экран-бота-шашек > .кнопка.кнопка--главная {
    min-height: 52px;
    font-size: 19px;
  }
}

@media (max-height: 520px) {
  #экран-режимов,
  #экран-бота-шашек { gap: 8px; }

  #экран-режимов .заголовок,
  #экран-бота-шашек .заголовок { font-size: 22px; }

  #экран-режимов > .подпись { font-size: 13px; }

  #экран-режимов > .кнопка.кнопка--главная,
  #экран-бота-шашек > .кнопка.кнопка--главная {
    min-height: 50px;
    font-size: 18px;
  }
}

/* ---------- Раскладка экрана партии ----------

   Столбик: название, строка хода, доска, кнопки. Доска забирает
   всю оставшуюся высоту, поэтому у неё flex: 1, а у остальных —
   запрет на сжатие: строка хода не должна «съезжать» в ноль,
   когда сообщение стало длиннее. */
/* Верхний отступ — «padding-top» у самого экрана, а не сдвиг доски.

   Так из-под часов уходит всё, что стоит над доской: и название партии,
   и строка «Ходят белые». Сдвинь мы одну доску — заголовок остался бы
   под часами, а нижний ряд кнопок зря уехал бы вниз.

   Переменные «--отступ-…» приходят из style.css: там из двух источников
   (вырез самого телефона и полный экран Telegram) взят больший.
   Вне Telegram они нулевые, и экран выглядит ровно как раньше. */
#экран-шашек {
  align-items: center;
  gap: 6px;
  padding: calc(6px + var(--отступ-сверху))
           calc(var(--поле-экрана) + var(--отступ-справа))
           calc(6px + var(--отступ-снизу))
           calc(var(--поле-экрана) + var(--отступ-слева));
  /* Панели игроков, «Последний ход» и ряд кнопок партии (Э2) вместе
     с полом доски (см. «Размер доски» ниже) на самых тесных экранах
     не помещаются в высоту без сжатия доски ниже читаемого размера.
     Решение владельца: доска не мельчает, а стол прокручивается —
     тот же приём, что и у шахмат. На обычном телефоне прокрутки
     не будет вовсе: там всё помещается. */
  overflow-y: auto;
}

#экран-шашек > * { flex-shrink: 0; }

/* ---------- Строка «‹ ⋯» и заголовок во всю ширину ----------

   БЫЛО СЛОМАНО. У #экран-шашек и #экран-режимов задан
   «align-items: center» — он центрирует ряд кнопок и подписи,
   но у общих узлов «.верх-игры» и «.шапка-игры» (они приходят
   из style.css) ширина не задана явно («auto»), а именно «auto»
   реагирует на align-items. Без своей ширины они сжимались
   до размера содержимого и центрировались КАК ОДИН БЛОК: «‹» и «⋯»
   сходились рядом в середине экрана вместо разных углов, а заголовок
   «Шашки» вставал по центру вместо привычного «слева», как у нард
   и дурака (снимок стола нард: «‹» слева, «⋯» справа, «Нарды» слева).

   ПОЧИНЕНО тем же приёмом, что уже есть в общем файле для стола
   дурака и его лобби («#экран-игры > .верх-игры», «#экран-лобби >
   .верх-игры»): явная ширина шире экрана, чтобы align-items центрировать
   было уже нечего — свободного места нет ни на волос, и строка стоит
   от края до края при любом значении align-items.

   ЧИСЛО ПЕРЕСЧИТАНО (было «+20px» — на 2px больше нужного с каждой
   стороны, полоса вылезала за края телефона). Поле экрана здесь —
   «--поле-экрана» (8px) плюс безопасный отступ, а не 10px, поэтому
   добавка к ширине — «+16px» плюс сами отступы, не голые «+20px».
   При «align-items: center» margin на итоговое положение не влияет —
   центрирует контейнер, поэтому здесь достаточно верной ширины,
   а margin у «.верх-игры» из style.css можно не трогать. Заголовку
   хватает простого «width: 100%»: внутри он и так прижат влево
   («.шапка-игры» имеет «align-items: flex-start» в style.css). */
#экран-шашек > .верх-игры,
#экран-режимов > .верх-игры {
  width: calc(100% + 16px + var(--отступ-слева) + var(--отступ-справа));
  max-width: 536px;
}

#экран-шашек > .шапка-игры {
  width: 100%;
  max-width: 540px;
}

/* ---------- Строка хода ----------

   Главная надпись экрана: она отвечает на вопрос «чей сейчас ход»
   и объясняет отказы. Раньше это была тихая серая подпись — то есть
   самое важное на экране было оформлено как самое неважное.
   Теперь это плашка: заметная, но не кричащая.

   Высота задана наименьшей, а не точной: длинное сообщение
   («Ходят белые: есть бой, брать обязательно») на узком экране
   встаёт в две строки, и плашка обязана вырасти, а не обрезать текст.
   Доска при этом уменьшится сама — см. раздел о размере доски. */
#строка-хода {
  min-height: 30px;
  max-width: 100%;
  margin: 0;
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--текст);
  text-align: center;
  background: var(--подложка);
  border: 1px solid var(--край);
  border-radius: 999px;
}

/* Кружок цвета стороны перед словами. «Ходят белые» человек читает,
   а кружок видит — раньше, чем прочтёт, и с любого расстояния.
   Особенно это нужно вдвоём с одного телефона: доску вертят, глаз
   с неё не сходит, и по кружку видно, чья очередь, не вчитываясь.

   Кружок нарисован той же краской, что и шашки на доске: белый
   с тёмным ободком, чёрный со светлым ободком изнутри. Так он
   не «условный значок», а маленькая шашка — то же, что на доске.

   Когда партия кончилась, игра снимает оба класса, и кружка нет:
   ходить некому, а кружок обещал бы ход. */
#строка-хода.строка-хода--белые::before,
#строка-хода.строка-хода--чёрные::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  border-radius: 50%;
}

#строка-хода.строка-хода--белые::before {
  background: var(--шашка-белая);
  border: 2px solid var(--шашка-белая-край);
}

#строка-хода.строка-хода--чёрные::before {
  background: var(--шашка-чёрная);
  border: 2px solid var(--шашка-чёрная-край);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* ---------- Панели игроков (Э2, над и под доской) ----------

   Каркас — общие классы сборника из style.css: «.строка-игрока»
   (тёмная карточка с аватаром), «.строка-игрока--я» (нижняя панель,
   пониже ростом), «.аватар», «.строка-игрока__имя». Устройство то же,
   что у шахмат (style-шахматы.css, тот же заголовок раздела) — здесь
   только своё: ширина панели и значки, которых у общей карточки нет.

   Ширина — той же формулой, что у «.обёртка-доски» ниже: панель
   растянута на поля экрана и встаёт от края до края вровень с доской,
   как в эталоне. */
.панель-игрока-шашек {
  width: calc(100% + 2 * var(--поле-экрана));
  margin-inline: calc(-1 * var(--поле-экрана));
}

/* Значок цвета — та же картинка шашки из набора владельца, что и на
   доске (класс «.фишка», см. блок «Шашка» ниже), только мельче: здесь
   она не фигура партии, а подпись «этот игрок играет белыми/чёрными».
   Правило ниже специфичнее общего «.фишка» (два класса против одного)
   и потому перебивает его размер без «!important». */
.панель-игрока-шашек__цвет.фишка {
  position: static;
  width: 20px;
  height: 20px;
}

/* Счёт взятых — мини-шашка ЧУЖОГО цвета и число рядом. Перевеса здесь
   нет нарочно (в отличие от шахмат): в шашках все шашки равны, считать
   не с чем — только «сколько уже снято». Пусто (взятых нет) — узел
   остаётся без детей, без рамки и подложки: ничем не отмечен на экране. */
.панель-игрока-шашек__счёт {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.панель-игрока-шашек__счёт-значок.фишка {
  position: static;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.панель-игрока-шашек__счёт span:last-child {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--текст-тихий);
}

/* ---------- Часы (Э3) ----------
   Плашка «мм:сс» последним ребёнком панели, после счёта взятых (тот сам
   эластичный — «flex: 1 1 auto» выше, — и сжимается под часы первым,
   если панели не хватает ширины). «Без часов» и сетевая партия — узла
   не видно вовсе (класс «скрыт» ставит js/шашки-экран.js), а не пустая
   плашка. Цифры моноширинные («tabular-nums»): без этого «05:00» → «04:59»
   дёргает ширину плашки на каждую секунду. Устройство то же, что
   у шахмат (style-шахматы.css, тот же заголовок раздела). */
.панель-игрока-шашек__часы {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--текст);
  background: var(--подложка);
  border: 1px solid var(--край);
  border-radius: 999px;
}
.панель-игрока-шашек__часы svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
/* У того, чей ход, — салатовый акцент сборника; у другого — обычный
   тёмный вид плашки выше. Партия кончилась — подсветки нет ни у кого
   (см. обновитьЧасыПлашки в js/шашки-экран.js): ходить больше некому. */
.панель-игрока-шашек__часы--активны {
  color: var(--сб-акцент-текст);
  background: var(--сб-акцент);
  border-color: var(--сб-акцент);
}

/* ---------- Подзаголовок контроля времени (Э3) ----------
   «Русские • 5 минут» под заголовком стола. Мельче обычной «.подпись»
   и без своего отступа сверху: строка служебная, читается вместе
   с заголовком, а не как отдельная мысль. «Без часов» и сетевая партия —
   узла не видно вовсе (класс «скрыт»), высота под него не резервируется
   нигде — доска в этих случаях остаётся той же ширины, что и до Э3. */
#экран-шашек .подзаголовок-контроля {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--текст-тихий);
  text-align: center;
}

/* ---------- Последний ход (Э2) ----------

   «Последний ход c3–d4» — коротко, под строкой хода, тише её: это
   справка для того, кто на секунду отвлёкся от доски, а не главная
   надпись экрана. На старте партии и сразу после отмены хода узел
   скрыт классом «скрыт» целиком — не пустой строкой (ставит и снимает
   js/шашки-экран.js). */
.последний-ход {
  margin-top: -4px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Ряд действий партии под доской (Э2) ----------

   «Предложить ничью», «Сдаться», «Отменить ход» — тот же приём, что
   у шахмат (style-шахматы.css, «Ряд кнопок под доской»): обычные
   «.кнопка.кнопка--мелкая» из общего style.css, в ряд, который сам
   решает, обернуться ли на вторую строку. Кнопки не прячутся, а гаснут
   «disabled» — ряд не должен «дёргаться» пропажей одной из них
   (см. js/шашки-экран.js). Исключение один раз: «Сдаться» по сети
   спрятана классом «скрыт» вовсе — у сервера шашек нет для неё двери
   (см. отчёт разработчика). */
.панель-доски {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* «Сдаться» ждёт второго нажатия: первый тап переводит кнопку в это
   состояние (текст меняет js/шашки-экран.js на «Да, сдаюсь»), цвет —
   тот же красный, что вспышка отказа на доске («--нельзя», см. :root),
   чтобы обе версии кнопки было не перепутать друг с другом на глаз. */
.кнопка-сдаться--подтверждение {
  background: var(--нельзя);
  color: #fff;
}

/* ---------- Размер доски ----------

   Доска всегда во всю ширину колонки — клетка мерена шириной,
   и только шириной; высота на её размер больше не влияет никак.

   БЫЛО ИНАЧЕ (до правки стола шашек, панели над и под доской).
   Доска считалась мерной обёрткой (container-type: size): брала
   наименьшее из «вся ширина» и «вся оставшаяся высота», обёртка была
   растянута на всю свободную высоту экрана («flex: 1 1 auto») и сама
   центрировала доску внутри себя. С приходом панелей игроков, строки
   «Последний ход» и ряда кнопок партии (см. разделы выше) у этого
   способа обнажились две беды разом. На высоком окне остатка высоты
   было больше, чем нужно квадратной доске, — доска вставала по центру
   растянутой обёртки, а нижняя панель (следующий узел ПОСЛЕ обёртки)
   начиналась не под доской, а под всей её растянутой высотой: между
   ними зиял пустой промежуток. На тесном окне (320×568) наоборот —
   остатка не хватало, доска сжималась до клетки в 22 точки, и в игру
   пришлось добавлять «пол» (min-height: 372px), который эту беду
   не лечил, а только смягчал — на тех же 320 точках клетка выходила
   40 вместо нужных 37.

   ЧТО СДЕЛАНО ВМЕСТО ЭТОГО (решение владельца). Доска мерена только
   шириной колонки, обёртка её не растягивает и не центрирует: она
   ровно такого размера, как сама доска (плюс полоса под кнопку знаков,
   см. «ПОЧЕМУ ПОД КНОПКОЙ ЗНАКОВ ОТВЕДЕНА ПОЛОСА» ниже) — значит
   следующий узел в потоке (панель игрока, строка хода, ряд кнопок)
   начинается сразу под ней, без просвета, на любой высоте окна. Что
   по высоте не влезает — прокручивает экран («overflow-y: auto»
   у #экран-шашек, см. выше): решение владельца, то же самое, что
   и у шахмат — доска не мельчает, лишнее уходит под палец, а не
   под нож. «Пол» и мерная от высоты обёртка (cqh) больше не нужны
   и убраны — считать наименьшее из ширины и высоты больше нечего. */
.обёртка-доски {
  flex: 0 0 auto;
  /* Обёртка шире экрана ровно на его поля: так доска на телефоне
     встаёт от края до края и клетка выходит крупнее. */
  width: calc(100% + 2 * var(--поле-экрана));
  margin-inline: calc(-1 * var(--поле-экрана));
}

/* Рамка — полоса материала набора владельца толщиной --толщина-рамки
   (см. :root) вокруг сетки клеток, а не плоская линия border. Фон —
   та же тёмная текстура, что и у тёмной клетки, притемнённая наложением
   («background-blend-mode: multiply») до тона рамки набора: своей
   отдельной картинки-рамки мы не берём (у шашек её и нет в наборе,
   и доска поворачивается к чёрным — готовая картинка с вписанными
   подписями так уметь не может). Устройство то же, что у шахмат
   (см. style-шахматы.css, тот же заголовок). */
.доска-шашек-рамка {
  position: relative;
  /* Ширина — всегда 100% обёртки (то есть колонки экрана): запасных
     формул от высоты окна (calc(100vh…)) здесь больше нет, см. «Размер
     доски» выше — высота на размер доски не влияет вовсе. */
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: var(--толщина-рамки);
  background-color: var(--рамка-доски);
  background-image: url('img/шашки/square_dark_99x98.png');
  background-size: 25% 25%;
  background-repeat: repeat;
  background-blend-mode: multiply;
  border-radius: 10px;
  /* Две внутренние линии — светлая сверху, тёмная снизу — дают рамке
     фаску: доска перестаёт быть плоским рисунком и выглядит вставленной
     в раму. Тот же приём, что у шахмат — доски двух игр должны
     ощущаться одной парой рук, а не разными программами. */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
    0 6px 20px rgba(0, 0, 0, 0.38);
}

/* Сама сетка клеток — внутри рамки, во весь оставшийся после padding
   размер. Радиус чуть меньше, чем у рамки: она вписана внутрь
   скруглённого выреза, а не рисует собственный угол поверх него. */
.доска-шашек {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

@supports (container-type: size) {
  /* Раньше здесь же рамка мерялась «min(100cqw, 100cqh)» от обёртки —
     искала наименьшее из ширины и остатка высоты. Теперь ширина решена
     без cq-единиц, простым «width: 100%» на самой рамке (см. «Размер
     доски» выше), а «container-type: size» на рамке остаётся ради
     одного: подписям букв и цифр ниже нужны единицы cq от размера
     доски, а не от шрифта страницы. */
  .доска-шашек-рамка { container-type: size; }

  /* Клетку тоже объявляем «мерной» — так подпись в рамке и корона дамки
     умеют считаться от размера доски, а не от шрифта страницы. */
  .поле { container-type: size; }

  /* Подписи полей — мерные от самой рамки (она тоже контейнер строкой
     выше): число подобрано так же, как у шахмат — читаемо, но не спорит
     с клетками за внимание. */
  .доска-шашек-рамка .метка-буква,
  .доска-шашек-рамка .метка-цифра { font-size: 3.4cqmin; }
}

/* ---------- Высокое окно: свободную высоту — рядам, а не воздуху ----------

   На обычном вертикальном телефоне (390×844 и выше) доску всё равно
   меряет ширина колонки: она квадратная и упирается в бока раньше,
   чем в потолок. С уходом панели кнопок и ряда уровня под доской
   освободилось заметно больше высоты, чем доска способна забрать
   (ей мешает ширина, а не желание). Не потратить её — значит просто
   отдать её пустому промежутку сверху и снизу доски: тот же приём,
   что расставлен у нард («ВЫСОКОЕ ОКНО — обычный телефон стоя» —
   там же ровно то же рассуждение про 390 и 430).

   Поэтому часть запаса уходит не в воздух, а в сами строки: крупнее
   заголовок партии, крупнее и выше строка хода, крупнее строка счёта,
   шире просветы между рядами. Численно скромнее, чем у нард (там
   есть свои полки для выноса, у шашек — только эти три строки),
   но по тому же правилу: свободная высота достаётся тому, что важно
   прочитать, а не пустому месту.

   На «--поле-экрана» это не влияет — доска мерена только шириной колонки
   при любой высоте окна (см. «Размер доски» выше), запасного расчёта
   от высоты у неё больше нет вовсе — см. точно то же примечание в файле
   нард. */
@media (min-height: 800px) {
  #экран-шашек { gap: 10px; }

  #экран-шашек .шапка-игры__заголовок { font-size: clamp(30px, 9vw, 40px); }

  #строка-хода { min-height: 36px; padding: 7px 16px; font-size: 16px; }
  #строка-хода.строка-хода--белые::before,
  #строка-хода.строка-хода--чёрные::before { width: 16px; height: 16px; }

  #счёт-шашек { font-size: 16px; }
}

/* ---------- Клетка ----------
   Фон — текстура набора владельца (square_light/square_dark, 99×98
   каждая), а не плоская заливка. Переменные --поле-светлое/--поле-тёмное
   остаются цветом-подложкой под картинкой: так клетка не «пустая», пока
   текстура ещё не загрузилась. Цвет-подложку держим ещё и в отдельной
   переменной «--фон-клетки» — её же переиспользует «последний ход» ниже,
   чтобы не выписывать одну и ту же пару url()+var() дважды (устройство
   то же, что у шахмат, см. style-шахматы.css). */
.поле {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.поле--светлое {
  --фон-клетки: url('img/шашки/square_light_99x98.png');
  background-color: var(--поле-светлое);
  background-image: var(--фон-клетки);
  background-size: cover;
}
.поле--тёмное {
  --фон-клетки: url('img/шашки/square_dark_99x98.png');
  background-color: var(--поле-тёмное);
  background-image: var(--фон-клетки);
  background-size: cover;
}

/* Откуда и куда сходили последним ходом — картинка набора владельца ПОД
   шашкой: это фон самой клетки, а шашка — её потомок, поэтому рисуется
   поверх сама собой. Второй слой — «--фон-клетки» (см. выше), чтобы
   подсветка не забивала собой узор дерева целиком. */
.поле--последний {
  background-image: url('img/шашки/highlight_last_move_99x98.png'), var(--фон-клетки);
  background-size: cover, cover;
}

/* Выбранная клетка — картинка набора (highlight_selected) НАД шашкой:
   играющий поднял её пальцем, подсветка должна быть видна целиком,
   а не только тонкой рамкой по краю квадрата. */
.поле--выбрано::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background-image: url('img/шашки/highlight_selected_99x98.png');
  background-size: cover;
  pointer-events: none;
}

/* ---------- Куда можно пойти ----------

   Две подсветки — картинки набора владельца, а не CSS-фигуры: точка
   (move_dot) для тихого хода и кольцо (capture_ring) для боя. Формой
   они по-прежнему разные — на случай, если цвета человек различает
   плохо, — и обе лежат псевдоэлементом НАД клеткой; целевая клетка
   боя и хода всегда пустая, конфликтовать с шашкой им не с чем. */
.поле--можно::before,
.поле--можно-бой::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  pointer-events: none;
}

.поле--можно::before {
  background-image: url('img/шашки/move_dot_99x98.png');
}

.поле--можно-бой::before {
  background-image: url('img/шашки/capture_ring_99x98.png');
}

/* Так ходить нельзя. Клетка не просто краснеет, а коротко вздрагивает:
   неподвижную красную рамку легко принять за ещё одну подсветку
   «сюда можно», а дрожание ни с чем не спутаешь — это отказ.
   Класс висит около секунды, поэтому дрожим только в начале. */
.поле--отказ {
  box-shadow: inset 0 0 0 4px var(--нельзя);
  animation: шашки-вздрогнуть 0.34s ease-in-out 2;
  z-index: 1;
}

@keyframes шашки-вздрогнуть {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ---------- Шашка ----------

   Картинка набора владельца (img/шашки/pieces, 384×384 каждая) вместо
   рисованного CSS-кружка. Браузер сам уменьшает её до размера клетки —
   заранее её никто не увеличивал (так требует эталон/шашки-набор/
   CLAUDE_CODE_INSTRUCTIONS_RU.md). Размер ~90% клетки — то же число,
   что в инструкции набора («checker-piece», inset 5%). border-radius
   остаётся: по нему обрезаются кольца дамки и крест побитой ниже —
   сама картинка уже круглая, но box-shadow/border так не умеют. */
.фишка {
  position: relative;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;   /* нажатие ловит клетка целиком, а не кружок */
}

.фишка--белая { background-image: url('img/шашки/pieces/checker_ivory_384x384.png'); }
.фишка--чёрная { background-image: url('img/шашки/pieces/checker_black_384x384.png'); }

/* ---------- Дамка ----------

   Дамку надо узнавать издалека, а не разглядывать. Поэтому отличий
   сразу три, и каждое работает на своём расстоянии:
     • кольцо по краю кружка — видно первым, даже боковым зрением;
     • корона в середине — видно вблизи;
     • «вторая шашка» снизу: дамка в русских шашках и есть две шашки,
       поставленные друг на друга, поэтому у неё выступает нижний край.
   Кольцо нарисовано тенью внутрь, размер шашки от этого не меняется —
   дамка стоит на клетке ровно так же, как простая. */
/* Корона — SVG-маркер кодом поверх обычной шашки, а не своя картинка:
   так требует эталон/шашки-набор/CLAUDE_CODE_INSTRUCTIONS_RU.md («для
   дамки не масштабировать/дублировать PNG»). Раньше здесь был текстовый
   символ «★» — заменён на SVG-корону тем же приёмом, только форма другая:
   цвет по-прежнему свой на каждой стороне (то же, что раньше давал
   var(--шашка-…-знак) через «color»), но зашит прямо в data-URI: внутрь
   url() переменную не передать. Размер — доля от самой фишки (inset
   в процентах), пересчитывать по клетке отдельно не нужно. */
.фишка--дамка::after {
  content: "";
  position: absolute;
  inset: 24%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.фишка--белая.фишка--дамка::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%209l4.6%203.2L12%204l4.4%208.2L21%209l-2.1%209H5.1L3%209z'%20fill='%238a5a15'%20stroke='rgba(0,0,0,.35)'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.фишка--чёрная.фишка--дамка::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%209l4.6%203.2L12%204l4.4%208.2L21%209l-2.1%209H5.1L3%209z'%20fill='%23ffc94d'%20stroke='rgba(0,0,0,.35)'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.фишка--белая.фишка--дамка {
  box-shadow:
    inset 0 0 0 4px var(--шашка-белая-знак),
    inset 0 -3px 5px rgba(109, 74, 44, 0.35),
    0 3px 0 -1px #d9c9a4,          /* нижний край второй шашки */
    0 4px 5px rgba(0, 0, 0, 0.45);
}

.фишка--чёрная.фишка--дамка {
  box-shadow:
    inset 0 0 0 4px var(--шашка-чёрная-знак),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 3px 0 -1px #101014,
    0 4px 5px rgba(0, 0, 0, 0.5);
}

/* ---------- Этой шашкой сейчас можно пойти ----------

   Подсветка тихая нарочно: таких шашек в начале партии пять сразу,
   и если каждую обвести ярко, рябит вся доска. Тонкое кольцо снаружи
   говорит «эта живая», а куда именно ей идти — покажет тап.
   Когда на доске есть бой, правила не отдают тихих ходов вовсе,
   значит подсвечены будут ровно те, кто обязан бить. */
.фишка--может-ходить::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--подсветка);
  opacity: 0.85;
  pointer-events: none;
}

/* ---------- Шашка в руке ----------

   Её ведут по цепочке боя. Она поднята над доской: заметно крупнее
   соседей и с длинной тенью — так, будто её держат пальцами.

   Кольцом её нарочно не обводим. Кольцо уже есть у клетки под ней,
   и на снимке два жёлтых кольца подряд превращали белую шашку
   в жёлтую монету: цвет стороны терялся ровно у той шашки, за которой
   человек и следит. Поэтому подъём показан размером и тенью,
   а жёлтый остаётся один — на клетке. */
.фишка--в-руке {
  transform: scale(1.16);
  z-index: 2;
}

.фишка--белая.фишка--в-руке {
  box-shadow:
    inset 0 -3px 5px rgba(109, 74, 44, 0.35),
    0 0 0 2px rgba(0, 0, 0, 0.30),
    0 7px 12px rgba(0, 0, 0, 0.55);
}

.фишка--чёрная.фишка--в-руке {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.28),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.25),
    0 7px 12px rgba(0, 0, 0, 0.6);
}

/* Дамка в руке сохраняет своё кольцо: оно говорит, кто она,
   а не «её сейчас ведут». */
.фишка--белая.фишка--дамка.фишка--в-руке {
  box-shadow:
    inset 0 0 0 3px var(--шашка-белая-знак),
    inset 0 -3px 5px rgba(109, 74, 44, 0.35),
    0 7px 12px rgba(0, 0, 0, 0.55);
}

.фишка--чёрная.фишка--дамка.фишка--в-руке {
  box-shadow:
    inset 0 0 0 3px var(--шашка-чёрная-знак),
    inset 0 -3px 5px rgba(0, 0, 0, 0.45),
    0 7px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- Под боем: её перепрыгнут следующим прыжком ----------

   Поднял шашку, на доске зажглось красное кольцо «прыгай сюда» —
   а кого при этом снимут, было видно только тому, кто сам считал
   диагональ. Половина картины. Теперь жертва помечена сама.

   Метка красная — того же цвета, что и кольцо на клетке приземления:
   это один и тот же бой, и цвет говорит «эти двое связаны». А чтобы
   их не спутать, различается форма и место: кольцо приземления —
   сплошное и стоит на ПУСТОЙ клетке, а эта метка — пунктирное кольцо,
   обнимающее ШАШКУ, плюс мягкое красное свечение вокруг. Пунктир
   выбран после снимка: со сплошным кольцом жертва и место приземления
   выглядели двумя одинаковыми кольцами, и человек, уже выучивший
   «сплошное красное — прыгай сюда», мог прочесть шашку как второе
   место для прыжка. Пунктир читается как «взято на прицел».
   Свечение медленно дышит: неподвижную красную обводку на пёстрой
   доске легко принять за ещё одну подсветку, а движение цепляет
   взгляд само.

   С другими метками не спорит: «может ходить» и «в руке» бывают
   только у своих шашек, а под боем — только чужая; «побита» — уже
   перепрыгнутая, а эту только собираются. Корона дамки остаётся
   на месте: бьют её или нет, она дамка. */
.фишка--под-боем::before {
  content: "";
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  border: 3px dashed var(--ход-бой);
  box-shadow: 0 0 10px 3px rgba(255, 59, 48, 0.65);
  animation: шашки-под-боем 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* Дышит неглубоко: на снимке 360×640 при спаде до 0,55 кольцо жертвы
   в тусклой фазе делалось слабее кольца приземления, и главная метка
   боя на полсекунды становилась второстепенной. Ниже 0,7 не опускаем. */
@keyframes шашки-под-боем {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ---------- Побита, но ещё на доске ----------

   Самое важное место на доске. По правилам русских шашек побитые
   снимаются только в конце всего хода, а перепрыгивать их второй раз
   нельзя. Пока такая шашка стоит живой на вид, человек считает, что
   игра сломалась: «она же побита, почему через неё нельзя?».

   Поэтому отличий тоже четыре, и они грубые:
     • шашка становится призраком: вместо своей заливки — мутное серое
       пятно, сквозь которое видно клетку. Цвет стороны пропадает,
       и белая с чёрной делаются одинаковыми — это правильно, обе
       уже не в игре;
     • она осела и стала мельче — «уже не на доске, а под ней»;
     • пунктирный контур вместо сплошного: у живых шашек край цельный;
     • поперёк красный крест, крупнее самой шашки.
   Тень убрана вовсе: живые лежат на доске с тенью, побитая плоская.

   Отдельно про прозрачность. Первым делом побитая была просто
   притушена целиком (opacity), и на снимке вышло плохо: вместе
   с шашкой бледнел и крест — то есть тускнела ровно та метка, ради
   которой всё затевалось. Теперь прозрачная только заливка, а крест
   рисуется в полную силу. */
.фишка--побита {
  transform: scale(0.84);
  /* Прозрачность здесь строго единица, и это не пустая строка.
     Во временных правилах в шапке шашки.html побитая притушена
     целиком (opacity 0.45), а вместе с ней бледнеет и красный крест.
     Пока тот блок не убран, его надо перебить явно: если просто
     промолчать, прозрачность останется чужая. */
  opacity: 1;
}

.фишка--белая.фишка--побита,
.фишка--чёрная.фишка--побита {
  /* Заливка мутная, но не прозрачная. Сначала было прозрачнее, и на
     снимке выходило «красный крестик на пустой клетке» — а шашка-то
     ещё стоит и мешает прыгать. Теперь виден кружок, просто выцветший.
     «background» — сокращённая запись, и она же гасит картинку шашки
     (background-image): серый цвет ложится ПОВЕРХ, картинки не видно —
     это и есть «призрак», а не побочный эффект. */
  background: rgba(222, 222, 222, 0.55);
  border: 2px dashed rgba(255, 80, 80, 0.95);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.30);
}

/* Корону дамки раньше гасил «color: transparent» (она была текстовым
   символом и наследовала цвет). Теперь корона — картинка в data-URI
   с зашитым цветом, от «color» не зависит вовсе — гасим её отдельно. */
.фишка--побита.фишка--дамка::after {
  display: none;
}

.фишка--побита::before {
  content: "";
  position: absolute;
  inset: -12%;          /* крест шире кружка: «зачёркнуто», а не «помечено» */
  z-index: 1;
  /* Крест из двух диагональных полосок. Символом «×» его не рисуем:
     толщина знака зависит от шрифта телефона, а полоски одинаковы
     везде и не бледнеют на мелком экране. Тёмный контур вокруг полосок
     (он ниже, строкой filter) нужен, чтобы красный читался и на светлой
     клетке, и на тёмной. */
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 2.5px), var(--побита) calc(50% - 2.5px),
      var(--побита) calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(to bottom left,
      transparent calc(50% - 2.5px), var(--побита) calc(50% - 2.5px),
      var(--побита) calc(50% + 2.5px), transparent calc(50% + 2.5px));
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.75));
}

/* ---------- Подписи полей ----------

   Раньше подпись сидела внутри клетки, в её углу. Теперь 16 узлов
   (восемь цифр, восемь букв) — дети РАМКИ доски, а не клетки: набор
   владельца кладёт подписи в полосу рамки, и они не съедают место
   у шашки (устройство то же, что у шахмат). Своё физическое место
   в полосе (индекс 0…7 сверху вниз для цифр, слева направо для букв)
   метка получает через числовую переменную «--ряд» или «--столбец» —
   её ставит js/шашки-экран.js при сборке доски. Какая именно цифра
   или буква там написана словом, тоже решает он: при повороте доски
   меняется текст, а не место. Кнопка «Буквы и цифры» их прячет —
   значит, они не должны мешать и на виду: мелкие и приглушённые. */
.метка-буква,
.метка-цифра {
  position: absolute;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  /* Рамка теперь однородно тёмная (текстура дерева), а не клетка своего
     цвета под подписью — значит и цвет один на все 16 узлов, светлый,
     как у шахмат. */
  color: rgba(255, 238, 210, 0.85);
  pointer-events: none;
}
.метка-цифра {
  left: 0;
  width: var(--толщина-рамки);
  top: calc(var(--толщина-рамки) + (100% - 2 * var(--толщина-рамки)) * (var(--ряд, 0) + 0.5) / 8);
  transform: translateY(-50%);
}
.метка-буква {
  bottom: 0;
  height: var(--толщина-рамки);
  left: calc(var(--толщина-рамки) + (100% - 2 * var(--толщина-рамки)) * (var(--столбец, 0) + 0.5) / 8);
  transform: translateX(-50%);
}

.доска-шашек--с-метками .метка-буква,
.доска-шашек--с-метками .метка-цифра { display: flex; }

/* ---------- Ряд уровня бота (экран «Игра с ботом») ----------

   Раньше этот ряд стоял под доской партии заодно со служебными
   кнопками («В меню», «Звук» и т.д.) — вместе они и назывались
   «панель-доски». Служебные кнопки переехали в общий лист «⋯»,
   а ряд уровня — на отдельный экран «Игра с ботом» перед стартом
   партии (#экран-бота-шашек в шашки.html). Класса «панель-доски»
   в разметке больше нет вовсе, поэтому и правил под него здесь нет.

   Ширину ряда уровней ограничиваем: растянутые на весь экран «Лёгкий
   Обычный Сложный» выглядели полосой во всю ширину экрана выбора. */
.выбор-соперника.выбор__кнопки {
  width: min(100%, 320px);
  gap: 6px;
}

.выбор-соперника .кнопка.кнопка--выбор {
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14px;
}

/* «Играть с ботом» и «Играть вдвоём» начинают партию — они салатовые,
   как все главные кнопки сборника (см. «ЦВЕТА СТРАНИЦЫ» выше).
   Прежнее правило, красившее их тихой рамкой под зелёное сукно,
   убрано вместе с сукном. «Буквы и цифры» — просто настройка вида,
   поэтому она тише: видно, что важнее. */
#кнопка-метки { opacity: 0.85; }

/* ---------- Плашка итога ----------
   Сама плашка приезжает из style.css: она общая для двух игр.
   Здесь только размер заголовка — «Белые выиграли» короче, чем
   заголовки дурака, и просить под него целую строку незачем. */
#экран-итога .заголовок { font-size: 26px; }
#экран-итога .подпись { width: 100%; }

/* ---------- Шапка рекордов ----------

   «Лучшая серия: 3 победы подряд · сыграно 3, побед 3». На 390 точках
   строка не влезала на несколько знаков, и перенос ставился там, где
   кончилось место, — «…сыграно 3, побед» и одинокая «3» строкой ниже.
   Число оторвалось от слова, и последняя строка читалась как опечатка.

   Сам текст приходит из js/шашки-рекорды.js с обычными пробелами,
   и неразрывный пробел в нём — не моя правка. Поэтому решение
   оформлением: text-wrap: balance. Оно делит абзац на строки равной
   длины, а не «сколько влезет плюс хвост». У этой строки две половины —
   про серию и про счёт, — и середина у любого её варианта приходится
   на слова про серию, а не на пару «слово число»: пары стоят во второй
   половине, и до них балансу дела нет. На снимках 320, 360 и 390
   перенос лёг одинаково — «Лучшая серия: 3 победы» / «подряд · сыграно
   3, побед 3»: две ровные строки, каждое число при своём слове.

   Ширину нарочно не ограничиваем: на планшете строка помещается
   целиком, и балансировать там нечего — правило просто молчит.
   Браузер старше 2023 года балансировать не умеет и оставит как было. */
#лучший-рекорд {
  text-wrap: balance;
}

/* ---------- Узкий телефон (320 точек) ----------

   Восемь клеток в ряд при ширине 320 — это 40 точек на клетку,
   и то лишь если отдать доске всю ширину экрана до последней точки
   (этим и занята обёртка выше — она съедает поля экрана). До нормы
   в 44 здесь не дотянуться ничем: 44 × 8 = 352, а экран 320.
   Под палец при этом работает вся клетка целиком — нажатие ловит
   она, а не кружок шашки.

   Поля экрана здесь нарочно НЕ обнуляются. Сначала были обнулены —
   и на снимке 360 точек кнопки под доской упёрлись в самые края
   экрана. Доске поля и так не мешают: их съедает обёртка. */
@media (max-width: 360px) {
  /* Толщина рамки — в процентах (--толщина-рамки), и сама сужается
     вместе с экраном: на 320 точках клетка выходит около 37 — столько же,
     сколько штаб принял для шахмат 15 сентября. Border-width тут больше
     нет (border сменился на padding+текстуру рамки), меньше — только
     скругление угла, чтобы оно не спорило с узкой полосой. */
  .доска-шашек-рамка { border-radius: 8px; }
  #строка-хода { font-size: 14px; padding: 5px 10px; }
  .выбор-соперника .кнопка.кнопка--выбор { font-size: 13px; }
  /* На 320 точках ряд действий под доской из четырёх кнопок тесный:
     у «Сказать» подпись гасим, оставляем только значок — соседям
     (текстовым «Предложить ничью», «Сдаться», «Отменить ход») слово
     нужнее, а знак «разговора» и без подписи понятен. */
  .кнопка-знаков__подпись { display: none; }
}

/* ---------- Низкое окно ----------

   Шторка Telegram открывается не во весь рост, и тогда высота
   становится дороже ширины: доску начинает ограничивать она.
   Заголовок партии («Шашки» в «.шапка-игры») сжимается в одну
   мелкую строку общим правилом style.css при высоте не выше 700 —
   своей правки здесь для него больше не нужно, класса
   «заголовок--доска» в разметке нет. Ужимаем то, что относится
   только к шашкам: строку хода. */
@media (max-height: 520px) {
  #строка-хода { min-height: 26px; padding: 3px 10px; font-size: 14px; }
}

/* Кому мешает движение — тому его нет. Отказ при этом никуда
   не девается: красная рамка на клетке остаётся. */
@media (prefers-reduced-motion: reduce) {
  .поле--отказ { animation: none; }
  .фишка--в-руке { transform: none; }
  .фишка--под-боем::before { animation: none; }
}


/* ================================================================
   Знаки внимания: сказать сопернику, не выходя из партии
   ================================================================

   Устройство то же, что у карт («сказать за столом»), — две игры
   не должны выглядеть чужими друг другу. Но стол здесь другой:
   доска квадратная, занимает всю середину экрана и меняет размер
   вместе с окном, поэтому панель со списком и плашка пришедшего
   знака вынесены ИЗ ПОТОКА и лежат поверх доски. Сама кнопка, которая
   их открывает, теперь в потоке — обычная кнопка ряда действий под
   доской (.панель-доски, см. ниже «Кнопка «Сказать» в ряду действий»)
   и на размер доски не влияет вовсе.

   Почему панель и плашка — «поверх». Пока панель стояла в потоке,
   она забирала себе высоту, доска пересчитывала свой размер
   от остатка и съёживалась в угол — открыть панель значило испортить
   партию. Панель и летящий предмет остаются «поверх»: доска их
   не замечает вовсе и размера не меняет ни на точку.

   Держатся они за обёртку доски: ей для этого сказано «отсчитывай
   от меня» (position: relative). Обёртка ровно накрывает доску,
   поэтому «поверх доски» получается само собой.
   ================================================================ */

.обёртка-доски {
  position: relative;
}

/* ---------- Кнопка «Сказать» в ряду действий ----------

   РЕШЕНИЕ ШТАБА: кнопка знаков переехала с плавающего кружка в углу
   доски в общий ряд .панель-доски — четвёртой рядом с «Предложить
   ничью», «Сдаться» и «Отменить ход» (кладёт её туда js/шашки-экран.js,
   «построитьЗнаки»). Раньше под круглую кнопку в обёртке доски
   держалась пустая полоса 52 точки (padding-bottom), и она раздвигала
   доску и нижнюю панель игрока даже там, где кнопки вовсе не было
   (партия с другом на одном устройстве — знаки нужны только против
   бота и по сети, см. «сетьУмеетЗнаки» и «обновитьЗнаки» в js). Теперь
   кнопка в общем потоке ряда, своего места на доске не просит вовсе,
   и полоса не нужна.

   Вид кнопки — обычный «.кнопка.кнопка--мелкая», тот же, что у соседей
   по ряду; здесь только раскладка значка и подписи внутри неё в ряд. */
.кнопка-знаков {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.кнопка-знаков svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Лента «Что было» ----------

   Кнопка стоит в общем ряду под доской и оформлена как его соседи —
   мелкая и тихая: это справка, а не действие в партии. Отдельных
   правил ей почти не нужно, кроме одного: подпись не переносится,
   иначе ряд из четырёх кнопок подрастает и отбирает высоту у доски. */
.кнопка-лента {
  white-space: nowrap;
}

/* Строка ленты. Список читается сверху вниз, самое свежее — первым,
   поэтому строки простые: тихая подложка, ровный левый край, кегль
   как у подписей. Числа внутри (счёт, номера ходов) моноширинные —
   столбик не пляшет. */
.лента-шашек__строка {
  margin: 0;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  color: var(--текст);
  background: color-mix(in srgb, var(--текст) 7%, transparent);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* Самая свежая — то, ради чего ленту и открыли. Отмечена двумя
   признаками сверх цвета: полоской у левого края (глаз находит её
   раньше, чем читает) и жирной строкой. Кричать незачем: остальные
   строки тут же, рядом, и они тоже нужны. */
.лента-шашек__строка--свежая {
  font-weight: 700;
  background: color-mix(in srgb, var(--подсветка) 16%, transparent);
  border-left: 3px solid var(--подсветка);
  border-radius: 4px 8px 8px 4px;
  padding-left: 8px;
}

/* ---------- Просьба о ничьей ----------
   Плашка поверх доски, посередине: на неё нужно ответить, поэтому она
   не прячется в углу. Заметная — но не тревожная: это предложение
   закончить миром, а не беда. */
.предложение-ничьей {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(86%, 320px);
  padding: 14px;
  color: var(--текст);
  background: var(--панель);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1.5px var(--подсветка),
    0 10px 30px rgba(0, 0, 0, 0.42);
}

.предложение-ничьей__слова {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* «Согласиться» — главная: залита цветом темы. */
.предложение-ничьей__да.предложение-ничьей__да {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
}

/* «Играть дальше» — тихая: обводка вместо заливки. Отказ не должен
   выглядеть громче согласия, но и прятать его нельзя — это равный
   по праву ответ. */
.предложение-ничьей__нет.предложение-ничьей__нет {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--текст);
  background: transparent;
  border: 1px solid var(--край);
  box-shadow: none;
}

/* ---------- Короткий ответ про ничью ----------
   «Соперник хочет играть дальше» — живёт три секунды и гаснет.
   Тон спокойный нарочно: это не отказ в дурном смысле, а «давай
   доиграем». Поэтому обычная плашка в тон доски, без красного
   и без восклицаний. */
.ответ-про-ничью {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 5;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #ffffff;
  background: rgba(8, 26, 18, 0.62);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;       /* по доске можно ходить, пока строка висит */
}

/* ---------- Сама панель ----------

   Лежит поверх доски и прижата к её низу: так до кнопок ближе всего
   большому пальцу, а верх доски остаётся виден — человек не теряет
   партию из виду, пока выбирает знак. Ширину держим в разумных
   пределах: на планшете панель во весь экран выглядела бы нелепо. */
.панель-знаков {
  /* Отсчёт от окна, а не от доски. Доске панель всё равно не мешает —
     она вне потока в любом случае, — но от окна панель может быть выше
     доски, и это важно: середина её просит до 55 сотых высоты экрана
     (это задано в коде игры), и внутри доски такой рост упёрся бы
     в её квадрат — кнопок стало бы видно вдвое меньше. */
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  max-height: calc(var(--доступно, 100dvh) - var(--отступ-сверху, 0px) - 10px);
  padding: 10px 12px calc(6px + var(--отступ-снизу));
  color: var(--текст);
  background: var(--панель);
  border-radius: 16px 16px 12px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 -2px 10px rgba(0, 0, 0, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.34);
}

/* ---------- Вкладки: смайлики, фразы, броски ----------

   Три вкладки в ряд, каждая занимает треть полоски — так они читаются
   как один переключатель, а не как три отдельные кнопки. Полоска стоит
   в самом верху панели и не прокручивается: переключиться можно
   в любой момент, не возвращаясь наверх. */
.панель-знаков__вкладки {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
}

/* Сама вкладка. Высота 44 точки — размер пальца, меньше нельзя.
   Класс назван дважды в селекторе нарочно: у кнопки есть ещё общий
   класс кнопок выбора, и без этого он перебил бы здешние правила. */
.панель-знаков__вкладка.панель-знаков__вкладка {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--текст-тихий);
  background: transparent;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  /* Место под будущую черту выбранной вкладки занято всегда: иначе
     при переключении подписи прыгали бы на три точки вверх-вниз. */
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

/* ВЫБРАННАЯ ВКЛАДКА ОТЛИЧАЕТСЯ ТРЕМЯ ПРИЗНАКАМИ СРАЗУ, и это не запас
   ради красоты. Цвет — признак, который пропадает первым: на солнце
   экран выцветает, а каждый двенадцатый мужчина плохо различает
   оттенки. Поэтому кроме цвета работают ещё два: подпись становится
   жирной (это видно даже в чёрно-белом) и под вкладкой появляется
   толстая черта — она же показывает, что ряд знаков внизу принадлежит
   именно ей. Заливка — четвёртый, самый слабый признак. */
.панель-знаков__вкладка.кнопка--активная {
  color: var(--текст);
  font-weight: 800;
  background: color-mix(in srgb, var(--подсветка) 16%, var(--подложка));
  border-bottom-color: var(--подсветка);
}

.панель-знаков__вкладка:active {
  transform: none;
  background: var(--подложка);
}

/* Прокручиваемая часть. Потолок высоты и сама прокрутка заданы в коде
   игры нарочно — от них зависит, не уедут ли кнопки за край экрана,
   а это поведение, а не вкус. Здесь только воздух между рядами. */
.панель-знаков__середина {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
  /* Без этой строки середина отказывается сжиматься ниже своего
     содержимого (так столбики устроены по умолчанию), панель вырастает
     выше окна, и нижние знаки вместе с «Закрыть» уезжают за край —
     ровно та беда, от которой в коде и поставлен потолок высоты.
     Ноль разрешает ей сжаться, а прокрутка внутри уже есть. */
  min-height: 0;
}

.панель-знаков__ряд {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Подпись ряда — ярлык, а не заголовок: мелкая, прописными,
   с разрядкой. Такая же, как подписи разделов в таблице рейтинга. */
.панель-знаков__подпись {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--текст-тихий);
}

/* Кнопки ряда переносятся сами. Просвет тесный нарочно: чем больше
   знаков встаёт в один ряд, тем реже приходится прокручивать. */
.панель-знаков__кнопки {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Со вкладками ряд и сетка кнопок — это теперь один и тот же элемент
   (у него оба класса сразу). Без этой строки он взял бы «столбиком»
   от ряда, и восемь смайликов встали бы в колонку один под другим. */
.панель-знаков__ряд.панель-знаков__кнопки {
  flex-direction: row;
}

/* Кнопка знака. Ширина растёт под содержимое: смайлик занимает
   квадрат, фраза — сколько нужно словам. Высота у всех одна — 44 точки,
   это размер пальца, и уменьшать её нельзя даже на узком телефоне. */
.панель-знаков__знак {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 4px 10px;
  font: inherit;
  font-size: 18px;
  line-height: 1.15;
  color: var(--текст);
  background: var(--подложка);
  border: 1px solid var(--край);
  border-radius: 12px;
  cursor: pointer;
}

/* Кегль у всех кнопок пока один. По-хорошему рожице нужен крупный
   (её разглядывают), а фразе — мелкий (её читают), но отличить их
   оформление сейчас не может: и там и там просто текст внутри кнопки,
   а длину строки CSS не видит. Восемнадцать точек — середина, при
   которой и смайлик разборчив, и фраза не занимает пол-экрана.
   Как только у фраз появится свой класс, правило ниже оживёт само. */
.панель-знаков__знак--фраза {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.панель-знаков__знак:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--подсветка) 26%, var(--подложка));
}

/* ---------- Почему знак не ушёл ----------
   Это «подождите пару секунд», а не поломка, поэтому строка заметная,
   но спокойная: тёплая подложка вместо красной, обычный текст. */
.панель-знаков__отказ {
  flex: 0 0 auto;
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--текст);
  background: color-mix(in srgb, var(--подсветка) 22%, var(--подложка));
  border-radius: 10px;
}

/* ---------- «Закрыть» ----------
   Прилипла к низу панели и лежит ВНЕ прокручиваемой части: у карт
   человеку однажды пришлось доматывать список до конца, чтобы её найти,
   и это была ловушка. Полка во всю ширину панели, отделена чертой. */
.панель-знаков__закрыть {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 8px -12px calc(-6px - var(--отступ-снизу));
  padding: 12px 14px calc(12px + var(--отступ-снизу));
  font-size: 15px;
  font-weight: 700;
  color: var(--текст);
  background: var(--панель);
  border: none;
  border-top: 1px solid var(--край);
  border-radius: 0 0 12px 12px;
  box-shadow: none;
  cursor: pointer;
}

/* ---------- Пришедший знак ----------
   Показывается над доской, поверх неё, и гаснет сам. Плашка того же
   языка, что счётчики у карт: сукно (здесь — доска) сквозь неё видно,
   поэтому она не выглядит наклеенной. Нажатия сквозь неё проходят:
   пока знак висит, по доске всё равно можно ходить. */
.знак-за-доской {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #ffffff;
  background: rgba(8, 26, 18, 0.62);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ---------- Летящий предмет ----------

   Мой бросок летит снизу вверх, чужой — сверху вниз, чтобы было видно,
   кто в кого кинул. «pointer-events: none» здесь обязателен: без него
   предмет на секунду перехватывает нажатия, и человек в этот момент
   не может сходить — палец жмёт, а доска молчит. */
.летящий-предмет {
  position: absolute;
  left: 50%;
  z-index: 5;
  font-size: 40px;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.летящий-предмет--вверх {
  bottom: 8%;
  animation: шашки-полёт-вверх 0.9s ease-in forwards;
}

.летящий-предмет--вниз {
  top: 8%;
  animation: шашки-полёт-вниз 0.9s ease-in forwards;
}

@keyframes шашки-полёт-вверх {
  from { transform: translate(-50%, 0) rotate(0deg) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, -12%) rotate(-40deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  to   { transform: translate(-50%, -620%) rotate(-320deg) scale(0.9); opacity: 0; }
}

@keyframes шашки-полёт-вниз {
  from { transform: translate(-50%, 0) rotate(0deg) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, 12%) rotate(40deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  to   { transform: translate(-50%, 620%) rotate(320deg) scale(0.9); opacity: 0; }
}

/* ---------- Знаки на узком или невысоком телефоне ----------
   Ужимаем поля и просветы, но не высоту кнопок: 44 точки остаются
   при любой ширине экрана. */
@media (max-width: 360px), (max-height: 620px) {
  .панель-знаков { padding-left: 8px; padding-right: 8px; }
  .панель-знаков__середина { gap: 8px; }
  .панель-знаков__кнопки { gap: 5px; }
  .панель-знаков__знак { padding: 4px 7px; }
  .панель-знаков__закрыть { margin-left: -8px; margin-right: -8px; }
  .знак-за-доской { font-size: 14px; padding: 4px 10px; }
  .летящий-предмет { font-size: 34px; }
}

/* Кому мешает движение — тому его нет и здесь: предмет просто
   не летит (сам полёт игра в этом случае и не запускает), а панель
   и кнопки работают как обычно. Кнопка знаков теперь обычная кнопка
   ряда — своего правила про active ей больше не нужно. */
@media (prefers-reduced-motion: reduce) {
  .летящий-предмет { animation: none; opacity: 0; }
}

/* ---------- Баннер лобби ----------
   Рамка той же высоты, что у дурака (16:10), с подписью под картинкой
   (владелец 02.10: все онлайн-игры — как дурак). Свою пропорцию больше
   не задаём — берётся общая из style.css. Панорама режется «cover»-ом
   по краям: держим центр, где доска. */
.лобби__картинка .лобби__рисунок {
  object-position: 50% 50%;
}