/* База каталога: сброс, типографика, примитивы, из которых собраны все экраны.

   Общего сброса в проекте нет — каждое приложение пишет свой (то же у арены и
   консоли). Здесь он такой же по сути, плюс две вещи, специфичные для
   каталога: телефонная safe-area (нижняя навигация не должна лезть под
   индикатор) и `text-wrap: balance` у крупных заголовков — в дизайне они
   набраны в две строки и должны так же ломаться на любой ширине. */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: var(--acc); text-decoration: none; }
a:hover { opacity: .82; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }

h1, h2, h3, p { margin: 0; }

/* Скрытая полоса прокрутки — у горизонтальных лент фильтров и дней. */
.noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.noscroll::-webkit-scrollbar { display: none; }

/* ── типографика ─────────────────────────────────────────────────────────── */
.fd-h1 { font-family: var(--f-head); font-weight: 800; letter-spacing: -.8px; font-size: 25px; line-height: 1.1; text-wrap: balance; }
.fd-h2 { font-family: var(--f-head); font-weight: 800; letter-spacing: -.5px; font-size: 20px; line-height: 1.15; }
.fd-h3 { font-family: var(--f-head); font-weight: 800; letter-spacing: -.35px; font-size: 16px; }
.fd-num { font-family: var(--f-num); font-weight: 700; }
.fd-cap { font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--dim); }
.fd-sub { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.fd-dim { color: var(--dim); }
.fd-muted { color: var(--muted); }
.fd-danger { color: var(--danger); }
.fd-acc { color: var(--acc); }
.fd-gold { color: var(--gold); font-family: var(--f-num); font-weight: 700; }
.fd-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── карточка ────────────────────────────────────────────────────────────── */
.fd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-s);
}
.fd-card.pad { padding: 15px; }
.fd-card.live { border-color: var(--acc); border-width: 1.5px; }
.fd-card.friends { border-color: var(--violet); border-width: 1.5px; }

/* ── кнопки ──────────────────────────────────────────────────────────────── */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-sm);
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 800;
  background: var(--surface2);
  color: var(--ink);
  transition: opacity .12s var(--ease);
}
.fd-btn:hover { opacity: .85; }
.fd-btn:disabled { opacity: .45; }
.fd-btn.primary { background: var(--acc); color: var(--acc-ink); }
.fd-btn.ink { background: var(--ink); color: #fff; }
.fd-btn.ghost { background: var(--surface); border: 1px solid var(--line); }
.fd-btn.violet { background: var(--violet-soft); color: var(--violet-ink); }
.fd-btn.danger { background: var(--surface); border: 1px solid var(--line); color: var(--danger); }
.fd-btn.danger i { color: var(--danger); }
/* Цена в баллах на витрине клуба. Золото сплошное, а не мягкое (--gold-soft):
   это кнопка покупки, и на светлой карточке она должна читаться как действие,
   а не как ещё одна плашка рядом. Не хватает баллов — обычный `:disabled`. */
.fd-btn.gold { background: var(--gold); color: #2A2113; }
/* Кнопка НА тёмной подложке — «История» в шапке баллов. */
.fd-btn.onNight { background: rgba(255, 255, 255, .1); color: #fff; }
.fd-btn.wide { width: 100%; padding: 16px; font-size: 15px; border-radius: var(--r-md); }
.fd-btn.sm { padding: 8px 12px; font-size: 12.5px; border-radius: var(--r-xs); }

/* Круглая кнопка-иконка: назад, поиск, поделиться. */
.fd-round {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface2);
  font-size: 19px;
}
.fd-round.ghost { background: var(--surface); border: 1px solid var(--line); }
.fd-round.onCover { background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); color: #fff; }

/* ── плашки ──────────────────────────────────────────────────────────────── */
.fd-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-xs);
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--surface2);
  color: var(--muted);
}
.fd-tag.live { background: var(--acc-soft); color: var(--acc-deep); }
.fd-tag.friends { background: var(--violet-soft); color: var(--violet-ink); }
.fd-tag.gold { background: var(--gold-soft); color: var(--gold); }
.fd-tag.pill { border-radius: 20px; padding: 5px 10px; font-size: 12px; }
.fd-tag.onCover { background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 20px; padding: 5px 10px; font-size: 12px; }
.fd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }

/* ── чипы фильтров (горизонтальная лента) ────────────────────────────────── */
.fd-chips { display: flex; gap: 8px; overflow-x: auto; }
.fd-chip {
  flex: none;
  border-radius: 20px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 750;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.fd-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── сегмент (Списком / На карте) ────────────────────────────────────────── */
.fd-seg { display: flex; gap: 4px; background: var(--surface2); border-radius: var(--r-md); padding: 4px; }
.fd-seg button {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-sm);
  padding: 11px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--muted);
}
.fd-seg button.on { background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: var(--shadow-s); }

/* ── прогресс набора мест ────────────────────────────────────────────────── */
.fd-bar { height: 6px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.fd-bar > i { display: block; height: 100%; background: var(--acc); }

/* ── аватары ─────────────────────────────────────────────────────────────── */
.fd-av {
  position: relative;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  overflow: hidden;
}
/* Фото поверх круга с инициалами: `onerror` убирает <img>, и под ним остаются
   буквы. Круг не режем по пропорциям — `cover` берёт середину кадра, как и у
   обложек клубов. */
.fd-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fd-stack { display: flex; }
.fd-stack .fd-av { border: 2px solid var(--surface); }
.fd-stack .fd-av + .fd-av { margin-left: -9px; }

/* ── список «метка → значение» ───────────────────────────────────────────── */
.fd-rows { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.fd-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 750; }
.fd-row:last-child { border-bottom: 0; }
.fd-row > .k { flex: 1; min-width: 0; }
.fd-row > .v { font-family: var(--f-num); font-weight: 700; font-size: 14px; flex: none; }
.fd-row > i.ti { font-size: 19px; color: var(--muted); flex: none; }

/* ── пустые состояния и честные пробелы ──────────────────────────────────── */
.fd-empty {
  border: 1px dashed var(--line2);
  border-radius: var(--r-lg);
  padding: 22px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
}
/* «Этого мы не знаем» — не то же самое, что «пусто». Отдельный вид, чтобы
   нельзя было принять отсутствие данных за отсутствие событий. */
.fd-gap {
  border-left: 3px solid var(--line2);
  padding: 8px 0 8px 12px;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
}

/* ── разделитель и мелочи ────────────────────────────────────────────────── */
.fd-hr { height: 1px; background: var(--line); }
.fd-spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}