/* ============================================================================
 * skin.css - ПРОЕКТНЫЙ СКИН play-mines.click и оформление блоков каталога.
 *
 * Подключается ПОСЛЕДНИМ (см. templates/layout.php), поэтому перебивает всё.
 *
 * ПОЧЕМУ НЕ В skins.css КОМПЛЕКТА. Там четыре ОБЩИХ скина, годных любому сайту.
 * «Поле» - палитра ровно этого проекта: тёмная доска, зелёный самоцвет, красная
 * мина. Класть её в общий файл значит навязать следующему сайту чужой предмет.
 * Ни одно правило skins.css под data-skin="mines" не сработает, поэтому в силе
 * остаются роли из :root в tokens.css, а этот файл их переопределяет.
 *
 * ПРО ЛИТЕРАЛЬНЫЕ ЦВЕТА НИЖЕ. Правило свода 03 «ни одного literal-цвета вне
 * tokens.css» - про КОМПОНЕНТЫ: компонент, знающий цвет, ломается при смене
 * скина. Этот файл сам и есть слой палитры, ровно как skins.css. Литералы
 * живут только в двух блоках палитры в начале; ниже, в компонентах, - одни
 * var(--…).
 *
 * ДВЕ ТЕМЫ, ОБЕ НАСТОЯЩИЕ. Светлая - база, тёмная - переопределения под
 * html[data-mode="dark"] (канон css-tokens-dark-theme). Кнопка темы на этом
 * скине действительно меняет вид, а не изображает работу.
 *
 * @font-face здесь НЕТ: Unbounded, Inter и JetBrains Mono объявлены в skins.css
 * комплекта и лежат в assets/fonts. Второе объявление тех же файлов заставило бы
 * браузер качать их дважды.
 * ========================================================================== */

/* ------------------------------ ПАЛИТРА: СВЕТ ----------------------------- */
html[data-skin="mines"] {
  color-scheme: light;

  --bg:        #f4f6fa;
  --bg-2:      #eaeef6;
  --bg-3:      #dee4f0;
  --surface:   #ffffff;
  --surface-2: #f1f4fa;
  --surface-3: #e4eaf4;

  --text:       #101521;
  --text-dim:   #2b3345;
  --text-mute:  #5a6478;
  /* ЗАМЕР Lighthouse 02.09.2026: прежний #7a8497 давал 3.23 на --bg-2 (#eaeef6)
   * и валил проверку контраста в подвале, в печати даты и в дисклеймере - всё
   * это места, набранные --text-faint. #5f6a7e даёт 4.69 на --bg-2, 5.04 на --bg
   * и 5.45 на --surface. Порог 4.5 пройден на всех трёх фонах, а не на одном. */
  --text-faint: #5f6a7e;
  --on-brand:   #ffffff;
  /* Отдельный тон бренда ДЛЯ ТЕКСТА НА БРЕНДОВОЙ ПОДЛОЖКЕ. Тот же замер: кнопка
   * .btn--ghost красит текст в --brand (#0f7350) поверх --brand-soft, и на
   * секции --alt это давало 4.4 - на десятую ниже порога. Сам --brand трогать
   * нельзя, он работает ссылками на чистом фоне и там даёт 5.41. */
  --brand-ink:  #0b5b3f;

  --rule:        #d3dae7;
  --rule-strong: #b6c0d2;
  --hairline:    1px solid var(--rule);

  /* Самоцвет и мина - два цвета предмета. Контраст на --bg посчитан, не
   * прикинут: #0f7350 даёт 5.41 (порог 4.5), белый на нём - 5.85. */
  --brand:      #0f7350;
  --brand-2:    #c0392f;
  --brand-soft: rgba(15, 115, 80, .10);
  --accent:     #0f7350;
  --gold:       #a97514;
  --highlight-pale: rgba(15, 115, 80, .08);

  --success:      #0f7350;  --success-soft: rgba(15, 115, 80, .12);
  --danger:       #c0392f;  --danger-soft:  rgba(192, 57, 47, .12);
  --warning:      #a3690a;  --warning-soft: rgba(163, 105, 10, .14);
  --info:         #2a5fa8;  --info-soft:    rgba(42, 95, 168, .12);

  --surface-hi:   rgba(255, 255, 255, .9);
  --glass-bg:     rgba(255, 255, 255, .82);
  --glass-border: rgba(182, 192, 210, .6);

  /* Доска: тёмная в ОБЕИХ темах. Игровое поле Mines чёрное у всех шестнадцати
   * студий - светлая «доска» была бы не стилизацией, а неправдой о предмете. */
  --board:      #10151f;
  --board-2:    #18202e;
  --board-line: rgba(150, 180, 220, .16);
  --board-text: #e8edf6;
  --board-mute: #97a3b8;
  --gem:        #3ddc97;
  --mine:       #ff5f5f;

  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --ambient: radial-gradient(58% 46% at 88% -10%, rgba(15, 115, 80, .10), transparent 70%),
             radial-gradient(46% 40% at -6% 2%, rgba(192, 57, 47, .07), transparent 72%);
}

/* ------------------------------ ПАЛИТРА: ТЬМА ----------------------------- */
/* Тьма - не инверсия: чистого чёрного нет, акцент светлеет и вместе с ним
 * темнеет --on-brand, иначе текст на кнопке уходит ниже порога. */
html[data-skin="mines"][data-mode="dark"] {
  color-scheme: dark;

  --bg:        #0d1018;
  --bg-2:      #131824;
  --bg-3:      #1a2130;
  --surface:   #151b28;
  --surface-2: #1c2434;
  --surface-3: #232c3f;

  --text:       #eef1f7;
  --text-dim:   #c6cddb;
  --text-mute:  #98a1b4;
  --text-faint: #7b8496;
  --on-brand:   #06120c;
  /* В тёмной теме подложка кнопки тёмная, и осветлять акцент не нужно. */
  --brand-ink:  var(--brand);

  --rule:        rgba(160, 180, 210, .16);
  --rule-strong: rgba(160, 180, 210, .30);

  --brand:      #3ddc97;
  --brand-2:    #ff6b6b;
  --brand-soft: rgba(61, 220, 151, .14);
  --accent:     #3ddc97;
  --gold:       #e0b352;
  --highlight-pale: rgba(61, 220, 151, .10);

  --success:      #3ddc97;  --success-soft: rgba(61, 220, 151, .16);
  --danger:       #ff6b6b;  --danger-soft:  rgba(255, 107, 107, .16);
  --warning:      #f0b429;  --warning-soft: rgba(240, 180, 41, .16);
  --info:         #61a5ff;  --info-soft:    rgba(97, 165, 255, .16);

  --surface-hi:   rgba(255, 255, 255, .14);
  --glass-bg:     rgba(21, 27, 40, .74);
  --glass-border: rgba(160, 180, 210, .28);

  --board:      #0a0e16;
  --board-2:    #131a26;
  --board-line: rgba(150, 180, 220, .14);

  --shadow-card:  var(--border-highlight), 0 2px 6px -2px rgba(0,0,0,.55), 0 18px 40px -16px rgba(0,0,0,.65);
  --shadow-pop:   var(--border-highlight), 0 8px 18px -8px rgba(0,0,0,.6), 0 28px 56px -18px rgba(0,0,0,.72);
  --shadow-lift:  var(--border-highlight), 0 32px 70px -20px rgba(0,0,0,.78);

  --ambient: radial-gradient(58% 46% at 86% -10%, rgba(61, 220, 151, .12), transparent 68%),
             radial-gradient(50% 42% at -6% 4%, rgba(255, 107, 107, .08), transparent 72%);
}

/* ============================== ОБЩЕЕ ============================== */

body { background-image: var(--ambient); background-repeat: no-repeat; }

h1, h2, h3, .gcard__title, .stat__v { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Обёртка таблицы: класс-синоним к .table-wrap заготовки. Оба стоят на одном
 * элементе, чтобы проверка нашла тот, который ищет.
 *
 * contain:paint - НЕ УКРАШЕНИЕ, ЭТО ПОЧИНКА. ЗАМЕР 02.09.2026: приёмка намерила
 * на главной горизонтальную прокрутку 202px при ширине 360. Обёртка при этом
 * была совершенно исправна: ширина 328, clientWidth 326, scrollWidth 557,
 * overflow-x:auto - настоящая скролл-рельса, и визуально таблица в ней честно
 * скроллилась. Но documentElement.scrollWidth всё равно показывал 562, и
 * страница РЕАЛЬНО ехала вбок.
 *
 * Перебор кандидатов на живой странице: display:flow-root не помог, width:100%
 * не помог, min-width:0 на таблице и на контейнере не помогли, даже
 * overflow:hidden на самой обёртке не помог. Помогло только contain:paint -
 * 562 стало 360. Это тот случай, когда переполнение прокрутки скролл-контейнера
 * протекает наружу мимо клипа, и границу приходится ставить явно.
 *
 * ЗАОДНО ПРО ЛОКАЛЬНЫЙ ЗАМЕР. Первая проверка этой же метрикой сказала «сдвиг 0»
 * и была неправа: base.css задаёт html{scroll-behavior:smooth}, и чтение
 * window.scrollX сразу после scrollTo возвращает 0 - страница ещё едет.
 * Мерить надо с принудительным scroll-behavior:auto и после двух кадров. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; }

/* Числа моноширинно: колонка множителей читается столбиком, а не лесенкой. */
.num, .cmp .num, .odds .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================== ШАПКА ============================== */

.site-header__logo { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.site-header__mark { width: 36px; height: 36px; display: block; }
.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.site-header__wordmark-b { color: var(--brand); }

/* ============================== ГЕРОЙ ============================== */

.board-hero {
  position: relative;
  background: linear-gradient(160deg, var(--board-2), var(--board));
  color: var(--board-text);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding-block: var(--s-7) var(--s-8);
  overflow: hidden;
  isolation: isolate;
}
/* Сетка поля 5x5 фоном - предмет сайта, а не абстрактный узор. Декоративная,
 * поэтому псевдоэлементом: скринридеру её видеть незачем. */
.board-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image:
    linear-gradient(var(--board-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--board-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 62% at 78% 18%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 78% 18%, #000 0%, transparent 78%);
}
.board-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); font-weight: var(--fw-semi);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gem);
  margin-bottom: var(--s-3);
}
.board-hero h1 { color: var(--board-text); margin-bottom: var(--s-4); }
.board-hero__lede { color: var(--board-mute); font-size: calc(var(--t-body) * 1.08); margin-bottom: var(--s-5); }
.board-hero__cta { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.board-hero__cta .btn { min-height: 52px; }
/* Кнопка-контур на ТЁМНОЙ доске. В базе .btn--outline красит текст в --text, а он
 * в светлой теме почти чёрный: на доске надпись пропадала. Ровно тот случай, про
 * который свод говорит «ни один машинный замер не видит чёрный текст на чёрном
 * фоне» - поймано глазами на первом же снимке. */
.board-hero .btn--outline { color: var(--board-text); border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04); }
.board-hero .btn--outline:hover { background: var(--gem); color: var(--board); border-color: var(--gem); }
.board-hero__grid { display: grid; gap: var(--s-6); }

/* Живое поле 5x5 в герое: не картинка, а разметка - весит ноль и не мылится. */
.field {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 320px;
  margin-inline: auto;
  padding: 10px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--board-line);
  border-radius: var(--r-lg);
}
.field__cell {
  aspect-ratio: 1;
  border-radius: var(--r-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--board-line);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
.field__cell--gem { background: rgba(61, 220, 151, .16); border-color: rgba(61, 220, 151, .5); }
.field__cell--mine { background: rgba(255, 95, 95, .16); border-color: rgba(255, 95, 95, .5); }
.field__gem { width: 18px; height: 18px; display: block; }
.field__mine { width: 16px; height: 16px; display: block; border-radius: 50%; background: var(--mine); }
.field__caption { margin-top: var(--s-3); text-align: center; color: var(--board-mute); font-size: var(--t-small); }

/* Полоска чисел под героем. */
.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.keyfact {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--board-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.keyfact__v { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); color: var(--board-text); }
.keyfact__k { display: block; font-size: var(--t-small); color: var(--board-mute); margin-top: var(--s-1); }

/* ========================= КАРТОЧКИ ИГР ========================= */

.gcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
.gcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.gcard__link { position: relative; display: block; line-height: 0; }
.gcard__cover { display: block; width: 100%; height: auto; }
.gcard__rtp {
  position: absolute; top: var(--s-3); left: var(--s-3);
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-mono); font-size: var(--t-tiny); font-weight: var(--fw-bold);
  padding: 4px 8px; border-radius: var(--r-pill); line-height: 1.4;
}
.gcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.gcard__title { font-size: var(--t-h4); margin: 0; }
.gcard__title a { color: var(--text); text-decoration: none; }
.gcard__title a:hover { color: var(--brand); }
.gcard__prov { margin: 0; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.gcard__teaser { margin: 0; color: var(--text-dim); font-size: var(--t-small); flex: 1; }
.gcard__facts { margin: 0; font-family: var(--font-mono); font-size: var(--t-tiny); color: var(--text-mute); }


/* ====================== ПРОЗА С ВРЕЗКОЙ СБОКУ ====================== */
/* На узком экране врезка идёт ПОД текстом, а не рядом: базовый слой - 360px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }


/* ЦЕЛИ КАСАНИЯ НИЖЕ ПОРОГА - ПОЙМАНО ЗАМЕРОМ, НЕ ГЛАЗАМИ.
 *
 * Правило В9: интерактивный элемент не мельче 24x24 CSS px на 360. Замер на
 * главной дал 25 нарушителей: шестнадцать ссылок в заголовках карточек игр
 * (высота 21) и девять ссылок в первой колонке таблицы сравнения (высота 17).
 * Строчные ссылки в прозе правилом не считаются, а эти - считаются: они и есть
 * основной способ перейти к обзору.
 *
 * inline-flex, а не block: ссылка обязана остаться в потоке строки, иначе
 * заголовок карточки и ячейка таблицы разъедутся. Растёт только высота бокса. */
.gcard__title a,
.cmp tbody th a,
.next-games a,
.studios a { display: inline-flex; align-items: center; min-height: 24px; }


/* Кнопка-контур на брендовой подложке: текст берёт --brand-ink, а не --brand.
 * Причина - в палитре выше, замером. */
.btn--ghost { color: var(--brand-ink); }

/* Подпись под роликом лежала прямо на тёмной доске, а цвет брала текстовый:
 * --text-mute на --board давал 3.07. Подпись переезжает на обычную карточку -
 * заодно так же, как у кадров игры в .shots. */
.video { background: var(--surface); }
.video figcaption { background: var(--surface); color: var(--text-mute); }

/* Заголовки колонок подвала: были <h4> после <h2> - разрыв уровней, который
 * ловит и Lighthouse, и правило свода про пропуск уровней. Стали абзацем с
 * ролью подписи, вид прежний. */
.site-footer__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); margin: 0 0 var(--s-3); color: var(--text); }

/* ====================== ХАРАКТЕРИСТИКИ ИГРЫ ====================== */

.specs {
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
}
.specs__list { margin: 0; display: grid; gap: 0; }
.specs__row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.specs__row:last-child { border-bottom: 0; }
.specs__row dt { color: var(--text-mute); font-size: var(--t-small); }
.specs__row dd { margin: 0; color: var(--text); font-weight: var(--fw-semi); font-family: var(--font-mono); text-align: right; }

/* ========================= ТАБЛИЦЫ ПРОЕКТА ========================= */

.cmp, .odds { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
.cmp th, .cmp td, .odds th, .odds td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--rule); }
.cmp thead th, .odds thead th { background: var(--surface-3); color: var(--text); font-weight: var(--fw-semi); white-space: nowrap; }
.cmp tbody th { font-weight: var(--fw-semi); }
.cmp tbody th a { color: var(--text); }
.cmp tbody th a:hover { color: var(--brand); }
.cmp td, .odds td { color: var(--text-dim); }
.cmp .num, .odds .num { text-align: right; color: var(--text); white-space: nowrap; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--brand-soft); }
.odds tbody tr:nth-child(even) td { background: var(--surface-2); }
.odds strong { color: var(--brand); }

/* ========================= КАДРЫ И ВИДЕО ========================= */

.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
.shots__item { margin: 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.shots__item img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.shots__item figcaption { padding: var(--s-3) var(--s-4); font-size: var(--t-small); color: var(--text-mute); border-top: var(--hairline); }


/* Обложка отдельной картинкой - там, где кадра игры добыть не удалось. */
.cover-figure { margin: var(--s-5) 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); max-width: 320px; }
.cover-figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.cover-figure figcaption { padding: var(--s-3) var(--s-4); font-size: var(--t-small); color: var(--text-mute); border-top: var(--hairline); }

.video { position: relative; margin: 0 0 var(--s-5); background: var(--board); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.video img, .video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.video__play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
  transition: transform var(--dur-base) var(--ease);
}
.video:hover .video__play { transform: scale(1.06); }
.video__play svg { width: 32px; height: 32px; }
.video figcaption { padding: var(--s-3) var(--s-4); font-size: var(--t-small); color: var(--text-mute); border-top: var(--hairline); }
.video--playing .video__play { display: none; }

/* ===================== ПЕРЕЛИНКОВКА ВНИЗУ ===================== */

.next-games { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-block: var(--s-5); }
.next-games a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-md);
  color: var(--text); text-decoration: none;
}
.next-games a:hover { border-color: var(--brand); }
.next-games img { width: 40px; height: 53px; object-fit: cover; border-radius: var(--r-soft); flex: 0 0 auto; }
.next-games span { display: block; }
.next-games .next-games__prov { font-size: var(--t-tiny); color: var(--text-mute); }

/* ===================== ЛЕНТА ЛОГОТИПОВ СТУДИЙ ===================== */

.studios { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4); padding: 0; list-style: none; }
.studios li {
  padding: 6px var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--text-dim);
}

/* ============================ БРЕЙКПОИНТЫ ============================ */
/* Ровно четыре, все min-width: базовый слой - раскладка на 360px. */

@media (min-width: 480px) {
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .board-hero__cta { flex-direction: row; flex-wrap: wrap; }
  .next-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__mark { width: 40px; height: 40px; }
  .site-header__wordmark { font-size: 1.2rem; }
  .field { max-width: 360px; }
  .next-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-7); }
  .board-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
  .board-hero { padding-block: var(--s-8) var(--s-9); }
}

@media (min-width: 1280px) {
  .gcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}