/* Шаблон 09 «Сплит» — структурный каркас. Префикс .bracken-, палитра vavada2830.com задана в :root.
   Сквозное правило шаблона: экран поделён на две вертикальные половины. Левая (42 %) —
   залипающая панель во всю высоту окна, она не прокручивается; правая (58 %) — лента секций
   в узкой мере, которая едет под неподвижной левой. JS нет: активный раздел подсвечивается
   через :target + :has(). */

:root {
  --bg:    #0c120e;   /* фон правой ленты */
  --bg2:   #121a14;   /* фон левой панели, полосы CTA, футера */
  --card:  #18211a;   /* плашки, details, карточки отзывов, ячейки сводки */
  --line:  #222c25;   /* тонкие линии, разделители строк таблиц */
  --line2: #35443a;   /* вертикальная линия разреза, верхние линейки секций, шапки таблиц */
  --tx:    #eef4ef;   /* основной текст */
  --tx2:   #e0e6e1;   /* проза, ячейки таблиц */
  --tx3:   #98a89c;   /* подписи, метки, служебное */
  --acc:   #e560a8;   /* акцент 1: кнопки, ссылки, активный пункт указателя */
  --acc2:  #e0e6e1;   /* акцент 2: числа сводки, значения в таблицах */
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  font: 16px/1.72 "Jura", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: "Unbounded", system-ui, Arial, sans-serif; line-height: 1.18; margin: 0; font-weight: 700 }
p { margin: 0 0 15px }
a { color: var(--acc); text-decoration: none }
a:hover { text-decoration: underline }

.bracken-skip { position: absolute; top: -44px; left: 12px; background: var(--acc); color: #12060d; padding: 9px 14px; z-index: 99 }
.bracken-skip:focus { top: 12px }

/* ── корпус: две вертикальные половины 42 / 58 ─────────────────────── */
.bracken-split { display: grid; grid-template-columns: 42fr 58fr; align-items: start; max-width: 1560px; margin: 0 auto }

/* ── левая половина: залипающая панель во всю высоту окна ──────────── */
.bracken-side {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 34px clamp(24px, 3.4vw, 54px) 26px;
  background: var(--bg2);
  border-right: 1px solid var(--line2);
  overflow: auto;                       /* страховка для низких окон */
}
.bracken-brand { display: flex; align-items: center; gap: 11px; color: var(--tx); flex: none }
.bracken-brand svg { width: 34px; height: 34px }
.bracken-brand__n { font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 20px; line-height: 1; letter-spacing: .4px }
.bracken-brand__s { display: block; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--tx3); margin-top: 5px }

.bracken-side__mid { margin-top: auto; margin-bottom: auto; padding: 26px 0; min-width: 0 }
.bracken-kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--tx3); margin-bottom: 15px }
.bracken-side h1 { font-size: clamp(27px, 3.1vw, 44px); line-height: 1.05; max-width: 17ch; margin-bottom: 16px }
.bracken-lead { font-size: clamp(15.5px, 1.15vw, 17.5px); color: var(--tx2); max-width: 42ch; margin-bottom: 22px }
.bracken-side__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px }

/* компактная сводка из четырёх чисел — сетка 2×2 в панели */
.bracken-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 420px }
.bracken-sum__i { background: var(--bg2); padding: 12px 14px; min-width: 0 }
.bracken-sum__v { display: block; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: clamp(20px, 2vw, 27px); line-height: 1.05; color: var(--acc2); font-variant-numeric: tabular-nums }
.bracken-sum__k { display: block; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tx3); margin-top: 6px }

/* подпись активного раздела — единственное, что меняется при скролле */
.bracken-now { flex: none; border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tx3); min-height: 44px; display: flex; align-items: center; gap: 10px }
.bracken-now__v { color: var(--acc); letter-spacing: 1.4px }
.bracken-now__v span { display: none }
.bracken-now__v span.bracken-now__d { display: inline }        /* значение по умолчанию, пока якорь не выбран */
body:has(.bracken-s:target) .bracken-now__v span.bracken-now__d { display: none }

/* указатель разделов: список якорей, подсветка активного через :target + :has() */
.bracken-idx { flex: none; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: ix; overflow: auto }
.bracken-idx li { counter-increment: ix }
.bracken-idx a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 0; font-size: 13.5px; color: var(--tx3); border-bottom: 1px solid transparent }
.bracken-idx a::before { content: counter(ix, decimal-leading-zero); font-size: 11px; letter-spacing: 1.2px; color: var(--line2); flex: none; width: 22px }
.bracken-idx a:hover, .bracken-idx a:focus { color: var(--tx); text-decoration: none }

/* активный пункт: раздел-мишень подсвечивает свою строку указателя и открывает свою подпись.
   Список повторяется по числу секций — при сборке продублировать пары строк на s1…s11. */
body:has(#s1:target)  .bracken-idx a[href="#s1"],
body:has(#s2:target)  .bracken-idx a[href="#s2"],
body:has(#s3:target)  .bracken-idx a[href="#s3"],
body:has(#s4:target)  .bracken-idx a[href="#s4"],
body:has(#s5:target)  .bracken-idx a[href="#s5"],
body:has(#s6:target)  .bracken-idx a[href="#s6"],
body:has(#s7:target)  .bracken-idx a[href="#s7"],
body:has(#s8:target)  .bracken-idx a[href="#s8"],
body:has(#s9:target)  .bracken-idx a[href="#s9"],
body:has(#s10:target) .bracken-idx a[href="#s10"],
body:has(#s11:target) .bracken-idx a[href="#s11"] { color: var(--acc); border-bottom-color: var(--acc) }
body:has(#s1:target)  .bracken-now__v span[data-for="s1"],
body:has(#s2:target)  .bracken-now__v span[data-for="s2"],
body:has(#s3:target)  .bracken-now__v span[data-for="s3"],
body:has(#s4:target)  .bracken-now__v span[data-for="s4"],
body:has(#s5:target)  .bracken-now__v span[data-for="s5"],
body:has(#s6:target)  .bracken-now__v span[data-for="s6"],
body:has(#s7:target)  .bracken-now__v span[data-for="s7"],
body:has(#s8:target)  .bracken-now__v span[data-for="s8"],
body:has(#s9:target)  .bracken-now__v span[data-for="s9"],
body:has(#s10:target) .bracken-now__v span[data-for="s10"],
body:has(#s11:target) .bracken-now__v span[data-for="s11"] { display: inline }

/* ── кнопки ───────────────────────────────────────────────────────── */
.bracken-b { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 14.5px; border: 1px solid transparent; letter-spacing: .3px }
.bracken-b--go { background: var(--acc); color: #12060d }
.bracken-b--gh { border-color: var(--line2); color: var(--tx) }
.bracken-b--lg { padding: 16px 30px; font-size: 15.5px }

/* ── правая половина: лента секций в узкой мере ────────────────────── */
.bracken-main { min-width: 0; padding: 0 clamp(24px, 3.4vw, 60px) }
.bracken-m { max-width: 64ch; margin: 0 auto }              /* узкая мера набора */

/* секция: тонкая верхняя линейка во всю ширину колонки + мелкая метка над H2 */
.bracken-s { padding: clamp(58px, 7vw, 96px) 0 6px; scroll-margin-top: 24px }
.bracken-s > .bracken-m { border-top: 1px solid var(--line2); padding-top: 20px }
.bracken-s:first-of-type > .bracken-m { border-top: 0; padding-top: clamp(20px, 4vw, 44px) }
.bracken-s__label { display: block; font-size: 10.5px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px }
.bracken-s h2 { font-size: clamp(23px, 2.5vw, 33px); max-width: 24ch; margin-bottom: 16px }
.bracken-s h3 { font-size: 16.5px; margin: 26px 0 8px }
.bracken-p { color: var(--tx2); font-size: 16.5px }
.bracken-note { color: var(--tx3); font-size: 13.5px; border-left: 2px solid var(--line2); padding: 3px 0 3px 14px; margin-top: 16px }

/* ── таблицы: без внешней рамки, фон только у шапки ───────────────── */
.bracken-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0 8px }
.bracken-t { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 540px; border: 0 }
.bracken-t caption { caption-side: top; text-align: left; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tx3); padding: 0 0 10px }
.bracken-t th { text-align: left; font-family: "Unbounded", system-ui, Arial, sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx3); padding: 11px 14px; background: var(--card); border-bottom: 1px solid var(--line2) }
.bracken-t td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--tx2); vertical-align: top }
.bracken-t tbody tr:last-child td { border-bottom: 0 }
.bracken-t td:first-child { color: var(--tx) }
.bracken-t__num { font-family: "Unbounded", system-ui, Arial, sans-serif; color: var(--acc2); white-space: nowrap; font-variant-numeric: tabular-nums }
.bracken-tnote { font-size: 13.5px; color: var(--tx3); margin-top: 10px }

/* строка-итог под таблицей */
.bracken-total { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line2); padding-top: 12px; margin-top: 12px; font-size: 14.5px; color: var(--tx2) }
.bracken-total__v { font-family: "Unbounded", system-ui, Arial, sans-serif; color: var(--acc2) }

/* ── плашки (условия отыгрыша, документы, турнир) ─────────────────── */
.bracken-slabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 6px }
.bracken-slabs--4 { grid-template-columns: repeat(2, 1fr) }
.bracken-slab { background: var(--card); border: 1px solid var(--line); padding: 15px 16px }
.bracken-slab h3 { margin: 0 0 7px; font-size: 15px }
.bracken-slab p { margin: 0; font-size: 14.5px; color: var(--tx2) }
.bracken-slab__v { display: block; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 25px; line-height: 1.1; color: var(--acc2); margin-bottom: 6px }

/* ── шаги регистрации ─────────────────────────────────────────────── */
.bracken-steps { list-style: none; counter-reset: st; padding: 0; margin: 20px 0 0 }
.bracken-steps li { counter-increment: st; position: relative; padding: 0 0 15px 46px; border-bottom: 1px solid var(--line); margin-bottom: 15px; color: var(--tx2); font-size: 15.5px }
.bracken-steps li:last-child { border-bottom: 0 }
.bracken-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 16px; color: var(--acc) }
.bracken-steps__t { display: block; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 15px; color: var(--tx); margin-bottom: 4px }

/* ── список источников адреса ─────────────────────────────────────── */
.bracken-list { list-style: none; padding: 0; margin: 18px 0 0 }
.bracken-list li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); color: var(--tx2); font-size: 15.5px; position: relative }
.bracken-list li:last-child { border-bottom: 0 }
.bracken-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--acc) }

/* ── отзывы: три записи в столбик ─────────────────────────────────── */
.bracken-revs { margin-top: 22px }
.bracken-rev { border-left: 2px solid var(--line2); padding: 4px 0 4px 16px; margin-bottom: 18px }
.bracken-rev p { font-size: 15px; color: var(--tx2); margin: 0 0 8px }
.bracken-rev footer { font-size: 12.5px; color: var(--tx3) }
.bracken-rev footer::before { content: "— " }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.bracken-faq { margin: 22px 0 0; border-top: 1px solid var(--line2) }
.bracken-faq details { border-bottom: 1px solid var(--line) }
.bracken-faq summary { cursor: pointer; list-style: none; font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: 15.5px; color: var(--tx); min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 0 }
.bracken-faq summary::-webkit-details-marker { display: none }
.bracken-faq summary::after { content: "+"; margin-left: auto; color: var(--acc); font-size: 19px; line-height: 1 }
.bracken-faq details[open] summary::after { content: "\2212" }
.bracken-faq p { margin: 0 0 14px; font-size: 15px; color: var(--tx2) }

/* ── полоса CTA ───────────────────────────────────────────────────── */
.bracken-cta { background: var(--bg2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line); margin-top: clamp(48px, 6vw, 80px) }
.bracken-cta__in { max-width: 64ch; margin: 0 auto; padding: 40px 0 }
.bracken-cta p { font-family: "Unbounded", system-ui, Arial, sans-serif; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 18px; color: var(--tx) }
.bracken-cta__note { font-family: "Jura", system-ui, Arial, sans-serif; font-size: 13px; color: var(--tx3); margin-top: 12px }

/* ── редакция ─────────────────────────────────────────────────────── */
.bracken-auth { padding: 38px 0; border-bottom: 1px solid var(--line) }
.bracken-auth h3 { font-size: 20px; margin-bottom: 12px }  /* h3, а не h2: иначе H2 станет 12 вместо 11 */
.bracken-auth p { color: var(--tx2); font-size: 14.5px }
.bracken-auth__meta { font-size: 13px; color: var(--tx3) }

/* ── футер ────────────────────────────────────────────────────────── */
.bracken-f { background: var(--bg2); padding: 36px 0 54px; font-size: 13.5px; color: var(--tx3) }
.bracken-f__in { max-width: 64ch; margin: 0 auto }
.bracken-f__g { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; margin-bottom: 22px }
.bracken-f h4 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tx2); margin-bottom: 12px }
.bracken-f ul { list-style: none; padding: 0; margin: 0 }
.bracken-f li { margin-bottom: 7px }
.bracken-f a { color: var(--tx2) }
.bracken-18 { display: inline-block; border: 1px solid var(--acc); color: var(--acc); padding: 6px 12px; font-family: "Unbounded", system-ui, Arial, sans-serif; margin-bottom: 12px }
.bracken-f__law { border-top: 1px solid var(--line); padding-top: 18px; line-height: 1.75 }

/* ── адаптив ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* панель перестаёт быть липкой и схлопывается в обычный блок над контентом */
  .bracken-split { display: block }
  .bracken-side {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--line2);
    padding: 26px 24px 22px; overflow: visible;
  }
  .bracken-side__mid { margin: 0; padding: 20px 0 18px }
  .bracken-side h1 { max-width: 22ch }
  .bracken-lead { max-width: 64ch }
  /* сводка чисел выстраивается в строку */
  .bracken-sum { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: none; gap: 1px }
  .bracken-sum__i { flex: 1 0 auto; min-width: 150px }
  /* указатель — горизонтальная лента-чипы */
  .bracken-idx { display: flex; gap: 0 18px; overflow-x: auto; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px }
  .bracken-idx li { flex: 0 0 auto }
  .bracken-idx a { white-space: nowrap; font-size: 13px }
  .bracken-now { border-top: 0; padding-top: 0; margin-top: 12px }
  .bracken-main { padding: 0 24px }
  .bracken-s { padding-top: 44px }
  .bracken-slabs, .bracken-slabs--4 { grid-template-columns: 1fr 1fr }
}
@media (max-width: 600px) {
  .bracken-side, .bracken-main { padding-left: 16px; padding-right: 16px }
  .bracken-cta__in, .bracken-f__in { padding-left: 16px; padding-right: 16px }
  .bracken-side h1 { font-size: 27px }
  .bracken-side__cta .bracken-b { flex: 1 0 100% }
  .bracken-sum__i { min-width: 132px }
  .bracken-s { padding-top: 36px }
  .bracken-slabs, .bracken-slabs--4 { grid-template-columns: 1fr }
  .bracken-t { font-size: 13.5px }
  .bracken-t th, .bracken-t td { padding: 10px }
  .bracken-f__g { grid-template-columns: 1fr }
}