/* gtbetgokken.nl - секции: витрины W (design.md §4) и текстовые T (§5). Медиа-оверрайды ниже базы. */

/* ---------- T: общие ---------- */
.gg-sec { margin-top: var(--gg-sec-gap); }
.gg-sec:first-child { margin-top: 0; }
.gg-sec > * + * { margin-top: 14px; }
.gg-sec h2 { position: relative; padding-left: 16px; font-weight: 700; font-size: 22px; line-height: 1.25; margin-bottom: 18px; }
.gg-sec h2::before { content: ""; position: absolute; left: 0; top: .15em; width: 4px; height: 24px; border-radius: 2px; background: var(--gg-hue); }
@media (min-width: 1024px) { .gg-sec h2 { font-size: 28px; } .gg-sec h2::before { top: .2em; height: 28px; } }
.gg-sec h3 { font-weight: 650; font-size: 18px; line-height: 1.35; }
.gg-sec p a, .gg-note a { color: var(--gg-hue-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gg-sec p a:hover { color: var(--gg-text); }
.gg-first { font-size: 17px; color: var(--gg-soft); }
.gg-sec--wide { max-width: 960px; }
@media (min-width: 1280px) { .gg-wide { width: min(960px, calc(100vw - 2 * var(--gg-pad) - 340px)); } }

/* плашки платформ (T5/T6) */
.gg-plate { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border-radius: var(--gg-r-pill);
  font-size: 13px; font-weight: 700; color: #121018; line-height: 1.5; }
.gg-plate .gg-ico { width: 16px; height: 16px; stroke-width: 2; }
.gg-plate--android, .gg-plate--live { background: #75CD18; }
.gg-plate--ios, .gg-plate--neutral { background: #C9C4DE; }
.gg-plate--casino { background: #E3328E; } .gg-plate--sport { background: #14B7E0; } .gg-plate--bonus { background: #FF7835; }
.gg-plate--account { background: #E83F33; } .gg-plate--app { background: #8133E8; color: #FFFFFF; } .gg-plate--pay { background: #F2BB24; }

/* T14 примечание */
.gg-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--gg-r-m);
  border: 1px solid var(--gg-hue); background: color-mix(in srgb, var(--gg-hue) 8%, transparent); }
.gg-note > .gg-ico { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--gg-hue) 22%, transparent); color: var(--gg-hue-text); }
.gg-note p { font-size: 15px; line-height: 1.6; }
.gg-note--warn { border-color: var(--gg-cta); background: rgba(254,203,63,.06); }
.gg-note--warn > .gg-ico { color: var(--gg-cta); background: rgba(254,203,63,.14); }
.gg-note--rg { border-color: var(--gg-brand); background: color-mix(in srgb, var(--gg-brand) 7%, transparent); }
.gg-note--rg > .gg-ico { color: var(--gg-brand-text); background: color-mix(in srgb, var(--gg-brand) 18%, transparent); }

/* T4/T5 таблица */
.gg-table { overflow-x: auto; border: 1px solid var(--gg-line); border-radius: var(--gg-r-s); background: var(--gg-bg); }
.gg-table table { width: 100%; min-width: 520px; font-size: 14px; line-height: 1.45; }
.gg-table caption { caption-side: top; text-align: left; padding: 10px 14px; font-size: 13px; color: var(--gg-muted); }
.gg-table thead th { background: var(--gg-card-hi); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.gg-table tbody th, .gg-table td { padding: 12px 14px; border-top: 1px solid var(--gg-line); text-align: left; vertical-align: top; }
.gg-table tbody th { font-weight: 600; color: var(--gg-text); }
.gg-table td { color: var(--gg-soft); }
@media (max-width: 599px) {
  .gg-table tbody th, .gg-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--gg-deck); }
  .gg-table thead th:first-child { background: var(--gg-card-hi); }
}
.gg-table--duo thead th { text-transform: none; letter-spacing: 0; }
.gg-table--duo table { min-width: 560px; }
.gg-table--duo thead th:first-child, .gg-table--duo tbody th { width: 30%; }

/* файл-бокс портала (W13 + T5) */
.gg-filebox { border: 1px solid color-mix(in srgb, var(--gg-hue) 55%, var(--gg-line)); border-radius: var(--gg-r-l); background: var(--gg-deck); padding: 10px; }
.gg-filebox__bar { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; }
.gg-filebox__icon { width: 44px; height: 44px; border-radius: 12px; }
.gg-filebox__bar span { display: flex; flex-direction: column; line-height: 1.3; }
.gg-filebox__bar small { color: var(--gg-muted); font-size: 13px; }
.gg-filebox .gg-table { border-radius: var(--gg-r-m); }

/* T8 карточки */
.gg-cards { display: grid; gap: 12px; }
@media (min-width: 600px) { .gg-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gg-cards--three { grid-template-columns: repeat(3, 1fr); } }
.gg-card { background: var(--gg-card); border-radius: var(--gg-r-m); padding: 16px; display: grid; gap: 12px; align-content: start; border: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.gg-card:hover { box-shadow: var(--gg-glow); }
.gg-card > .gg-ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--gg-hue) 18%, transparent); color: var(--gg-hue-text); }
.gg-card p { font-size: 15px; line-height: 1.55; color: var(--gg-soft); }

/* список-галочки */
.gg-ticks { display: grid; gap: 8px; }
@media (min-width: 600px) { .gg-ticks { grid-template-columns: 1fr 1fr; } }
.gg-ticks li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--gg-r-s); background: var(--gg-deck); border: 1px solid var(--gg-line); font-weight: 600; font-size: 15px; }
.gg-ticks .gg-ico { width: 22px; height: 22px; color: var(--gg-hue-text); fill: color-mix(in srgb, var(--gg-hue) 35%, transparent); }

/* T6 плёнка шагов: кадр в рамке «верх телефона» (phone) или браузера (browser), номер на кромке кадра */
.gg-film { counter-reset: gg-step; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
.gg-film__step { position: relative; counter-increment: gg-step; scroll-snap-align: start; display: grid; align-content: start; gap: 10px; padding-top: 14px; }
.gg-film__step::before { content: counter(gg-step); position: absolute; left: 14px; top: 0; z-index: 2; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--gg-hue); color: var(--gg-on-hue); font: 700 20px/1 var(--gg-display); padding-top: 3px; box-shadow: 0 0 0 3px var(--gg-bg); }
.gg-film__step--noshot { padding-top: 0; grid-template-columns: 28px 1fr; column-gap: 10px; }
.gg-film__step--noshot::before { position: static; grid-row: 1; }
.gg-film__step--noshot > * { grid-column: 2; }
.gg-film__frame { margin-bottom: 6px; }
.gg-film--phone .gg-film__frame img { aspect-ratio: 780 / 488; object-fit: cover; object-position: top center; }
.gg-film--browser .gg-film__frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.gg-film[data-ratio] .gg-film__frame img { aspect-ratio: auto; }
.gg-film__step h3 { font-size: 17px; }
.gg-film__step p { font-size: 15px; color: var(--gg-soft); }
@media (min-width: 768px) {
  .gg-film { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .gg-film--many { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .gg-film--many { grid-template-columns: repeat(3, 1fr); } }
/* плёнка с шагами без кадра: на узком экране вертикальный список, чтобы шаг без кадра не тянулся до высоты кадра */
@media (max-width: 767.98px) { .gg-film--mixed { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; gap: 20px; } }

/* рамки кадров: phone (весь телефон), phone-top (верх телефона, низ растворяется), browser (полоса с точками), plain */
.gg-frame { position: relative; overflow: hidden; background: var(--gg-bg); }
.gg-frame img { width: 100%; }
.gg-frame--plain { border-radius: var(--gg-r-m); border: 1px solid var(--gg-line); }
.gg-frame--phone { border: 6px solid #2C2448; border-radius: 28px; box-shadow: 0 20px 50px -24px color-mix(in srgb, var(--gg-hue) 70%, transparent); }
.gg-frame--phone::before, .gg-frame--phone-top::before { content: ''; position: absolute; left: 50%; top: 6px; z-index: 1; width: 30%; height: 12px; margin-left: -15%; border-radius: 8px; background: #2C2448; }
.gg-frame--phone-top { border: 6px solid #2C2448; border-bottom: 0; border-radius: 28px 28px 0 0; padding-top: 22px; background: #140C24;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.gg-frame--browser { border: 1px solid var(--gg-line); border-radius: var(--gg-r-m); padding-top: 22px; background: var(--gg-deck); }
.gg-frame--browser::before { content: ''; position: absolute; left: 12px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #FF6FA5; box-shadow: 11px 0 #F2BB24, 22px 0 #75CD18; }
.gg-fig { display: grid; gap: 8px; }
.gg-fig figcaption { font-size: 13px; color: var(--gg-muted); line-height: 1.45; }
.gg-fig--phone { justify-items: center; }
.gg-fig--phone .gg-frame { width: min(260px, 100%); }

/* T7 таймлайн */
.gg-line { position: relative; display: grid; gap: 16px; padding-left: 26px; }
.gg-line::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--gg-line); }
.gg-line li { position: relative; color: var(--gg-soft); }
.gg-line li::before { content: ""; position: absolute; left: -26px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--gg-hue); box-shadow: 0 0 0 4px var(--gg-bg); }
.gg-line strong { color: var(--gg-text); }

/* T3 проза + факты */
.gg-split { display: grid; gap: 16px; }
.gg-split > div > * + * { margin-top: 14px; }
@media (min-width: 768px) { .gg-split { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: 24px; } }
.gg-facts { background: var(--gg-card); border-radius: var(--gg-r-m); border-top: 3px solid var(--gg-hue); padding: 16px; }
.gg-facts__title { font-weight: 700; margin-bottom: 8px; }
.gg-facts dl { display: grid; gap: 10px; }
.gg-facts dl > div + div { border-top: 1px solid var(--gg-line); padding-top: 10px; }
.gg-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-muted); }
.gg-facts dd { font: 700 24px/1.05 var(--gg-display); letter-spacing: .01em; }

/* T15 FAQ */
.gg-faqs { display: grid; gap: 18px; }
.gg-faqs__side { display: grid; gap: 14px; justify-items: start; align-content: start; }
.gg-faqs__side h2 { margin-bottom: 0; }
.gg-faqs__list { display: grid; gap: 10px; }
.gg-faq { background: var(--gg-card); border-radius: var(--gg-r-m); border: 1px solid transparent; }
.gg-faq[open] { border-color: color-mix(in srgb, var(--gg-hue) 50%, transparent); }
.gg-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer; }
.gg-faq summary::-webkit-details-marker { display: none; }
.gg-faq summary h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.gg-faq__plus { position: relative; flex: none; width: 20px; height: 20px; transition: transform .2s; }
.gg-faq__plus::before, .gg-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--gg-hue-text); border-radius: 1px; }
.gg-faq__plus::after { transform: rotate(90deg); }
.gg-faq[open] .gg-faq__plus { transform: rotate(45deg); }
.gg-faq__a { padding: 0 16px 16px; color: var(--gg-soft); font-size: 15px; }
@media (min-width: 1024px) {
  .gg-faqs { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  .gg-faqs__side { position: sticky; top: calc(var(--gg-tabs-h) + 64px); }
  .gg-faq summary h3 { font-size: 17px; }
}

/* ---------- W: общие ---------- */
.gg-w { margin-top: 28px; }
@media (min-width: 1024px) { .gg-w { margin-top: 40px; } }
.gg-w__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gg-w__title { font: 700 28px/1 var(--gg-display); text-transform: uppercase; letter-spacing: .02em; padding-top: 4px; }
@media (min-width: 1024px) { .gg-w__title { font-size: 34px; } }
.gg-w__sub { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--gg-muted); }

/* W1 рельса */
.gg-rail__nav { display: none; gap: 8px; flex: none; }
@media (min-width: 1024px) { .gg-rail__nav:not([hidden]) { display: flex; } }
.gg-rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; margin-inline: calc(-1 * var(--gg-pad)); padding: 4px var(--gg-pad) 10px;
  scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
.gg-rail ul { display: flex; gap: 12px; width: max-content; }
.gg-tile { width: 132px; flex: none; scroll-snap-align: start; }
@media (min-width: 1024px) { .gg-tile { width: 150px; } .gg-rail { margin-inline: 0; padding-inline: 0; } }
@media (min-width: 1280px) { .gg-tile { width: 168px; } }
.gg-tile figure { position: relative; }
.gg-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--gg-r-m); border: 1px solid var(--gg-line); background: var(--gg-card); transition: transform .2s, box-shadow .2s; }
.gg-tile:hover img { transform: translateY(-2px); box-shadow: var(--gg-glow); }
.gg-tile figcaption { display: flex; flex-direction: column; padding-top: 8px; line-height: 1.35; }
.gg-tile__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-tile__prov { font-size: 12px; color: var(--gg-muted); }
.gg-badge { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 8px; border-radius: var(--gg-r-pill); background: var(--gg-hue); color: var(--gg-on-hue);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.gg-tail { aspect-ratio: 1; align-self: flex-start; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 14px; border-radius: var(--gg-r-m);
  background: color-mix(in srgb, var(--gg-hue) 18%, var(--gg-deck)); border: 1px solid color-mix(in srgb, var(--gg-hue) 50%, transparent); }
.gg-tail p { font: 700 22px/1 var(--gg-display); text-transform: uppercase; }
.gg-tail .gg-btn { padding: 0 12px; font-size: 13px; }

/* ---------- W13 download-портал ---------- */
.gg-portal { display: grid; gap: 22px; margin-top: 18px; }
.gg-portal__info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.gg-prog { display: flex; align-items: center; gap: 14px; }
.gg-prog__icon { width: 72px; height: 72px; flex: none; border-radius: 18px; }
.gg-prog h1 { font-size: clamp(24px, 3.2vw, 40px); }
.gg-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-meta > div { display: flex; gap: 5px; align-items: baseline; padding: 5px 11px; border-radius: var(--gg-r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--gg-line); font-size: 13px; line-height: 1.4; }
.gg-meta dt { color: var(--gg-muted); }
.gg-meta dt::after { content: ":"; }
.gg-meta dd { font-weight: 600; overflow-wrap: anywhere; }

.gg-dl { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--gg-r-l); background: color-mix(in srgb, var(--gg-hue) 14%, var(--gg-bg));
  border: 1px solid color-mix(in srgb, var(--gg-hue) 45%, transparent); box-shadow: var(--gg-glow); }
.gg-dl .gg-btn { width: 100%; }
.gg-dl .gg-btn--xl .gg-ico { width: 26px; height: 26px; fill: rgba(18,16,24,.12); }
.gg-dl__h { font: 700 26px/1 var(--gg-display); text-transform: uppercase; letter-spacing: .02em; padding: 2px 2px 0; }
.gg-dl .gg-btn--xl .gg-btn__t span { font-size: 17px; }
.gg-dl__micro { font-size: 13px; line-height: 1.45; color: var(--gg-soft); padding: 4px 2px; }
.gg-dl .gg-btn--ghost { min-height: 52px; padding: 6px 20px; justify-content: center; text-align: center; }
.gg-dl .gg-btn--ghost .gg-btn__t { align-items: center; }

.gg-portal__phone { display: grid; justify-items: center; gap: 8px; }
.gg-portal__phone figcaption, .gg-shots figcaption { font-size: 12px; color: var(--gg-muted); text-align: center; line-height: 1.4; }
.gg-phone { position: relative; border: 6px solid #2C2448; border-radius: 28px; overflow: hidden; background: var(--gg-bg); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--gg-hue) 70%, transparent); }
.gg-phone::before { content: ""; position: absolute; left: 50%; top: 6px; z-index: 1; width: 34%; height: 14px; margin-left: -17%; border-radius: 10px; background: #2C2448; }
.gg-phone--wide::before { display: none; }
.gg-phone img { width: 100%; }
.gg-portal__phone .gg-phone { width: min(200px, 60vw); }
.gg-dl { order: 1; } .gg-portal__phone { order: 2; }

.gg-shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gg-pad)); padding: 4px var(--gg-pad) 10px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
.gg-shots li { flex: none; scroll-snap-align: start; }
.gg-shots figure { display: grid; gap: 8px; }
.gg-shots .gg-phone { height: 340px; }
.gg-shots .gg-phone img { height: 100%; width: auto; }
@media (min-width: 1024px) { .gg-shots { margin-inline: 0; padding-inline: 0; } .gg-shots .gg-phone { height: 400px; } }

@media (min-width: 600px) { .gg-prog__icon { width: 96px; height: 96px; border-radius: 24px; } }
@media (min-width: 1024px) {
  .gg-portal { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 40px; align-items: start; }
  .gg-portal__info { grid-column: 1; }
  .gg-dl, .gg-portal__phone { order: 0; }
  .gg-portal__phone .gg-phone { width: 220px; }
  .gg-dl { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--gg-tabs-h) + 12px); }
  .gg-portal__phone { grid-column: 1; justify-items: start; }
}
@media (min-width: 1280px) {
  .gg-portal { grid-template-columns: minmax(0, 1fr) 250px 340px; }
  .gg-portal__phone { grid-column: 2; grid-row: 1; }
  .gg-dl { grid-column: 3; grid-row: 1; }
  .gg-portal__phone .gg-phone { width: 250px; }
}

/* вкладки портала: липнут под лентой разделов, заменяют TOC */
.gg-ptabs { position: sticky; top: var(--gg-tabs-h); z-index: 30; background: color-mix(in srgb, var(--gg-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gg-line); margin-top: 8px; }
.gg-ptabs ul { display: flex; gap: 6px; height: 48px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.gg-ptabs a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--gg-r-pill); text-decoration: none; font-size: 14px; font-weight: 600; color: var(--gg-soft); white-space: nowrap; }
.gg-ptabs a:hover { color: var(--gg-text); background: rgba(255,255,255,.05); }
.gg-ptabs a.is-on { color: var(--gg-on-hue); background: var(--gg-hue); }
.gg-page--app { scroll-padding-top: calc(var(--gg-tabs-h) + 60px); }
html:has(.gg-page--app) { scroll-padding-top: calc(var(--gg-tabs-h) + 60px); }

/* текст портала + док загрузки: справа липкая карточка (>= 1024), снизу бар (< 1024) */
.gg-body--portal { padding-top: 32px; }
.gg-body__grid { display: block; }
.gg-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 var(--gg-pad);
  background: var(--gg-deck); box-shadow: var(--gg-lift); border-top: 1px solid var(--gg-line); transition: transform .25s; }
.gg-dock.is-off { transform: translateY(110%); }
.gg-dock__icon { width: 32px; height: 32px; border-radius: 9px; }
.gg-dock__t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.gg-dock__t strong { font-size: 14px; }
.gg-dock__t small { font-size: 12px; color: var(--gg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-page--app { padding-bottom: 72px; }
@media (min-width: 1024px) {
  .gg-page--app { padding-bottom: 0; }
  .gg-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
  .gg-body--portal .gg-read { max-width: 960px; }
  .gg-body--portal .gg-sec:not(.gg-sec--wide):not(.gg-faqs) > *:not(.gg-wide) { max-width: var(--gg-read); }
  .gg-dock { position: sticky; top: calc(var(--gg-tabs-h) + 64px); left: auto; right: auto; bottom: auto; height: auto; flex-direction: column; align-items: stretch;
    gap: 12px; padding: 18px; border-radius: var(--gg-r-l); border: 1px solid var(--gg-line); box-shadow: var(--gg-glow); transform: none !important; }
  .gg-dock__icon { width: 56px; height: 56px; border-radius: 14px; }
  .gg-dock__t strong { font-size: 17px; }
  .gg-dock__t small { white-space: normal; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .gg-body__grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; } }

/* =====================================================================
   Общие секции для всех страниц (sections.mjs). Порядок: сцена, текст, T, W.
   ===================================================================== */

/* ---------- T1 сцена: шапка 7/5 (текст | кнопки), compact - техстраницы ---------- */
.gg-stage__head { display: grid; gap: 18px; margin-top: 16px; }
.gg-stage__text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.gg-stage__act { display: grid; gap: 12px; align-content: start; }
.gg-stage__ctas { display: grid; gap: 10px; }
.gg-stage__ctas .gg-btn { width: 100%; }
.gg-stage__fact { font: 700 22px/1.1 var(--gg-display); text-transform: uppercase; letter-spacing: .02em; color: var(--gg-hue-text); }
.gg-stage__under { font-size: 14px; line-height: 1.5; color: var(--gg-soft); }
.gg-stage__aside { min-width: 0; }
.gg-stage--compact { padding-bottom: 28px; }
@media (min-width: 600px) { .gg-stage__ctas { display: flex; flex-wrap: wrap; } .gg-stage__ctas .gg-btn { width: auto; } }
@media (min-width: 1024px) {
  .gg-stage__head { grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
  .gg-stage__head--solo { grid-template-columns: minmax(0, 860px); }
  .gg-stage__act { padding: 20px; border-radius: var(--gg-r-l); background: rgba(15,10,28,.45); border: 1px solid var(--gg-line); }
  .gg-stage__act .gg-stage__ctas { display: grid; }
  .gg-stage__act .gg-stage__ctas .gg-btn { width: 100%; }
}

/* ---------- текст + оглавление ---------- */
.gg-body__toc { display: grid; gap: 24px; }
.gg-toc { border: 1px solid var(--gg-line); border-radius: var(--gg-r-m); background: var(--gg-deck); }
.gg-toc summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; }
.gg-toc summary::-webkit-details-marker { display: none; }
.gg-toc summary::after { content: "+"; color: var(--gg-hue-text); font-size: 20px; line-height: 1; }
.gg-toc[open] summary::after { content: "-"; }
.gg-toc ol { display: grid; gap: 2px; padding: 0 8px 12px; }
.gg-toc a { display: block; padding: 6px 10px 6px 12px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--gg-muted); text-decoration: none; }
.gg-toc a:hover { color: var(--gg-text); }
.gg-toc a.is-on { color: var(--gg-text); border-left-color: var(--gg-hue); }
@media (min-width: 1280px) {
  .gg-body__toc { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
  .gg-toc { position: sticky; top: calc(var(--gg-tabs-h) + 16px); max-height: calc(100vh - var(--gg-tabs-h) - 32px); overflow-y: auto; border: 0; background: none; }
  .gg-toc summary { pointer-events: none; padding: 0 0 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gg-muted); }
  .gg-toc summary::after { display: none; }
  .gg-toc ol { padding: 0; }
  .gg-body__toc .gg-read { max-width: 960px; }
  :where(.gg-body__toc .gg-sec > *:not(.gg-wide, .gg-split, .gg-faqs__list, .gg-withfig, .gg-sec__in)) { max-width: var(--gg-read); }
  .gg-body__solo { grid-template-columns: minmax(0, 960px); }
}

/* T2 мелочи */
.gg-list { display: grid; gap: 8px; }
.gg-list li { position: relative; padding-left: 22px; }
.gg-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--gg-hue); }
.gg-list--ol { counter-reset: li; }
.gg-list--ol li { padding-left: 34px; counter-increment: li; }
.gg-list--ol li::before { content: counter(li); top: .15em; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--gg-display); padding-top: 2px; color: var(--gg-on-hue); }
.gg-list a { color: var(--gg-hue-text); text-underline-offset: 3px; }
.gg-kbd { display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--gg-line); border-bottom-width: 2px; background: var(--gg-card); font: 600 14px/1.5 var(--gg-font); color: var(--gg-text); }
.gg-num { font: 700 20px/1 var(--gg-display); color: var(--gg-text); letter-spacing: .01em; }
.gg-mono { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gg-card-hi); box-shadow: inset 0 0 0 1.5px var(--gg-hue); font-size: 11px; font-weight: 700; color: var(--gg-text); }
.gg-logocell { display: inline-flex; align-items: center; gap: 8px; }
.gg-logocell img { width: 24px; height: 24px; border-radius: 6px; }
.gg-logocell .gg-mono { width: 24px; height: 24px; font-size: 10px; }
.gg-logos { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.gg-logos .gg-logocell { white-space: nowrap; }
.gg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gg-chips--center { justify-content: center; }
.gg-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--gg-r-pill); border: 1px solid color-mix(in srgb, var(--gg-hue) 45%, var(--gg-line)); font-size: 12px; font-weight: 600; color: var(--gg-soft); line-height: 1.5; }
.gg-more { margin-top: 12px; }
.gg-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--gg-r-pill); background: rgba(255,255,255,.06); border: 1px solid var(--gg-line); font-size: 14px; font-weight: 600; list-style: none; }
.gg-more > summary::-webkit-details-marker { display: none; }
.gg-more > summary::after { content: "+"; color: var(--gg-hue-text); }
.gg-more[open] > summary::after { content: "-"; }
.gg-more[open] > summary { margin-bottom: 12px; }
.gg-cols { columns: 2; column-gap: 16px; font-size: 14px; color: var(--gg-soft); }
.gg-cols li { break-inside: avoid; padding: 3px 0; }
@media (min-width: 768px) { .gg-cols { columns: 4; } }

/* T14 раздел целиком в примечании */
.gg-sec--note { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--gg-r-l); border: 1px solid var(--gg-hue); background: color-mix(in srgb, var(--gg-hue) 8%, transparent); }
.gg-sec--note.gg-note--warn { border-color: var(--gg-cta); background: rgba(254,203,63,.06); }
.gg-sec--note.gg-note--rg { border-color: var(--gg-brand); background: color-mix(in srgb, var(--gg-brand) 7%, transparent); }
.gg-sec__ico { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: color-mix(in srgb, var(--gg-hue) 22%, transparent); color: var(--gg-hue-text); }
.gg-note--warn > .gg-sec__ico { color: var(--gg-cta); background: rgba(254,203,63,.14); }
.gg-note--rg > .gg-sec__ico { color: var(--gg-brand-text); background: color-mix(in srgb, var(--gg-brand) 18%, transparent); }
.gg-sec__in { min-width: 0; display: grid; gap: 14px; }
.gg-sec--note > * + * { margin-top: 0; }
.gg-sec--note h2 { padding-left: 0; margin-bottom: 0; }
.gg-sec--note h2::before { display: none; }
.gg-sec--note a { color: var(--gg-hue-text); text-underline-offset: 3px; }
.gg-note--rg a { color: var(--gg-brand-text); }
@media (max-width: 599px) { .gg-sec--note { flex-direction: column; } }

/* текст + кадр справа */
.gg-withfig { display: grid; gap: 16px; }
.gg-withfig__a > * + *, .gg-withfig__b > * + * { margin-top: 14px; }
@media (min-width: 768px) {
  .gg-withfig { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 28px; align-items: start; }
  .gg-withfig > .gg-fig { grid-column: 2; grid-row: 1 / span 2; }
  .gg-withfig__a, .gg-withfig__b { grid-column: 1; }
}
/* полоса обложек */
.gg-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .gg-strip { grid-template-columns: repeat(4, 1fr); } }
.gg-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--gg-r-m); border: 1px solid var(--gg-line); }
.gg-strip figcaption { font-size: 13px; font-weight: 600; padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* T7: кадр у узла */
.gg-line li > div { min-width: 0; }
.gg-line__shot { display: grid; gap: 12px; }
@media (min-width: 768px) { .gg-line__shot { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } }

/* T8 варианты */
.gg-card__body { display: grid; gap: 8px; align-content: start; }
.gg-card h3 { font-size: 17px; }
.gg-card__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-hue-text); }
.gg-card__studio { font-size: 13px; color: var(--gg-muted); }
.gg-card__sol { padding: 10px 12px; border-radius: var(--gg-r-s); background: rgba(255,255,255,.04); display: grid; gap: 4px; }
.gg-card__btn { margin-top: auto; padding-top: 4px; }
.gg-card__btn .gg-btn { width: 100%; }
.gg-card__art { margin: -16px -16px 0; border-radius: var(--gg-r-m) var(--gg-r-m) 0 0; overflow: hidden; }
.gg-card__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gg-card__cover { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--gg-line); }
.gg-cards--offers .gg-card, .gg-cards--duo .gg-card { display: flex; flex-direction: column; }
.gg-cards--games .gg-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
.gg-cards--situations .gg-card { border-left: 3px solid var(--gg-hue); }
@media (min-width: 600px) { .gg-cards--games { grid-template-columns: 1fr; } }
@media (min-width: 1024px) {
  .gg-cards--four { grid-template-columns: repeat(2, 1fr); }
  .gg-cards--offers.gg-wide, .gg-cards--four.gg-wide { grid-template-columns: repeat(4, 1fr); }
  .gg-cards--games { grid-template-columns: 1fr 1fr; }
}

/* T9 чек-лист */
.gg-check fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.gg-check legend { font-weight: 650; font-size: 18px; margin-bottom: 10px; padding: 0; }
.gg-check__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--gg-r-m); background: var(--gg-card); border: 1px solid transparent; }
.gg-check__row:has(input:checked) { border-color: color-mix(in srgb, var(--gg-hue) 60%, transparent); background: color-mix(in srgb, var(--gg-hue) 12%, var(--gg-card)); }
.gg-check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--gg-hue); }
.gg-check label { font-size: 15px; color: var(--gg-soft); cursor: pointer; }
.gg-check label strong { color: var(--gg-text); }
.gg-check__out { display: inline-block; margin-top: 12px; padding: 4px 14px; border-radius: var(--gg-r-pill); background: var(--gg-hue); color: var(--gg-on-hue); font: 700 20px/1.3 var(--gg-display); }

/* T10 калькулятор, T11 планировщик */
.gg-calc, .gg-plan { display: grid; gap: 14px; padding: 18px; border-radius: var(--gg-r-l); background: var(--gg-deck); border: 1px solid var(--gg-line); }
.gg-calc[hidden], .gg-plan[hidden], .gg-check__out[hidden] { display: none; }
.gg-calc__f { display: grid; gap: 6px; }
.gg-calc label, .gg-plan legend { font-size: 13px; font-weight: 600; color: var(--gg-muted); }
.gg-calc select, .gg-calc input { font: 600 16px var(--gg-font); color: var(--gg-text); background: var(--gg-card); border: 1px solid var(--gg-line); border-radius: var(--gg-r-s); padding: 10px 12px; min-height: 44px; width: 100%; }
.gg-calc__out, .gg-plan__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gg-calc__out > div, .gg-plan__out > div { padding: 12px; border-radius: var(--gg-r-m); background: var(--gg-card); }
.gg-calc__out p, .gg-plan__out p { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gg-muted); }
.gg-calc output, .gg-plan output { display: block; font: 700 34px/1 var(--gg-display); color: var(--gg-text); padding-top: 6px; }
.gg-plan output { font-size: 26px; }
@media (min-width: 768px) { .gg-calc { grid-template-columns: 1fr 1fr; } .gg-calc__out { grid-column: 1 / -1; } }
.gg-plan fieldset { border: 0; margin: 0; padding: 0; }
.gg-plan legend { margin-bottom: 8px; padding: 0; }
.gg-plan__days { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-plan__days input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gg-plan__days label { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 10px; border-radius: var(--gg-r-pill); background: var(--gg-card); border: 1px solid var(--gg-line); font-weight: 600; color: var(--gg-soft); cursor: pointer; }
.gg-plan__days input:checked + label { background: var(--gg-hue); color: var(--gg-on-hue); border-color: var(--gg-hue); }
.gg-plan__days input:focus-visible + label { outline: 2px solid var(--gg-brand-text); outline-offset: 2px; }

/* T12 неделя */
.gg-week { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
@media (min-width: 1024px) { .gg-week { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } }
.gg-week__day { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: var(--gg-r-m); background: var(--gg-deck); border: 1px solid var(--gg-line); min-height: 150px; }
.gg-week__name { font: 700 22px/1 var(--gg-display); text-transform: uppercase; color: var(--gg-hue-text); }
.gg-week__name abbr { text-decoration: none; }
.gg-week__item { display: grid; gap: 4px; padding: 8px; border-radius: var(--gg-r-s); background: var(--gg-card); }
.gg-week__item .gg-chip { justify-self: start; font-size: 10px; padding: 1px 7px; }
.gg-week__t { font-size: 13px; font-weight: 600; line-height: 1.35; }
.gg-week__amt { font: 700 18px/1 var(--gg-display); color: var(--gg-text); }
.gg-week__none { font-size: 13px; color: var(--gg-muted); }

/* T13 чек */
.gg-receipt { max-width: 380px; padding: 22px 20px 18px; background: var(--gg-card); border-radius: 4px 4px var(--gg-r-m) var(--gg-r-m);
  -webkit-mask: radial-gradient(circle 6px at 8px 0, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle 6px at 8px 0, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x; }
.gg-receipt dl { display: grid; gap: 8px; }
.gg-receipt dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.gg-receipt dt { color: var(--gg-soft); }
.gg-receipt dd { font: 700 20px/1.1 var(--gg-display); white-space: nowrap; }
.gg-receipt__total { margin-top: 6px; padding-top: 10px; border-top: 2px dashed var(--gg-line); }
.gg-receipt__total dt { color: var(--gg-text); font-weight: 700; }
.gg-receipt__total dd { font-size: 26px; color: var(--gg-hue-text); }
.gg-receipt figcaption { margin-top: 12px; font-size: 12px; color: var(--gg-muted); }

/* T16 билет */
.gg-ticket { display: grid; gap: 16px; padding: 22px 28px; border-radius: var(--gg-r-l); background: var(--gg-card); border: 1px dashed color-mix(in srgb, var(--gg-hue) 60%, transparent);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat; }
.gg-ticket__t { font-weight: 700; font-size: 22px; line-height: 1.25; }
.gg-ticket__f { font: 700 24px/1 var(--gg-display); color: var(--gg-hue-text); margin-top: 6px; }
.gg-ticket__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 768px) { .gg-ticket { grid-template-columns: 1fr auto; align-items: center; } }

/* T17 каналы */
.gg-channels { display: grid; gap: 12px; }
@media (min-width: 600px) { .gg-channels { grid-template-columns: 1fr 1fr; } }
.gg-channel { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--gg-r-l); background: var(--gg-card); border-top: 3px solid var(--gg-hue); }
.gg-channel > .gg-ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--gg-hue) 18%, transparent); color: var(--gg-hue-text); }
.gg-channel__big { font: 700 34px/1 var(--gg-display); }
.gg-channel h3 a { color: var(--gg-hue-text); text-underline-offset: 3px; }
.gg-channel p { font-size: 15px; color: var(--gg-soft); }

/* T18 legal: номера 01, 02 у H2 */
.gg-read--legal { counter-reset: lg; }
.gg-read--legal > .gg-sec { counter-increment: lg; }
.gg-read--legal > .gg-sec > h2 { padding-left: 0; display: flex; gap: 12px; align-items: baseline; }
.gg-read--legal > .gg-sec > h2::before { content: counter(lg, decimal-leading-zero); position: static; width: auto; height: auto; background: none; font: 700 26px/1 var(--gg-display); color: var(--gg-muted); flex: none; }
.gg-read--legal p { line-height: 1.7; }

/* ---------- W общие ---------- */
.gg-w__right { display: flex; align-items: center; gap: 10px; flex: none; }
.gg-w__note { margin-top: 10px; font-size: 13px; color: var(--gg-muted); }
@media (max-width: 599px) { .gg-w__head { flex-wrap: wrap; align-items: flex-start; } }

/* сегменты (radio) и панели: CSS :has, без JS */
.gg-seg { border: 0; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.gg-seg::-webkit-scrollbar { display: none; }
.gg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gg-seg label { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--gg-r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--gg-line); font-size: 14px; font-weight: 600; color: var(--gg-soft); cursor: pointer; white-space: nowrap; }
.gg-seg label:hover { color: var(--gg-text); }
.gg-seg input:checked + label { background: var(--gg-hue); border-color: var(--gg-hue); color: var(--gg-on-hue); }
.gg-seg input:focus-visible + label { outline: 2px solid var(--gg-brand-text); outline-offset: 2px; }
.gg-panel { display: none; }
.gg-segw:has(.gg-seg input:nth-of-type(1):checked) .gg-panel:nth-child(1),
.gg-segw:has(.gg-seg input:nth-of-type(2):checked) .gg-panel:nth-child(2),
.gg-segw:has(.gg-seg input:nth-of-type(3):checked) .gg-panel:nth-child(3),
.gg-segw:has(.gg-seg input:nth-of-type(4):checked) .gg-panel:nth-child(4),
.gg-segw:has(.gg-seg input:nth-of-type(5):checked) .gg-panel:nth-child(5),
.gg-segw:has(.gg-seg input:nth-of-type(6):checked) .gg-panel:nth-child(6),
.gg-segw:has(.gg-seg input:nth-of-type(7):checked) .gg-panel:nth-child(7),
.gg-segw:has(.gg-seg input:nth-of-type(8):checked) .gg-panel:nth-child(8),
.gg-segw:has(.gg-seg input:nth-of-type(9):checked) .gg-panel:nth-child(9),
.gg-segw:has(.gg-seg input:nth-of-type(10):checked) .gg-panel:nth-child(10) { display: block; }
/* фильтр по data-cat (W9, W14) */
.gg-segw:has(input[value="casino"]:checked) [data-cat]:not([data-cat="casino"]),
.gg-segw:has(input[value="sport"]:checked) [data-cat]:not([data-cat="sport"]),
.gg-segw:has(input[value="herlaad"]:checked) [data-cat]:not([data-cat="herlaad"]),
.gg-segw:has(input[value="ideal"]:checked) [data-cat]:not([data-cat="ideal"]),
.gg-segw:has(input[value="kaart"]:checked) [data-cat]:not([data-cat="kaart"]),
.gg-segw:has(input[value="bank"]:checked) [data-cat]:not([data-cat="bank"]),
.gg-segw:has(input[value="crypto"]:checked) [data-cat]:not([data-cat="crypto"]) { display: none; }

/* W2 бенто */
.gg-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gg-bento .gg-tile { width: auto; }
.gg-bento .gg-tile:first-child { grid-column: span 2; grid-row: span 2; }
.gg-bento .gg-tile:first-child figure { height: 100%; }
.gg-bento .gg-tile:first-child figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; border-radius: 0 0 var(--gg-r-m) var(--gg-r-m); background: linear-gradient(transparent, rgba(15,10,28,.92)); }
.gg-bento .gg-tile:first-child .gg-tile__name { font-size: 17px; }
.gg-bento .gg-tile:nth-child(n+8) { display: none; }
@media (min-width: 1024px) { .gg-bento { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .gg-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gg-bento .gg-tile:nth-child(n+8) { display: block; } }

/* W3 live */
.gg-lives { display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
@media (min-width: 1024px) { .gg-lives { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 1280px) { .gg-lives { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gg-livecard { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--gg-r-m); background: var(--gg-card); border: 1px solid var(--gg-line); min-width: 0; }
.gg-livecard img { width: 88px; height: 88px; flex: none; border-radius: 10px; object-fit: cover; }
.gg-livecard > div { min-width: 0; display: grid; gap: 4px; }
.gg-livecard__name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-livecard__prov { font-size: 12px; color: var(--gg-muted); }
.gg-livecard__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gg-live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gg-brand-text); }
.gg-live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gg-brand); }
@media (prefers-reduced-motion: no-preference) { .gg-live-dot::before { animation: gg-pulse 1.6s ease-in-out infinite; } }
@keyframes gg-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gg-brand) 25%, transparent); } }

/* W4 студии */
.gg-studios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1024px) { .gg-studios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .gg-studios { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gg-studio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--gg-r-s); background: var(--gg-card); font-size: 14px; font-weight: 600; min-width: 0; }
.gg-studio img, .gg-studio img.gg-logo-light, .gg-logocell img.gg-logo-light { background: #ECE8F5; padding: 3px; }
.gg-studio .gg-mono { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.gg-studio .gg-mono { background: color-mix(in srgb, var(--gg-hue) 30%, var(--gg-card)); box-shadow: none; }
.gg-studio span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* W5 HOT / OPGELADEN */
.gg-lanes { display: grid; gap: 20px; min-width: 0; }
.gg-lane { min-width: 0; }
.gg-lane h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; }
.gg-lane--hot h3 .gg-ico { color: var(--gg-brand); }
.gg-lane--charged h3 .gg-ico { color: #5CD0F0; }
.gg-lane--charged .gg-badge { background: #14B7E0; color: #121018; }
.gg-lane--hot .gg-badge { background: var(--gg-brand); color: #121018; }
@media (min-width: 1024px) { .gg-lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }

/* W6 мозаика коллекций */
.gg-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gg-mosaic__i figure { position: relative; height: 100%; border-radius: var(--gg-r-m); overflow: hidden; }
.gg-mosaic__i img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.gg-mosaic__i figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 12px 3px; font: 700 24px/1 var(--gg-display); text-transform: uppercase; color: #121018; background: var(--c, var(--gg-hue)); }
.gg-mosaic__i--1 { grid-column: span 2; }
.gg-mosaic__i--1 img { aspect-ratio: 2 / 1; }
.gg-col--halloween { --c: #F2BB24; } .gg-col--monsters { --c: #E3328E; } .gg-col--horror { --c: #FF7835; } .gg-col--hel { --c: #E83F33; }
.gg-col--vampieren { --c: #75CD18; } .gg-col--gotisch { --c: #14B7E0; } .gg-col--zombies { --c: #8133E8; }
.gg-col--zombies figcaption { color: #FFFFFF; }
@media (min-width: 1024px) {
  .gg-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; }
  .gg-mosaic__i--1 { grid-column: 1; grid-row: span 2; }
  .gg-mosaic__i img, .gg-mosaic__i--1 img { aspect-ratio: auto; }
}

/* W7 матчи */
.gg-match { width: 260px; display: grid; gap: 8px; padding: 14px; border-radius: var(--gg-r-m); background: var(--gg-card); border: 1px solid var(--gg-line); }
@media (min-width: 1024px) { .gg-match { width: 280px; } }
.gg-match__top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-muted); }
.gg-match__top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-match__top time { flex: none; }
.gg-match__team { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.gg-match--comp { align-content: start; }
.gg-match__comp { display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--gg-display); }
.gg-match__comp .gg-ico { width: 28px; height: 28px; flex: none; color: var(--gg-hue-text); fill: color-mix(in srgb, var(--gg-hue) 35%, transparent); }
.gg-match__odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.gg-match__odds span { display: grid; place-items: center; height: 34px; border-radius: var(--gg-r-s); background: var(--gg-card-hi); font-weight: 700; font-size: 14px; color: var(--gg-soft); }

/* W8 спорт */
.gg-sports { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.gg-sports li { flex: none; width: 76px; height: 76px; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: var(--gg-r-m); background: var(--gg-card); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.gg-sports .gg-ico { width: 28px; height: 28px; color: var(--gg-hue-text); }
@media (min-width: 1024px) { .gg-sports { display: grid; grid-template-columns: repeat(7, 1fr); } .gg-sports li { width: auto; } }
.gg-modes { display: inline-flex; padding: 3px; border-radius: var(--gg-r-pill); background: rgba(255,255,255,.06); }
.gg-modes span { padding: 4px 12px; border-radius: var(--gg-r-pill); font-size: 13px; font-weight: 600; color: var(--gg-soft); }
.gg-modes .is-on { background: var(--gg-hue); color: var(--gg-on-hue); }

/* W9 акции */
.gg-promos { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
.gg-promos--one { grid-auto-columns: minmax(0, 360px); }
@media (min-width: 1024px) { .gg-promos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .gg-promos--one { grid-template-columns: minmax(0, 380px); } }
@media (min-width: 1280px) { .gg-promos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gg-promos--one { grid-template-columns: minmax(0, 380px); } }
.gg-promo { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-radius: var(--gg-r-m); background: var(--gg-card); overflow: hidden; border: 1px solid var(--gg-line); min-width: 0; }
.gg-promo > .gg-btn { margin: auto 14px 0; }
.gg-promo__art { position: relative; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--gg-hue) 25%, var(--gg-deck)); }
.gg-promo__art img { width: 100%; height: 100%; object-fit: cover; }
.gg-promo__art--none { aspect-ratio: auto; height: 44px; }
.gg-promo__tag { position: absolute; left: 10px; top: 10px; padding: 2px 10px; border-radius: var(--gg-r-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #121018; background: #C9C4DE; }
.gg-promo__tag--casino { background: #E3328E; } .gg-promo__tag--sport { background: #14B7E0; } .gg-promo__tag--herlaad { background: #FF7835; }
.gg-promo__body { display: grid; gap: 6px; padding: 0 14px; }
.gg-promo__body h3 { font-size: 16px; font-weight: 700; }
.gg-promo__amt { font: 700 26px/1 var(--gg-display); }
.gg-promo__txt { font-size: 14px; color: var(--gg-soft); line-height: 1.45; }
.gg-promo .gg-table table { min-width: 0; font-size: 13px; }

/* W10 быстрые полосы */
.gg-quick { display: grid; gap: 12px; }
@media (min-width: 1024px) { .gg-quick { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.gg-quickcard { position: relative; display: flex; align-items: stretch; min-height: 150px; border-radius: var(--gg-r-m); background: var(--gg-card); overflow: hidden; }
.gg-quickcard__t { position: relative; z-index: 1; display: grid; gap: 8px; align-content: center; justify-items: start; padding: 16px; flex: 1; }
.gg-quickcard h3 { font: 700 26px/1 var(--gg-display); text-transform: uppercase; }
.gg-quickcard p { font-size: 14px; color: var(--gg-soft); }
.gg-quickcard__art { width: 40%; object-fit: cover; flex: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }

/* W11 VIP */
.gg-levels { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--gg-hue) transparent; }
.gg-level { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: var(--gg-r-m); background: var(--gg-card); border-top: 4px solid #A8A3C2; min-height: 150px; }
.gg-level--brons { border-top-color: #C98A4B; } .gg-level--zilver { border-top-color: #C9C4DE; } .gg-level--goud { border-top-color: #F2BB24; } .gg-level--mega { border-top-color: #E0569B; }
.gg-level--mile { box-shadow: inset 0 0 0 1.5px #F2BB24; background: color-mix(in srgb, #F2BB24 10%, var(--gg-card)); }
.gg-level__n { font: 700 34px/1 var(--gg-display); display: grid; }
.gg-level__n small { font: 600 11px/1.2 var(--gg-font); text-transform: uppercase; letter-spacing: .06em; color: var(--gg-muted); }
.gg-level__wheel { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gg-soft); }
.gg-level dl { display: grid; gap: 4px; }
.gg-level dl > div { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.gg-level dt { color: var(--gg-muted); }
.gg-level dd { font-weight: 700; text-align: right; }
.gg-vip__art { position: relative; margin-bottom: 14px; border-radius: var(--gg-r-l); overflow: hidden; border: 1px solid color-mix(in srgb, #F2BB24 40%, var(--gg-line)); }
.gg-vip__art img { width: 100%; height: 150px; object-fit: cover; object-position: 60% 50%; }
.gg-vip__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,36,.85), transparent 55%); }
.gg-vip__art p { position: absolute; left: 18px; bottom: 14px; z-index: 1; max-width: 60%; font: 700 24px/1.05 var(--gg-display); text-transform: uppercase; }
@media (min-width: 1024px) { .gg-vip__art img { height: 200px; } .gg-vip__art p { font-size: 32px; } }

/* W12 коллаж */
.gg-feature { display: grid; gap: 10px; justify-items: center; }
.gg-feature__fan { position: relative; display: flex; justify-content: center; align-items: center; height: 200px; width: 100%; }
.gg-feature__fan img { width: 120px; border-radius: 18px; border: 1px solid var(--gg-line); box-shadow: var(--gg-glow); }
.gg-feature__fan .gg-feature__c1 { transform: rotate(-6deg) translateX(18px); }
.gg-feature__fan .gg-feature__c2 { position: relative; z-index: 1; width: 140px; }
.gg-feature__fan .gg-feature__c3 { transform: rotate(6deg) translateX(-18px); }
.gg-feature figcaption { font-size: 13px; color: var(--gg-muted); }
@media (min-width: 1024px) { .gg-feature__fan { height: 280px; } .gg-feature__fan img { width: 160px; } .gg-feature__fan .gg-feature__c2 { width: 200px; } }

/* W14 касса */
.gg-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1024px) { .gg-pays { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .gg-pays { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gg-pay { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--gg-r-m); background: var(--gg-card); border: 1px solid var(--gg-line); min-width: 0; }
.gg-pay h3 { font-weight: 800; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.gg-pay__cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gg-hue-text); }
.gg-pay__max { display: grid; font: 700 28px/1 var(--gg-display); }
.gg-pay__max small { font: 500 12px/1.3 var(--gg-font); color: var(--gg-muted); }
.gg-pay__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.gg-pay__chips li { padding: 1px 8px; border-radius: var(--gg-r-pill); background: var(--gg-card-hi); font-size: 12px; font-weight: 600; }