/* =====================================================================
   GameBuzz · шапка, подвал и страница игры для соседних служб — gamebuzz-chrome-001 (чат 3, Ш-264, 23.10.2026)
   Те же размеры, отступы, цвета и шрифты, что у сайта gamebuzz.ru (клиент ui-028: site.css, ui.css, fonts.css).
   Все классы — с префиксом gbz-, все значения — свои (--gbz-*): переменные и шрифты службы не задеваются,
   и служба не задевает нас. Корень любого куска — элемент с классом gbz (шапка, подвал или вся страница).
   Подключать ПОСЛЕ своих стилей. Без JS.
   Адрес на сайте (с клиента ui-028): /static/play/gbz/gbz.css, шрифты — /static/play/gbz/fonts/.
   ===================================================================== */

/* ---------- шрифты: IBM Plex Sans 400/500/600 и Oswald 600 — те же файлы, что у сайта, под своими именами ---------- */
/* латиница + кириллица + «₽» в одном файле на начертание; пока файл не пришёл — системный Arial/Helvetica,
   подогнанный по метрикам (size-adjust и т. п. — как у сайта), поэтому подмена шрифта не сдвигает строки */
@font-face { font-family: 'GBZ Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/play/gbz/fonts/gbz-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'GBZ Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/play/gbz/fonts/gbz-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'GBZ Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/play/gbz/fonts/gbz-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'GBZ Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/play/gbz/fonts/gbz-oswald-600.woff2') format('woff2'); }
@font-face { font-family: 'GBZ Plex Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 100.82%; ascent-override: 101.67%; descent-override: 27.28%; line-gap-override: 0%; }
@font-face { font-family: 'GBZ Plex Fallback'; font-weight: 500 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 100.82%; ascent-override: 101.67%; descent-override: 27.28%; line-gap-override: 0%; }
@font-face { font-family: 'GBZ Oswald Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 83.54%; ascent-override: 142.80%; descent-override: 34.59%; line-gap-override: 0%; }

/* ---------- цвета и шрифты (токены сайта ui.css) ---------- */
.gbz {
  --gbz-bg: #12100D; --gbz-s1: #1B1814; --gbz-s2: #24201B; --gbz-s3: #2E2922;
  --gbz-line: #352F28; --gbz-line2: #4D453B;
  --gbz-tx: #EEE7DB; --gbz-tx2: #B8AC98; --gbz-tx3: #998C7A;
  --gbz-amber: #E2A74E; --gbz-amber-ink: #1A1208; --gbz-amber-line: rgba(226, 167, 78, .48);
  --gbz-f: 'GBZ Plex Sans', 'GBZ Plex Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gbz-f-pub: 'GBZ Oswald', 'GBZ Oswald Fallback', 'Arial Narrow', Arial, sans-serif;
  background: var(--gbz-bg); color: var(--gbz-tx);
  font-family: var(--gbz-f); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;
}
/* сброс внутри куска: стили службы для p, h1…h4, ul, a, img сюда не доходят (у классов gbz- вес выше, чем у тегов) */
.gbz, .gbz *, .gbz *::before, .gbz *::after { box-sizing: border-box; }
.gbz :where(p, h1, h2, h3, h4, ul, ol, li, figure, figcaption, dl, dd, blockquote, details, summary) { margin: 0; padding: 0; }
.gbz :where(h1, h2, h3, h4) { font-size: inherit; font-weight: inherit; line-height: inherit; }
.gbz :where(ul, ol) { list-style: none; }
.gbz :where(a) { color: inherit; text-decoration: none; background: none; }
.gbz :where(img) { max-width: 100%; border: 0; }
.gbz :focus-visible { outline: 2px solid var(--gbz-amber); outline-offset: 2px; }

/* ---------- колонка: 1104 px, поля 16 px (от 1024 px — 32 px) ---------- */
.gbz-in { width: 100%; max-width: 1104px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

/* =====================================================================
   1. ШАПКА — как .site-hd: 64 px (от 1024 px — 72), знак 24 px (от 1024 — 32), справа «Игры».
   Обычный поток (не fixed / sticky): игру и страницу службы не перекрывает.
   ===================================================================== */
.gbz-hd { display: block; position: static; flex: none; background: var(--gbz-bg); box-shadow: inset 0 -1px 0 var(--gbz-line); }
.gbz-hd .gbz-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.gbz-logo { display: flex; align-items: center; min-height: 44px; border-radius: 4px; }
.gbz-logo img { display: block; width: auto; height: 24px; }
.gbz-nav { display: flex; align-items: center; }
.gbz-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-right: -12px; border-radius: 6px; color: var(--gbz-tx2); font-size: 16px; line-height: 24px; font-weight: 500; }
.gbz-nav a:hover { color: var(--gbz-tx); }
/* светлая страница службы: шапка без своей тёмной полосы — светлый знак logo-light.svg и тёмный текст */
.gbz-hd.gbz-light { --gbz-tx: #1A1208; --gbz-tx2: #4A4034; --gbz-line: rgba(26, 18, 8, .14); background: transparent; }

/* =====================================================================
   2. ПОДВАЛ — как .site-ft: ссылки, реквизиты, ©; на телефоне ссылки переносятся сами, без точек;
   от 1024 px — ссылки и © в первой строке (через точки), реквизиты — во второй.
   ===================================================================== */
.gbz-ft { display: block; flex: none; background: var(--gbz-bg); box-shadow: inset 0 1px 0 var(--gbz-line); }
.gbz-ft .gbz-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "legal" "copy"; padding-top: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 20px; }
.gbz-ft p { color: var(--gbz-tx3); }
.gbz-ft-links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.gbz-ft-sep { display: none; color: var(--gbz-tx3); }
.gbz-ft-legal { grid-area: legal; margin-top: 4px; }
.gbz-ft-copy { grid-area: copy; margin-top: 8px; }
.gbz-ft a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gbz-tx2); text-decoration: underline; text-decoration-color: var(--gbz-line2); text-underline-offset: 4px; }
.gbz-ft a:hover { color: var(--gbz-tx); text-decoration-color: currentColor; }

/* =====================================================================
   3. СТРАНИЦА ИГРЫ — разделы /g/<slug>: hero, «Что это», «Как играть», «Почему интересно», кадры, «Для кого»,
   цена и оплата, вопросы. Корень — <body class="gbz gbz-page"> (или div.gbz.gbz-page на всю высоту).
   ===================================================================== */
.gbz-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; }
.gbz-main { display: block; flex: 1 0 auto; padding: 32px 0 56px; }

/* типографика */
.gbz-h1 { font-family: var(--gbz-f-pub); font-weight: 600; font-size: 32px; line-height: 40px; color: var(--gbz-tx); text-wrap: balance; }
.gbz-h2 { font-family: var(--gbz-f-pub); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--gbz-tx); }
.gbz-h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--gbz-tx); }
.gbz-h4 { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--gbz-tx); }
.gbz-lead { font-size: 18px; line-height: 28px; color: var(--gbz-tx2); }
.gbz-kicker { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gbz-amber); }
.gbz-facts { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gbz-tx2); }
.gbz-text { color: var(--gbz-tx2); }
.gbz-link { color: var(--gbz-amber); text-decoration: underline; text-underline-offset: 4px; }

/* кнопки (как .btn сайта): 48 px, основная — золото, вторая — рамка */
.gbz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 6px; font-family: var(--gbz-f); font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; flex: none; cursor: pointer; text-decoration: none; }
.gbz-btn-p { background: var(--gbz-amber); color: var(--gbz-amber-ink); }
.gbz-btn-s { background: transparent; color: var(--gbz-tx); outline: 1px solid var(--gbz-line2); outline-offset: -1px; }
.gbz-btn-b { display: flex; width: 100%; }
.gbz-btns { display: flex; flex-direction: column; gap: 12px; }

/* разделы: 64 px между разделами (от 1024 — 96) */
.gbz-land { display: flex; flex-direction: column; }
.gbz-sec { margin-top: 64px; scroll-margin-top: 16px; }
.gbz-sec-lead { margin-top: 12px; max-width: 720px; color: var(--gbz-tx2); }

/* hero: обложка 1200×630, затем текст; от 1024 px — текст слева, обложка справа */
.gbz-hero { display: flex; flex-direction: column; }
.gbz-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--gbz-s1); border-radius: 8px; outline: 1px solid var(--gbz-line); outline-offset: -1px; }
.gbz-hero-t { margin-top: 24px; }
.gbz-hero .gbz-h1 { margin-top: 4px; }
.gbz-hero .gbz-lead { margin-top: 12px; }
.gbz-hero .gbz-facts { margin-top: 12px; }
.gbz-hero .gbz-btns { margin-top: 24px; }
.gbz-what { margin-top: 20px; max-width: 600px; color: var(--gbz-tx2); }
.gbz-note { margin-top: 8px; font-size: 14px; line-height: 20px; }
.gbz-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gbz-tx2); text-decoration: underline; text-decoration-color: var(--gbz-line2); text-underline-offset: 4px; }
.gbz-note a:hover { color: var(--gbz-tx); text-decoration-color: currentColor; }

/* «Что это» — абзацы до 720 px */
.gbz-about { margin-top: 16px; max-width: 720px; color: var(--gbz-tx); }
.gbz-about > p + p { margin-top: 16px; }

/* «Как играть»: карточки с золотой плашкой-значком, правила с точками, картинка, шаги с номерами */
.gbz-cards { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gbz-card { position: relative; min-height: 88px; padding: 16px 16px 16px 72px; border-radius: 8px; background: var(--gbz-s1); outline: 1px solid var(--gbz-line); outline-offset: -1px; }
.gbz-card-ic { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--gbz-amber); color: var(--gbz-amber-ink); font-weight: 600; }
.gbz-card-ic img { display: block; width: 24px; height: 24px; }
.gbz-card p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--gbz-tx2); }
.gbz-rules { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.gbz-rules li { position: relative; padding-left: 28px; color: var(--gbz-tx2); }
.gbz-rules li::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gbz-amber); }
.gbz-wide { display: block; width: 100%; height: auto; margin-top: 32px; border-radius: 12px; outline: 1px solid var(--gbz-line); outline-offset: -1px; background: var(--gbz-s1); }
.gbz-steps-h { margin-top: 40px; }
.gbz-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.gbz-steps li { display: flex; align-items: flex-start; gap: 12px; }
.gbz-step-n { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gbz-amber-line); color: var(--gbz-amber); font-size: 14px; line-height: 20px; font-weight: 600; }
.gbz-steps li > span:last-child { padding-top: 2px; }

/* плитки «Почему интересно» (с золотой полосой слева) и «Для кого» */
.gbz-tiles { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gbz-tiles > li { padding: 16px; border-radius: 8px; background: var(--gbz-s1); outline: 1px solid var(--gbz-line); outline-offset: -1px; }
.gbz-tiles p { font-size: 14px; line-height: 20px; color: var(--gbz-tx2); }
.gbz-tiles .gbz-h4 + p { margin-top: 4px; }
.gbz-why > li { box-shadow: inset 2px 0 0 var(--gbz-amber); }
.gbz-why p { font-size: 16px; line-height: 24px; color: var(--gbz-tx); }

/* кадры: телефон — лента вбок с прилипанием к кадру, от 1024 px — сетка 4 колонки.
   Кадры вертикальные (как у сайта 780×1688); у своих пропорций — поменяйте --gbz-shot (ширина / высота) */
.gbz-gallery { --gbz-shot: 780 / 1688; margin: 24px -16px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; border-radius: 2px; }
.gbz-gallery:focus-visible { outline: 2px solid var(--gbz-amber); outline-offset: -2px; }
.gbz-gallery ul { display: flex; gap: 12px; width: max-content; padding: 0 16px 12px; }
.gbz-gallery li { flex: none; width: 240px; scroll-snap-align: start; }
.gbz-gallery img { display: block; width: 100%; height: auto; aspect-ratio: var(--gbz-shot); object-fit: cover; border-radius: 12px; outline: 1px solid var(--gbz-line); outline-offset: -1px; background: var(--gbz-s1); }
.gbz-gallery figcaption { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--gbz-tx2); }
/* горизонтальные кадры (16:9 и т. п.): лента пошире, на ПК — 3 колонки */
.gbz-gallery.gbz-wide-shots { --gbz-shot: 16 / 9; }
.gbz-gallery.gbz-wide-shots li { width: 300px; }

/* цена: карточка с золотой рамкой + «Как оплатить»; список дел/тарифов — .gbz-offers */
.gbz-price-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.gbz-price-card { padding: 24px 20px 20px; border-radius: 12px; background: var(--gbz-s1); outline: 1px solid var(--gbz-amber-line); outline-offset: -1px; }
.gbz-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.gbz-price-now { font-family: var(--gbz-f-pub); font-weight: 600; font-size: 32px; line-height: 40px; color: var(--gbz-tx); }
.gbz-price-old { font-size: 20px; line-height: 28px; color: var(--gbz-tx3); white-space: nowrap; text-decoration: line-through; text-decoration-thickness: 2px; }
.gbz-price-note { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gbz-amber); }
.gbz-inc-h { margin-top: 24px; }
.gbz-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gbz-checks li { position: relative; padding-left: 28px; }
.gbz-checks li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--gbz-amber); border-bottom: 2px solid var(--gbz-amber); transform: rotate(-45deg); }
.gbz-price-card .gbz-btn { margin-top: 24px; }
.gbz-pay .gbz-steps { margin-top: 16px; }
.gbz-pay-note { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--gbz-tx2); }
/* плашки оплаты (Р-72, Р-73): готовые SVG сайта /static/play/pay/plate-*.svg — естественная ширина, высота 24, зазор 8 */
.gbz-pay-logos { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.gbz-pay-logos img { display: block; width: auto; height: 24px; }
/* список предложений (дела «Криптографа», тарифы шоу): строка — название и факты слева, цена и кнопка справа */
.gbz-offers { margin-top: 24px; display: flex; flex-direction: column; border-radius: 12px; background: var(--gbz-s1); outline: 1px solid var(--gbz-line); outline-offset: -1px; }
.gbz-offer { display: flex; flex-direction: column; gap: 12px; padding: 16px; box-shadow: inset 0 -1px 0 var(--gbz-line); }
.gbz-offer:last-child { box-shadow: none; }
.gbz-offer-t { min-width: 0; }
.gbz-offer-t .gbz-facts { margin-top: 4px; }
.gbz-offer-r { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gbz-offer-price { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--gbz-tx); white-space: nowrap; }
.gbz-offer-free { color: var(--gbz-amber); }
.gbz-offer .gbz-btn { height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; }

/* вопросы: <details>/<summary>, без JS (как у сайта) */
.gbz-faq { margin-top: 16px; max-width: 800px; }
.gbz-qa { box-shadow: inset 0 -1px 0 var(--gbz-line); }
.gbz-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0; list-style: none; cursor: pointer; font-weight: 500; color: var(--gbz-tx); }
.gbz-qa summary::-webkit-details-marker { display: none; }
.gbz-qa summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--gbz-tx3); border-bottom: 2px solid var(--gbz-tx3); transform: translateY(-3px) rotate(45deg); }
.gbz-qa[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.gbz-qa summary:focus-visible { outline: 2px solid var(--gbz-amber); outline-offset: 2px; border-radius: 4px; }
.gbz-qa-a { padding-bottom: 16px; color: var(--gbz-tx2); max-width: 720px; }
.gbz-qa-a a { color: var(--gbz-amber); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .gbz-nav a, .gbz-ft a, .gbz-btn { transition: color .15s ease, background-color .15s ease; }
}

/* ---------- 560 px: карточки и плитки в 2 колонки ---------- */
@media (min-width: 560px) {
  .gbz-cards, .gbz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gbz-offer { flex-direction: row; align-items: center; justify-content: space-between; }
  .gbz-offer-r { flex: none; justify-content: flex-end; }
}
/* ---------- 768 px: кнопки hero в строку ---------- */
@media (min-width: 768px) {
  .gbz-gallery li { width: 260px; }
  .gbz-gallery.gbz-wide-shots li { width: 360px; }
  .gbz-btns { flex-direction: row; flex-wrap: wrap; }
}
/* ---------- 1024 px: как десктоп сайта ---------- */
@media (min-width: 1024px) {
  .gbz-in { padding-left: 32px; padding-right: 32px; }
  .gbz-hd .gbz-in { height: 72px; }
  .gbz-logo img { height: 32px; }
  .gbz-main { padding: 56px 0 80px; }
  .gbz-h1 { font-size: 48px; line-height: 56px; }
  .gbz-h2 { font-size: 32px; line-height: 40px; }
  .gbz-lead { font-size: 20px; line-height: 32px; }
  .gbz-ft .gbz-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links copy" "legal legal"; column-gap: 32px; align-items: center; padding-top: 4px; padding-bottom: 16px; }
  .gbz-ft-copy { margin-top: 0; }
  .gbz-ft-legal { margin-top: 0; }
  .gbz-ft-links { column-gap: 8px; }
  .gbz-ft-sep { display: inline; }
  .gbz-sec { margin-top: 96px; }
  .gbz-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .gbz-hero .gbz-cover { grid-column: 2; grid-row: 1; }
  .gbz-hero-t { grid-column: 1; grid-row: 1; margin-top: 0; }
  .gbz-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .gbz-card { min-height: 0; padding: 20px; }
  .gbz-card-ic { position: static; margin-bottom: 16px; }
  .gbz-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; }
  .gbz-howto .gbz-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .gbz-tiles { gap: 24px; }
  .gbz-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gbz-for { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gbz-tiles > li { padding: 20px; }
  .gbz-gallery { margin: 32px 0 0; overflow: visible; }
  .gbz-gallery ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; width: auto; padding: 0; }
  .gbz-gallery li { width: auto; }
  .gbz-gallery.gbz-wide-shots ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gbz-gallery.gbz-wide-shots li { width: auto; }
  .gbz-price-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  .gbz-price-card { padding: 32px 32px 28px; }
  .gbz-offer { padding: 16px 24px; }
}