/* ==========================================================================
   DropHub — бонусы (rewards.html)

   Сверху — шапка страницы в духе VIP-клуба (.bn-top: баннер владельца,
   заголовок, лид, две кнопки), под ней оглавление и четыре бонуса.
   У каждого бонуса свой масштаб — поэтому и блоки разные, а не
   четыре одинаковые плитки:
     01 Welcome Case      — главный, во всю ширину: крупный кейс и одно действие;
     02 Кейсы за депозит  — узкий: пять ступеней (кейс и порог) сверху, текст снизу;
     03 Промокоды         — широкий: канал в Telegram и поле для кода
                            прямо здесь (поле — «билет» с перфорацией);
     04 Розыгрыши         — живая полоса из GET /api/raffles: приз дня,
                            отсчёт, участники и расписание остальных.

   Палитра — как у розыгрышей (raffles.css): индиго #1A1430, поверхности
   #221B3E / #2C2452, лайм сайта — главное действие, синий Telegram — только
   у кнопки канала. Заголовки Oswald, текст Inter. Свечений два, оба мягкие,
   как в предметной съёмке: за персонажами шапки и за кейсом в Welcome Case.

   Телефон — до 760px (тот же порог, что в mobile.css): всё в одну колонку,
   кнопки во всю ширину.
   ========================================================================== */

.bn-body {
  --bn-bg:     #1A1430;
  --bn-deep:   #140F2B;
  --bn-surf:   #221B3E;
  --bn-surf-2: #2C2452;
  --bn-text:   #F5F3FF;
  --bn-dim:    #BDB7DE;
  --bn-mute:   #8F87B5;
  --bn-hair:   rgba(255, 255, 255, .08);
  --bn-lime:   var(--lime, #D7FF00);
  --bn-tg:     #2AABEE;
  --bn-mint:   #34D399;
  /* нейтрали шапки с фиолетовым подтоном — как на розыгрышах */
  --panel:     #0D0A1A;
  --panel-2:   #130E24;
  --panel-3:   #1E1836;
  --line:      #2B2449;
  --line-soft: #1F1938;
  background-color: var(--bn-bg);
}

.bn-page [hidden] { display: none !important; }
.bn-page {
  max-width: 1240px; margin: 0 auto;
  padding: 6px 20px 72px;
  color: var(--bn-text);
}

/* ═══════════════ ШАПКА СТРАНИЦЫ ═══════════════

   Язык — шапки VIP-клуба (vip.css, .vp-hero): арт на весь блок, края и низ
   растворяются в фоне страницы маской, текст слева — на мягком затемнении,
   крупный заголовок Oswald лаймом, лид и две кнопки.

   Баннер владельца (assets/rewards/bonus-top-*: спецназовец, девушка и
   террорист с подарочными кейсами) — PNG без фона, поэтому «сцену» под ним
   собираем сами, в духе сайта и без неона: камуфляж фона сайта
   (assets/bg_camo_ref.jpg, как у меню аватара) под индиго-вуалью, широкий
   мягкий свет на «сцене» за персонажами (как подсветка зала у VIP) и пятно
   поплотнее прямо за ними — как свет за кейсом в блоке ниже. Вуаль светлее
   фона страницы, поэтому блок читается картиной, а края растворяются.

   Персонажи стоят справа по низу блока. Ширина картинки — наибольшая из
   допустимых тремя ограничениями: --pw (потолок), место справа от лида
   (--tr — правый край лида плюс зазор; головы на арте занимают 7–91% его
   ширины, так что голова спецназовца правее строк, а голова террориста —
   левее правого затухания) и место справа от ряда кнопок (--tx: левый край
   арта — срез руки спецназовца с кейсом — не заходит под кнопки).
   Блок шире колонки страницы на 20px с каждой стороны (на 1320px+ — на 40,
   как шапка VIP шириной 1280): края всё равно растворяются, а персонажам
   достаётся лишнее место. */
.bn-top {
  --pl: 56px;                 /* поле слева до текста */
  --tr: 470px;                /* правый край лида + зазор: левее голов не заходим */
  --tx: 436px;                /* правый край ряда кнопок + зазор: левее арта не заходим */
  --pw: 880px;                /* потолок ширины арта */
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: 440px; margin: 12px -20px 0; padding: 40px var(--pl) 64px;
}
.bn-top__art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(46% 62% at var(--lx, 66%) 54%, rgba(118, 78, 220, .30), rgba(118, 78, 220, .1) 58%, transparent 100%),
    linear-gradient(180deg, rgba(50, 37, 98, .5) 0%, rgba(34, 25, 68, .62) 100%),
    url('assets/bg_camo_ref.jpg') 30% 20% / 520px auto repeat, #1E1739;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 5%, #000 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 5%, #000 66%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%);
          mask-composite: intersect;
}
.bn-top__pic {
  position: absolute; right: 0; bottom: 0;
  width: min(var(--pw), calc((100% - var(--tr)) / .93), calc(100% - var(--tx)));
  aspect-ratio: 1680 / 699;
}
/* мягкий свет за персонажами — одно пятно, без ореолов по контуру */
.bn-top__pic::before {
  content: ''; position: absolute; left: 6%; right: 2%; top: -16%; bottom: 0;
  background: radial-gradient(closest-side, rgba(150, 104, 255, .32), rgba(150, 104, 255, .1) 60%, transparent);
}
.bn-top__img {
  position: relative; display: block; width: 100%; height: auto;
  /* левый край арта — срез руки спецназовца: растворяем */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%);
}
/* затемнение под текстом — поверх арта, сходит на нет до голов */
.bn-top__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 7, 24, .84) 0, rgba(11, 7, 24, .7) calc(var(--tr) * .55),
    rgba(11, 7, 24, .3) calc(var(--tr) - 40px), rgba(11, 7, 24, 0) calc(var(--tr) + 30px));
}

.bn-top__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.bn-top__eyebrow {
  display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 13px; border-radius: 999px;
  border: 1px solid rgba(215, 255, 0, .26); background: rgba(16, 11, 34, .6);
  color: var(--bn-lime); font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.bn-top__title {
  margin: 0;
  font-family: var(--f-cond), sans-serif; font-weight: 700; font-size: clamp(44px, 5.4vw, 76px);
  line-height: .95; letter-spacing: .01em; text-transform: uppercase;
  color: var(--bn-lime); text-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}
.bn-top__lead {
  margin: 0; max-width: calc(var(--tr) - var(--pl) - 24px);
  font-size: 16px; line-height: 1.55; color: #E4DEF7; text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.bn-top__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* оглавление под заголовком — номера те же, что у блоков */
.bn-index {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px;
  margin: 0 0 22px; padding: 0; list-style: none;
}
.bn-index a {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 0;
  font-size: 13px; color: var(--bn-mute); text-decoration: none;
  transition: color .15s;
}
.bn-index a b { font-family: var(--f-cond), sans-serif; font-size: 12.5px; font-weight: 500; color: var(--bn-lime); }
.bn-index a:hover { color: var(--bn-text); }

/* ---------- общее для блоков ---------- */
.bn-sec {
  position: relative; overflow: hidden;
  border-radius: 20px; background: var(--bn-surf);
  scroll-margin-top: 96px;
}
.bn-kick {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bn-mute);
}
.bn-kick b { font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--bn-lime); }
.bn-h {
  margin: 0;
  font-family: var(--f-cond), sans-serif; font-weight: 600;
  line-height: 1.04; letter-spacing: .005em; color: var(--bn-text);
  text-wrap: balance;
}
.bn-h em { font-style: normal; color: var(--bn-lime); }
.bn-p { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--bn-dim); max-width: 46ch; }

.bn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border: 0; border-radius: 12px;
  font-family: var(--f-cond), sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.bn-btn svg { width: 20px; height: 20px; flex: none; }
.bn-btn:focus-visible { outline: 2px solid var(--bn-lime); outline-offset: 3px; }
.bn-btn[disabled] { opacity: .5; cursor: default; }
.bn-btn--big { height: 56px; padding: 0 30px; border-radius: 14px; font-size: 18px; }
.bn-btn--lime { background: var(--bn-lime); color: #12150A; }
.bn-btn--lime:hover { background: #E4FF4A; }
.bn-btn--line { background: transparent; color: var(--bn-lime); box-shadow: inset 0 0 0 1.5px rgba(215, 255, 0, .5); }
.bn-btn--line:hover { background: rgba(215, 255, 0, .06); box-shadow: inset 0 0 0 1.5px var(--bn-lime); }
.bn-btn--tg { background: var(--bn-tg); color: #fff; }
.bn-btn--tg:hover { background: #47B9F1; }
/* вторичная кнопка шапки — как «призрак» у VIP: тёмная, с тонкой рамкой */
.bn-btn--ghost { background: rgba(28, 22, 54, .86); color: #EDE8FF; box-shadow: inset 0 0 0 1px rgba(160, 125, 255, .2); }
.bn-btn--ghost:hover { background: #251D45; box-shadow: inset 0 0 0 1px rgba(190, 160, 255, .34); }
.bn-btn--ghost svg { color: var(--bn-tg); }

.bn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--bn-lime); text-decoration: none;
}
.bn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════ 01 · БЕСПЛАТНЫЙ КЕЙС ═══════════════
   Компактная карточка: слева текст, шаги сеткой и кнопка; справа девушка с
   кейсом. Картинка обрезана по низу и справа — она прижата к правому нижнему
   углу карточки, и обрез совпадает с краем (карточка режет всё лишнее). */
.bn-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  background:
    radial-gradient(42% 95% at 86% 72%, rgba(150, 60, 255, .34), transparent 70%),
    linear-gradient(180deg, #281F4B, #1F1840);
}
.bn-hero__txt { position: relative; z-index: 1; padding: 34px 0 34px 40px; }
.bn-hero .bn-h { font-size: clamp(32px, 3.1vw, 44px); }
.bn-hero .bn-p { margin-top: 10px; max-width: 58ch; font-size: 14.5px; }
.bn-hero__act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; min-height: 52px; }
.bn-hero__act .bn-btn--big { height: 52px; font-size: 17px; }
.bn-hero__act .bn-btn img { width: 22px; height: 22px; flex: none; border-radius: 50%; }
.bn-hero__aside { font-size: 13px; line-height: 1.45; color: var(--bn-mute); max-width: 32ch; }
.bn-hero__state { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--bn-dim); }
.bn-hero__state i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); color: var(--bn-dim);
}
.bn-hero__state i svg { width: 14px; height: 14px; }

/* шаги — сетка коротких плашек (rewards.js нумерует и прячет шаги Telegram, если он выключен) */
.bn-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-width: 720px; margin: 20px 0 0; padding: 0; list-style: none;
}
@media (max-width: 1180px) { .bn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; } }
.bn-steps li {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 7px;
  border-radius: 12px; background: rgba(14, 9, 36, .5); box-shadow: inset 0 0 0 1px var(--bn-hair);
}
.bn-steps li[hidden] { display: none; }
.bn-steps i {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(215, 255, 0, .1); box-shadow: inset 0 0 0 1.5px rgba(215, 255, 0, .55);
}
.bn-steps i em { font-family: var(--f-cond), sans-serif; font-size: 14px; font-style: normal; font-weight: 600; color: var(--bn-lime); }
.bn-steps span { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--bn-text); }
.bn-tgico { width: 18px; height: 18px; flex: none; border-radius: 50%; }

.bn-hero__art { position: relative; margin: 0; min-height: 300px; }
.bn-hero__art img {
  position: absolute; right: 0; bottom: 0; display: block;
  width: auto; max-width: none; height: min(calc(100% - 12px), 410px);
  filter: drop-shadow(-8px 12px 22px rgba(0, 0, 0, .35));
}

/* ═══════════════ 02 + 03 ═══════════════ */
.bn-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; }

/* ---------- 02 · кейсы за депозит ---------- */
.bn-dep {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 430px; padding: 30px 32px 32px;
  background: linear-gradient(205deg, #2C2254 0%, var(--bn-surf) 58%);
}
/* пять ступеней — кейс, название, порог — лесенкой: чем больше пополнение,
   тем выше кейс. Ряд по центру свободного места над текстом, текст прижат
   к низу (высота блока задаётся соседним — промокоды). Кейс чуть шире
   колонки — заходят друг на друга только прозрачными краями картинок,
   следующий — поверх предыдущего. Пороги — те же, что в tools/depcase.js:
   поменяли там — поменять и в rewards.html. */
.bn-dep__tiers {
  list-style: none; margin: auto 0; padding: 70px 0 30px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end;
}
.bn-dep__tiers li {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
}
.bn-dep__tiers li:nth-child(2) { z-index: 1; transform: translateY(-14px); }
.bn-dep__tiers li:nth-child(3) { z-index: 2; transform: translateY(-28px); }
.bn-dep__tiers li:nth-child(4) { z-index: 3; transform: translateY(-42px); }
.bn-dep__tiers li:nth-child(5) { z-index: 4; transform: translateY(-56px); }
.bn-dep__tiers img {
  display: block; width: 114%; max-width: none; margin: 0 -7%; height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5));
}
.bn-dep__tiers b {
  margin-top: 4px; font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--bn-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bn-dep__tiers span { margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--bn-lime); white-space: nowrap; }
.bn-dep .bn-h { font-size: 36px; }
.bn-dep .bn-p { font-size: 14.5px; }
.bn-dep__act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.bn-dep__note { font-size: 12.5px; color: var(--bn-mute); }

/* ---------- 03 · промокоды в Telegram ---------- */
.bn-tg { display: flex; flex-direction: column; padding-bottom: 30px; }
.bn-tg__art { position: relative; height: 156px; margin: 8px 8px 0; border-radius: 14px; overflow: hidden; background: #2A1660; }
.bn-tg__art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.bn-tg__chan {
  position: absolute; left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(16, 10, 36, .72); color: var(--bn-text); text-decoration: none;
}
.bn-tg__chan i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bn-tg); color: #fff; }
.bn-tg__chan i svg { width: 17px; height: 17px; margin-left: -2px; }
.bn-tg__chan span { font-size: 13px; font-weight: 600; }
.bn-tg__chan small { font-size: 12px; color: var(--bn-mute); font-weight: 500; }
.bn-tg__body { padding: 26px 32px 0; }
.bn-tg .bn-h { font-size: 36px; }
.bn-tg__act { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 22px; }
.bn-tg__act span { font-size: 12.5px; color: var(--bn-mute); }

/* поле промокода — «билет»: слева код, справа отрывной корешок с кнопкой */
.bn-ticket-cap { margin: 26px 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bn-mute); }
.bn-ticket {
  --stub: 156px;
  position: relative; display: flex; align-items: stretch; height: 58px;
  border-radius: 12px; background: var(--bn-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: box-shadow .15s;
}
.bn-ticket:focus-within { box-shadow: inset 0 0 0 1.5px rgba(215, 255, 0, .5); }
/* полукруглые вырезы на линии отрыва */
.bn-ticket::before, .bn-ticket::after {
  content: ''; position: absolute; right: var(--stub); z-index: 1;
  width: 16px; height: 16px; margin-right: -8px; border-radius: 50%;
  background: var(--bn-surf);
}
.bn-ticket::before { top: -8px; }
.bn-ticket::after  { bottom: -8px; }
.bn-ticket input {
  flex: 1; min-width: 0; padding: 0 18px;
  border: 0; outline: 0; background: transparent; color: var(--bn-text);
  font: 600 16px/1 var(--f-body), sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.bn-ticket input::placeholder { color: var(--bn-mute); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.bn-ticket button {
  flex: none; width: var(--stub); border: 0; border-left: 2px dashed rgba(255, 255, 255, .13);
  border-radius: 0 12px 12px 0; background: transparent; color: var(--bn-lime); cursor: pointer;
  font-family: var(--f-cond), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .15s;
}
.bn-ticket button:hover:not([disabled]) { background: rgba(215, 255, 0, .07); }
.bn-ticket button:focus-visible { outline: 2px solid var(--bn-lime); outline-offset: -4px; }
.bn-ticket button[disabled] { opacity: .5; cursor: default; }
.bn-note { min-height: 20px; margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--bn-mute); }
.bn-note.is-ok  { color: var(--money, #6DEA5D); }
.bn-note.is-bad { color: #FF8F87; }
.bn-note__login {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--bn-lime); text-decoration: underline; text-underline-offset: 2px;
}

/* ═══════════════ 04 · РОЗЫГРЫШИ ═══════════════
   Витрина (владелец 2026-10-25): слева — самый дорогой приз из всех идущих
   розыгрышей на сцене цвета его редкости (--rc), справа — название,
   условие, отсчёт, строка всех розыгрышей и призовой фонд. Весь блок —
   ссылка на raffles.html (.bn-raf__hit поверх, кнопки и плитки — выше неё). */
.bn-raf {
  --rc: #8847ff;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 360px; margin-top: 16px;
  background:
    radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%),
    var(--bn-bg);
  transition: box-shadow .25s;
}
.bn-raf:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent), 0 18px 40px rgba(0, 0, 0, .35); }
.bn-raf__hit { position: absolute; inset: 0; z-index: 1; }

.bn-raf__prize {
  position: relative; display: grid; place-items: center; min-height: 300px; overflow: hidden;
  background:
    radial-gradient(58% 52% at 50% 52%, color-mix(in srgb, var(--rc) 46%, transparent), transparent 72%),
    radial-gradient(40% 12% at 50% 84%, rgba(0, 0, 0, .55), transparent 70%),
    var(--bn-deep);
}
/* лучи за призом — медленно вращаются */
.bn-raf__rays {
  position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 22%, transparent) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%); mask: radial-gradient(closest-side, #000 18%, transparent 70%);
  opacity: .55; animation: bn-rays 40s linear infinite;
}
@keyframes bn-rays { to { rotate: 360deg; } }
.bn-raf__prize img {
  position: relative; display: block; width: 84%; max-width: 420px; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 24px color-mix(in srgb, var(--rc) 40%, transparent));
  transform: rotate(-8deg); animation: bn-float 5s ease-in-out infinite;
}
@keyframes bn-float { 50% { translate: 0 -8px; } }
.bn-raf:hover .bn-raf__prize img { transform: rotate(-8deg) scale(1.04); transition: transform .3s; }
.bn-raf__prize.is-art img { width: 70%; aspect-ratio: auto; filter: none; transform: none; animation: none; }
.bn-raf__prize.is-art .bn-raf__rays { display: none; }
@media (prefers-reduced-motion: reduce) { .bn-raf__rays, .bn-raf__prize img { animation: none; } }
.bn-raf__badge {
  position: absolute; left: 18px; top: 18px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: color-mix(in srgb, var(--rc) 18%, rgba(12, 9, 24, .7));
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.bn-raf__tag {
  position: absolute; left: 18px; bottom: 16px;
  padding: 5px 12px; border-radius: 10px; background: rgba(12, 9, 24, .62); border: 1px solid rgba(109, 234, 93, .28);
  font-family: var(--f-cond), sans-serif; font-size: 22px; font-weight: 600;
  color: var(--money, #6DEA5D); font-variant-numeric: tabular-nums;
}
.bn-raf__tag:empty { display: none; }

.bn-raf__main { display: flex; flex-direction: column; padding: 30px 34px; min-width: 0; }
.bn-live { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; color: var(--bn-mint); }
.bn-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: bn-pulse 1.6s ease-in-out infinite;
}
@keyframes bn-pulse { 50% { opacity: .35; } }
.bn-raf .bn-h { font-size: 34px; overflow-wrap: anywhere; }
.bn-raf__sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--bn-mute); }
.bn-raf__sub b { font-weight: 600; }
.bn-timer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; }
.bn-timer b {
  font-family: var(--f-cond), sans-serif; font-size: 44px; font-weight: 500; line-height: 1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.bn-timer span { font-size: 12.5px; color: var(--bn-mute); }

/* все розыгрыши строкой: тир, сколько призов, самый дорогой */
.bn-raf__tiers {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none;
}
.bn-tier {
  --tc: #8847ff;
  display: grid; grid-template-columns: 1fr; justify-items: start; gap: 2px; height: 100%; box-sizing: border-box;
  padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--bn-hair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, transparent), rgba(255, 255, 255, .02));
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, background-color .15s;
}
.bn-tier:hover { border-color: color-mix(in srgb, var(--tc) 60%, transparent); transform: translateY(-2px); }
.bn-tier.is-main { border-color: rgba(215, 255, 0, .55); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .2); }
.bn-tier img { width: 64px; height: 48px; margin: -2px 0 2px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.bn-tier > i { width: 64px; height: 48px; }
.bn-tier__t { min-width: 0; max-width: 100%; }
.bn-tier__t b { display: block; font-family: var(--f-cond), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bn-tier__t i { display: block; overflow: hidden; font-style: normal; font-size: 11.5px; color: var(--bn-mute); white-space: nowrap; text-overflow: ellipsis; }
.bn-tier__v { margin-top: 4px; font-family: var(--f-cond), sans-serif; font-size: 15px; font-weight: 600; color: var(--money, #6DEA5D); font-variant-numeric: tabular-nums; white-space: nowrap; }

.bn-raf__act { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 22px; }
.bn-raf__fund { font-size: 13px; color: var(--bn-mute); }
.bn-raf__fund b { font-weight: 600; color: var(--money, #6DEA5D); font-variant-numeric: tabular-nums; }

/* ═══════════════ АДАПТИВ ═══════════════ */
/* Шапка на 1320px+: по бокам колонки есть место — блок шириной 1280,
   как шапка VIP. */
@media (min-width: 1320px) {
  .bn-top { margin-inline: -40px; }
}
/* Шапка уже 1240px: лид уже, кнопки столбиком — в ряд правая дошла бы до
   кейса спецназовца, а персонажи мельчают. */
@media (max-width: 1240px) {
  .bn-top { --tr: 400px; --tx: 280px; }
  .bn-top__cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1100px) {
  /* Шапка: персонажи сверху во всю ширину окна, текст под ними и чуть
     заходит на затухающий низ арта (как у VIP на телефоне). Уже 1100px
     текст слева оставил бы персонажам меньше трети высоты блока — пустая
     подложка над ними, а не сцена. Высота арта — --ah, картинка по центру
     и чуть шире экрана на телефоне: срезы рук по краям уходят за край,
     головы остаются целыми. */
  .bn-top { --ah: min(46vw, 400px); --lx: 50%; display: block; min-height: 0; margin: 0 0 8px; padding: 0 4px 4px; }
  .bn-top__art {
    position: relative; inset: auto; height: var(--ah); margin: 0 -24px; border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  .bn-top__pic { right: auto; left: 50%; width: calc(var(--ah) * 2.4034); margin-left: calc(var(--ah) * -1.2017); }
  .bn-top__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .bn-top__art::after { background: linear-gradient(180deg, rgba(11, 7, 24, 0) 50%, rgba(11, 7, 24, .7) 100%); }
  .bn-top__body { margin-top: -40px; }
  .bn-top__lead { max-width: 56ch; font-size: 15px; }
  .bn-top__cta { flex-direction: row; align-items: center; }
  .bn-top__cta .bn-btn { min-width: 220px; }

  .bn-raf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .bn-raf__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bn-row { grid-template-columns: minmax(0, 1fr); }
  .bn-hero { grid-template-columns: minmax(0, 1fr) 280px; }
  .bn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-dep { min-height: 400px; }
  .bn-raf { grid-template-columns: minmax(0, 1fr); }
  .bn-raf__prize { min-height: 280px; }
  .bn-raf__tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bn-page { padding: 0 12px 48px; }
  .bn-top__art { margin: 0 -16px; }
  .bn-top__body { gap: 10px; }
  .bn-top__eyebrow { height: 26px; padding: 0 10px; font-size: 11.5px; }
  .bn-top__title { font-size: 42px; }
  .bn-top__lead { font-size: 14px; line-height: 1.5; }
  .bn-top__cta { align-self: stretch; gap: 8px; margin-top: 4px; }
  .bn-top__cta .bn-btn { flex: 1 1 100%; min-width: 0; height: 46px; }
  /* на телефоне оглавление — ровная сетка 2 × 2, а не строка с переносом */
  .bn-index { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 0 22px; margin-bottom: 12px; }
  .bn-index a { padding: 6px 0; }
  .bn-index a { font-size: 12px; }
  .bn-sec { border-radius: 16px; }

  /* телефон: текст сверху, девушка снизу — в правом нижнем углу карточки */
  .bn-hero { grid-template-columns: minmax(0, 1fr);
    background:
      radial-gradient(70% 34% at 72% 90%, rgba(150, 60, 255, .34), transparent 72%),
      linear-gradient(180deg, #281F4B, #1F1840);
  }
  .bn-hero__txt { padding: 24px 20px 0; }
  .bn-hero .bn-h { font-size: 32px; }
  .bn-hero__act .bn-btn { flex: 1 1 100%; }
  .bn-hero__art { min-height: 0; height: 230px; margin-top: 4px; }
  .bn-hero__art img { height: 100%; }

  .bn-row { gap: 12px; margin-top: 12px; }
  .bn-dep { min-height: 0; padding: 0 20px 24px; }
  .bn-dep__tiers { margin: 0 -4px; padding: 66px 0 14px; gap: 2px; }
  .bn-dep__tiers b { font-size: 11px; letter-spacing: .03em; }
  .bn-dep__tiers span { font-size: 10.5px; }
  .bn-dep .bn-h, .bn-tg .bn-h { font-size: 30px; }
  .bn-dep__act .bn-btn, .bn-tg__act .bn-btn { flex: 1 1 100%; }

  .bn-tg { padding-bottom: 24px; }
  .bn-tg__art { height: 120px; }
  .bn-tg__body { padding: 22px 20px 0; }
  .bn-ticket { --stub: 124px; }

  .bn-raf { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .bn-raf__prize { min-height: 230px; }
  .bn-raf__prize img { max-width: 290px; }
  .bn-raf__main { padding: 22px 20px; }
  .bn-raf__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-raf .bn-h { font-size: 28px; }
  .bn-timer b { font-size: 40px; }
  .bn-raf__act .bn-btn { width: 100%; }
}
/* узкий телефон: без картинки — блок не растягивается на два экрана */
@media (max-width: 560px) {
  .bn-hero__art { display: none; }
  .bn-hero__txt { padding-bottom: 24px; }
}
@media (max-width: 380px) {
  .bn-index { gap: 0 14px; }
  .bn-hero .bn-h { font-size: 29px; }
  .bn-steps span { font-size: 12.5px; }
  .bn-kick { gap: 8px; letter-spacing: .09em; }
}
@media (max-width: 360px) {
  .bn-ticket { --stub: 108px; }
  .bn-ticket input { padding: 0 14px; font-size: 15px; letter-spacing: .1em; }
  .bn-ticket button { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-page *, .bn-page *::before, .bn-page *::after { transition: none !important; animation: none !important; }
}