/* ============================================================
   BLACK STARCULT GAME 2026 — дизайн-система
   Журнальный стиль: белый фон, чёрная типографика, золото-декор.
   Шрифты подключены в css/fonts.css (локальные woff2, CSP 'self').
   Адаптив: колонка 390px (база макета) → 760px при ≥768px.
   Для масштабирования деталей внутри блоков — container queries (cqw).
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --ink: #111111;
  --muted: #555555;
  --line: #E6E6E6;
  --gold: #D4943A;
  --err: #B3261E;
  --cover-bg: #EEEEEE;

  --font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Oranienbaum', 'Times New Roman', serif;
  --font-num: 'Bodoni Moda', Georgia, serif;

  --pad-x: 16px;
  --radius-card: 6px;

  /* Карточка игры: рубашка — чёрный градиент, лицо — двойная рамка */
  --card-back-gradient: linear-gradient(155deg, #2B2B2B 0%, #151515 42%, #0B0B0B 100%);
  --card-back-shadow:
    0 1px 1px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.14),
    0 14px 26px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --card-front-frame:
    inset 0 0 0 5px #FFFFFF, inset 0 0 0 6px var(--ink),
    inset 0 0 0 8px #FFFFFF, inset 0 0 0 9px var(--ink),
    0 1px 1px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.10),
    0 14px 26px rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Каркас страницы ---------- */

.view { animation: view-fade 300ms ease-out; }
@keyframes view-fade { from { opacity: 0; } to { opacity: 1; } }

.page {
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  /* Единый контейнер для cqw-типографики: пропорции как в макете (база 390) */
  container-type: inline-size;
  /* Колонка — «ножницы» макета: умышленные выходы текста за края обрезаются */
  overflow-x: hidden;
}
@media (min-width: 768px) {
  /* Десктоп: узкая журнальная колонка (~60% прежней) — вся cqw-типографика
     сжимается пропорционально макету */
  .page { max-width: 460px; }
}

/* Секция журнальной полосы (вертикальный ритм по макету) */
.section { padding: 40px var(--pad-x) 0; }
.section--first { padding-top: 32px; }
.section--last { padding-bottom: 40px; }
/* Отступы секций экрана результата (макет result.html) */
.section--36 { padding-top: 36px; }
.section--24 { padding-top: 24px; }
/* Секции с полосой-заголовком: боковых полей нет, полоса на всю колонку */
.band-section { padding: 80px 0 0; }
.band-section--products { padding-top: 56px; }

/* ---------- Обложка «журнала» ---------- */

.cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cover-bg);
  container-type: inline-size;
}
@media (min-width: 768px) {
  /* Фото портретное (3:4): пропорция 4/5 даёт мягкий кроп, лицо в кадре */
  .cover { aspect-ratio: 4 / 5; }
}
.cover__img,
.cover__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover__overlay { pointer-events: none; }
.cover__wordmark {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 61%;
}
.cover__subtitle {
  position: absolute;
  /* макет: top 47.3 / left 317 / 3.6px на 390 */
  top: 47.3px;
  top: 12.13cqw;
  left: 81.28cqw;
  font-size: 3.6px; /* фолбэк без container queries */
  font-size: 0.923cqw;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap; /* перенос только по <br> — две строки, как в макете */
}
.cover__issue {
  position: absolute;
  /* макет: top 82.3 / right 14 на 390 */
  top: 21.1cqw;
  right: 3.59cqw;
  writing-mode: vertical-rl;
  font-size: 5.2px;
  font-size: 1.33cqw;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cover__tagline {
  position: absolute;
  /* макет: bottom 40 / left 9.4 на 390 */
  bottom: 10.26cqw;
  left: 2.41cqw;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.cover__tagline .t1 {
  font-size: 8.7px;
  font-size: 2.23cqw;
  letter-spacing: 0.14em;
}
.cover__tagline .t2 {
  display: inline-block;
  font-size: 6.3px;
  font-size: 1.61cqw;
  letter-spacing: 0.08em;
  margin-top: 0.45em;
}

/* ---------- Золотые полосы-разделители с анимацией слов ---------- */

.band { text-align: center; }
.band__line {
  height: 1px;
  background: var(--gold);
  transform-origin: center;
  /* линия вырастает вместе со словами (макет: .gl scaleX 0.3→1) */
  transform: scaleX(0.3);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.band.is-in .band__line { transform: scaleX(1); }
.band__text {
  padding: 13px var(--pad-x);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band__word {
  display: inline-block;
  /* слова прилетают с разных сторон (смещение --band-off по циклу макета) */
  opacity: 0.35;
  transform: translateY(var(--band-off, 2.56cqw));
  transition: opacity 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.band.is-in .band__word { opacity: 1; transform: none; }

/* ---------- Типографика ---------- */

.h-display {
  margin: 0 0 22px;
  font-family: var(--font-num);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* По макету: прижат влево, «GAME 2026» уезжает за правый край
     (обрезается .page) — половина «6» видна */
  text-align: left;
}
/* Размеры макета: 41.7px / 70.4px на 390px (cqw от .page) */
.h-display .l1 {
  display: block;
  font-size: 41.7px;
  font-size: 10.7cqw;
}
.h-display .l2 {
  display: block;
  margin-top: 4px;
  font-size: 70.4px;
  font-size: 18cqw;
}
/* h-display — размеры только cqw: на узкой десктоп-колонке пропорции макета сохраняются */

.lede {
  margin: 0;
  font-size: 15.3px;
  line-height: 1.47;
}

/* Крупный лид (экраны «Мои промокоды» и «Поделитесь результатом») — 17px по макету */
.lede-lg {
  margin: 0;
  font-size: 17px;
  line-height: 1.47;
}

/* Полноширинный абзац: заходит в оба поля на 16px, как в макете (390 против 358) */
.fullbleed { margin-inline: calc(var(--pad-x) * -1); }

/* Интро игры: 14.8px и SVG-буквица «У» высотой в абзац (макет game.html) */
/* Блок интро игры: буквица «У» от y=0, текст — на 21.76px ниже (макет game.html),
   поэтому флоат-сиблинг и padding-top абзаца (margin бы утянул букву вниз) */
.game-lead {
  min-height: 198px;
  min-height: 50.77cqw;
}
.game-lead .game-intro {
  margin: 0;
  padding-top: 21.76px;
  padding-top: 5.58cqw;
}
.game-intro {
  font-size: 14.8px;
  font-size: 3.795cqw;
}
.dropcap-svg {
  float: left;
  display: block;
  width: 138px;
  width: 35.38cqw;
  height: 198px;
  height: 50.77cqw;
  color: var(--ink);
  /* строки огибают диагональ буквицы; узлы — по верхним краям строк макета
     (браузер берёт max грани в диапазоне строки) */
  shape-outside: polygon(0 0, 100% 0, 100% 11%, 95.7% 22%, 90.6% 33%, 85.5% 44%, 81.2% 55%, 76.1% 66%, 71% 77%, 64.5% 88%, 64.5% 100%, 0 100%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Экран «Мои промокоды»: буквица «В» — SVG дизайнера высотой в блок,
   четыре строки лида (17px) начинаются с 88px и огибают букву справа */
.codes-lead {
  min-height: 238px;
  min-height: 61.03cqw;
}
/* padding, а не margin: margin схлопывается с контейнером и тянет флоат вниз */
.codes-lead .lede-lg {
  padding-top: 88px;
  padding-top: 22.56cqw;
}
/* Жёсткие строки лидов: br-строки выключаются по ширине (text-align-last),
   финальная строка — отдельным абзацем без выключки (как в макете) */
.codes-lines,
.game-intro {
  text-align: justify;
  text-align-last: justify;
}
.codes-lines--last,
.game-intro--last {
  text-align: left;
  text-align-last: auto;
}
.codes-lead .codes-lines--last { padding-top: 0; }
.game-lead .game-intro--last { padding-top: 0; }
.dropcap-box--v {
  position: relative;
  float: left;
  width: 176px;
  width: 45.13cqw;
  height: 238px;
  height: 61.03cqw;
  /* узлы по строкам макета (157/172/176px = 89.2/97.7/100% ширины бокса);
     браузер берёт max грани в y-диапазоне line box */
  shape-outside: polygon(0 0, 80% 0, 62% 33%, 89.2% 37%, 89.2% 47.9%, 97.7% 48%, 97.7% 59.2%, 100% 59.5%, 100% 100%, 0 100%);
}
.dropcap-box--v svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 148px;
  width: 37.95cqw;
  height: 238px;
  height: 61.03cqw;
  color: var(--ink);
}

/* Секция сразу за лидом (макет: padding 8px 16px 0) */
.section--tight { padding-top: 8px; }

/* Постоянная подсказка под формой (макет: margin 32px, 16px/1.5, #555) */
.codes-note {
  margin: 32px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* Ошибка поля подсвечивает и бордер (макет: eEB → #B3261E) */
.fld.is-error input { border-color: var(--err); }

/* Выключенный по ширине абзац с буквицей (адаптивная замена
   ручной позастрочной вёрстки макета) */
.justified {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--ink);
  padding: 14px 30px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn--primary { color: #FFFFFF; background: var(--ink); }
.btn--ghost { color: var(--ink); background: var(--bg); }
.btn--ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn.is-disabled,
.btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ---------- Формы ---------- */

.fld { display: block; margin-top: 24px; }
.fld__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fld input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.fld input:focus { border-color: var(--gold); }

.chk {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
.chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }

.err {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--err);
}

.lnk {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.lnk:hover { border-bottom-color: var(--gold); }

/* ---------- Игровая доска и карточки ---------- */

.board-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 24px;
  font-size: 15px;
}
.board-meta .steps {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 24px;
}

/* Шкала скидок: у каждого пункта свой верхний бар (2px у активного),
   без внешних рамок и разделителей — как в макете */
.scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.scale__item {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  text-align: center;
  color: var(--muted);
  transition: color 400ms ease;
}
.scale__item.is-active { border-top: 2px solid var(--ink); color: var(--ink); }
.scale__d {
  display: block;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 20px;
  /* межстрочник наследуется 1.6 (32px) — у цифры есть воздух, как в макете */
}
.scale__hint { display: block; font-size: 12px; }

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 700px;
  /* Поля 18px от колонки (макет: padding 24px 18px 0) при паддинге секции 16px */
  margin: 24px -2px 0;
}
.card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
  /* найденная пара мягко увеличивается и поднимается (макет: cardTf scale 1.05) */
  transition: transform 1.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 550ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.card.is-flipped .card__inner { transform: rotateY(180deg); }
.card.is-matched { transform: scale(1.05); z-index: 3; }
/* Единственная открытая карта пульсирует, пока не открыта вторая (макет: pum) */
.card.is-single { animation: pum 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes pum {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.card__face--back {
  background: var(--card-back-gradient);
  box-shadow: var(--card-back-shadow);
  /* кегль надписи считается от ширины рубашки — «во всю ширину» на любом размере */
  container-type: inline-size;
}
.card__face--back .brand {
  font-family: var(--font-num);
  font-weight: 500;
  /* 13px на рубашке 107px макета = 91% ширины */
  font-size: 13px;
  font-size: 12.11cqw;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  color: #FFFFFF;
}
.card__face--front {
  background: #FFFFFF;
  transform: rotateY(180deg);
  box-shadow: var(--card-front-frame);
}
.card__img {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14%;
  object-fit: contain;
  mix-blend-mode: multiply; /* убирает белые фоны JPG, нейтрален для webp с альфой */
  /* открытая — серая; в паре перекрашивается и зумится 1.4s (макет: .cut) */
  filter: grayscale(1);
  transition: filter 1.4s ease, transform 1.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* Прозрачные webp: без multiply, в паре — с мягкой тенью вокруг предмета */
.card__img--alpha { mix-blend-mode: normal; }
.card.is-matched .card__img {
  filter: grayscale(0);
  transform: scale(1.42);
}
.card.is-matched .card__img--alpha {
  filter: grayscale(0)
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.24))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}
/* зум в сторону своей колонки: крайние панели «расходятся» к краям */
.card.is-matched:nth-child(3n + 1) .card__img { transform: translateX(-20%) scale(1.42); }
.card.is-matched:nth-child(3n) .card__img { transform: translateX(20%) scale(1.42); }

/* Вспышка победы */
.flash {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  pointer-events: none;
  z-index: 100;
  animation: flash 900ms ease-out forwards;
}
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Таймер ---------- */

.timer { text-align: center; }
.timer__label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.timer__row {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}
.timer__time {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.timer__ticktack { font-family: var(--font-display); font-size: 36px; }

/* ---------- Промокод на результате ---------- */

.promo { text-align: center; }
.promo__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.promo__code {
  margin-top: 10px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.06em;
  word-break: break-all;
}
.promo__actions { margin-top: 18px; }

/* Заголовочный блок результата (по макету result.html):
   t1 — Jost 17px + b1 Oranienbaum в одну строку; вторая строка b2 с числом
   в Bodoni Moda 500; опис — Jost 17px. Размеры b1/b2 — по состоянию,
   cqw от .page (37.8/56/53.8px на 390px). */
.rh-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 10px;
}
.rh-t1 { font-size: 17px; line-height: 1.5; white-space: nowrap; }
.rh-b1, .rh-b2 {
  font-family: var(--font-display);
  line-height: 1.05;
  white-space: nowrap;
}
.rh-b2 { margin-top: 2px; }
.rh-num { font-family: var(--font-num); font-weight: 500; }
.rh-desc { margin: 12px 0 0; font-size: 17px; line-height: 1.5; }

.result-head--max .rh-b1,
.result-head--max .rh-b2 { font-size: 37.8px; font-size: 9.7cqw; }
.result-head--try .rh-b1 { font-size: 37.9px; font-size: 9.72cqw; }
.result-head--try .rh-b2 { font-size: 56px; font-size: 14.36cqw; }
.result-head--final .rh-b1,
.result-head--final .rh-b2 { font-size: 53.8px; font-size: 13.8cqw; }

/* ---------- История попыток ---------- */

.list-toggle {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}
.list-toggle__title { font-family: var(--font-display); font-size: 32px; line-height: 1.1; }
/* Уменьшенный заголовок аккордеона «Подарок и условия» (макет: 26px/12px) */
.list-toggle--sm .list-toggle__title { font-size: 26px; }
.list-toggle--sm .list-toggle__hint { font-size: 12px; }
.list-toggle__hint {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.history-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
/* Лучшая попытка — золотая рамка на всю колонку (макет: r.wrap isBest) */
.history-row.is-best {
  margin: -1px calc(var(--pad-x) * -1) 0;
  padding: 12px var(--pad-x);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.history-row__n { font-size: 12px; width: 30px; flex: 0 0 30px; }
.history-row__main { flex: 1; min-width: 0; }
.history-row__code-btn {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-ui);
  text-align: left;
}
.history-row__code {
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.history-row__d {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
}
.history-row__meta { margin-top: 4px; font-size: 15px; color: var(--muted); }

/* «Промокоды отправлены на …» — скрыто до включения писем (Unisender) */
.sent-note { margin-top: 14px; font-size: 15px; color: var(--muted); }

/* Тело аккордеона подарка (макет: padding-top 16, 16px/1.5) */
.gift-body { padding-top: 16px; font-size: 16px; line-height: 1.5; }
/* Латиница в текстах подарка — Bodoni Moda 500 */
.gift-lat { font-family: var(--font-num); font-weight: 500; font-size: 15px; }
/* «STARCULT» в чекбоксе новостей (макет: Bodoni Moda 500 14px) */
.chk-lat { font-family: var(--font-num); font-weight: 500; font-size: 14px; }

/* ---------- Правила (аккордеон) ---------- */

.rules { margin-top: 56px; }
.rules__toggle {
  position: relative;
  display: block;
  width: 100%;
  height: 191px;
  height: 48.97cqw;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}
/* Геометрия макета (.rh): «Правила» заезжает за левый край (−20.9px, половина «П»
   режется), «игры» top:113 прижата вправо, хинт top:152 слева, высота 191px */
.rules__title-1 {
  position: absolute;
  left: -20.9px;
  left: -5.36cqw;
  top: 0;
  font-family: var(--font-display);
  font-size: 119.1px;
  font-size: 30.5cqw;
  line-height: 1;
  white-space: nowrap;
}
.rules__title-2 {
  position: absolute;
  right: 16px;
  right: 4.1cqw;
  top: 113px;
  top: 28.97cqw;
  font-family: var(--font-display);
  font-size: 73.8px;
  font-size: 18.9cqw;
  line-height: 1;
  white-space: nowrap;
}
.rules__hint {
  position: absolute;
  left: 16px;
  left: 4.1cqw;
  top: 152px;
  top: 38.97cqw;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.rules__body { padding: 22px var(--pad-x) 0; }
.rules__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  padding-bottom: 18px;
  font-size: 16px;
  line-height: 1.5;
}
.rules__item p { margin: 0; }
.rules__n {
  position: relative;
  /* По макету: нумерация заезжает за левый край (−23px) и обрезается */
  left: -23px;
  font-family: var(--font-num);
  font-size: 34px;
  line-height: 0.9;
}
.rules__quote {
  margin: 6px 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  text-align: center;
}
.rules__quote .q-n {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.rules__quote p { margin: 8px 0 0; font-family: var(--font-display); font-size: 25px; line-height: 1.2; }
.rules__table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 4px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rules__table > div { text-align: center; padding: 14px 0; }
.rules__table > div + div { border-left: 1px solid var(--line); }
.rules__table b {
  display: block;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
}
.rules__table span { font-size: 14px; color: var(--muted); }

/* ---------- Неактивные блоки «скоро» ---------- */

.soon {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.soon .btn { border-color: var(--ink); }
.gift-inner { padding: 32px var(--pad-x) 0; }

/* Товары «с вашим промокодом» — грид из макета result.html */
.products {
  padding: 28px var(--pad-x) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
}
.products__img { display: block; aspect-ratio: 1 / 1; background: #FFFFFF; }
.products__img img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 9%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Прозрачные картинки: normal-blend + тень вокруг предмета (макет: x.alpha) */
.products__img--alpha img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.24)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}
a.products__item { color: inherit; text-decoration: none; }
.products__name { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; white-space: nowrap; }
.products__lat { font-family: var(--font-num); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }
.products__prices { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; white-space: nowrap; }
.products__old { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.products__now { font-family: var(--font-num); font-weight: 500; font-size: 22px; }

/* ---------- Футер ---------- */

.footer {
  margin-top: 48px;
  padding: 24px var(--pad-x) 40px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.footer .lnk { white-space: nowrap; }

/* DEBUG: отладочная кнопка победы — удалить перед релизом (вместе с разметкой в game.js) */
.btn-debug {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 30px;
  background: #E5484D;
  color: #FFFFFF;
  border: 2px dashed #FFFFFF;
  outline: 2px solid #E5484D;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-debug:hover { background: #C93A3F; }

/* ---------- Доступность ---------- */

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .band__word { transition: none; opacity: 1; transform: none; }
  .band__line { transition: none; transform: none; }
  .card__inner { transition: none; }
  .card { transition: none; }
  .card.is-single { animation: none; }
  .card__img { transition: none; }
  .flash { animation: none; opacity: 0; }
}