/* Основа сайта клуба: страница, типографика, повторяющиеся мелочи.

   Классы начинаются на `cs-` (club site) — не `fd-`. Имена каталога заняты и
   значат в нём другое: `.fd-card` это белая карточка с тонкой тенью, а здесь
   карточка — градиент от --tile к --tileHi с кромкой в белую прозрачность.
   Совпади имена, и одна правка каталога перекрасила бы клубный сайт. */

html, body { margin: 0; padding: 0; }

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

   `fixed` — свечение НЕ едет с прокруткой: в макете оно нарисовано на корпусе
   телефона, а не внутри свитка. Второе пятно берёт акцент из темы, а не
   винный литерал дизайнера: у клуба «Лёд» оно обязано быть голубым.

   Экраны с собственным героем (Главная, страница вечера) рисуют своё свечение
   поверх этого — оно у них ездит параллаксом и живёт по своим правилам. */
body {
  background:
    radial-gradient(120% 56% at 18% 0%, var(--glow), transparent 62%),
    radial-gradient(90% 40% at 100% 12%, var(--ghost), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: var(--acc); text-decoration: none; }
a:hover { opacity: .8; }
button { font-family: inherit; border: 0; cursor: pointer; color: inherit; background: none; padding: 0; }
input, textarea { font-family: inherit; }

/* ── типографика ──────────────────────────────────────────────────────────
   Три роли и ровно три шрифта. Unbounded — только заголовки и имена; Manrope
   — всё читаемое; JetBrains Mono — числа и капс-подписи. Смешивать нельзя:
   цифра в Manrope рядом с цифрой в Mono в одной строке видна сразу. */
.cs-h1 { font-family: var(--f-head); font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; color: var(--ink); }
.cs-h2 { font-family: var(--f-head); font-size: 19px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; color: var(--ink); }
.cs-h3 { font-family: var(--f-head); font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.cs-num { font-family: var(--f-mono); font-weight: 700; }

/* Подпись-капс над блоком: «БЛИЖАЙШИЙ ТУРНИР», «ДОСТИЖЕНИЯ», «ДРУЗЬЯ».
   Одна и та же во всех макетах до десятой доли пикселя. */
.cs-cap {
  font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.cs-cap.acc { color: var(--acc); font-size: 11px; letter-spacing: 1.4px; font-weight: 700; }

.cs-sub { font-size: 12px; font-weight: 650; color: rgba(255, 255, 255, .55); }
.cs-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── карточка ─────────────────────────────────────────────────────────────
   Градиент сверху вниз, кромка в белую прозрачность, тень вниз. Радиус и
   тень разнятся по экранам (24px у плиток «Главной», 18px у строк профиля),
   поэтому здесь только общее, а размер ставит экран. */
.cs-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tile), var(--tileHi));
  border: 1px solid var(--line);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}

/* ── кнопки ───────────────────────────────────────────────────────────────
   Основная — сплошной акцент с чернилами по нему. Ровно одна на экран: в
   макете «Забронировать» единственная заливка на всей «Главной». */
.cs-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border-radius: 13px;
  padding: 12px;
  font-size: 14px; font-weight: 800;
  background: var(--acc); color: var(--accInk);
}
.cs-btn.lg { border-radius: 16px; padding: 15px; font-size: 14.5px; }
.cs-btn.ghost { background: var(--tile); border: 1px solid var(--line); color: var(--ink); }
.cs-btn.gold { background: var(--gold); color: #2A1B01; }

/* Круглая кнопка в шапке: колокол, шестерёнка. */
.cs-round {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
}
.cs-round i { font-size: 18px; }
.cs-round.sq { border-radius: 12px; width: 36px; height: 36px; }

/* ── мелочи, которые повторяются ──────────────────────────────────────── */

/* Точка «идёт сейчас». */
.cs-live { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; animation: pulse 1.8s infinite; }

/* Аватар кружком с инициалами. Обод зелёный, когда человек в сети. */
.cs-av {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid var(--line);
  font-size: 12px; font-weight: 800; color: var(--ink);
  background-size: cover; background-position: center;
}
.cs-av.on { border-color: var(--ok); }
.cs-av .cs-dotOn {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--tile);
}

/* Пустой раздел. Того, чего нет, макет не рисует вовсе — но «нечего
   показать» и «ещё не приехало» это разные ответы, и оба нужны словами. */
.cs-empty {
  border-radius: 18px;
  background: var(--tile);
  border: 1px solid var(--line);
  padding: 18px;
  font-size: 13px; font-weight: 650; line-height: 1.5;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}