/* ===== glitzbets-cz — palette and faces =====================================================
   The family below reads every colour through a --mp-* token with a fallback; defining all of
   them here means not one fallback in shell.css can fire. Contrast for each role is measured in
   the header of _build/recolour.py.
   ========================================================================================== */
:root {
  --mp-bg:    #170c26;      /* page ground — the pack's own canvas, one step down   */
  --mp-bg-1:  #1e1230;    /* surface — EXACTLY the value 36-41% of the pack sits on */
  --mp-bg-2:  #2a1842;
  --mp-bg-3:  #3a2358;
  --mp-ink:   #f3eefb;
  --mp-ink-2: #b7a8cd;
  --mp-brand:       #c9a227;   /* the logotype's own gold — fill, DARK ink        */
  --mp-brand-ink:   #170c26;
  --mp-brand-light: #e2c278;
  --mp-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-font-display: 'Prata', Didot, Georgia, 'Times New Roman', serif;
  --mp-font-mono:    'Martian Mono', ui-monospace, 'Cascadia Mono', monospace;
}


/* ===== base ==================================================================================
   shell.css says «подключати ПІСЛЯ theme.css ленда» — it is a FAMILY, not a stylesheet, and it
   assumes a reset already exists. Dropping the donor land dropped that reset with it: the page
   then ran on the browser's defaults, which showed as an 8 px body margin on every edge and a
   white page behind the sections. This is that reset, written out rather than borrowed.
   ========================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--mq-bg); color: var(--mq-ink);
  font-family: var(--mp-font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mq-accent); }
a:hover { color: var(--mq-ink); }
h1, h2, h3 { font-family: var(--mp-font-display); font-weight: 400; line-height: 1.15; }
/* Off-screen until focused — the first thing a keyboard reaches, invisible to everyone else. */
.mp-skip { position: absolute; left: -9999px; top: 8px; z-index: 99; }
.mp-skip:focus { left: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--mq-brand); color: var(--gz-gold-ink); }
:focus-visible { outline: 2px solid var(--mq-accent); outline-offset: 2px; }

/* =============================================================================================
   MARQUEE — п'ята layout-родина: «вітрина з біжучим рядком» (prefix mp-mq-*)

   Порядок сторінки: біжучий рядок фактів → липка шапка → сцена-слайдер → смуга оферу → пронумерована
   дошка ігор (велика перша плитка) → полиця → картки-факти → стрічка з H1 → стаття + липка колонка
   (офер + нумерований зміст) → врізні банери всередині статті → FAQ → підвал; на телефоні — док.

   Підключати ПІСЛЯ theme.css ленда. Перефарбування — дев'ять токенів --mq-* нижче; кожен має
   фолбек на токен кита --mp-*, тож родина працює і без власної палітри.
   Референс: examples/velwins.uk.com — що зроблено інакше, див. README.md.
   ============================================================================================= */

:root {
  --mq-bg:        var(--mp-bg, #07100f);
  --mq-surface:   var(--mp-bg-1, #0d1817);
  --mq-surface-2: var(--mp-bg-2, #142321);
  --mq-line:      var(--mp-bg-3, #22332f);
  --mq-ink:       var(--mp-ink, #eef6f4);
  --mq-ink-dim:   var(--mp-ink-2, #b9cac6);
  --mq-brand:     var(--mp-brand, #ff4f9a);   /* заливки: кнопки, бейджі, активні точки */
  --mq-brand-ink: var(--mp-brand-ink, #1c0010);/* чорнило НА --mq-brand — міряти, не гадати */
  --mq-accent:    var(--mp-brand-light, #7ce8d8); /* текстовий акцент на ґрунті: цифри, мітки */
  --mq-radius:    18px;
  --mq-top-h:     64px;
  --mq-dock-h:    64px;
  --mq-font-mono: var(--mp-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  --mq-font-display: var(--mp-font-display, 'Unbounded', system-ui, sans-serif); /* гарнітура мусить мати письмо ленда: у Sora немає кирилиці, і цифри лишались у ній, а літери падали на запасну */
}

.mp-mq-wrap { width: min(100% - 32px, 1240px); margin-inline: auto; }

/* --- 1. Біжучий рядок ----------------------------------------------------------------------------
   Тільки ФАКТИ ленда (офер, платежі, 18+, ліцензія), ніколи «виграші гравців»: у референсі це
   вигадані суми з вигаданими ніками. Стрічка — два однакові <ul>, другий aria-hidden: так цикл
   безшовний, а читач екрана чує список один раз. prefers-reduced-motion зупиняє рух і переносить
   пункти рядками. */
.mp-mq-ticker { overflow: hidden; background: var(--mq-surface); border-bottom: 1px solid var(--mq-line);
  font-family: var(--mq-font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.mp-mq-ticker-track { display: flex; width: max-content; animation: mp-mq-run 38s linear infinite; }
.mp-mq-ticker:hover .mp-mq-ticker-track, .mp-mq-ticker:focus-within .mp-mq-ticker-track { animation-play-state: paused; }
.mp-mq-ticker ul { display: flex; gap: 32px; margin: 0; padding: 9px 16px 9px 32px; list-style: none; white-space: nowrap; }
.mp-mq-ticker li { display: inline-flex; gap: 8px; align-items: center; color: var(--mq-ink-dim); }
.mp-mq-ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mq-brand); }
.mp-mq-ticker b { color: var(--mq-accent); font-weight: 700; }
@keyframes mp-mq-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mp-mq-ticker-track { animation: none; width: auto; }
  .mp-mq-ticker ul { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
  .mp-mq-ticker ul[aria-hidden="true"] { display: none; }
}

/* --- 2. Шапка --------------------------------------------------------------------------------------- */
.mp-mq-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--mq-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mq-line); }
.mp-mq-top-in { display: flex; align-items: center; gap: 24px; min-height: var(--mq-top-h); }
.mp-mq-brand { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--mq-ink); font-weight: 800;
  font-family: var(--mq-font-display); text-decoration: none; }
.mp-mq-brand img { height: 32px; width: auto; }
.mp-mq-nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mp-mq-nav a { padding: 8px 12px; border-radius: 10px; color: var(--mq-ink-dim); font-size: .9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.mp-mq-nav a:hover, .mp-mq-nav a:focus-visible { color: var(--mq-ink); background: var(--mq-surface-2); }
.mp-mq-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }

.mp-mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: .9375rem;
  line-height: 1; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.mp-mq-btn--brand, .mp-mq-btn--brand:link, .mp-mq-btn--brand:visited { background: var(--mq-brand); color: var(--mq-brand-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mq-brand) 32%, transparent); }
.mp-mq-btn--brand:hover, .mp-mq-btn--brand:focus-visible { color: var(--mq-brand-ink); filter: brightness(1.08); transform: translateY(-1px); }
.mp-mq-btn--line, .mp-mq-btn--line:link, .mp-mq-btn--line:visited { color: var(--mq-ink); border-color: var(--mq-line);
  background: color-mix(in srgb, var(--mq-surface-2) 70%, transparent); }
.mp-mq-btn--line:hover, .mp-mq-btn--line:focus-visible { color: var(--mq-ink); border-color: var(--mq-accent); }

/* --- 3. Сцена ---------------------------------------------------------------------------------------
   Слайдер БЕЗ JS: доріжка scroll-snap, яку гортають пальцем, колесом або Tab-ом. Перший слайд — LCP
   (картинка з fetchpriority), решта lazy. Наступний слайд визирає на 6% — це і є підказка «гортай»,
   замість стрілок і крапок, які в референсі без скрипта мертві. */
.mp-mq-stage { position: relative; }
.mp-mq-stage-track { display: grid; grid-auto-flow: column; grid-auto-columns: 94%; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 16px 16px 0; }
.mp-mq-stage-track::-webkit-scrollbar { display: none; }
.mp-mq-slide { position: relative; scroll-snap-align: center; overflow: hidden; min-height: clamp(320px, 42vw, 520px);
  display: grid; align-items: end; border-radius: var(--mq-radius); background: var(--mq-surface); isolation: isolate; }
.mp-mq-slide > img, .mp-mq-slide > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mp-mq-slide::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mq-bg) 92%, transparent) 0%,
              color-mix(in srgb, var(--mq-bg) 55%, transparent) 45%, transparent 75%),
              linear-gradient(0deg, var(--mq-bg) 0%, transparent 40%); }
/* Підпис — у ПОТОЦІ, притиснутий донизу grid-ом, а не `position:absolute`: абсолютний підпис на 375 px
   вилазив за верх слайда на 15 px, бо висота слайда фіксована, а текст ні. Тепер слайд росте з текстом. */
.mp-mq-slide-copy { margin: clamp(12px, 3vw, 40px); padding: clamp(18px, 3vw, 32px); max-width: 640px; border-radius: 16px;
  background: color-mix(in srgb, var(--mq-bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mp-mq-slide-copy h1, .mp-mq-slide-copy h2, .mp-mq-slide-copy .mp-mq-slide-h { margin: 0 0 16px; color: var(--mq-ink); font-weight: 700;
  font-family: var(--mq-font-display); font-size: clamp(1.75rem, 3.4vw + .5rem, 3.25rem); line-height: 1.08; letter-spacing: -.02em; }
.mp-mq-slide-copy p { margin: 0 0 20px; color: var(--mq-ink-dim); max-width: 48ch; }
.mp-mq-slide-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- 4. Смуга оферу ------------------------------------------------------------------------------------ */
.mp-mq-offerbar { margin-top: 16px; border-block: 1px solid var(--mq-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mq-brand) 12%, var(--mq-surface)), var(--mq-surface) 60%); }
.mp-mq-offerbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 18px; }
.mp-mq-kicker { display: block; font-family: var(--mq-font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mq-ink-dim); }
.mp-mq-figure { display: block; font-family: var(--mq-font-mono); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); color: var(--mq-ink); }
.mp-mq-offerbar p { flex: 1 1 260px; margin: 0; color: var(--mq-ink-dim); }
.mp-mq-offerbar .mp-mq-btn { margin-left: auto; }

/* --- 5. Заголовок секції --------------------------------------------------------------------------------- */
.mp-mq-sect { padding-block: clamp(32px, 4vw, 56px); }
.mp-mq-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.mp-mq-head h2 { position: relative; margin: 0; padding-left: 14px; color: var(--mq-ink); font-family: var(--mq-font-display);
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.9rem); line-height: 1.2; }
.mp-mq-head h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 2px; background: var(--mq-brand); }
.mp-mq-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mq-line); order: 1; }
.mp-mq-head > .mp-mq-btn, .mp-mq-head > a { order: 2; }

/* --- 6. Дошка ігор ----------------------------------------------------------------------------------------
   ПІДПИС РОДИНИ. Перша плитка — 2×2, решта нумеровані CSS-лічильником (номер не в розмітці: переставив
   плитки — номери самі правильні). АРИФМЕТИКА (FIX-91): 9 плиток = 1 велика (4 клітинки) + 8 = 12
   клітинок, а 12 ділиться і на 6 (2 ряди), і на 4 (3), і на 2 (6). Інша кількість — перерахувати.
   Кожна плитка — <a> на /go/, не <button> з JS, як у референсі. */
.mp-mq-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0;
  list-style: none; counter-reset: mq-tile; }
.mp-mq-board > li { min-width: 0; counter-increment: mq-tile; }
.mp-mq-board > li:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1024px) { .mp-mq-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* На двох колонках велика плитка займає ОБИДВА ряди сама, і рядам нема від кого взяти висоту: з
   `aspect-ratio: auto` вона схлопувалась до 12 px (виміряно на 375). Квадрат на всю ширину = рівно два
   ряди малих плиток + проміжок. */
@media (max-width: 600px)  { .mp-mq-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mp-mq-tile { position: relative; display: block; height: 100%; min-height: 100%; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: 14px; border: 1px solid var(--mq-line); background: var(--mq-surface-2); color: var(--mq-ink);
  text-decoration: none; isolation: isolate; }
.mp-mq-board > li:first-child .mp-mq-tile { aspect-ratio: auto; }
/* ↑ Мобільна заміна мусить стояти ПІСЛЯ цього правила: специфічність однакова, і медіазапит вище за
   текстом програвав йому — перша спроба виправлення нічого не змінила, вимір це показав. */
@media (max-width: 600px) { .mp-mq-board > li:first-child .mp-mq-tile { aspect-ratio: 1 / 1; } }
.mp-mq-tile > img, .mp-mq-tile > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .35s ease; }
.mp-mq-tile::before { content: counter(mq-tile, decimal-leading-zero); position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--mq-bg) 78%, transparent);
  color: var(--mq-accent); font-family: var(--mq-font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; }
.mp-mq-tile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--mq-bg) 92%, transparent) 0%, transparent 55%); }
/* Назва — на ВЛАСНІЙ підкладці 82% ґрунту. Лише градієнт `::after` не рятує: на малій плитці (129 px на 601)
   рядок назви стоїть на 22% висоти, де градієнт уже напівпрозорий, і на світлій обкладинці текст падав
   нижче 4,5:1. На найгіршому, суцільно білому, фото підкладка дає 10,4:1. */
.mp-mq-tile-name { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--mq-bg) 82%, transparent); font-size: .8125rem; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-mq-board > li:first-child .mp-mq-tile-name { font-size: 1.0625rem; white-space: normal; bottom: 12px; left: 12px; right: auto; max-width: calc(100% - 24px); padding: 6px 10px; }
.mp-mq-tile-play { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mq-brand); color: var(--mq-brand-ink); opacity: 0; transform: scale(.8);
  transition: opacity .2s ease, transform .2s ease; }
.mp-mq-tile:hover .mp-mq-tile-play, .mp-mq-tile:focus-visible .mp-mq-tile-play { opacity: 1; transform: scale(1); }
.mp-mq-tile:hover > img, .mp-mq-tile:focus-visible > img { transform: scale(1.05); }
.mp-mq-tile:focus-visible { outline: 2px solid var(--mq-accent); outline-offset: 2px; }

/* --- 7. Полиця ----------------------------------------------------------------------------------------------
   Замість «Now winning · LIVE» з вигаданими виграшами: той самий ритм карток, але підпис — ЖАНР або
   студія з матеріалів оператора. Прокрутка вбік, кількість нічого не мусить ділити (FIX-165). */
.mp-mq-shelf { display: flex; gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-color: var(--mq-line) transparent; }
.mp-mq-shelf > li { flex: 0 0 clamp(150px, 16vw, 200px); scroll-snap-align: start; }
.mp-mq-shelf .mp-mq-tile { aspect-ratio: 4 / 5; }
.mp-mq-shelf .mp-mq-tile::before { content: none; }
.mp-mq-chip { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: var(--mq-brand);
  color: var(--mq-brand-ink); font-family: var(--mq-font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .03em; }
.mp-mq-shelf .mp-mq-tile-name { bottom: 38px; }

/* --- 8. Картки-факти ------------------------------------------------------------------------------------------
   З референсних «Top alternative casinos» узято лише форму — номер, назва, рядки ключ/значення, дія. Тут це
   факти ОДНОГО бренду (ліцензія, виплати, мін. депозит), без зірок-рейтингу чужих операторів. 3 картки:
   3 → 1 колонка (2 дала б сироту). */
.mp-mq-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mp-mq-specs > li { min-width: 0; }
@media (max-width: 760px) { .mp-mq-specs { grid-template-columns: minmax(0, 1fr); } }
.mp-mq-spec { height: 100%; padding: 18px; border-radius: 16px; border: 1px solid var(--mq-line); background: var(--mq-surface); }
.mp-mq-spec-n { font-family: var(--mq-font-mono); font-size: .75rem; color: var(--mq-accent); }
.mp-mq-spec h3 { margin: 6px 0 12px; color: var(--mq-ink); font-size: 1.0625rem; }
.mp-mq-spec dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .875rem; }
.mp-mq-spec dt { color: var(--mq-ink-dim); font-family: var(--mq-font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.mp-mq-spec dd { margin: 0; color: var(--mq-ink); font-weight: 700; text-align: right; }

/* --- 9. Стрічка з H1 ------------------------------------------------------------------------------------------ */
.mp-mq-band { position: relative; overflow: hidden; margin-block: 8px 32px; padding: clamp(24px, 4vw, 48px);
  border-radius: 22px; border: 1px solid var(--mq-line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--mq-brand) 14%, transparent), transparent 55%), var(--mq-surface); }
.mp-mq-band h1 { margin: 0 0 14px; max-width: 30ch; color: var(--mq-ink); font-family: var(--mq-font-display);
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.mp-mq-band p { margin: 0; max-width: 90ch; color: var(--mq-ink-dim); }

/* --- 10. Стаття + липка колонка ---------------------------------------------------------------------------------
   Колонка — ОФЕР (без таймера) і ЗМІСТ. Таймер «пропозиція діє 00:00:00» у референсі — штучна терміновість,
   що обнуляється на кожному завантаженні; тут замість нього рядки умов. Зміст — <details open>: «Сховати» працює
   без JS, а на телефоні колонка переїжджає під статтю й зміст стартує згорнутим (атрибут open знімає ленд). */
.mp-mq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding-bottom: 48px; }
.mp-mq-layout > * { min-width: 0; }
@media (max-width: 1024px) { .mp-mq-layout { grid-template-columns: minmax(0, 1fr); } }
.mp-mq-rail { position: sticky; top: calc(var(--mq-top-h) + 16px); display: grid; gap: 14px; }
@media (max-width: 1024px) { .mp-mq-rail { position: static; order: -1; } }

.mp-mq-offer { padding: 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--mq-brand) 45%, var(--mq-line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--mq-brand) 16%, var(--mq-surface)), var(--mq-surface) 70%); }
.mp-mq-offer .mp-mq-figure { margin: 4px 0 6px; font-size: 1.625rem; }  /* у колонці 320 px цифра розміру смуги переносила «€» окремим рядком */
.mp-mq-offer-sub { margin: 0 0 14px; color: var(--mq-ink); font-weight: 700; }
.mp-mq-terms { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .875rem; }
.mp-mq-terms li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--mq-line); color: var(--mq-ink-dim); }
.mp-mq-terms b { color: var(--mq-ink); text-align: right; }
.mp-mq-offer .mp-mq-btn { width: 100%; }

.mp-mq-toc { border-radius: 18px; border: 1px solid var(--mq-line); background: var(--mq-surface); }
.mp-mq-toc > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer;
  list-style: none; font-family: var(--mq-font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mq-accent); }
.mp-mq-toc > summary::-webkit-details-marker { display: none; }
.mp-mq-toc > summary::after { content: "−"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--mq-surface-2); color: var(--mq-ink); font-family: var(--mq-font-display); font-size: 1rem; letter-spacing: 0; }
.mp-mq-toc:not([open]) > summary::after { content: "+"; }
.mp-mq-toc ol { margin: 0; padding: 0 18px 16px; list-style: none; counter-reset: mq-toc; max-height: 52vh; overflow: auto; }
.mp-mq-toc li { counter-increment: mq-toc; }
.mp-mq-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 7px 0; color: var(--mq-ink-dim);
  font-size: .875rem; line-height: 1.45; text-decoration: none; border-top: 1px solid var(--mq-line); }
.mp-mq-toc li:first-child a { border-top: 0; }
.mp-mq-toc a::before { content: counter(mq-toc, decimal-leading-zero); font-family: var(--mq-font-mono); font-size: .75rem; color: var(--mq-accent); padding-top: 2px; }
.mp-mq-toc a:hover, .mp-mq-toc a:focus-visible { color: var(--mq-ink); }

/* --- 11. Стаття ------------------------------------------------------------------------------------------------- */
.mp-mq-article > section { scroll-margin-top: calc(var(--mq-top-h) + 16px); padding-bottom: 8px; }
.mp-mq-article h2 { margin: 36px 0 12px; color: var(--mq-ink); font-family: var(--mq-font-display); font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem); line-height: 1.25; }
.mp-mq-article > section:first-child h2 { margin-top: 0; }
.mp-mq-article h3 { margin: 22px 0 8px; color: var(--mq-ink); font-size: 1.125rem; }
.mp-mq-article p, .mp-mq-article li { color: var(--mq-ink-dim); line-height: 1.7; }
.mp-mq-facts { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: .9375rem; border: 1px solid var(--mq-line); border-radius: 14px; overflow: hidden; }
.mp-mq-facts th, .mp-mq-facts td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--mq-line); vertical-align: top; }
.mp-mq-facts th { width: 38%; color: var(--mq-ink); font-weight: 700; background: var(--mq-surface); }
.mp-mq-facts td { color: var(--mq-ink-dim); background: color-mix(in srgb, var(--mq-surface) 55%, transparent); }
.mp-mq-facts tr:last-child > * { border-bottom: 0; }

/* --- 12. Врізний банер ------------------------------------------------------------------------------------------
   Між групами секцій, на всю ширину статті. Текст (і в слайді, і тут) лежить на ВЛАСНІЙ підкладці 82% ґрунту,
   а не просто на градієнті: на телефоні підпис вищий за градієнт, і його верх опинявся на голому фото.
   Розраховано на НАЙГІРШЕ фото — суцільно біле: основний текст 10,4:1, приглушений 6,7:1. */
.mp-mq-banner { position: relative; overflow: hidden; margin: 32px 0; min-height: 260px; display: grid; align-items: end;
  border-radius: 20px; border: 1px solid var(--mq-line); background: var(--mq-surface-2); isolation: isolate; }
.mp-mq-banner > img, .mp-mq-banner > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mp-mq-banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mq-bg) 94%, transparent) 0%, color-mix(in srgb, var(--mq-bg) 70%, transparent) 55%, transparent 100%); }
.mp-mq-banner-copy { margin: clamp(12px, 2vw, 20px); padding: clamp(18px, 3vw, 28px); max-width: 520px; border-radius: 14px;
  background: color-mix(in srgb, var(--mq-bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mp-mq-banner-copy .mp-mq-slide-h { margin: 4px 0 8px; color: var(--mq-ink); font-weight: 700; font-family: var(--mq-font-display); font-size: clamp(1.4rem, 2vw + .8rem, 2.1rem); line-height: 1.15; }
.mp-mq-banner-copy p { margin: 0 0 16px; color: var(--mq-ink-dim); }

/* --- 13. FAQ ------------------------------------------------------------------------------------------------------ */
.mp-mq-faq { display: grid; gap: 10px; }
.mp-mq-faq details { border-radius: 14px; border: 1px solid var(--mq-line); background: var(--mq-surface); }
.mp-mq-faq summary { position: relative; padding: 16px 48px 16px 18px; cursor: pointer; list-style: none; color: var(--mq-ink); font-weight: 700; line-height: 1.45; }
.mp-mq-faq summary::-webkit-details-marker { display: none; }
.mp-mq-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--mq-accent); font-size: 1.25rem; }
.mp-mq-faq details[open] summary::after { content: "−"; }
.mp-mq-faq details > div { padding: 0 18px 16px; }
.mp-mq-faq details p { margin: 0; color: var(--mq-ink-dim); }

/* --- 14. Підвал --------------------------------------------------------------------------------------------------- */
.mp-mq-foot { margin-top: 24px; padding-block: 40px 24px; border-top: 1px solid var(--mq-line); background: var(--mq-surface); }
.mp-mq-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .mp-mq-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mp-mq-foot-grid { grid-template-columns: minmax(0, 1fr); } }
.mp-mq-foot-h { margin: 0 0 12px; font-family: var(--mq-font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mq-accent); }
.mp-mq-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mp-mq-foot a { color: var(--mq-ink-dim); text-decoration: none; font-size: .9375rem; }
.mp-mq-foot a:hover, .mp-mq-foot a:focus-visible { color: var(--mq-ink); }
.mp-mq-foot p { color: var(--mq-ink-dim); font-size: .875rem; line-height: 1.6; }
.mp-mq-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mp-mq-badges span { padding: 5px 9px; border-radius: 8px; border: 1px solid var(--mq-line); font-family: var(--mq-font-mono); font-size: .6875rem; color: var(--mq-ink-dim); }
.mp-mq-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--mq-line); font-size: .8125rem; color: var(--mq-ink-dim); }

/* --- 15. Док на телефоні -------------------------------------------------------------------------------------------
   Референс: док + висувне меню на JS + плаваюча картка оферу, яка перекриває док. Тут — ОДИН фіксований
   елемент: чотири якорі й центральна кнопка оферу. Меню не потрібне — зміст статті і є меню, і пункт «Зміст»
   веде до нього. body отримує відступ знизу, щоб підвал не ховався (FIX-44). */
.mp-mq-dock { display: none; }
@media (max-width: 760px) {
  .mp-mq-nav { display: none; }
  .mp-mq-actions .mp-mq-btn--line { display: none; }
  .mp-mq-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end; height: var(--mq-dock-h); padding: 0 6px env(safe-area-inset-bottom); background: var(--mq-surface);
    border-top: 1px solid var(--mq-line); }
  body:has(.mp-mq-dock) { padding-bottom: calc(var(--mq-dock-h) + env(safe-area-inset-bottom)); }
  .mp-mq-dock a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 10px; color: var(--mq-ink-dim);
    font-size: .6875rem; font-weight: 600; text-decoration: none; }
  .mp-mq-dock a svg { width: 20px; height: 20px; }
  .mp-mq-dock .mp-mq-dock-cta { align-self: start; margin-top: -18px; }
  .mp-mq-dock .mp-mq-dock-cta span:first-child { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: var(--mq-brand); color: var(--mq-brand-ink); box-shadow: 0 8px 22px color-mix(in srgb, var(--mq-brand) 40%, transparent); }
  .mp-mq-dock .mp-mq-dock-cta { color: var(--mq-ink); }
  .mp-mq-stage-track { grid-auto-columns: 90%; padding-inline: 12px; }
  .mp-mq-offerbar .mp-mq-btn { width: 100%; margin-left: 0; }
}

/* --- 16. Правові сторінки ------------------------------------------------------------------------------------------
   Правило в родині, не в ленді (FIX-61): на .mp-rg немає жодної поверхні оферу. */
.mp-rg .mp-mq-ticker, .mp-rg .mp-mq-offerbar, .mp-rg .mp-mq-offer, .mp-rg .mp-mq-banner, .mp-rg .mp-mq-dock,
.mp-rg .mp-mq-actions .mp-mq-btn--brand { display: none !important; }
.mp-rg:has(.mp-mq-dock) { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .mp-mq-tile > img, .mp-mq-tile-play, .mp-mq-btn { transition: none; }
  .mp-mq-tile:hover > img { transform: none; }
}

/* Палітри (дев'ять токенів). Демо — «троянда на глибокому бірюзово-чорному». Вільні варіанти:
   :root { --mq-bg:#0b0a12; --mq-surface:#12111c; --mq-surface-2:#1b1a28; --mq-line:#2b2940; --mq-ink:#f2f0fa;
           --mq-ink-dim:#bdb8d0; --mq-brand:#ffb020; --mq-brand-ink:#1a1000; --mq-accent:#9fb4ff; }   бурштин + лаванда
   :root { --mq-bg:#f7f5f0; --mq-surface:#ffffff; --mq-surface-2:#efebe2; --mq-line:#ddd6c8; --mq-ink:#1b1814;
           --mq-ink-dim:#57504a; --mq-brand:#c2410c; --mq-brand-ink:#ffffff; --mq-accent:#9a3412; }   СВІТЛА: теракота
   Кожну — через прохід контрасту: --mq-brand-ink на --mq-brand, --mq-accent на --mq-bg і --mq-surface. */

/* ===== glitzbets-cz tokens ===== */
:root {
  --mq-accent:    #e2c278;   /* links, focus ring, kickers — 7,83..10,94:1   */
  --gz-royal:     #5e2080;        /* FILL only: 1,28..1,79:1 as text, never text  */
  --gz-royal-ink: #ffffff;    /* white on royal — 10,53:1                     */
  --gz-gold-ink:  #170c26;     /* dark on gold  —  7,77:1                      */
  --gz-tick:      #6fc488;
  --gz-cross:     #e3a3a3;
}

/* ===== glitzbets-cz components ===== */
/* glitzbets-cz — the blocks this land adds on top of the MARQUEE family.
   Appended to theme.css by _build/theme.py (never edited into theme.css by hand: recolour.py
   regenerates that file from the donor and would take these with it).

   Prefix `gz-`. Every colour comes from a token; the two accents carry OPPOSITE ink, which is
   the one thing to keep in mind when adding a rule here:
       --mq-brand   (#c9a227 gold)   -> fill, DARK  ink  var(--gz-gold-ink)   7,77:1
       --gz-royal   (#5e2080 violet) -> fill, LIGHT ink  var(--gz-royal-ink) 10,53:1
   `--gz-royal` NEVER carries text: 1,28..1,79:1 against every ground on this land. */

/* ---------------------------------------------------------------- header + small furniture */
.gz-logo { height: 30px; width: auto; }
.gz-vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.gz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.gz-chip { padding: 5px 11px; border: 1px solid var(--mq-line); border-radius: 999px;
  background: color-mix(in srgb, var(--mq-surface) 86%, transparent);
  color: var(--mq-ink-dim); font-size: .82rem; line-height: 1.35; }
.gz-chip--prov { font-family: var(--mq-font-mono); font-size: .74rem; letter-spacing: .02em;
  color: var(--mq-accent); border-color: color-mix(in srgb, var(--mq-accent) 34%, transparent); }

.gz-lede { max-width: 62ch; color: var(--mq-ink-dim); margin: 0 0 22px; }
.gz-sub { margin: 32px 0 14px; font-family: var(--mq-font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--mq-ink); }
.gz-note { font-size: .88rem; color: var(--mq-ink-dim); border-left: 2px solid var(--gz-royal);
  padding-left: 12px; margin: 16px 0; }
.gz-figure { border-radius: var(--mq-radius); margin: 0 0 20px; }

/* ---------------------------------------------------------------------------- hero extras */
/* The second slide is the E-E-A-T card: score, byline, dates. It is a slide and not a widget so
   that on a phone it is one swipe from the offer instead of nine screens down. */
.gz-score-big { font-family: var(--mq-font-display); line-height: 1;
  font-size: clamp(3rem, 9vw, 4.6rem); color: var(--mq-brand); }
.gz-score-big span { font-size: .4em; color: var(--mq-ink-dim); }
.gz-byline { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--mq-ink); }
.gz-byline small { color: var(--mq-ink-dim); }
.gz-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--gz-royal); color: var(--gz-royal-ink);
  font-family: var(--mq-font-mono); font-size: .9rem; letter-spacing: .04em; }
.gz-avatar--lg { width: 72px; height: 72px; font-size: 1.3rem; }
.gz-terms-inline { display: block; margin-top: 6px; font-size: .8rem; color: var(--mq-ink-dim); }

/* ---------------------------------------------------------------------------- scorecard */
/* The score is a table with the arithmetic printed under it, not a badge: the pack's own badge
   asset still contains the literal string {RATING}, and a number nobody can check is decoration
   (memory: rating-needs-a-visible-scorecard). */
.gz-score th, .gz-score td { vertical-align: top; }
.gz-score .gz-w { font-family: var(--mq-font-mono); font-size: .8rem; color: var(--mq-ink-dim);
  white-space: nowrap; }
.gz-score .gz-v { font-family: var(--mq-font-display); font-size: 1.25rem; color: var(--mq-brand);
  white-space: nowrap; }
.gz-arith { font-family: var(--mq-font-mono); font-size: .82rem; color: var(--mq-ink-dim);
  background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: 12px;
  padding: 12px 14px; overflow-x: auto; }
.gz-arith b { color: var(--mq-brand); font-size: 1.05rem; }

/* ------------------------------------------------------------------------ pros and cons */
.gz-poco { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 760px) { .gz-poco { grid-template-columns: 1fr 1fr; } }
.gz-pro, .gz-con { background: var(--mq-surface); border: 1px solid var(--mq-line);
  border-radius: var(--mq-radius); padding: 18px 20px; }
.gz-pro h3, .gz-con h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 1.05rem; }
.gz-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor; }
.gz-ic--p { color: var(--gz-tick); }
.gz-ic--m { color: var(--gz-cross); }
.gz-pro ul, .gz-con ul { margin: 0; padding-left: 20px; color: var(--mq-ink-dim); }
.gz-pro li, .gz-con li { margin: 0 0 8px; }

/* ------------------------------------------------------------------------ lists and steps */
.gz-list { margin: 0 0 18px; padding-left: 20px; color: var(--mq-ink-dim); }
.gz-list li { margin: 0 0 8px; }
.gz-list b { color: var(--mq-ink); }
/* `display:grid` belongs on the <ol>, never on the <li>: a grid item breaks apart at its first
   <strong> (memory: no-grid-on-list-item). */
.gz-steps { counter-reset: gz; list-style: none; display: grid; gap: 12px; margin: 0 0 20px;
  padding: 0; }
.gz-steps li { counter-increment: gz; position: relative; padding: 16px 18px 16px 58px;
  background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-radius); }
.gz-steps li::before { content: counter(gz); position: absolute; left: 16px; top: 15px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mq-brand); color: var(--gz-gold-ink); font-family: var(--mq-font-mono);
  font-size: .82rem; }
.gz-steps b { display: block; margin-bottom: 4px; color: var(--mq-ink); }
.gz-steps p { margin: 0; color: var(--mq-ink-dim); }

/* -------------------------------------------------------------------------- working link */
.gz-linkbar { display: grid; gap: 16px; align-items: center; margin: 18px 0;
  background: var(--mq-surface); border: 1px solid var(--mq-line);
  border-radius: var(--mq-radius); padding: 20px; }
@media (min-width: 760px) { .gz-linkbar { grid-template-columns: 1fr auto; } }
.gz-ok { display: inline-block; margin: 4px 0 8px; font-family: var(--mq-font-mono);
  font-size: .9rem; color: var(--gz-tick); }

/* --------------------------------------------------------------------------- payment marks */
/* Visa and Mastercard are dark-on-white brand vectors. On this ground they would read as a
   smudge, so they sit on their own light plate — the plate is the fix, not a recolour of
   someone else's trademark (phase-0 rule 3). */
.gz-marks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.gz-mark { display: grid; place-items: center; background: #f4f1ea; border-radius: 10px;
  padding: 9px 14px; }
.gz-mark img { height: 20px !important; width: auto !important; }

/* ------------------------------------------------------------------------------- author */
.gz-author { display: grid; gap: 16px; background: var(--mq-surface);
  border: 1px solid var(--mq-line); border-radius: var(--mq-radius); padding: 20px; }
@media (min-width: 620px) { .gz-author { grid-template-columns: auto 1fr; } }
.gz-author-name { margin: 0; font-family: var(--mq-font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--mq-ink); }
.gz-author p { color: var(--mq-ink-dim); }

/* -------------------------------------------------------------- the royal violet surfaces */
/* The one place the second accent is spent as a FILL, and the reason the siblings do not look
   like this land: there, purple is a light text colour. */
.mp-mq-offerbar { background: var(--gz-royal); color: var(--gz-royal-ink); }
.mp-mq-offerbar .mp-mq-kicker, .mp-mq-offerbar .gz-terms-inline { color: var(--gz-royal-ink); opacity: .86; }
.mp-mq-offerbar .mp-mq-figure { color: var(--mq-brand); }
.mp-mq-band { border-left: 3px solid var(--gz-royal); }

/* The family's own button already pairs brand + brand-ink; this restates the dark ink on the
   gold explicitly because inheriting a donor's light-on-accent pairing is what cost kavbet-au
   its CTA label (FIX-110/148). */
.mp-mq-btn--brand, .mp-mq-btn--brand:link, .mp-mq-btn--brand:visited,
.mp-mq-btn--brand:hover, .mp-mq-btn--brand:focus-visible { color: var(--gz-gold-ink); }

/* Legal / responsible-gambling pages: the family hides the offer furniture, this adds the two
   blocks that are this land's own. */
.mp-rg .mp-mq-offerbar, .mp-rg .gz-linkbar, .mp-rg .mp-mq-dock { display: none !important; }

/* ------------------------------------------------------- the scorecard on a narrow screen */
/* Four columns, one of them prose, have a minimum content width that no amount of wrapping
   gets under 371 px — measured, not guessed: at 320 and 360 the table was the only thing on
   the page pushing a horizontal scrollbar. Under 560 px it stops being a table and becomes one
   card per axis, with the weight and the mark on one line. `thead` goes away because the
   headings are then printed per row. */
@media (max-width: 559px) {
  .gz-score, .gz-score tbody, .gz-score tr, .gz-score th, .gz-score td { display: block; width: auto; }
  .gz-score thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gz-score tr { border: 1px solid var(--mq-line); border-radius: 14px; padding: 14px 16px;
    margin: 0 0 10px; background: var(--mq-surface); }
  .gz-score th { padding: 0 0 2px; border: 0; color: var(--mq-ink); font-size: 1rem; }
  .gz-score td { padding: 0; border: 0; }
  .gz-score .gz-w { display: inline-block; margin-right: 10px; }
  .gz-score .gz-v { display: inline-block; }
  .gz-score td:last-child { margin-top: 6px; color: var(--mq-ink-dim); }
}

/* ------------------------------------------------- key/value tables on a very narrow screen */
/* Same measurement, same cure as the scorecard: at 320 px the three-column payments table was
   the last thing still pushing the page sideways (scrollWidth 330 against a 305 px viewport). */
@media (max-width: 419px) {
  .mp-mq-facts, .mp-mq-facts tbody, .mp-mq-facts tr, .mp-mq-facts th, .mp-mq-facts td {
    display: block; width: auto; }
  .mp-mq-facts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mp-mq-facts tr { border: 1px solid var(--mq-line); border-radius: 12px; padding: 12px 14px;
    margin: 0 0 8px; }
  .mp-mq-facts th { border: 0; padding: 0 0 4px; color: var(--mq-ink); }
  .mp-mq-facts td { border: 0; padding: 0; color: var(--mq-ink-dim); }
}

/* The promo strips exist only at 800x300 in the pack (there is no larger master, and upsampling
   one in prep would be a bigger lie than a soft banner). The banner box is therefore capped at
   their native width so they are never asked for more pixels than they have — measured: without
   this they were drawn at 883 on a 1280 viewport and 890 on a 1440. */
.mp-mq-banner { max-width: 800px; }
/* The second slide is the score + byline card and carries no cover art, so it needs its own
   ground — without one it would inherit the stage's transparent slide background. */
.gz-slide--meta { background: linear-gradient(135deg, var(--mq-surface) 0%, var(--mq-surface-2) 100%); }

/* --------------------------------------- the dock CTA: the family already had this right */
/* I painted the WHOLE dock anchor gold and then measured the label at 2,12:1 on it. The family
   never intended that: `.mp-mq-dock .mp-mq-dock-cta span:first-child` is a raised gold square
   holding the glyph (dark ink, 7,77:1) and the word below it sits on the dock's own surface
   (15,56:1). Removing my background rule removes the problem — the fix was to stop overriding,
   not to override harder (FIX-110/148 is about exactly this: inheriting an accent's ink). */
/* The offer figure sat on the royal band in brand gold at 4,35:1 — legal for 24 px text and still
   muddy. The light gold is the same family of colour at 6,13:1. */
.mp-mq-offerbar .mp-mq-figure { color: var(--mq-accent); }