/* ================================================================
   Шахматы — оформление доски.

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

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

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

   Три правила, из которых выведено остальное (те же, что у шашек, —
   доски у двух игр устроены одинаково):

   1. Доска сама себе цвет. И в светлой теме Telegram, и в тёмной
      доска остаётся деревянной. Красить её цветами темы нельзя:
      светлые поля в светлой теме сольются с фоном страницы,
      а белые фигуры потеряют контур.
   2. Клетка отдаёт всё место пальцу. На телефоне в 320 точек клетка
      выходит около 37 — штаб 15 сентября принял это сознательно,
      рамка набора владельца важнее одной точки, а телефонов шириной 320 мало.
      На 360 и шире клетка 42+. Доска идёт от края до края, рядов кнопок под ней ровно один.
   3. Подсветки различаются формой, а не только цветом: точка — тихий
      ход, кольцо — взятие, заливка на весь квадрат — поднятая фигура
      и последний ход, красное пятно — шах.
   ================================================================ */

:root {
  /* Цвета клеток — запасные, под картинкой. Настоящий вид клетки теперь
     даёт текстура набора владельца (square_light/square_dark.png, см.
     ниже, блок «Клетка»), а переменные остаются как цвет-подложка: пока
     картинка не загрузилась и для мест, где нужен просто цвет клетки
     (например кружок «чей ход» ниже вообще не про клетку, а вот сама
     заливка под текстурой — про неё). */
  --поле-светлое: var(--шахматы-поле-светлое, #ead8b4);
  --поле-тёмное:  var(--шахматы-поле-тёмное,  #96663f);
  --рамка-доски:  var(--шахматы-рамка,        #4b3221);

  /* Цвет кружка перед надписью «Ходят белые/чёрные» (см. ниже,
     «Строка хода»). У фигур на доске своего цвета больше нет — это
     готовые картинки набора владельца — а кружок статуса рисует CSS,
     и ему по-прежнему нужны два цвета с ободком. */
  --фигура-белая:      #faf6ec;
  --фигура-белая-край: #3a2413;
  --фигура-чёрная:      #1b1b1f;
  --фигура-чёрная-край: #e7d9bd;

  /* Подсветка выбранной клетки и тихого хода — картинки набора
     (highlight_selected, move_dot), см. блок «Куда можно пойти» ниже.
     Переменная осталась как цвет запасом для кружка статуса. */
  --подсветка: var(--шахматы-подсветка, #ffd66b);

  /* Взятие. Готовой картинки для него в наборе владельца нет (см.
     эталон/шахматы-набор/ASSET_TABLE_RU.md) — кольцо рисует CSS, и это
     единственное место доски, где цвет не из дерева, а акцентный
     салатовый сборника: «здесь можно съесть» должно бросаться в глаза
     так же, как акцент везде в игре. */
  --ход-взятие:  #CDFF43;
  --шах:         #ff3b30;
  --нельзя:      #ff3b30;

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

  /* Толщина рамки доски: 32 точки из исходных 875 в наборе владельца
     (эталон/шахматы-набор/layout_tokens.json, boardGeometryInReference) —
     то есть ~3,657% ширины доски. Число посчитано оттуда, а не подобрано
     на глаз. */
  --толщина-рамки: 3.657%;
}

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

   Правило владельца: страница тёмная с одним салатовым акцентом,
   сукно и дерево — только внутри стола. У шахмат «стол» — сама доска:
   она остаётся деревянной (или каменной, мраморной — смотря что выбрал
   человек) внутри своей рамы, её цвета выше, в :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(--сб-фон);
}

/* Главная кнопка в сборнике салатовая и с почти чёрной подписью.
   Общее правило кнопок притемняет цвет темы на седьмую часть
   (color-mix с чёрным) — салатовый от этого делался грязно-оливковым.
   То же правило стоит у шашек и нард. У шахмат под самой доской своих
   «главных» кнопок нет — «Играть с ботом» и «Играть вдвоём» там уже
   помечены классом «кнопка--мелкая» (тихие, это партийные действия,
   а не вход в игру), и это правило их не красит нарочно: теперь
   главный вход — карточка «Играть с ботом» в лобби, у неё свой
   салатовый цвет из класса «карточка-входа--боты» в общем style.css. */
#приложение .кнопка:not(.кнопка--мелкая):not(.кнопка--выбор) {
  background: var(--сб-акцент);
  color: var(--сб-акцент-текст);
}

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

  /* ---------- До кнопок под доской теперь можно добраться всегда ----------

     ЧТО БЫЛО СЛОМАНО. На телефоне 320×568 пять кнопок из девяти лежали
     ЗА нижним краем окна: «Поворот доски» и «Буквы и цифры» — наполовину,
     «Звук», «Оформление» и «Рекорды» — целиком. Достать их было нечем:
     экран ростом ровно в окно, а прокрутки у него не было никакой.
     Замер: содержимое просило 628 точек при окне 568 — не помещалось 60.
     На 360×640 за краем оставались три последние кнопки, на 390×844
     всё было в порядке, поэтому беда и не бросалась в глаза.

     ПОЧЕМУ НЕ СЖАЛАСЬ ДОСКА. Обёртке доски написано «можешь сжиматься»
     (flex: 0 1 auto), но строкой выше стоит «#экран-шахмат > * { flex-shrink: 0 }»,
     а правило с именем экрана сильнее правила с классом — сжатие
     запрещено. Проверил опытом, а не на глаз: временно разрешил обёртке
     сжиматься — доска тут же ужалась с 320 до 254 точек, и всё влезло.
     Значит причина именно в этом, а потолок высоты («max-height: 100%»)
     ни при чём: он равен высоте экрана и ничего не ограничивает.

     ПОЧЕМУ ВСЁ-ТАКИ НЕ СЖИМАЕМ ДОСКУ. Та проба и показала цену: клетка
     падает с 39 точек до 32. В шапке этого файла записано, что 38 —
     нижняя граница попадания пальцем, и опускаться ниже нельзя: шахматы
     проигрывают не от того, что кнопка «Оформление» далеко, а от того,
     что палец бьёт мимо фигуры. Доска в шахматах упирается в ширину,
     и отнимать у неё высоту — значит отнимать у клетки.

     ЧТО СДЕЛАНО ВМЕСТО ЭТОГО. Экран честно прокручивается. Доска
     остаётся во всю ширину, при открытии видно её целиком, ряд уровней
     и два ряда кнопок; нижние ряды подрезаны краем — это и есть
     подсказка, что там есть продолжение. Перетаскивания фигур в игре
     нет (ходят двумя касаниями), поэтому прокрутка ходам не мешает.
     «overscroll-behavior: contain» нужен для Telegram: без него
     оттянутая страница закрывает само мини-приложение. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Полосу прокрутки прячем, и вот почему это не украшательство.
     На телефоне полоса накладная и ширины не отнимает, а в браузере
     на большом экране она классическая: забирает 15 точек ширины.
     Доска считается от ширины — и клетка тут же падает с 39 точек
     до 37, ниже той самой границы попадания пальцем, ради которой
     мы и отказались сжимать доску. Признак прокрутки при этом
     остаётся честным: нижний ряд кнопок подрезан краем окна. */
  scrollbar-width: none;
}

#экран-шахмат::-webkit-scrollbar { width: 0; height: 0; }
#экран-шахмат > * { flex-shrink: 0; }

/* ---------- Куда девать пустую полосу ----------

   Доска квадратная и упирается в ширину экрана, а высоты на
   вертикальном телефоне остаётся вдвое больше: тестировщик намерил
   около 380 точек голого сукна между доской и кнопками. Растянуть
   доску нельзя — она уже во всю ширину; значит пустоту надо обжить,
   как в нардах.

   Порядок такой. Выбор уровня — это про партию, он поднимается
   вплотную к доске и читается вместе с ней. Кнопки управления
   («К выбору игры», «Играть вдвоём», «Поворот доски») уходят
   к нижнему краю, под большой палец. Пустота остаётся одна, между
   двумя осмысленными частями, и читается как поле, а не как дыра.

   Распорка одна, а не две: в нардах я попробовал две — содержимое
   повисло посреди сукна, ни к чему не привязанное. */
#экран-шахмат .выбор-соперника {
  margin-top: 2px;            /* прижат к доске: это настройка партии */
}

#экран-шахмат .панель-доски {
  margin-top: auto;           /* кнопки управления — к нижнему краю */
}

/* Название служебное: оно говорит, что за игра открыта,
   а смотрят на доску. Поэтому мельче общего заголовка. */
#экран-шахмат .заголовок--доска {
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Строка хода ----------
   Главная надпись экрана: чей ход, есть ли шах, почему отказ.
   Высота задана наименьшей, а не точной: «Ходят чёрные: королю
   шах!» на узком экране встаёт в две строки, и плашка обязана
   вырасти, а не обрезать текст. Доска при этом уменьшится сама. */
#строка-хода {
  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: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: -1px;
  border-radius: 50%;
  border: 1px solid var(--фигура-белая-край);
}
.строка-хода--белые::before  { background: var(--фигура-белая); }
.строка-хода--чёрные::before { background: var(--фигура-чёрная); border-color: var(--фигура-чёрная-край); }

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

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

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

/* Трофеи — фигуры соперника, которые взял этот игрок, плюс перевес
   материала. Занимают всё, что осталось между именем и правым краем
   панели (в Э3 туда же встанут часы — трофеи потеснятся сами, без
   отдельной правки). Пусто — блок пустой, без рамки и подложки: он
   ничем не отмечен на экране, пока взятых фигур нет. */
.панель-игрока-шахмат__трофеи {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.панель-игрока-шахмат__трофеи .фигура {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.панель-игрока-шахмат__перевес {
  flex: 0 0 auto;
  margin-left: 3px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--текст-тихий);
}

/* ---------- Часы (Э3) ----------
   Плашка «мм:сс» у правого края панели, последний ребёнок после трофеев
   (которые сами сжались под неё — «.…__трофеи» выше эластичный, «flex:1
   1 auto»). «Без часов» — узла не видно вовсе (класс «скрыт» ставит
   js/шахматы-экран.js), а не пустая плашка. Цифры моноширинные
   («tabular-nums»): без этого «05:00» → «04:59» дёргает ширину плашки
   на каждую секунду, и рядом с ней прыгают трофеи. */
.панель-игрока-шахмат__часы {
  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» под названием партии. Мельче обычной «.подпись»
   и без своего отступа сверху: строка служебная, читается вместе
   с заголовком, а не как отдельная мысль. «Без часов» — узла не видно
   вовсе (класс «скрыт»), высота под него не резервируется нигде —
   доска на «Без часов» остаётся той же ширины, что и до Э3. */
#экран-шахмат .подзаголовок-контроля {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--текст-тихий);
  text-align: center;
}

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

/* ---------- Лента записи ходов (Э2) ----------
   Одна строка с прокруткой, вровень с доской и панелями (та же формула
   ширины). Автопрокрутку к последнему ходу делает js/шахматы-экран.js —
   здесь только вид. Партии ещё нет («:empty») — плашки не видно вовсе,
   тем же приёмом, что у общей «.пилюля» в style.css. */
#запись-ходов {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: calc(100% + 2 * var(--поле-экрана));
  margin-inline: calc(-1 * var(--поле-экрана));
  min-height: 30px;
  padding: 6px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: var(--подложка);
  border: 1px solid var(--край);
  border-radius: 999px;
  scrollbar-width: none;
}
#запись-ходов::-webkit-scrollbar { width: 0; height: 0; }
#запись-ходов:empty { display: none; }

.запись-ходов__пара {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}
.запись-ходов__номер {
  font-size: 13px;
  font-weight: 600;
  color: var(--текст-тихий);
}
.запись-ходов__ход {
  font-size: 14px;
  font-weight: 600;
  color: var(--текст);
}

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

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

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

/* ---------- Доска ----------
   Обёртка шире экрана ровно на его поля: так доска на телефоне
   встаёт от края до края и клетка выходит крупнее. */
.обёртка-доски {
  /* Обёртка больше не забирает всю свободную высоту, а держит квадрат
     по ширине — ровно столько, сколько занимает доска. Пока она была
     растянута, пустая полоса пряталась ВНУТРИ неё: доска стояла у
     верхнего края, а под доской, но всё ещё внутри обёртки, лежало
     около трёхсот восьмидесяти точек сукна, и никакая распорка ниже
     до этой пустоты не дотягивалась.

     «aspect-ratio» — это «высота равна ширине». Потолок в 100 %
     обязателен: в низком окне (шторка Telegram) квадрат по ширине
     не помещается по высоте, и без потолка низ доски ушёл бы за край.
     Размер доски при этом считается от обёртки, как и раньше, —
     значит она сама подстроится под то, что осталось. */
  flex: 0 1 auto;
  aspect-ratio: 1;
  max-height: 100%;
  min-height: 0;
  width: calc(100% + 2 * var(--поле-экрана));
  margin-inline: calc(-1 * var(--поле-экрана));
  display: flex;
  /* Доска прижата к верху обёртки, а не висит в её середине.
     Почему так. Обёртка забирает всю свободную высоту, а доска
     квадратная и на вертикальном телефоне упирается в ширину —
     лишняя высота остаётся. Пока доска стояла по центру, эта пустота
     делилась поровну, и на 390 точках получался заметный провал между
     строкой хода и доской, а кнопки внизу выглядели оторванными.
     Теперь пустое место всё целиком уходит вниз, к кнопкам: сверху
     надпись «ходят белые» стоит прямо над доской, а кнопки остаются
     под рукой у нижнего края — привычная раскладка телефонной игры.
     Растянутость обёртки при этом сохранена нарочно: от её высоты
     считается размер доски (100cqh ниже), и «сжать по содержимому»
     здесь нельзя — доска обнулилась бы. */
  align-items: flex-start;
  justify-content: center;
}

/* ---------- Рамка доски ----------
   Раньше это был просто border 3px сплошным цветом. Теперь рамка —
   полоса материала набора владельца толщиной --толщина-рамки (см. :root)
   вокруг сетки клеток, а не плоская линия. Фон — та же тёмная текстура,
   что и у тёмной клетки, притемнённая наложением («background-blend-mode:
   multiply») до тона рамки набора: своей отдельной картинки-рамки мы не
   берём (board_frame_overlay из набора запекает буквы и цифры, а доска
   у нас поворачивается к чёрным, и подписи выключаются кнопкой «Буквы
   и цифры» — готовая картинка с вписанными буквами так уметь не может).

   Запасной размер (без мерных блоков контейнера) — 340 точек это всё,
   что стоит выше и ниже доски: название, панель верхнего игрока, строка
   хода, лента записи ходов, панель нижнего игрока, ряд уровней, ряд
   кнопок и отступы. Было 250 — панели игроков и ленту (Э2) формула
   не учитывала вовсе, и в браузере без мерных блоков контейнера доска
   вставала на добрую сотню точек выше, чем есть места. Фаска и тень —
   те же, что были у прежней рамки. */
.доска-шахмат-рамка {
  position: relative;
  width: min(100%, calc(100vh - 340px));
  width: min(100%, calc(100dvh - 340px - var(--отступ-сверху) - var(--отступ-снизу)));
  aspect-ratio: 1 / 1;
  padding: var(--толщина-рамки);
  background-color: var(--рамка-доски);
  background-image: url('img/шахматы/square_dark_101x101.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;
}

/* Умеет мерные блоки — считаем размер доски от места, которое ей
   реально осталось, а не от вычтенных на глаз 190 точек. */
/* ---------- Невысокое окно: ужимаем всё, кроме доски и кнопок ----------

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

   Чего здесь НЕТ нарочно: доски и высоты кнопок. Клетка 39 точек и так
   на нижней границе попадания пальцем, а кнопка ниже 40 точек — это
   промах вместо нажатия. Ужимать надо буквы, а не то, во что целятся.

   Порог 700 точек по высоте берёт и iPhone SE (568), и телефоны
   в 640 — те два размера, где кнопки и уезжали за край. */
@media (max-height: 700px) {
  #экран-шахмат { gap: 4px; }

  #экран-шахмат .заголовок--доска { font-size: 17px; }

  #строка-хода {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 14px;
  }

  .панель-доски { gap: 5px; }
}

/* ---------- Большое окно: доска не должна быть больше самого окна ----------

   Игра телефонная, но открывают её и в браузере на компьютере — мы сами
   так проверяем. Там доска считается от ширины окна и вырастала до 888
   точек при высоте окна 900: содержимое просило 1104, и ряды кнопок опять
   оказывались за краем — та же беда, что на узком телефоне, только
   с другого конца.

   Поэтому в широком окне доске ставится потолок по высоте: «сколько
   осталось от окна» за вычетом 420 точек — это название, панель верхнего
   игрока, строка хода, лента записи ходов, панель нижнего игрока, ряд
   уровней, ряды кнопок и просветы между ними (было 330 — панели и ленту
   (Э2) число тоже не учитывало, той же добавкой, что и у запасного
   размера доски выше). Телефонов правило не касается вовсе (порог 700
   точек по ширине): там доска упирается в ширину, и отнимать у неё
   высоту нельзя — клетка и так на нижней границе попадания пальцем. */
@media (min-width: 700px) {
  .обёртка-доски { max-height: calc(100dvh - 420px); }
}

@supports (container-type: size) {
  .обёртка-доски { container-type: size; }
  .доска-шахмат-рамка { width: min(100cqw, 100cqh); container-type: size; }

  /* Клетку тоже объявляем мерной: размер фигуры должен считаться
     от размера клетки, а не от шрифта страницы. Было 76cqmin — против
     эталона (эталон/шахматы-набор/стол-эталон-941x1672.png, фигура
     ~90% высоты клетки) картинка с прозрачными полями по краям на 76
     выходила заметно мельче, ~60%. 94cqmin — с поправкой на эти поля. */
  .поле { container-type: size; }
  .поле .фигура { width: 94cqmin; height: 94cqmin; }

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

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

/* ---------- Фигуры ----------
   Картинки набора владельца (эталон/шахматы-набор, gameplay/pieces,
   384×384 каждая) — их 12: по шесть на цвет. JS ставит на узел ровно
   два класса, цвет и вид («фигура--белая фигура--конь»), а какую
   картинку показать — решает пара правил ниже, одно на каждое сочетание.
   Браузер сам уменьшает картинку до размера клетки — заранее её никто
   не увеличивал (так требует эталон/шахматы-набор/CLAUDE_CODE_INSTRUCTIONS_RU.md).
   Знак не трогает нажатия: тап всегда достаётся клетке под ним. */
.фигура {
  position: relative;
  z-index: 20;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.фигура--белая.фигура--король  { background-image: url('img/шахматы/pieces/white_king.png'); }
.фигура--белая.фигура--ферзь   { background-image: url('img/шахматы/pieces/white_queen.png'); }
.фигура--белая.фигура--ладья   { background-image: url('img/шахматы/pieces/white_rook.png'); }
.фигура--белая.фигура--слон    { background-image: url('img/шахматы/pieces/white_bishop.png'); }
.фигура--белая.фигура--конь    { background-image: url('img/шахматы/pieces/white_knight.png'); }
.фигура--белая.фигура--пешка   { background-image: url('img/шахматы/pieces/white_pawn.png'); }
.фигура--чёрная.фигура--король { background-image: url('img/шахматы/pieces/black_king.png'); }
.фигура--чёрная.фигура--ферзь  { background-image: url('img/шахматы/pieces/black_queen.png'); }
.фигура--чёрная.фигура--ладья  { background-image: url('img/шахматы/pieces/black_rook.png'); }
.фигура--чёрная.фигура--слон   { background-image: url('img/шахматы/pieces/black_bishop.png'); }
.фигура--чёрная.фигура--конь   { background-image: url('img/шахматы/pieces/black_knight.png'); }
.фигура--чёрная.фигура--пешка  { background-image: url('img/шахматы/pieces/black_pawn.png'); }

/* ---------- Куда можно пойти ----------
   Две подсветки бывают на соседних клетках, поэтому различаются формой,
   а не только цветом: точка — пустое поле, кольцо вокруг фигуры — взятие.
   Обе картинки набора владельца (highlight_selected для выбора,
   move_dot для тихого хода) кладутся псевдоэлементом НАД фигурой
   (z-index больше, чем у «.фигура»): по слоям набора это уровень 30,
   фигуры — уровень 20 (см. эталон/шахматы-набор/CLAUDE_CODE_INSTRUCTIONS_RU.md,
   «Слои доски»). Взятие рисует не картинка (в наборе её нет для этого
   случая), а CSS-кольцо цвета акцента сборника — оно тоже выше фигуры,
   чтобы обхватывать её по контуру. */
.поле--можно::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  background-image: url('img/шахматы/move_dot_101x101.png');
  background-size: cover;
  pointer-events: none;
}
.поле--можно-взятие::before {
  content: "";
  position: absolute;
  inset: 5%;
  z-index: 30;
  border-radius: 50%;
  border: 4px solid var(--ход-взятие);
  /* Ободок с обеих сторон кольца, снаружи и изнутри: кольцо лежит
     поверх фигуры, а фигуры бывают и белые, и чёрные. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

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

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

/* Шах. Красное пятно под королём — первое, чего не понимает новичок,
   поэтому оно яркое и лежит поверх текстуры клетки, а не вместо неё
   (второй слой — та же переменная «--фон-клетки», что и у клетки
   и у «последнего хода» выше). */
.поле--шах {
  background-image:
    radial-gradient(circle, rgba(255, 59, 48, 0.95) 0%, rgba(255, 59, 48, 0.55) 45%, rgba(255, 59, 48, 0) 72%),
    var(--фон-клетки);
  background-size: cover, cover;
}

/* Так ходить нельзя: клетка дважды вспыхивает красным.
   Просто «ничего не произошло» человек читает как поломку. */
@keyframes отказ-вспышка {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--нельзя); }
  50%      { box-shadow: inset 0 0 0 5px var(--нельзя); }
}
.поле--отказ { animation: отказ-вспышка 0.45s ease-in-out 2; }

/* ---------- Подписи полей ----------
   В шахматах они почти обязательны: ходы записывают буквами и цифрами,
   и человеку надо видеть, где e4. Выключаются кнопкой «Буквы и цифры».

   Раньше подпись сидела внутри клетки, в её углу. Теперь 16 узлов
   (восемь цифр, восемь букв) — дети РАМКИ доски, а не клетки: набор
   владельца кладёт подписи в полосу рамки, и они не съедают место
   у фигуры. Своё физическое место в полосе (индекс 0…7 сверху вниз
   для цифр, слева направо для букв) метка получает через числовую
   переменную «--ряд» или «--столбец» — её ставит js/шахматы-экран.js
   при сборке доски. Какая именно цифра или буква там написана словом,
   тоже решает он: при повороте доски меняется текст, а не место. */
.метка-буква,
.метка-цифра {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 238, 210, 0.9);
  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%);
}
.доска-шахмат-рамка:not(.доска-шахмат--с-метками) .метка-буква,
.доска-шахмат-рамка:not(.доска-шахмат--с-метками) .метка-цифра { display: none; }

/* ---------- Баннер лобби ----------
   Рамка той же высоты, что у дурака (16:10), с подписью под картинкой
   (владелец 02.10: все онлайн-игры — как дурак). Общее правило
   style-коллекция.css для «лобби-2026» ставило панораму 1942:809 —
   перебиваем его здесь более точным селектором (тот файл подключён
   позже, равный вес проиграл бы). Панорама режется «cover»-ом по краям:
   держим центр, где конь и король. */
body #экран-лобби figure.лобби__картинка:has(img[src*="лобби-2026"]) {
  aspect-ratio: 16 / 10;
}
body #экран-лобби figure.лобби__картинка .лобби__рисунок {
  object-position: 50% 50%;
}

/* ---------- Ряд уровней ----------
   Во всю ширину телефона три слова «Лёгкий Обычный Сложный»
   смотрятся полосой и спорят с доской за внимание, поэтому ряд
   ограничен по ширине. Сами кнопки (кнопка--выбор) уже описаны
   в общем style.css. */
.выбор-соперника.выбор__кнопки {
  width: min(100%, 320px);
  gap: 6px;
}
.выбор-соперника .кнопка.кнопка--выбор {
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14px;
}

/* ---------- Ряд кнопок под доской ----------
   Каждый лишний ряд отнимает у доски целую клетку. */
.панель-доски {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* ---------- Плашка «кем станет пешка» ----------
   Четыре крупные кнопки, а не выпадающий список: списком в игре
   на телефоне не попасть пальцем, да и выбор тут — часть хода,
   его должно быть видно целиком. */
.выбор-превращения {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.кнопка--превращение {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 66px;
  min-height: 66px;
  padding: 6px 8px;
  font-size: 13px;
}
/* Знак на кнопке — тот же узел «.фигура», что и на доске (см. блок
   «Фигуры» выше), но со своим размером: базовый там вырос до 40×40
   (см. правку про эталон), а кнопка не резиновая — заданный там размер
   раздвинул бы её выше min-height. 36×36 — тот же рост, что у доски,
   и вместе с текстом и отступами кнопки всё ещё умещается в 66px. */
.кнопка--превращение .фигура {
  width: 36px;
  height: 36px;
}