/* Витрина значков — в духе Apple: системный шрифт устройства (на iPhone это San Francisco),
   крупный жирный заголовок, подписи заглавными, группы на тёмном фоне, тонкие разделители.
   Цвета — от маскота (27.10.2026, робот с медалью): тёмный фиолетово-чёрный фон, фиолетовые карточки,
   золото медали на прогрессе и кнопках, фиолетовый Twitch на активной вкладке и нажатиях. Основа тёмная —
   это требование Вани; фиолетовый только оттенком, иначе на телефоне режет глаза. */

:root {
  --bg: #0f0a1c;
  --group: #1a1230;
  --group-2: #281b4d;
  --sep: rgba(170, 140, 255, 0.18);
  --text: #f7f5ff;
  --secondary: #a89cc8;
  --tertiary: #716699;
  --brass: #f2c14e;
  --accent: #9146ff;
  --live: #c084ff;
  --warn: #ff6b5a;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  padding: max(10px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
img { display: block; }
button { font: inherit; }
.app { max-width: 560px; margin: 0 auto; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- пустая оболочка ---------- */
.gate { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 10px; color: var(--secondary); }
.gate__mascot { width: 120px; height: 120px; border-radius: 28px; margin: 0 auto; box-shadow: 0 10px 30px rgba(145, 70, 255, 0.35); }
.ex__mascot { width: 104px; height: 104px; border-radius: 26px; margin: 0 auto 12px; box-shadow: 0 10px 28px rgba(145, 70, 255, 0.35); }
.gate__text { margin: 0; max-width: 28ch; }

/* ---------- шапка ---------- */
.head { padding: 6px 0 8px; }
.head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.head__title { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.mascot { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.7), 0 4px 12px rgba(145, 70, 255, 0.35); }
/* «аватарка» шапки: круг, в котором быстро сменяются значки Twitch (29.10.2026); пока они грузятся — Трофик */
.mascot--reel { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 38%, #3a2470 0%, #1a1230 78%); }
.reel__img { display: block; width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: contain; }
.reel__img--face { padding: 0; object-fit: cover; }
.mode { font-size: 13px; font-weight: 600; color: var(--secondary); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mode::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary); }
.mode--collecting::before, .mode--probing::before { background: #34c759; }
.mode--collecting, .mode--probing { color: var(--text); }
.mode--paused::before, .mode--disconnected::before { background: var(--warn); }
.head__line { margin: 2px 0 0; color: var(--secondary); font-size: 15px; }
.head__plan { margin: 4px 0 0; font-size: 13px; color: var(--secondary); }
.head__plan--premium { color: var(--brass); font-weight: 600; }

/* ---------- три числа ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.stat { padding: 14px 6px 12px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--sep); }
.stat__n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__n--chan { color: var(--live); }
.stat__l { margin-top: 6px; font-size: 12px; color: var(--secondary); }

/* ---------- группы ---------- */
.group { background: var(--group); border-radius: var(--radius); overflow: hidden; }
.cap { margin: 22px 0 8px 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); display: flex; justify-content: space-between; align-items: baseline; }
.cap span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tertiary); }

/* ---------- экспонат: кольцо со значком ---------- */
.exhibit { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; padding: 18px 16px; margin-top: 14px; }
.exhibit--idle { grid-template-columns: 1fr; text-align: center; padding: 26px 16px; }
.ring { position: relative; width: 128px; height: 128px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--group-2); stroke-width: 8; }
.ring__bar { fill: none; stroke: var(--brass); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.ring--probe .ring__bar { stroke: var(--live); stroke-dasharray: 12 10; animation: spin 2.4s linear infinite; }
@keyframes spin { to { stroke-dashoffset: -44; } }
.ring__inner { position: absolute; inset: 20px; border-radius: 50%; display: grid; place-items: center; }
.ring__inner img { width: 56px; height: 56px; image-rendering: -webkit-optimize-contrast; }
.ring__inner .ph { font-size: 26px; opacity: 0.4; }
.ring__pct { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); background: var(--group-2); padding: 2px 8px; border-radius: 999px; }
.ex__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); }
.ex__name { margin: 2px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ex__meta { margin: 4px 0 0; font-size: 14px; color: var(--secondary); }
.ex__meta .live { color: var(--live); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; }
.ex__big { margin: 12px 0 0; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ex__big small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); margin-bottom: 4px; }
.ex__small { margin: 8px 0 0; font-size: 14px; color: var(--secondary); line-height: 1.45; font-variant-numeric: tabular-nums; }
.ex__small b { color: var(--text); font-weight: 600; }
.exhibit--idle .ex__name { font-size: 17px; font-weight: 500; color: var(--secondary); }

/* ---------- вкладки ---------- */
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin-top: 18px; padding: 3px; background: var(--group); border-radius: 12px; }
.tab { appearance: none; border: 0; background: transparent; color: var(--secondary); font-size: 14px; font-weight: 600; padding: 6px 4px; border-radius: 9px; cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; -webkit-tap-highlight-color: transparent; }
.tab--on { background: var(--accent); color: #fff; }
.tab--on .tab__q { color: rgba(255, 255, 255, 0.8); }
.tab__q { font-size: 10px; font-weight: 500; color: var(--secondary); font-variant-numeric: tabular-nums; }
.tab__q--out { color: var(--brass); }
@media (hover: hover) { .tab:hover { color: var(--text); } }

/* ---------- панель Premium ---------- */
.prem { padding: 16px; margin-top: 10px; border: 1px solid rgba(227, 180, 92, 0.35); }
.prem__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--brass); }
.prem__list { margin: 0; padding-left: 18px; color: var(--text); font-size: 15px; line-height: 1.5; }
.prem__prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.prem__price { background: var(--group-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.prem__price b { font-size: 18px; font-variant-numeric: tabular-nums; }
.prem__price span { font-size: 12px; color: var(--secondary); }
.btn--gold { width: 100%; background: var(--brass); color: #1a1200; font-size: 16px; padding: 12px 18px; }
.prem__hint { margin: 10px 0 0; font-size: 12px; color: var(--secondary); }
.row--quota .row__state, .row--locked .row__state, .row--unlinked .row__state, .row--off .row__state { color: var(--brass); }
.lock { margin: 10px 2px 0; font-size: 13px; color: var(--secondary); }
.subs { padding: 14px 16px 16px; }
.sub__hint { margin: 0 0 10px; font-size: 14px; color: var(--secondary); line-height: 1.45; }
.sub__row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.sub__input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--sep); background: var(--group-2); color: var(--text); outline: none; }
.sub__input::placeholder { color: var(--secondary); }
.sub__input:focus { border-color: var(--brass); }
.sub__row .btn { flex: none; width: auto; white-space: nowrap; } /* .btn--gold по умолчанию на всю ширину — в строке с полем нельзя */
.sub__card { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--group-2); display: grid; gap: 8px; }
.btn--link { display: block; text-align: center; text-decoration: none; background: var(--brass); color: #1a1200; }
/* Наведение и нажатие — фиолетовый Twitch, как у кнопок очереди (просьба Вани) */
.btn, .btn--link, .head__up { transition: background 120ms ease, color 120ms ease; }
@media (hover: hover) { .btn:hover, .btn--link:hover, .head__up:hover { background: #9146ff; color: #fff; } }
.btn:active, .btn--link:active, .head__up:active { background: #9146ff; color: #fff; }
.btn, .btn--link, .act, .head__up, .tab { -webkit-tap-highlight-color: transparent; }
.is-pressed, .btn.is-pressed, .btn--link.is-pressed, .act.is-pressed, .head__up.is-pressed, .tab.is-pressed { background: #9146ff !important; color: #fff !important; }
.lvl { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--group-2); }
.lvl--on { outline: 1px solid rgba(227, 180, 92, 0.6); }
.lvl__name { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.lvl__terms { margin: 6px 0 0; font-size: 12px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.lvl .prem__list { font-size: 14px; }
.row--unlinked, .row--off { opacity: 0.8; }

/* ---------- очередь ---------- */
.row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px 11px 16px; position: relative; }
.row__mid { min-width: 0; }
.row + .row::before { content: ''; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--sep); }
.row__img { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--group-2); }
.row__img img { width: 32px; height: 32px; }
.row__img .ph { color: var(--tertiary); font-weight: 600; }
.row__name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; }
.row__meta { margin: 2px 0 0; color: var(--secondary); font-size: 14px; }
.row__right { display: grid; justify-items: end; gap: 4px; }
.row__state { font-size: 12px; font-weight: 600; color: var(--secondary); white-space: nowrap; }
.row__left { font-size: 12px; color: var(--tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row__left.soon { color: var(--warn); font-weight: 600; }
.row--collecting .row__state, .row--probing .row__state, .row--confirmed .row__state { color: var(--brass); }
.row--blocked .row__state { color: var(--warn); }
.row--done, .row--skipped, .row--failed, .row--blocked { opacity: 0.55; }
.act { appearance: none; border: 0; background: var(--group-2); color: var(--secondary); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease; -webkit-tap-highlight-color: transparent; }
/* С компа — подсветка при наведении, с телефона — при нажатии. Цвет Twitch. */
@media (hover: hover) { .act:hover { background: #9146ff; color: #fff; } }
.act:active { background: #9146ff; color: #fff; }
.act--undo { color: var(--brass); }
.act--first { color: var(--brass); background: rgba(227, 180, 92, 0.14); }
.act + .act { margin-left: 6px; }
.skipped .row { opacity: 0.75; }
.row--busy { opacity: 0.4; pointer-events: none; }
/* Телефон (27.10.2026): правый столбец со статусом, датой и двумя кнопками съедал половину ширины, и название
   «Final Fantasy XIV Fan Festival 2026 JP - Alpha Chat» ломалось по одному слову в строке. На узком экране правый
   блок «растворяется» (display: contents), статус и дата остаются справа, а кнопки уезжают под текст на всю ширину. */
@media (max-width: 480px) {
  .row { grid-template-areas: 'img mid state' 'img mid left' 'img mid link' 'img acts acts'; gap: 0 12px; }
  .row__img { grid-area: img; }
  .row__mid { grid-area: mid; }
  .row__right { display: contents; }
  .row__state { grid-area: state; justify-self: end; align-self: end; }
  .row__left { grid-area: left; justify-self: end; align-self: start; margin-top: 4px; }
  .row__link { grid-area: link; }
  .row__acts { grid-area: acts; justify-self: start; margin-top: 8px; }
}
.empty { padding: 16px; color: var(--secondary); font-size: 15px; }

/* ---------- коллекция ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 12px 8px; padding: 14px 16px; }
.badge { aspect-ratio: 1; display: grid; place-items: center; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.badge img { width: 32px; height: 32px; }
/* подпись по тапу (телефон) — всплывает над значком */
.badge__tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text); background: var(--group-2); border: 1px solid var(--sep); padding: 5px 9px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.badge--open .badge__tip { display: block; }
.group--wall { overflow: visible; } /* иначе рамка группы обрезает подпись у верхнего ряда плиток */
.badge--open img { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
/* канальные значки: подпись всегда, плитки шире */
.wall--channel { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 12px 6px; }
.wall--channel .badge { aspect-ratio: auto; grid-template-rows: 32px auto; gap: 4px; align-content: start; }
.badge__cap { font-size: 11px; line-height: 1.2; color: var(--secondary); text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.badge--new::after { content: ''; position: absolute; right: 1px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px var(--group); }
.wall__more { padding: 0 16px 14px; text-align: center; }
.btn { appearance: none; border: 0; background: var(--group-2); color: var(--text); font-size: 15px; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.legend { margin: 8px 2px 0; font-size: 12px; color: var(--tertiary); }
.legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #34c759; margin-right: 6px; vertical-align: middle; }
.sub { padding: 12px 16px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--sep); }
.sub__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--live); }
.sub span { font-size: 12px; color: var(--tertiary); }

/* ---------- админка (только владелец) ---------- */
.adm { padding: 4px 0 8px; }
.adm__stats { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--secondary); border-bottom: 1px solid var(--sep); }
.adm__msg { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--brass); border-bottom: 1px solid var(--sep); word-break: break-all; }
.adm__box { padding: 12px 16px; border-bottom: 1px solid var(--sep); }
.adm__box:last-child { border-bottom: 0; }
.adm__h { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.adm__field { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--secondary); }
.adm__input { font: inherit; font-size: 15px; color: var(--text); background: var(--group-2); border: 0; border-radius: 9px; padding: 8px 10px; width: 100%; }
.adm__inline { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.adm__inline .adm__input { flex: 1; }
.adm__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sep); }
.adm__row--off { opacity: 0.55; }
.adm__code { font-weight: 600; font-size: 15px; word-break: break-all; }
.adm__muted { color: var(--secondary); font-size: 12px; margin: 2px 0 0; line-height: 1.4; }
.adm__acts { display: grid; gap: 4px; justify-items: end; }
.adm .btn { margin-top: 8px; }

/* ---------- низ ---------- */
.foot { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--tertiary); padding: 0 2px; }
.foot .err { color: var(--warn); }
.foot__safe { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--group); color: var(--secondary); font-size: 13px; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
.foot__lock { font-size: 18px; line-height: 1; flex: 0 0 auto; }

@media (max-width: 360px) {
  .exhibit { grid-template-columns: 108px 1fr; gap: 12px; }
  .ring { width: 108px; height: 108px; }
  .ring__inner { inset: 16px; }
  .ring__inner img { width: 48px; height: 48px; }
  .ex__big { font-size: 30px; }
  .head__title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring__bar { transition: none; }
  .ring--probe .ring__bar { animation: none; }
}

/* ---------- замки Premium у бесплатных ---------- */
.head__up { appearance: none; border: 0; background: rgba(227, 180, 92, 0.14); color: var(--brass); font: inherit; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.act--locked { color: var(--brass); }
.act__star { font-size: 10px; margin-left: 3px; }
.prem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prem__close { appearance: none; border: 0; background: var(--group-2); color: var(--secondary); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; flex: none; }
.badge__cap--chan { color: var(--text); }
.badge__cap--chan::before { content: '@'; color: var(--secondary); }

/* ---------- «Сабки»: карточки уровней и кнопки сроков (27.10.2026) ---------- */
.sub__pick { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.subs .lvl { margin-top: 10px; }
.sub__perks { margin: 2px 0 8px; font-size: 13px; color: var(--secondary); line-height: 1.45; }
.sub__terms { display: flex; flex-wrap: wrap; gap: 6px; }
.btn--term { font-size: 14px; padding: 8px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.btn--term:disabled { opacity: 0.55; cursor: default; }

/* ---------- вкладка «Платные» (27.10.2026): пять вкладок на телефоне и чипы стримеров ---------- */
.paid__chips { margin-top: 8px; }
@media (max-width: 420px) {
  .tab { font-size: 13px; padding: 6px 2px; }
  .tab__name { white-space: nowrap; }
}

/* ---------- картинки значков в карточках «Платные» (streamdatabase, 27.10.2026) ---------- */
.paid__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.paid__head img { width: 28px; height: 28px; flex: none; }
.paid__head .lvl__name { margin: 0; }
.paid__ph { font-size: 20px; line-height: 1; flex: none; }

/* ---------- заставка с Трофиком (27.10.2026) ---------- */
.intro { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.intro[hidden] { display: none; }
/* Во весь экран (Ваня, 27.10.2026): квадратный ролик растягивается на всю высоту, края режутся — сцена в центре.
   Абсолютное позиционирование ещё и лечит глюк Telegram Desktop: с min(100vw,100vh) постер в первые секунды
   рисовался крошечным квадратиком в углу чёрного прямоугольника. */
/* Ролик квадратный, экран телефона вытянутый. Ваня (28.10.2026): «на весь экран, но отдали» — поэтому сам ролик
   показываем целиком (contain), а поля сверху и снизу заливаем размытым первым кадром той же сцены: читается как
   один экран без тёмных полос, и робот не укрупняется обрезкой. */
.intro__bg { position: absolute; inset: -10%; background: url('/intro.jpg?v=17') center / cover no-repeat; filter: blur(30px) brightness(0.7) saturate(1.1); transform: scale(1.1); z-index: 0; }
/* 28.10.2026: ролик теперь вертикальный 9:16 — заполняет экран телефона целиком (cover), размытая подложка
   остаётся только для широких окон (Telegram Desktop), где по бокам иначе была бы пустота. */
.intro__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: transparent; display: block; z-index: 1; opacity: 0; transition: opacity 250ms ease; }
/* 29.10.2026: ролик прозрачный, пока окно Telegram раскрывается (см. startIntro) — иначе он дёргался в масштабе */
.intro--play .intro__video { opacity: 1; }
/* 29.10.2026: на телефоне ролик прижат к низу окна и имеет постоянный размер (под полный экран) —
   окно Telegram раскрывается вверх, ролик не двигается и не масштабируется, поэтому стартует сразу */
.intro__video--pinned { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); max-width: none; }
.intro__title, .intro__skip { z-index: 2; }
.intro__title { position: absolute; left: 0; right: 0; bottom: 13%; margin: 0; text-align: center; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55); pointer-events: none; }
.intro--title .intro__title { opacity: 1; transform: none; }
.intro__skip { position: absolute; left: 0; right: 0; bottom: 5%; margin: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.5); pointer-events: none; }
.intro--out { opacity: 0; transition: opacity 450ms ease; pointer-events: none; }
/* INTRO-TAP (30.10.2026): по тапу заставка уходит за 150 мс — витрина под ней уже собрана */
.intro--out.intro--skip { transition: opacity 150ms ease; }
.foot__intro { margin-top: 10px; }
/* фон заставки — свечение от центра в цвет сцены ролика, чтобы края квадратного видео не торчали на тёмном */
.intro { background: radial-gradient(circle at 50% 46%, #3a2470 0%, #1c1038 48%, #0f0a1c 100%); }