/* ---------- мобильная вёрстка (≤767px) — подключается последней и перекрывает всё ниже ---------- */
/* на телефоне 1rem = 5vw (≈19.5px при 390px): все размеры ниже считаны под это */
@media (max-width: 767px) {

  /* ===== шапка ===== */
  .hero__body {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr); /* огонёк шире экрана не раздвигает колонку */
    padding: 3rem 0.75rem 3.2rem; /* сверху — сразу под кнопкой языка; снизу место под «Program» */
  }
  /* заголовок в две строки, крупно: «[лого] POLYBET» / «CRYPTO» */
  .hero__title { font-size: 3.7rem; }
  .hero__line { white-space: normal; line-height: 0.92; }
  .title-space { width: 100%; height: 0; display: block; } /* перенос после POLYBET */
  /* огонёк на всю высоту между «Affiliate» (сверху) и «Program» (снизу), шире экрана — по бокам у картинки пустые поля */
  .hero__mascot {
    width: auto;
    height: calc(100% - 3.4rem); /* минус отступ сверху */
    max-height: 120vw; /* видимое пламя ≈74% квадрата → ~89% ширины экрана, по бокам не режется */
    margin-top: 3.4rem; /* место под «Affiliate» */
    align-self: center;
  }
  .hero__spray-word { width: 9rem; }
  .hero__spray-word--1 { top: 10.4rem; /* сразу под заголовком, он тоже в rem */ left: 2%; transform: rotate(-10deg); }
  .hero__spray-word--2 { top: auto; bottom: 0.4rem; right: 2%; transform: rotate(-6deg); }

  /* ===== «Платим до 85%» ===== */
  /* не на весь экран: высота по содержимому + поля под монеты сверху и снизу (иначе огромная пустота до офферов) */
  .rates { height: auto; min-height: 0; padding: 8.5rem 0.5rem 8rem; }
  .rates__body { gap: 1.6rem; }
  .rates__title { font-size: 4rem; }
  .rates__spray { rotate: -4deg; }
  .rates__spray-line { width: 16.5rem; }
  .rates__spray-line--2 { width: 13rem; margin-left: 1.5rem; }
  .rates__coin--btc  { top: 5%;  left: 1%;   width: 6.5rem; }
  .rates__coin--sol  { top: 5%;  right: 1%;  width: 6.5rem; }
  .rates__coin--eth  { top: 16%; left: 27%;  width: 4rem; }
  .rates__coin--usdt { top: 15%; right: 26%; width: 4rem; }
  .rates__coin--bnb  { bottom: 5%; left: 2%;  width: 6.5rem; }
  .rates__coin--xrp  { bottom: 6%; right: 2%; width: 6.5rem; }

  /* ===== офферы ===== */
  .offers { height: auto; min-height: 0; gap: 1.5rem; padding: 3rem 0.75rem 4rem; }
  .offers__spray { width: 17rem; }
  .offers__sub-spray { width: 12rem; }
  .offers__list { gap: 1.2rem; }
  .offer__link { gap: 0.75rem; padding-block: 0.5rem; }
  .offer__name { font-size: 2.4rem; background-size: 14rem auto; }
  .offer__go { width: 2.4rem; }

  /* ===== огонёк в полный рост ===== */
  .partners__zoom { height: 180svh; }
  .partners__layer--title { padding: 9svh 0.75rem 0; }
  .partners__kicker { font-size: 2rem; }
  .partners__flame { height: auto; width: 100vw; }
  .partners__layer--spray { padding-top: 46svh; }
  .partners__spray { rotate: -8deg; }
  .partners__spray-line { width: 17rem; }
  .partners__spray-line--2 { width: 12.5rem; margin-left: 2.5rem; }

  /* ===== калькулятор ===== */
  .calc { width: calc(100vw - 1.5rem); padding: 6svh 0 10svh; }
  .calc__kicker { font-size: 0.95rem; }
  .calc__amount { font-size: 4.2rem; }
  .calc__slider { height: 4.5rem; margin-top: 2rem; }
  .calc__coin { width: 3.8rem; height: 3.8rem; }
  .calc__zone { width: 5.5rem; }
  .calc__outs { gap: 0.25rem; margin-top: 2rem; }
  .calc__out { padding: 1.4rem 0.5rem; }
  .calc__sum { font-size: 3.4rem; }
  .calc__note { width: 13rem; margin: 0.5rem auto 0; }

  /* ===== финал с мамонтом ===== */
  .join__scene { height: auto; min-height: 0; padding: 3.4rem 0.75rem 0; gap: 0.5rem; } /* фиксированные 88svh из join.css не вмещали текст и мамонта: он вылезал под землю, и ступни торчали ниже неё */
  .join__copy { padding-bottom: 0; }
  .join__tag { width: 8.5rem; margin-left: 0; }
  .join__title { font-size: 2.3rem; }
  .join__text { font-size: 0.75rem; max-width: none; margin-top: 0.8rem; }
  .join__cta { margin: 2.6rem auto 0; }
  .join__mammoth { width: 72vw; justify-self: start; }
  .join__btn-circle { display: none; } /* синяя обводка баллончиком на телефоне не нужна */
  .join__ground-shade { opacity: 0.3; } /* на телефоне земля остаётся каменной до низа, без чёрного затемнения */
}
