/**
 * «Поле любви»: доска.
 *
 * ПАЛИТРА УЖЕ НАША, И ЭТО НЕ СОВПАДЕНИЕ. Боевая страница написана теми же
 * цветами, что каркас: почти чёрный фон, золото канта, синевато-серый у него,
 * пыльная роза у неё. Поэтому здесь нет ни одного своего цвета: всё берётся
 * токенами, и доска перекрасится вместе с темой.
 *
 * ДОСКА ВО ВСЮ ШИРИНУ, БЕЗ КАРТОЧКИ И БЕЗ ПОЛЕЙ. Решение владельца от 28.07,
 * записанное в спеке приложения: край в край, как доска крестиков. Именно это
 * покупает место: на 390 точках клетка становится около 52 вместо 44, то есть
 * крупнее клавиши на клавиатуре, и мелкие доски перестают быть мелкими.
 *
 * ВЫСОТУ ДОСКИ НАЗНАЧАЕТ ХОЛСТ, А НЕ CSS. Строк столько, сколько влезло, и
 * считает их движок по ширине; здесь мы только даём ему место и не мешаем.
 */

/*
 * ЗА ДОСКОЙ НИЧЕГО НЕ ПРОКРУЧИВАЕТСЯ. Владелец 05.09.2026: «на десктопе не
 * должно быть скрола на поле». Доска стоит `fixed` и сама не прокручивается, но
 * страница ПОД ней остаётся обычной страницей каркаса, и её полоса прокрутки
 * доезжает до края экрана справа от доски.
 *
 * Правило висит на присутствии доски, а не на классе тела: класс пришлось бы
 * заводить в `nav.js` и снимать при уходе, то есть в двух местах, и однажды он
 * остался бы висеть на экране, который прокручивать нужно. Доска пропала,
 * правило перестало действовать само.
 */
:root:has(.lf), body:has(.lf) { overflow: hidden; }

.lf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /*
   * ВЫСОТА ПО САМОМУ МАЛЕНЬКОМУ ОКНУ, как у сексополии и по той же причине:
   * при `inset: 0` высота берётся от layout viewport, а он на телефоне равен
   * окну БЕЗ адресной строки, и низ полосы хода уезжает под неё. `svh` это окно
   * со строкой на месте, и оно не меняется при прокрутке; `vh` запасным для
   * браузеров, которые `svh` ещё не знают.
   */
  height: 100vh;
  height: 100svh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * СУКНО ПОД ДОСКОЙ. Картинка та же, что в приложении
 * (`assets/art/lovefield/field.webp`): бархат, на котором лежит стекло. Без неё
 * доска висит на плоском чёрном, и кант клеток не за что зацепиться глазу.
 *
 * ЗАВЕСА БЫЛА ВТРОЕ ГУЩЕ, ЧЕМ НАДО. Первая редакция клала поверх картинки фон
 * при 88 / 66 / 82 процентах, то есть оставляла от бархата шестую часть.
 * Владелец 05.09.2026: «на сайте ты почему-то сильно приглушил картинку сзади»,
 * и отдельно: «на десктопе почему-то не вижу арта сзади». Второе следствие
 * первого: широкое окно режет из картинки узкую полосу середины, она темнее
 * краёв, и под густой завесой от неё не остаётся ничего.
 *
 * Теперь завеса держит только читаемость: плотнее к верху, где счётчик, и к
 * низу, где имена, и почти прозрачна посередине, где лежит доска. Стекло клеток
 * само по себе белое и на бархате читается.
 */
.lf__sukno {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 24%, transparent) 45%,
      color-mix(in srgb, var(--c-bg) 30%, transparent) 78%,
      color-mix(in srgb, var(--c-bg) 58%, transparent) 100%),
    url('/next/images/lovefield-field.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--c-bg);
}

/* Всё, кроме сукна, лежит НАД ним. */
.lf > :not(.lf__sukno) { position: relative; z-index: 1; }

/*
 * МОНЕТА ЛОЖИТСЯ НА ВЕСЬ ЭКРАН, а не в конец колонки.
 *
 * Правило выше даёт всем детям `.lf` относительное положение и первый слой, и
 * накладке монеты оно достаётся тоже: её собственные `absolute` и `z-index: 5`
 * весом меньше и проигрывают. Монета перестаёт быть накладкой, становится
 * блоком колонки и падает под полосу хода размером в себя саму. Ровно это
 * уже случилось у «горячо или холодно», и правило здесь такое же.
 */
.lf > .coin-over {
  position: absolute;
  inset: 0;
  z-index: 30;
}

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

.lf__verkh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4) 0 var(--s-2);
  flex: 0 0 auto;
}

.lf__ostalosj {
  margin-left: auto;
  font: 500 var(--t-label-s) var(--f-sans);
  color: var(--c-dim);
}

/* ---------- доска ---------- */

/*
 * Короб отдаёт холсту всю ширину и всю оставшуюся высоту. Холст сам решает,
 * сколько строк в неё влезло, и ставит себе высоту числом.
 */
.lf__doska {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lf__kholst {
  display: block;
  /* Палец ставит фишку, а не тянет страницу. */
  touch-action: manipulation;
  cursor: pointer;
}

/* ---------- полоса хода ---------- */

/*
 * ПОЛОСА ХОДА ПЕРЕНЕСЕНА ИЗ ПРИЛОЖЕНИЯ ЦЕЛИКОМ (`_turnStrip`).
 *
 * Первая редакция ставила две колонки по центру, лицо над именем над счётом, и
 * теряла третью строку. Владелец 05.09.2026: «внизу ты разместил не так как в
 * приложении аватарки и статистику, не скопировал пиксель в пиксель, много
 * упущений». Числа ниже оттуда, из отступов виджета: поля 16 / 8 / 16 / 12,
 * зазор между половинами 12, лицо 34, зазор после лица 8.
 *
 * ДВЕ РАВНЫЕ ПОЛОВИНЫ ВО ВСЮ ШИРИНУ, а не две колонки посередине: каждая
 * половина это `Expanded`, то есть ровно половина полосы, и внутри неё всё
 * прижато к своим краям. Имя и подпись влево, счёт вправо.
 *
 * ВЫСОТА ПОЛОСЫ ЗАДАНА ЗАРАНЕЕ, И ЭТО НЕ ОФОРМЛЕНИЕ, А ПОЧИНКА. Доска считает,
 * сколько строк влезло, по высоте оставшегося места. Пока полоса пуста, места
 * «остаётся» больше, чем будет; доска берёт лишнюю строку и после заполнения
 * полосы уезжает под неё. На снимке это выглядело как срезанные верхний и
 * нижний ряды. Померено: короб при замере 847, после заполнения 755.
 *
 * Число не с потолка: лицо 34 против двух строк текста, плюс поля 8 и 12. Ни
 * имя, ни подпись не переносятся, поэтому высота постоянна.
 */
.lf__khod {
  flex: 0 0 auto;
  min-height: 74px;
  box-sizing: border-box;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-3);
}

/* Половина полосы. Обе равны, что бы в них ни было написано. */
.lf__igrok {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Имя и подпись состояния столбиком, прижатые влево. */
.lf__kto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.lf__imya {
  font: 500 var(--t-label-m) var(--f-sans);
  color: var(--c-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* У того, чей ход, имя обычным текстом: в приложении ровно эта развилка. */
.lf__igrok--khodit .lf__imya { color: var(--c-text); }

/*
 * ПОДПИСЬ СОСТОЯНИЯ. Прописными и вразрядку 1.6, как в приложении; цвет места
 * ставит разметка, потому что цвет знает только она.
 */
.lf__sostoyanie {
  font: 500 var(--t-label-s) var(--f-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-dim);
  white-space: nowrap;
}

.lf__schyot {
  flex: 0 0 auto;
  font: 400 var(--t-title-m) var(--f-serif);
  color: var(--c-dim);
}

/* ---------- шторка задания и конца ---------- */

.lf-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}

/* Кто должен и на какой ступени: надбровка, золотом, как везде в каркасе. */
.lf-list__kto {
  margin: 0;
  font: 600 var(--t-label-l) var(--f-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/*
 * Сама строка. Засечный и с воздухом между строк: её читают вслух, а не
 * пробегают глазами.
 */
.lf-list__stroka {
  margin: 0;
  font: 400 var(--t-headline-s) var(--f-serif);
  line-height: 1.45;
  color: var(--c-text);
}

.lf-list__itog {
  margin: 0;
  font: 400 var(--t-headline-m) var(--f-serif);
  color: var(--c-text);
}

.lf-list__schyot {
  display: flex;
  justify-content: center;
  gap: var(--s-7);
  margin: var(--s-2) 0;
}

.lf-list__mesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

.lf-list__chislo {
  font: 400 var(--t-display-s) var(--f-serif);
  color: var(--c-gold);
}

/*
 * ОТКАЗ ВЫГЛЯДИТ КАК ОТКАЗ, А НЕ КАК ВТОРАЯ ГЛАВНАЯ КНОПКА. Он ничего не стоит
 * и потому не должен спорить с «Готово» за внимание: призрачная кнопка, как во
 * всех остальных шторках каркаса.
 */
.lf-list__otkaz {
  background: transparent;
  color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
}

.lf-list .btn { width: 100%; }

/* ---------- десктоп ---------- */

/*
 * СЛЕВА РЕЛЬС РАЗДЕЛОВ, И ЭКРАН НАЧИНАЕТСЯ ЗА НИМ. Доска стоит `fixed`, то есть
 * меряется от окна, и без отступа накрыла бы рельс вместе с выходом из игры. Та
 * же строка и по той же причине у слотов, сексополии, колеса, «правды или
 * действия» и «горячо или холодно»; число тут одно на всех и приходит
 * переменной, потому что на 1440 и 1920 рельс шире.
 */
@media (min-width: 1024px) {
  .lf { left: var(--kolonka, 264px); }
}

/*
 * ДОСКА ЗАНИМАЕТ ВСЁ, ЧТО ЕЙ ДАЛИ, И ЭТО ПРАВКА, А НЕ ЖЕЛАНИЕ.
 *
 * Раньше здесь стоял потолок ширины, 520 точек на десктопе и 600 на широком
 * экране, и монитор получал ту же доску в семь колонок, что телефон, только с
 * пустыми полями по бокам. Владелец 05.09.2026: «на десктопе должна быть
 * адаптивность под экран, чтобы поле заполняло доступное пространство, а не
 * повторение с мобайла».
 *
 * ПРЕДЕЛА В CSS БОЛЬШЕ НЕТ ВОВСЕ, и переменной тоже. Ограничение переехало
 * туда, где ему место: в размер КЛЕТКИ. Движок кладёт столько колонок, сколько
 * влезло клеток по 56 точек, и не больше шестнадцати; ширину считает JS, он же
 * рисует холст, и нажатие с рисунком сойтись обязаны по построению.
 *
 * Полоса хода держится ширины доски и стоит по центру: половины делят ту ширину,
 * что им дали, и на широком экране счёт уезжал к самому краю, за полметра от
 * имени, которому он принадлежит.
 */
@media (min-width: 900px) {
  .lf__doska { padding: 0 var(--s-4); }
  .lf__khod {
    width: 100%;
    max-width: 1408px;   /* шестнадцать колонок по 88: тот же потолок, что у JS */
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf__igrok { transition: none; }
}

/* ==========================================================================
   СВОИ КОЛОДЫ
   ==========================================================================
   Список колод и редактор одной. Своего тут ровно три мелочи: подпись над
   полем, обрезка строки и мелкая приписка под полями. Всё остальное это
   `.row`, `.card`, `.sheet-input`, `.form-error` и карта настроек, то есть
   части, которые обязаны выглядеть одинаково везде.
   ========================================================================== */

/*
 * ПОДПИСЬ НАД ПОЛЕМ. В блоке три поля, и без подписей человек не поймёт, какое
 * из них кому: это единственное место в каркасе, где в одной шторке подряд идут
 * три одинаковых поля с разным смыслом.
 */
.lfc-metka {
  display: block;
  margin: var(--s-4) 0 0;
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-muted);
}
.lfc-metka:first-child { margin-top: 0; }

/* Приписка под полями: правило «хватит одного» короче объяснения, чем ошибка. */
.lfc-melko { margin: var(--s-3) 0 0; font: 400 var(--t-body-s) var(--f-sans); }

/*
 * СТРОКА СПИСКА ПОКАЗЫВАЕТ ТЕКСТ ЦЕЛИКОМ, до трёх строк. Обрезать своё задание
 * многоточием на первой строке значит заставить открывать каждое, чтобы понять,
 * которое из них правишь.
 */
.lfc-stroka .row__name {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}