/*!
Theme Name: Pinco
Theme URI: #
Description: Конверсионный шаблон казино под контент из панели.
Version: 2.9.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: pinco
*/

/* =========================================================================
   1. Токены
   ========================================================================= */

:root {
  /* фирменные цвета сняты с логотипа Pinco */
  --red: #E11507;
  --red-lt: #FF3D26;
  --red-dk: #9E0E04;
  --gold: #E5AC26;
  --gold-lt: #FFD469;
  --gold-dk: #B7841A;
  --green: #17A83E;
  --green-lt: #2ED160;

  --bg: #07080B;
  --bg-1: #0C0E13;
  --bg-2: #12151C;
  --bg-3: #1A1E28;
  --bg-4: #232836;
  --line: #232734;
  --line-2: #333949;

  --text: #EDEFF4;
  --text-2: #B4BAC9;
  --muted: #838B9C;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --wrap: 1200px;
  --prose: 780px;

  --sh: 0 10px 40px rgba(0, 0, 0, .5);
  --sh-red: 0 8px 30px rgba(225, 21, 7, .38);
  --sh-gold: 0 8px 30px rgba(229, 172, 38, .28);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================================
   2. База
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden здесь не стоит намеренно. Это костыль: он прячет
     переполнение вместо того, чтобы его чинить, и заодно ломает
     position: sticky у потомков. Замеры на 360/375/390/414, включая
     стресс с текстом на 40% длиннее под автоперевод, показывают, что
     прятать нечего. Если переполнение появится — искать настоящую
     причину, а не возвращать эту строку. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -.022em; color: #fff; }
b, strong { font-weight: 700; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.i { flex: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ссылка «к содержимому» — видна только с клавиатуры */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  padding: 11px 18px; border-radius: 0 0 10px 0;
  background: var(--gold); color: #1B1300; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; text-decoration: none; }

/* появление блоков при прокрутке */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================================
   3. Кнопки
   ========================================================================= */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--bg-3); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
/* Подпись кнопки приходит из словаря и удлиняется при автопереводе.
   При тексте на 40% длиннее строка в nowrap выталкивала страницу на
   22-77 точек при 320-375 — замер боевого .net. Ниже 480 подпись
   переносится, кнопка растёт вниз, а не вбок. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}

.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Белый текст на светлом краю красного даёт 3.53:1 при норме 4.5 —
   замер живого сайта на 390 и 1440. Фирменный красный --red проходит
   (4.87:1), поэтому текстовые поверхности начинаются с него, а светлый
   --red-lt остаётся украшением: рамки, свечения, значки без текста. */
.btn--primary {
  background: linear-gradient(135deg, var(--red), var(--red) 48%, var(--red-dk));
  box-shadow: var(--sh-red);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 55%);
  pointer-events: none;
}
.btn--primary:hover { box-shadow: 0 12px 38px rgba(225, 21, 7, .55); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 50%, var(--gold-dk));
  color: #1B1300; box-shadow: var(--sh-gold);
}

.btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(229, 172, 38, .08); }

.btn--lg { padding: 16px 34px; font-size: 16px; border-radius: 13px; }
.btn--full { width: 100%; }

/* =========================================================================
   4. Индикатор прокрутки
   ========================================================================= */

.progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; background: transparent; }
.progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width .1s linear;
}

/* =========================================================================
   5. Шапка
   ========================================================================= */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 8, 11, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 26px; min-height: 72px; }
.hdr__logo img { width: 128px; height: auto; }

.nav { margin-inline-start: auto; }
/* Список переносится: при подписях на 40% длиннее (автоперевод) пункты
   не ужимались ниже своей ширины — li не даёт себя сжать — и наезжали на
   кнопку, а шапка вылезала на 35 точек при 1200. Перенос делает шапку
   выше, но строку не рвёт. */
.nav__list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__list li { min-width: 0; }
.nav__list a {
  display: block; padding: 9px 14px; border-radius: 9px;
  color: var(--text-2); font-size: 15px; font-weight: 600;
  transition: color .15s, background .15s;
}
.nav__list a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav__list a[aria-current="page"] { color: var(--gold); background: rgba(229, 172, 38, .12); }

.hdr__cta { display: flex; gap: 10px; min-width: 0; }
/* Меню ужимается само; иначе ширина считается по содержимому и длинные
   подписи выталкивают шапку за экран. */
.hdr__in, .nav, .nav__list { min-width: 0; }

/* На 1120-1400 в строку помещается только одна кнопка: при подписях на
   40% длиннее шапка вылезала на 128-248 точек (замер .net на 1200 и 1440).
   Гаснет второстепенная — «вход»; действие остаётся. */
@media (max-width: 1400px) {
  .hdr__cta .btn--ghost { display: none; }
  /* Оставшейся кнопке разрешаем перенос подписи: при удлинённом тексте
     она в nowrap всё равно вылезала на 35 точек при 1200. */
  .hdr__cta .btn { white-space: normal; text-align: center; padding: 11px 18px; }
}

.burger {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; padding: 0 11px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: .22s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   6. Hero
   ========================================================================= */

.hero {
  position: relative;
  padding: 60px 0 54px;
  background: linear-gradient(180deg, #0D1017 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__fx {
  position: absolute; inset: -20% -10% auto; height: 120%;
  background:
    radial-gradient(760px 380px at 14% 8%, rgba(225, 21, 7, .30), transparent 62%),
    radial-gradient(620px 320px at 84% 0%, rgba(229, 172, 38, .20), transparent 64%),
    radial-gradient(500px 260px at 60% 100%, rgba(23, 168, 62, .10), transparent 66%);
  pointer-events: none;
}

.hero__in { position: relative; display: grid; grid-template-columns: 1fr 372px; gap: 52px; align-items: center; }
.hero:not(.hero--front) .hero__in { align-items: start; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; margin-bottom: 22px;
  border: 1px solid rgba(229, 172, 38, .32); border-radius: 100px;
  background: rgba(229, 172, 38, .08);
  color: var(--gold); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.hero__badge i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.hero__badge > span { white-space: nowrap; }

.hero__title { font-size: clamp(32px, 5.2vw, 54px); margin-bottom: 20px; text-wrap: balance; }

.hero__lead {
  margin: 0 0 30px; max-width: 62ch;
  color: var(--text-2); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65;
}
.hero__lead strong { color: #fff; }

.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__meta { color: var(--muted); font-size: 14px; }

/* карточка оффера */
.offer {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(229, 172, 38, .3); border-radius: var(--r-lg);
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(229, 172, 38, .16), transparent 70%),
    linear-gradient(165deg, #191D27, #10131A);
  box-shadow: var(--sh);
}
.offer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.offer__tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(225, 21, 7, .16); color: #FF7A66;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.offer__rate { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.offer__rate b { color: var(--gold); }

.offer__amount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.offer__amount b {
  font-size: 54px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 60%, var(--gold-dk));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer__amount span { color: var(--text); font-size: 17px; font-weight: 700; }

.offer__desc { margin: 0 0 20px; color: var(--text-2); font-size: 15px; }

.offer__fine {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 13px; color: var(--muted); font-size: 12.5px;
}
.offer__fine .i { color: var(--green); }

/* звёзды */
.offer__stars, .score__stars, .rating__stars {
  --v: 100%;
  display: inline-block; height: 15px;
  background: linear-gradient(90deg, var(--gold) var(--v), #3B4152 var(--v));
  -webkit-mask: repeat-x left center / 17.4px 15px var(--star);
  mask: repeat-x left center / 17.4px 15px var(--star);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M8 0l2.2 4.9 5.3.5-4 3.6 1.2 5.2L8 11.5 3.3 14.2l1.2-5.2-4-3.6 5.3-.5z' fill='%23fff'/%3E%3C/svg%3E");
}
.offer__stars, .rating__stars { width: 87px; }

/* полоса доверия */
.trustbar { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 32px 0 0; padding: 0; list-style: none; }
.trustbar li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 600; }
.trustbar__ico { display: flex; color: var(--green); }

/* =========================================================================
   7. Лента выигрышей
   ========================================================================= */

.ticker {
  position: relative; display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-1), #0E1118);
  overflow: hidden;
}
.ticker__label {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 0 22px; height: 58px;
  border-inline-end: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  z-index: 2;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(23, 168, 62, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(23, 168, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 168, 62, 0); }
}

.ticker__viewport { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track {
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.ticker__item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px; height: 58px;
  border-inline-end: 1px solid var(--line);
  white-space: nowrap; font-size: 14px;
}
.ticker__ava {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-dk));
  color: #fff; font-size: 13px; font-weight: 800;
}
.ticker__who { color: var(--text); font-weight: 700; }
.ticker__game { color: var(--muted); }
.ticker__sum { color: var(--green-lt); font-weight: 800; }

/* =========================================================================
   8. Счётчики
   ========================================================================= */

.main { padding-top: 56px; padding-bottom: 80px; }

/* лента и счётчики — два разных блока, между ними нужен явный воздух */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.stats__item {
  padding: 18px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(170deg, var(--bg-2), var(--bg-1));
  transition: border-color .25s, transform .25s var(--ease);
}
.stats__item:hover { border-color: var(--line-2); transform: translateY(-3px); }
.stats__v {
  display: block; margin-bottom: 3px;
  font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff, #9AA2B5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stats__l { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================================
   9. Секции
   ========================================================================= */

.sec { padding: 52px 0 0; }
.sec__head { max-width: 640px; margin-bottom: 24px; }
.sec__title {
  position: relative; padding-top: 16px; margin-bottom: 8px;
  font-size: clamp(24px, 3.2vw, 32px);
}
.sec__title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.sec__sub { margin: 0; color: var(--muted); font-size: 15px; }

/* =========================================================================
   10. Карточки бонусов
   ========================================================================= */

.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.bcard {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--bg-2), var(--bg-1));
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.bcard:hover { transform: translateY(-4px); border-color: rgba(229, 172, 38, .4); box-shadow: var(--sh); }

.bcard--hot {
  border-color: rgba(225, 21, 7, .45);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(225, 21, 7, .18), transparent 70%),
    linear-gradient(170deg, var(--bg-2), var(--bg-1));
}

.bcard__tag {
  position: absolute; top: -11px; inset-inline-start: 24px;
  padding: 4px 13px; border-radius: 100px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold-dk));
  color: #1B1300; font-size: 11.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
}
.bcard--hot .bcard__tag { background: linear-gradient(135deg, var(--red), var(--red-dk)); color: #fff; }

.bcard__art {
  position: absolute; top: 16px; inset-inline-end: 16px;
  opacity: .9; pointer-events: none;
  transition: transform .35s var(--ease);
}
.bcard:hover .bcard__art { transform: translateY(-4px) scale(1.05); }
.bcard__art .bart { display: block; }

.bcard__title { position: relative; font-size: 17px; margin-bottom: 12px; color: var(--text-2); font-weight: 700; max-width: 60%; }

.bcard__amount { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.bcard__amount b {
  font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bcard__amount span { color: var(--text); font-size: 15px; font-weight: 700; }

.bcard__desc { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }

.bcard__terms { margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.bcard__terms > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.bcard__terms dt { color: var(--muted); font-size: 14px; }
.bcard__terms dd { margin: 0; color: #fff; font-size: 14px; font-weight: 700; }

.promo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 14px; padding: 11px 14px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03); cursor: pointer;
  font: inherit; color: var(--text); text-align: start;
  transition: border-color .2s, background .2s;
}
.promo:hover { border-color: var(--gold); background: rgba(229, 172, 38, .07); }
/* в карточке оффера кнопка кода стоит вплотную к главной кнопке */
.offer .promo { width: 100%; margin-bottom: 12px; }
.promo__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.promo__code { margin-inline-start: auto; color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.promo__ico { display: flex; color: var(--muted); }
.promo.is-copied { border-color: var(--green); border-style: solid; }
.promo.is-copied .promo__code { color: var(--green-lt); }

.bcard .btn { margin-top: auto; }

/* =========================================================================
   11. Шаги
   ========================================================================= */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps__item {
  position: relative; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-1);
  transition: border-color .25s, transform .25s var(--ease);
}
.steps__item:hover { border-color: var(--line-2); transform: translateY(-3px); }
.steps__item:not(:last-child)::after {
  content: ""; position: absolute; top: 44px; inset-inline-end: -10px;
  width: 20px; height: 1px; background: var(--line-2);
}
.steps__n {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--red), var(--red-dk));
  color: #fff; font-size: 17px; font-weight: 900;
  box-shadow: 0 4px 16px rgba(225, 21, 7, .3);
}
.steps__body h3 { font-size: 16px; margin-bottom: 7px; }
.steps__body p { margin: 0; color: var(--muted); font-size: 14.5px; }
.steps__cta { margin-top: 26px; text-align: center; }

/* =========================================================================
   12. Игры
   ========================================================================= */

.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Колонка 1fr по умолчанию не уже своего содержимого, а карточки внутри
   держат неразрывные подписи. Без этого на 360px сетка распирает экран. */
.games > *, .pays > *, .bcards > *, .steps > *, .cats > *,
.apps > *, .sups > *, .smap > *, .stats > * { min-width: 0; }

.game {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-1); color: var(--text);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.game:hover { border-color: rgba(229, 172, 38, .42); transform: translateY(-3px); background: var(--bg-2); text-decoration: none; }

.game__art {
  position: relative; display: grid; place-items: center; flex: none;
  width: 82px; height: 59px; border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  transition: transform .3s var(--ease);
}
.game__art .art { display: block; width: 100%; height: 100%; }
.game__art .cover { width: 100%; height: 100%; object-fit: cover; }
.game:hover .game__art { transform: scale(1.06) rotate(-2deg); }
.game__glow {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .3), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.game:hover .game__glow { opacity: 1; }

.game__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.game__name { color: #fff; font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* В третьей колонке таблицы из контента лежит не провайдер, а описание
   на пару предложений. Без ограничения оно растит карточку и — после
   авто-перевода страницы — становится ещё длиннее. */
.game__prov {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45;
}

/* метка справа должна ужиматься: названия из контента бывают длинными
   и на узком экране распирали карточку за пределы экрана */
/* Колонка с RTP не сжимается: внутри неразрывные строки, и при min-width: 0
   они вылезали поверх описания. Ширину ограничиваем долей карточки —
   длинную метку обрежет многоточием. */
.game__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: none; max-width: 46%; margin-inline-start: auto; text-align: end;
}
.game__rtp { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.game__rtp b { color: var(--green-lt); font-weight: 800; }
.game__tag {
  max-width: 100%; padding: 2px 9px; border-radius: 100px;
  background: rgba(255, 255, 255, .06); color: var(--text-2);
  font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game__play { display: flex; color: var(--muted); transition: transform .25s var(--ease), color .25s; }
.game:hover .game__play { color: var(--gold); transform: translateX(3px); }

.provs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.provs__l { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.provs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.provs li {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg-1); color: var(--text-2); font-size: 13px; font-weight: 600;
}

/* =========================================================================
   13. Платежи
   ========================================================================= */

.pays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pay {
  display: grid; gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1);
  transition: border-color .25s, transform .25s var(--ease);
}
.pay:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pay__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.pay__ico { display: flex; align-items: center; flex: none; width: 26px; height: 22px; }
.pay__ico .paymark { display: block; width: 26px; height: 26px; }
/* марки брендов монохромные — на тёмном фоне держим их светлыми */
.pay__ico .paylogo {
  display: block; width: 100%; height: 22px; object-fit: contain;
  fill: #fff; opacity: .88;
  transition: opacity .25s, fill .25s;
}
.pay:hover .pay__ico .paylogo { opacity: 1; fill: var(--gold-lt); }
.pay__name {
  color: #fff; font-weight: 700; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.pay__row span { color: var(--muted); }
.pay__row b { color: var(--text); font-weight: 700; }

/* =========================================================================
   14. Рейтинг
   ========================================================================= */

.score {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  padding: 32px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(500px 240px at 0% 0%, rgba(229, 172, 38, .12), transparent 70%),
    linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.score__total { text-align: center; }
.score__big {
  font-size: 66px; font-weight: 900; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score__stars { width: 105px; height: 18px; margin: 10px auto 8px; background-size: 20.9px 18px; }
.score__cap { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

.score__bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.score__bars li { display: grid; grid-template-columns: 160px 1fr 36px; gap: 16px; align-items: center; }
.score__l { color: var(--text-2); font-size: 14.5px; }
.score__bar { height: 7px; border-radius: 100px; background: var(--bg-4); overflow: hidden; }
.score__bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width 1s var(--ease);
}
.score.is-in .score__bar i { width: var(--w); }
.score__bars b { color: var(--gold); font-size: 14px; text-align: end; font-variant-numeric: tabular-nums; }

/* =========================================================================
   15. Большой CTA
   ========================================================================= */

.ctabig {
  position: relative; margin-top: 62px;
  padding: 46px 40px;
  border: 1px solid rgba(229, 172, 38, .3); border-radius: var(--r-lg);
  background: linear-gradient(150deg, #1A1016, #0F1218 60%);
  overflow: hidden; text-align: center;
}
.ctabig__glow {
  position: absolute; inset: -50% -10% auto; height: 200%;
  background:
    radial-gradient(500px 260px at 20% 20%, rgba(225, 21, 7, .28), transparent 62%),
    radial-gradient(460px 240px at 82% 30%, rgba(229, 172, 38, .22), transparent 64%);
  pointer-events: none;
}
.ctabig__deco { position: absolute; inset: 0; opacity: .8; pointer-events: none; }
.ctabig__deco .deco { width: 100%; height: 100%; }

.ctabig__body { position: relative; max-width: 620px; margin-inline: auto; }
.ctabig__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 18px;
  border-radius: 100px; background: rgba(229, 172, 38, .14);
  color: var(--gold); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.ctabig__title { font-size: clamp(25px, 3.6vw, 36px); margin-bottom: 12px; }
.ctabig__sub { margin: 0 0 26px; color: var(--text-2); font-size: 16.5px; }
.ctabig__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ctabig__note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.ctabig__note .i { color: var(--green); }

/* =========================================================================
   16. Липкая панель
   ========================================================================= */

.sticky {
  position: fixed; inset: auto 0 0; z-index: 55;
  border-top: 1px solid rgba(229, 172, 38, .3);
  background: rgba(10, 12, 17, .95);
  backdrop-filter: blur(14px);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}
.sticky.is-on { transform: none; }
.sticky__in {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: var(--wrap); margin-inline: auto; padding: 12px 20px;
  min-width: 0;
}
/* Полоса не имеет права толкать страницу вширь: текст ужимается,
   кнопка занимает своё и не меньше. */
.sticky__in > * { min-width: 0; }
.sticky__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.sticky__text b { color: #fff; font-size: 15px; }
.sticky__text span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Мобильная полоса: видна всегда и от скролла не зависит.
   Правило идёт после .sticky и .sticky.is-on, поэтому перебивает оба —
   что бы JS ни делал с классом, на узком экране кнопка на месте. Это
   же снимает зависимость от main.js: полоса живёт и без него.
   Отступ снизу у body — чтобы полоса не накрывала ссылки подвала;
   раньше её ради этого гасили у футера, и в самом конце страницы,
   где решение как раз и принимается, кнопки не было. */
/* Порог тот же, что у компактной шапки (1120), а не 960: выше по файлу
   .hdr__cta прячется до 1120, и без этого на полосе 961–1119 кнопки не было
   бы вовсе до первого скролла — полоса там показывалась только по классу
   от main.js. */
@media (max-width: 1120px) {
  .sticky { transform: none; padding-bottom: env(safe-area-inset-bottom); }
  .sticky__in { padding: 10px 16px; gap: 12px; }
  .sticky__text b { font-size: 14px; }
  .sticky__text span { font-size: 12px; }

  /* заметность добирается массой и свечением, цвет остаётся фирменным */
  .sticky .btn--primary {
    flex: none; padding: 13px 22px; font-size: 15px;
    box-shadow: 0 0 0 1px rgba(229, 172, 38, .45), 0 8px 22px rgba(214, 40, 40, .45);
  }

  /* с запасом: полоса ростом 67px, и впритык её нижняя кромка ложилась
     ровно на последнюю строку подвала */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   17. Статья
   ========================================================================= */

.article { max-width: var(--prose); margin: 62px auto 0; }

.crumbs { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }

/* карточка фактов из контента */
.factcard {
  margin: 0 0 32px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: radial-gradient(600px 200px at 100% 0%, rgba(229, 172, 38, .1), transparent 70%), var(--bg-1);
  overflow: hidden;
}
.factcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.factcard__brand { display: flex; align-items: center; gap: 16px; }
.factcard__logo { width: 104px; }
.factcard__name { font-weight: 800; font-size: 16px; color: #fff; }
.rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.rating b { color: var(--gold); font-size: 15px; }
.rating__max { font-size: 12px; }

.factcard__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.factcard__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 0; background: var(--line); }
.factcard__item { padding: 13px 24px; background: var(--bg-1); }
.factcard__item dt {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.factcard__item dt .ico { color: var(--gold); flex: none; }
.factcard__item dd { margin: 3px 0 0; color: #fff; font-size: 15px; font-weight: 600; }

/* оглавление */
.toc { margin: 0 0 32px; padding: 6px 20px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); }
.toc__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 0; background: none; border: 0; cursor: default;
  color: #fff; font: inherit; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .07em;
}
.toc__chev { display: none; color: var(--muted); transition: transform .2s; }
.toc__list { margin: 0; padding: 0 0 0 2px; list-style: none; }
.toc__list li + li { margin-top: 2px; }
.toc__list a { display: flex; gap: 12px; padding: 7px 8px; border-radius: 8px; color: var(--text-2); font-size: 15px; }
.toc__list a:hover { background: var(--bg-3); color: #fff; text-decoration: none; }
.toc__list a[aria-current] { color: var(--gold); background: rgba(229, 172, 38, .08); }
.toc__list span { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

/* полотно */
.prose { font-size: 17px; color: var(--text-2); }
.prose > h2 {
  position: relative; margin: 44px 0 18px; padding-top: 22px;
  font-size: clamp(23px, 3.2vw, 30px);
  border-top: 1px solid var(--line); scroll-margin-top: 92px;
}
.prose > h2::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 58px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 12px; font-size: clamp(19px, 2.4vw, 22px); scroll-margin-top: 92px; }
.prose p { margin: 0 0 18px; }
.prose strong { color: #fff; }
.prose em { color: var(--gold); font-style: normal; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose ul.list-check { margin: 0 0 22px; padding: 0; list-style: none; }
.prose ul.list-check li { position: relative; padding-inline-start: 32px; margin-bottom: 11px; }
.prose ul.list-check li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .36em;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(23, 168, 62, .15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath d='M5.4 9.7l2.6 2.6 5.4-5.6' fill='none' stroke='%232ED160' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.prose ol.list-step { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: step; }
.prose ol.list-step li { position: relative; padding-inline-start: 40px; margin-bottom: 14px; counter-increment: step; }
.prose ol.list-step li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: .06em;
  display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px;
  background: linear-gradient(135deg, var(--red), var(--red-dk));
  color: #fff; font-size: 13px; font-weight: 800;
}

.tbl { margin: 0 0 26px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th {
  padding: 13px 16px; text-align: start; background: var(--bg-4); color: #fff;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.tbl td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text-2); }
.tbl tr:hover td { background: rgba(255, 255, 255, .02); }
.tbl td:first-child { color: #fff; font-weight: 600; }
.tbl td strong { color: var(--gold); }

.prose figure { margin: 0 0 26px; }
.prose img { border-radius: var(--r); }
.prose figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; text-align: center; }


/* --- разметка, которую присылает панель ---------------------------------
   В контенте живут классы прежнего шаблона: card__wrap с парой карточек,
   contrast__wrap как выделенная полоса, figureh2__wrap как «картинка +
   текст». Панель продолжает их присылать, поэтому тема обязана их
   оформлять, иначе блоки выпадают из дизайна голым текстом. -------------- */

.prose .card__wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 0 0 24px;
}
.prose .card__item {
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(170deg, var(--bg-2), var(--bg-1));
}
.prose .card__item > :first-child { margin-top: 0; }
.prose .card__item > :last-child { margin-bottom: 0; }
.prose .card__item h3 { margin: 0 0 8px; font-size: 17px; }
.prose .card__item p { font-size: 15.5px; }

.prose .contrast__wrap {
  position: relative; margin: 0 0 26px; padding: 22px 24px;
  border: 1px solid rgba(255, 198, 41, .001);
  border-inline-start: 4px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  background: radial-gradient(600px 200px at 0% 0%, rgba(229, 172, 38, .1), transparent 70%), var(--bg-1);
}
.prose .contrast__wrap > :first-child { margin-top: 0; }
.prose .contrast__wrap > :last-child { margin-bottom: 0; }
.prose .contrast__wrap h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: clamp(20px, 2.6vw, 25px); }
.prose .contrast__wrap h2::before { display: none; }
.prose .container { margin: 0; padding: 0; max-width: none; }

.prose .figureh2__wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; align-items: center; margin: 0 0 26px;
}
.prose .figureh2__item > :first-child { margin-top: 0; }
.prose .figureh2__item > :last-child { margin-bottom: 0; }
.prose .figureh2__item h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose .figureh2__item h2::before { display: none; }

/* Иллюстрации из панели приходят квадратами 1024x1024 и весят до 1.7 МБ,
   часть файлов на боевом обрезана и снизу уходит в чёрное. Поэтому кадр
   режем по верхней части: и полосой смотрится лучше, и брак не видно. */
.prose figure.wp-block-image {
  position: relative; margin: 0 0 26px; border-radius: var(--r); overflow: hidden;
}
/* нижняя растушёвка: кадр садится на фон страницы, а не обрывается полосой */
.prose figure.wp-block-image::after {
  content: ""; position: absolute; inset: auto 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 11, .85) 78%, var(--bg));
  pointer-events: none;
}
.prose figure.wp-block-image img {
  display: block; width: 100%; aspect-ratio: 21 / 9;
  object-fit: cover; object-position: center top;
  background: var(--bg-2);
}
.prose .figureh2__wrap figure.wp-block-image img { aspect-ratio: 4 / 3; }
.prose figure.wp-block-image figcaption {
  margin-top: 8px; color: var(--muted); font-size: 14px; text-align: center;
}

@media (max-width: 640px) {
  .prose .card__wrap, .prose .figureh2__wrap { grid-template-columns: 1fr; }
  .prose .contrast__wrap { padding: 18px; }
}

/* CTA-полоса внутри полотна */
.ctabar {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin: 34px 0; padding: 22px 24px;
  border: 1px solid rgba(229, 172, 38, .28); border-radius: var(--r);
  background: radial-gradient(500px 180px at 0% 0%, rgba(225, 21, 7, .2), transparent 70%),
              linear-gradient(135deg, #171A22, #14161D);
}
.ctabar__text { display: flex; flex-direction: column; gap: 2px; }
.ctabar__text strong { color: #fff; font-size: 18px; font-weight: 800; }
.ctabar__text span { color: var(--text-2); font-size: 15px; }

/* FAQ */
.faq { margin: 46px 0 0; }
.faq__title { position: relative; margin: 0 0 20px; padding-top: 22px; font-size: clamp(23px, 3.2vw, 30px); border-top: 1px solid var(--line); }
.faq__title::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 58px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); overflow: hidden; transition: border-color .2s; }
.faq__item[open] { border-color: rgba(229, 172, 38, .38); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; color: #fff; font-weight: 700; font-size: 16px;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: rgba(255, 255, 255, .02); }
.faq__q svg { color: var(--gold); transition: transform .22s var(--ease); }
.faq__item[open] .faq__q svg { transform: rotate(180deg); }
.faq__a { padding: 0 20px 18px; color: var(--text-2); }
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }

/* =========================================================================
   18. Подвал
   ========================================================================= */

.ftr { border-top: 1px solid var(--line); background: #050608; }
.ftr__in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding-block: 48px; }
.ftr__logo { width: 118px; margin-bottom: 16px; }
.ftr__note { margin: 0 0 18px; color: var(--muted); font-size: 14px; max-width: 46ch; }
.ftr__age { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; max-width: 46ch; }
.age {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; border: 2px solid var(--red); color: var(--red-lt); font-weight: 800; font-size: 13px;
}
.ftr__h { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.ftr__nav ul { margin: 0; padding: 0; list-style: none; }
.ftr__nav li + li { margin-top: 9px; }
.ftr__nav a { color: var(--text-2); font-size: 15px; }
.ftr__nav a:hover { color: var(--gold); }
.ftr__bottom { border-top: 1px solid var(--line); }
.ftr__bottom .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 18px; color: var(--muted); font-size: 14px;
}
.totop { color: var(--muted); }
.totop:hover { color: var(--gold); }

.partners { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 24px; }
.partners a { color: var(--muted); font-size: 13px; }
.partners__title { margin-bottom: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }


/* =========================================================================
   20. Модули внутренних страниц
   ========================================================================= */

/* --- мобильное приложение --- */
.apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.app {
  display: flex; flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--bg-2), var(--bg-1));
  transition: border-color .25s, transform .25s var(--ease);
}
.app:hover { border-color: rgba(229, 172, 38, .4); transform: translateY(-3px); }
.app__top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.app__os { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 19px; font-weight: 800; }
.app__os .i { color: var(--gold); }
.app__store {
  padding: 4px 11px; border-radius: 100px;
  background: rgba(255, 255, 255, .06); color: var(--text-2);
  font-size: 12.5px; font-weight: 600;
}
.app__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 14px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.app__specs > div { padding: 11px 14px; background: var(--bg-1); }
.app__specs dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.app__specs dd { margin: 3px 0 0; color: #fff; font-size: 15px; font-weight: 700; }
.app__note { margin: 0 0 18px; color: var(--muted); font-size: 14px; flex: 1; }

.feats { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.feats li {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--bg-1); color: var(--text-2); font-size: 13.5px; font-weight: 600;
}
.feats .i { color: var(--green); }

/* --- категории игр --- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1); color: var(--text);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.cat:hover { border-color: rgba(229, 172, 38, .4); background: var(--bg-2); transform: translateY(-2px); text-decoration: none; }
.cat__ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: 11px; background: rgba(229, 172, 38, .1); color: var(--gold);
}
.cat__name { color: #fff; font-weight: 700; font-size: 15px; }
.cat__count { margin-inline-start: auto; color: var(--green-lt); font-weight: 800; font-size: 14px; }

/* --- пояснение вейджера --- */
.wager {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center;
  padding: 28px 30px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: radial-gradient(500px 220px at 0% 0%, rgba(229, 172, 38, .1), transparent 70%),
              linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.wager__title { font-size: clamp(21px, 2.6vw, 26px); margin-bottom: 8px; }
.wager__sub { margin: 0; color: var(--muted); font-size: 14.5px; }
.wager__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wager__flow li {
  position: relative; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1);
}
.wager__flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: -8px;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--line-2); border-inline-end: 1.5px solid var(--line-2);
  transform: rotate(45deg);
}
.wager__flow span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.wager__flow b { display: block; margin-top: 4px; color: #fff; font-size: 17px; font-weight: 800; }
.wager__res { border-color: rgba(229, 172, 38, .45) !important; background: rgba(229, 172, 38, .07) !important; }
.wager__res b { color: var(--gold); }

/* --- поддержка --- */
.sups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sup {
  display: grid; gap: 3px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1);
}
.sup__ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px;
  border-radius: 11px; background: rgba(229, 172, 38, .1); color: var(--gold);
}
.sup__name { color: #fff; font-weight: 700; font-size: 15px; }
.sup__val { color: var(--text-2); font-size: 14px; }

/* --- карта сайта --- */
.smap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.smap__i {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1); color: var(--text-2); font-size: 15px; font-weight: 600;
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.smap__i:hover { border-color: var(--gold); color: #fff; transform: translateX(3px); text-decoration: none; }
.smap__i .i { color: var(--muted); flex: none; }
.smap__i:hover .i { color: var(--gold); }


/* --- блоки, которые вставляет панель ------------------------------------
   Панель кладёт в шапку свой smart-link.php со случайными классами из
   classes.json, а в подвал — партнёрские ссылки. Класс предугадать нельзя,
   поэтому чужой прямой потомок шапки получает те же отступы, что наш
   блок кнопок, и ссылки внутри выглядят кнопками. */

.hdr__in > div:not([class^="hdr"]):not([class^="nav"]):not(.burger) {
  display: flex; gap: 10px; align-items: center; margin-inline-start: auto;
}
/* Если панель свой блок вставила — свою пару кнопок убираем, иначе в шапке
   окажется четыре кнопки на две одинаковые ссылки. */
.hdr__in:has(> div:not([class^="hdr"]):not([class^="nav"]):not(.burger)) .hdr__cta {
  display: none;
}
.hdr__in > div:not([class^="hdr"]):not([class^="nav"]):not(.burger) > a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(255, 255, 255, .04); color: var(--text);
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.hdr__in > div:not([class^="hdr"]):not([class^="nav"]):not(.burger) > a:last-child {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red) 48%, var(--red-dk));
  box-shadow: var(--sh-red);
}

.partners { margin: 0 0 34px; }
.partners__title {
  margin: 0 0 12px; color: var(--muted);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.partners__list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.partners__list a { color: var(--text-2); font-size: 14px; }
.partners__list a:hover { color: var(--gold); }

@media (max-width: 960px) {
  .hdr__in > div:not([class^="hdr"]):not([class^="nav"]):not(.burger) { display: none; }
}

/* =========================================================================
   19. Адаптив
   ========================================================================= */

@media (max-width: 1100px) {
  .hero__in { grid-template-columns: 1fr 330px; gap: 34px; }
  .games { grid-template-columns: repeat(2, 1fr); }
  .pays { grid-template-columns: repeat(3, 1fr); }
  .wager { grid-template-columns: 1fr; gap: 22px; }
}

/* Шапка переключается на бургер раньше остального макета — на 1120px.

   Порог у неё свой и намеренно выше, чем 960 у прочих блоков ниже. При 960
   полоса 961–1119 рисовала горизонтальное меню там, где оно не помещается:
   на pinco-azerbaijan-vip.net пункты переносились на две строки, и фон
   активного пункта из «таблетки» превращался в кружок поверх соседей.
   В эту полосу попадает альбомный айпад — 1024.

   Замер по сайтам кластера: самой длинной шапке нужно 1011px. Порог 1120
   даёт запас: подписи меню у сайтов сети разные и меняются вместе
   с набором страниц.

   Остальные правила планшетного макета остались на 960 — их сюда переносить
   нельзя, там перестроение героя, карточек и подвала, и на 961–1119 они
   не нужны. */
@media (max-width: 1120px) {
  .hdr__cta { display: none; }
  /* кнопка меню уходит к правому краю, а не липнет к логотипу */
  .burger { display: flex; margin-inline-start: auto; }
  .nav {
    position: fixed; inset: 72px 0 auto; z-index: 40;
    max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 12px 20px 22px;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s var(--ease), visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__list a { padding: 12px 14px; font-size: 16px; }
}

/* Страховка от того же дефекта при любых подписях: пункт меню не переносится
   внутри себя, а значит фон-«таблетка» не станет вдвое выше. */
.nav__list a { white-space: nowrap; }

@media (max-width: 960px) {

  .hero__in { grid-template-columns: 1fr; gap: 32px; }
  .offer { max-width: 420px; }

  .bcards, .steps { grid-template-columns: repeat(2, 1fr); }
  .pays, .cats { grid-template-columns: repeat(2, 1fr); }
  .wager__flow { grid-template-columns: repeat(2, 1fr); }
  .wager__flow li:nth-child(2)::after { display: none; }
  .steps__item::after { display: none; }
  .score { grid-template-columns: 1fr; gap: 26px; }
  .score__bars li { grid-template-columns: 120px 1fr 34px; gap: 12px; }
  .ftr__in { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 42px; }
  /* бейдж должен остаться в одну строку, второй фрагмент лишний */
  .hero__badge i, .hero__badge-offer { display: none; }
  .hero__badge { font-size: 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bcards, .steps, .games, .pays, .cats, .apps, .sups, .smap { grid-template-columns: 1fr; }
  .wager__flow { grid-template-columns: 1fr; }
  .wager__flow li::after { display: none !important; }
  .wager { padding: 22px 20px; }
  .sec { padding-top: 48px; }
  .ctabig { padding: 34px 22px; margin-top: 48px; }
  .article { margin-top: 48px; }

  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__meta { width: 100%; }

  .ticker__label { padding: 0 14px; font-size: 11.5px; }
  .ticker__item { padding: 0 18px; }

  .sticky__text span { display: none; }

  .toc__toggle { cursor: pointer; }
  .toc__chev { display: block; }
  .toc__toggle[aria-expanded="true"] .toc__chev { transform: rotate(180deg); }
  .toc__list { display: none; }
  .toc__list.is-open { display: block; }

  .factcard__grid { grid-template-columns: 1fr; }
  .factcard__head { flex-direction: column; align-items: stretch; }
  .factcard__head .btn { width: 100%; }

  .ctabar .btn { width: 100%; }

  /* таблицы разворачиваются в карточки */
  .tbl { border: 0; background: none; overflow: visible; }
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { margin-bottom: 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); overflow: hidden; }
  .tbl td { border-top: 1px solid var(--line); padding: 11px 16px; }
  .tbl tr td:first-child { border-top: 0; }
  .tbl td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--muted); font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .hdr, .ticker, .sticky, .ctabig, .ctabar, .ftr, .toc, .progress, .hero__actions, .offer { display: none; }
  body { background: #fff; color: #000; }
}