/* ==========================================================================
   СКРЕТЧ-КАРТЫ
   ==========================================================================
   Своих чисел здесь ровно столько, сколько взято из приложения
   (lib/games/scratch/*): поперечник лица в строке коллекции, нахлёст стопки,
   шаг сетки кружков, поперечник картинки в открытой карточке, толщина кольца.
   Всё остальное меряется токенами каркаса.

   Общего у себя не заводим: `.btn`, `.eyebrow`, `.set-card`, `.howto`,
   `.set-go`, `.screen--партия` живут в `frame.css`, и вторая их копия здесь
   разошлась бы с первой в первый же вечер.
   ========================================================================== */

/* ==========================================================================
   НАСТРОЙКИ: ТРИ КОЛЛЕКЦИИ СТРОКАМИ
   ========================================================================== */

.sc-stroki {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-4);
}

/* Строка коллекции. Поля и скругление те же, что у карточки настроек: это
   одна и та же поверхность, просто в один ряд. */
.sc-stroka {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .045);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

/* Выбранная светлее и обведена золотом. Числа из приложения: поверхность 75%
   против 45%, рамка золотом при 70% и толщиной полтора. */
.sc-stroka--vyibrana {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(212, 175, 55, .7);
  border-width: 1.5px;
  padding: calc(var(--s-3) - .5px);
}

/*
 * ТРИ ЛИЦА СТОПКОЙ, С НАХЛЁСТОМ. Числа из приложения: кружок 34, шаг 20, обводка
 * двойкой цветом фона, чтобы соседние лица не слипались в одно пятно.
 */
.sc-stroka__litsa {
  position: relative;
  flex: 0 0 auto;
  height: 34px;
}

.sc-stroka__litso {
  position: absolute;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
}

.sc-stroka__imya {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--t-title-s) var(--f-sans);
}

.sc-stroka--vyibrana .sc-stroka__imya { color: var(--c-gold-light, var(--c-gold)); }

.sc-stroka__schyot {
  flex: 0 0 auto;
  font: 500 var(--t-label-s) var(--f-mono);
  letter-spacing: 1px;
  color: var(--c-faint);
}

.sc-stroka__galka {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .18);
}

.sc-stroka--vyibrana .sc-stroka__galka { color: var(--c-gold); }

/* ==========================================================================
   КАРТОЧКА РАНГА
   ========================================================================== */

.sc-rang__verkh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.sc-rang__metka { margin: 0; color: var(--c-gold); }

.sc-rang__ochki {
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-gold);
}

.sc-rang__imya {
  margin: var(--s-3) 0 0;
  font: 600 var(--t-title-m) var(--f-sans);
}

.sc-rang__stroka {
  margin: var(--s-1) 0 var(--s-3);
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

/* Полоса ранга: четыре точки высотой, золотом по белому в двенадцать
   процентов. Числа из приложения (LinearProgressIndicator, minHeight 4). */
.sc-polosa {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.sc-polosa > i {
  display: block;
  height: 100%;
  background: var(--c-gold);
  border-radius: inherit;
  transition: width .25s ease;
}

.sc-ostalosj {
  margin: var(--s-2) 0 0;
  text-align: center;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

/* ==========================================================================
   ДОСКА
   ==========================================================================
   Слой партии общий (`.screen--партия` в frame.css). Здесь только его начинка:
   верх, ступени, сетка и низ, из которых расти может ТОЛЬКО сетка.
   ========================================================================== */

.screen--partiya > #scP {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sc-verkh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
}

.sc-verkh__imya {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--t-title-s) var(--f-sans);
}

.sc-verkh__ochki {
  flex: 0 0 auto;
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-gold);
}

/* Три ступени в ряд. */
.sc-stupeni {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-3);
}

.sc-stupenj {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-3) var(--s-2);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-dim);
  font: inherit;
  cursor: pointer;
}

.sc-stupenj--ehta {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(212, 175, 55, .7);
  color: var(--c-gold-light, var(--c-gold));
}

/*
 * ИМЯ СТУПЕНИ СЖИМАЕТСЯ, А НЕ ОБРЕЗАЕТСЯ. Пилюля это треть строки, а имена
 * приходят с боя и в польском занимают двадцать знаков. Обрезанное
 * «Poszukiwacze przy…» не читается и не угадывается; мелкое читается. Ровно
 * это делает приложение своим FittedBox, и там об этом написано отдельно.
 */
.sc-stupenj__imya {
  max-width: 100%;
  font: 600 var(--t-label-l) var(--f-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  /* Сжатие ставим шрифтом, а не масштабом: масштаб размывает буквы. */
  font-size: clamp(9px, 3.1vw, 15px);
}

.sc-stupenj__schyot {
  font: 500 var(--t-label-s) var(--f-mono);
  color: var(--c-faint);
}

/*
 * СЕТКА КРУЖКОВ: пять в ряд, зазор восемь. Числа из приложения
 * (crossAxisCount 5, spacing 8). Растёт только она: ступени сверху и итог
 * снизу стоят на месте, как в приложении.
 */
.sc-setka {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 var(--s-4) var(--s-5);
  align-content: start;
}

/*
 * ЗОЛОТОЙ КРУЖОК. Цвета и их место в градиенте из приложения: центр смещён
 * влево вверх, от #E8C874 к #B08F3A, запертый от #8E7639 к #6A5624, номер
 * цветом #3A2A10.
 *
 * ЖИВОЕ ЗОЛОТО ВЗЯТО С БОЯ (`ru/games/scratch-card/play/scratch-card-game.css`):
 * блик по кругу изнутри, ровное дыхание свечения и косой пробег света. Владелец
 * попросил перелив «как на проде», и это ровно он, числами: подсветка внутрь
 * сверху 15% белого и снизу 20% чёрного, дыхание 3 секунды, пробег 4.5, и у
 * каждого столбца своя задержка, чтобы по доске шла волна, а не мигали все разом.
 *
 * ЦВЕТ ОСТАЁТСЯ ИЗ ПРИЛОЖЕНИЯ. На бою золото темнее и номера белые; менять
 * палитру заодно с движением значило бы разъехаться с приложением, откуда взята
 * вся остальная доска. Перелив белый и ложится на любое золото.
 */
.sc-kruzhok {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #E8C874, #C9A84C 60%, #B08F3A);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .18),
    inset 0 -2px 4px rgba(0, 0, 0, .2),
    0 2px 6px rgba(0, 0, 0, .35);
  color: #3A2A10;
  font: 800 clamp(13px, 3.6vw, 17px) var(--f-sans);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .25);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sc-dyikhanie 3s ease-in-out infinite;
  transition: transform .15s;
}

/* Нажатие проминает кружок. С боя: 0.93. */
.sc-kruzhok:active { transform: scale(.93); }

/*
 * ПРОБЕГ СВЕТА поверх золота. Отдельным слоем, а не фоном: фон уже занят
 * градиентом, и второй градиент поверх него погасил бы первый.
 */
.sc-kruzhok::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255, 255, 255, .12) 45%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .12) 55%,
    transparent 65%);
  background-size: 250% 100%;
  animation: sc-probeg 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Волна идёт по столбцам, слева направо. Пять в ряд на телефоне. */
.sc-kruzhok:nth-child(5n+2) { animation-delay: .3s; }
.sc-kruzhok:nth-child(5n+3) { animation-delay: .6s; }
.sc-kruzhok:nth-child(5n+4) { animation-delay: .9s; }
.sc-kruzhok:nth-child(5n+5) { animation-delay: 1.2s; }
.sc-kruzhok:nth-child(5n+2)::after { animation-delay: .4s; }
.sc-kruzhok:nth-child(5n+3)::after { animation-delay: .8s; }
.sc-kruzhok:nth-child(5n+4)::after { animation-delay: 1.2s; }
.sc-kruzhok:nth-child(5n+5)::after { animation-delay: 1.6s; }

@keyframes sc-dyikhanie {
  0%, 100% {
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, .18),
      inset 0 -2px 4px rgba(0, 0, 0, .2),
      0 0 6px rgba(212, 168, 83, .15);
  }
  50% {
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, .22),
      inset 0 -2px 4px rgba(0, 0, 0, .2),
      0 0 14px rgba(212, 168, 83, .35),
      0 0 28px rgba(212, 168, 83, .12);
  }
}

@keyframes sc-probeg {
  0%, 100% { background-position: 200% center; }
  50% { background-position: -50% center; }
}

/*
 * КОМУ ДВИЖЕНИЕ МЕШАЕТ, ТОМУ ЕГО НЕТ. Тридцать дышащих кружков это ровно тот
 * случай, ради которого настройку и придумали.
 */
@media (prefers-reduced-motion: reduce) {
  .sc-kruzhok, .sc-kruzhok::after { animation: none; }
}

.sc-kruzhok--zapert {
  background: radial-gradient(ellipse at 35% 30%, #8E7639, #7A6530 60%, #6A5624);
}

/* Взятый это картинка, и от золота у него остаётся волосок обводки. Дышать и
   переливаться ему нечем: золота под ним больше нет. */
.sc-kruzhok--vzyat {
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  border: 1px solid rgba(212, 175, 55, .45);
  animation: none;
  text-shadow: none;
}

.sc-kruzhok--vzyat::after { content: none; }

.sc-kruzhok--vzyat > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Начатую видно: покрытие на ней уже тронуто, и пара к ней вернётся. */
.sc-kruzhok--nachat {
  border: 2px solid rgba(240, 214, 140, .9);
}

/* ==========================================================================
   НИЗ ДОСКИ
   ========================================================================== */

.sc-niz {
  flex: 0 0 auto;
  padding: 0 var(--s-5) var(--s-4);
}

.sc-niz__stroka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.sc-niz__rang {
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-gold);
}

.sc-niz__schyot {
  font: 400 var(--t-label-s) var(--f-sans);
  color: var(--c-muted);
}

.sc-khvatit { margin-top: var(--s-4); width: 100%; }

/* ==========================================================================
   ШТОРКА СТИРАНИЯ
   ========================================================================== */

.sc-karta__metka {
  margin: 0 0 var(--s-4);
  text-align: center;
  font: 600 var(--t-label-s) var(--f-sans);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* Карточка с кольцом. Кольцо шире карточки на четырнадцать, толщиной три:
   числа из приложения (ScratchRing). */
.sc-karta {
  --sc-pokaz: 240px;
  position: relative;
  width: calc(var(--sc-pokaz) + 14px);
  height: calc(var(--sc-pokaz) + 14px);
  margin: 0 auto;
}

.sc-koljtso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Начало дуги сверху, а не справа: иначе кольцо росло бы от трёх часов. */
  transform: rotate(-90deg);
}

.sc-koljtso__fon,
.sc-koljtso__khod {
  fill: none;
  stroke-width: 3;
}

.sc-koljtso__fon { stroke: rgba(255, 255, 255, .1); }

.sc-koljtso__khod {
  stroke: var(--c-gold-light, #F0D68C);
  stroke-linecap: round;
  transition: stroke-dashoffset .12s linear;
}

.sc-koljtso__khod--gotovo { stroke: var(--c-gold); }

/* Окно карточки: картинка снизу, золото сверху, всё в круге. */
.sc-karta__okno {
  position: absolute;
  top: 7px;
  left: 7px;
  width: var(--sc-pokaz);
  height: var(--sc-pokaz);
  border-radius: 50%;
  overflow: hidden;
}

.sc-karta__niz,
.sc-karta__zoloto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sc-karta__niz { object-fit: cover; }

/* Палец стирает, а не листает страницу. */
.sc-karta__zoloto { touch-action: none; cursor: grab; }

.sc-karta__podskazka {
  margin: var(--s-4) 0;
  text-align: center;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}

/* Кнопка шторки во всю ширину, как в приложении: там это GoldButton, а он
   всегда занимает строку целиком. Кнопка по содержимому читается как ссылка
   сбоку, а это единственное действие на этом экране. */
.sc-karta__podskazka + .btn { width: 100%; }

/* ==========================================================================
   ОТКРЫТАЯ КАРТОЧКА
   ========================================================================== */

/* Поперечник 132 из приложения. */
.sc-otkryitaya__litso {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
}

/* Текст в коробке с полосой слева, толщиной три: из приложения. */
.sc-otkryitaya__tekst {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-gold);
  background: rgba(255, 255, 255, .07);
  font: 500 var(--t-title-s) var(--f-sans);
  line-height: 1.45;
}

.sc-razbor {
  display: block;
  width: 100%;
  margin: var(--s-3) 0 0;
  padding: var(--s-2);
  border: 0;
  background: none;
  color: var(--c-gold);
  font: 600 var(--t-label-l) var(--f-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sc-otkryitaya__tekst + .btn--gold,
.sc-razbor + .btn--gold { margin-top: var(--s-5); width: 100%; }

/* ==========================================================================
   БЕСПЛАТНЫЕ КОНЧИЛИСЬ
   ========================================================================== */

.sc-zaperto__tekst {
  margin: 0 0 var(--s-5);
  text-align: center;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}

.sc-zaperto__potom { width: 100%; margin-top: var(--s-2); }

.sc-zaperto__tekst + .btn--gold { width: 100%; }

/* ==========================================================================
   СТАТЬЯ ВНУТРИ
   ==========================================================================
   Разбор позы приходит с боевой страницы и раскладывается нашими токенами:
   у него нет ни своих цветов, ни своих отступов, ни своих шрифтов. Так статья
   выглядит частью закрытой части, а не куском чужого сайта в окне.
   ========================================================================== */

/*
 * ШАПКА: название позы, тихая дорога наружу и выход. Строкой, потому что все
 * трое отвечают на один вопрос «что это и как отсюда уйти», и разносить их по
 * разным концам шторки значит заставлять человека искать.
 */
.statjya__shapka {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.statjya__imya {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Крест поменьше стрелки «назад»: он не первое действие на экране. */
.statjya__krest { width: 38px; height: 38px; }

.statjya__podpisj {
  margin: 0 0 var(--s-4);
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-gold);
}

/*
 * ТЕКСТ ЗАНИМАЕТ ТО, ЧТО ОСТАЛОСЬ, а не свою долю экрана.
 *
 * Было `max-height: 60vh`, и на большом мониторе это давало ту самую пустоту:
 * шторка тянулась до 86% высоты, а текст обрывался на шестидесяти процентах, и
 * между ним и краем зияло. Шторка сама себе столбик (`frame.css`), значит
 * читалке довольно сказать «расти на остаток», а предел высоты остаётся один,
 * у шторки.
 *
 * `min-height: 0` обязателен: без него в столбце flex элемент не даёт себя
 * сжать ниже содержимого, и прокрутка не появляется вовсе.
 */
.statjya {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--s-2);
}

.statjya h3 {
  margin: var(--s-5) 0 var(--s-2);
  font: 600 var(--t-title-s) var(--f-sans);
  color: var(--c-text);
}

.statjya h3:first-child { margin-top: 0; }

.statjya p {
  margin: 0 0 var(--s-3);
  font: 400 var(--t-body-m) var(--f-sans);
  line-height: 1.55;
  color: var(--c-text);
}

.statjya ol,
.statjya ul {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}

.statjya li {
  margin-bottom: var(--s-2);
  font: 400 var(--t-body-m) var(--f-sans);
  line-height: 1.5;
  color: var(--c-text);
}

/*
 * ДОРОГА НАРУЖУ ОСТАЁТСЯ, НО ТИХОЙ. Кому-то захочется картинок и «похожих
 * поз», которых мы не берём, и запирать его внутри неправильно. Но и звать
 * наружу посреди вечера незачем, поэтому это ссылка, а не кнопка, и стоит она
 * левее выхода: уходить чаще будут закрытием.
 */
.statjya__snaruzhi {
  flex: 0 0 auto;
  font: 400 var(--t-label-l) var(--f-sans);
  color: var(--c-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.statjya__snaruzhi:hover { color: var(--c-gold); }

/*
 * ТЕЛО ШТОРКИ СО СТАТЬЁЙ РАСТЁТ НА ОСТАТОК. Столбиком сделана сама шторка, а
 * между ней и текстом стоит `.sheet__body`: не растяни его, и `flex` у текста
 * не значит ничего. Правило узкое, по признаку содержимого: у остальных шторок
 * тело обязано остаться по высоте содержимого.
 */
.sheet__body:has(.statjya) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Статья не открылась и вкладку не пустили: тогда объясняем словами и даём
   дверь руками. Кнопкой, потому что нажать её человек должен сам: только
   прямое нажатие браузер пропускает наверняка. */
.statjya__beda {
  margin: 0 0 var(--s-5);
  text-align: center;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-text);
}

.statjya__dverj {
  display: flex;
  width: 100%;
  margin-bottom: var(--s-2);
  text-decoration: none;
}

.statjya__beda ~ .btn { width: 100%; }

/* ==========================================================================
   ШИРОКИЙ ЭКРАН
   ==========================================================================
   Сетка кружков растёт клеткой, а не числом колонок: пять в ряд это устройство
   доски, а не следствие ширины телефона. Десять кружков в ряд на мониторе
   превратили бы тридцать карточек в три строки мелкой сыпи.
   ========================================================================== */

@media (min-width: 1024px) {
  /*
   * ДЕСКТОП ВЗЯТ С БОЯ, А НЕ ПРИДУМАН (владелец 01.09.2026: «посмотри, как
   * сделано в боевой версии, а то на десктопе мелкое»).
   *
   * На бою (`scratch-card-game.css`, @media 768 и 1200) доска на широком экране
   * перестраивается в ШЕСТЬ колонок, поле шириной 820, зазор 12 и 14, номер
   * 1.125rem и 1.25rem. Шесть колонок это ещё и ровно пять рядов на тридцать
   * карточек, без обрезка внизу.
   *
   * Моя первая редакция держала пять колонок в 440 точках, то есть кружок 80 на
   * экране в 1440. Это и было «мелко»: телефонная доска, поставленная в центр
   * монитора и не изменившаяся вовсе.
   */
  .sc-setka {
    grid-template-columns: repeat(6, 1fr);
    max-width: 820px;
    margin-inline: auto;
    gap: 12px;
  }

  /* Волна перестраивается на шесть столбцов вместе с сеткой: иначе задержки
     съедут, и вместо волны пойдёт рябь. */
  .sc-kruzhok:nth-child(5n+2), .sc-kruzhok:nth-child(5n+3),
  .sc-kruzhok:nth-child(5n+4), .sc-kruzhok:nth-child(5n+5) { animation-delay: 0s; }
  .sc-kruzhok:nth-child(5n+2)::after, .sc-kruzhok:nth-child(5n+3)::after,
  .sc-kruzhok:nth-child(5n+4)::after, .sc-kruzhok:nth-child(5n+5)::after { animation-delay: 0s; }

  .sc-kruzhok:nth-child(6n+2) { animation-delay: .25s; }
  .sc-kruzhok:nth-child(6n+3) { animation-delay: .5s; }
  .sc-kruzhok:nth-child(6n+4) { animation-delay: .75s; }
  .sc-kruzhok:nth-child(6n+5) { animation-delay: 1s; }
  .sc-kruzhok:nth-child(6n+6) { animation-delay: 1.25s; }
  .sc-kruzhok:nth-child(6n+2)::after { animation-delay: .35s; }
  .sc-kruzhok:nth-child(6n+3)::after { animation-delay: .7s; }
  .sc-kruzhok:nth-child(6n+4)::after { animation-delay: 1.05s; }
  .sc-kruzhok:nth-child(6n+5)::after { animation-delay: 1.4s; }
  .sc-kruzhok:nth-child(6n+6)::after { animation-delay: 1.75s; }

  /* Номер на бою 1.125rem. Кружок здесь около 125 точек, и телефонный размер
     смотрелся на нём точкой. */
  .sc-kruzhok { font-size: 18px; }

  /*
   * ДОСКА СТОИТ ПОСЕРЕДИНЕ, А НЕ РАСТЯГИВАЕТСЯ ПО УГЛАМ.
   *
   * На телефоне сетка забирает весь остаток высоты, и это правильно: там она
   * его и занимает. На мониторе в 1300 точек тридцать кружков кончаются на
   * середине, а итог с кнопкой остаётся прибит к нижнему краю, и между ними
   * зияет пустота в пол-экрана (скрин владельца 01.09.2026).
   *
   * Лечится не подпоркой, а тем, что сетка перестаёт РАСТИ: `0 1 auto` даёт ей
   * свою высоту и право сжаться с прокруткой, если экран низкий. Свободное
   * место делят два автополя, сверху ступеней и снизу итога, поэтому доска
   * оказывается ровно между шапкой и краем, а не размазана по ним.
   */
  .sc-setka { flex: 0 1 auto; }
  .sc-stupeni { margin-top: auto; }
  .sc-niz { margin-bottom: auto; padding-top: var(--s-4); }

  /* Верх, ступени и низ идут по ширине доски: три разных предела на одном
     экране читаются как три разных экрана. */
  /*
   * `margin-inline`, А НЕ `margin: 0 auto`. Второе заодно обнуляет верх и низ,
   * и стоящее рядом вертикальное центрирование доски оно молча стирало: доска
   * прижималась к верхнему краю, а весь запас высоты уходил под кнопку.
   */
  .sc-stupeni,
  .sc-verkh,
  .sc-niz {
    max-width: 820px;
    margin-inline: auto;
    width: 100%;
  }

  /*
   * СТУПЕНИ ЧИТАЕМЫ, А НЕ УГАДЫВАЮТСЯ (владелец: «бывалые на десктопе просто
   * мелкие цифры»). На бою вкладка держит 0.875rem у имени и 0.75rem у счёта,
   * и поля втрое больше телефонных. Здесь то же самое.
   */
  .sc-stupenj { padding: var(--s-3) var(--s-4); gap: 4px; }
  .sc-stupenj__imya { font-size: 15px; }
  .sc-stupenj__schyot { font-size: 13px; }

  /* Токен размера это пара «кегль/интерлиньяж», и в `font-size` она незаконна:
     свойство берёт начальное значение и имя падало до шестнадцати. Через
     сокращение `font`, как и в базовом правиле выше. */
  .sc-verkh__imya { font: 600 var(--t-title-m) var(--f-sans); }

  /* Строки коллекций и карточка ранга живут в колонке настроек: она уже
     ограничена `.screen--форма`, своего предела им не нужно. */
}

@media (min-width: 1200px) {
  /* На бою на этой ступени зазор 14 и номер 1.25rem. */
  .sc-setka { gap: 14px; }
  .sc-kruzhok { font-size: 20px; }
  .sc-stupenj__imya { font-size: 16px; }
}