/* ============================================================
   BIGBOY HUB · база: сброс, оболочка приложения, safe areas,
   типографика (§38, §39, §58, §59, §74)
   ============================================================ */

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

/* системные стили форм уходят в ноль — компоненты рисуют себя сами */
button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  font-weight: var(--fw-reg);
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* §58: никакого горизонтального скролла страницы */
  overflow-x: hidden;
}

/* Фон-«аврора»: два мягких вне-фокусных свечения на полуночном градиенте */
.stage-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 42% at 82% 4%, rgba(139, 92, 255, .34), transparent 62%),
    radial-gradient(64% 40% at 8% 26%, rgba(52, 217, 164, .22), transparent 64%),
    radial-gradient(90% 50% at 50% 100%, rgba(12, 18, 38, .9), transparent 60%),
    linear-gradient(168deg, var(--bg-1) 0%, var(--bg-0) 46%, #0A0F22 100%);
}

@media (max-width: 520px) {
  .stage-bg { display: none; }
}

/* ── оболочка ─────────────────────────────────────────── */
.app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  min-height: 100%;
  margin: 0 auto;
  background:
    radial-gradient(80% 34% at 88% 0%, rgba(139, 92, 255, .22), transparent 60%),
    radial-gradient(70% 30% at 0% 18%, rgba(141, 14, 210, .13), transparent 62%),
    linear-gradient(180deg, rgba(12, 18, 38, .82) 0%, rgba(7, 11, 24, .9) 46%);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

@media (min-width: 521px) {
  body { display: flex; align-items: center; justify-content: center; padding: var(--s-6) 0; }
  .app {
    min-height: min(844px, calc(100vh - 48px));
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-3);
  }
}

/* ── шапка ────────────────────────────────────────────── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--pad) var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* sticky-шапка лежит на ленте: 5 % стекла не укрывают текст под ней,
     поэтому подложка почти плотная, а blur только смягчает край */
  background: linear-gradient(180deg, rgba(7, 11, 24, .94), rgba(7, 11, 24, .78));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--rim);
}

.appbar__brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.appbar__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-brand);
  font-size: var(--fs-m);
  font-weight: var(--fw-xbold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__title em {
  font-style: normal;
  color: var(--accent);
}

.appbar__note {
  /* без этого подписи не дают сжаться: min-content у nowrap-текста выталкивает
     название вкладки за шапку */
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* на вложенном экране место забирают кнопка «назад» и действия: подпись
   режется, поэтому её нет — название получает всю ширину */
.appbar--sub .appbar__note { display: none; }
.appbar--sub .appbar__title { letter-spacing: .03em; }
/* возрастной маркер остаётся даже в тесной шапке вложенного экрана */
.appbar--sub .appbar__note--keep { display: block; color: var(--gold); font-weight: var(--fw-bold); }

/* 320–360: в шапке остаётся только название, подпись режет */
@media (max-width: 369px) {
  .appbar { gap: var(--s-2); padding-left: var(--s-3); padding-right: var(--s-3); }
  .appbar__note { display: none; }
  .appbar__title { font-size: var(--fs-sm); letter-spacing: .01em; }
  /* «BIGBOY MACHINE» — самое длинное название: на 320 оно упирается в 18+,
     поэтому ему одному уменьшаем кегль, а не режем многоточием */
  .appbar__brand--tight .appbar__title { font-size: var(--fs-s); letter-spacing: 0; }
  /* баланс и так первым блоком под шапкой — две цифры в тесной шапке не помещаются */
  .appbar__actions .chip { display: none; }
}

/* ── контент ──────────────────────────────────────────── */
.content {
  flex: 1 1 auto;
  /* §74: последний элемент не должен прятаться под навигацией */
  padding: var(--s-4) var(--pad) calc(var(--nav-bar) + var(--s-8));
}

.screen[hidden] { display: none; }

.screen__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-xbold);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
}

.screen__sub {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.section { margin-top: var(--s-6); }

/* Ритм экрана: у плашки, добавленной прямо в экран, верхнего поля обычно нет —
   поэтому «DAILY COMBO» и подобные ей вставали вплотную к списку над ними.
   Поле даёт оболочка, а не сама плашка: тогда порядок блоков не зависит от
   того, кто собирал экран. Утилиты .mt-* перебивают это поле, когда нужен
   другой шаг. */
.screen > * + * { margin-top: var(--s-6); }

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.section__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: var(--fw-xbold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}

.section__more {
  flex: 0 0 auto;
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  color: var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-2);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
}

/* «открыть все» и «зал славы»: тот же переход, но как кнопка. В ДВИЖе эти
   два входа ведут на целые экраны, а текстовая ссылка цветом в заголовок
   раздела не читается как действие. */
.section__more--hot {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  color: var(--accent-ink);
  font-weight: var(--fw-xbold);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: var(--rim), 0 6px 16px rgba(141, 14, 210, .34);
}

.stack { display: grid; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--top { align-items: flex-start; }
.row__fill { flex: 1 1 auto; min-width: 0; }
.row--wrap { flex-wrap: wrap; }
.hair { height: 1px; background: var(--line); border: 0; margin: var(--s-4) 0; }

/* §64: grid/block потомки не должны растягивать страницу до min-content
   (на 320 это давало горизонтальный скролл всего документа).
   .row сюда не входит: там min-width:0 даёт наложение соседних блоков. */
.stack > *, .list > *, .section > *, .screen > *, .card > * { min-width: 0; }

/* ── текст (§36, §66) ─────────────────────────────────── */
.u { text-transform: uppercase; }
.cap {
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: var(--fw-bold);
}
.muted { color: var(--text-2); }
.strong { font-weight: var(--fw-bold); }
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: var(--fw-xbold);
}
.accent { color: var(--accent); }
.gold { color: var(--gold); }
.live-text { color: var(--live); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* то, что важнее деталей, переносим в две строки вместо многоточия */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.tiny { font-size: var(--fs-s); line-height: var(--lh-loose); color: var(--text-2); }

/* ── появление экрана ─────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rise { animation: rise var(--t-slow) var(--ease-out) both; }
.rise-2 { animation: rise var(--t-slow) var(--ease-out) 60ms both; }
.rise-3 { animation: rise var(--t-slow) var(--ease-out) 120ms both; }
.rise-4 { animation: rise var(--t-slow) var(--ease-out) 180ms both; }

/* ── переход экрана ───────────────────────────────────────
   Направление входа считает роутер (data-dir на ленте), лесенку — порядок
   блоков. Анимация лежит на детях, а не на самом экране: transform у .screen
   превратил бы .homefx (position: fixed) в приклеенный к ленте, и свет
   главной поехал бы вместе с карточками. */
@keyframes screen-fwd {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-back {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-up {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-down {
  from { opacity: 0; transform: translateY(-14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.screen[data-dir] > :not(.homefx) { animation: screen-fwd var(--t-slow) var(--ease-out) both; }
.screen[data-dir="back"] > :not(.homefx) { animation-name: screen-back; }
.screen[data-dir="up"] > :not(.homefx) { animation-name: screen-up; }
.screen[data-dir="down"] > :not(.homefx) { animation-name: screen-down; }
/* старт с шагом 40 мс: лента не хлопается одним пластом, но и не расползается
   — порядок блоков читается сразу */
.screen[data-dir] > :not(.homefx):nth-child(2) { animation-delay: 40ms; }
.screen[data-dir] > :not(.homefx):nth-child(3) { animation-delay: 80ms; }
.screen[data-dir] > :not(.homefx):nth-child(4) { animation-delay: 120ms; }
.screen[data-dir] > :not(.homefx):nth-child(5) { animation-delay: 160ms; }
/* дальше шаг не растёт: хвост длинной ленты не должен догонять вход
   дольше самого перехода */
.screen[data-dir] > :not(.homefx):nth-child(n + 6) { animation-delay: 180ms; }

/* шапка живёт между экранами, а её содержимое меняется при каждом входе:
   без класса на .appbar она бы дёргалась и на перерисовке того же экрана */
@keyframes chrome-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.appbar--in > * { animation: chrome-in var(--t) var(--ease-out) both; }
.appbar--in > :nth-child(2) { animation-delay: 40ms; }
.appbar--in > :nth-child(3) { animation-delay: 70ms; }

@keyframes shimmer {
  from { background-position: -140% 0; }
  to   { background-position: 140% 0; }
}

@keyframes softpulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* лесенку гасим отдельно: при мгновенной длительности задержка оставалась
     бы видимой — плашки поочерёдно вспыхивали бы на пустом месте */
  .screen[data-dir] > :not(.homefx), .appbar--in > * { animation-delay: 0ms; }
}

/* пользовательский выключатель движения (§36 «анимацию можно выключить») */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
[data-motion="off"] .screen[data-dir] > :not(.homefx),
[data-motion="off"] .appbar--in > * { animation-delay: 0ms; }