html{
  box-sizing: border-box;
  overflow: hidden;    /* режем всё, что вылезает за экран */
  width: 100vw;
  height: 100vh;
  font-family: "Staatliches", sans-serif;
}

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

/* Единственный веб-шрифт проекта — Staatliches (Google Fonts в index.html) */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

body{
  margin: 0;
  height: 100dvh;      /* экран */
  font-family: "Staatliches", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

#container{
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;        /* наследует 100dvh от body */
}


.bg-gradient {
  background: linear-gradient(168.18deg, #0A4881 0%, #052048 101.67%);
}
/*
  Логотип 1:1 с файлом: 348×167 px. Старт — центр экрана в «родных» пропорциях
  (на узком экране сжимается по ширине). Финал — вверху, ровно 77px по высоте, width: auto.
*/
.logo-header {
  --logo-asset-w: 348;
  --logo-asset-h: 167;
  position: absolute;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: min(348px, 100%);
  max-height: 167px;
  object-fit: contain;
  object-position: center center;
}

/* Появление лого только в центре (полёт наверх — позже с logo-lift-to-bar) */
.content.logo-visible .logo-header {
  animation: logo-intro-fade-center 0.5s ease-out forwards;
}

@keyframes logo-intro-fade-center {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* После моргания статуй: траектория из центра вверх к полосе 77px — как было в logo-enter-then-move */
@keyframes logo-move-center-to-top-bar {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: min(
      167px,
      calc(100vw * var(--logo-asset-h) / var(--logo-asset-w))
    );
    width: auto;
    max-width: 100%;
    opacity: 1;
  }

  100% {
    top: 3.7vh;
    left: 50%;
    transform: translate(-50%, 0);
    height: 77px;
    width: auto;
    max-width: 100%;
    opacity: 1;
  }
}

.content.logo-lift-to-bar.logo-visible .logo-header {
  animation: logo-move-center-to-top-bar
    var(--avia-logo-intro-lift-duration, 1.85s)
    var(--avia-logo-intro-lift-easing, ease-in-out)
    forwards;
}

@media (prefers-reduced-motion: reduce) {
  .content.logo-lift-to-bar.logo-visible .logo-header {
    animation: none;
  }
}
/* Состояние после анимации (или досрочно из JS); выше текста «FLY…» (.avia-landing-fs-overlay уровнем ниже по z-index). */
.content.logo-at-top .logo-header {
  top: 3.7vh;
  left: 50%;
  transform: translate(-50%, 0);
  width: auto;
  height: 77px;
  max-width: 100%;
  max-height: none;
  animation: none;
  opacity: 1;
  z-index: 85;
}

/*
  Интро (content--intro-play): сцена со статуями и панель Start не сдвигаются вверх —
  остаются в тех же позициях, что и при появлении после Tap.
*/
.content.content--intro-play .second-step.second-step--overlap-intro {
  transition: padding-bottom var(--avia-logo-intro-lift-duration, 1.85s)
    var(--avia-logo-intro-lift-easing, ease-in-out);
}
/* first step*/
.content{
  position: relative;
  height: 100vh;        /* тоже 100dvh */
  overflow: hidden;    /* ОБРЕЗАЕМ тучки здесь */
  /* Один тайминг на подъём лого + сцену внизу — держать в паре с LOGO_MOVE_TO_BAR_MS в script.js */
  --avia-logo-intro-lift-duration: 1.85s;
  --avia-logo-intro-lift-easing: ease-in-out;
}

.first-step {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

/* четыре угловые картинки неба из assets/img/sky */
.first-step-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.first-step-sky-img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: min(52vw, 260px);
  max-height: min(42vh, 320px);
  object-fit: contain;
  display: block;
}

.first-step-sky-img--left-top {
  top: 31vh;
  left: -10vh;
}

.first-step-sky-img--right-top {
  top: 16vh;
  right: -1vh;
}

.first-step-sky-img--left-bottom {
  bottom: 35vh;
  left: -5vh;
}

.first-step-sky-img--right-bottom {
  bottom: 38vh;
  right: -7vh;
}
/*
  Пальмы только в блоке острова (.statues-container): один слой со статуями/волнами,
  всегда в комплекте (шт. 1 — с первого экрана, шт. 2 — при игре).
*/
.statues-container > .palm-bg {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.statues-container > .statues {
  z-index: 1;
}

.statues-container > .waves-stack {
  z-index: 2;
}

/* Три строки одного SVG: каскад снизу вверх с шагом 30px + рассинхрон bob */
.waves-stack {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -67px;
  height: clamp(120px, 26vw, 200px);
  pointer-events: none;
  overflow: visible;
}

.waves-stack .waves {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0;
  bottom: 0;
  transform-origin: 50% 100%;
}

/* Ниже к воде → меньший bottom по числу px = ниже по экрану */
.waves-stack .waves--l1 {
  bottom: 0;
  z-index: 7;
  animation: avia-waves-bob-1 2.55s ease-in-out infinite;
  animation-delay: 0s;
  opacity: 0.9;
}

.waves-stack .waves--l2 {
  bottom: 20px;
  z-index: 5;
  animation: avia-waves-bob-2 3.1s ease-in-out infinite;
  animation-delay: -1.02s;
  opacity: 0.85;
}

.waves-stack .waves--l3 {
  bottom: 40px;
  z-index: 3;
  animation: avia-waves-bob-3 2.78s ease-in-out infinite;
  animation-delay: -2.06s;
  opacity: 1;
}

@keyframes avia-waves-bob-1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes avia-waves-bob-2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes avia-waves-bob-3 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .waves-stack .waves {
    animation: none;
    transform: none;
  }
}

/* первый шаг остаётся на фоне второго и третьего с прозрачностью 25% */
.first-step.first-step-as-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.25;
  pointer-events: none;
  transition: opacity var(--avia-logo-intro-lift-duration, 1.85s)
    var(--avia-logo-intro-lift-easing, ease-in-out);
}
.absolute-image{
  position: absolute;
}
@keyframes pulse-tap-icon {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.tap-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 360px;
  animation: pulse-tap-icon 1.6s ease-in-out infinite;
}
.tap-icon-text{
  font-size: 7.58vh;
  line-height: 8.29vh;
  margin-top: 1vh;
  color:#fff;
}

.statues-container {
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  transition: transform 0.85s cubic-bezier(0.28, 0.44, 0.3, 1);
}
.statues{
  bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*
  Футер шага 2: колонка .content / #container, прижат к низу (flex-end).
*/
.avia-ground-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  box-sizing: border-box;
  --avia-ground-chrome-h: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  max-height: 100%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.avia-ground-footer.avia-ground-footer--visible {
  opacity: 1;
  visibility: visible;
}

.avia-ground-footer__stage {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  z-index: 0;
}

.avia-plane-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.avia-plane-dock-anchor {
  position: absolute;
  left: calc(50% - var(--avia-plane-left-shift, 20%));
  /* Ниже на ~10% от прошлых max 120→110: нижний край фюзеляжа к линии волн */
  bottom: min(3.55vh, 25px);
  width: 0;
  height: 0;
  transform: translateX(-50%);
  pointer-events: none;
  visibility: hidden;
}

/*
  Нижняя полоса панели: по умолчанию 0 — стейдж с статуями и самолётом опущены вниз.
  Интро: при content--intro-play высота плавно 0→--avia-ground-chrome-h синхронно с лого.
  После Start (hero-actors--game) полоска держится 125px без content--intro-play.
*/
.avia-ground-footer__chrome {
  position: relative;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  height: 0;
  min-height: 0;
  max-height: var(--avia-ground-chrome-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  transition:
    height var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    min-height var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out);
}

.content.content--intro-play .avia-ground-footer.avia-ground-footer--visible .avia-ground-footer__chrome {
  height: var(--avia-ground-chrome-h);
  min-height: var(--avia-ground-chrome-h);
}

.avia-ground-footer.avia-ground-footer--visible:has(.hero-actors.hero-actors--game)
  .avia-ground-footer__chrome {
  height: var(--avia-ground-chrome-h);
  min-height: var(--avia-ground-chrome-h);
}

/* Пока самолёт в небе — панель остаётся в разметке (visible), но невидима */
.avia-ground-footer.avia-ground-flight-active .first-step-play-panel.first-step-play-panel--visible {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Big Win: полоса __chrome остаётся с opacity 0 (JS: .avia-ground-footer--big-win) */
.avia-ground-footer.avia-ground-footer--visible.avia-ground-footer--big-win .avia-ground-footer__chrome {
  opacity: 0;
  pointer-events: none;
}

.first-step-bottom-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  pointer-events: none;
}

.avia-ground-footer__chrome .first-step-play-panel.first-step-play-panel--visible {
  pointer-events: auto;
}

.second-step-scene {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.second-step.second-step--overlap-intro .second-step-scene {
  flex: 1 1 auto;
  min-height: 0;
}

/* Привязан к section.content — выше второго шага (~70) и футера со статуями (120), ниже foreground неба (125) и big-win текста (140). */
.avia-landing-fs-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--avia-fs-overlay-top, 132px);
  z-index: 123;
  padding: 22px min(24px, 5vw);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  transition: opacity 0.32s ease, visibility 0.32s;
}

.avia-landing-fs-overlay.avia-landing-fs-overlay--visible {
  visibility: visible;
  opacity: 1;
}

/* Совместно с дождём монет Big Win (z-index 105 у .avia-big-win-rain): текст над ним */
.avia-landing-fs-overlay.avia-landing-fs-overlay--sky-big-win-end.avia-landing-fs-overlay--visible {
  z-index: 140;
}

.avia-landing-fs-copy {
  font-family: 'Rubik Puddles', cursive;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #ffffff;
}

/* Три строки без <br>: ряды в колонку с плотным gap (br давал «двойной» перенос вместе с block-row). */
#avia-landing-fs-prestart.avia-landing-fs-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.19em;
  line-height: 1;
}

#avia-landing-fs-prestart.avia-landing-fs-copy .avia-landing-fs-type-row {
  line-height: 1;
}

/* После посадки: те же вертикальные строки + gap как у престарта */
#avia-landing-fs-afterland.avia-landing-fs-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.19em;
  line-height: 1;
}

#avia-landing-fs-afterland.avia-landing-fs-copy .avia-landing-fs-type-row {
  line-height: 1;
}

.avia-landing-fs-count-num {
  display: inline-block;
  min-width: 0;
}

.avia-landing-money-flame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: min(10px, 2.5vw);
  width: 100%;
  max-width: min(420px, 94vw);
  min-height: min(250px, calc(42vw + 50px));
  padding-bottom: 50px;
  margin: 0.15em auto 0;
  pointer-events: none;
}

.avia-landing-money-flame-slot {
  flex: 0 0 auto;
  width: min(140px, 42vw);
  height: min(200px, 42vw);
  transform-origin: center center;
}

/* Левый: как базовый размер, −15° */
.avia-landing-money-flame-slot--left {
  transform: rotate(-15deg);
}

/* Правый: на 25% меньше левого (scale 0.75), ниже на 50px, поворот +12° */
.avia-landing-money-flame-slot--right {
  transform: translateY(50px) scale(0.75) rotate(12deg);
}
.avia-landing-fs-type-row {
  display: block;
}

.avia-landing-fs-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.12em);
  /* Было 0.22s / 0.052s — замедлили шаги на ~40% */
  animation: avia-landing-fs-char-in 0.308s cubic-bezier(0.22, 0.85, 0.32, 1) forwards;
  animation-delay: calc(var(--c, 0) * 0.073s);
}

.avia-landing-fs-copy--instant-chars .avia-landing-fs-char {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes avia-landing-fs-char-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avia-landing-fs-char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .content.content--intro-play .second-step.second-step--overlap-intro {
    transition: none !important;
  }

  .avia-ground-footer__chrome {
    transition: none !important;
  }

  .content.content--intro-play .avia-ground-footer.avia-ground-footer--visible .avia-ground-footer__chrome,
  .avia-ground-footer.avia-ground-footer--visible:has(.hero-actors.hero-actors--game)
    .avia-ground-footer__chrome {
    height: var(--avia-ground-chrome-h) !important;
    min-height: var(--avia-ground-chrome-h) !important;
  }

  .first-step-play-panel,
  .first-step-play-panel.first-step-play-panel--visible {
    transition: none !important;
  }

  .first-step.first-step-as-background {
    transition: none !important;
  }
}

.hero-actors {
  position: relative;
  width: 100%;
  min-height: clamp(148px, 24vh, 260px);
  z-index: 0;
  pointer-events: none;
  flex-shrink: 0;
  transform: translateZ(0);
}

.hero-actors.hero-actors--game {
  z-index: 0;
}

/* Остров и пальмы — за самолётом (слой якоря) и за хром-панелью Start */
.hero-actors--game .statues-container.statues-container--slide-left-off {
  transform: translateX(-118%);
}

/* После окончания первого спина: выезд справа (JS: aviaNotifyFirstSpinComplete) */
@keyframes statues-enter-from-right {
  from {
    transform: translateX(108%);
  }
  to {
    transform: translateX(0);
  }
}

.statues-container.statues-container--enter-from-right-anim {
  animation: statues-enter-from-right 1.02s cubic-bezier(0.22, 0.85, 0.32, 1) forwards;
}

/*
  Оболочка панели без подложки. Высота нижней полосы — .avia-ground-footer__chrome (--avia-ground-chrome-h);
  содержимое не растягивает стейдж — лишнее обрезается.
*/
.first-step-play-panel {
  box-sizing: border-box;
  max-width: 500px;
  width: calc(100% - 24px);
  margin: 0 auto;
  align-self: center;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    max-height var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    visibility 0s linear var(--avia-logo-intro-lift-duration, 1.85s),
    padding var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    opacity var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out);
}

.first-step-play-panel.first-step-play-panel--visible {
  /* Не выше полосы __chrome — иначе нет плато max-height после фактической высоты контента */
  overflow: hidden;
  max-height: var(--avia-ground-chrome-h, 160px);
  visibility: visible;
  opacity: 1;
  padding: 8px 0 12px;
  pointer-events: auto;
  transition:
    max-height var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    visibility 0s linear 0s,
    padding var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    opacity var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out);
}

.first-step-play-panel__cols {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 0;
  padding: 0;
  margin-bottom: 24px;
}

.first-step-play-panel__spins {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 33px;
  line-height: 1.05;
  font-weight: 400;
  color: #f1f3ac;
  text-align: center;
  justify-self: start;
}

.first-step-play-panel__start,
.third-step .footer .third-step-footer-cta {
  box-sizing: border-box;
  font-family: 'Roboto', system-ui, sans-serif;
  text-transform: none;
  font-size: 51px;
  line-height: 1;
  min-width: 240px;
  min-height: 77px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: #f1f3ac;
  color: #062954;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.third-step .footer .third-step-footer-cta {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  width: 88%;
}

.first-step-play-panel__start:hover:not(:disabled) {
  opacity: 0.92;
}

.third-step .footer .third-step-footer-cta:hover {
  opacity: 0.92;
}

.first-step-play-panel__start:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.first-step-play-panel__terms {
  margin: 8px 0 0;
  padding: 0;
  font-size: 7px;
  line-height: 1.35;
  color: #ffffff;
  text-align: center;
  text-transform: none;
}

@media screen and (max-width: 360px) {
  .first-step-play-panel.first-step-play-panel--visible {
    width: calc(100% - 16px);
  }
}

/*
  Самолёт + дым: шлейф слева. Док без неба — position + left/top задаёт JS (aviaSyncPlaneDock) от якоря;
  здесь только смещение по X через --avia-plane-left-shift для sky-режима.
*/
.plane-wrap {
  --avia-plane-left-shift: 20%;
  position: absolute;
  top: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  z-index: 12;
  display: block;
  pointer-events: none;
  transform: translate3d(calc(-50% - 100vw - 6rem), 0, 0);
  will-change: transform;
  overflow: visible;
}

/* Fallback до первого JS-sync (иначе left без якоря) */
.plane-wrap.plane-wrap--dock-pending-sync {
  left: 50%;
  /* До первого sync: высота самолёта 110px (раньше max ~120 → чуть ниже середины диапазона) */
  bottom: clamp(128px, 21.4vh, 312px);
}

/* Корпус + дым держим вместе — JS крутит .plane-body, хвост и шлейф двигаются синхронно */
.plane-wrap .plane-body {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.plane-wrap .plane-smoke {
  position: absolute;
  right: calc(100% + 5px);
  top: 50%;
  margin-right: clamp(-4px, -0.5vw, 0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* После поворота длинная ось — вдоль шлейфа; 270deg = 90deg + 180deg */
  width: clamp(48px, 13.75vw, 119px);
  height: clamp(74px, 23.83vw, 239px);
  overflow: hidden;
  /* JSON-дым без чёрной подложки в MP4 — лёгкое смешение с фоном */
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-50%) rotate(270deg);
  transform-origin: right center;
  visibility: hidden;
}

.plane-wrap .plane-smoke svg {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
}

/* Дым включается полётом: видима + ключевая анимация «шлейф» (дрейф вдоль X, не вверх) */
.plane-wrap.plane-wrap--flying:not(.plane-wrap--landed) .plane-smoke {
  visibility: visible;
  opacity: 1;
  animation: plane-smoke-trail 2.35s cubic-bezier(0.24, 0.82, 0.38, 1) forwards;
}

.plane-wrap.plane-wrap--landed .plane-smoke {
  visibility: hidden;
  animation: none;
  opacity: 0;
}

@keyframes plane-smoke-trail {
  0% {
    transform: translateY(-50%) rotate(270deg) scale(0.82) skewX(-2deg);
    filter: brightness(1.04) saturate(1.08);
  }
  25% {
    transform: translateY(-50%) rotate(270deg) scale(1.08) translateX(-4px) skewX(0deg);
    filter: brightness(1.1) saturate(1.2);
  }
  55% {
    transform: translateY(-50%) rotate(270deg) scale(1.02) translateX(3px);
    filter: brightness(1.06) saturate(1.35);
  }
  85% {
    transform: translateY(-50%) rotate(270deg) scale(1.06) translateX(-3px);
    filter: brightness(1.05) saturate(1.22);
  }
  100% {
    transform: translateY(-50%) rotate(270deg) scale(1) translateX(0);
    filter: brightness(1) saturate(1.1);
  }
}

.plane-wrap.plane-wrap--smoke-fallback .plane-smoke {
  display: none;
}

/* Запасной шлейф без video (ошибка загрузки/кодека) — мягкое белое облако слева от корпуса */
.plane-wrap.plane-wrap--smoke-fallback.plane-wrap--flying:not(.plane-wrap--landed) .plane-body::before {
  content: '';
  position: absolute;
  right: calc(100% + 3px);
  top: 50%;
  width: clamp(82px, 23.83vw, 202px);
  height: clamp(48px, 13.75vw, 110px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 72% 58% at 68% 48%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(226, 240, 255, 0.35) 45%,
    rgba(255, 255, 255, 0) 74%
  );
  filter: blur(12px);
  transform: translateY(-50%);
  animation: plane-css-smoke-trail 2.35s cubic-bezier(0.24, 0.82, 0.38, 1) forwards;
}

@keyframes plane-css-smoke-trail {
  0% {
    transform: translateY(-50%) translateX(-2px) scale(0.9);
    opacity: 0.58;
    filter: blur(16px);
  }
  45% {
    transform: translateY(-50%) translateX(-14px) scale(1.05);
    opacity: 0.82;
    filter: blur(11px);
  }
  100% {
    transform: translateY(-50%) translateX(4px) scale(1.02);
    opacity: 0.68;
    filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plane-wrap.plane-wrap--flying:not(.plane-wrap--landed) .plane-smoke {
    animation: none;
    transform: translateY(-50%) rotate(270deg);
    opacity: 1;
    visibility: visible;
    filter: brightness(1.08) saturate(1.12);
  }

  .plane-wrap.plane-wrap--smoke-fallback.plane-wrap--flying:not(.plane-wrap--landed) .plane-body::before {
    animation: none;
    opacity: 0.72;
    transform: translateY(-50%) translateX(-4px);
  }
}

.plane {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 110px;
  object-fit: contain;
}

.plane-wrap.plane-wrap--flying {
  animation: plane-fly-land 2.35s cubic-bezier(0.22, 0.9, 0.36, 1) forwards;
  transition: none;
}

/* После интро / парковки у героев — тот же X, что финал полёта (см. --avia-plane-left-shift) */
.plane-wrap.plane-wrap--landed:not(.plane-wrap--sky-active):not(.plane-wrap--sky-landing):not(.plane-wrap--flying) {
  animation: none;
  transform: translate3d(-50%, 0, 0);
  transition:
    bottom var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out),
    left var(--avia-logo-intro-lift-duration, 1.85s)
      var(--avia-logo-intro-lift-easing, ease-in-out);
}

@keyframes plane-fly-land {
  0% {
    transform: translate3d(calc(-50% - 100vw - 6rem), -5vh, 0);
  }
  74% {
    transform: translate3d(-50%, -1.4vh, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plane-wrap.plane-wrap--flying {
    animation: none;
    transform: translate3d(-50%, 0, 0);
  }

  .plane-wrap.plane-wrap--landed:not(.plane-wrap--sky-active):not(.plane-wrap--sky-landing):not(.plane-wrap--flying) {
    transition: none;
  }
}

.button,
.button-bonus{
  color:#fff;
  z-index: 1;
  border-radius: 50%;
  padding: 2vh;
  cursor: pointer;
  width: 167px;
  max-width: 167px;
  height: 167px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: center;
  gap: 0;
  border:12.43px solid #FCBC3A;
  background: #140126;
  color:#17EBDF;
  margin: 0 auto 2vh auto;
  text-decoration: unset;
  transition: all 1s ease;
  animation: pulse-btn 1.6s ease-in-out infinite;
}

/* Second step CTA (.button-bonus): main line 48px, sub line 16px */
.second-step .button-bonus-main {
  font-size: 48px;
  line-height: 1.2;
  display: block;
  position: relative;
  z-index: 1;
}
.second-step .button-bonus-spins {
  font-size: 16px;
  line-height: 1.2;
  display: block;
  opacity: 0.95;
  position: relative;
  z-index: 1;
  margin-top: -5px;
  color:#fff;
}
/* Спин / ожидание бонуса: только прозрачность, без белой подложки (цвета те же, только слабее) */
.second-step .button-bonus.button-bonus-spinning,
.second-step .button-bonus.button-bonus-bonus-counting {
  position: relative;
  pointer-events: none;
  opacity: 0.55;
  animation: pulse-btn 0.8s ease-in-out infinite;
}
/* Fallback for .button-bonus without spans */
.button-bonus {
  font-size: 4.74vh;
}
@keyframes pulse-btn {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.button.active {
  background-color: #69A059;
  transform: scale(1);
  animation: none;
}
.button-description{
  font-size:7px;
  margin-top: 18px;
  color: #fff;
  position: relative;
  z-index: 10;
  max-width: 342px;
  margin-left: auto;
  margin-right: auto;
}

/* Шаг 3 — колонка: центральный блок (текст + абсолютный hero) */
.third-step {
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 1;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
  overflow-y: visible;
}

/* Шаг 3: дозволити вертикальний скрол усередині .content на низьких екранах */
.content.content--third-step {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Две верхние «тучки» как на первом шаге (sky-left/right-top); под mid-stack, видны через прозрачную верхнюю зону */
.third-step-sky-corners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.third-step-sky-corner-img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: min(52vw, 260px);
  max-height: min(42vh, 320px);
  object-fit: contain;
  display: block;
}

.third-step-sky-corner-img--left-top {
  top: 31vh;
  left: -10vh;
}

.third-step-sky-corner-img--right-top {
  top: 16vh;
  right: -1vh;
}

.third-step-mid-stack {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: min(260px, 40vh);
  overflow: visible;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Сумма FS сразу над кнопкой: 50px от верха кнопки до блока текста */
.third-step-reward-slot {
  flex-shrink: 0;
  position: relative;
  z-index: 55;
  width: 100%;
  padding: 0 16px;
  margin-bottom: clamp(16px, 4vh, 50px);
  box-sizing: border-box;
  text-align: center;
}

.third-step-hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  flex: unset;
  min-height: clamp(200px, 36vh, 400px);
  height: clamp(220px, 40vh, 440px);
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.third-step-hero-confetti-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(2);
  transform-origin: center center;
}

.third-step-hero-confetti-bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.third-step-hero-clouds,
.third-step-hero-girl {
  position: absolute;
  left: 50%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Облака / девушка в mid-stack (награда над кнопкой, вне mid-stack) */
.third-step-hero-clouds {
  bottom: -48px;
  top: auto;
  left: 0;
  /* 600px по ширине, центр через margin как у прежних туч (flow-сдвиг); при узкой колонке выходит за края hero, режется .third-step */
  --third-step-hero-clouds-w: 600px;
  width: var(--third-step-hero-clouds-w);
  max-width: none;
  z-index: 3;
  transform: translateY(0);
  margin-left: calc(50% - var(--third-step-hero-clouds-w) / 2);
  margin-right: 0;
}

/* Девушка под облаками, заходит снизу в облака на ~80px */
.third-step-hero-girl {
  bottom: 0;
  top: auto;
  width: 390px;
  max-height: min(52vh, 420px);
  object-fit: contain;
  z-index: 1;
  transform: translate(-50%, -80px);
}

/* Контент шага 3: сумма FS (над кнопкой) */
.third-step-reward-line {
  font-size: 75px;
  line-height: 1.1;
  margin: 0 auto;
  color: #f1f3ac;
  text-align: center;
  margin-top: -8px;
}

.third-step .footer {
  position: sticky;
  bottom: 0;
  z-index: 200;
  margin-top: 0;
  margin-bottom: 0;
  min-height: clamp(68px, 12vh, 85px);
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  opacity: 1;
  transition: opacity 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

@media (max-height: 700px) {
  .third-step-mid-stack {
    min-height: min(200px, 32vh);
  }

  .third-step-hero {
    height: clamp(160px, 32vh, 360px);
    min-height: clamp(140px, 28vh, 320px);
  }

  .third-step-hero-girl {
    max-height: min(42vh, 320px);
    transform: translate(-50%, -50px);
  }

  .third-step-reward-line {
    font-size: clamp(48px, 10vh, 75px);
  }

  .first-step-play-panel__start,
  .third-step .footer .third-step-footer-cta {
    font-size: clamp(36px, 8vw, 51px);
    min-height: clamp(60px, 10vh, 77px);
  }
}

.third-step .footer.footer-visible {
  opacity: 1;
}

.third-step .button-description {
  display: none;
  font-size: 7px;
  z-index: 10;
  position: absolute;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: 88%;
  left: 0;
  right: 0;
  margin: auto;
  color: #000;
}

/*
  Шаг 2 / небо: #second-step — сцена игры по площади .content (колонка #container max-width).
  Самолёт и футер — отдельные деревья, тоже внутри .content в index.html.
*/
.second-step {
  display: none;
}

.second-step.second-step--overlap-intro {
  display: flex;
  position: absolute;
  inset: 0;
  bottom: 0;
  z-index: 70;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: visible;
  min-height: 0;
  pointer-events: none;
}

/*
  Полноэкранно снизу как интро-слой: без отдельного margin-top — статуи остаются на одной линии;
  только transform translateX у .statues-container двигает фигуры в стороны.
*/
.second-step.step-visible {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
  box-sizing: border-box;
}

/* Посадка: самолёт ещё в viewport — поднять слой выше футера (120), иначе рисуется за статуями */
.second-step.step-visible.second-step--sky-plane-foreground {
  z-index: 125;
  pointer-events: none;
}

.second-step.step-visible.second-step--sky-plane-foreground .sky-game-viewport {
  pointer-events: none !important;
}

.second-step.step-visible .second-step-scene {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  transition: none;
}

/* ——— Небесная мини-игра ——— */
.sky-game-host {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

.second-step--sky-active.second-step.step-visible .second-step-scene {
  position: relative;
}

.sky-game-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  pointer-events: auto;
}

.sky-game-viewport:active {
  cursor: grabbing;
}

/* Подсказка «водить по вертикали» после каждого Start раунда: палец 120px, без текста */
.sky-game-drag-hint {
  position: absolute;
  inset: 0;
  z-index: 56;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sky-game-drag-hint[hidden] {
  display: none !important;
}

.sky-game-drag-hint__inner {
  position: relative;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sky-game-drag-hint__finger {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

@keyframes sky-game-drag-hint-nudge {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.sky-game-drag-hint__inner.sky-game-drag-hint__inner--run {
  animation: sky-game-drag-hint-nudge 1.5s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sky-game-drag-hint__inner.sky-game-drag-hint__inner--run {
    animation: none;
  }
}

.sky-game-clouds,
.sky-game-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-game-cloud {
  position: absolute;
  right: 0;
  height: auto;
  max-width: min(44vw, 220px);
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 3px 10px rgba(20, 45, 85, 0.25));
}

.sky-game-icon {
  position: absolute;
  right: 0;
  z-index: 15;
}

.sky-game-icon img {
  display: block;
  height: clamp(39.6px, 11vw, 61.6px);
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.sky-game-boom {
  position: absolute;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  pointer-events: none;
  z-index: 50;
}

.plane-wrap.plane-wrap--sky-active {
  /* Тот же X, что док — когда нет инлайнового left (взлёт/посадка задают JS где нужно) */
  left: calc(50% - var(--avia-plane-left-shift));
  bottom: auto;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
  z-index: 40;
}

/* Свободный полёт между взлётом и посадкой — строго по центру колонки */
.plane-wrap.plane-wrap--sky-active.plane-wrap--sky-flight-center {
  left: 50% !important;
}

.plane-wrap.plane-wrap--sky-active .plane-body {
  transform-origin: 52% 48%;
  /* Короткая интерполяция между читаемыми целями; крупную сглаживание даёт tween в JS */
  transition: transform 0.22s ease-out;
}

.plane-wrap.plane-wrap--sky-active .plane-smoke {
  visibility: visible;
  opacity: 1;
  animation: none;
  transform: translateY(-50%) rotate(270deg);
  mix-blend-mode: lighten;
  filter: brightness(1.06) saturate(1.12);
}

.plane-wrap.plane-wrap--sky-landing {
  left: calc(50% - var(--avia-plane-left-shift)) !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  /* top задаёт sky-game.js от текущей высоты до той же Y, что у дока перед вылетом */
}

.avia-plane-layer .plane-wrap.plane-wrap--dock-reveal-off {
  visibility: hidden;
}

.statues-container.statues-container--sky-round-center {
  z-index: 12;
}

/* Big Win: дождь монет между небом игры и героями; без затемнения; текст — отдельно выше по z-index */
.avia-big-win-rain {
  position: absolute;
  inset: 0;
  z-index: 105;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.avia-big-win-rain--visible {
  opacity: 1;
  /* Ниже середины острова (.statues) — без монет; --avia-big-win-rain-clip-bottom задаёт sky-game.js */
  clip-path: inset(0 0 var(--avia-big-win-rain-clip-bottom, 0px) 0);
}

.avia-big-win-overlay {
  position: absolute;
  inset: 0;
  z-index: 135;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.avia-big-win-overlay--visible {
  opacity: 1;
}

.avia-big-win-title {
  position: relative;
  z-index: 2;
  font-family: 'Staatliches', Impact, sans-serif;
  font-size: clamp(42px, 12vw, 88px);
  color: #fcbc3a;
  text-shadow: 0 4px 0 #062954, 0 6px 24px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
}

.avia-big-win-lottie {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.avia-big-win-lottie svg {
  width: 100%;
  height: 100%;
}