/* ============================================================
   SITEGO / ALACHINGA — колесо удачи. Mobile-first.
   Все пропорции колеса — в :root (--k-*). Правь их, а не разметку.
   Калибровка по макету из Фигмы: открой index.html?debug=1
   ============================================================ */

/* TT Firs — сконвертирован из твоих .otf в woff2 (по 30 КБ вместо 112) */
@font-face {
  font-family: 'TT Firs';
  src: url('../fonts/tt-firs-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Firs';
  src: url('../fonts/tt-firs-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Firs';
  src: url('../fonts/tt-firs-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* шрифты */
  --f-main:  'TT Firs', 'Segoe UI', Roboto, system-ui, sans-serif;
  --f-bonus: Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;

  /* палитра — под арт из Фигмы меняется тут */
  --c-bg:    #0B0B18;
  --c-bg2:   #1A1330;
  --c-gold:  #FFC542;
  --c-gold2: #B87200;
  --c-pink:  #FF3D8B;
  --c-text:  #FFFFFF;

  /* размер колеса */
  --wheel: min(92vw, 520px);

  /* ---- ПРОПОРЦИИ КОЛЕСА (доли от квадрата .wheel = wheel-base) ----
     Посчитано из реальных пикселей ассетов: base 1231, disc 1108,
     hub 400, lamp 41. Проверять с ?debug=1                         */
  --k-disc:        .900;  /* диск с секторами            */
  --k-frame:       .960;  /* рамка-кольцо (сейчас нет)   */
  --k-glow:        .900;  /* подсветка сектора = диск    */
  --k-hub:         .325;  /* ступица-кнопка              */
  --k-lamp-r:      .464;  /* радиус кольца ламп (ближе к диску, не трогает кант) */
  --k-lamp-w:      .026;  /* размер лампы                */

  /* ---- ОВЕРЛЕЙ: кольцо + лого + рамка сектора (wheel-pointer.png)
     Картинка 1250x1250, кольцо вписано и отцентровано:
     аппроксимация окружности даёт центр (624.2, 623.8) при центре
     канваса (625, 625). Значит слой просто кладётся на квадрат колеса
     один в один, без сдвигов.                                         */
  --k-pointer-w:    1;
  --k-pointer-left: 0;
  --k-pointer-top:  0;
  --k-pointer-cx:   50%;   /* центр колеса внутри картинки, для вспышки */
  --k-pointer-cy:   50%;

  /* ---- ЛЕЙБЛЫ (доли от размера ДИСКА) ---- */
  --k-label-r:     .345;  /* радиус центра лейбла        */
  --k-label-w:     .190;  /* ширина лейбла               */

  /* ---- ПЛАШКА ПОПЫТОК (доли от размера колеса) ---- */
  --k-pips-w:      .420;
  --k-pips-out:    .62;   /* доля плашки, торчащая ниже колеса */

  --ease-pop: cubic-bezier(.2, 1.5, .4, 1);
}

html { background: var(--c-bg); }

body {
  font-family: var(--f-main);
  color: var(--c-text);
  overflow-x: hidden;
}

.stage { position: relative; overflow: hidden; }

/* ---------- ФОН ----------
   Живёт внутри .hero и скроллится вместе с ним, а не висит фиксировано. */
.bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--c-bg2) 0%, var(--c-bg) 62%),
    var(--c-bg);
  background-size: cover;
  background-position: center;
}
/* background-image ставится инлайном из main.js */
.bg.has-img { background-color: var(--c-bg); background-position: top center; }

/* Подсветки поверх фоновой картинки нет — фон показываем как нарисован */
.bg-glow { display: none; }

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

/* ---------- ДЕКОР ФОНА: облака и элементы игры ---------- */
.decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.decor .d { position: absolute; will-change: transform; }
.d-cloud-l { left: -8%;  top: -6%;  width: 58vw; animation: drift1 26s ease-in-out infinite; }
.d-cloud-r { right: -6%; top: 34%;  width: 46vw; animation: drift2 32s ease-in-out infinite; }
.d-el-l    { left: -4%;  top: 44%;  width: 20vw; animation: bob1 9s ease-in-out infinite; }
.d-el-r    { right: 6%;  top: 6%;   width: 14vw; animation: bob2 11s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(2.5%, 1.6%) } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-2.5%, -2%) } }
@keyframes bob1 { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-4%) rotate(3deg) } }
@keyframes bob2 { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(5%) rotate(-4deg) } }

/* ---------- ГЕРОЙ ---------- */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: 16px 16px 32px;
  text-align: center;
  background: var(--c-bg);
}
.scene { position: relative; z-index: 2; }

/* лого 1win над колесом, по центру */
.head-logo {
  position: relative; z-index: 2;
  width: calc(var(--wheel) * .30);
  height: auto;
  margin-bottom: calc(var(--wheel) * .12);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}

/* ---------- СЦЕНА (персонаж + колесо) ---------- */
.scene {
  position: relative;
  width: 100%;
  display: flex; justify-content: center;
  margin-top: calc(var(--wheel) * .09);
}

.char {
  position: absolute; z-index: 0;
  left: 50%; bottom: -2%;
  width: calc(var(--wheel) * 1.5);
  translate: -50% 0;
  pointer-events: none;
  aspect-ratio: 7 / 10;
}
.char img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  transform-origin: 50% 100%;
}
/* один файл (png/gif) — не растягиваем в коробку, ставим как есть */
.char.single { aspect-ratio: auto; }
.char.single img { position: static; width: 100%; height: auto; }
.char img:nth-child(1) { animation: idle1 5.5s ease-in-out infinite; }
.char img:nth-child(2) { animation: idle2 4.2s ease-in-out infinite; }
.char img:nth-child(3) { animation: idle3 3.4s ease-in-out infinite; }
@keyframes idle1 { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-1.2%) rotate(.5deg) } }
@keyframes idle2 { 0%, 100% { transform: translateY(0) rotate(-.8deg) } 50% { transform: translateY(-2.2%) rotate(.8deg) } }
@keyframes idle3 { 0%, 100% { transform: translateY(0) rotate(1.4deg) } 50% { transform: translateY(-1.6%) rotate(-1.4deg) } }
.char.win img { animation: charWin .6s var(--ease-pop) 2; }
@keyframes charWin { 0%, 100% { scale: 1 } 40% { scale: 1.06 } }

.wheel-wrap { position: relative; z-index: 1; }

/* ---------- КОЛЕСО ---------- */
.wheel {
  position: relative;
  width: var(--wheel); height: var(--wheel);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.wheel.is-spinning { animation: none; }

/* центрирующий хелпер: слой шириной k, ровно по центру квадрата */
.w-base, .w-rot, .w-glow, .w-frame, .w-hub, .w-lamps, .w-debug {
  position: absolute;
}
.w-base  { width: 100%; left: 0; top: 0; }
.w-lamps { inset: 0; }
.w-rot   { width: calc(100% * var(--k-disc));  left: calc(50% - 50% * var(--k-disc));  top: calc(50% - 50% * var(--k-disc));  aspect-ratio: 1; will-change: transform; }
.w-glow  { width: calc(100% * var(--k-glow));  left: calc(50% - 50% * var(--k-glow));  top: calc(50% - 50% * var(--k-glow));  opacity: 0; transition: opacity .45s; pointer-events: none; }
.w-frame { width: calc(100% * var(--k-frame)); left: calc(50% - 50% * var(--k-frame)); top: calc(50% - 50% * var(--k-frame)); pointer-events: none; }
.w-hub   { width: calc(100% * var(--k-hub));   left: calc(50% - 50% * var(--k-hub));   top: calc(50% - 50% * var(--k-hub));   aspect-ratio: 1; z-index: 6; }
.w-debug { inset: 0; z-index: 20; pointer-events: none; }

.w-disc { width: 100%; }
.w-glow.on { opacity: 1; animation: glowPulse 1.1s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* лейблы секторов */
.w-labels { position: absolute; inset: 0; }
.w-lbl { position: absolute; inset: 0; }
.w-lbl img {
  position: absolute; left: 50%;
  top: calc(50% - 100% * var(--k-label-r));
  width: calc(100% * var(--k-label-w));
  transform: translate(-50%, -50%) rotate(var(--upright, 0deg));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

/* лампы */
.w-lampr { position: absolute; inset: 0; }
.w-lampr img {
  position: absolute; left: 50%;
  top: calc(50% - 100% * var(--k-lamp-r));
  width: calc(100% * var(--k-lamp-w));
  transform: translate(-50%, -50%);
}
/* лампы горят всегда, по кругу бежит тёмное пятно — как в макете */
.w-lampr .on { opacity: 1; animation: chase 1.8s linear infinite; animation-delay: var(--d); }
@keyframes chase { 0%, 12% { opacity: .15 } 26%, 100% { opacity: 1 } }
.wheel.is-spinning .w-lampr .on { animation-duration: .6s; }
.wheel.win .w-lampr .on { animation: blink .35s steps(1) infinite; animation-delay: var(--d2); }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* оверлей: внешнее кольцо + лого + рамка выигрышного сектора, одним слоем */
.w-pointer-wrap {
  position: absolute; z-index: 8;
  left: calc(100% * var(--k-pointer-left));
  top: calc(100% * var(--k-pointer-top));
  width: calc(100% * var(--k-pointer-w));
  pointer-events: none;
}
/* origin = центр колеса внутри картинки, чтобы вспышка не «съезжала» */
.w-pointer {
  width: 100%;
  transform-origin: var(--k-pointer-cx) var(--k-pointer-cy);
  will-change: transform, filter;
}
.wheel.win .w-pointer { animation: markWin 1.1s ease-in-out infinite; }
@keyframes markWin {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 220, 120, 0)) }
  50%      { filter: brightness(1.18) drop-shadow(0 0 16px rgba(255, 220, 120, .5)) }
}

/* ступица-кнопка */
.w-hub-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.w-hub-txt {
  position: relative; z-index: 2;
  display: grid; place-items: center; height: 100%;
  font-weight: 900; text-transform: uppercase;
  font-size: calc(var(--wheel) * .036);
  line-height: 1; padding: 0 8%;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.w-hub { transition: transform .12s, filter .2s; filter: drop-shadow(0 0 0 rgba(255, 197, 66, 0)); }
.w-hub::after {
  content: ''; position: absolute; inset: -8%;
  border-radius: 50%; border: 2px solid rgba(255, 197, 66, .7);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring { 0% { scale: 1; opacity: .8 } 100% { scale: 1.5; opacity: 0 } }
.w-hub:active, .w-hub.is-press { transform: scale(.94); }
.w-hub[disabled] { cursor: default; filter: grayscale(.5) brightness(.75); }
.w-hub[disabled]::after { display: none; }

/* debug-сетка калибровки */
.w-debug svg { width: 100%; height: 100%; }

/* ---------- БАННЕР РЕЗУЛЬТАТА ---------- */
.banner {
  position: absolute; z-index: 10;
  left: 50%; top: -13%;
  translate: -50% 0;
  min-width: 66%; white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1F0B32, #2C0645);
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .3s, scale .45s var(--ease-pop);
}
.banner.show { opacity: 1; scale: 1; }
.banner-t { font-size: clamp(18px, 5vw, 26px); font-weight: 900; text-transform: uppercase; line-height: 1; }
.banner-s { font-size: clamp(11px, 3vw, 13px); opacity: .85; }

/* ---------- ПЛАШКА ПОПЫТОК (поверх нижней кромки колеса) ---------- */
.pips {
  position: absolute; z-index: 9;
  left: 50%; top: 100%;
  width: calc(var(--wheel) * var(--k-pips-w));
  translate: -50% calc(-100% * (1 - var(--k-pips-out)));
  aspect-ratio: 506 / 211;
  display: grid; align-content: center; justify-items: center;
  gap: 6%;
}
.pips-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pips-l {
  position: relative;
  font-size: calc(var(--wheel) * .028); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.pips-d { position: relative; display: flex; gap: 12%; width: 62%; justify-content: space-between; }
.pips-d span { position: relative; display: block; width: calc(var(--wheel) * .034); aspect-ratio: 1; }
.pips-d img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.pips-d .on { opacity: 1; }
.pips-d span.used .on { opacity: 0; }

/* ---------- БОНУС-БЛОК ----------
   Все координаты — доли от макета 2560x740, поэтому блок
   масштабируется целиком и ничего не разъезжает.            */
.bonus { position: relative; width: 100%; background: var(--c-bg); }
.bonus-in {
  position: relative;
  width: 100%; max-width: 2560px; margin: 0 auto;
  aspect-ratio: 2560 / 740;
  overflow: hidden;
  container-type: inline-size;   /* даёт cqw — доли ширины блока, не окна */
}
.bonus-in img { position: absolute; }

/* Координаты сняты с bonus-ref.png (2560x740) сопоставлением слоёв */
.b-cloud-l { left: 0;      top: 7.70%;  width: 18.36%; animation: drift1 24s ease-in-out infinite; }
.b-cloud-r { left: 69.69%; top: 3.38%;  width: 30.31%; animation: drift2 28s ease-in-out infinite; }
.b-sc2     { left: 56.95%; top: 36.62%; width: 14.53%; animation: bob2 7.5s ease-in-out infinite; }
.b-sc1     { left: 50.55%; top: 35.68%; width: 13.71%; animation: bob1 6s ease-in-out infinite; }
.b-zeus    { left: 44.57%; top: 0;      width: 55.43%; }

.b-copy { position: absolute; inset: 0; }
.b-t1, .b-t2 {
  position: absolute; left: 19.07%;
  font-family: var(--f-bonus);
  font-size: 5.55cqw;   /* испанская строка длиннее русской — чуть мельче, чтобы не лезть на корону */
  line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFFFFF 46%, #9BA1AC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  white-space: nowrap;
}
.b-t1 { top: 16.05%; }
.b-t2 { top: 42.44%; }
.b-t1 i { font-style: normal; }
.b-a { margin-right: .22em; }

.b-badge { position: absolute; transition: transform .15s, filter .15s; }
.b-badge img { position: static; width: 100%; height: auto; }
#badgeApple  { left: 19.06%; top: 72.03%; width: 16.64%; }
#badgeGoogle { left: 37.46%; top: 71.62%; width: 18.75%; }
.b-badge:hover { transform: translateY(-3px); filter: brightness(1.12); }

/* ---------- ФУТЕР ----------
   Координаты сняты с footer-ref.png (2560x262).            */
.foot { width: 100%; background: var(--c-bg); }
.foot-in {
  position: relative;
  width: 100%; max-width: 2560px; margin: 0 auto;
  aspect-ratio: 2560 / 262;
  background: url('../img/bg-footer.jpg') center / cover no-repeat, var(--c-bg);
  container-type: inline-size;
  overflow: hidden;
}
.foot-resp {
  position: absolute; left: 19.41%; top: 31.30%;
  display: flex; flex-direction: column;
  font-size: 1.556cqw;   /* подогнано по ширине строки из footer-ref */
  line-height: 1.156;    /* межстрочный шаг 46px на макете 2560 */
  color: rgba(255, 255, 255, .74);
  white-space: nowrap;
}
.foot-logo {
  position: absolute; left: 67.15%; top: 14.89%;
  width: 14.02%; height: auto;
}

/* ---------- ПОПАП ---------- */
.pop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(8, 2, 16, .78);
  backdrop-filter: blur(6px);
  animation: fadeIn .3s ease;
}
.pop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Координаты сняты с popup-ref.png (1050x532) */
.pop-box {
  position: relative;
  width: min(1050px, 92vw);
  aspect-ratio: 1050 / 532;
  container-type: inline-size;
  animation: popIn .5s var(--ease-pop);
}
@keyframes popIn { from { scale: .6; opacity: 0 } to { scale: 1; opacity: 1 } }

.pop-panel { position: absolute; inset: 0; width: 100%; height: 100%; }

.pop-t1, .pop-t2 {
  position: absolute; left: 50%; translate: -50% 0;
  font-family: var(--f-bonus);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.pop-t1 { top: 10.97%; font-size: 9.58cqw; color: #fff; }
.pop-t2 {
  top: 34.09%; font-size: 9.58cqw;
  background: linear-gradient(180deg, #FFFFFF 46%, #9BA1AC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pop-btn {
  position: absolute; left: 13.71%; top: 61.09%; width: 72.57%;
  display: block; line-height: 0;
  animation: ctaPulse 1.9s ease-in-out infinite;
}
.pop-btn img { position: absolute; inset: 0; width: 100%; height: auto; }
.pop-btn .pop-btn-up   { position: static; }
.pop-btn .pop-btn-down { opacity: 0; transition: opacity .12s; }
/* .is-press вешает JS по pointerdown — iOS не отдаёт :active без обработчика касания.
   Нажатие показываем мгновенно, плавно только отпускание — так отзывчивее на тап. */
.pop-btn:active .pop-btn-down,
.pop-btn.is-press .pop-btn-down { opacity: 1; transition: none; }
.pop-btn:active, .pop-btn.is-press { animation: none; }
@keyframes ctaPulse { 0%, 100% { scale: 1 } 50% { scale: 1.035 } }

/* ---------- КОНФЕТТИ ---------- */
.fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/* ============================================================
   MOBILE  (до 899px) — по мобильному макету
   ============================================================ */
@media (max-width: 899px) {
  :root { --wheel: min(92vw, 560px); }

  .hero { padding: 18px 0 26px; }
  .head-logo { width: calc(var(--wheel) * .34); margin-bottom: calc(var(--wheel) * .10); }

  /* Зевс уходит за левый край, как в макете */
  .char {
    width: calc(var(--wheel) * .90);
    left: calc(50% - var(--wheel) * .40);
    bottom: calc(var(--wheel) * -.02);
  }

  .pips { width: calc(var(--wheel) * .58); }
  .pips-l { font-size: calc(var(--wheel) * .036); }
  .pips-d span { width: calc(var(--wheel) * .044); }

  .banner { top: -11%; min-width: 78%; padding: 8px 16px; }

  /* ---- БОНУС-БЛОК: колонка, бейджи друг под другом ---- */
  .bonus-in {
    aspect-ratio: auto;
    min-height: 90vw;
    padding: 6.2vw 0 8vw;
  }
  .b-cloud-l { left: -16%; top: 4%;   width: 52%; }
  .b-cloud-r { left: 44%;  top: -8%;  width: 76%; }
  .b-sc1     { left: 52%;  top: 6%;   width: 21%; }
  .b-sc2     { left: 58%;  top: 15%;  width: 22%; }
  /* Зевс занимает правую колонку во всю высоту блока. Ассет — поясной кроп
     в широком канвасе, поэтому вписываем его в колонку через object-fit. */
  /* Текущий ассет — поясной кроп в широком канвасе, поэтому масштаб такой,
     чтобы пропорции были живые. Когда появится ростовой bonus-zeus-mobile.png,
     он подхватится и встанет по правой колонке во всю высоту. */
  .b-zeus { left: 21%; top: auto; bottom: 0; width: 117%; height: auto; max-width: none; }
  /* Ростовой Зевс: цифры из альфа-бокса ассета (контент 458x918 в канвасе
     826x1196) и его положения на BONOS_PREVIEW. */
  .b-zeus.is-tall {
    left: 39.7%; right: auto; top: auto; bottom: -3.5%;
    width: 78.6%; height: auto;
  }

  /* Текстовый фрейм: колонка 48% ширины, все строки и бейджи по ней ровно.
     Кегль каждой строки подгоняет JS (fitBonusText) — иначе испанские
     строки разной длины дают разную ширину. */
  .b-copy {
    position: relative; z-index: 2;   /* иначе облака перекрывают бейджи и глотают тапы */
    padding: 0 46.8% 0 5.2%;
  }
  .b-t1, .b-t2 {
    position: static; left: auto; top: auto;
    display: block; width: max-content; line-height: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8));
  }
  /* градиент на каждую строку отдельно, иначе один общий растягивается
     на весь блок и вторая строка получается тёмно-серой */
  .b-t1 i {
    display: block; width: max-content; margin-right: 0;
    background: linear-gradient(180deg, #FFFFFF 46%, #9BA1AC 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .b-b  { margin-top: 3.4vw; }
  .b-t2 { margin-top: 5.5vw; }

  .b-badges { display: block; }
  .b-badge, #badgeApple, #badgeGoogle {
    position: static; display: block;
    left: auto; top: auto; width: 100%;
    margin-top: 3.6vw;
  }
  #badgeApple { margin-top: 6.9vw; }

  /* ---- ФУТЕР: текст переносится, лого справа ---- */
  .foot-in {
    aspect-ratio: auto;
    display: flex; align-items: center; gap: 4%;
    padding: 5vw 5vw;
  }
  .foot-resp {
    position: static; flex: 1; min-width: 0;
    font-size: 3.1cqw; line-height: 1.45;
    white-space: normal;
  }
  .foot-logo { position: static; flex: none; width: 26%; }
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 900px) {
  :root { --wheel: min(52vh, 560px); }

  .head { padding: 20px 40px 0; justify-content: flex-start; }
  .head-logo img { height: 52px; }

  .hero { padding: 0 40px 50px; min-height: calc(100vh - 92px); justify-content: center; }
  .hero-title { margin-bottom: 6px; }
  /* Как в макете: Зевс слева за колесом, ступни на 0.10 ниже кромки,
     макушка на 0.034 выше верха колеса.
     Цифры учитывают пустое поле в character.gif (контент 383x716 в канвасе 535x879). */
  .char {
    width: calc(var(--wheel) * .875);
    left: calc(50% - var(--wheel) * .5163);
    bottom: calc(var(--wheel) * -.101);
  }
}

@media (min-width: 1200px) {
  :root { --wheel: min(58vh, 620px); }
}

/* очень низкие экраны */
@media (max-height: 700px) and (min-width: 900px) {
  :root { --wheel: min(48vh, 460px); }
}