/*
 * chrome.css - оформление ОБОЛОЧКИ сайта (шапка, шторка, подвал, подпись автора).
 * Заготовка фабрики: skeleton/assets/css/chrome.css. ВСЕ правила mobile-first.
 *
 * Имя сменено с blocks.css намеренно: «блоки» в фабрике - это 159 блоков библиотеки
 * владельца, а здесь оболочка движка. Одно слово на две разные вещи путало бы роль,
 * которой велено «собрать страницу из блоков».
 * header-nav - drawer, проходящий 6/6 критериев модалки гейта (доктрина R16-R19).
 */

/* ================= header-nav ================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header, 100);
  height: var(--header-h);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline);
}
.site-header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-3);
}
/* min-height 44 при картинке 36: тап-цель дотягивается до порога, а лого не растёт
 * и шапка в 60px остаётся прежней (гейт мерил 108x36). */
.site-header__logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.site-header__logo img { height: 36px; width: auto; }
.site-header__spacer { flex: 1 1 auto; }

/* CTA в шапке - компактная на мобиле, но не ниже порога тапа: было 40px. */
.site-header__cta { min-height: 44px; padding-inline: var(--s-4); font-size: var(--t-small); }

/* Бургер - ≥44px тап (R20) */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  color: var(--text); cursor: pointer;
}
.nav-toggle__box { position: relative; width: 20px; height: 14px; }
.nav-toggle__box span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-quick,.15s) var(--ease,ease), opacity var(--dur-quick,.15s) ease; }
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 6px; }
.nav-toggle__box span:nth-child(3) { top: 12px; }

/* Десктопная навигация - скрыта на мобиле */
.nav-desktop { display: none; }

/* ---- Backdrop (критерий 6): fixed, покрывает вьюпорт ---- */
.nav-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal, 200);
  background: rgba(0,0,0,.6);
  display: none;
}
.nav-backdrop.is-open { display: block; }

/* ---- Drawer (критерии 1-5): mobile-first модальное меню ---- */
.nav-drawer {
  /* Закрыт: display:none (R19 - не transform, не opacity) */
  display: none;
  position: fixed;               /* критерий 1 */
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  z-index: calc(var(--z-modal, 200) + 1);
  background: var(--surface);
  border-left: var(--hairline);
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  flex-direction: column; gap: var(--s-2);
}
.nav-drawer.is-open { display: flex; }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.nav-drawer__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); }
.nav-drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
}
.nav-drawer__link {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-3);
  color: var(--text-dim); font-weight: var(--fw-medium); border-radius: var(--r-md);
}
.nav-drawer__link:hover, .nav-drawer__link[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; }
.nav-drawer__cta { margin-top: var(--s-4); }
.nav-drawer__lang { display: flex; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--hairline); }
.nav-drawer__lang a { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--text-mute); }
.nav-drawer__lang a[aria-current="true"] { background: var(--brand-soft); color: var(--text); border-color: var(--brand); }

/* Скролл фона заблокирован при открытом меню (критерий 5) */
html.nav-open, html.nav-open body { overflow: hidden; }

/* ================= footer ================= */
/* margin-top был --s-9 (96px): вместе с паддингом последней полосы это давало
 * 160px пустоты перед подвалом на 360 - пятую часть экрана ни о чём (замер
 * probe_layout, все 5 страниц). На мобиле 48, на 768 возвращается 96. */
.site-footer {
  background: var(--bg-2); border-top: var(--hairline);
  padding-block: var(--s-6);
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
  margin-top: var(--s-6);
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
/* Заголовок колонки подвала. Раньше это был <h4> прямо в разметке, и он давал
 * разрыв уровней заголовков после <h2> страницы - ловится и правилом свода про
 * пропуск уровней, и Lighthouse (heading-order). Теперь layout печатает абзац с
 * этим классом, вид прежний. Возвращено из play-mines.click 02.09.2026. */
.site-footer__title,
.site-footer__col h4 { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: var(--s-3); }
/* 32px было ниже порога тапа: гейт считал по 9-11 таких ссылок на каждой
 * странице (R20, 44px). В столбик, пальцем, промахнуться легче всего именно тут. */
.site-footer__col a { display: block; min-height: 44px; line-height: 44px; color: var(--text-mute); }
.site-footer__col a:hover { color: var(--text); }
.site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--hairline); color: var(--text-faint); font-size: var(--t-small); }
/* Дисклеймер шёл вплотную к последней ссылке колонки - читался как ещё один пункт
 * меню. Отбиваем его воздухом от сетки разделов. */
.site-footer__disclaimer { margin-top: var(--s-5); color: var(--text-faint); font-size: var(--t-small); }

/* ================= брейкпоинты (min-width только) ================= */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-desktop { display: flex; align-items: center; gap: var(--s-4); }
  .nav-desktop a { color: var(--text-dim); font-weight: var(--fw-medium); }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--brand); text-decoration: none; }
  .site-header__cta { min-height: 44px; font-size: var(--t-body); }
  /* На десктопе drawer/backdrop не участвуют */
  .nav-drawer, .nav-backdrop { display: none !important; }
  html.nav-open, html.nav-open body { overflow: auto; }
  .site-footer { padding-block: var(--s-7); margin-top: var(--s-9); }
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
  .site-footer__col a { min-height: 32px; line-height: 32px; }
}

/* ================= page-meta (E-E-A-T бар) ================= */
.page-meta { background: var(--bg-2); border-bottom: var(--hairline); }
.page-meta .container { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-block: var(--s-3); }
.page-meta__item { font-size: var(--t-small); color: var(--text-faint); }
.page-meta__item time { color: var(--text-mute); }

/* ================= page-author (подпись автора под H1) =================
 * Разметка приходит из content/_partials/author-byline.php и намеренно
 * переиспользует .page-meta__item - своих классов у неё почти нет. Здесь ровно то,
 * чего служебной строке не хватает под заголовком: свой отступ, кругляш аватарки
 * и тап-порог у имени.
 *
 * ПОДПИСЬ - ОБЫЧНЫЙ АБЗАЦ С ИНЛАЙНОВЫМ СОДЕРЖИМЫМ. Не делать её flex/grid: голые
 * текстовые узлы («Автор:», «· главный редактор») станут отдельными элементами
 * раскладки, и должность рассыплется в колонку по слогам. Проверено на себе
 * 2026-08-15: первая версия этого блока была grid и ломала подпись именно так.
 *
 * До появления стилей имя-ссылка имело коробку 272x22 - ниже жёсткого порога 24px
 * (гейт: R20 «text link below 24px» на всех пяти страницах). */
.page-author { margin-block: var(--s-3) var(--s-5); line-height: 1.6; }
/* base.css делает все img блочными (img{display:block;height:auto}) - аватарке это
 * рвёт строку и убивает заданный размер. Возвращаем инлайн явно. */
.page-author__face {
  display: inline-block; width: 32px; height: 32px;
  border-radius: var(--r-pill); object-fit: cover;
  vertical-align: -9px; margin-right: var(--s-2);
}
.page-author__name { display: inline-block; padding-block: 3px; color: var(--text-dim); font-weight: var(--fw-semi); }

/* Полоса раскрытия партнёрского интереса. Стоит выше шапки намеренно: раскрытие обязано
   попасться читателю ДО первой партнёрской ссылки (CAP 3.3), а первая ссылка - кнопка в
   шапке. Мелкая, приглушённая, но не спрятанная: display:none здесь был бы обманом. */
.affiliate-disclosure {
  margin: 0;
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  background: var(--color-surface-muted, #f3f4f6);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* ================= кнопка «наверх» =================
   Правило владельца от 29.08.2026: круглая кнопка со стрелкой вверх в правом нижнем
   углу, на каждой странице. JS (initBackToTop в app.js) вешает .is-visible после 600px
   прокрутки; до этого кнопка не занимает места и не ловит клики.

   ПОЧЕМУ visibility, А НЕ display:none. С display элемент выпадает из раскладки, и
   переход не проигрывается вовсе - кнопка появлялась бы рывком. visibility + opacity
   дают плавность и при этом честно убирают её из-под курсора и с пути читалки. */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 48px;                      /* выше порога тапа --tap-min: 44px */
  height: 48px;
  padding: 0;
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.to-top svg { width: 22px; height: 22px; }

/* На узком экране кнопка не должна закрывать содержимое: она мельче и ближе к краю. */
@media (max-width: 479px) {
  .to-top { width: 44px; height: 44px; right: 12px; bottom: 12px; }
}

/* ================= лайтбокс =================
   Правило владельца от 29.08.2026: картинка в блоке или в слайдере открывается по клику
   в лайтбоксе. Оверлей создаёт app.js один на страницу; здесь только оформление.

   Это МОДАЛЬНЫЙ ДИАЛОГ по тем же семи свойствам, что и мобильное меню (03-ВЁРСТКА):
   position:fixed, role=dialog, aria-modal, подложка, фокус внутрь и назад, Escape,
   скролл фона заблокирован. Свойства держит JS, вид - здесь. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, .85);
}
.lightbox.is-open { display: grid; }
html.lb-open, html.lb-open body { overflow: hidden; }

.lightbox__figure { margin: 0; display: grid; gap: var(--s-2); justify-items: center; max-height: 100%; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.lightbox__caption {
  margin: 0;
  max-width: var(--container-prose);
  color: #fff;
  font-size: var(--t-small);
  line-height: var(--lh-base);
  text-align: center;
}
.lightbox__count { color: rgba(255, 255, 255, .7); font-size: var(--t-tiny); }

/* Кнопки лайтбокса. Белые на затемнении - собственная палитра осознанно: подложка
   всегда тёмная независимо от скина, и токены поверхности здесь дали бы серое на сером. */
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease);
}
.lightbox__btn:hover { background: rgba(0, 0, 0, .75); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: var(--gutter); right: var(--gutter); }
.lightbox__prev  { left: var(--gutter);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--gutter); top: 50%; transform: translateY(-50%); }
/* Одиночная картинка: стрелок нет вовсе, JS их прячет - место под них не резервируется. */
.lightbox__btn[hidden] { display: none; }

/* УЗКИЙ ЭКРАН: СТРЕЛКИ ПОД КАРТИНКУ, А НЕ ПОВЕРХ НЕЁ.
   ЗАМЕР 29.08.2026, кадр 360px: картинка занимает всю ширину, и стрелки по бокам
   ложились прямо на неё - закрывали края того самого скриншота, ради которого
   лайтбокс и открывали. Машинная проверка этого не видит: элементы на месте,
   размеры в норме. Поймано глазами на снимке.
   Картинка здесь ниже (62vh вместо 78vh) - чтобы ряду кнопок хватило места. */
@media (max-width: 639px) {
  /* Стрелки уходят из absolute в поток и встают рядом ПОД картинкой: прижатые к
     низу экрана (первая попытка правки) они отрывались от снимка и читались как
     элементы страницы под подложкой, а не как органы управления лайтбоксом. */
  .lightbox.is-open {
    grid-template-columns: auto auto;
    grid-auto-rows: min-content;
    align-content: center;
    justify-content: center;
    gap: var(--s-3);
  }
  .lightbox__img { max-height: 62vh; }
  .lightbox__figure { grid-column: 1 / -1; }
  .lightbox__prev,
  .lightbox__next { position: static; transform: none; }
}

/* Курсор-подсказка: картинка кликабельна. Указатель ставится ссылке-обёртке, а не
   картинке: без JS ссылка ведёт на файл, и это законный переход, а не «мёртвый» клик. */
.lb-link { display: block; cursor: zoom-in; }

/* ================= СЛОЙ СОВРЕМЕННОСТИ (часть 4 app.js, 31.08.2026) =================
   Всё прогрессивно: нет разметки - ни одно правило не срабатывает; цвета и движение -
   только токенами. Механика (кто ставит классы и когда) описана в заголовке части 4. */

/* ---- кнопка темы (layout.php, data-action="themeToggle") ----
   Та же коробка, что у бургера: 44px, рамка, скругление. Иконки обе в разметке,
   видима одна: луна в светлой («переключи в тёмную»), солнце в тёмной. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: var(--brand-soft); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
html[data-mode="dark"] .theme-toggle__sun  { display: block; }
html[data-mode="dark"] .theme-toggle__moon { display: none; }

/* ---- появление карточек (data-reveal) ----
   Исходное скрытие ТОЛЬКО под html.js-reveal - класс ставит часть 4, и только когда
   наблюдатель реально заведён (есть IntersectionObserver, движение не урезано).
   Без JS класса нет - элементы видимы, страница не зависит от скрипта. */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
html.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Ремень к подтяжкам: даже если js-reveal каким-то образом встал при reduced-motion,
   элементы видимы сразу (сам наблюдатель при reduce не заводится вовсе). */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- галерея (data-gallery): рельса + стрелки + счётчик ----
   Рельса со scroll-snap живёт и без JS - листается пальцем и колесом. Часть 4
   добавляет панель .gallery-nav ПОСЛЕ рельсы только при 2+ кадрах. */
[data-gallery] {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
[data-gallery] > * { flex: 0 0 auto; scroll-snap-align: start; }
[data-gallery] img { border-radius: var(--r-md); }

.gallery-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.gallery-nav__btn {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.gallery-nav__btn:hover:not(:disabled) { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.gallery-nav__btn:disabled { opacity: .38; cursor: default; }
.gallery-nav__btn svg { width: 20px; height: 20px; }
.gallery-nav__count { color: var(--text-mute); font-size: var(--t-small); min-width: 4.5em; text-align: center; }

/* ---- тост (showToast) ----
   Один на страницу, последний текст побеждает. Снизу по центру, над кнопкой
   «наверх» (--z-toast выше --z-sticky). visibility по той же причине, что у
   .to-top: с display:none переход не проигрывается. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gutter) + 64px);
  transform: translate(-50%, 8px);
  z-index: var(--z-toast);
  max-width: min(92vw, 480px);
  padding: var(--s-3) var(--s-5);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--t-small);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}
.toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---- демо-фасад игры (data-demo-src) ----
   До клика: постер + кнопка запуска. После (.is-loaded): iframe на месте постера,
   кнопка полного экрана. Пропорции держит фасад, а не iframe - постер и рамка
   занимают одну и ту же коробку, загрузка не дёргает страницу. */
.demo-facade {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.demo-facade__poster { width: 100%; height: 100%; object-fit: cover; }
.demo-facade__actions {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
}
.demo-facade.is-loaded .demo-facade__poster,
.demo-facade.is-loaded .demo-facade__actions { display: none; }
.demo-facade__frame { width: 100%; height: 100%; border: 0; display: block; }
/* Кнопка полного экрана - ПОД фасадом, в потоке: поверх iframe она закрывала бы игру. */
.demo-facade__fullscreen { margin-top: var(--s-3); }

/* ---- хлебные крошки ----
 * Layout печатает их на каждой внутренней странице списком <ol> (иначе правило
 * паритета не засчитывает пункты), а оформления в заготовке не было вовсе: под
 * шапкой оставался голый нумерованный список «1. Главная / 2. Заголовок». Замер
 * 03.09.2026 на pokerspro.ru, возвращено в комплект тем же днём. */
.breadcrumbs { padding-block: var(--s-4) 0; }
.breadcrumbs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); color: var(--text-mute);
}
.breadcrumbs__item { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/"; color: var(--text-faint); flex: 0 0 auto;
}
.breadcrumbs__item a { color: var(--text-mute); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumbs__item[aria-current] {
  color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}