/* ============================================================
   RETRO X7 — design tokens
   Бренд TheBattleClub. Акцент взят из логотипа (assets/brand/logo.png):
   градиент #FFC01E → #F7911E. ТЗ §1.1 — премиальность, сдержанная
   типографика, без «дешёвой фэнтезийной позолоты»: акцент работает
   точечно, основной объём несут нейтрали и фотография.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --c-void: #08080a;
  --c-bg: #0b0b0e;
  --c-surface: #121216;
  --c-surface-2: #191920;
  --c-surface-3: #22222b;

  /* --- Text --- */
  --c-text: #f4f2ef;
  --c-text-2: #b6b3ae;
  --c-text-3: #aaa6a0;
  --c-text-on-accent: #16120a;

  /* --- Brand accent --- */
  --c-accent: #f7911e;
  --c-accent-hi: #ffc01e;
  --c-accent-lo: #d9760f;
  --c-accent-grad: linear-gradient(135deg, #ffc01e 0%, #f7911e 62%, #e07d12 100%);
  --c-accent-soft: rgba(247, 145, 30, 0.14);

  /* --- Status (ТЗ §13.3 — цвет никогда не единственный признак) --- */
  --c-done: #6f7a6b;
  --c-active: var(--c-accent);
  --c-upcoming: #8e8e9c;
  --c-error: #ff6b5e;
  --c-success: #58c98a;

  /* --- Lines --- */
  --c-line: rgba(244, 242, 239, 0.10);
  --c-line-strong: rgba(244, 242, 239, 0.22);

  /* --- Type --- */
  --f-display: 'EB Garamond', 'Times New Roman', serif;
  /* EB Garamond по умолчанию даёт минускульные цифры — «7» в RETRO X7 уезжает
     под базовую линию. Заголовкам нужны прописные (lining) цифры. */
  --fvn-display: lining-nums;
  --f-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-micro: 0.75rem;      /* 12 */
  --t-caption: 0.8125rem;  /* 13 */
  --t-sm: 0.875rem;        /* 14 */
  --t-base: 1rem;          /* 16 */
  --t-md: 1.125rem;        /* 18 */
  --t-lg: 1.375rem;        /* 22 */
  --t-xl: 1.75rem;         /* 28 */
  --t-2xl: 2.25rem;        /* 36 */
  --t-3xl: 3rem;           /* 48 */
  --t-hero: clamp(3rem, 8.5vw, 7.5rem);
  --t-section: clamp(2rem, 4.2vw, 3.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --tr-eyebrow: 0.22em;
  --tr-display: -0.015em;

  /* --- Spacing --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px;

  --section-y: clamp(64px, 9vw, 128px);

  /* --- Layout --- */
  --page: 1360px;
  --page-narrow: 980px;
  --gutter: clamp(18px, 3.2vw, 48px);
  --header-h: 76px;

  /* --- Radius --- */
  --r-none: 0;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Elevation --- */
  --sh-card: 0 18px 48px rgba(0, 0, 0, 0.55);
  --sh-accent: 0 6px 18px rgba(247, 145, 30, 0.16);

  /* --- Motion (ТЗ §5.1, §13.3) --- */
  --e-out: cubic-bezier(0.22, 0.75, 0.28, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Длинные проезды камеры. Интерфейсные кривые для них слишком резкие:
     на дистанции в экран они читаются как рывок. */
  --e-cam: cubic-bezier(0.32, 0.72, 0.24, 1);

  /* Насколько фоновый план выходит за границы своей секции. На этой длине
     он проявляется и гаснет, поэтому стыка секций не существует физически. */
  --cam-bleed: 32svh;
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 620ms;

  /* --- Z --- */
  --z-scene: 0;
  --z-content: 10;
  --z-header: 100;
  --z-menu: 110;
  --z-modal: 200;

  /* Пропорции медиа в разделе «что нового». Шкала нужна потому, что
     материал приезжает частями: без неё высоты рамок меняются от пункта к
     пункту случайно, и вертикальный ритм ломается сильнее, чем от разницы
     самих кадров. Заглушка и настоящий кадр обязаны занимать одно место. */
  --ratio-landscape: 3 / 2;
  --ratio-cinematic: 16 / 9;

  /* Слайд один на всю ширину минус полоса следующего: без неё крупный
     слайд читается законченной историей и трек не листают. */
  /* Резерв высоты слайда. Держать его больше самого высокого слайда
     незачем: лишнее превращается в пустую полосу под кадром, и стык со
     следующей секцией читается провалом. Самый высокий — слайд умений,
     562px; 36rem = 576px даёт ему запас и ничего не тратит впустую. */
  --updates-slide-min: 36rem;
  --updates-media-basis: 58%;
  --updates-peek: var(--s-10);
  --updates-deck-gap: var(--s-8);
  --updates-nav-gap: var(--s-5);

  /* --- Лента подарков ---
     Она живая: медленно едет сама по себе и разгоняется по нажатию.
     Скорости здесь, а не в JS, потому что от них зависит и вёрстка кадра:
     ячейка обязана успевать прочитаться на холостом ходу. */
  --gift-machine-max: 1160px; /* ширина всей механики */
  --gift-cell: 132px;         /* шаг ячейки, десктоп */
  --gift-frame: 104px;        /* сторона рамки предмета */
  /* Иконки предметов приходят из игры ровно 32×32. Растянуть их — значит
     размыть пиксельный рисунок, ради которого они и узнаются; поэтому
     размер показа равен исходному, а объём даёт рамка вокруг. */
  --gift-icon: 32px;
  --gift-plate: 60px;         /* подложка под иконкой внутри рамки */
  --gift-slot: 68px;          /* высота места под выпавший подарок */
  --gift-drift: 34;           /* px/с холостого хода, без единиц — читает JS */
  --gift-spin: 3600ms;        /* разгон и торможение до подарка */
  --gift-hold: 1400ms;        /* пауза на выпавшем предмете до возврата хода */
  /* Разгон коротким рывком, торможение длинным выкатом. Кривая начинается
     полого — лента уже едет холостым ходом, и рывок с места читался бы
     как склейка. Значения читает JS: она нужна не переходу, а покадровой
     анимации, поэтому парсится из токена, а не дублируется в коде. */
  --e-reel: cubic-bezier(0.20, 0.06, 0.10, 1);

  /* Минимум на ступень лестницы грейдов. Ниже него набор экипировки
     («Blue Wolf · Doom · Avadon · Zubei») рвётся на три строки и ступень
     перестаёт читаться; вместо сжатия ряд уезжает в прокрутку. */
  --ladder-step: 165px;
  /* Река по нити грейдов. Один проход гребня от первой ступени до
     последней — --river-run, из них --river-lead в начале гребень стоит
     и только проявляется. Ступень i загорается на i/n пути; шаг считает
     скрипт от числа ступеней и кладёт в --t каждой ступени. */
  --river-run: 8.2s;
  --river-lead: 0.4s;
  --river-on: 280ms;          /* зажигание ступени */
  --river-copy-delay: 160ms;  /* фраза — после своей ступени */
  --river-copy-in: 420ms;
  --river-pulse: 220ms;       /* импульс ромба под гребнем */
  --river-line-h: 2px;
  --river-base: rgba(255, 255, 255, 0.16);
  --river-active-opacity: 0.48;
  --river-core-w: 28px;  --river-core-h: 12px;  --river-core-opacity: 0.82;
  --river-tail-w: 220px; --river-tail-h: 20px;  --river-tail-opacity: 0.24;
  --dot-settled-opacity: 0.72;

  /* --- ОБТ-ивент ---
     Поп-ап шире обычной колонки: внутри две таблицы наград рядом.
     Арт лежит полосой поверху и растворяется в фон карточки к --ev-art-fade,
     поэтому стыка не видно ни на какой ширине. */
  --ev-card-max: 1080px;
  --ev-art-max: 22rem;
  --ev-art-fade: 52%;

  /* Слой ролика в мониторе доворачивается под наклон стекла, и после
     поворота его углы уходят внутрь рамки — масштаб их закрывает.
     Чем сильнее наклон, тем больше нужно: на портретном кадре монитор
     развёрнут на 11°, там значение своё (см. sections.css). */
  --screen-media-scale: 1.16;

  /* Отступ снизу у первого экрана на телефоне. Отсчёт и плашка ивента
     прижаты к нижнему краю, и «край» здесь ненадёжен: браузер держит
     внизу свою панель, система — полосу жеста, а высокий экран часть
     страницы просто не показывает без прокрутки. Поэтому не фиксированные
     пиксели, а доля экрана — блок садится на одну и ту же высоту (82%)
     и на 560, и на 956, оставаясь в зоне большого пальца. */
  --hero-bottom-safe: max(var(--s-8), 18svh);

  /* Минимальная tap-зона, ТЗ §13.2 */
  --tap: 44px;

  /* --- Слои игрового кадра ---
     Ровная чёрная вуаль убивала световой рисунок сцены: кадры становились
     взаимозаменяемым «фото под плёнкой». Кадр собирается по слоям —
     изображение, тон секции, локальный свет, направленный scrim под
     текстом, виньетка, зерно. Порядок именно такой: scrim обязан лежать
     выше света, иначе текст теряет контраст на светлом пятне. */
  --c-backdrop-tone: rgba(8, 8, 10, 0.38);
  --c-backdrop-scrim: rgba(8, 8, 10, 0.82);
  --c-backdrop-vignette: rgba(0, 0, 0, 0.66);
  /* Две ступени плотности для слоёв поверх движущегося кадра. Мягкая —
     там, где сцена должна читаться; плотная — там, где под текстом идёт
     видео и содержимое кадра непредсказуемо. На узком экране текст и
     запись не могут быть главными одновременно, и выигрывает текст. */
  --overlay-soft: rgba(8, 8, 10, 0.66);
  --overlay-strong: rgba(8, 8, 10, 0.90);
  --overlay-faint: rgba(8, 8, 10, 0.30);
  --c-backdrop-amber: rgba(247, 145, 30, 0.14);
  --c-backdrop-cold: rgba(83, 111, 143, 0.13);

  --backdrop-light-size: 58rem;
  --backdrop-light-x: 72%;
  --backdrop-light-y: 34%;
  --backdrop-scrim-stop: 44%;
  --backdrop-vignette-stop: 62%;
  --backdrop-grain-opacity: 0.055;
  --backdrop-image-scale: 1.04;

  /* Температура по секциям: без неё герой, карта и клиент сваливаются
     в один иссиня-чёрный, и любой тёплый элемент читается одинаково. */
  --scene-tint-hero: rgba(24, 32, 48, 0.30);
  --scene-tint-map: rgba(38, 34, 26, 0.24);
  --scene-tint-grade: rgba(22, 34, 40, 0.28);
  --scene-tint-client: rgba(18, 18, 20, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
  }
}

:root {
  --closing-scene-height: 110svh;
  --closing-scene-shade: linear-gradient(90deg, rgba(8,8,10,.72), rgba(8,8,10,.24)),
    linear-gradient(180deg, rgba(8,8,10,.12), rgba(8,8,10,.6) 45svh, rgba(8,8,10,.9) 80svh, var(--c-void) 110svh);
}

:root {
  --recruitment-shade: linear-gradient(90deg, rgba(6,6,8,.56), rgba(6,6,8,.48)),
    linear-gradient(180deg, rgba(6,6,8,.82), rgba(6,6,8,.48) 35%, rgba(6,6,8,.12) 65%, rgba(6,6,8,.84));
}

:root { --t-clan-count: clamp(4rem, 7vw, 6rem); --w-emphasis: 600; }

:root { --t-clan-name: 1.1875rem; --t-clan-name-mobile: .9375rem; }