/* Экран игры. Размеры сняты с макета SVR_Game_2026_MobileLayouts01
   (холст 1125×2436 = 375×812 в тройном разрешении) и пересчитаны делением на 3.
   Единица --u масштабирует макет под ширину экрана.
   Цвета и скорость перехода приходят из админки — см. quiz_page.html. */

@font-face { font-family: Plumb; font-weight: 200; font-style: normal; font-display: swap;
  src: url("../fonts/plumbCLight.8a0a00e903ab.woff2") format("woff2"), url("../fonts/plumbCLight.489f40e0a960.woff") format("woff"); }
@font-face { font-family: Plumb; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/plumbCRegular.5e91918b5d00.woff2") format("woff2"), url("../fonts/plumbCRegular.925c2d14f498.woff") format("woff"); }
@font-face { font-family: Plumb; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/plumbCMedium.d284e592c36a.woff2") format("woff2"), url("../fonts/plumbCMedium.538a3db531d2.woff") format("woff"); }
@font-face { font-family: Plumb; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/plumbCBold.71d92311b963.woff2") format("woff2"), url("../fonts/plumbCBold.8b38efda24c7.woff") format("woff"); }
@font-face { font-family: Plumb; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../fonts/plumbCBlack.d3b05d56e1aa.woff2") format("woff2"), url("../fonts/plumbCBlack.471c9b119222.woff") format("woff"); }

:root {
  --u: calc(min(100vw, 430px) / 375);
  --accent: #ed963d;
  --action: #a8c13e;
  --result: #29aae1;
  --bg-from: #fff9f4;
  --bg-to: #f6cda3;
  --speed: 340ms;
  --pink: #ff7d8c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Wagtail проставляет картинкам атрибуты width и height. Если задать ширину
   только в CSS, высота останется из атрибута и картинка вытянется по вертикали.
   Поэтому высоту всем изображениям считает браузер. */
img { height: auto; max-width: 100%; }
html, body { margin: 0; padding: 0; height: 100%; }

/* Цветной фон лежит на body и поэтому занимает весь экран, а не только
   колонку шириной с телефон: на компьютере игра иначе висела узкой полосой
   посреди серого поля. attachment: fixed — чтобы градиент считался от экрана,
   а не от высоты содержимого. */
body {
  font-family: Plumb, "Trebuchet MS", sans-serif;
  color: #000;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-from) 55%, var(--bg-to) 100%) fixed;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
}

.phone {
  position: relative;
  z-index: 1;
  width: min(100vw, 430px);
  height: 100dvh;
  overflow: hidden;
  background: transparent;
}

/* ── фон с героями для широкого экрана ───────────────────────────── */
/* Саму картинку подключает страница — внутри такого же медиазапроса,
   чтобы телефон её не скачивал (см. quiz_page.html). */
.stage-scene { display: none; }

@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .stage-scene {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: center / cover no-repeat;
    pointer-events: none;
    transition: opacity var(--speed) ease;
  }
  /* Фон с героями нарисован под обложку. На вопросах он мешает читать,
     поэтому по умолчанию уходит — в админке это переключается. */
  body.is-playing .stage-scene:not(.is-persistent) { opacity: 0; }
  /* героев рисует широкий фон — вариант для телефона в колонке не нужен */
  .stage-scene ~ .phone #screen-cover picture { display: none; }
}

/* ── экраны и переходы ───────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px);
  transition: transform var(--speed) cubic-bezier(.33, .1, .25, 1),
              opacity var(--speed) ease;
  will-change: transform, opacity;
}
.screen[hidden] { display: none; }

/* Полоса прокрутки — тонкая и полупрозрачная у всех, а не как настроено
   в браузере или системе посетителя: иначе в Firefox и Windows она бывает
   широкой серой полосой. html — для страницы результата: там прокручивается
   вся страница. Для браузеров без scrollbar-width — правила ::-webkit-…;
   новые Chrome при заданном scrollbar-width их не используют.
   Настройка «скрыть полосу» в админке стоит позже и перекрывает это. */
html, .screen {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .28) transparent;
}
html::-webkit-scrollbar, .screen::-webkit-scrollbar { width: 6px; height: 6px; }
html::-webkit-scrollbar-track, .screen::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, .screen::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .28);
  border-radius: 3px;
}
.screen.is-entering { z-index: 2; }
.screen.is-leaving { z-index: 1; }

/* стартовое состояние входящего и конечное уходящего — своё у каждого перехода */
[data-transition="slide"] .enter-from { transform: translateX(100%); }
[data-transition="slide"] .leave-to   { transform: translateX(-100%); opacity: .4; }

[data-transition="fade"] .enter-from { opacity: 0; }
[data-transition="fade"] .leave-to   { opacity: 0; }

[data-transition="overlay"] .enter-from { transform: translateX(100%); box-shadow: -8px 0 24px rgba(0,0,0,.18); }
[data-transition="overlay"] .leave-to   { transform: none; opacity: 1; }

[data-transition="depth"] .enter-from { transform: scale(1.06); opacity: 0; }
[data-transition="depth"] .leave-to   { transform: scale(.94); opacity: 0; }

[data-transition="up"] .enter-from { transform: translateY(100%); }
[data-transition="up"] .leave-to   { transform: translateY(-6%); opacity: 0; }

/* Если человек попросил систему меньше двигать картинку — уважаем. */
@media (prefers-reduced-motion: reduce) {
  .screen { transition-duration: 120ms; }
  .enter-from, .leave-to { transform: none !important; opacity: 0 !important; }
}

/* ── кнопки ──────────────────────────────────────────────────────── */
/* Эффекты наведения выбираются в админке: класс fx-… стоит на body.
   Наведение есть только там, где есть мышь; на касание всем кнопкам
   оставлено короткое «нажатие» — это полезнее подсветки. */
.btn { transition: transform 140ms ease, filter 140ms ease; }
@media (hover: hover) {
  .fx-glow .btn:hover:not(:disabled) { filter: brightness(1.07) saturate(1.06); }
  .fx-lift .btn:hover:not(:disabled) {
    transform: translateY(calc(-2 * var(--u)));
    filter: drop-shadow(0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .25));
  }
  .fx-grow .btn:hover:not(:disabled) { transform: scale(1.03); }
}
.btn:active:not(:disabled) { transform: translateY(calc(1 * var(--u))) scale(.99); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

.btn {
  display: block;
  border: none;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .18);
}
/* Выключенная кнопка раньше делалась прозрачной — и сквозь неё просвечивал
   текст ответов. Теперь она остаётся непрозрачной, а «выключенность» видна
   по приглушённому цвету. */
.btn:disabled {
  cursor: default;
  box-shadow: none;
  filter: saturate(.3) brightness(1.06);
  color: rgba(255, 255, 255, .85);
  /* Насколько кнопка прозрачна, пока ответ не выбран, — задаётся в админке.
     Сквозь неё просвечивает текст ответов, поэтому значение подбирается
     глазами под фон теста. */
  opacity: calc(var(--btn-off, 55) / 100);
}

/* Тень у кнопок нарисована в самой картинке: вокруг плашки в файле оставлены
   прозрачные поля. Раньше картинки обрезались по плашке, а тень рисовалась
   заново через CSS — иначе сквозь поля просвечивал текст ответов.
   Теперь показываем картинку целиком, отдельным слоем: он выходит за границы
   кнопки ровно на эти поля. Числа измерены по альфа-каналу (плашка — там, где
   непрозрачность больше 200) и записаны в долях самой плашки, поэтому один
   набор работает на любом размере кнопки.
   z-index: -1 уводит слой под подпись, а isolation держит его в пределах
   кнопки — иначе на цветных блоках он провалился бы под их фон. */
.btn-next, .btn-big, .btn-donate {
  position: relative;
  isolation: isolate;
  background: none;
  border: none;
  box-shadow: none;
  filter: none;
}
.btn-next::before, .btn-big::before, .btn-donate::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* поля вокруг плашки: сверху 25, справа 48, снизу 50, слева 25 точек
   при плашке 1733×243 */
.btn-next::before {
  background-image: url("../img/button_orange.34d6ad67e8e9.png");
  inset: -10.288% -2.770% -20.576% -1.443%;
}
/* поля 26 / 49 / 50 / 25 при плашке 1880×348 */
.btn-big::before, .btn-donate::before {
  background-image: url("../img/button_green.d91a954fa17e.png");
  inset: -7.471% -2.606% -14.368% -1.330%;
}

.btn-next {
  width: calc(324 * var(--u));
  height: calc(41 * var(--u));
  /* Подпись приподнята: у «следующий вопрос» есть нижние выносные элементы,
     из-за них при обычном центрировании снизу остаётся меньше воздуха. */
  padding: 0 0 calc(5.3 * var(--u));
  margin: calc(14 * var(--u)) auto calc(4 * var(--u));
  font-weight: 400;
  font-size: calc(20 * var(--u));
}
.btn-big {
  width: calc(330 * var(--u));
  height: calc(72 * var(--u));
  margin: calc(18 * var(--u)) auto calc(12 * var(--u));
  font-weight: 700;
  font-size: calc(33 * var(--u));
}
.btn-donate {
  width: calc(316 * var(--u));
  height: calc(60 * var(--u));
  margin: calc(34 * var(--u)) auto 0;
  font-weight: 700;
  font-size: calc(26 * var(--u));
  line-height: calc(56 * var(--u));
}
.btn-text {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto calc(6 * var(--u));
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  color: #8a7f74;
  cursor: pointer;
}

/* ── обложка ─────────────────────────────────────────────────────── */
/* Логотип без подписи — надпись «представляет» задаётся в админке отдельным
   полем, чтобы её можно было поменять или убрать. */
/* Обложка собирается слоями: цветной фон экрана, поверх него картинка
   с героями (её рисует дизайнер целиком, под пропорции телефона), а сверху
   логотип, подпись и заголовок. Так вёрстке не нужно расставлять персонажей
   по одному — это оказалось ненадёжно. */
.cover-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}
#screen-cover > *:not(picture) { position: relative; z-index: 2; }

.cover-logo { display: block; width: calc(128 * var(--u)); margin: calc(22 * var(--u)) auto calc(8 * var(--u)); }
.cover-kicker {
  font-weight: 200; font-size: calc(15 * var(--u)); letter-spacing: calc(4 * var(--u));
  color: var(--accent); text-align: center; text-transform: uppercase;
  margin: 0 0 calc(10 * var(--u)); padding-left: calc(4 * var(--u));
}
.cover-body { flex: 1 1 auto; display: flex; align-items: flex-end; }
/* Кегль 52 из макета; на коротких экранах страница подставляет в --title-size
   свой (см. quiz_page.html). Интерлиньяж, разрядка и обводка меняются вместе
   с кеглем, чтобы мелкий заголовок не казался жирнее и плотнее крупного. */
.cover-title {
  --k: calc(var(--title-size, 52) / 52);
  margin: 0; padding: 0 calc(26 * var(--u)) calc(12 * var(--u));
  font-weight: 900;
  font-size: calc(var(--title-size, 52) * var(--u));
  line-height: calc(var(--title-size, 52) * var(--u) * 0.973);
  letter-spacing: calc(-.4 * var(--k) * var(--u));
  /* Обводка рисуется по центру контура, наружу выходит половина. */
  -webkit-text-stroke: calc(10 * var(--k) * var(--u)) #fff;
  paint-order: stroke fill;
}
.cover-title em { font-style: normal; color: var(--pink); }
/* Заголовок обложки: свой вариант переносов для широкого экрана. */
.title-wide { display: none; }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .title-narrow { display: none; }
  .title-wide { display: inline; }
  /* Колонка игры узкая, как телефон, и всё лишнее в ней обрезается. На
     обложке широкого экрана заголовку это мешает: он должен быть шире
     колонки. Поэтому пока показывается обложка, колонка не обрезает, а как
     только пошли карточки (body.is-playing) — обрезает снова, иначе видно,
     как экраны уезжают вбок. */
  .phone { overflow: visible; }
  body.is-playing .phone { overflow: hidden; }
  /* Экран обложки тоже не должен обрезать: у экранов стоит overflow-x: hidden,
     а по правилам CSS одну ось отдельно «показать» нельзя — только весь экран.
     Обложке прокрутка не нужна, поэтому здесь это безопасно. */
  #screen-cover { overflow: visible; }
  .cover-title {
    /* Заголовок — элемент гибкой раскладки, и по умолчанию он сжимается до
       ширины колонки. Запрещаем сжатие, иначе заданная ширина ни на что не
       влияет: именно на этом ширина сначала не сработала. */
    flex: none;
    width: min(calc(var(--title-wide-w, 700) * var(--u)), 96vw);
    max-width: none;
    margin-left: 50%;
    /* Сдвиг по вертикали задаётся в админке; горизонтальное смещение — это
       центрирование блока, который шире колонки. */
    transform: translateX(-50%) translateY(calc(var(--title-wide-shift, 0) * var(--u)));
    font-size: calc(var(--title-wide-size, 52) * var(--u));
    line-height: calc(var(--title-wide-size, 52) * var(--u) * 0.97);
    /* У ноутбука видимая часть бывает ниже порога «короткого экрана» —
       кегль от этого здесь не зависит, значит и обводка тоже. */
    letter-spacing: calc(-.4 * var(--u));
    -webkit-text-stroke: calc(10 * var(--u)) #fff;
    /* В макете для телефона заголовок прижат влево; на широком экране блок
       шире текста, и такой заголовок выглядит сдвинутым. Выбор — в админке. */
    text-align: var(--title-wide-align, center);
  }
}

/* ── вопрос ──────────────────────────────────────────────────────── */
.progress { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
.dots { display: flex; justify-content: center; gap: calc(9 * var(--u)); }
.dot {
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  background: url("../img/progressBar_empty.8cf043733cea.png") center / contain no-repeat;
}
.dot.is-done { background-image: url("../img/progressBar_full.94031729344f.png"); }

.bar-wrap { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.bar { flex: 1 1 auto; height: calc(10 * var(--u)); border-radius: 999px; background: #fff; border: calc(1.4 * var(--u)) solid #111; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width var(--speed) ease; }
.bar-label { font-weight: 400; font-size: calc(14 * var(--u)); white-space: nowrap; }

/* Нижний отступ — под прилипшую кнопку: без него последний вариант уезжает под неё. */
.q-body { padding: 0 calc(26 * var(--u)) calc(84 * var(--u)); }
.q-num { font-weight: 700; font-size: calc(24 * var(--u)); color: var(--accent); margin: 0 0 calc(4 * var(--u)); }
.q-title { font-weight: 700; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); margin: 0 0 calc(18 * var(--u)); }
.q-image { display: block; width: 100%; border-radius: calc(12 * var(--u)); margin: 0 0 calc(14 * var(--u)); }

.options { display: block; }
.option {
  display: block; width: calc(100% + 34 * var(--u)); text-align: left; border: none;
  background: transparent; font-family: inherit;
  padding: calc(9 * var(--u)) calc(17 * var(--u));
  margin: 0 calc(-17 * var(--u)) calc(9 * var(--u));
  border-radius: calc(10 * var(--u)); cursor: pointer;
}
.option.is-picked { background: color-mix(in srgb, var(--action) 30%, transparent); }
.option-head { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.option-letter { font-weight: 700; font-size: calc(24 * var(--u)); }
.option-box {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  background: url("../img/choise_empty.adb4e1aa91a6.png") center / contain no-repeat;
  position: relative;
}
/* Галочка выходит за рамку квадрата — так нарисовано в макете, поэтому она
   рисуется отдельным слоем поверх.
   Размеры не на глаз: в choise_empty рамка занимает 95.9%×99.2% кадра, а в
   choice_full — 89.5%×73.3% (сверху торчит галочка). Масштаб и смещение ниже
   подобраны так, чтобы сама рамка в обоих состояниях оказалась пиксель в
   пиксель на одном месте — иначе при клике квадрат заметно прыгает. */
.option.is-picked .option-box { background-image: none; }
.option.is-picked .option-box::after {
  content: "";
  position: absolute;
  left: calc(-0.02 * var(--u));
  top: calc(-7.79 * var(--u));
  width: calc(23.57 * var(--u));
  height: calc(29.78 * var(--u));
  background: url("../img/choice_full.c329907b4fb8.png") 0 0 / 100% 100% no-repeat;
}
.option-text { font-weight: 200; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }

/* Кнопка «дальше» всегда на виду: при пяти длинных вариантах экран не влезает,
   а листать в поисках кнопки аудитория не станет. */
/* Кнопка всегда на виду, но подложки во всю ширину у неё нет — фон только
   у самой кнопки, как нарисовано в макете. */
.screen-foot {
  margin-top: auto;
  position: sticky;
  /* Насколько кнопка приподнята над нижним краем. Значение приходит из
     админки: у теста целиком — переменной на странице, у отдельной вставки —
     прямо на этом блоке. Отступ снизу здесь не работает: у прилипшего блока
     браузер его игнорирует. */
  bottom: var(--foot-shift, 0px);
  z-index: 3;                 /* иначе текст ответов рисуется поверх кнопки */
  padding-top: calc(10 * var(--u));
  pointer-events: none;
}
.screen-foot > * { pointer-events: auto; }
/* На вопросах поднятую кнопку держит не смещение, а запас снизу внутри
   блока. Смещение прилипшего блока в конце прокрутки задвигало кнопку на то,
   что стоит прямо над ней, — на логотип. Запас же занимает место в раскладке,
   и в конце карточки кнопка встаёт под логотипом. Опущенная кнопка (число
   больше нуля) по-прежнему уходит смещением. На вставках всё как было:
   логотипа там нет, а кнопку поверх картинки ставят нарочно. */
.screen:not(.is-interstitial) .screen-foot {
  bottom: min(0px, var(--foot-shift, 0px));
  padding-bottom: max(0px, var(--foot-shift, 0px));
}
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .screen-foot { bottom: var(--foot-shift-wide, var(--foot-shift, 0px)); }
  .screen:not(.is-interstitial) .screen-foot {
    bottom: min(0px, var(--foot-shift-wide, var(--foot-shift, 0px)));
    padding-bottom: max(0px, var(--foot-shift-wide, var(--foot-shift, 0px)));
  }
}

/* ── раскладки карточек ──────────────────────────────────────────── */
/* «Картинка фоном»: иллюстрация лежит под текстом, чтобы текст оставался читаемым,
   поверх неё — мягкая подложка цвета фона. */
.screen.layout-image_bg { background-size: cover; background-position: center top; }
.screen.layout-image_bg .q-body,
.screen.layout-image_bg .inter-body {
  background: color-mix(in srgb, var(--bg-from) 86%, transparent);
  border-radius: calc(16 * var(--u));
  margin: 0 calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
}
.screen.layout-image_full { background-size: cover; background-position: center; }
.screen.layout-image_full .inter-title,
.screen.layout-image_full .inter-text {
  color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55);
}

/* ── вставка между вопросами ─────────────────────────────────────── */
.inter-title {
  font-weight: 700; font-size: calc(32 * var(--u)); line-height: calc(38.4 * var(--u));
  text-align: center; margin: calc(26 * var(--u)) calc(20 * var(--u)) 0;
}
.inter-text {
  font-weight: 200; font-size: calc(18 * var(--u)); line-height: calc(23 * var(--u));
  text-align: center; margin: calc(12 * var(--u)) calc(28 * var(--u)) 0;
}
/* Картинка вставки — во всю ширину экрана карточки: у тела карточки по бокам
   поля для текста, и картинка выходит за них отрицательным отступом. */
.inter-art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: calc(10 * var(--u)) 0; margin: 0 calc(-26 * var(--u)); }
.inter-art img { width: 100%; max-height: 100%; object-fit: contain; }

/* Полоска обратного отсчёта под кнопкой вставки: человек видит, что
   карточка сменится сама, и не пугается прыжка. Если в системе выключены
   анимации, полоска просто стоит на месте — время всё равно идёт. */
.inter-timer {
  width: calc(324 * var(--u));
  height: calc(3 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  background: rgba(0, 0, 0, .1);
  border-radius: 999px;
  overflow: hidden;
}
.inter-timer i {
  display: block;
  height: 100%;
  background: var(--accent);
  animation: inter-countdown var(--auto, 10s) linear forwards;
}
@keyframes inter-countdown { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .inter-timer i { animation: none; width: 100%; }
}

/* Логотип внизу карточки с вопросом. На вставке он лишний — там своя
   картинка и свой фон, поэтому прячем. */
.card-logo {
  display: block;
  width: calc(var(--card-logo-w, 100) * var(--u));
  /* Отступ сверху задаётся в админке: минус поднимает логотип к ответам,
     плюс опускает его к кнопке. */
  margin: calc((18 + var(--card-logo-shift, 0)) * var(--u)) auto calc(6 * var(--u));
}
.screen.is-interstitial .card-logo { display: none; }

/* ── результат ───────────────────────────────────────────────────── */
/* Размеры сняты с макета final_page (холст 375 точек в ширину, вся страница
   1633 точки высотой). Страница длинная и прокручивается целиком, поэтому
   градиент задаётся на всей её высоте, а не на высоте экрана. */
/* Градиент с body уходит на холст страницы, а его размер считается по
   корневому элементу. Поэтому при html высотой в экран градиент кончался
   на первом экране, и низ длинной страницы оставался белым — отсюда класс
   и на html тоже. */
html.page-result { height: auto; min-height: 100%; }
body.page-result {
  height: auto;
  min-height: 100dvh;
  background-image: linear-gradient(180deg, var(--bg-result-from, var(--bg-from)) 0%, var(--bg-result-to, var(--bg-to)) 100%);
  background-attachment: scroll;
  background-repeat: no-repeat;
}
.page-result .phone { height: auto; min-height: 100dvh; overflow: visible; }
.page-result .screen {
  position: static;
  height: auto;
  overflow: visible;
  padding: 0 0 calc(40 * var(--u) + env(safe-area-inset-bottom));
  transition: none;
}

.res-logo-link, .cover-logo-link { display: block; }
.res-logo { display: block; width: calc(80 * var(--u)); margin: calc(24 * var(--u)) 0 0 calc(25 * var(--u)); }

/* Высота персонажей задаётся долей экрана (в админке), ширина идёт за ней.
   На узком экране картинка упирается в ширину колонки — тогда высота выйдет
   меньше заданной, это нормально. */
.res-art {
  display: block;
  /* По умолчанию персонажи ровно в ширину белой врезки — как в макете.
     В админке ширину можно и убавить, и увеличить сверх врезки; шире экрана
     картинка не станет, поэтому горизонтальной прокрутки не появится.
     Центрируем сдвигом, а не «auto»: у блока шире родителя auto не работает. */
  width: min(
    calc((100% - 39.4 * var(--u)) * var(--res-art-w, 100) / 100),
    100vw
  );
  max-width: none;
  height: auto;
  max-height: 78svh;
  /* Отступ от логотипа задаётся в админке, общий для всех карточек. */
  margin: calc(var(--res-logo-gap, 12) * var(--u)) 0 0 50%;
  transform: translateX(-50%);
  object-fit: contain;
}

/* Карточка результата: белая врезка, оранжевые полосы только по бокам. */
/* Врезка. Её фон и оранжевые полосы рисует отдельный слой — так их можно
   растворить вверху, чтобы белое не обрывалось под ногами персонажей, а
   плавно уходило в фон страницы. Маска действует только на этот слой:
   повесить её на саму врезку нельзя — вместе с фоном побледнел бы текст.
   Снизу слой закруглён, как в макете. */
.res-card {
  position: relative;
  isolation: isolate;
  /* Врезка вытянута вверх на глубину захода персонажей, а её верхний отступ
     увеличен на столько же — поэтому текст внутри остаётся на месте, как бы
     глубоко картинка ни заходила. Глубина задаётся в админке. */
  margin: calc(-1 * var(--res-overlap, 49) * var(--u)) calc(19.7 * var(--u)) 0;
  padding: calc((26 + var(--res-overlap, 49)) * var(--u)) calc(21.3 * var(--u)) calc(24 * var(--u));
}
.res-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  /* Толщина и цвет полос задаются в админке, одинаково для всех результатов. */
  border-left: calc(var(--res-border, 1.3) * var(--u)) solid var(--res-border-color, var(--accent));
  border-right: calc(var(--res-border, 1.3) * var(--u)) solid var(--res-border-color, var(--accent));
  border-bottom: calc(var(--res-border, 1.3) * var(--u)) solid var(--res-border-color, var(--accent));
  border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u));
}
/* Верх врезки — настройка теста.
   «Растворяется»: белое постепенно проступает из-под персонажей, фон страницы
   виден сквозь него. «Сплошной»: фон остаётся плотным и уходит под персонажей,
   давая им белую подложку — тогда картинку поднимаем над врезкой. */
.card-fade .res-card::before {
  /* Растворение укладывается в зону захода: глубже неё белое уже сплошное. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--res-overlap, 49) * 0.8 * var(--u)));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--res-overlap, 49) * 0.8 * var(--u)));
}
/* В обоих сплошных режимах картинка поднимается над врезкой: врезка
   изолирована и лежит слоем ниже, а позиционированная картинка с z-index — выше. */
.card-under .res-art,
.card-framed .res-art { position: relative; z-index: 1; }
/* «Сплошной с границей»: обводка замыкается сверху, все четыре угла скруглены.
   Фон и рамка по-прежнему под персонажами. */
.card-framed .res-card::before {
  border-top: calc(var(--res-border, 1.3) * var(--u)) solid var(--res-border-color, var(--accent));
  border-radius: calc(14 * var(--u));
}
.res-kicker {
  font-weight: 200; font-size: calc(15 * var(--u)); letter-spacing: calc(3.4 * var(--u));
  color: var(--accent); text-align: center; text-transform: uppercase;
  line-height: 1; margin: 0 0 calc(3.4 * var(--u)); padding-left: calc(3.4 * var(--u));
}
.res-title {
  font-weight: 900;
  font-size: calc(var(--res-title-size, 41) * var(--u));
  line-height: 1.05;
  color: var(--res-title-color, var(--result));
  text-align: center;
  margin: 0 0 calc(17.6 * var(--u));
}
.res-body {
  font-weight: 200; font-size: calc(16.2 * var(--u)); line-height: calc(19.3 * var(--u));
  text-align: center; margin: 0;
}
.res-body p { margin: 0 0 calc(10 * var(--u)); }
.res-body p:last-child { margin-bottom: 0; }
.res-power {
  margin: calc(16 * var(--u)) 0 0;
  font-weight: 700; font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u));
  text-align: center;
}
.res-power b { color: var(--result); font-weight: 700; }

/* Общий для всех типов текст под карточкой — задаётся в админке. */
.res-common {
  font-weight: 200; font-size: calc(17 * var(--u)); line-height: calc(19.4 * var(--u));
  text-align: center; margin: calc(30 * var(--u)) calc(27 * var(--u)) 0;
}
.res-common p { margin: 0 0 calc(14 * var(--u)); }
.res-common p:last-child { margin-bottom: 0; }

/* расклад баллов — показывается, если включён в настройках теста */
.scores { margin: calc(20 * var(--u)) calc(26 * var(--u)) 0; }
.score-row { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.score-name { font-weight: 400; font-size: calc(14 * var(--u)); width: calc(150 * var(--u)); }
.score-bar { flex: 1 1 auto; height: calc(10 * var(--u)); background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--result); }
.score-num { font-weight: 700; font-size: calc(14 * var(--u)); width: calc(22 * var(--u)); text-align: right; }
.score-row.is-winner .score-bar i { background: var(--action); }

.share-label {
  font-weight: 200; font-size: calc(14 * var(--u)); letter-spacing: calc(3.4 * var(--u));
  color: #fff; text-align: center; margin: calc(34 * var(--u)) 0 0;
  padding-left: calc(3.4 * var(--u));
}
.share-row {
  display: flex; justify-content: center; gap: calc(27 * var(--u));
  margin-top: calc(19 * var(--u));
}
.share-row a, .share-row button {
  display: block; width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border: none; background: none; padding: 0; cursor: pointer;
}
.share-row img { width: 100%; height: 100%; object-fit: contain; }
.res-again { display: block; color: #fff; text-decoration: underline; margin-top: calc(24 * var(--u)); }
.res-logo-white { display: block; width: calc(157 * var(--u)); margin: calc(27 * var(--u)) auto 0; }

@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .res-art {
    width: min(
      calc((100% - 39.4 * var(--u)) * var(--res-art-w-wide, 100) / 100),
      100vw
    );
  }
}

/* Подсказка после копирования ссылки. */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24 * var(--u) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
  max-width: calc(330 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: calc(15 * var(--u));
  line-height: calc(19 * var(--u));
  text-align: center;
  border-radius: calc(10 * var(--u));
  opacity: 1;
  transition: opacity 500ms ease;
}
.share-toast.is-going { opacity: 0; }

/* ── закрытый тест ───────────────────────────────────────────────── */
.closed {
  margin: auto; text-align: center; font-weight: 700;
  font-size: calc(28 * var(--u)); padding: 0 calc(30 * var(--u));
}