/* ============================================================
   Открытка «Для Венеры.» — экран 1
   Палитра строго из референса: тёмно-серый градиент + белый
   ============================================================ */

:root {
  --bg-0: #0e0e0e;
  --bg-1: #1b1b1b;
  --bg-2: #2e2e2e;
  --white: #ffffff;

  --font-title: 'Unbounded', 'Montserrat', system-ui, sans-serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sine: cubic-bezier(.37, 0, .63, 1);

  /* параллакс от курсора/пальца (обновляется из JS) */
  --mx: 0;
  --my: 0;
}

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

html, body { height: 100%; }

body {
  background: var(--bg-0);
  color: var(--white);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ============================================================
   ФОН
   ============================================================ */
.bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite alternate;
  overflow: hidden;
}

@keyframes bgShift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* медленно вращающийся луч света */
.beam {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, .05) 18deg,
    transparent 40deg,
    transparent 180deg,
    rgba(255, 255, 255, .035) 200deg,
    transparent 225deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
          mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  animation: spin 70s linear infinite;
  will-change: transform;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* мягкие плавающие пятна света (только оттенки серого/белого) */
.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.blob--1 {
  width: 75vmax; height: 75vmax;
  left: -30vmax; top: -28vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .075), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate;
}

.blob--2 {
  width: 65vmax; height: 65vmax;
  right: -26vmax; bottom: -26vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .095), transparent 65%);
  animation: drift2 27s ease-in-out infinite alternate;
}

.blob--3 {
  width: 40vmax; height: 40vmax;
  left: 30%; top: 38%;
  background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent 65%);
  animation: drift3 31s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(18vmax, 14vmax) scale(1.25); }
}
@keyframes drift2 {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-16vmax, -18vmax) scale(.9); }
}
@keyframes drift3 {
  from { transform: translate(-8vmax, 6vmax) scale(.9); }
  to   { transform: translate(10vmax, -10vmax) scale(1.3); }
}

#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* плёночное зерно */
.grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 38%, rgba(0, 0, 0, .5) 100%);
}

/* ============================================================
   ЭКРАН 1
   ============================================================ */
.screen {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding:
    calc(env(safe-area-inset-top, 0px) + 22dvh)
    28px
    calc(env(safe-area-inset-bottom, 0px) + 36px);
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0);
}

/* ---------- заголовок ---------- */
.title {
  position: relative;
  z-index: 2;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(28px, 8.6vw, 40px);
  letter-spacing: -.015em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--white);
  text-shadow:
    0 0 14px rgba(255, 255, 255, .55),
    0 0 40px rgba(255, 255, 255, .25);
  animation: glow 4.2s ease-in-out 2.4s infinite;
}

@keyframes glow {
  0%, 100% {
    text-shadow:
      0 0 14px rgba(255, 255, 255, .5),
      0 0 40px rgba(255, 255, 255, .2);
  }
  50% {
    text-shadow:
      0 0 20px rgba(255, 255, 255, .85),
      0 0 60px rgba(255, 255, 255, .4),
      0 0 110px rgba(255, 255, 255, .18);
  }
}

.char {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(26px) scale(.88);
  animation:
    charIn 1.2s var(--ease-out) forwards,
    charWave 5s ease-in-out infinite;
  animation-delay:
    calc(.5s + var(--i) * .08s),
    calc(2.4s + var(--i) * .13s);
}

@keyframes charIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes charWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---------- орбиты вокруг заголовка ---------- */
.orbit {
  --ow: min(84vw, 350px);
  --oh: 96px;
  --rot: -12deg;
  --dur: 6s;
  --dot: 6px;
  --ring: rgba(255, 255, 255, .15);

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ow);
  height: var(--oh);
  transform: translate(-50%, -50%) rotate(var(--rot));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: orbitIn 2s ease 1.4s forwards;
}

.orbit--b {
  --ow: min(100vw, 430px);
  --oh: 158px;
  --rot: 15deg;
  --dur: 9s;
  --dot: 4px;
  --ring: rgba(255, 255, 255, .08);
}

@keyframes orbitIn { to { opacity: 1; } }

.orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ring);
}

.orbit__x, .orbit__y {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

/* эллипс = два синусоидальных колебания со сдвигом в четверть периода */
.orbit__x { animation: orbX var(--dur) var(--sine) infinite alternate; }
.orbit__y { animation: orbY var(--dur) var(--sine) infinite alternate; animation-delay: calc(var(--dur) / -2); }

@keyframes orbX {
  from { transform: translateX(calc(var(--ow) / 2)); }
  to   { transform: translateX(calc(var(--ow) / -2)); }
}
@keyframes orbY {
  from { transform: translateY(calc(var(--oh) / -2)); opacity: .3; }
  to   { transform: translateY(calc(var(--oh) / 2));  opacity: 1; }
}

.orbit__dot {
  position: absolute;
  left: calc(var(--dot) / -2);
  top: calc(var(--dot) / -2);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8), 0 0 28px 6px rgba(255, 255, 255, .35);
}

/* ============================================================
   КНОПКА «НАЧАТЬ»
   ============================================================ */
.cta {
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(44px);
  animation: ctaIn 1.1s var(--ease-out) 1.7s forwards;
}

@keyframes ctaIn {
  to { opacity: 1; transform: translateY(0); }
}

.btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  height: 58px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  color: #0a0a0a;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 40px rgba(255, 255, 255, .12);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
  animation: btnPulse 3.2s ease-in-out 3s infinite;
}

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-block;
  transition: letter-spacing .35s var(--ease-out);
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 10px 40px rgba(255, 255, 255, .12), 0 0 0 0 rgba(255, 255, 255, .35); }
  60%      { box-shadow: 0 10px 40px rgba(255, 255, 255, .2),  0 0 0 16px rgba(255, 255, 255, 0); }
}

/* блик, пробегающий по кнопке */
.btn__shine {
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(150, 150, 150, .38), transparent);
  transform: skewX(-20deg);
  animation: shine 4.2s ease-in-out 3.2s infinite;
}

@keyframes shine {
  0%   { left: -70%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 54px rgba(255, 255, 255, .22);
  }
  .btn:hover .btn__label { letter-spacing: .17em; }
}

.btn:active { transform: scale(.965); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 10px 40px rgba(255, 255, 255, .12); }

.ripple {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  transform: scale(0);
  pointer-events: none;
  animation: ripple .8s ease-out forwards;
}

@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ============================================================
   ПЕРЕХОД ПОСЛЕ НАЖАТИЯ
   ============================================================ */
.is-leaving .screen--intro .char {
  animation: charOut .95s cubic-bezier(.55, 0, .9, .35) forwards;
  animation-delay: calc(var(--i) * .035s);
}

@keyframes charOut {
  to {
    opacity: 0;
    filter: blur(12px);
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4);
  }
}

.is-leaving .screen--intro .title { animation: none; }

.is-leaving .screen--intro .cta {
  animation: ctaOut .6s ease-in forwards;
}

@keyframes ctaOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(34px); }
}

.is-leaving .screen--intro .orbit {
  animation: orbitOut 1.1s ease-in forwards;
}

@keyframes orbitOut {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: 2.6; }
}

.is-started .screen--intro {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   ЭКРАН 2 — сердце, которое заполняется фотографиями
   ============================================================ */
.screen--heart {
  --pop: cubic-bezier(.34, 1.45, .64, 1);

  position: absolute;
  inset: 0;
  display: none;                 /* анимации стартуют в момент показа */
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 19dvh);
}

.is-heart .screen--heart {
  display: flex;
  animation: screenIn .9s ease both;
}

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

.title--sm { font-size: clamp(19px, 6.2vw, 28px); }

.screen--heart .char {
  animation-delay:
    calc(.3s + var(--i) * .05s),
    calc(1.9s + var(--i) * .1s);
}

.screen--heart .cta { animation-delay: .5s; }

/* ---------- сердце ---------- */
.heart-zone {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding-bottom: 2dvh;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0);
}

.heart {
  position: relative;
  width: min(66vw, 310px, 40dvh);
  aspect-ratio: 100 / 90;
  opacity: 0;
  animation: heartIn 1.1s var(--ease-out) .15s forwards;
}

@keyframes heartIn {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

.heart__glow {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 62%);
  opacity: .35;
  pointer-events: none;
  animation: glowBreath 3.4s ease-in-out infinite;
  transition: opacity 1.2s ease;
}

@keyframes glowBreath {
  0%, 100% { transform: scale(.92); }
  50%      { transform: scale(1.08); }
}

/* область, обрезанная по форме сердца: фото не выходят за края */
.heart__photos {
  position: absolute;
  inset: 0;
  -webkit-clip-path: url(#heartClip);
          clip-path: url(#heartClip);
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 70%);
}

.tile {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.tile__in {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  border-radius: 3px;
  background: #222;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  animation: kenburns 9s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.22) translate(var(--kx, -3%), var(--ky, -2%)); }
}

.heart.is-filling .tile {
  animation: tileIn .85s var(--pop) both;
  animation-delay: var(--delay, 0s);
}

@keyframes tileIn {
  0%   { opacity: 0; transform: scale(.2) rotate(-8deg); filter: brightness(2.8) blur(8px); }
  55%  { opacity: 1; filter: brightness(1.7) blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* контур */
.heart__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 3;
  pointer-events: none;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, .6))
    drop-shadow(0 0 12px rgba(255, 255, 255, .28));
  transition: filter 1.2s ease;
}

.heart__line {
  fill: none;
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lineDraw 1.7s cubic-bezier(.6, 0, .2, 1) .15s forwards;
}

@keyframes lineDraw { to { stroke-dashoffset: 0; } }

/* световая «комета», бегущая по контуру */
.heart__comet {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 0;
  opacity: 0;
  animation:
    comet 3.4s linear 2s infinite,
    cometIn .6s ease 2s forwards;
}

@keyframes comet   { to { stroke-dashoffset: -100; } }
@keyframes cometIn { to { opacity: .85; } }

/* сердце заполнено — бьётся */
.heart.is-full {
  opacity: 1;
  animation: heartbeat 1.8s ease-in-out infinite;
}

.heart.is-full .heart__glow { opacity: .8; }

.heart.is-full .heart__outline {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, .8))
    drop-shadow(0 0 20px rgba(255, 255, 255, .4));
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.055); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.04); }
  52%      { transform: scale(1); }
}

/* ---------- кнопка с таймером ---------- */
.btn--timer {
  isolation: isolate;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  animation: none;
  cursor: not-allowed;
}

.btn--timer:disabled { pointer-events: none; }

.btn--timer .btn__label {
  color: #fff;
  mix-blend-mode: difference;   /* белый текст сам становится чёрным над белой заливкой */
  text-transform: none;
  letter-spacing: .03em;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: center;
}

.btn--timer .btn__progress {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.btn--timer.is-counting .btn__progress { animation: progress 15s linear forwards; }

@keyframes progress { to { transform: scaleX(1); } }

.btn--timer .btn__shine { display: none; }

.btn__label.tick { animation: tick .4s var(--ease-out); }

@keyframes tick {
  from { opacity: 0; transform: translateY(-10px) scale(.7); }
  to   { opacity: 1; transform: none; }
}

.btn--timer.is-ready {
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(255, 255, 255, .18);
  animation:
    readyPop .8s var(--pop),
    btnPulse 3.2s ease-in-out .9s infinite;
}

.btn--timer.is-ready .btn__progress { transform: scaleX(1); animation: none; }
.btn--timer.is-ready .btn__shine    { display: block; animation-delay: .6s; }
.btn--timer.is-ready .btn__label    { mix-blend-mode: normal; color: #0a0a0a; }

@keyframes readyPop {
  0%   { transform: scale(.92); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ============================================================
   ПЕРЕХОД: экран 2 → экран 3
   ============================================================ */
.is-leaving2 .screen--heart {
  animation: heartOut .8s ease-in forwards;
  pointer-events: none;
}

@keyframes heartOut {
  from { opacity: 1; transform: none; filter: none; }
  to   { opacity: 0; transform: scale(.94) translateY(-14px); filter: blur(8px); }
}

.is-rules .screen--heart { display: none; }

/* ============================================================
   ЭКРАН 3 — правила мини-игры
   ============================================================ */
.screen--rules {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8dvh);
}

.is-rules .screen--rules {
  display: flex;
  animation: screenIn .8s ease both;
}

.screen--rules .cta { animation-delay: 3.4s; }

.rules-zone {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding-bottom: 6dvh;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0);
}

.rules {
  position: relative;
  isolation: isolate;
  text-align: center;
  font-family: var(--font-title);
  color: var(--white);
  line-height: 1.15;
  text-shadow:
    0 0 14px rgba(255, 255, 255, .5),
    0 0 40px rgba(255, 255, 255, .22);
}

/* мягкое сияние за текстом */
.rules::before {
  content: '';
  position: absolute;
  inset: -34% -26%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .11), transparent);
  animation: glowBreath 4.2s ease-in-out infinite;
  pointer-events: none;
}

.rules p { margin: 0; }

/* слова проявляются из размытия */
.w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
}

.is-rules .w {
  animation: wordIn .9s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}

@keyframes wordIn {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* буквы крупных слов */
.rl {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(26px) scale(.88);
}

.is-rules .rl {
  animation:
    charIn 1s var(--ease-out) both,
    charWave 5s ease-in-out infinite;
  animation-delay:
    calc(var(--base, 0s) + var(--i) * .045s),
    calc(var(--base, 0s) + 1.8s + var(--i) * .1s);
}

/* иерархия: тихий заход → крупные ключевые слова → итог */
.rules__lead {
  font-weight: 600;
  font-size: clamp(13px, 3.9vw, 16px);
  letter-spacing: .03em;
  opacity: .82;
  margin-bottom: .9em !important;
}

.rules__need {
  font-weight: 600;
  font-size: clamp(16px, 4.8vw, 19px);
  margin-bottom: .45em !important;
}

.rules__big {
  font-weight: 700;
  white-space: nowrap;
}

.rules__big--1 {
  font-size: clamp(22px, 7.4vw, 32px);
  letter-spacing: -.02em;
}

.rules__big--2 {
  position: relative;
  display: inline-block;
  margin-top: .12em !important;
  font-size: clamp(27px, 9vw, 40px);
  letter-spacing: -.02em;
}

.uline {
  position: absolute;
  left: -3%;
  bottom: -.32em;
  width: 106%;
  height: .3em;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .7));
}

.uline path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.is-rules .uline path { animation: lineDraw 1s cubic-bezier(.6, 0, .2, 1) 3s forwards; }

.rules__tail {
  margin-top: .9em !important;
  font-weight: 700;
  font-size: clamp(19px, 5.8vw, 24px);
}

.btn--ok .btn__label {
  text-transform: none;
  letter-spacing: .03em;
  font-size: 20px;
}

@media (hover: hover) {
  .btn--ok:hover .btn__label { letter-spacing: .07em; }
}


/* ============================================================
   ЭКРАН 2 — летящие на фоне фотографии
   ============================================================ */
.flyers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.screen--heart > :not(.flyers) { z-index: 1; }

.fly {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  opacity: 0;
  will-change: transform, opacity;
}

.fly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  -webkit-user-drag: none;
}

/* сердце бьётся из JS (в такт со звуком) */
.heart.is-full { animation: none; opacity: 1; }

/* ============================================================
   ПЕРЕХОД: экран 3 → экран 4
   ============================================================ */
.is-leaving3 .screen--rules {
  animation: heartOut .8s ease-in forwards;
  pointer-events: none;
}

.is-game .screen--rules { display: none; }

/* ============================================================
   ЭКРАН 4 — обучение и игра «Лови деньги»
   ============================================================ */
.screen--game {
  position: absolute;
  inset: 0;
  display: none;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;
}

.is-game .screen--game {
  display: flex;
  animation: screenIn .8s ease both;
}

.game {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .6s ease, transform .7s var(--ease-out);
}

.hud.on { opacity: 1; transform: none; }

.hud__pill {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-title);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.hud__pill--time { justify-self: end; min-width: 92px; justify-content: center; }
.hud__pill b { font-weight: 700; display: inline-block; }
.hud__pill small {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
}

.hud__coin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6bd, #ffd23f 55%, #d58a0b);
  box-shadow: 0 0 12px rgba(255, 210, 70, .7);
}

.hud__bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}

.hud__bar i {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: left center;
  box-shadow: 0 0 10px rgba(255, 255, 255, .7);
}

#score.bump { animation: bump .3s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }

.hud.is-low .hud__pill--time { animation: lowPulse .5s ease-in-out infinite alternate; }
@keyframes lowPulse { to { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 22px rgba(255,255,255,.35); } }

/* ---------- обучение ---------- */
.tut {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  pointer-events: none;
  transition: opacity .6s ease;
}

.tut.on { display: block; animation: screenIn .6s ease both; }
.tut.off { opacity: 0; }

.tut__card {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 98px);
  transform: translateX(-50%);
  width: min(88%, 380px);
  padding: 14px 18px 16px;
  border-radius: 18px;
  text-align: center;
  background: rgba(18, 18, 18, .84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 16px 50px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.tut__tag {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
}

.tut__text {
  font-weight: 600;
  font-size: clamp(15px, 4.3vw, 17px);
  line-height: 1.4;
}

.tut__text.swap { animation: textSwap .6s var(--ease-out) both; }
@keyframes textSwap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.tut__keys { display: none; justify-content: center; gap: 14px; margin-top: 12px; }
.tut[data-step="0"] .tut__keys { display: flex; }

.tut__keys i {
  font-style: normal;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  padding-bottom: 3px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: background .3s ease, color .3s ease, transform .4s var(--ease-out);
}

.tut__keys i.ok { background: #fff; color: #0a0a0a; transform: scale(1.14); }

/* «палец», показывающий, как двигать корзинку */
.tut__touch {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.tut__touch.on { opacity: 1; }

.tut__touch i {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 26px rgba(255, 255, 255, .5);
  animation: touchSlide 1.5s ease-in-out infinite alternate;
}

@keyframes touchSlide {
  from { transform: translateX(-74px) scale(.9); }
  to   { transform: translateX(74px) scale(1.05); }
}

/* кнопка «Начать игру» */
.game-cta {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  z-index: 4;
  display: none;
  justify-content: center;
  padding: 0 28px;
  opacity: 0;
  transform: translateY(30px);
}

.game-cta.show { display: flex; animation: ctaIn .9s var(--ease-out) forwards; }
.game-cta.hide { display: flex; animation: ctaOut .5s ease-in forwards; pointer-events: none; }
.game-cta .btn { animation: btnPulse 3.2s ease-in-out infinite; }

/* ---------- итог ---------- */
.result {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding:
    calc(env(safe-area-inset-top, 0px) + 15dvh)
    28px
    calc(env(safe-area-inset-bottom, 0px) + 36px);
  background: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
}

.result.show { display: flex; animation: screenIn .8s ease both; }

.result__box {
  text-align: center;
  font-family: var(--font-title);
  text-shadow: 0 0 14px rgba(255, 255, 255, .5), 0 0 40px rgba(255, 255, 255, .22);
}

.rz { opacity: 0; filter: blur(10px); transform: translateY(16px); }
.result.show .rz { animation: wordIn .9s var(--ease-out) both; animation-delay: var(--d, 0s); }

.result__lead {
  font-weight: 600;
  font-size: clamp(14px, 4vw, 17px);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.result__num {
  margin: .12em 0 .3em;
  font-weight: 700;
  font-size: clamp(54px, 18vw, 88px);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.result__heart {
  display: block;
  width: 52px;
  margin: 6px auto 18px;
  fill: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)) drop-shadow(0 0 22px rgba(255, 255, 255, .4));
  animation: heartbeat 1.8s ease-in-out infinite;
}

.result__pride {
  font-weight: 700;
  font-size: clamp(24px, 7.6vw, 34px);
  line-height: 1.2;
}

.result__cta { animation: ctaIn 1.1s var(--ease-out) 3.5s forwards; }

/* ============================================================
   Уважение к «уменьшить анимацию»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .beam, .blob, .grain, .bg { animation: none; }
  .char { animation: charIn .01s forwards; }
  .btn, .btn__shine, .orbit__x, .orbit__y { animation: none; }
}

/* Продолжение истории: те же тёмные оттенки, мягкие свечения и много движения */
.extra-screen{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(7,7,9,.94);color:#f7f7f7;overflow:auto}
.extra-screen.active{display:flex;animation:extraReveal .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes extraReveal{0%{opacity:0;filter:blur(12px);transform:scale(1.025)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.extra-card,.panic-panel{width:min(100%,440px);max-height:90dvh;overflow:auto;border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:clamp(20px,5vw,30px);background:linear-gradient(145deg,rgba(35,35,38,.96),rgba(15,15,17,.98));box-shadow:0 0 55px rgba(255,255,255,.07);animation:cardFloat 5s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.extra-screen h2{font-size:clamp(20px,5vw,27px);line-height:1.3;letter-spacing:-.04em;margin:8px 0 15px}
.extra-screen p{line-height:1.6;color:#d6d6d6;font-size:14px}
.eyebrow,.final-kicker{font-size:10px!important;letter-spacing:.2em;color:#aaa!important;text-transform:uppercase}
.extra-screen label{display:block;font-size:12px;margin:16px 0 7px;color:#ddd}
.extra-screen input{width:100%;padding:13px 14px;border:1px solid #555;border-radius:8px;background:#151515;color:#fff;font:inherit;outline:none;transition:border-color .25s,box-shadow .25s}
.extra-screen input:focus{border-color:#fff;box-shadow:0 0 0 3px #ffffff18}
.microcopy{font-size:11px!important;color:#aaa!important}
.extra-btn{position:relative;overflow:hidden;display:block;width:100%;margin-top:20px;border:0;border-radius:8px;padding:14px 18px;background:#f5f5f5;color:#111;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s;animation:softPulse 3.5s ease-in-out infinite}
.extra-btn:hover{transform:translateY(-2px);box-shadow:0 0 30px #fff3}
.extra-btn:active{transform:scale(.98)}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 #fff0}50%{box-shadow:0 0 0 7px #fff0,0 0 24px #fff1}}
.panic-panel{border-color:#ff5252;box-shadow:0 0 70px #f00a;background:linear-gradient(145deg,#260808,#100b0b);animation:alarmGlow 1.3s ease-in-out infinite alternate}
@keyframes alarmGlow{from{box-shadow:0 0 22px #ff171733}to{box-shadow:0 0 75px #ff171799}}
#extra6.active{background:#d50000;animation:redFlash .55s ease-out both}
@keyframes redFlash{0%{background:#fff}25%{background:#ff3030}55%{background:#b00000}100%{background:#d50000}}
.panic-top{font-size:10px;letter-spacing:.12em;color:#ffb4b4;border-bottom:1px solid #ff555566;padding-bottom:12px}
.panic-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3939;margin-right:7px;box-shadow:0 0 12px #f00;animation:dotBlink .65s infinite alternate}
@keyframes dotBlink{to{opacity:.2;transform:scale(.6)}}
.panic-icon{display:grid;place-items:center;width:55px;height:55px;border:2px solid #ff5151;border-radius:50%;font-size:34px;font-weight:900;margin:22px auto 14px;animation:iconShake 2.5s ease-in-out infinite}
@keyframes iconShake{0%,90%,100%{transform:rotate(0)}92%,96%{transform:rotate(-9deg)}94%,98%{transform:rotate(9deg)}}
.advice{border:1px solid #ff777755;border-radius:12px;padding:14px;background:#170808}
.advice b{font-size:13px}.advice ol{padding-left:20px;margin-bottom:0}.advice li{font-size:12px;line-height:1.55;margin:7px 0;color:#f3dede}
.final-wrap{display:flex;flex-direction:column;align-items:center;width:min(100%,460px);text-align:center;gap:12px;padding:16px 0}
.final-heart{width:clamp(74px,20vw,112px);height:auto;overflow:visible;filter:drop-shadow(0 0 9px #fff6);animation:heartBeat 2.2s ease-in-out infinite}
.final-heart path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:heartDraw 2.5s ease both}
@keyframes heartBeat{0%,100%{transform:scale(1)}8%{transform:scale(1.08)}16%{transform:scale(1)}25%{transform:scale(1.04)}34%{transform:scale(1)}}
@keyframes heartDraw{from{stroke-dasharray:100;stroke-dashoffset:100}to{stroke-dasharray:100;stroke-dashoffset:0}}
.lyrics{width:100%;min-height:135px;display:flex;align-items:center;justify-content:center;white-space:pre-line;font-size:clamp(14px,3.7vw,18px);line-height:1.65;font-weight:700;text-shadow:0 0 20px #fff4;padding:10px;transition:opacity .45s,transform .45s}
.lyrics.line-out{opacity:0;transform:translateY(9px);filter:blur(4px)}
.final-kicker{margin:0!important}
.telemetry-notice{position:fixed;z-index:20;left:50%;bottom:16px;transform:translateX(-50%);width:min(calc(100% - 24px),520px);padding:16px;border:1px solid #555;border-radius:12px;background:#171719;color:#fff;box-shadow:0 10px 60px #000b;font-size:12px;line-height:1.5}
.telemetry-notice p{margin:4px 0 10px}.notice-actions{display:flex;gap:8px}.notice-actions button{flex:1;border:1px solid #777;border-radius:7px;padding:10px 7px;background:#eee;color:#111;font-size:11px;font-weight:700;cursor:pointer}.notice-actions button:last-child{background:#252525;color:#eee}
@media(prefers-reduced-motion:reduce){.extra-screen.active,.extra-card,.panic-panel,.final-heart,.final-heart path,.extra-btn{animation:none!important;transition:none!important}}

.quiz-card h2{margin-bottom:22px}
.quiz-options{display:flex;flex-direction:column;gap:12px;margin:20px 0 26px}
.quiz-options label{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff04;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.quiz-options label:hover{background:#ffffff0b;border-color:#ffffff70;transform:translateX(3px)}
.quiz-options input{width:15px;height:15px;flex:0 0 15px;accent-color:#fff;margin:0}
.quiz-options span{font-size:14px;color:#e9e9e9}
.quiz-options input:checked+span{color:#fff;font-weight:800}
.quiz-options label:has(input:checked){border-color:#fff8;background:#ffffff10}
.quiz-screen .extra-card{animation:cardFloat 6s ease-in-out infinite}
#extra10 .final-heart{width:clamp(65px,15vw,92px)}
#extra10 .lyrics{min-height:115px}
@media(max-height:650px){.quiz-options{gap:6px;margin:12px 0}.quiz-options label{padding:7px 10px}.quiz-card{padding:18px}}


/* Repair pass: every continuation screen occupies the viewport like the original frames. */
.extra-screen{
  position:fixed!important; inset:0!important; width:100%; height:100dvh; min-height:100svh;
  box-sizing:border-box; z-index:50; overflow-x:hidden; overflow-y:auto;
  padding:clamp(14px,4vw,28px); overscroll-behavior:contain;
}
.extra-screen.active{display:flex;animation:extraReveal .65s cubic-bezier(.2,.8,.2,1) both}
.extra-card,.panic-panel{box-sizing:border-box;max-height:calc(100dvh - 32px);width:min(100%,430px);overflow-y:auto}
.extra-screen input:not([type="radio"]):not([type="file"]){box-sizing:border-box}
#extra15 .final-wrap{max-height:calc(100dvh - 24px);justify-content:center;gap:clamp(8px,2vh,16px)}
#extra15 .final-heart{width:clamp(58px,14vw,90px);flex:0 0 auto}
#extra15 .final-heart path{stroke-dasharray:100;stroke-dashoffset:0}
#extra15 .lyrics{font-size:clamp(15px,3.6vw,19px);line-height:1.45;min-height:clamp(100px,24vh,190px);max-height:35vh;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}
.photo-picker{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:155px;margin:18px 0!important;padding:14px;border:1px dashed #777;border-radius:12px;background:#ffffff04;cursor:pointer;transition:border-color .25s,background .25s}
.photo-picker:hover{border-color:#fff;background:#ffffff0a}
.photo-preview{display:grid;place-items:center;width:95px;height:95px;border:1px solid #ffffff55;border-radius:12px;color:#fff;font-size:35px;overflow:hidden}
.photo-preview img,.agency-photo img{width:100%;height:100%;object-fit:cover;display:block}
.beauty-meter{width:100%;height:12px;border-radius:99px;background:#292929;overflow:hidden;margin:24px 0 8px}
#beautyMeterFill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#24f04e,#9cff8c);box-shadow:0 0 18px #28ff53;transition:width .55s ease}
.meter-caption{display:flex;justify-content:space-between;color:#aaa;font-size:11px}
.beauty-score{font-size:clamp(46px,13vw,68px);font-weight:900;letter-spacing:-.06em;text-align:center;margin-top:16px;text-shadow:0 0 24px #fff3}
#beautyAnalyze:disabled,#beautyNext:disabled{opacity:.35;cursor:not-allowed;animation:none}
.repair-visual{height:95px;display:flex;align-items:center;justify-content:space-evenly;font-size:32px}
.repair-visual span{animation:repairFloat 2s ease-in-out infinite}
.repair-visual span:nth-child(2){animation-delay:.3s;font-size:44px}
.repair-visual span:nth-child(3){animation-delay:.6s}
@keyframes repairFloat{0%,100%{transform:translateY(7px) rotate(-8deg);opacity:.55}50%{transform:translateY(-9px) rotate(8deg);opacity:1}}
.repair-fill{height:100%;width:100%;background:linear-gradient(90deg,#22e84a,#9effb0);transform-origin:left;animation:repairProgress 3s ease-in-out infinite alternate}
@keyframes repairProgress{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
.agency-row{display:flex;gap:16px;align-items:center;margin:20px 0}
.agency-photo{width:108px;height:108px;flex:0 0 108px;display:grid;place-items:center;overflow:hidden;border:1px solid #aaa;border-radius:12px;color:#4bff6a;font-size:28px;background:#181818;animation:softPulse 3s infinite}
.agency-facts p{margin:8px 0;font-size:12px}
.agency-facts strong{color:#35f45a}
.car-track{height:105px;position:relative;overflow:hidden;border:1px solid #666;border-radius:8px;background:linear-gradient(180deg,#252525,#111);margin:22px 0}
.car-track:before{content:"";position:absolute;left:0;right:0;bottom:18px;border-bottom:2px dashed #777}
.car-emoji{position:absolute;left:-65px;bottom:20px;font-size:42px;animation:driveAcross 4s ease-in-out infinite}
@keyframes driveAcross{0%{transform:translateX(0)}80%,100%{transform:translateX(calc(100vw + 350px))}}
.meet-card{text-align:center}
.meet-photo{margin:20px auto;width:100px;height:100px}
.quiz-card h2{font-size:clamp(17px,4.6vw,22px);margin:12px 0}
#extra13 .quiz-options{margin:10px 0 18px;gap:6px}
#extra13 .quiz-options label{padding:7px 10px}
#extra13 .quiz-options span{font-size:12px}
@media(max-height:700px){
  .extra-screen{padding:12px}
  .extra-card,.panic-panel{padding:18px;max-height:calc(100dvh - 24px)}
  .extra-screen h2{font-size:20px;margin:6px 0 10px}
  .extra-screen label{margin:10px 0 5px}
  .extra-screen input:not([type="radio"]):not([type="file"]){padding:10px}
  .extra-btn{margin-top:12px;padding:12px}
}


/* FIX: продолжение — самостоятельные полноэкранные страницы, не карточный GUI */
html, body { min-height:100%; }
body { overflow:hidden; }
.extra-screen {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box;
  z-index:100 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:clamp(20px,5vw,64px) !important;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(65,65,68,.24), transparent 58%),
    linear-gradient(125deg,#0a0a0b 0%,#171719 55%,#242426 100%) !important;
}
.extra-screen.active {
  display:flex !important;
  animation:extraReveal .75s cubic-bezier(.2,.8,.2,1) both;
}
.extra-screen > .extra-card,
.extra-screen > .panic-panel {
  box-sizing:border-box;
  width:min(100%,760px) !important;
  max-width:760px !important;
  max-height:none !important;
  min-height:0;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  padding:clamp(10px,3vw,34px) !important;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
}
.extra-screen h2 { text-wrap:balance; }
.extra-screen .extra-btn { max-width:520px; align-self:center; }
.extra-screen .extra-card > .extra-btn,
.extra-screen .panic-panel > .extra-btn { width:min(100%,520px); }
.extra-screen .quiz-card { width:min(100%,700px) !important; }
.quiz-screen .quiz-options { width:100%; max-width:600px; }
.quiz-screen .quiz-options label {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:9px;
  margin:7px 0;
  background:rgba(255,255,255,.035);
  transition:background .2s,border-color .2s,transform .2s;
}
.quiz-screen .quiz-options label:has(input:checked) {
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.65);
  transform:translateX(4px);
}
.quiz-screen .quiz-options input { accent-color:#fff; width:17px;height:17px;flex:none; }
.quiz-screen h2 { margin-top:clamp(14px,3vh,28px); }
#extra13 .quiz-card { align-items:stretch; }
#extra14 .quiz-card { align-items:stretch; }
#extra15 .final-wrap { width:min(100%,900px); min-height:80dvh; justify-content:center; }
#extra15 .lyrics {
  min-height:clamp(120px,20vh,220px);
  font-size:clamp(17px,3.5vw,28px);
  line-height:1.55;
  white-space:pre-line;
  overflow-wrap:anywhere;
  max-width:900px;
}
#extra15 .final-heart { width:clamp(62px,12vw,100px); }
#extra6.active {
  background:#d50000 !important;
  background-image:radial-gradient(ellipse at 50% 45%,#ef2424,#9c0000 78%) !important;
}
#extra6 > .panic-panel { color:#fff; }
#extra7 .photo-picker { width:min(100%,420px); min-height:200px; }
#photoPreview { max-width:100%; }
#photoPreview img { max-width:100%; max-height:40dvh; object-fit:contain; }
.telemetry-notice { z-index:200 !important; }
@media (max-width:600px) {
  .extra-screen { padding:20px 18px !important; align-items:stretch; }
  .extra-screen > .extra-card,
  .extra-screen > .panic-panel {
    width:100% !important;
    max-width:none !important;
    padding:clamp(10px,3vh,28px) 4px !important;
    margin:auto 0;
  }
  .extra-screen h2 { font-size:clamp(21px,6vw,29px); }
  .extra-screen p { font-size:14px; }
  .quiz-screen .quiz-options label { padding:10px; }
  #extra15 .final-wrap { min-height:calc(100dvh - 40px); }
}
@media (max-height:650px) {
  .extra-screen { align-items:flex-start; }
  .extra-screen > .extra-card,
  .extra-screen > .panic-panel { margin:auto 0; }
}


/* Дополнительная полировка исправленных полноэкранных страниц */
.safety-note{padding:12px 14px;border:1px solid #e8b35a55;border-radius:12px;background:#e8b35a12;color:#ffe9bc!important}
.repair-video{display:block;width:min(100%,560px);max-height:30vh;object-fit:contain;margin:12px auto;border-radius:14px;background:#090909;box-shadow:0 12px 35px #0008}
#extra8 .beauty-meter{overflow:visible;position:relative}
#beautyMeterFill{position:relative;z-index:1}
.final-heart-shell{position:relative;width:clamp(150px,35vw,270px);aspect-ratio:100/90;flex:0 0 auto;isolation:isolate;animation:heartBeat 1.15s ease-in-out infinite}
#extra15 .final-heart{position:absolute;inset:0;width:100%;height:100%;z-index:2;filter:drop-shadow(0 0 12px #ffb5d9aa);animation:none}
#extra15 .final-heart path{fill:none;stroke:#fff;stroke-width:1.8;stroke-dasharray:100;stroke-dashoffset:0;animation:none}
.final-heart-photos{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;overflow:hidden;clip-path:url(#heartClip);-webkit-clip-path:url(#heartClip);background:#24121d}
.final-heart-photos img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;opacity:0;animation:finalPhotoFill .8s ease forwards;animation-delay:calc(var(--i)*90ms);filter:saturate(1.1)}
@keyframes finalPhotoFill{from{opacity:0;transform:scale(.7)}to{opacity:.96;transform:scale(1)}}
.final-float-photos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floating-memory{position:absolute;bottom:-130px;width:clamp(46px,9vw,88px);height:clamp(58px,11vw,108px);object-fit:cover;border:2px solid #fff9;border-radius:10px;box-shadow:0 8px 30px #0009;animation:memoryFly 8.5s linear forwards;opacity:0}
@keyframes memoryFly{0%{transform:translate3d(0,0,0) rotate(-12deg) scale(.7);opacity:0}12%{opacity:.8}85%{opacity:.7}100%{transform:translate3d(var(--drift),-120vh,0) rotate(18deg) scale(1.1);opacity:0}}
#extra15{isolation:isolate}#extra15 .final-wrap{position:relative;z-index:1}
#extra15 .final-heart-shell{margin:4px auto}
.extra-btn:disabled{opacity:.5;cursor:wait;filter:saturate(.65)}
@media(max-width:600px){.repair-video{max-height:24vh}.final-heart-shell{width:clamp(145px,48vw,220px)}#extra15 .lyrics{min-height:90px}}

/* Responsive final screen and dramatic over-100 analyzer state */
#extra8 .beauty-meter{overflow:visible;min-height:14px}
#beautyMeterFill{transition:width .35s ease,background-color .35s ease,box-shadow .35s ease}
#extra8.over-limit #beautyMeterFill{background:#ff263b!important;box-shadow:0 0 22px #ff263bcc; border-radius:999px}
#extra8.over-limit .beauty-score{color:#ff3348;text-shadow:0 0 22px #ff1d35}
body.beauty-over-limit{animation:screenPanic .22s linear infinite}
@keyframes screenPanic{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(2px,-1px) rotate(.12deg)}50%{transform:translate(-2px,1px) rotate(-.12deg)}75%{transform:translate(1px,2px) rotate(.08deg)}100%{transform:translate(0,0) rotate(0)}}
#extra12 .meet-card{width:min(100%,560px);min-height:0}
#extra12 .meet-photo{width:clamp(90px,22vw,150px);height:clamp(90px,22vw,150px);margin:12px auto;overflow:hidden}
#extra12 .meet-photo img{width:100%;height:100%;object-fit:cover}
#extra15{min-height:100dvh;min-height:100svh;overflow:hidden;padding:clamp(12px,3vh,28px) clamp(12px,4vw,32px)}
#extra15 .final-wrap{width:min(100%,760px);min-height:calc(100svh - 32px);gap:clamp(8px,2vh,18px);padding:10px 0}
#extra15 .final-heart-shell{width:clamp(190px,42vmin,340px);max-width:78vw}
#extra15 .lyrics{width:min(100%,620px);min-height:clamp(64px,13vh,120px);max-height:22vh;font-size:clamp(14px,2.5vh,21px);line-height:1.35}
.final-heart-photos{clip-path:path('M 50 87 C 38 77 3 54 3 28 C 3 13 14 3 27 3 C 37 3 45 8 50 16 C 55 8 63 3 73 3 C 86 3 97 13 97 28 C 97 54 62 77 50 87 Z')}
@media(max-width:600px){#extra15 .final-wrap{min-height:calc(100svh - 24px)}#extra15 .final-heart-shell{width:min(62vw,260px)}#extra15 .lyrics{min-height:64px;max-height:18vh}}

/* Финальный экран: сердце, субтитры и кнопка — отдельные элементы без наложения. */
#extra15 { overflow: hidden; min-height: 100svh; }
#extra15 .final-wrap {
  box-sizing: border-box; width: min(100% - 32px, 560px);
  min-height: 100svh; height: auto; margin: 0 auto;
  padding: clamp(16px, 4vh, 34px) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3vh, 24px); position: relative; z-index: 2;
}
#extra15 .final-heart-shell {
  position: relative; flex: 0 0 auto;
  width: min(56vw, 270px); max-width: 72vw; aspect-ratio: 100 / 90;
  margin: 0 auto; isolation: isolate;
}
#extra15 .final-heart-photos { position: absolute; inset: 0; z-index: 1; clip-path: url(#heartClip); -webkit-clip-path: url(#heartClip); }
#extra15 .final-heart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#extra15 .lyrics {
  position: relative; z-index: 3; width: 100%; min-height: 4.2em; max-height: 24svh;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 8px 14px; margin: 0; overflow: hidden; text-align: center;
  font-size: clamp(16px, 3.8vw, 25px); line-height: 1.35; font-weight: 800;
  white-space: pre-line; overflow-wrap: anywhere; text-shadow: 0 2px 12px #000;
  transition: opacity .2s ease; 
}
#extra15 .lyrics.line-out { opacity: 0; }
#extra15 #replayEnd { position: relative; z-index: 3; flex: 0 0 auto; width: min(100%, 340px); margin: 0; }
#extra15 .final-float-photos { z-index: 0; }
@media (max-height: 620px) {
  #extra15 .final-wrap { gap: 10px; padding: 10px 0; }
  #extra15 .final-heart-shell { width: min(35vh, 190px); }
  #extra15 .lyrics { min-height: 3em; max-height: 18svh; font-size: clamp(14px, 3vh, 20px); }
}
@media (max-width: 420px) {
  #extra15 .final-wrap { width: calc(100% - 28px); }
  #extra15 .final-heart-shell { width: min(58vw, 220px); }
}

/* Final heart: use the same scalable SVG clipping mask as the second slide. */
#extra15 .final-heart-photos{clip-path:url(#heartClip)!important;-webkit-clip-path:url(#heartClip)!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;overflow:hidden;}
#extra15 .final-heart-photos img{width:100%;height:100%;object-fit:cover;min-width:0;min-height:0;opacity:0;animation:finalPhotoFill .8s ease forwards;animation-delay:calc(var(--i)*90ms);}

/* ============================================================
   ПРОИЗВОДИТЕЛЬНОСТЬ (телефоны и игра)
   ============================================================ */

/* Начиная с игры фон статичный: без луча, пятен, зерна и canvas */
body.is-game .bg { animation: none; background-size: 100% 100%; }
body.is-game .beam,
body.is-game .blob,
body.is-game .grain,
body.is-game #fx { display: none !important; }

/* Телефоны / сенсорные экраны: убираем самые дорогие слои */
@media (pointer: coarse), (max-width: 820px) {
  .grain { display: none !important; }            /* большой слой с blend-mode — главный источник глитчей и лагов */
  .beam { animation: none; will-change: auto; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; }
  .blob { animation: none; will-change: auto; }
  .bg { animation: none; background-size: 100% 100%; }

  /* backdrop-filter заставляет GPU размывать фон каждый кадр */
  .hud__pill, .tut__card {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .hud__pill { background: rgba(40, 40, 40, .72); }

  /* бесконечные анимации теней перерисовываются каждый кадр */
  .extra-card, .panic-panel, .extra-btn, .agency-photo, .btn, .game-cta .btn {
    animation: none !important;
  }
  .hud.is-low .hud__pill--time { animation: none; }
}