/* ==========================================================================
   Evie — лендинг (только мобильная версия)
   Все значения берутся из токенов ниже: цвета, отступы, радиусы, стили текста.
   ========================================================================== */

:root {
  /* Фоны (светлая тема) */
  --bg: #FFFFFF;
  --surface-1: #F5F8FD;
  --surface-2: #EDF3FC;

  /* Линии */
  --line: rgba(11, 18, 32, 0.08);
  --line-strong: rgba(11, 18, 32, 0.14);

  /* Текст */
  --text: #0B1220;
  --text-2: #586274;
  --text-3: #8A94A6;

  /* Акценты: синий и голубой */
  --blue: #1D64F2;
  --blue-hover: #1653D1;
  --blue-soft: #EAF1FE;
  --on-blue: #FFFFFF;
  --cyan: #2BB8F2;
  --on-cyan: #04121F;

  /* Экран игры внутри телефона (тёмный) */
  --game-bg: #0A1120;
  --game-surface: #141D2F;
  --game-surface-2: #1C2740;
  --game-line: rgba(255, 255, 255, 0.08);
  --game-line-strong: rgba(255, 255, 255, 0.16);
  --game-text: #FFFFFF;
  --game-text-2: #9AA6BD;
  --game-text-3: #66728A;
  --rail: #1A2438;
  --felt: #0D47A8;

  --felt-text-2: #C9D6F2;

  /* Корпус телефона */
  --titanium: #2B2E34;
  --titanium-edge: rgba(255, 255, 255, 0.22);

  /* Игральные карты */
  --card-face: #F7F8FA;
  --card-ink: #0B1220;
  --card-red: #D7263D;

  /* Отступы */
  --space-0: 0;
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 8px;
  --space-100: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 64px;
  --space-800: 80px;
  --space-900: 96px;

  /* Радиусы (шкала Tailwind) */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Движение */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Сетка */
  --page-max: 430px;
  --gutter: var(--space-300);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Стили текста
   -------------------------------------------------------------------------- */

.heading-1 { font-size: 3.75rem; line-height: 1; font-weight: 600; }
.heading-2 { font-size: 3rem; line-height: 1; font-weight: 600; }
.heading-3 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.heading-4 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.heading-5 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.heading-6 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }

.title-1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.title-2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; }
.title-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.title-4 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.title-5 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }

.body-1 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.body-2 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.body-3 { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.body-4 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.body-5 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.body-6 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }

.button-lg { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.button-md { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.button-sm { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.button-xsm { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }

.caption-1 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.caption-2 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; }
.caption-3 { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.caption-4 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.caption-5 { font-size: 0.75rem; line-height: 1rem; font-weight: 400; }

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, figcaption {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

.page {
  position: relative;
  max-width: var(--page-max);
  min-height: 100dvh;
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-200);
  left: 50%;
  z-index: 100;
  padding: var(--space-75) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--bg);
  transform: translate(-50%, -200%);
  transition: transform 0.5s var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-75);
  padding: var(--space-75) var(--space-100);
  border: 0;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s var(--ease);
}

.btn i {
  font-size: 1.25em;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 0.2s;
}

.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--blue);
  color: var(--on-blue);
}

.btn-primary:hover {
  background: var(--blue-hover);
}

.btn-block {
  width: 100%;
}

/* Закреплённая кнопка внизу экрана */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--space-200) + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}

.sticky-cta .btn {
  box-shadow: 0 8px 24px rgba(29, 100, 242, 0.32);
}

.sticky-cta.is-hidden {
  opacity: 0;
  transform: translateY(calc(100% + var(--space-200)));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Навигация: плавающая панель с логотипом
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: calc(var(--space-100) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-200);
  pointer-events: none;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}

/* Без JS плашка не нужна: на первом экране её нет, а показывать её некому */
html:not(.js) .nav-wrap {
  display: none;
}

.nav-wrap.is-hidden {
  opacity: 0;
  transform: translateY(calc(-100% - var(--space-200)));
}

.nav-wrap.is-hidden .nav {
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  padding: var(--space-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  padding: var(--space-50) var(--space-100) var(--space-50) var(--space-50);
  border-radius: var(--radius-full);
  transition: background-color 0.3s var(--ease);
}

.brand:hover {
  background: var(--surface-2);
}

.brand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  font-size: 14px;
}

.brand-name {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Экран 1 · Обложка
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--space-400) + env(safe-area-inset-top))
    var(--gutter)
    var(--space-700);
}

.offer-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-75);
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--blue-soft);
  color: var(--blue);
}

.offer-badge i {
  font-size: 16px;
}

/* Светлая тема: градиент заголовка #000000 → #666666 */
.hero-title {
  max-width: 680px;
  margin-top: var(--space-200);
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.hero-sub {
  max-width: 680px;
  margin-top: var(--space-200);
  color: var(--text-2);
}

.hero-cta {
  margin-top: var(--space-600);
}

/* --------------------------------------------------------------------------
   Визуал: смартфон с покерной игрой
   Экран 252 × 548 (пропорции современного iPhone), координаты в пикселях.
   Радиусы корпуса повторяют настоящий телефон, поэтому выходят за шкалу
   Tailwind; вложенность считается по формуле: 48 − 3 = 45, 45 − 7 = 38.
   -------------------------------------------------------------------------- */

.phone-scene {
  position: relative;
  margin-top: var(--space-500);
}

.iphone {
  position: relative;
  width: 272px;
  margin: 0 auto;
  padding: 3px;
  border-radius: 48px;
  background: var(--titanium);
  box-shadow:
    inset 0 0 0 1px var(--titanium-edge),
    0 32px 64px rgba(11, 18, 32, 0.22),
    0 8px 16px rgba(11, 18, 32, 0.12);
}

.iphone-bezel {
  padding: 7px;
  border-radius: 45px;
  background: #000000;
}

.screen {
  position: relative;
  height: 548px;
  border-radius: 38px;
  background: var(--game-bg);
  color: var(--game-text);
  overflow: hidden;
}

/* Кнопки на корпусе */
.side-btn {
  position: absolute;
  width: 3px;
  background: var(--titanium);
  box-shadow: inset 0 0 0 1px var(--titanium-edge);
}

.side-action,
.side-vol-up,
.side-vol-down {
  left: -3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.side-power,
.side-camera {
  right: -3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.side-action { top: 104px; height: 28px; }
.side-vol-up { top: 152px; height: 48px; }
.side-vol-down { top: 212px; height: 48px; }
.side-power { top: 176px; height: 76px; }
.side-camera { top: 340px; height: 44px; }

.island {
  position: absolute;
  top: var(--space-75);
  left: 50%;
  z-index: 3;
  width: 78px;
  height: 23px;
  margin-left: -39px;
  border-radius: var(--radius-full);
  background: #000000;
}

.status-bar {
  position: absolute;
  top: var(--space-75);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  align-items: center;
  height: 23px;
}

.status-time {
  justify-self: center;
}

.status-icons {
  grid-column: 3;
  justify-self: center;
  display: inline-flex;
  gap: var(--space-25);
  font-size: 12px;
}

.game-bar {
  position: absolute;
  top: 44px;
  left: var(--space-200);
  right: var(--space-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--game-text-2);
  font-size: 16px;
}

.game-bar .caption-4 {
  color: var(--game-text);
}

.game-table {
  position: absolute;
  top: 80px;
  left: 22px;
  right: 22px;
  bottom: 96px;
  padding: var(--space-75);
  border-radius: var(--radius-full);
  background: var(--rail);
}

/* Радиус сукна: full − 8 остаётся full */
.game-felt {
  position: relative;
  height: 100%;
  border: 1px solid var(--game-line);
  border-radius: var(--radius-full);
  background: var(--felt);
}

.game-felt::before {
  content: "";
  position: absolute;
  inset: var(--space-100);
  border: 1px solid var(--game-line-strong);
  border-radius: var(--radius-full);
}

/* Места за столом: центр задаётся в разметке через --x и --y */
.seat {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
  transform: translate(-50%, -50%);
  transition: opacity 0.6s var(--ease);
}

.seat.is-folded {
  opacity: 0.45;
}

.seat-avatar,
.me-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid var(--rail);
  border-radius: var(--radius-full);
  background: var(--game-surface-2);
}

.seat-avatar {
  width: 28px;
  height: 28px;
  color: var(--tint, var(--game-text-2));
}

/* Кольцо вокруг аватара: чей ход, а у игрока ещё и выигрыш */
.seat-avatar::after,
.me-avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease);
}

.seat.is-turn .seat-avatar::after,
.me.is-turn .me-avatar::after {
  opacity: 1;
  transform: none;
}

.seat-stack,
.me-stack {
  display: grid;
  justify-items: center;
  padding: 0 var(--space-50);
  border-radius: var(--radius-full);
  background: var(--game-surface);
}

/* Пока игрок ходит, вместо стека плавно проявляется его действие */
.stack-value,
.stack-action {
  grid-area: 1 / 1;
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.stack-action {
  color: var(--cyan);
  opacity: 0;
  transform: translateY(4px);
}

.is-action .stack-value {
  opacity: 0;
  transform: translateY(-4px);
}

.is-action .stack-action {
  opacity: 1;
  transform: none;
}

/* Закрытые карты соперника у аватара */
.seat-cards {
  position: absolute;
  top: var(--space-25);
  display: flex;
}

.seat.is-left .seat-cards { left: calc(50% + 14px); }
.seat.is-right .seat-cards { right: calc(50% + 14px); }

.seat-cards i {
  width: 12px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  background: var(--blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.seat-cards i + i {
  margin-left: -6px;
  rotate: 10deg;
}

/* Игральные карты */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--card-face);
  color: var(--card-ink);
}

.pcard.is-red {
  color: var(--card-red);
}

.pcard-sm {
  width: 24px;
  height: 34px;
}

.pcard-lg {
  width: 36px;
  height: 52px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Рамка выигрышной карты: радиус 4 + 2 */
.pcard.is-win::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

/* Открытые карты соперника на вскрытии */
.show-cards {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  gap: var(--space-25);
  perspective: 400px;
}

/* Фишки: стопка из трёх, как в покерных приложениях */
.chips {
  position: relative;
  flex: none;
  width: 14px;
  height: 18px;
}

.chips i {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  background: var(--blue);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.chips i:nth-child(1) { bottom: 0; }
.chips i:nth-child(2) { bottom: 2px; background: var(--cyan); }
.chips i:nth-child(3) { bottom: 4px; background: var(--game-text); border-color: var(--blue); }

/* Ставки: место задаётся --x и --y, путь в банк --px и --py */
.bet-slot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
}

.bet {
  display: flex;
  align-items: center;
  gap: var(--space-50);
  opacity: 0;
}

.bet-amount {
  padding: 0 var(--space-50);
  border-radius: var(--radius-full);
  background: var(--game-surface);
}

/* Банк в центре стола (центр на 287px) */
.pot {
  position: absolute;
  top: 278px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-50);
  width: fit-content;
  margin: 0 auto;
  padding: 0 var(--space-75);
  border-radius: var(--radius-full);
  background: var(--game-surface);
}

/* Кнопка дилера переезжает к месту дилера: --dx и --dy */
.dealer {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--game-text);
  color: var(--game-bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  transform: translate(calc(var(--dx) - 8px), calc(var(--dy) - 8px));
  transition: transform 0.9s var(--ease);
}

.board {
  position: absolute;
  top: 230px;
  left: 0;
  right: 0;
  display: flex;
  gap: var(--space-25);
  width: fit-content;
  margin: 0 auto;
}

/* Пустое место под карту: видно, пока улица не открыта */
.slot {
  position: relative;
  width: 28px;
  height: 40px;
  perspective: 400px;
  border: 1px dashed var(--game-line-strong);
  border-radius: var(--radius);
}

.slot .pcard {
  position: absolute;
  inset: -1px;
}

.win-banner {
  position: absolute;
  top: 274px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-50);
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--cyan);
  color: var(--on-cyan);
}

.hero-cards {
  position: absolute;
  top: 366px;
  left: calc(50% - 37px);
  display: flex;
  gap: var(--space-25);
}

.me {
  position: absolute;
  top: 440px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
}

.me-avatar {
  width: 32px;
  height: 32px;
  color: var(--game-text-2);
  font-size: 16px;
}

.me-stack {
  color: var(--cyan);
}

.me-stack .stack-action {
  color: var(--game-text);
}

.home-indicator {
  position: absolute;
  bottom: var(--space-75);
  left: 50%;
  width: 100px;
  height: 4px;
  margin-left: -50px;
  border-radius: var(--radius-full);
  background: var(--game-text);
  opacity: 0.6;
}

/* Подсказка Evie: баннер в духе уведомлений iPhone. Светлое матовое стекло,
   иконка приложения, жирный заголовок, время справа, ниже текст.
   Радиус иконки = 16 − 8 (отступ баннера) */
.push {
  position: absolute;
  top: 36px;
  left: var(--space-75);
  right: var(--space-75);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-75) var(--space-100) var(--space-75) var(--space-75);
  border-radius: var(--radius-2xl);
  background: rgba(250, 251, 253, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Второе уведомление в стопке, как в iOS */
.push::after {
  content: "";
  position: absolute;
  left: var(--space-100);
  right: var(--space-100);
  bottom: calc(var(--space-75) * -1);
  z-index: -1;
  height: var(--space-200);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: rgba(250, 251, 253, 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* Иконка приложения Evie: скруглённый квадрат с бликом по краю */
.push-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: var(--blue);
  color: var(--on-blue);
  font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.push-body {
  flex: 1;
  min-width: 0;
}

.push-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-75);
}

.push-time {
  color: var(--text-3);
}

.push-move {
  color: var(--text);
  white-space: nowrap;
}

/* Статичный кадр (без JS или при reduced motion): вскрытие раздачи, банк у игрока */
.scene:not(.is-live) .pcard.is-win::after,
.scene:not(.is-live) .me-avatar::after {
  opacity: 1;
  transform: none;
}

.scene:not(.is-live) .board .pcard:not(.is-win) {
  opacity: 0.4;
}

.scene:not(.is-live) .pot,
.scene:not(.is-live) .seat-cards,
.scene:not(.is-live) .show-cards:not(.is-static) {
  display: none;
}

/* Живая игра (см. main.js). Карты прилетают из центра стола и переворачиваются,
   фишки выезжают от игрока, доезжают до банка и только потом гаснут */
.scene.is-live .pcard {
  opacity: 0;
  transition:
    transform 0.7s var(--ease),
    opacity 0.4s var(--ease);
}

/* Карты на столе и на вскрытии переворачиваются */
.scene.is-live .board .pcard,
.scene.is-live .show-cards .pcard {
  transform: rotateY(90deg) scale(0.9);
}

/* Карты игрока прилетают из центра стола и туда же уходят в конце раздачи */
.scene.is-live .hero-cards .pcard {
  transform: translateY(-120px) scale(0.5);
}

.scene.is-live .pcard.is-shown {
  opacity: 1;
  transform: none;
}

.scene.is-live.is-showdown .board .pcard.is-shown:not(.is-win) {
  opacity: 0.4;
}

.scene.is-live.is-showdown .pcard.is-win::after {
  opacity: 1;
}

/* Закрытые карты соперников: по одной за круг раздачи, при сбросе уходят в центр */
.scene.is-live .seat-cards i {
  opacity: 0;
  transform: translate(var(--cx), var(--cy)) scale(0.4);
  transition:
    transform 0.7s var(--ease),
    opacity 0.4s var(--ease);
}

.scene.is-live .seat.has-card-1 .seat-cards i:first-child,
.scene.is-live .seat.has-cards .seat-cards i {
  opacity: 1;
  transform: none;
}

/* На вскрытии закрытые карты гаснут на месте, рядом переворачиваются открытые */
.scene.is-live .seat.is-showing .seat-cards i {
  opacity: 0;
  transform: scale(0.8);
}

/* Уведомление выезжает из-за верхнего края экрана и уезжает обратно */
.scene.is-live .push {
  opacity: 0;
  transform: translateY(calc(-100% - 40px)) scale(0.96);
  transition:
    transform 0.6s var(--ease),
    opacity 0.4s var(--ease);
}

.scene.is-live .push.is-on {
  opacity: 1;
  transform: none;
}

.scene.is-live .win-banner {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition:
    opacity 0.6s var(--ease),
    transform 0.7s var(--ease);
}

.scene.is-live.is-won .win-banner {
  opacity: 1;
  transform: none;
}

/* Фишки выезжают от места игрока к месту ставки */
.scene.is-live .bet {
  transform: translate(var(--sx), var(--sy)) scale(0.6);
  transition:
    transform 0.7s var(--ease),
    opacity 0.4s var(--ease);
}

.scene.is-live .bet.is-shown {
  opacity: 1;
  transform: none;
}

/* В банк и обратно к игроку: сначала доезжают, потом гаснут */
.scene.is-live .bet.is-collect,
.scene.is-live .bet.is-return {
  opacity: 0;
  transition:
    transform 0.7s var(--ease),
    opacity 0.25s var(--ease) 0.45s;
}

.scene.is-live .bet.is-collect {
  transform: translate(var(--px), var(--py)) scale(0.7);
}

.scene.is-live .bet.is-return {
  transform: translate(var(--sx), var(--sy)) scale(0.6);
}

.scene.is-live .pot {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
}

.scene.is-live .pot.is-shown {
  opacity: 1;
  transform: none;
}

/* Выигрыш: банк едет к игроку и гаснет у него */
.scene.is-live.is-won .pot.is-shown {
  opacity: 0;
  transform: translateY(169px) scale(0.6);
  transition:
    transform 0.9s var(--ease),
    opacity 0.3s var(--ease) 0.6s;
}

.scene.is-live.is-won .me-avatar::after {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-700) var(--gutter);
}

.section-sub {
  max-width: 680px;
  margin-top: var(--space-100);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Экран 2 · Что ты получишь: галерея со свайпом
   -------------------------------------------------------------------------- */

.gets {
  background: var(--surface-1);
}

/* flow-root: отрицательные отступы ленты не складываются с отступом галереи */
.gallery {
  position: relative;
  display: flow-root;
  margin-top: var(--space-400);
}

/* Подсказка свайпа: палец появляется в нижней части карточки и тянет ленту влево,
   лента чуть уезжает и возвращается. Снизу 64px = точки (24) + отступ (16) + 24 до низа карточки */
.swipe-hint {
  position: absolute;
  bottom: var(--space-700);
  right: var(--space-500);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(11, 18, 32, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--game-text);
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.25);
  opacity: 0;
  pointer-events: none;
}

.gallery.is-hinting .swipe-hint {
  animation: swipe-hand 1.8s var(--ease) 2;
}

.gallery.is-hinting .gallery-list {
  animation: swipe-nudge 1.8s var(--ease) 2;
}

@keyframes swipe-hand {
  0% { opacity: 0; transform: translateX(24px) scale(0.9); }
  20% { opacity: 1; transform: translateX(24px) scale(1); }
  65% { opacity: 1; transform: translateX(-64px) scale(1); }
  85%, 100% { opacity: 0; transform: translateX(-64px) scale(0.9); }
}

@keyframes swipe-nudge {
  0%, 20% { transform: none; }
  65% { transform: translateX(-48px); }
  90%, 100% { transform: none; }
}

/* Лента со свайпом обрезает всё, что выходит за её края, поэтому сверху и снизу
   у неё запас под тень карточек. Отрицательные отступы возвращают раскладку на место */
.gallery-viewport {
  position: relative;
  margin: calc(var(--space-200) * -1) calc(var(--gutter) * -1) calc(var(--space-600) * -1);
  padding: var(--space-200) 0 var(--space-600) var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.gallery-viewport::-webkit-scrollbar {
  display: none;
}

.gallery-viewport:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Карточка уже экрана: справа виден край следующей.
   Отступ справа задан у списка, чтобы последняя карточка не прилипала к краю */
.gallery-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(min(100vw, var(--page-max)) - var(--gutter) * 2 - var(--space-400));
  gap: var(--space-100);
  width: max-content;
  padding-right: var(--gutter);
}

/* Карточка без рамки: белый лист с мягкой тенью на светлом фоне экрана */
.get-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-75);
  border-radius: var(--radius-3xl);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.06),
    0 16px 32px rgba(11, 18, 32, 0.06);
  scroll-snap-align: start;
}

/* Сцена: тёмный фон с сеткой точек, интерфейсы лежат на нём слоями.
   Радиус сцены = 24 − 8 */
.get-media {
  display: grid;
  place-items: center;
  height: 248px;
  padding: var(--space-300);
  border-radius: var(--radius-2xl);
  background-color: var(--game-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23FFFFFF' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-position: center;
  color: var(--game-text);
  overflow: hidden;
}

.get-body {
  padding: var(--space-300) var(--space-100) var(--space-100);
}

/* Номер карточки: крупная цифра, полоска прогресса и итог «04».
   Синяя часть полоски равна доле пройденного (--p задан в разметке),
   умноженной на то, насколько карточка доехала до своего места (--v, см. main.js) */
.get-index {
  display: flex;
  align-items: center;
  gap: var(--space-100);
}

.get-num {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.get-rule {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--line);
  overflow: hidden;
}

.get-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.8s var(--ease) 0.2s;
}

.get-total {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.get-title {
  margin-top: var(--space-200);
  letter-spacing: -0.01em;
}

/* На узких телефонах заголовок на ступень меньше (18 / 28), чтобы остаться в две строки */
@media (max-width: 374px) {
  .get-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -0.02em;
  }
}

.get-text {
  margin-top: var(--space-75);
  color: var(--text-2);
}

/* Навигация: короткие сегменты вместо точек, текущий синий */
/* Полоски лежат поверх запаса под тень, иначе лента перехватывала бы нажатия */
.gallery-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: var(--space-200);
}

.gallery-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gallery-dot::before {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  transition: background-color 0.3s var(--ease);
}

.gallery-dot:hover::before {
  background: var(--text-3);
}

.gallery-dot[aria-current="true"]::before {
  background: var(--blue);
}

.gallery-dot:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 0;
}

/* Интерфейсы на сцене: светлые панели парят над тёмным фоном */
.ui-panel {
  width: 100%;
  max-width: 248px;
  padding: var(--space-100);
  border-radius: var(--radius-xl);
  background: var(--bg);
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 48px -16px rgba(29, 100, 242, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.ui-status {
  display: flex;
  align-items: center;
  gap: var(--space-50);
  color: var(--blue);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--cyan);
}

/* 01 · Игра: сверху подсказка Evie, ниже стол, внизу итог раздачи */
/* Уведомление чуть повёрнуто и висит над столом, как пуш поверх игры */
.ui-push {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  border-radius: var(--radius-xl);
  rotate: -2deg;
}

.ui-push::after {
  display: none;
}

/* Игра лежит прямо на сцене, без своей рамки */
.ui-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-100);
  width: 100%;
  max-width: 248px;
}

.mini-felt {
  display: flex;
  justify-content: center;
  gap: var(--space-25);
  width: 100%;
  padding: var(--space-50);
  border: 4px solid var(--rail);
  border-radius: var(--radius-full);
  background: var(--felt);
}

.ui-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mini-hand {
  display: flex;
  gap: var(--space-25);
}

.result-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  padding: var(--space-50) var(--space-75);
  border-radius: var(--radius-full);
}


.result-pill {
  background: var(--cyan);
  color: var(--on-cyan);
}

/* 02 · Инструкция: таймер наклеен на угол панели, как стикер */
.ui-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding-top: var(--space-200);
}

.timer-chip {
  position: absolute;
  top: calc(var(--space-100) * -1);
  right: calc(var(--space-100) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  background: var(--cyan);
  color: var(--on-cyan);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  rotate: 6deg;
}

.ui-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
}

.ui-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-75);
}

.ui-checks i {
  color: var(--cyan);
  font-size: 20px;
}

/* 03 · Менеджер: переписка прямо на сцене, без окна вокруг */
.ui-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  width: 100%;
  max-width: 248px;
}

.ui-chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  margin-bottom: var(--space-50);
}

.ui-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--game-surface-2);
  color: var(--cyan);
  font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--game-line-strong);
}

.ui-online {
  color: var(--cyan);
}

.bubble {
  max-width: 100%;
  padding: var(--space-75) var(--space-100);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.bubble-out {
  align-self: flex-end;
  border-bottom-right-radius: var(--radius);
  background: var(--blue);
  color: var(--on-blue);
}

.bubble-in {
  align-self: flex-start;
  border-bottom-left-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

/* 04 · Условия: панель с параметрами, поверх неё внахлёст карточка с графиком */
.ui-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 248px;
}

.ui-terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  width: 88%;
  rotate: -2deg;
}

.ui-terms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  margin: 0;
}

.ui-terms-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-terms-list dt {
  color: var(--text-3);
}

.ui-terms-list dd {
  margin: 0;
}

.limit-chip {
  padding: var(--space-25) var(--space-75);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
}

.ui-risk {
  display: flex;
  align-items: center;
  gap: var(--space-50);
}

.ui-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  gap: var(--space-100);
  width: auto;
  margin-top: calc(var(--space-100) * -1);
  color: var(--text-3);
  rotate: 3deg;
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-50);
  height: 40px;
}

.mini-bar {
  width: 10px;
  border-radius: var(--radius-sm);
  background: var(--cyan);
  transform-origin: bottom center;
}

.mini-bar:last-child {
  background: var(--blue);
}

/* Карточка проигрывает свою картинку, когда попадает в кадр (см. main.js) */
.js .get-card [data-step] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
  transition-delay: calc(var(--s, 0) * 160ms + 200ms);
}

.js .get-card .mini-bar {
  transform: scaleY(0);
  transition: transform 0.7s var(--ease);
  transition-delay: calc(var(--s, 0) * 60ms + 200ms);
}

/* Уведомление выезжает сверху, как пуш */
.js .get-card .ui-push[data-step] {
  transform: translateY(-12px);
}

.js .get-card.is-played [data-step],
.js .get-card.is-played .mini-bar {
  opacity: 1;
  transform: none;
}

/* Шкалы пустые, пока галерею не увидели. Дальше каждая идёт за прокруткой ленты */
.js .get-rule::after {
  transform: scaleX(0);
}

.js .gallery.is-played .get-rule::after {
  transform: scaleX(calc(var(--p, 0) * var(--v, 0)));
}

/* Пока ленту листают, шкала следует за пальцем без задержки */
.gallery.is-swiping .get-rule::after {
  transition: none;
}

/* --------------------------------------------------------------------------
   Экран 3 · Что изменится за первые 24 часа: шкала времени
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  margin-top: var(--space-400);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.timeline-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-200);
}

/* Линия от первого номера до последнего (размеры задаёт main.js):
   серая подложка, синяя заливка растёт вслед за прокруткой */
.timeline-track {
  position: absolute;
  left: 15px;
  display: none;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  overflow: hidden;
}

.js .timeline-track {
  display: block;
}

.timeline-fill {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleY(var(--progress, 0));
  transform-origin: top center;
  transition: transform 0.3s var(--ease);
}

.timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--blue);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.timeline-body {
  padding-top: var(--space-25);
  transition: opacity 0.6s var(--ease);
}

.timeline-text {
  margin-top: var(--space-50);
  color: var(--text-2);
}

/* С JS пункты ждут своей очереди: приглушены, линия пустая */
.js .timeline-item:not(.is-active) .timeline-dot {
  border-color: var(--line-strong);
  background: var(--bg);
  color: var(--text-3);
}

.js .timeline-item:not(.is-active) .timeline-body {
  opacity: 0.4;
}

.section-cta {
  margin-top: var(--space-600);
}

/* --------------------------------------------------------------------------
   Экран 4 · Кто мы: синее сукно, крупная фраза и опыт команды
   в виде сданной руки из трёх карт
   -------------------------------------------------------------------------- */

.about {
  position: relative;
  background: var(--felt);
  color: var(--game-text);
  /* Карты в полёте и с наклоном не выходят за край экрана */
  overflow: clip;
}

/* Разметка стола по краю сукна */
.about::before {
  content: "";
  position: absolute;
  inset: var(--space-100);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-3xl);
  pointer-events: none;
}

.about-suits {
  display: flex;
  gap: var(--space-75);
  color: var(--game-text);
}

.about-suits .is-red {
  color: var(--cyan);
}

.about-title {
  max-width: 680px;
  margin-top: var(--space-200);
  letter-spacing: -0.02em;
}

/* Слова приглушены и загораются по одному, пока фраза проходит через экран */
.js .about-title .word {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
}

.js .about-title .word.is-lit {
  opacity: 1;
}

.about-sub {
  max-width: 680px;
  margin-top: var(--space-300);
  color: var(--felt-text-2);
}

/* Подпись в виде покерной фишки с пунктирным краем */
.exp-label {
  display: inline-flex;
  margin-top: var(--space-600);
  padding: var(--space-50) var(--space-100);
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--game-text);
}

.exp-hand {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-300);
}

/* Игральная карта: лежит внахлёст с соседней и с лёгким наклоном */
.exp-card {
  position: relative;
  padding: var(--space-600) var(--space-300);
  border-radius: var(--radius-2xl);
  background: var(--card-face);
  color: var(--card-ink);
  box-shadow:
    0 16px 32px rgba(4, 18, 50, 0.35),
    0 2px 4px rgba(4, 18, 50, 0.2);
  overflow: hidden;
  transform: translateX(var(--shift)) rotate(var(--r));
  transition: transform 0.6s var(--ease);
}

.exp-card + .exp-card {
  margin-top: calc(var(--space-200) * -1);
}

.exp-card.is-red {
  color: var(--card-red);
}

/* Рамка печати внутри карты: радиус 16 − 8 */
.exp-card::before {
  content: "";
  position: absolute;
  inset: var(--space-75);
  border: 1px solid rgba(11, 18, 32, 0.1);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Угловые индексы: ранг и масть, нижний перевёрнут, как на настоящей карте */
.exp-index {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exp-index.is-top {
  top: var(--space-100);
  left: var(--space-100);
}

.exp-index.is-bottom {
  right: var(--space-100);
  bottom: var(--space-100);
  transform: rotate(180deg);
}

/* Крупная масть водяным знаком */
.exp-watermark {
  position: absolute;
  right: calc(var(--space-100) * -1);
  bottom: calc(var(--space-600) * -1);
  font-size: 160px;
  line-height: 1;
  opacity: 0.07;
  pointer-events: none;
}

.exp-body {
  position: relative;
  z-index: 1;
  color: var(--card-ink);
}

.exp-stat {
  color: var(--blue);
}

.exp-text {
  margin-top: var(--space-75);
  color: var(--text-2);
}

/* Карту раздают при прокрутке: прилетает сверху и ложится с наклоном (см. main.js) */
.js .exp-card[data-deal] {
  opacity: 0;
  transform: translate(calc(var(--shift) + 24px), -48px) rotate(calc(var(--r) * -4));
  transition:
    transform 0.8s var(--ease),
    opacity 0.5s var(--ease);
  transition-delay: calc(var(--d, 0) * 120ms);
}

.js .exp-card.is-dealt {
  opacity: 1;
  transform: translateX(var(--shift)) rotate(var(--r));
}

/* При касании карта выпрямляется и чуть приподнимается */
.exp-card:hover,
.js .exp-card.is-dealt:hover,
.exp-card:active,
.js .exp-card.is-dealt:active {
  z-index: 2;
  transform: translateY(-4px);
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Экран 5 · Частые вопросы: короткий диалог с Evie
   Вопросы тёмными облаками справа, ответы белыми карточками с фишкой Evie
   -------------------------------------------------------------------------- */

.faq {
  background: var(--surface-1);
}

.faq-title {
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  margin: var(--space-400) 0 0;
}

.faq-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.msg {
  max-width: 86%;
  text-wrap: pretty;
}

/* Вопрос: хвостик справа снизу, к тому, кто спрашивает */
.msg-out {
  align-self: flex-end;
  padding: var(--space-100) var(--space-200);
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius) var(--radius-2xl);
  background: var(--game-bg);
  color: var(--game-text);
  box-shadow: 0 8px 20px rgba(10, 17, 32, 0.16);
}

.msg-slot {
  position: relative;
  align-self: flex-start;
  max-width: 92%;
  margin: 0;
}

/* Ответ: хвостик слева сверху, как продолжение разговора */
.msg-in {
  max-width: none;
  padding: var(--space-100) var(--space-200) var(--space-200);
  border-radius: var(--radius) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
  background: var(--bg);
  color: var(--text);
  box-shadow:
    0 0 0 1px var(--line),
    0 12px 32px rgba(11, 18, 32, 0.06);
}

/* В ответах строки выравниваются по длине: каждая читается цельной фразой,
   без коротких обрывков посередине */
.msg-in .body-6 {
  text-wrap: balance;
}

.msg-in strong {
  font-weight: 600;
}

.msg-from {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  margin-bottom: var(--space-75);
  color: var(--blue);
}

/* Фишка Evie с пунктирным краем, как на четвёртом экране */
.evie-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  font-size: 12px;
}

/* Evie печатает: фишка и три точки на месте будущего ответа */
.msg-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-75);
  padding: var(--space-100) var(--space-200) var(--space-100) var(--space-100);
  border-radius: var(--radius) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}

.typing-dots {
  display: flex;
  gap: var(--space-50);
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-3);
  animation: typing-dot 1s var(--ease) infinite alternate;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-dot {
  from { opacity: 0.35; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-3px); }
}

/* Без JS весь диалог виден сразу, точки скрыты */
html:not(.js) .msg-typing {
  display: none;
}

/* Сообщение «выпрыгивает» из угла с хвостиком (см. main.js) */
.js .msg,
.js .msg-typing {
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 0.35s var(--ease),
    transform 0.5s var(--ease);
}

.js .msg-out {
  transform-origin: bottom right;
}

.js .msg-in,
.js .msg-typing {
  transform-origin: top left;
}

.js .faq-pair.is-asked .msg-out,
.js .faq-pair.is-typing .msg-typing,
.js .faq-pair.is-answered .msg-in {
  opacity: 1;
  transform: none;
}

.js .faq-pair.is-answered .msg-typing {
  opacity: 0;
  transform: scale(0.92);
}

/* --------------------------------------------------------------------------
   Экран 6 · Финальная обложка: заголовок как на первом экране,
   путь из трёх шагов и главная кнопка
   -------------------------------------------------------------------------- */

/* Как на обложке: градиент заголовка для светлой темы #000000 → #666666 */
.final-title {
  max-width: 680px;
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* Название приложения выделено фирменным синим поверх градиента заголовка */
.final-brand {
  color: var(--blue);
  -webkit-text-fill-color: var(--blue);
}

.final-sub {
  max-width: 680px;
  margin-top: var(--space-200);
  color: var(--text-2);
}

/* Маршрут: координаты остановок совпадают с кривой в main.js (ширина 327, высота 300) */
.route {
  position: relative;
  height: 300px;
  margin-top: var(--space-400);
}

.route-dots {
  position: absolute;
  inset: 0;
}

/* Точка маршрута: серая, при прохождении поверх проявляется синяя */
.route-dots i {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
}

.route-dots i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  opacity: 0;
  transition:
    opacity 0.3s var(--ease),
    transform 0.4s var(--ease);
}

.route-dots i.is-lit::after {
  opacity: 1;
}

/* Голова маршрута: самая дальняя загоревшаяся точка чуть крупнее */
.route-dots i.is-head::after {
  background: var(--cyan);
  transform: scale(2);
}

.route-steps {
  position: absolute;
  inset: 0;
}

.route-step {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  gap: var(--space-200);
  transform: translate(-24px, -50%);
}

/* Подпись второго шага стоит слева от остановки */
.route-step.is-right {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 24px), -50%);
}

/* Остановка в виде покерной фишки с пунктирным краем */
.route-stop {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-3);
  font-size: 20px;
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.4s var(--ease),
    transform 0.5s var(--ease);
}

.route-num {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  transition:
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.route-label {
  white-space: nowrap;
  transition: opacity 0.5s var(--ease);
}

/* Без JS все шаги видны как пройденные */
.route-step .route-stop,
.js .route-step.is-active .route-stop {
  border-color: rgba(255, 255, 255, 0.7);
  background: var(--blue);
  color: var(--on-blue);
  box-shadow: 0 8px 20px rgba(29, 100, 242, 0.3);
}

.route-step .route-num,
.js .route-step.is-active .route-num {
  background: var(--cyan);
  color: var(--on-cyan);
}

.js .route-step.is-active .route-stop {
  transform: scale(1.05);
}

/* С JS шаги ждут, пока до них дойдёт маршрут */
.js .route-step:not(.is-active) .route-stop {
  border-color: var(--line-strong);
  background: var(--bg);
  color: var(--text-3);
  box-shadow: none;
}

.js .route-step:not(.is-active) .route-num {
  background: var(--surface-2);
  color: var(--text-2);
}

.js .route-step:not(.is-active) .route-label {
  opacity: 0.45;
}

.final-cta {
  margin-top: var(--space-500);
}

.cta-note {
  max-width: 680px;
  margin-top: var(--space-100);
  color: var(--text-2);
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Подвал: 18+, ответственная игра и документы
   Закреплённая кнопка прячется, когда подвал в кадре (data-cta)
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding:
    var(--space-600)
    var(--gutter)
    calc(var(--space-600) + env(safe-area-inset-bottom));
  background: var(--game-bg);
  color: var(--game-text);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  width: fit-content;
  border-radius: var(--radius-full);
}

.footer-brand:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.footer-play {
  display: flex;
  align-items: flex-start;
  gap: var(--space-100);
  padding: var(--space-200);
  border: 1px solid var(--game-line-strong);
  border-radius: var(--radius-2xl);
  color: var(--game-text-2);
}

.footer-age {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-full);
  color: var(--cyan);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.footer-links a {
  width: fit-content;
  color: var(--game-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--ease);
}

.footer-links a:hover {
  text-decoration-color: var(--cyan);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.footer-copy {
  color: var(--game-text-3);
}

/* --------------------------------------------------------------------------
   Появление
   -------------------------------------------------------------------------- */

[data-intro] {
  animation: rise 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* Блоки ниже первого экрана: поднимаются при прокрутке (см. main.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-intro] {
    animation: fade 0.4s var(--ease) both;
  }


  .js .get-card [data-step],
  .js .get-card .mini-bar,
  .js .get-rule::after {
    transition: none;
  }

  .gallery-dot::before {
    transition: background-color 0.3s var(--ease);
  }

  .gallery.is-hinting .swipe-hint,
  .gallery.is-hinting .gallery-list {
    animation: none;
  }

  .js [data-reveal] {
    transform: none;
    transition: opacity 0.4s var(--ease);
  }

  .btn,
  .btn:hover,
  .btn:active {
    transform: none;
  }

  .sticky-cta,
  .sticky-cta.is-hidden,
  .nav-wrap.is-hidden {
    transform: none;
  }

  .timeline-fill {
    transition: none;
  }

  .js .about-title .word {
    transition: none;
  }

  .js .exp-card[data-deal] {
    opacity: 1;
    transform: translateX(var(--shift)) rotate(var(--r));
    transition: none;
  }

  .typing-dots span {
    animation: none;
  }
}