/*
 * Лендинг «Везёт с ПОБЕДОЙ!» — по макетам 1440 / 768 / 360.
 * Десктоп ≥ 1200px, планшет 768–1199px, телефон < 768px.
 * Шрифт — Stolzl: Book (400), Medium (500), Bold (700), файлы в ../fonts.
 * Тени (box-shadow) не используем — см. README, «Оформление».
 */

@font-face { font-family: 'Stolzl'; src: url('../fonts/stolzl-book.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Stolzl'; src: url('../fonts/stolzl-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Stolzl'; src: url('../fonts/stolzl-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --pb-red: #fe0000;
  --pb-green: #00a400;
  --pb-text: #111;
  --pb-muted: #3c3c3c;
  --pb-font: 'Stolzl', system-ui, sans-serif;
  --pb-header: 72px;
}

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

/* ничего не должно давать горизонтальную прокрутку («белая полоса справа» на телефонах) */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--pb-header); }

body.pb {
  margin: 0;
  background: #fff;
  color: var(--pb-text);
  font-family: var(--pb-font);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  /* overflow-x не задаём: с overflow-x: clip у html он сделал бы body отдельной областью прокрутки
     и сломал липкую шапку (position: sticky) */
}

/* Сброс через :where — нулевая специфичность, классы компонентов его перекрывают */
:where(.pb) img { display: block; max-width: none; }
:where(.pb) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.pb) :where(ul, ol) { list-style: none; }
:where(.pb) a { color: inherit; text-decoration: none; }
.pb a:focus-visible, .pb button:focus-visible, .pb summary:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }

.pb-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 80px; }
.pb-center { display: flex; justify-content: center; }
.pb-nowrap { white-space: nowrap; }
.pb-br-mobile, .pb-br-tablet { display: none; }
.pb-br-wide { display: inline; }

/* ── Кнопки ─────────────────────────────────────────────── */

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  min-width: 196px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
/* Состояния — по UI-киту: Default / Hover / Disabled */
.pb-btn--red { background: var(--pb-red); color: #fff; }
.pb-btn--red:hover { background: #cc0000; }
.pb-btn--red:active { background: #b30000; }
.pb-btn--white { background: #fff; color: var(--pb-red); }
.pb-btn--white:hover { color: #cc0000; }
.pb-btn--white:active { background: #f2f2f2; }
.pb-btn--green { background: var(--pb-green); color: #fff; border-radius: 8px; }
.pb-btn--green:hover { background: #008a00; }
.pb-btn--green:active { background: #007a00; }
.pb-btn:is(:disabled, [aria-disabled="true"], .is-disabled) { pointer-events: none; cursor: default; }
.pb-btn--red:is(:disabled, [aria-disabled="true"], .is-disabled) { background: #a32424; color: rgba(255, 255, 255, .45); }
.pb-btn--white:is(:disabled, [aria-disabled="true"], .is-disabled) { background: #a3a3a3; color: rgba(204, 0, 0, .75); }
.pb-btn--green:is(:disabled, [aria-disabled="true"], .is-disabled) { background: #237a23; color: rgba(255, 255, 255, .45); }
.pb-btn--lg { width: 240px; height: 60px; font-size: 18px; }
.pb-icon { flex: none; }

/* ── Заголовки ──────────────────────────────────────────── */

.pb-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  letter-spacing: 0;
}
.pb-title--red { color: var(--pb-red); }
.pb-title--left { text-align: left; }

/* ── Шапка ──────────────────────────────────────────────── */

.pb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--pb-header);
  background: var(--pb-red);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* при прокрутке вниз шапка уезжает вверх, при прокрутке вверх — возвращается (js/pobeda.js) */
.pb-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .pb-header, .pb-btn, .pb-nav__link, .pb-footer__link { transition: none; }
}
.pb-header__inner { display: flex; align-items: center; height: 100%; }
.pb-header__logo img { width: 196px; height: 48px; }

.pb-nav { display: flex; align-items: center; flex: 1; margin-left: 52px; }
.pb-nav__list { display: flex; gap: 17px; }
.pb-nav__link { color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; }
/* Ссылки по UI-киту: белая → светло-серая при наведении, серая — выключенная */
.pb-nav__link, .pb-footer__link { transition: color .25s ease; }
.pb-nav__link:hover, /* документ ещё не загружен на CheqLy — ссылка без адреса, но выглядит и нажимается как обычная */
.pb-footer__link:not([href]) { cursor: pointer; }
.pb-footer__link:hover { color: #d6d6d6; }
.pb-nav__link:is([aria-disabled="true"], .is-disabled),
.pb-footer__link:is([aria-disabled="true"], .is-disabled) { color: #9a9a9a; pointer-events: none; }
.pb-nav__cabinet { margin-left: auto; gap: 8px; padding: 0 16px; }

.pb-burger { display: none; }
.pb-overlay { display: none; }

/* ── Первый экран ───────────────────────────────────────── */

.pb-hero {
  position: relative;
  /* первый экран — во всю высоту окна, но не ниже макета и не выше 1000px:
     на огромных мониторах композиция дальше не растягивается */
  height: clamp(738px, calc(100vh - var(--pb-header)), 1000px);
  height: clamp(738px, calc(100svh - var(--pb-header)), 1000px);
  overflow: hidden;
  /* по низу: пол с отражениями виден на любой ширине */
  background: #058a1e url('../img/hero-bg.webp') center bottom / cover no-repeat;
}
.pb-hero::before, .pb-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 31px;
  background: url('../img/stripe.png') left top / auto 31px repeat-x;
}
.pb-hero::before { top: 0; }
.pb-hero::after { bottom: 1px; }

/* Плашка и даты — у верха, билет — по центру, предметы, блок механики и кнопка — у низа.
   Отступы взяты из макета 738px: снизу — от низа, у билета — от середины */
.pb-hero__frame { position: absolute; inset: 0; }
.pb-hero__stage { position: absolute; top: 0; left: 50%; width: 1440px; height: 100%; margin-left: -720px; }
.pb-hero__stage img { position: absolute; height: auto; }
.pb-hero__cup { left: 79px; bottom: 345px; width: 109px; }
.pb-hero__bag { left: 133px; bottom: 55px; width: 208px; }
/* Билет в макете чуть ниже середины. На высоких экранах (первый экран выше 850px) он
   плавно поднимается и к 1000px встаёт по центру (белая часть чуть выше середины — внизу тяжёлые
   предметы); на средних и малых — как в макете */
.pb-hero__ticket { left: 302px; top: calc(50% - 152px - max(0px, 100% - 850px) * .22); width: 871px; }
.pb-hero__camera { left: 333px; bottom: 82px; width: 175px; z-index: 2; }
.pb-hero__glow { mix-blend-mode: screen; pointer-events: none; }

.pb-hero__head { position: absolute; top: 63px; right: 0; display: flex; align-items: flex-start; }
.pb-hero__dates {
  margin: 48px 22px 0 0;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}
.pb-hero__title img { width: 623px; height: auto; }

.pb-hero__bottom { position: absolute; z-index: 4; left: 50%; bottom: 72px; height: 143px; width: 100%; max-width: 1440px; transform: translateX(-50%); padding: 0 80px; }
.pb-hero__mechanics {
  position: absolute;
  right: 80px;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 66px 65px;
  gap: 4px;
  width: 330px;
  padding: 4px;
  background: var(--pb-red);
}
.pb-hero__mechanics li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  padding: 6px 10px;
  background: #fff;
  color: var(--pb-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
}
.pb-hero__mechanics .pb-hero__mechanics-wide { grid-column: 1 / -1; }
.pb-hero__cta { position: absolute; top: 95px; left: calc(50% - 99px); }

/* ── Подарки ────────────────────────────────────────────── */

.pb-section { padding-top: 103px; }

.pb-prizes__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 61px 20px;
  margin-top: 27px;
}
.pb-prize { display: flex; flex-direction: column; }
.pb-prize__media { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 318px; }
.pb-prize__media img { max-width: 100%; height: auto; transform: translate(var(--dx, 0px), var(--shift, 0px)); }
.pb-prize__card {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 113px;
  padding: 28px 16px 8px;
  border-radius: 20px;
  background: var(--pb-green);
  color: #fff;
  text-align: center;
}
.pb-prize__name { font-size: 18px; font-weight: 500; line-height: 120%; }
.pb-prize__count { margin-top: 14px; font-size: 16px; font-weight: 400; line-height: 20px; }

/* ── Гарантированные и главный подарок ──────────────────── */

.pb-guaranteed { padding-top: 91px; }
.pb-guaranteed__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.pb-guaranteed__text .pb-title { font-size: 30px; line-height: 36px; }
.pb-guaranteed__lead { max-width: 430px; margin-top: 12px; color: var(--pb-muted); font-size: 16px; font-weight: 400; line-height: 20px; }
.pb-guaranteed__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  font-size: 16px;
  font-weight: 400;
}

.pb-ticket { position: relative; width: 770px; height: 293px; margin: 55px auto 0; }
.pb-ticket__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-ticket__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 80px;
  text-align: center;
}
.pb-ticket__kicker { font-size: 16px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
.pb-ticket__title { margin-top: 12px; color: var(--pb-red); font-size: 36px; font-weight: 700; line-height: 40px; text-transform: uppercase; }
.pb-ticket__text { margin-top: 6px; color: var(--pb-muted); font-size: 18px; font-weight: 400; line-height: 20px; }
.pb-guaranteed .pb-center { margin-top: 20px; }

/* ── Как выиграть ───────────────────────────────────────── */

.pb-how { margin-top: 60px; }
.pb-how__scene { position: relative; z-index: 2; height: 457px; overflow-x: clip; }
.pb-how__stage { position: absolute; top: 0; left: 50%; width: 1440px; height: 100%; margin-left: -720px; }
.pb-how__stage img { position: absolute; height: auto; }
.pb-how__app { left: 301px; top: 0; width: 342px; z-index: 1; }
.pb-how__wheel { position: absolute; left: 472px; top: 10px; width: 494px; }
.pb-how__stage .pb-how__wheel-img { position: relative; width: 100%; }
.pb-how__stage .pb-how__wheel-logo { left: 45.5%; top: 52.2%; width: 8.1%; }
.pb-how__trees { left: 67px; top: 223px; width: 273px; }
.pb-how__train { left: 1043px; top: 320px; width: 394px; }

.pb-how__body { position: relative; background: var(--pb-green); padding: 84px 0 48px; color: #fff; }
.pb-steps {
  display: grid;
  grid-template-columns: repeat(3, 465px);
  justify-content: center;
  margin: 37px -80px 0;
  counter-reset: none;
}
.pb-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pb-step + .pb-step::before {
  content: '';
  position: absolute;
  top: 73px;
  left: -69px; /* центр линии — ровно посередине между картинками шагов */
  width: 139px;
  height: 44px;
  background: url('../img/step-line.png') center / contain no-repeat;
}
/* вторая линия (между шагами 2 и 3) в макете — зеркальная копия первой */
.pb-step:nth-child(3)::before { transform: scaleX(-1); }
.pb-step__img { width: 250px; height: auto; }
.pb-step__title { margin-top: 30px; font-size: 24px; font-weight: 700; line-height: 28px; text-transform: uppercase; }
.pb-step__text { max-width: 250px; margin-top: 6px; font-size: 16px; font-weight: 400; line-height: 20px; }
.pb-how__result { margin-top: 56px; font-size: 24px; font-weight: 700; line-height: 30px; text-align: center; }

/* ── Условия приёма чека ────────────────────────────────── */

.pb-rules {
  padding: 62px 0 60px;
  /* затемнение по центру сверху приглушает конфетти за заголовком и текстом — их легче читать */
  background:
    radial-gradient(ellipse 620px 260px at 50% 130px, rgba(230, 28, 12, .92), rgba(230, 28, 12, .6) 55%, rgba(230, 28, 12, 0) 100%),
    #e31b0b url('../img/rules-bg.webp') center / cover no-repeat;
  color: #fff;
}
.pb-rules__lead { max-width: 450px; margin: 14px auto 0; font-size: 16px; font-weight: 400; line-height: 20px; text-align: center; opacity: .9; }
.pb-rules .pb-center { margin-top: 24px; }
.pb-rules__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 51px; }
.pb-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 138px;
  padding: 16px;
  border: 2px solid #ff2d2d;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.pb-rule__label { color: var(--pb-muted); font-size: 16px; font-weight: 400; line-height: 20px; }
.pb-rule__label b { color: var(--pb-text); font-weight: 700; }
.pb-rule__value { margin-top: 12px; color: var(--pb-green); font-size: 24px; font-weight: 700; line-height: 30px; text-transform: uppercase; }

/* ── Победители и вопросы ───────────────────────────────── */

.pb-green { background: var(--pb-green); color: #fff; padding: 62px 0 64px; }
.pb-winners__lead { margin-top: 14px; font-size: 16px; font-weight: 400; line-height: 20px; text-align: center; opacity: .9; }

.pb-countdown {
  width: 450px;
  margin: 37px auto 0;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: #fff;
  color: var(--pb-text);
  text-align: center;
}
.pb-countdown__title { font-size: 18px; font-weight: 700; line-height: 24px; }
.pb-countdown__row { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin-top: 2px; }
.pb-countdown__cell { display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.pb-countdown__num { color: var(--pb-green); font-size: 80px; font-weight: 700; line-height: 76px; font-variant-numeric: tabular-nums; }
.pb-countdown__unit { color: var(--pb-muted); font-size: 18px; font-weight: 500; line-height: 22px; }
.pb-countdown__sep { position: relative; width: 8px; height: 76px; }
.pb-countdown__sep::before, .pb-countdown__sep::after {
  content: '';
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pb-green);
}
.pb-countdown__sep::before { top: 38px; }
.pb-countdown__sep::after { top: 54px; }

.pb-winners__video { margin-top: 37px; }
.pb-winners__table { margin-top: 37px; overflow: hidden; border-radius: 10px; background: #fff; color: var(--pb-text); }
.pb-winners__table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pb-winners__table th, .pb-winners__table td { padding: 0 20px; text-align: left; }
.pb-winners__table th { height: 42px; background: var(--pb-red); color: #fff; font-size: 15px; font-weight: 500; }
.pb-winners__table td { height: 54px; border-top: 1px solid #e3e3e3; font-size: 15px; font-weight: 400; }
.pb-winners__table tbody tr:first-child td { border-top: 0; }
.pb-winners__table tbody tr:nth-child(odd) td { background: #fafafa; }

.pb-faq { margin-top: 119px; }
.pb-faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 37px; align-items: start; }
.pb-faq__column { display: flex; flex-direction: column; gap: 4px; }
.pb-faq__item { border-radius: 10px; background: #fff; color: var(--pb-text); }
.pb-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 20px 16px;
  font-size: 21px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.pb-faq__question::-webkit-details-marker { display: none; }
.pb-faq__icon { position: relative; flex: none; margin-top: -4px; width: 32px; height: 32px; border-radius: 50%; background: var(--pb-red); }
.pb-faq__icon::before, .pb-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 1px;
  background: #fff;
  transition: transform .2s;
}
.pb-faq__icon::after { transform: rotate(90deg); }
.pb-faq__answer { margin-top: -8px; overflow: hidden; }
.pb-faq__answer-inner { padding: 0 64px 16px 16px; color: var(--pb-muted); font-size: 16px; font-weight: 400; line-height: 20px; }

/* ── Подвал ─────────────────────────────────────────────── */

.pb-footer { background: var(--pb-red); color: #fff; padding: 60px 0 67px; }
.pb-footer__grid {
  display: grid;
  grid-template-columns: 275px 298px 360px 1fr;
  grid-template-areas: 'logo nav docs org' 'contacts nav docs org';
  grid-template-rows: auto 1fr;
}
.pb-footer__logo { grid-area: logo; }
.pb-footer__logo img { width: 126px; height: 163px; }
.pb-footer__contacts { grid-area: contacts; margin-top: 24px; }
.pb-footer__col--nav { grid-area: nav; }
.pb-footer__col--docs { grid-area: docs; }
.pb-footer__col--org { grid-area: org; }
.pb-footer__caption { font-size: 14px; font-weight: 500; line-height: 16px; }
.pb-footer__email { display: inline-block; margin: 4px 0 8px; font-size: 18px; font-weight: 500; line-height: 22px; }
.pb-footer__title { font-size: 20px; font-weight: 700; line-height: 24px; text-transform: uppercase; }
.pb-footer__list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pb-footer__link { font-size: 16px; font-weight: 400; line-height: 20px; }
.pb-footer__party + .pb-footer__party { margin-top: 32px; }
.pb-footer__inn { margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 20px; }

/* ── 404 ────────────────────────────────────────────────── */

.pb-404 { padding: 135px 0 110px; text-align: center; }
.pb-404__code { color: var(--pb-green); font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pb-404__title { margin-top: 28px; font-size: 30px; font-weight: 700; line-height: 44px; text-transform: uppercase; }
.pb-404__text { margin-top: 18px; color: var(--pb-muted); font-size: 18px; font-weight: 400; line-height: 20px; }
.pb-404__btn { margin-top: 24px; min-width: 236px; }

/* ══ Ноутбуки 1200–1439px ═════════════════════════════════
   Сцены первого экрана и «Как выиграть» рассчитаны на 1440px — уменьшаем их ступенями через zoom:
   в отличие от transform он сохраняет привязки (предметы у низа, билет по центру) и не изолирует
   mix-blend-mode — блики билета остаются светлыми. Шаги — три равные колонки */

@media (min-width: 1200px) and (max-width: 1439px) {
  .pb-hero__stage, .pb-how__stage { zoom: var(--pb-k); }
  .pb-how__stage { top: auto; bottom: 0; height: 457px; }
  .pb-hero__stage { --pb-k: .95; }
  .pb-how__stage { --pb-k: .95; }
  .pb-steps { grid-template-columns: repeat(3, 1fr); margin-left: 0; margin-right: 0; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  .pb-hero__stage, .pb-how__stage { --pb-k: .89; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .pb-hero__stage, .pb-how__stage { --pb-k: .83; }
}

/* ══ Шапка с бургером: до 1279px полное меню в одну строку не помещается ══ */

@media (max-width: 1279px) {
  :root { --pb-header: 60px; }

  .pb-header__logo img { width: 147px; height: 36px; }

  .pb-burger {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 0;
    border-radius: 6px;
    background: var(--pb-green);
    cursor: pointer;
  }
  .pb-burger__lines, .pb-burger__lines::before, .pb-burger__lines::after {
    position: absolute;
    left: 8px;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform .2s, opacity .2s;
  }
  .pb-burger__lines { top: 17px; }
  .pb-burger__lines::before, .pb-burger__lines::after { content: ''; left: 0; }
  .pb-burger__lines::before { top: -6px; }
  .pb-burger__lines::after { top: 6px; }
  .pb-menu-open .pb-burger__lines { background: transparent; }
  .pb-menu-open .pb-burger__lines::before { transform: translateY(6px) rotate(45deg); }
  .pb-menu-open .pb-burger__lines::after { transform: translateY(-6px) rotate(-45deg); }

  .pb-nav {
    position: fixed;
    top: var(--pb-header);
    right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 277px;
    margin: 0;
    padding: 13px 20px 16px 24px; /* как в макете: панель 316px, пункты с шагом 34px */
    background: var(--pb-red);
  }
  .pb-menu-open .pb-nav { display: flex; }
  .pb-nav__list { flex-direction: column; gap: 10px; }
  .pb-nav__link { display: block; padding: 2px 0; font-size: 16px; font-weight: 500; line-height: 20px; }
  .pb-nav__cabinet { margin: 45px 0 0; }

  .pb-overlay {
    position: fixed;
    inset: var(--pb-header) 0 0;
    z-index: 40;
    display: block;
    background: rgba(0, 0, 0, .5);
  }
  .pb-overlay[hidden] { display: none; }
}

/* Ноутбуки 1280–1439px: та же раскладка, что в макете, но шапка плотнее, чтобы меню помещалось */
@media (min-width: 1280px) and (max-width: 1439px) {
  .pb-header .pb-container { padding: 0 40px; }
  .pb-nav { margin-left: 32px; }
  .pb-nav__list { gap: 14px; }
  .pb-nav__link { font-size: 15px; }
}

/* ══ Планшет ═══════════════════════════════════════════════ */

@media (max-width: 1199px) {

  .pb-container { padding: 0 20px; }
  .pb-title { font-size: 30px; }

  /* первый экран */
  .pb-hero { height: clamp(964px, calc(100svh - var(--pb-header)), 1150px); }
  .pb-hero__stage { width: 768px; margin-left: -384px; }
  .pb-hero__cup { left: 0; bottom: 322px; width: 106px; }
  .pb-hero__bag { left: 87px; bottom: 69px; }
  .pb-hero__ticket { left: 33px; top: calc(50% - 242px); width: 666px; }
  .pb-hero__camera { left: 283px; bottom: 281px; width: 161px; }

  .pb-hero__head { top: 72px; left: 0; right: 0; justify-content: flex-end; }
  .pb-hero__dates { position: absolute; left: 23px; margin: 53px 0 0; font-size: 18px; line-height: 22px; text-align: left; }
  .pb-hero__title img { width: 598px; }

  .pb-hero__bottom { bottom: 71px; height: 233px; max-width: 768px; padding: 0 20px; }
  .pb-hero__mechanics { right: 21px; }
  .pb-hero__mechanics li { min-height: 65px; font-size: 16px; line-height: 22px; }
  .pb-hero__cta { top: 185px; left: 286px; }

  /* подарки */
  .pb-section { padding-top: 98px; }
  .pb-prizes__list { grid-template-columns: repeat(2, 1fr); gap: 40px 12px; margin-top: 30px; }
  /* высота ряда — по самой высокой картинке, карточки в ряду стоят на одной линии */
  .pb-prize__media { flex: 1; height: auto; }
  .pb-prize__card { flex: none; }
  /* размер — от макета (--w — ширина на десктопе), а не от файла: исходники бывают крупнее */
  .pb-prize__media img { width: calc(var(--w) * .88px); height: auto; transform: translateY(var(--shift, 0px)); }

  .pb-guaranteed { padding-top: 100px; }
  .pb-guaranteed__inner { grid-template-columns: 1fr; }
  .pb-guaranteed__photo { min-height: 260px; }
  .pb-ticket { width: 100%; max-width: 735px; margin-top: 6px; }
  .pb-ticket__body { padding: 0 60px; }

  /* как выиграть */
  .pb-how { margin-top: 110px; }
  .pb-how__scene { height: 380px; }
  .pb-how__stage { width: 768px; margin-left: -384px; }
  .pb-how__app { left: 175px; top: 0; width: 250px; }
  .pb-how__wheel { left: 223px; top: 80px; width: 326px; }
  .pb-how__trees { left: 10px; top: 244px; width: 163px; }
  .pb-how__train { left: 568px; top: 275px; width: 236px; }
  .pb-how__body { padding: 80px 0 74px; }
  .pb-steps { grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; }
  .pb-step + .pb-step::before { top: 39px; left: -28px; width: 56px; height: 18px; }
  .pb-step__img { width: 130px; }
  .pb-step__title { margin-top: 14px; font-size: 20px; line-height: 24px; }
  .pb-step__text { max-width: 200px; font-size: 16px; }
  .pb-how__result { margin-top: 52px; }
  .pb-br-tablet { display: inline; }

  /* условия */
  .pb-rules { padding-bottom: 71px; }
  .pb-rules__list { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }

  /* вопросы */
  .pb-faq { margin-top: 110px; }
  .pb-faq__list { grid-template-columns: 1fr; gap: 4px; }

  /* подвал */
  .pb-footer { padding: 52px 0 60px; }
  .pb-footer__grid {
    grid-template-columns: 298px 1fr;
    grid-template-areas: 'nav docs' 'org org' 'logo contacts';
    grid-template-rows: auto;
    row-gap: 30px;
  }
  .pb-footer__contacts { margin-top: 0; justify-self: end; width: 238px; }
  .pb-footer__party + .pb-footer__party { margin-top: 20px; }
}

/* ══ Телефон ═══════════════════════════════════════════════ */

@media (max-width: 767px) {
  .pb-container { padding: 0 16px; }
  .pb-title { font-size: 24px; line-height: 30px; }
  .pb-br-mobile { display: inline; }
  .pb-br-tablet, .pb-br-wide { display: none; }

  .pb-nav { width: 272px; padding-left: 24px; }

  /* первый экран */
  .pb-hero { height: clamp(776px, calc(100svh - var(--pb-header)), 900px); }
  .pb-hero__stage { width: 360px; margin-left: -180px; }
  .pb-hero__cup { left: 20px; bottom: 331px; width: 91px; }
  .pb-hero__bag { left: 92px; bottom: 224px; width: 148px; transform: rotate(18deg); transform-origin: 50% 50%; }
  /* в макете билет на телефоне сжат неравномерно: 0,48 по ширине и 0,55 по высоте */
  .pb-hero__ticket { left: -36px; top: calc(50% - 233px); width: 422px; height: 248px !important; }
  .pb-hero__camera { left: 238px; bottom: 243px; width: 122px; }

  .pb-hero__head { top: 35px; left: 50%; right: auto; width: 360px; margin-left: -180px; flex-direction: column; align-items: flex-end; }
  .pb-hero__dates { position: static; order: 2; margin: 4px 17px 0 0; font-size: 16px; line-height: 20px; }
  .pb-hero__dates br { display: none; }
  .pb-hero__title { order: 1; align-self: flex-start; margin-left: 20px; }
  .pb-hero__title img { width: 336px; }

  .pb-hero__bottom { bottom: 37px; height: auto; max-width: 452px; padding: 0 16px; }
  .pb-hero__mechanics { position: static; width: 100%; }
  .pb-hero__mechanics li { min-height: 65px; }
  .pb-hero__cta { position: static; display: flex; width: 100%; margin-top: 23px; }

  /* подарки — лента с прокруткой */
  .pb-section { padding-top: 92px; }
  .pb-prizes__list {
    display: flex;
    gap: 8px;
    margin: 20px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .pb-prizes__list::-webkit-scrollbar { display: none; }
  /* карточка чуть уже экрана — справа виден край следующей */
  .pb-prize { flex: 0 0 321px; scroll-snap-align: start; }
  .pb-prize__media { height: 280px; }
  .pb-prize__media img { width: calc(var(--w) * .82px); height: auto; }
  .pb-prize__card { padding-top: 24px; }

  .pb-guaranteed { padding-top: 76px; }
  .pb-guaranteed__text { text-align: center; }
  .pb-guaranteed__text .pb-title { font-size: 24px; line-height: 30px; text-align: center; }
  .pb-guaranteed__text .pb-title br { display: none; }
  .pb-guaranteed__lead { margin: 12px auto 0; }
  .pb-guaranteed__photo { min-height: 190px; }
  /* на широких телефонах (до 767px) билет не шире 400px — иначе текст налезает на пунктир */
  .pb-ticket { height: auto; max-width: 400px; min-height: 266px; margin-top: 44px; }
  .pb-ticket__body { min-height: 266px; padding: 34px 22px 30px; }
  .pb-ticket__title { margin-top: 10px; font-size: 28px; line-height: 32px; }
  .pb-ticket__text { margin-top: 10px; font-size: 16px; line-height: 20px; }
  .pb-ticket__text br { display: none; }
  .pb-guaranteed .pb-center { margin-top: 47px; }
  .pb-guaranteed .pb-btn--lg { height: 48px; }

  /* как выиграть */
  .pb-how { margin-top: 90px; }
  .pb-how__scene { height: 299px; }
  .pb-how__stage { width: 360px; margin-left: -180px; }
  .pb-how__app { left: 9px; top: 0; width: 212px; }
  .pb-how__wheel { left: 60px; top: 67px; width: 237px; }
  .pb-how__trees, .pb-how__train { display: none; }
  .pb-how__body { padding: 60px 0 34px; }
  .pb-steps { grid-template-columns: 1fr; gap: 34px; margin-top: 25px; }
  .pb-step + .pb-step::before { display: none; }
  .pb-step__img { width: 130px; margin-left: 28px; }
  .pb-step__title { margin-top: 14px; font-size: 24px; line-height: 28px; }
  .pb-step__text { max-width: 245px; }
  .pb-how__result { margin-top: 22px; font-size: 16px; line-height: 20px; }

  /* условия */
  .pb-rules { padding: 40px 0 40px; }
  .pb-rules .pb-title { max-width: 270px; margin: 0 auto; }
  .pb-rules__lead { max-width: 300px; margin-top: 12px; }
  .pb-rules .pb-center { margin-top: 30px; }
  .pb-rules__list { grid-template-columns: 1fr; margin-top: 22px; }

  /* победители */
  .pb-green { padding-top: 48px; padding-bottom: 38px; }
  .pb-winners__lead br { display: none; }
  .pb-countdown { width: 100%; margin-top: 10px; padding: 18px 12px 16px; }
  .pb-countdown__title { font-size: 18px; }
  .pb-countdown__row { gap: 12px; margin-top: 4px; }
  .pb-countdown__cell { min-width: 64px; }
  .pb-countdown__num { font-size: 40px; line-height: 46px; }
  .pb-countdown__unit { font-size: 14px; line-height: 18px; }
  .pb-countdown__sep { height: 46px; width: 8px; }
  .pb-countdown__sep::before { top: 22px; }
  .pb-countdown__sep::after { top: 36px; }

  /* вопросы */
  .pb-faq { margin-top: 82px; }
  .pb-faq__list { margin-top: 26px; gap: 6px; }
  .pb-faq__column { gap: 6px; }
  .pb-faq__question { align-items: center; min-height: 54px; padding: 13px 16px; font-size: 14px; line-height: 16px; }
  .pb-faq__icon { margin-top: 0; width: 24px; height: 24px; }
  .pb-faq__icon::before, .pb-faq__icon::after { width: 12px; margin-left: -6px; }
  .pb-faq__answer { margin-top: -10px; }
  .pb-faq__answer-inner { padding: 0 16px 16px; font-size: 14px; line-height: 17px; }

  .pb-winners__table { margin-top: 26px; }
  .pb-winners__table table { table-layout: auto; }
  .pb-winners__table th, .pb-winners__table td { padding: 0 8px; font-size: 13px; }
  .pb-winners__table th:first-child, .pb-winners__table td:first-child { padding-left: 12px; }
  .pb-winners__table td:is(:nth-child(1), :nth-child(2)) { white-space: nowrap; }
  .pb-winners__table th { height: 38px; }
  .pb-winners__table td { height: 48px; line-height: 16px; }

  /* подвал */
  .pb-footer { padding: 38px 0 40px; }
  .pb-footer__grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'nav' 'docs' 'org' 'logo' 'contacts';
    row-gap: 40px;
  }
  .pb-footer__contacts { justify-self: start; width: auto; margin-top: -8px; }
  .pb-footer__title { font-size: 20px; line-height: 24px; }

  /* 404 */
  .pb-404 { padding: 90px 0 80px; }
  .pb-404__code { font-size: min(160px, 40vw); }
  .pb-404__title { margin-top: 30px; font-size: 28px; line-height: 34px; }
  .pb-404__text { margin-top: 12px; font-size: 16px; }
  .pb-404__text br:not(.pb-br-mobile) { display: none; }
  .pb-404__btn { width: 236px; }
}

/* ══ Узкие телефоны 320–359px ══════════════════════════════
   Сцены первого экрана и «Как выиграть» свёрстаны на 360px — уменьшаем их, чтобы ничего не уходило
   за край; карточки подарков — по ширине экрана */

@media (max-width: 359px) {
  .pb-hero__stage, .pb-how__stage, .pb-hero__head { zoom: var(--pb-k, .945); }
  .pb-how__stage { top: auto; bottom: 0; height: 299px; }
  .pb-prize { flex-basis: calc(100vw - 39px); }
}
@media (max-width: 339px) {
  .pb-hero__stage, .pb-how__stage, .pb-hero__head { --pb-k: .89; }
}