/* Экран «Статистика» — из макета «Клуб - Статистика». Числа без округлений:
   сверять рендер с макетом можно только когда они те же.

   Своим файлом, а не разделом в screens.css: экран переносился отдельно, и
   отдельный файл — это то, что можно выключить одной строкой в списке стилей
   (index.html и server/site/index.js), не разбирая чужую правку по строкам.

   Кейфреймы `glare`, `barIn` и `popIn` уже есть в anim.css — здесь только те
   два, которых там нет. Классы появления `.rv`, `.tap` и `.snap` тоже оттуда;
   `.tl` и `.dot` живут здесь, потому что их знает ровно этот экран. */

/* ── страница ─────────────────────────────────────────────────────────────
   146 px сверху — под высокую шапку с переключателем периода, число из
   макета. Снизу у дизайнера 34: там экран заперт в рамке телефона и нижней
   навигации на нём нет. У нас таблетка навигации есть, и содержимое кончается
   общим `--nav-gap` — иначе последняя строка хронологии уезжает под неё. */
.stPage { padding: 146px 18px var(--nav-gap); }

/* Ответа сервера ещё нет (или клуб отказал) — карточка, плитки и полосы
   прячутся целиком. Нули на них читались бы как «вы ничего не выиграли», хотя
   правда — «мы ещё не спросили». Каркас при этом остаётся на месте: иначе
   переключение периода пересобирало бы экран и рвало анимации. */
.stPage.bare > .stCard,
.stPage.bare > .stTiles,
.stPage.bare > .stFinishBox { display: none; }

/* ── шапка ────────────────────────────────────────────────────────────────
   Единственная собственная шапка сайта БЕЗ прозрачного состояния: сплошная с
   первого кадра. Так в макете, и причина видна на экране — переключатель
   периода стоит прямо на ней, и просвечивающая сквозь него карточка читалась
   бы как часть переключателя.

   Оба состояния описаны разом: класс `on` шапкам ставит оболочка по прокрутке
   (src/ui/shell.js), и здесь ему нечего менять. Отступ сверху не трогаем — в
   screens.css он считается с вырезом экрана. */
.csHead.st,
.csHead.st.on {
  padding-right: 18px;
  padding-left: 18px;
  padding-bottom: 12px;
  background: var(--bg2);
  border-bottom-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stHeadTop { display: flex; align-items: center; gap: 11px; }
/* 34×34, а не общая `.cs-round` (38): у дизайнера на этом экране кнопка
   меньше — под ней вторая строка шапки, и полноразмерная делала бы её
   высокой. */
.stBack {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
}
.stBack i { font-size: 18px; }
.stTitle { font-family: var(--f-head); font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }

.stSwitch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 12px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
}
.stTab {
  border-radius: 12px;
  padding: 9px 0;
  font-size: 12.5px; font-weight: 800;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  transition: background .25s ease, color .25s ease;
}
/* Выбранный период белый, а не акцентный — как фильтр на «Турнирах»: акцент
   на этом экране уже занят кольцом и бейджем места. */
.stTab.on { background: #fff; color: #12100F; }

/* ══ ИТОГОВАЯ КАРТОЧКА ════════════════════════════════════════════════════
   Градиент здесь ОБРАТНЫЙ общему `.cs-card` (от --tileHi к --tile), и тень
   глубже: карточка стоит первой под шапкой, и светлый край сверху продолжает
   её плашку. Поэтому свой класс, а не `.cs-card` с правками. */
.stCard {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tileHi), var(--tile));
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
  padding: 16px;
  animation: cardIn .6s var(--ease) both;
}
.stCardWash {
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 100% 0%, rgba(240, 192, 74, .14), transparent 66%);
}
/* Блик раз в семь секунд. Живёт в неподвижном каркасе экрана: перерисовка по
   снимку витрины иначе уводила бы его обратно за край (src/screens/site/lib.js). */
.stCardGlare {
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
  animation: glare 7s ease-in-out infinite;
}
.stCardRow { position: relative; display: flex; align-items: center; gap: 14px; }

/* ── кольцо «в призах» ─────────────────────────────────────────────────────
   Ободок повёрнут на -90°, чтобы начинаться сверху. Длина окружности (226 при
   r=36) стоит числом и в разметке, и в кейфрейме: два способа её получить
   разошлись бы на округлении. */
.stRing {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; flex: none;
}
.stRing svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.stRingArc { animation: ringDraw 1.2s var(--ease) both; transition: stroke-dashoffset .6s var(--ease); }
.stRingText { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stRingV { font-size: 19px; line-height: 1; color: var(--ink); }
.stRingK {
  font-size: 8.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-top: 4px;
}

.stCardMain { flex: 1; min-width: 0; }
.stPeriod {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.stPts { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.stPtsV { font-size: 30px; letter-spacing: -1.2px; line-height: 1; color: var(--ink); }
.stPtsK {
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.stBadges { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.stRank {
  border-radius: 13px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 800;
  white-space: nowrap;
  background: var(--acc); color: var(--accInk);
}
.stGain { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ok); white-space: nowrap; }
.stGain i { font-size: 12px; }
/* Нулевой прирост макет не рисует: неделя там всегда со знаком плюс. Красить
   ноль зелёным со стрелкой вверх нельзя — это была бы неправда, поэтому у
   него свой, гаснущий вид. */
.stGain.flat { color: rgba(255, 255, 255, .45); }

.stChips { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.stChip {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  border-radius: 14px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
}
.stChip i { font-size: 16px; color: var(--acc); }
.stChipV { font-size: 14px; color: var(--ink); }
.stChipK { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .62); }
/* Плашка лучшего места золотая: золото на сайте значит «рейтинг» во всех пяти
   комплектах темы и потому не красится цветом клуба (styles/site/tokens.css). */
.stChip.gold { background: rgba(240, 192, 74, .1); border-color: rgba(240, 192, 74, .32); }
.stChip.gold i { color: var(--gold); }

/* ══ ШЕСТЬ ПЛИТОК ═════════════════════════════════════════════════════════ */
.stTiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.stTile {
  position: relative;
  height: 96px;
  border-radius: 18px;
  overflow: hidden;
  padding: 11px;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
  animation: popIn .4s var(--ease) both;
  transition: transform .3s var(--ease);
}
/* Приподнять — только там, где есть курсор: на телефоне hover залипает после
   тапа. По этой же причине закрыт `.lift` в anim.css. */
@media (hover: hover) {
  .stTile:hover { transform: translateY(-3px); }
}
/* Масть-призрак в углу: красная у ♥ и ♦, белёсая у остальных — как на плитках
   профиля и карточки игрока. Красная берёт --ghost, то есть цвет клуба: в
   зале «Лёд» призрак обязан быть голубым. */
.stTileSuit {
  position: absolute; right: -8px; top: -12px;
  font-size: 58px; line-height: 1;
  color: rgba(255, 255, 255, .07);
}
.stTileSuit.red { color: var(--ghost); }
.stTile > i { position: relative; font-size: 18px; }
.stTileFoot { position: absolute; left: 11px; right: 11px; bottom: 10px; }
.stTileV { display: block; font-size: 20px; letter-spacing: -.6px; line-height: 1; color: var(--ink); }
.stTileK {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  color: rgba(255, 255, 255, .7);
  margin-top: 5px;
}

/* ══ КАК ЗАКАНЧИВАЮ ═══════════════════════════════════════════════════════ */
.stFinish {
  border-radius: 20px;
  padding: 15px;
  margin-top: 10px;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
}
/* 15px — свой размер, не `.cs-h2` (19) и не `.cs-h3` (17). Числа макета не
   округляются, и третьего заголовка на сайте от этого не заводится: он живёт
   ровно в этом блоке. */
.stFinishH { font-family: var(--f-head); font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.stBars { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.stBar { display: flex; align-items: center; gap: 10px; }
.stBarK { width: 80px; font-size: 11.5px; font-weight: 800; }
.stBarTrack { flex: 1; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
/* Полоса вырастает от левого края — оттуда, откуда её читают. */
.stBarFill { display: block; height: 100%; border-radius: 5px; transform-origin: left; animation: barIn .9s var(--ease) both; }
.stBarN { width: 32px; text-align: right; font-size: 12px; color: var(--ink); }

/* ══ ХРОНОЛОГИЯ ═══════════════════════════════════════════════════════════ */
.stCap { display: flex; align-items: baseline; gap: 9px; margin-top: 22px; }
.stCapN { font-family: var(--f-mono); font-size: 11px; color: rgba(255, 255, 255, .45); }

/* Две линии одна поверх другой: серая — вся лента, цветная — пройденная её
   часть. Высоту цветной считает экран на прокрутке (src/screens/site/stats.js);
   считает ОТ ОКНА, потому что у нас прокручивается страница, а не внутренний
   контейнер, как в рамке телефона у дизайнера. */
.stLine { position: relative; margin-top: 12px; padding-left: 24px; }
.stLine::before {
  content: '';
  position: absolute; left: 6px; top: 10px; bottom: 10px;
  width: 2px;
  background: rgba(255, 255, 255, .08);
}
.stLead {
  position: absolute; left: 6px; top: 10px;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--acc), rgba(240, 192, 74, .6));
  transition: height .25s linear;
}

.stRows { display: flex; flex-direction: column; gap: 10px; }
.stRow {
  width: 100%; text-align: left;
  position: relative;
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  padding: 12px 13px;
  background: var(--tile);
  border: 1px solid var(--line);
}
/* Призовая тройка золотая целиком — кромка, точка, место и очки. */
.stRow.top { border-color: rgba(240, 192, 74, .35); }
.stRowMain { flex: 1; min-width: 0; }
.stRowName { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.stRowSub { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .55); margin-top: 3px; }
.stRowRight { flex: none; text-align: right; }
.stRowPlace { display: block; font-size: 15px; color: var(--ink); }
.stRowPts { display: block; font-size: 10.5px; color: var(--ok); margin-top: 2px; }
.stRow.top .stRowPlace,
.stRow.top .stRowPts { color: var(--gold); }

/* ── появление строки хронологии ──────────────────────────────────────────
   Класс ПЕРЕКЛЮЧАЕТСЯ: строка въезжает, войдя в кадр, и гаснет, уходя из
   него. Наблюдатель общий с доской рейтинга (`ioLive` в
   src/screens/site/lib.js) — третьего на приложение не заводим.

   Въезжает справа, а не слева, как строка доски: слева от неё идёт линия
   хронологии с точкой, и движение навстречу линии читалось бы как «строка
   отрывается». Гаснет не в ноль, а до .35 — лента должна оставаться лентой и
   за краем кадра. Числа из макета. */
.tl { opacity: .35; transform: translateX(14px); transition: opacity .45s ease, transform .45s var(--ease); }
.tl.on { opacity: 1; transform: none; }

.dot {
  position: absolute; left: -23px; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%;
  background: var(--acc);
  border: 2px solid var(--bg);
  transform: scale(.6);
  opacity: .4;
  transition: transform .4s var(--ease), opacity .4s ease, background .4s ease;
}
.tl.on .dot { transform: scale(1); opacity: 1; }
.stRow.top .dot { background: var(--gold); }

/* ── широкий экран ────────────────────────────────────────────────────────
   Колонкой по центру, как все страницы сайта (styles/site/desktop.css). Ширина
   берётся у общего токена `--cs-col` — второго числа здесь не заводим.

   Верхний отступ уходит: на широком экране шапка перестаёт быть фиксированной
   и встаёт в поток, и 146 px под ней стали бы дырой. Само это правило живёт в
   desktop.css и красить шапку обратно не приходится — оно с `!important`. */
@media (min-width: 768px) {
  .stPage {
    max-width: var(--cs-col);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
  }
}

/* ── кейфреймы этого экрана ───────────────────────────────────────────────
   Только те, которых нет в anim.css. 226 — та же длина окружности, что стоит
   в `stroke-dasharray` разметки. */
@keyframes ringDraw { from { stroke-dashoffset: 226 } }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(16px) scale(.98) } 100% { opacity: 1; transform: none } }