/* =============================================================================
 * OMI Quiz — минимальный playable CSS.
 *
 * Дизайн (визуал + анимации) откладывается. Этот файл задаёт:
 *   1) CSS-переменные-заглушки в :root — дизайнер подменит на брендовые
 *   2) Минимальный лейаут чтобы было playable
 *   3) Семантические хуки (data-state, data-hot, body[data-*]) — стилизуются позже
 *
 * Дизайнер правит:
 *   - значения CSS-переменных (цвета/шрифты/тайминги/радиусы)
 *   - селекторы body[data-screen=...], body[data-source=...], body[data-streak=...], body[data-status=...]
 *   - .outlet-btn[data-state="correct"/"wrong"] — анимация ответа
 *   - .streak-bar[data-hot="true"] — эффект серии 5+
 * ============================================================================ */

:root {
  /* Брендовая палитра из Figma (Quiz Copy → variables) */
  --neutral-5:  #f5f5f5;
  --neutral-10: #e5e4e2;
  --neutral-20: #bfc1c2;
  --neutral-30: #a6a6a6;
  --neutral-50: #555555;
  --neutral-60: #222222;
  --neutral-70: #1b1811;
  --blue-5:     #007fff;
  --red-5:      #e9967a;
  --red-10:     #ff7f50;
  --hero-cream: #E5E4E2;

  /* Семантические цвета — мапятся на брендовую палитру */
  --color-bg:           var(--neutral-70);
  --color-surface:      rgba(245, 245, 245, 0.06);
  --color-text:         var(--neutral-5);
  --color-muted:        var(--neutral-20);
  --color-card-bg:      var(--neutral-5);   /* selected card */
  --color-card-bg-2:    #e0dfdc;            /* default card (чуть серее selected #f5f5f5) */
  --color-text-dark:    var(--neutral-60);
  --color-disabled-bg:  var(--neutral-50);
  --color-accent:       var(--blue-5);
  --color-primary:      #4f8cff;
  --color-correct:      #2ecc71;
  --color-wrong:        #e74c3c;
  --color-streak:       #f5c542;
  --color-flash-correct: #009b05;
  --color-flash-wrong:   #ec0047;

  /* Шаг анимации каунтера: высота counter-num + gap. JS читает эту переменную. */
  --counter-step: 3.5rem; /* 3rem (num) + 0.5rem (gap) */

  /* Typography. Helvetica Now Var — платный шрифт; fallback на Helvetica Neue. */
  --font-display: 'Helvetica Now Var', 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Helvetica Now Var', 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Timings (синхронизировать с CONFIG.timings в app.js) */
  --idle-timeout:     15s;
  --transition-fast:  150ms ease;
  --transition-mid:   300ms ease;
  --transition-card:  250ms linear; /* из Figma Doc/Animations */
}

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

/* Адаптивный root font-size: 16px при viewport ~1920×1080, плавно уменьшается
   до 12px на маленьких экранах. Все размеры в .signup используют rem, поэтому
   шрифты + отступы + высоты полей шкалируются согласованно. */
html {
  /* Root font-size = 16px на 1920 (макет Figma), скейлится строго пропорционально
     ширине экрана: 0.833vw = 16/1920. Floor 14px — чтобы на mobile тексты
     оставались читаемыми (1rem >= 14px). */
  font-size: clamp(14px, 0.833vw, 16px);
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;       /* fallback */
  min-height: 100dvh;      /* iOS Safari: динамический viewport, чтобы не было разницы с body */
}

/* На фиксированных экранах (game/reveal/end/max/idle) лочим html+body на
   100dvh, чтобы iOS Safari не показывал прокрутку. Signup (screen-start)
   намеренно scrollable — там html/body могут расти под форму. */
html:has(body[data-screen="screen-game"]),
html:has(body[data-screen="screen-reveal"]),
html:has(body[data-screen="screen-end"]),
html:has(body[data-screen="screen-max"]),
html:has(body[data-screen="screen-idle"]) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-screen="screen-game"],
body[data-screen="screen-reveal"],
body[data-screen="screen-end"],
body[data-screen="screen-max"],
body[data-screen="screen-idle"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

h1, h2 {
  font-family: var(--font-display);
  margin: 0 0 var(--space-3);
}

/* ----- Screens ----- */
.screen {
  display: none;
  min-height: 100vh;       /* fallback */
  min-height: 100dvh;      /* динамический viewport — учитывает мобильный URL bar */
  padding: var(--space-4);
}

.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.screen-inner {
  width: 100%;
  max-width: 720px;
}

/* =============================================================================
 * #screen-start (Signup) — две колонки: форма + hero. Дизайн из Figma.
 * Desktop: 1920×1080 ровно по макету. Mobile: одна колонка, hero сверху.
 * ============================================================================ */

/* Сбрасываем дефолтные .screen padding/center-flex — у signup своя сетка.
   height: 100vh + overflow: hidden — макет всегда ровно в высоту экрана. */
#screen-start.screen {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.signup {
  display: grid;
  /* Форма сохраняет ширину макета (706) на больших экранах, ужимается до 420 на узких.
     Hero забирает остаток. На viewport < 900px включается mobile-режим (одна колонка). */
  /* Колонка формы = 706px на 1920 (макет Figma), пропорционально ширине экрана:
     36.77vw = 706/1920. Капается на 706 чтобы не росла выше макета. */
  grid-template-columns: min(706px, 36.77vw) minmax(0, 1fr);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
}

/* ----- Left column: form -----
   Логотип absolute в верхнем центре — не участвует в потоке.
   Body центрируется по вертикали в полной высоте колонки (justify-content: center)
   → одинаковые отступы сверху и снизу автоматически. */
.signup__form {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: 2.5rem 6rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  row-gap: 1.5rem;
}

.signup__logo {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

/* На десктопе показываем только логотип в форме; mobile-вариант скрыт */
.signup__logo--mobile { display: none; }

.signup__logo img {
  width: 22.375rem;
  height: auto;
  display: block;
}

.signup__body {
  width: 100%;
  max-width: 32.125rem; /* 514px — как в Figma на 1920; на меньших разрешениях не даём полям расплываться */
  margin: 0 auto;
  align-self: center; /* вертикально центрируется в 1fr ниже логотипа */
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.signup__content {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.signup__heading {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 500;
  color: var(--neutral-10);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  font-feature-settings: 'case', 'cpsp';
}

.signup__fields {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
}

.field__label {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--neutral-5);
  padding-bottom: 0.5rem;
}

.field__control {
  display: flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 1rem;
  background: rgba(245, 245, 245, 0.06);
  border: 1px solid rgba(245, 245, 245, 0.1);
  border-radius: 0.5rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.field__input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--neutral-5);
  font: 500 1rem/1.4 var(--font-display);
  padding: 0.3rem 0;
}

.field__input::placeholder {
  color: var(--neutral-50);
  opacity: 1;
}

.field__control:focus-within {
  border-color: rgba(245, 245, 245, 0.4);
}

.field[data-state="error"] .field__control {
  background: rgba(233, 150, 122, 0.06);
  border-color: var(--red-5);
}

.field__error {
  margin: 0;
  padding-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--red-10);
}

.signup__action {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.btn-play {
  width: 100%;
  height: 3.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #000;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0;
  font-feature-settings: 'case', 'cpsp';
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.btn-play:hover { opacity: 0.9; }
.btn-play:active { transform: translateY(1px); }
.btn-play:focus-visible {
  outline: 2px solid var(--neutral-10);
  outline-offset: 2px;
}

.signup__consent {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--neutral-20);
  text-align: center;
}

.signup__link {
  color: inherit;
  text-decoration: underline;
}

/* ----- Right column: hero (decorative bg + headline).
   overflow:hidden обязательно — иначе bgIMG (874px) вылезет за пределы колонки. */
.signup__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

.signup__hero-bg {
  position: absolute;
  top: -1.5rem;
  right: 0;
  height: min(76vh, 823px);
  width: auto;
  aspect-ratio: 874 / 823;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.signup__hero-text {
  position: relative;
  z-index: 1;
  padding: 0 9.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}

.signup__hero-title {
  margin: 0;
  font-size: 4rem;
  line-height: 1.125;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: var(--hero-cream);
  letter-spacing: 0;
  font-feature-settings: 'case', 'cpsp';
}

.signup__hero-description {
  margin: 0;
  width: 100%;
  max-width: 47.625rem;
  background: var(--neutral-70);
  padding: 1.5rem;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: var(--hero-cream);
  font-feature-settings: 'case', 'cpsp';
}

/* ----- Промежуточный: 1281-1480 — hero чуть меньше базы (4rem/1.75rem на ≥1481). ----- */
@media (max-width: 1480px) and (min-width: 1281px) {
  /* Game/Reveal root font-size задаётся ниже единым правилом
     @media (min-width: 1281px) — масштаб по min(ширина, высота),
     чтобы кнопка снизу не обрезалась на низких вьюпортах. */

  /* Idle: пропорциональный scale без клампа.
     0.833vw = 16/1920 — на 1281: 10.67px, на 1480: 12.33px. */
  html:has(body[data-screen="screen-idle"]) {
    font-size: 0.833vw;
  }

  /* Колонка формы шире: 40vw (vs базовых 36.77vw) — больше воздуха в форме.
     1281→512px, 1480→592px. Кап 706px (как в базе). */
  .signup {
    grid-template-columns: min(706px, 40vw) minmax(0, 1fr);
  }
  .signup__hero-title {
    font-size: 3.5rem;
  }
  .signup__hero-description {
    font-size: 1.625rem;
    padding: 1.25rem;
  }
  .signup__hero-text {
    padding: 0 6rem;
  }
}

/* ----- Game/Reveal: масштаб по ВЫСОТЕ, а не только по ширине -----
   Баг: root font-size был width-only (0.833vw), а экран заперт height:100dvh
   + overflow:hidden. На вьюпорте «шире 16:9» (браузер с панелями на 1080p-экране,
   диагональ 15.6") контент сайзится по ширине, не влезает по высоте → нижняя
   кнопка SUBMIT / CONTINUE обрезается.
   Фикс: берём минимум из ширинного (0.833vw = 16/1920) и высотного (1.48vh = 16/1080)
   масштаба → весь макет ужимается под фактический бокс, пропорции Figma сохранены,
   скролл не нужен. floor 10px ≈ нижняя граница высоты ~700px, ceiling 16px = размер
   макета (на 16:9 и выше ничего не меняется). */
@media (min-width: 1281px) {
  html:has(body[data-screen="screen-game"]),
  html:has(body[data-screen="screen-reveal"]) {
    font-size: clamp(10px, min(0.833vw, 1.48vh), 16px);
  }
}

/* ----- ≤1280: hero-колонка узкая — уменьшаем title/desc, чтобы помещались в 2 строки. ----- */
@media (max-width: 1280px) and (min-width: 900px) {
  .signup__hero-title {
    font-size: 3rem;
  }
  .signup__hero-description {
    font-size: 1.5rem;
    padding: 1rem 1.25rem;
  }
  .signup__hero-text {
    padding: 0 2rem;
  }

  /* Idle: строго пропорциональный scale (0.833vw = 16/1920), как в 1281–1480.
     Раньше было 0.6vw — мельче пропорции, абсолютный TV-лейаут кучковался
     в левом-верхнем углу. Теперь idle сохраняет пропорции 1920×1080. */
  html:has(body[data-screen="screen-idle"]) {
    font-size: 0.833vw;
  }

  /* В этом диапазоне rem game падает на пол 14px → заголовок 4.5rem=63px не влезает
     в одну строку (строка зафиксирована по высоте + overflow:hidden → перенос
     обрезается). Делаем размер плавным по vw, чтобы текст всегда был в одну строку,
     и снимаем фикс высоты строки. */
  #screen-game .game__title,
  #screen-reveal .game__title {
    font-size: clamp(2.5rem, 4.3vw, 4.5rem);
    line-height: 1.1;
  }
  #screen-game .game__title-row,
  #screen-reveal .game__title-row {
    height: auto;
  }
}

/* ----- Короткие альбомные экраны (iPad 11"/13" landscape): нижняя кнопка
   врезалась в край. Layout рисовался под 1920×1080 (16:9); на 4:3-планшете
   высота 820–1024px, а фиксированный "хром" (.game__header 7rem + .game__main
   padding 5rem×2 = 17rem) переполнял .game__body → кнопка уходила под overflow.
   Возвращаем ~7rem высоты, убирая лишний вертикальный padding. Зона действия:
   только короткие альбомные (min-width:900 исключает телефоны; max-height:1040
   исключает стенд-ТВ 1080 — главное устройство нетронуто). Шрифты/карточки/лого
   не меняются — двигается только пустое поле. ----- */
@media (min-width: 900px) and (max-height: 1040px) {
  #screen-game .game__main,
  #screen-reveal .game__main {
    padding: 1.5rem 0;
  }
}

/* ----- Mobile: одна колонка, hero сверху, форма ниже ----- */
@media (max-width: 899px) {
  /* Idle: продолжаем пропорциональный scale (0.833vw = 16/1920), а не откатываемся
     к базовому полу 14px — иначе абсолютный TV-лейаут раздувается и вылезает за
     экран. Пропорции сохраняются вплоть до 600px и ниже. */
  html:has(body[data-screen="screen-idle"]) {
    font-size: 0.833vw;
  }

  /* SVG hero-bg signup-экрана выходит за правый край (right: -7.5rem) —
     клипим горизонтальный скролл только на мобилке */
  html, body {
    overflow-x: hidden;
  }

  /* На мобильных снимаем фиксацию высоты — пусть будет естественный flow со скроллом */
  #screen-start.screen {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .signup {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .signup__hero {
    order: -1;
    height: auto;
    min-height: 14rem;
    padding: 6rem 0.75rem 0.75rem;   /* top: место под absolute-логотип (логотип сверху, hero-text не сдвигается) */
    overflow: visible;               /* SVG свободно вылазит вниз под форму */
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Mobile: используется отдельный signup-hero-bg-mob.svg (354×128) — баннер
     во всю ширину поверх верхней части hero-зоны. Десктопный SVG не применяется.
     position: fixed — блоб приклеен к верху вьюпорта и остаётся на месте, пока
     остальной контент (форма, hero-text, логотип) скроллится поверх него.
     #screen-start при уходе с экрана получает display:none → fixed-блоб не утекает
     на другие экраны. Ни у одного предка signup нет transform — fixed = от вьюпорта.
     z-index: -1 — блоб настоящий фоновый слой: гарантированно ниже ВСЕГО контента
     (form/hero-text/логотип, даже без своего z-index), но выше фона body (canvas
     рисуется ещё ниже отрицательного z-index, поэтому блоб остаётся видим). Полагаться
     на "form z:2 > blob z:0" нельзя — fixed-элемент уходит в корневой контекст наложения. */
  .signup__hero-bg {
    position: fixed;
    height: auto;
    width: 100%;
    aspect-ratio: 354 / 128;
    left: 0;
    right: 0;
    top: 0;
    transform: none;
    z-index: -1;                     /* фоновый слой: ниже всего контента, выше canvas body */
  }

  /* На mobile почти убираем горизонтальный паддинг чтобы заголовкам
     "Test your knowledge / and intuition!" и
     "Play and get a trial in the product / and discounts on services"
     хватало ширины и каждая <br>-секция помещалась в одну строку. */
  .signup__hero-text {
    padding: 0 0.5rem;
    margin-top: 1rem;                /* +7% от min-height hero — заголовки ниже */
  }

  .signup__hero-title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  /* На мобилке надпись "Take the quiz..." скрыта — оставляем только заголовок hero. */
  .signup__hero-description {
    display: none;
  }

  /* Заголовок формы "Enter your details to begin" — 16px на мобилке. */
  .signup__heading {
    font-size: 16px;
  }

  /* Логотип возвращается в поток сверху; body не центрируется по вертикали.
     Фон формы прозрачный — фиксированный блоб остаётся виден за формой; текст
     и инпуты лежат поверх него (z-index 2 > 0) и скроллятся поверх SVG.

     ВАЖНО: переключаем display: grid → flex. На десктопе грид-трек растягивает
     in-flow логотип (358px); на мобиле логотип display:none, и auto-трек +
     justify-content:flex-start прижимали body к левому краю — отсюда пустое
     поле справа. Flex column гарантирует, что дети занимают 100% ширины. */
  .signup__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 2rem 1.5rem 3rem;
    gap: 2.5rem;
    height: auto;
    overflow: visible;
    z-index: 2;                      /* форма (текст + инпуты) поверх SVG */
  }

  /* Input-поля непрозрачные — SVG не просвечивает сквозь input */
  .field__control {
    background: var(--color-bg);
  }

  /* На мобилке: оригинальный логотип в форме скрыт, mobile-логотип в hero виден */
  .signup__logo:not(.signup__logo--mobile) { display: none; }

  .signup__logo--mobile {
    display: flex;
    justify-content: center;
    position: absolute;          /* вырываем из flow — не сдвигает hero-text */
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    width: 17.5rem;
  }

  .signup__logo--mobile img {
    width: 17.5rem;
  }

  .signup__logo img {
    width: 17.5rem;
  }

  .signup__body {
    max-width: 100%;
    gap: 2.5rem;
  }

  .signup__content {
    gap: 2rem;
  }

  .signup__fields {
    gap: 1.25rem;
  }

  /* iOS Safari авто-зумит при фокусе на input с font-size < 16px и не сбрасывает
     зум (SPA — нет перезагрузки, тянется в игру). Фиксируем 16px, чтобы погасить
     авто-зум, не запрещая пользователю pinch-zoom. */
  .field__input {
    font-size: 16px;
  }
}

/* =============================================================================
 * #screen-game + #screen-reveal — общая структура (header + main + body)
 * Размеры из Figma макета 1920×1080. Все в rem, root font-size = 0.833vw clamped.
 * ============================================================================ */

#screen-game.screen,
#screen-reveal.screen {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  height: 100vh;       /* fallback */
  height: 100dvh;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.game__header {
  flex-shrink: 0;
  width: 100%;
  height: 7rem; /* 112 */
  padding: 2.5rem 4rem; /* 40 / 64 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.game__logo {
  display: flex;
  text-decoration: none;
}

.game__logo img {
  width: 22.375rem; /* 358 */
  height: 2rem;
  display: block;
}

.game__main {
  flex: 1;
  min-height: 0;
  padding: 5rem 0; /* 80 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.game__body {
  width: 100%;
  max-width: 86rem; /* 1376 */
  height: 100%; /* фиксированная max-высота снята — gaps между элементами сжимаются с viewport */
  max-height: 50.5rem; /* 808 — потолок как в макете */
  padding: 0 4rem; /* 64 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ===== Heading block: title-row + progress, gap 16px между ними ===== */
.game__heading {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16 */
  width: 100%;
}

/* ===== Title row + lente-анимация title и counter ===== */
.game__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 5.375rem; /* 86 — одна строка title (line-height) */
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.game__title-clip {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.game__title-track {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16 */
  transform: translateY(0);
  transition: transform 400ms ease;
}

.game__title {
  margin: 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 4.5rem;        /* 72 */
  line-height: 5.375rem;    /* 86 */
  font-weight: 500;
  letter-spacing: -0.0625rem; /* -1px */
  color: var(--neutral-5);
  word-break: break-word;
}

/* Декоративный второй заголовок в треке (карусель не активна в JS) — полностью скрыт */
.game__title-track > .game__title[aria-hidden="true"] {
  display: none;
}

.game__counter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 3rem;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 2rem;       /* 32 */
  line-height: 3rem;     /* 48 */
  font-weight: 500;
  color: var(--neutral-5);
  text-align: center;
}

.game__counter-clip {
  min-width: 1.25rem; /* 20 — база под одну цифру */
  width: auto;        /* двузначные числа (10–20) разворачивают клип, не обрезаются */
  height: 3rem;
  overflow: hidden;
}

.game__counter-track {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8 */
  transform: translateY(0);
  transition: transform 350ms cubic-bezier(.34, 1.06, .54, 1);
}

.game__counter-num {
  height: 3rem;
  line-height: 3rem;
  display: block;
  text-align: center;
}

.game__counter-total {
  white-space: nowrap;
}

/* ===== Progress bar (solid fill, без сегментов — по DOM макета) ===== */
.game__progress {
  width: 100%;
  height: 2px;
  background: rgba(245, 245, 245, 0.1);
  opacity: 0.9;
  overflow: hidden;
  margin-top: 0;
  align-self: stretch;
  flex-shrink: 0;
}

.game__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--neutral-5);
  opacity: 0.9;
  transition: width 400ms ease;
}

/* ===== Card group + cards ===== */
.game__card-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4 */
  height: 30rem; /* 480 */
  flex-shrink: 0;
}

.card.outlet-btn {
  flex: 1 1 0;
  height: 26.25rem; /* 420 default */
  background: var(--color-card-bg-2);
  border: 0;
  border-radius: 1rem;
  padding: 2rem 2.5rem; /* top/bottom 32 — симметрично, чтобы логотип был ровно в центре + name на 32px от низа */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-dark);
  font: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: height var(--transition-card),
              background-color var(--transition-card),
              transform var(--transition-card);
  box-sizing: border-box;
}

/* Спейсеры сверху и снизу от лого — растягиваются равномерно, центрируя лого.
   В нижнем спейсере живёт название (прижато к низу). */
.card__spacer {
  flex: 1 1 0;
  width: 100%;
}

.card__spacer--bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.card.outlet-btn:hover {
  background: #ececec;
}

.game__card-group[data-selected="left"]  .card[data-side="left"],
.game__card-group[data-selected="right"] .card[data-side="right"] {
  height: 30rem; /* 480 selected — растёт во всю высоту group */
  background: var(--color-card-bg);
}

.card__logo-wrap {
  width: 100%;
  max-width: 23.125rem; /* 370 */
  height: 8.75rem;       /* 140 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  transform-origin: center;
  transition: transform var(--transition-card);
  box-sizing: border-box;
}

/* Hover: лого внутри карточки растёт */
.card.outlet-btn:hover .card__logo-wrap {
  transform: scale(1.15);
}

/* Selected: карточка и лого остаются увеличенными */
.game__card-group[data-selected="left"]  .card[data-side="left"]  .card__logo-wrap,
.game__card-group[data-selected="right"] .card[data-side="right"] .card__logo-wrap {
  transform: scale(1.15);
}

/* На фазе feedback hover отключён — выбор уже сделан */
#screen-game[data-feedback] .card.outlet-btn:hover .card__logo-wrap {
  transform: none;
}
#screen-game[data-feedback] .game__card-group[data-selected="left"]  .card[data-side="left"]  .card__logo-wrap,
#screen-game[data-feedback] .game__card-group[data-selected="right"] .card[data-side="right"] .card__logo-wrap {
  transform: scale(1.15);
}

.card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.card__name {
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 2rem;     /* 32 */
  line-height: 2.5rem; /* 40 */
  font-weight: 500;
  text-align: center;
  color: var(--color-text-dark);
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Резервируем место под 2 строки. justify-content: flex-end — короткие
     имена прижимаются к низу резерва, длинные расходятся вверх. Это даёт
     стабильные 32px от текста до нижнего края карточки. */
  min-height: 5rem; /* 2 × line-height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Card feedback "CORRECT" / "WRONG" — появляется при data-state */
.card__feedback {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.card[data-state] .card__feedback {
  opacity: 1;
}

.card[data-state="correct"] .card__feedback { color: var(--color-flash-correct); }
.card[data-state="wrong"]   .card__feedback { color: var(--color-flash-wrong); }

/* Shake при wrong — крутим саму карточку */
.card[data-state="wrong"] {
  animation: card-shake 900ms linear;
}

@keyframes card-shake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-1deg); }
  20%, 40%, 60%, 80% { transform: rotate(1deg); }
}

/* ===== "or" разделитель: эллипс по центру card-group + tilt по выбору ===== */
.card-divider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.75rem;  /* 140 */
  height: 6.25rem; /* 100 */
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  transition: transform var(--transition-card);
}

.card-divider__shape {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.game__card-group[data-selected="left"]  .card-divider {
  transform: translate(-50%, -50%) rotate(-12deg);
}

.game__card-group[data-selected="right"] .card-divider {
  transform: translate(-50%, -50%) rotate(12deg);
}

/* ===== SUBMIT кнопка ===== */
.btn-submit {
  width: 100%;
  height: 4rem; /* 64 */
  border: 0;
  border-radius: 0.5rem;
  background: var(--color-disabled-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.5rem;
  line-height: 3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: not-allowed;
  flex-shrink: 0;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              opacity var(--transition-fast);
}

.btn-submit:not(:disabled) {
  background: var(--neutral-5);
  color: var(--color-text-dark);
  cursor: pointer;
}

.btn-submit:not(:disabled):hover { opacity: 0.9; }
.btn-submit:focus-visible {
  outline: 2px solid var(--neutral-10);
  outline-offset: 2px;
}

/* =============================================================================
 * Background circles — декоративные фоновые свечения по макету Figma.
 * Каждый SVG позиционируется как background-image на блоке .bg-circles внутри
 * соответствующего экрана. Переключение между состояниями через data-атрибуты.
 * ============================================================================ */

.bg-circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  transition: background-image 250ms ease, opacity 250ms ease;
}

/* Default (game default, end, max) — cards.svg в правом нижнем углу.
   Размер: 1085/1920 ≈ 56.5vw, высота auto (сохраняет пропорции). */
/* CSS custom properties: дефолт — оригинальные SVG (рывки, но работают до того
   как JS прерастеризует). После rasterizeBgCircles() JS подменяет эти переменные
   на PNG blob URLs → дальше отрисовка мгновенная. */
:root {
  --bg-cards:          url('assets/svg/background-circles%20screen%20cards.svg?v=d7afe54d');
  --bg-correct-left:   url('assets/svg/background-circles%20screen%20correct%20left.svg?v=106b1589');
  --bg-correct-right:  url('assets/svg/background-circles%20screen%20correct%20right.svg?v=d92d979a');
  --bg-correct-top:    url('assets/svg/background-circles%20screen%20correct%20top.svg?v=83622002');
  --bg-wrong-top-left: url('assets/svg/background-circles%20screen%20wrong%20top%20left.svg?v=e4f33f57');
  --bg-wrong-top-right:url('assets/svg/background-circles%20screen%20wrong%20top%20right.svg?v=db106bcf');
  --bg-wrong-right:    url('assets/svg/background-circles%20screen%20wrong%20right.svg?v=1af0774e');
}

#screen-game .bg-circles,
#screen-end .bg-circles,
#screen-max .bg-circles {
  background-image: var(--bg-cards);
  background-position: right bottom;
  background-size: 56.5vw auto;
}

/* Correct (game feedback + reveal) — композиция из 3 SVG:
   correct left в нижнем левом, correct right в нижнем правом, correct top — верх по центру. */
#screen-game[data-feedback="correct"] .bg-circles,
#screen-reveal[data-result="correct"] .bg-circles {
  background-image:
    var(--bg-correct-left),
    var(--bg-correct-right),
    var(--bg-correct-top);
  background-position:
    left bottom,
    right bottom,
    center top;
  background-size:
    50.9vw auto,
    56.5vw auto,
    71.25vw auto;
}

/* =============================================================================
 * #screen-reveal — список с позициями + ghost-rows + Your pick badge
 * ============================================================================ */

/* Wrong reveal — композиция из 3 SVG:
   wrong top left — левый верхний угол,
   wrong top right — правый верхний угол,
   wrong right — правый нижний угол. */
#screen-reveal[data-result="wrong"] .bg-circles {
  background-image:
    var(--bg-wrong-top-left),
    var(--bg-wrong-top-right),
    var(--bg-wrong-right);
  background-position:
    left top,
    right top,
    right bottom;
  background-size:
    60vw auto,
    48.25vw auto,
    56.5vw auto;
}

/* Wrong game feedback — 3 SVG (как на reveal-wrong):
   wrong top left — левый верхний угол,
   wrong top right — правый верхний угол,
   wrong right — правый нижний угол. */
#screen-game[data-feedback="wrong"] .bg-circles {
  background-image:
    var(--bg-wrong-top-left),
    var(--bg-wrong-top-right),
    var(--bg-wrong-right);
  background-position:
    left top,
    right top,
    right bottom;
  background-size:
    60vw auto,
    48.25vw auto,
    56.5vw auto;
}

.reveal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

.reveal__row {
  border-radius: 1rem;
  height: 8.25rem; /* 132 */
}

.reveal__row--ghost {
  background: rgba(245, 245, 245, 0.05);
  opacity: 0.7;
}

.reveal__row--ghost-1 {
  height: 3.5rem;
  margin: 0 5.5rem;
  border-radius: 13.795px;
  opacity: 0.16;
}

/* Топовая (первая) ghost-1: градиент снизу вверх */
.reveal__list > .reveal__row--ghost-1:first-child {
  background: linear-gradient(0deg, #A6A6A6 0%, rgba(64, 64, 64, 0.00) 39.83%);
}

/* Нижняя (последняя) ghost-1: градиент сверху вниз */
.reveal__list > .reveal__row--ghost-1:last-child {
  background: linear-gradient(180deg, #A6A6A6 0%, rgba(64, 64, 64, 0.00) 50%);
}

.reveal__row--ghost-2 {
  height: 4rem;
  margin: 0 2.75rem;
  background: rgba(245, 245, 245, 0.08);
}

.reveal__row--real {
  background: var(--color-card-bg);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2.5rem;
  height: 8.25rem; /* 132 */
  color: var(--color-text-dark);
}

.reveal__rank {
  flex-shrink: 0;
  width: 4.5rem;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 500;
}

.reveal__logo-wrap {
  flex-shrink: 0;
  width: 5.25rem;  /* 84 */
  height: 5.25rem; /* 84 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.reveal__name {
  flex: 1;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
  text-align: left;
}

.reveal__pick {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--neutral-30);
  opacity: 0;
  transition: opacity 200ms ease;
}

.reveal__pick[data-pick="true"] {
  opacity: 1;
}

/* Reveal использует тот же flex space-between, что и game — структура
   (title-row, progress, list, submit) визуально совпадает с (title, progress,
   card-group, submit) на game screen. */

/* =============================================================================
 * #screen-end + #screen-max — финальные экраны (blob, score, кнопки, соцсети)
 * ============================================================================ */

#screen-end.screen,
#screen-max.screen {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  height: 100vh;       /* fallback */
  height: 100dvh;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.screen-close {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
  z-index: 10;
}

.screen-close:hover { opacity: 1; }

.screen-close img {
  width: 100%;
  height: 100%;
  display: block;
}

.end__main {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.end__content {
  width: 100%;
  max-width: 51rem; /* ~816 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.end__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
}

.end__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 29.375rem; /* ~470 */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.end__title-line {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--neutral-5);
}

.end__title-line--top    { margin-bottom: 0.5rem; }
.end__title-line--bottom { margin-top: 0.5rem; }

.end__score {
  position: relative;
  z-index: 1;
  margin: 0.5rem 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 6.5rem;   /* 104 */
  line-height: 6.5rem;
  font-weight: 500;
  color: var(--neutral-5);
}

.end__description {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--neutral-5);
}

.end__prize {
  margin: 1.5rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.end__prize[hidden] {
  display: none;
}

.end__prize-ornament {
  width: 1rem;
  height: 2.375rem;
  flex-shrink: 0;
  display: block;
}

.end__prize-text {
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--neutral-5);
  white-space: nowrap;
}

.end__actions {
  margin-top: 3rem;
  width: 100%;
  max-width: 26.625rem; /* 426 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.end__button-group {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}

.btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3.5rem;
  padding: 0 1rem;
  border: 1px solid rgba(245, 245, 245, 0.4);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--neutral-5);
  text-decoration: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
  box-sizing: border-box;
}

.btn-secondary:hover {
  background: rgba(245, 245, 245, 0.06);
  border-color: rgba(245, 245, 245, 0.6);
}

.btn-secondary__logo {
  height: 1.25rem;
  width: auto;
  display: block;
}

.btn-secondary__arrow {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
  flex-shrink: 0;
}

.end__hint {
  margin: 4rem 0 0;
  max-width: 37.75rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--neutral-5);
  opacity: 0.8;
  text-align: center;
}

.end__socials {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-btn {
  width: 3.0625rem; /* 49 */
  height: 3.125rem; /* 50 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: transparent;
  transition: background-color var(--transition-fast);
}

.social-btn:hover {
  background: rgba(245, 245, 245, 0.08);
}

.social-btn img {
  width: 2.0625rem; /* 33 */
  height: 2.125rem; /* 34 */
  display: block;
}

/* Idle countdown bar удалён вместе с автовозвратом на idle с end/max-экранов
   (решение пользователя). Ручные выходы (X-крестик / Play Again) сохранены. */

/* =============================================================================
 * Idle screen — заставка для ТВ (Figma node 894:4132, 1920×1080)
 * Desktop only. TODO: mobile-вариант (по согласованию с пользователем).
 * ============================================================================ */
#screen-idle.screen {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  background: var(--neutral-70);
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
}

.idle__bg {
  position: absolute;
  right: -2.5rem;          /* -40px */
  top: 0;
  width: 54.625rem;        /* 874px */
  height: 51.4375rem;      /* 823px */
  pointer-events: none;
  user-select: none;
}

/* Индикатор оператора стенда: «N не отправлено», виден только при queue.length >= CONFIG.queue.badgeThreshold */
.idle__queue-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  font-size: 0.75rem;
  color: var(--neutral-50, #888);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

/* Операторская панель экспорта очереди — инжектится из JS только по ?admin=1.
   Фиксирована в углу поверх всего; гостям не показывается (нет параметра). */
.admin-panel {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 17rem;
  padding: 0.875rem 1rem;
  background: var(--neutral-70, #1b1811);
  color: var(--neutral-5, #f5f5f5);
  border: 1px solid var(--neutral-50, #555);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.admin-panel__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
}

.admin-panel__count {
  opacity: 0.9;
}

.admin-panel__actions {
  display: flex;
  gap: 0.5rem;
}

.admin-panel button {
  flex: 1;
  padding: 0.45rem 0.6rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-panel button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.idle__qr {
  position: absolute;
  left: 20.1875rem;        /* 323px */
  top: 25.375rem;          /* 406px */
  width: 14.75rem;         /* 236px */
  height: 14.75rem;
}

.idle__qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.idle__content {
  position: absolute;
  left: 39.4375rem;        /* 631px */
  top: 18.875rem;          /* 302px */
  width: 52rem;            /* 832px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.5rem;             /* 56px */
}

.idle__logo {
  display: flex;
  width: 26.75rem;         /* 428px wrapper */
  text-decoration: none;
}

.idle__logo img {
  width: 22.375rem;        /* 358px */
  height: 2rem;            /* 32px */
  display: block;
}

.idle__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;            /* 4px между title и description */
  width: 100%;
}

.idle__title {
  margin: 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 4rem;         /* 64px */
  line-height: 4.5rem;     /* 72px */
  font-weight: 500;
  text-transform: uppercase;
  color: var(--neutral-5);
  word-break: break-word;
}

.idle__description {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 47.625rem;        /* 762px */
  height: 7.5rem;          /* 120px */
  padding: 1.5rem 0;       /* 24px — текст начинается ровно по левому краю плашки (как title/кнопка) */
  background: var(--neutral-70);
}

/* В диапазоне 1480–1600px ширина плашки под QR уменьшается ступенью на 16%
   (rem заморожен на полу 14px → 667px; 47.625 × 0.84 = 40.005rem ≈ 560px). */
@media (max-width: 1600px) and (min-width: 1480px) {
  .idle__description {
    width: 40.005rem;      /* −16% от 47.625rem → ~560px */
  }
}

.idle__description p {
  margin: 0;
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.75rem;      /* 28px */
  line-height: 2rem;       /* 32px */
  font-weight: 500;
  text-transform: uppercase;
  color: var(--neutral-10);
  text-align: left;
}

.idle__start {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;          /* 56px */
  padding: 1rem 6.5rem;    /* 16px 104px */
  background: var(--neutral-5);
  color: #000;
  border: 0;
  border-radius: 0.5rem;   /* 8px */
  font-family: var(--font-display);
  font-feature-settings: 'case', 'cpsp';
  font-size: 1.5rem;       /* 24px */
  line-height: 3rem;       /* 48px */
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.idle__start:hover {
  opacity: 0.85;
}

/* =============================================================================
 * Confetti (триггерится из design-effects.js по событию omi:correct)
 * Раскладка точек — из Figma frame 64 / Dots node 894:3882.
 * Точки разлетаются с bouncy easing и остаются на месте до screen-change.
 * ============================================================================ */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.confetti-dot {
  position: fixed;
  border-radius: 50%;
  background: var(--neutral-5);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: confetti-fly var(--duration, 1100ms) cubic-bezier(.34, 1.56, .64, 1) var(--delay, 0ms) forwards;
  will-change: transform, opacity;
}

@keyframes confetti-fly {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
    opacity: 1;
  }
}

/* =============================================================================
 * Mobile overrides для game/reveal — в конце файла, чтобы перебить
 * шорт-хенды .game__header / .game__body, объявленные выше.
 * ============================================================================ */
@media (max-width: 899px) {
  .game__header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .game__body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* body растягивается на всю высоту main через stretch (как на ≤600px).
     ВАЖНО: не через height:100% — разрешение процентной высоты относительно
     flex:1-родителя ненадёжно в части мобильных браузеров/WebView (body
     схлопывается до высоты контента и прижимается к верху). stretch работает
     везде. Заголовок остаётся сверху (body justify:flex-start), поэтому title
     game/reveal по-прежнему на одной высоте. */
  .game__main {
    align-items: stretch;
  }

  /* Уменьшаем высоту body — все три промежутка между детьми
     (title↔progress↔cards↔submit) сжимаются примерно в 2 раза.
     Reveal остаётся на 41rem (там reveal__list большой), game
     ужимаем сильнее — карточки маленькие, иначе слишком много слака
     и title↔progress промежуток крупнее, чем на reveal. */
  .game__body {
    height: 41rem;
  }

  /* Game-body заполняет высоту main и распределяет контент: заголовок сверху,
     карточки по центру (margin:auto), SUBMIT снизу. Раньше был height:auto +
     фиксированные margin-top → на широких полосах (601–899px) контент прижимался
     к верху, снизу оставалась пустота. title↔progress оставляем 2rem. */
  #screen-game .game__body {
    height: 100%;
    justify-content: flex-start;
  }

  #screen-game .game__progress {
    margin-top: 2rem;
  }

  #screen-game .game__card-group {
    margin-top: auto;
    margin-bottom: auto;
  }

  #screen-game .btn-submit {
    margin-top: 0;
  }

  /* Reveal-body: тот же принцип — список центрируется в свободной зоне (margin:auto),
     кнопка прижата к низу. SUBMIT/Next pair автоматически на одной высоте с game. */
  #screen-reveal .game__body {
    height: 100%;
    justify-content: flex-start;
  }

  #screen-reveal .game__progress {
    margin-top: 2rem;
  }

  /* Ghost-rows уменьшены на 25% → reveal__list = 24.75rem
     (real×2 + ghost-1×2 + ghost-2×2 + gap×5 = 11 + 5.25 + 6 + 2.5). */
  #screen-reveal .reveal__list {
    margin-top: auto;
    margin-bottom: auto;
  }

  #screen-reveal .btn-submit {
    margin-top: 0;
  }

  .reveal__row--ghost-1 {
    height: 2.625rem;
  }

  .reveal__row--ghost-2 {
    height: 3rem;
  }

  /* ~70% от десктопа: карточки компактнее на мобилке. */
  .game__card-group {
    height: 21rem;
  }

  .card.outlet-btn {
    height: 18.5rem;
    padding: 0.5rem;
    gap: 1.25rem;
  }

  .game__card-group[data-selected="left"]  .card[data-side="left"],
  .game__card-group[data-selected="right"] .card[data-side="right"] {
    height: 21rem;
  }

  .card__logo-wrap {
    max-width: 16rem;
    height: 6rem;
  }

  .card__name {
    font-size: 1.2rem;
    line-height: 1.5rem;
    min-height: 3rem; /* 2 × line-height */
  }

  .card-divider {
    width: 6rem;
    height: 4.25rem;
  }

  /* Title и counter в шапке game/reveal — уменьшаем ~в 2 раза. */
  .game__title {
    font-size: 1.6rem;
    line-height: 1.92rem;
  }

  .game__title-row {
    height: 2.42rem; /* line-height title (1.92) + padding-bottom (0.5) */
    padding-bottom: 0.5rem;
  }

  .game__counter {
    height: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .game__counter-clip {
    min-width: 0.625rem;
    width: auto; /* двузначные не обрезаются */
    height: 1.5rem;
  }

  .game__counter-num {
    height: 1.5rem;
    line-height: 1.5rem;
  }

  /* Шаг анимации каунтера на мобилке: 1.5rem (num) + 0.5rem (gap) = 2rem */
  :root {
    --counter-step: 2rem;
  }

  /* Reveal: фиксируем геометрию реальной строки на мобиле (спека пользователя).
     ВАЖНО: высоту НЕ ставим на .reveal__row — этот класс есть и у ghost-строк,
     иначе ghost-1/ghost-2 переопределятся на 72px и список вырастет на +130px,
     а кнопка уезжает за 100dvh. */
  .reveal__row--real {
    display: flex;
    height: 72px;
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    align-self: stretch;
  }

  .reveal__rank {
    width: 2.5rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  .reveal__logo-wrap {
    width: 4.5rem;
    height: 4.5rem;
  }

  /* Название: максимум 2 строки, лишнее — многоточием. */
  .reveal__name {
    font-size: 1.2rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Your pick: фикс 14px, всегда в одну строку. */
  .reveal__pick {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
  }

  /* End/Max: уменьшаем заголовок, счёт и blob на ~12% */
  .end__title-line {
    font-size: 2.625rem; /* 3 × 0.875 */
  }

  .end__score {
    font-size: 5.7rem;   /* 6.5 × 0.875 */
    line-height: 5.7rem;
  }

  .end__blob {
    width: 25.7rem;      /* 29.375 × 0.875 */
  }

  /* Боковой паддинг на контейнер — весь контент end/max (заголовок, счёт, кнопки,
     подсказка, соцсети) получает 24px по краям и не упирается в края экрана.
     Задаётся один раз здесь; per-элементные padding: 0 1rem убраны, чтобы не дублировать. */
  .end__main {
    padding-inline: 1.5rem;  /* 24px по бокам */
  }

  /* Подзаголовки под end-title: -10% размер */
  .end__description {
    font-size: 1.35rem;  /* 1.5 × 0.9 */
  }

  .end__prize-text {
    white-space: normal;
  }

  /* Close-крестик: чуть выше + на 10% крупнее */
  .screen-close {
    top: 1rem;
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* ============================================================================
 * #screen-game — мобильная вёрстка по Figma (≤600px).
 * Литералы px намеренно: дизайн фиксирует размеры под мобилку.
 * ============================================================================ */
@media (max-width: 600px) {
  /* === Header (logo): центрируем + резервируем 64px по бокам под крестик === */
  #screen-game .game__header {
    height: auto;
    padding: 24px 64px 0;
    justify-content: center;
  }

  #screen-game .game__logo img {
    width: 189px;
    height: auto;
    max-width: 100%; /* graceful degradation на сверхузких viewports (<317px) */
  }

  /* === Main: 32px от логотипа до title, 20px по бокам === */
  #screen-game .game__main {
    padding: 32px 20px 20px;
    align-items: stretch;
  }

  #screen-game .game__body {
    padding: 0;
    height: 100%;
    max-height: none;
    max-width: none;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* === Heading (title + progress, gap 16px уже задан в .game__heading) === */
  #screen-game .game__title {
    font-size: 32px;
    line-height: 40px;
  }

  #screen-game .game__title-row {
    height: 80px; /* 2 строки × 40 (line-height) — title клипается до одного активного */
    padding-bottom: 0;
    align-items: flex-end;
    gap: 12px; /* между title-clip и counter */
  }

  /* === Counter "1/20": 20/20, прижат к низу title-row, 6px вверх от базовой линии === */
  #screen-game .game__counter {
    font-size: 20px;
    line-height: 20px;
    height: auto;
    margin-bottom: 6px;
  }

  #screen-game .game__counter-clip {
    min-width: 12px;
    width: auto; /* двузначные не обрезаются */
    height: 20px;
  }

  #screen-game .game__counter-num {
    height: 20px;
    line-height: 20px;
  }

  /* Шаг анимации счётчика: 20 (num) + 8 (gap) = 28px */
  #screen-game {
    --counter-step: 28px;
  }

  /* === Сброс существующих ≤899px-правил (margin-top) === */
  #screen-game .game__progress {
    margin-top: 0;
  }

  /* === Карточки: центрируются в свободной зоне между heading и кнопкой === */
  #screen-game .game__card-group {
    margin-top: auto;
    margin-bottom: auto;
    height: auto;
  }

  /* === Кнопка SUBMIT: 48 высота, 16/24 шрифт, 12px вертикальные паддинги === */
  #screen-game .btn-submit {
    margin-top: 0;
    font-size: 16px;
    line-height: 24px;
    height: 48px;
    padding: 12px 0;
    width: 100%;
  }

  /* === #screen-reveal: те же размеры/отступы для логотипа, заголовка,
         прогресса и кнопки, что и на #screen-game. Каунтера на reveal нет. === */
  #screen-reveal .game__header {
    height: auto;
    padding: 24px 64px 0;
    justify-content: center;
  }

  #screen-reveal .game__logo img {
    width: 189px;
    height: auto;
    max-width: 100%;
  }

  #screen-reveal .game__main {
    padding: 32px 20px 20px;
    align-items: stretch;
  }

  #screen-reveal .game__body {
    padding: 0;
    height: 100%;
    max-height: none;
    max-width: none;
    align-items: stretch;
    justify-content: flex-start;
  }

  #screen-reveal .game__title {
    font-size: 32px;
    line-height: 40px;
  }

  #screen-reveal .game__title-row {
    height: 80px;
    padding-bottom: 0;
    align-items: flex-end;
    gap: 12px;
  }

  /* На reveal заголовок — одна строка, тогда как title-row высотой 80px (под 2 строки
     game). Прижимаем трек к низу клипа, чтобы видимый отступ до прогресс-бара
     совпадал с игровым (16px от .game__heading gap). */
  #screen-reveal .game__title-clip {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Сброс 2rem margin-top из ≤899px — на ≤600px gap даёт .game__heading. */
  #screen-reveal .game__progress {
    margin-top: 0;
  }

  /* Список тянется в свободную зону между heading и кнопкой (как card-group). */
  #screen-reveal .reveal__list {
    margin-top: auto;
    margin-bottom: auto;
  }

  #screen-reveal .btn-submit {
    margin-top: 0;
    font-size: 16px;
    line-height: 24px;
    height: 48px;
    padding: 12px 0;
    width: 100%;
  }

  /* End/Max: OMI/OUTSET PR кнопки. Logo Outset PR натурально 207×20 — при
     height 1.25rem (стандарт) ширина 181px, что больше внутренней области
     кнопки на мобиле (~125px), кнопка распирается и группа выезжает за
     края относительно START AGAIN. Уменьшаем height + добавляем object-fit
     contain как safety net на случай узких viewports. */
  .btn-secondary {
    min-width: 0;
    padding: 0 0.5rem;
    gap: 0.5rem;
  }

  .btn-secondary__logo {
    height: 0.875rem;
    max-width: 100%;
    object-fit: contain;
  }
}

/* ============================================================================
 * Minimum viewport height: 700px.
 * При viewport < 700px снимаем lock на 100dvh + overflow:hidden и включаем
 * вертикальный скролл. Контент фиксируется на 700px минимум.
 * ============================================================================ */
@media (max-height: 699px) {
  html,
  html:has(body[data-screen="screen-game"]),
  html:has(body[data-screen="screen-reveal"]),
  html:has(body[data-screen="screen-end"]),
  html:has(body[data-screen="screen-max"]),
  html:has(body[data-screen="screen-idle"]) {
    height: auto;
    min-height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body,
  body[data-screen="screen-game"],
  body[data-screen="screen-reveal"],
  body[data-screen="screen-end"],
  body[data-screen="screen-max"],
  body[data-screen="screen-idle"] {
    height: auto;
    min-height: 700px;
    overflow: visible;
  }

  .screen {
    min-height: 700px;
  }

  #screen-start.screen,
  #screen-game.screen,
  #screen-reveal.screen {
    height: auto;
    min-height: 700px;
    overflow: visible;
  }

  /* На фиксированных game/reveal-экранах body тоже снимает height-lock — иначе
     .game__main (flex:1) распределяется в обрезанной высоте. */
  .game__main {
    flex: 0 0 auto;
  }

  .game__body {
    height: auto;
    max-height: none;
  }
}

/* game/reveal: контент невысокий (~500px) и влезает в любой портретный телефон
   (≥568px высотой). Поэтому в диапазоне 540–699px НЕ уходим в scroll/Hug-режим
   из блока выше, а ВОЗВРАЩАЕМ locked 100dvh + распределение (Fill). Иначе на всех
   телефонах с CSS-высотой ≤699 (iPhone SE/8/mini, многие Android) контент
   прижимался к верху. Scroll-режим остаётся только для реально низких экранов
   (≤539px — landscape), где контент действительно не влезает. */
@media (min-height: 540px) and (max-height: 699px) {
  html:has(body[data-screen="screen-game"]),
  html:has(body[data-screen="screen-reveal"]) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body[data-screen="screen-game"],
  body[data-screen="screen-reveal"] {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #screen-game.screen,
  #screen-reveal.screen {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #screen-game .game__main,
  #screen-reveal .game__main {
    flex: 1;
  }

  #screen-game .game__body,
  #screen-reveal .game__body {
    height: 100%;
  }
}

/* ============================================================================
 * Back-button on #screen-start (signup): desktop only.
 * Blank styling — точный дизайн TBD.
 * ============================================================================ */
.screen-back {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
  z-index: 10;
}
.screen-back:hover { opacity: 1; }
.screen-back img {
  width: 100%;
  height: 100%;
  display: block;
  /* IconChevron уже левый — поворот не нужен. */
}
@media (max-width: 600px) {
  .screen-back { display: none; }
}

/* ============================================================================
 * Confirm modal — blank-styled, design TBD.
 * Появляется при попытке закрыть сессию из game/reveal.
 * ============================================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal__dialog {
  position: relative;
  background: var(--neutral-5, #fff);
  color: var(--neutral-70, #111);
  border-radius: var(--radius-md, 16px);
  padding: 2rem;
  max-width: 28rem;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.modal__title {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

.modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.modal__btn {
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 12px);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__btn--primary {
  background: var(--neutral-70, #111);
  color: var(--neutral-5, #fff);
  border-color: var(--neutral-70, #111);
}
.modal__btn--primary:hover { opacity: 0.85; }

.modal__btn--ghost:hover {
  background: var(--neutral-70, #111);
  color: var(--neutral-5, #fff);
}

@media (max-width: 600px) {
  .modal__dialog { padding: 1.5rem; }
  .modal__actions { flex-direction: column; }
  .modal__btn { width: 100%; }
}