/* Сайт divanplay.ru. Читатель в основном 45+: база шрифта 19–20 px, высокий контраст,
   кнопки не ниже 48 px, простая навигация без выпадающих меню.
   Образ — диван в гостиной: бархатная зелёная обивка (шапка и подвал), горчичная
   подушка (кнопка «Играть» и фокус), край пледа в клетку под шапкой. Яркое — только
   эти три вещи, остальное спокойное: белые листы текста на светлом фоне комнаты.
   Дизайн-система — site/DISENO.md: токены ниже, компоненты, правила, как добавить страницу. */

/* Golos Text (Paratype, OFL — fuentes/OFL.txt): шрифт для интерфейсов госуслуг, крупный
   и разборчивый в кириллице. Переменный, начертания 400–900 одним файлом. */
@font-face {
  font-family: 'Golos Text';
  src: url('/fuentes/golos-cyrillic.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/fuentes/golos-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- токены ----------
   В правилах ниже — только токены. Литерал допустим как геометрия одного компонента
   (размер значка, нитки пледа, высота фрейма) или как значение, подогнанное расчётом
   (шапка телефона), — с комментарием рядом.

   Брейкпоинты (в @media переменные не работают — пишем числом, em от 16 px браузера):
     ≤ 30em    (480 px)  узкий телефон: меню сеткой 2×2 рядом со значком;
     ≤ 47.99em (767 px)  телефон: шапка компактная, плед тоньше, плашка cookie во всю ширину;
                         тот же порог в sitio.js — игра поверх страницы;
     ≥ 60em    (960 px)  компьютер: база шрифта 20 px, поля страницы 32 px;
     ≥ 64em   (1024 px)  обложка игры справа от заголовка (уже — сразу под H1, вводные под ней);
     ≥ 75em   (1200 px)  лист текста и «Другие игры» двумя колонками.
   Анимаций и переходов нет: состояния меняются сразу. Плавная только прокрутка к игре
   (sitio.js), при prefers-reduced-motion — без неё. */
:root {
  /* Цвета. Контраст указан к фону, на котором цвет стоит. */
  --obivka: #1F4F47;         /* обивка: шапка, подвал, полоса игры, ссылки, H2 листа, .boton */
  --obivka-temnaya: #163A34; /* фон сцены и пледа; наведение на ссылку и .boton */
  --gorchica: #F0B429;       /* подушка: «Играть», ореол фокуса, текущий пункт меню, «Закрыть» */
  --gorchica-svet: #F7C95A;  /* наведение на горчичное; ссылки подвала при наведении (5,9:1) */
  --vino: #9E3550;           /* нитка пледа, подушечка в значке; не для текста */
  --komnata: #E9EFEB;        /* фон страницы */
  --bumaga: #FFFFFF;         /* листы текста, карточки, плашки */
  --tinta: #1B2B27;          /* текст: на bumaga 14,8:1, на komnata 12,7:1, на gorchica 7,9:1 */
  --tinta-2: #3B4F49;        /* подписи: на bumaga 8,8:1, на komnata 7,5:1 */
  --liniya: #BFCFC7;         /* рамки карточек и картинок — украшение, не граница смысла */
  --sobre-obivka: #FFFFFF;   /* текст и значки на обивке: 9,3:1 */
  --sobre-obivka-borde: rgba(255, 255, 255, 0.85); /* рамка кнопок полосы игры: 7,2:1 */
  --sobre-obivka-hover: rgba(255, 255, 255, 0.14); /* подсветка пунктов и кнопок на обивке */
  --pled-gorchica: rgba(240, 180, 41, 0.9);   /* поперечная нитка пледа */
  --pled-gorchica-2: rgba(240, 180, 41, 0.55); /* продольная нитка, тише */
  --pled-vino: rgba(158, 53, 80, 0.9);
  --fondo-juego: #000;       /* фрейм игры, пока билд грузится */
  --zaglushka: #FFE066;      /* подсветка [[заглушки]] — только до запуска */
  --zaglushka-borde: #B54708;

  /* Фокус с клавиатуры: тёмный контур и горчичный ореол — виден и на светлом, и на обивке. */
  --foco-ancho: 3px;
  --foco-separacion: 3px;
  --foco-halo: 0 0 0 7px var(--gorchica);

  /* Шрифт: размеры в rem — растут вместе с настройкой шрифта в браузере. */
  --letra: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto: 1.1875rem;        /* 19 px — база; ≥ 960 px — 20 px (ниже) */
  --texto-l: 1.12em;         /* вводные строки, плашка «см. также» */
  --texto-s: 1.0625rem;      /* 17 px — крошки, подписи, подвал, плашки, кнопки полосы, меню телефона */
  --titulo-h1: clamp(2.1rem, 1.3rem + 3vw, 3.25rem);  /* 33,6–52 px */
  --titulo-h1-lado: clamp(2rem, 0.6rem + 2.4vw, 3rem); /* 34–48 px — H1 в колонке рядом с обложкой */
  --titulo-h2: 1.55em;
  --titulo-h3: 1.2em;
  --titulo-tarjeta: 1.3em;
  --titulo-logo: 1.65rem;
  --texto-jugar: clamp(1.35rem, 1rem + 2vw, 2.2rem);  /* 21,6–35,2 px */
  --interlinea: 1.6;
  --interlinea-titulo: 1.15;
  --interletra-h1: -0.02em;  /* H1 и логотип */
  --interletra-h2: -0.01em;
  --peso-medio: 550;         /* текст плашки «см. также» */
  --peso-menu: 650;          /* пункты меню — по нему посчитана шапка телефона */
  --peso-fuerte: 750;        /* strong, H3, кнопки, название в полосе игры */
  --peso-titulo: 800;        /* H2, логотип, названия карточек, «Играть» в карточке */
  --peso-max: 850;           /* H1 и кнопка «Играть» */

  /* Отступы: шаг 4 px (шагов 9 и 11 нет). Какой шаг где — site/DISENO.md, раздел 2. */
  --esp-1: 0.25rem;          /* 4 px */
  --esp-2: 0.5rem;           /* 8 px */
  --esp-3: 0.75rem;          /* 12 px */
  --esp-4: 1rem;             /* 16 px — поле страницы на телефоне */
  --esp-5: 1.25rem;          /* 20 px */
  --esp-6: 1.5rem;           /* 24 px */
  --esp-7: 1.75rem;          /* 28 px */
  --esp-8: 2rem;             /* 32 px */
  --esp-10: 2.5rem;          /* 40 px */
  --esp-12: 3rem;            /* 48 px */
  /* Ритм страницы — других вертикальных отступов между блоками нет (site/DISENO.md, §2):
     --hueco    между блоками: заголовок страницы → карточки → лист → «Другие игры»;
     --hueco-s  внутри группы: заголовок группы → её карточки, «см. также» → лист, зазор сетки;
     --campo-hoja  поля белого листа со всех сторон; первый и последний элемент листа без
                   своих отступов, чтобы сверху и снизу поле было одно и то же. */
  --hueco: var(--esp-8);     /* 32 px */
  --hueco-s: var(--esp-5);   /* 20 px */
  --campo-hoja: clamp(var(--esp-5), 3vw, var(--esp-8));  /* 20–32 px */

  /* Цели нажатия */
  --toque: 48px;             /* кнопки и пункты меню */
  --toque-min: 44px;         /* ссылки списком: крошки, подвал; значок и меню-сетка на телефоне */

  /* Рамки и радиусы */
  --borde: 2px;
  --borde-grueso: 3px;       /* «Играть», контур фокуса */
  --borde-marco: 8px;        /* рама сцены игры, горчичный край «см. также» */
  --radio-s: 6px;            /* фокус вокруг ссылки в тексте */
  --radio-m: 12px;           /* служебные кнопки, «см. также», картинки */
  --radio: 18px;             /* листы, карточки, плашка cookies */
  --radio-l: 24px;           /* сцена игры: --radio + 6 px, под раму 8 px */
  --radio-pildora: 999px;    /* «Играть», пункты меню */

  /* Тени: только у «Играть» (выпуклая подушка) и у плавающей плашки. */
  --sombra-boton: 0 6px 0 var(--tinta);
  --sombra-boton-pulsado: 0 2px 0 var(--tinta);
  --sombra-flotante: 0 12px 32px rgba(27, 43, 39, 0.28);

  /* Раскладка */
  --ancho: 90rem;            /* ширина страницы с полями: 1440 px */
  --campo: var(--esp-4);     /* поле страницы слева и справа; ≥ 960 px — 32 px (ниже) */
  --ancho-hoja: 44rem;       /* лист рядом со списком игр: строка ~65 знаков при 20 px и полях
                                32 px. В одну колонку лист — во всю ширину */
  --ancho-lado: minmax(17rem, 28%);  /* колонка заголовка рядом с обложкой (значение для grid) */
  --ancho-lista: minmax(17rem, 1fr); /* список игр рядом с листом (значение для grid) */

  /* Слои */
  --capa-aviso: 900;         /* плашка cookies */
  --capa-juego: 1000;        /* игра поверх страницы на телефоне */
  --capa-saltar: 2000;       /* «Перейти к содержанию» */
}
@media (min-width: 60em) { :root { --texto: 1.25rem; --campo: var(--esp-8); } }   /* 20 px, поля 32 px */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--komnata);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: var(--texto);
  line-height: var(--interlinea);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

a { color: var(--obivka); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--obivka-temnaya); text-decoration-thickness: 3px; }
:focus-visible {
  outline: var(--foco-ancho) solid var(--tinta);
  outline-offset: var(--foco-separacion);
  box-shadow: var(--foco-halo);
  border-radius: var(--radio-s);
}

.saltar {
  position: absolute; left: var(--esp-4); top: -10rem; z-index: var(--capa-saltar);
  background: var(--gorchica); color: var(--tinta); padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-m); font-weight: var(--peso-fuerte);
}
.saltar:focus { top: var(--esp-4); }

/* ---------- шапка и плед ---------- */

.sitio { background: var(--obivka); color: var(--sobre-obivka); }
.sitio-dentro {
  max-width: var(--ancho); margin: 0 auto; padding: var(--esp-3) var(--campo);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-8);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--esp-3); min-height: 52px;
  color: var(--sobre-obivka); text-decoration: none; font-weight: var(--peso-titulo);
  font-size: var(--titulo-logo); letter-spacing: var(--interletra-h1);
}
.logo:hover { color: var(--sobre-obivka); }
.logo svg { width: 52px; height: 52px; flex: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.menu li + li { margin-top: 0; }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--esp-4);
  border-radius: var(--radio-pildora); color: var(--sobre-obivka); text-decoration: none; font-weight: var(--peso-menu);
}
.menu a:hover { background: var(--sobre-obivka-hover); color: var(--sobre-obivka); }
.menu a[aria-current] { background: var(--gorchica); color: var(--tinta); }
/* Телефон: шапка компактная — значок без надписи и меню 17 px, чтобы «Играть» была видна без
   прокрутки. Ширины посчитаны по Golos Text 650: четыре пункта с полями — 412 px, со значком
   (цель 44 px) и зазором — 462 px: в строку влезают с 482 px. Уже — меню сеткой 2×2 справа от
   значка (267 px, влезает и в 320 − 20), пилюли 44 px: шапка 106 px вместо 64. Поля и зазоры
   здесь — литералы этого расчёта, не шаги шкалы. */
@media (max-width: 47.99em) {
  .sitio-dentro { padding: 0.5rem 0.625rem; gap: 0.25rem 0.375rem; }
  .logo { min-height: var(--toque); min-width: var(--toque-min); justify-content: center; }
  .logo svg { width: 40px; height: 40px; }
  .logo span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .menu ul { gap: 2px; }
  .menu a { padding: 0 0.45rem; font-size: var(--texto-s); }
}
@media (max-width: 30em) {
  .menu ul { display: grid; grid-template-columns: auto auto; }
  .menu a { display: flex; justify-content: center; min-height: var(--toque-min); }
}

/* Край пледа: горчичная и винная нитки в клетку на тёмной обивке. Положения ниток — геометрия
   компонента; цвета — токены --pled-*. */
.pled {
  height: 18px;
  background-color: var(--obivka-temnaya);
  background-image:
    linear-gradient(180deg, transparent 6px, var(--pled-gorchica) 6px, var(--pled-gorchica) 10px, transparent 10px, transparent 13px, var(--pled-vino) 13px, var(--pled-vino) 15px, transparent 15px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--pled-gorchica-2) 22px 28px, transparent 28px 36px, var(--pled-vino) 36px 39px, transparent 39px 56px);
}

@media (max-width: 47.99em) { .pled { height: 12px; background-position: 0 -3px; } }

/* ---------- страница ---------- */

/* Снизу — отступ до подвала (у подвала своего нет). */
main { max-width: var(--ancho); margin: 0 auto; padding: var(--esp-5) var(--campo) var(--esp-12); }

/* Крошки: ссылки — цели 44 px по высоте, разделитель «›» скрыт от чтения вслух. */
.migas ol { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--texto-s); color: var(--tinta-2); }
.migas li + li { margin-top: 0; }
.migas li + li::before { content: '›'; content: '›' / ''; margin: 0 var(--esp-2); }
.migas a { display: inline-flex; align-items: center; min-height: var(--toque-min); }

/* Отступы текста — в em: растут вместе с размером строки. Слово длиннее строки (на 360 px —
   «конфиденциальности» в H1) переносится по слогам, где браузер умеет ограничить перенос
   длинными словами, а в остальных — просто разрывается: страница вбок не едет. */
h1, h2, h3 { line-height: var(--interlinea-titulo); text-wrap: balance; overflow-wrap: break-word; }
@supports (hyphenate-limit-chars: 12) { h1 { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
h1 { font-size: var(--titulo-h1); font-weight: var(--peso-max); letter-spacing: var(--interletra-h1); margin: 0 0 0.6em; max-width: 20em; }
h2 { font-size: var(--titulo-h2); font-weight: var(--peso-titulo); letter-spacing: var(--interletra-h2); margin: 1.5em 0 0.6em; }
h3 { font-size: var(--titulo-h3); font-weight: var(--peso-fuerte); margin: 1.25em 0 0.4em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li + li { margin-top: 0.45em; }
strong { font-weight: var(--peso-fuerte); }

.entrada { font-size: var(--texto-l); }
.entrada p:last-child { margin-bottom: 0; }

/* Заголовок страницы-списка (главная, раздел): H1 и вводные строки. С 1024 px — рядом, двумя
   равными колонками: вводные строки во всю ширину были бы длиннее 100 знаков. */
@media (min-width: 64em) {
  .encabezado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--esp-10); align-items: center; }
  .encabezado h1 { margin: 0; }
}

/* Белый лист с полями: на фоне комнаты строки читаются как страница книги. Ширина — его
   колонки: рядом со списком игр — до --ancho-hoja, в одну колонку — во всю страницу. */
.texto { background: var(--bumaga); border-radius: var(--radio); padding: var(--campo-hoja); }
.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }
.texto h2 { color: var(--obivka); }
.texto figure { margin: 1.5em 0; }
.texto figure img { border-radius: var(--radio-m); border: var(--borde) solid var(--liniya); }
.texto figure.vertical img { max-width: min(100%, 18rem); }
.texto figcaption { margin-top: 0.6em; font-size: var(--texto-s); color: var(--tinta-2); }

mark.zaglushka { background: var(--zaglushka); color: var(--tinta); outline: var(--borde) dashed var(--zaglushka-borde); padding: 0 0.2em; }

/* ---------- сцена игры ---------- */

.escena {
  position: relative; margin: 0;
  background: var(--obivka-temnaya); border: var(--borde-marco) solid var(--obivka); border-radius: var(--radio-l);
  overflow: hidden;
}
.cubierta { position: relative; aspect-ratio: 16 / 9; }
.cubierta img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* «Играть» — у нижнего края обложки: названия игр нарисованы на обложках вверху и слева
   (у «Пасьянса слов» — до 57 % высоты), низ по центру свободен от надписей. Поля — в em:
   растут вместе с кнопкой. */
.jugar {
  position: absolute; left: 50%; bottom: max(var(--esp-4), 5%); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em 1.5em 0.6em 1.2em; min-height: 56px;
  font-size: var(--texto-jugar); font-weight: var(--peso-max); line-height: 1;
  background: var(--gorchica); color: var(--tinta);
  border: var(--borde-grueso) solid var(--tinta); border-radius: var(--radio-pildora); box-shadow: var(--sombra-boton);
  cursor: pointer;
}
.jugar svg { width: 1em; height: 1em; flex: none; }
.jugar:hover { background: var(--gorchica-svet); }
.jugar:active { transform: translate(-50%, 4px); box-shadow: var(--sombra-boton-pulsado); }

.escena-barra {
  display: flex; align-items: center; gap: var(--esp-2); min-height: 60px; padding: var(--esp-1) var(--esp-2) var(--esp-1) var(--esp-4);
  background: var(--obivka); color: var(--sobre-obivka);
}
.escena-nombre { flex: 1; min-width: 0; font-weight: var(--peso-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-barra {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--toque); padding: 0 var(--esp-4);
  font-size: var(--texto-s); font-weight: var(--peso-fuerte); color: var(--sobre-obivka); background: transparent;
  border: var(--borde) solid var(--sobre-obivka-borde); border-radius: var(--radio-m); cursor: pointer;
}
.boton-barra svg { width: 1.3em; height: 1.3em; flex: none; }
.boton-barra:hover { background: var(--sobre-obivka-hover); }
.boton-barra.cerrar { background: var(--gorchica); color: var(--tinta); border-color: var(--gorchica); }
.boton-barra.cerrar:hover { background: var(--gorchica-svet); }

/* Игра открыта (.abierta, sitio.js): сцена — колонка «полоса + фрейм», фрейм берёт всю
   оставшуюся высоту. */
.marco iframe { display: block; width: 100%; border: 0; background: var(--fondo-juego); }
.escena.abierta { display: flex; flex-direction: column; }
.escena.abierta .marco { flex: 1; display: flex; min-height: 0; }
.escena.abierta iframe { flex: 1; min-height: 0; }

/* Компьютер: сцена во всю ширину страницы и на высоту экрана с полями 8 px; sitio.js
   прокручивает к ней. Ниже 24rem не сжимается — на совсем низком окне игра прокручивается. */
.escena.abierta:not(.movil) {
  height: calc(100vh - 2 * var(--esp-2)); height: calc(100dvh - 2 * var(--esp-2)); min-height: 24rem;
  scroll-margin-top: var(--esp-2);
}

/* «На весь экран» разворачивает всю сцену — с полосой и кнопкой «Свернуть». */
.escena:fullscreen { margin: 0; border: 0; border-radius: 0; }
.escena:-webkit-full-screen { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; }

/* Телефон: игра поверх страницы во весь экран, сверху — «Закрыть». */
.escena.movil {
  position: fixed; inset: 0; z-index: var(--capa-juego); margin: 0; border: 0; border-radius: 0;
  height: 100vh; height: 100dvh;
}
html.sin-scroll, html.sin-scroll body { overflow: hidden; }

/* Примечание — подпись к тому, что над ним (сцене или вводным строкам): 12 px сверху. */
.nota-escena { margin: var(--esp-3) 0 0; font-size: var(--texto-s); color: var(--tinta-2); }

/* Одна колонка (< 1024 px): обложка с «Играть» сразу под H1, примечание, вводные строки.
   Порядок в разметке прежний (текст над игрой, как в чек-листе); фокус не страдает: во
   вводных строках нет ссылок и кнопок. */
@media (max-width: 63.99em) {
  .arriba { display: flex; flex-direction: column; }
  .arriba > .escena { order: 1; }
  .arriba > noscript, .arriba > .nota-escena { order: 2; }
  .arriba > .entrada { order: 3; margin-top: var(--esp-4); }
}

/* Компьютер (≥ 1024 px): заголовок, вводные строки и примечание — колонкой слева, обложка —
   справа на остаток ширины: «Играть» видна без прокрутки и на 1024×768. Пока игра открыта
   (.jugando), раскладка обычная — сцена встаёт во всю ширину под вводными строками. Строка
   1fr внизу забирает лишнюю высоту обложки, чтобы между H1 и вводными не было зазора. */
@media (min-width: 64em) {
  .arriba:not(.jugando) {
    display: grid; column-gap: var(--esp-10);
    grid-template-columns: var(--ancho-lado) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }
  .arriba:not(.jugando) > * { grid-column: 1; }
  .arriba:not(.jugando) > .migas { grid-column: 1 / -1; }
  .arriba:not(.jugando) > .escena { grid-column: 2; grid-row: 2 / -1; align-self: start; }
  .arriba:not(.jugando) > h1 { font-size: var(--titulo-h1-lado); }
  .arriba:not(.jugando) > .entrada { font-size: inherit; }
  .arriba.jugando > .escena { margin-top: var(--hueco-s); }
}

/* Ссылка на соседнюю игру того же жанра (маджонг ↔ маджонг без времени). */
.vease {
  margin: 0 0 var(--hueco-s); padding: var(--esp-4) var(--esp-5);
  background: var(--bumaga); border-left: var(--borde-marco) solid var(--gorchica); border-radius: var(--radio-m);
  font-size: var(--texto-l); font-weight: var(--peso-medio);
}
.vease p { margin: 0; }
.vease a { font-weight: var(--peso-fuerte); }

/* ---------- карточки игр ---------- */

/* Колонка не уже 22rem (352 px): на телефоне — одна, с 768 px — две, с 1160 px — три;
   четвёртая не влезает и в полную ширину страницы (1376 px). auto-fit: две карточки раздела
   делят всю ширину пополам, а не оставляют пустую третью колонку. */
.tarjetas {
  list-style: none; margin: var(--hueco) 0 0; padding: 0;
  display: grid; gap: var(--hueco-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.tarjetas li + li { margin-top: 0; }
.tarjeta {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: var(--esp-2);
  background: var(--bumaga); border: var(--borde) solid var(--liniya); border-radius: var(--radio);
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
}
.tarjeta:hover { border-color: var(--obivka); }
.tarjeta:has(a:focus-visible) { outline: var(--foco-ancho) solid var(--tinta); outline-offset: var(--foco-separacion); box-shadow: var(--foco-halo); }
.tarjeta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-m); }
.tarjeta h2, .tarjeta h3 { margin: var(--esp-1) var(--esp-1) 0; font-size: var(--titulo-tarjeta); font-weight: var(--peso-titulo); }
.tarjeta h2 a, .tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h2 a::after, .tarjeta h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio); }
.tarjeta h2 a:focus-visible, .tarjeta h3 a:focus-visible { outline: none; box-shadow: none; }
.tarjeta p { margin: 0 var(--esp-1); flex: 1; color: var(--tinta-2); }
.tarjeta .ir {
  align-self: flex-start; margin: var(--esp-1) var(--esp-1) 0; padding: var(--esp-2) var(--esp-5);
  background: var(--gorchica); color: var(--tinta); border: var(--borde) solid var(--tinta); border-radius: var(--radio-pildora); font-weight: var(--peso-titulo);
}
.tarjeta:hover .ir { background: var(--gorchica-svet); }

/* «Другие игры» / «Игры»: H2 и карточки — группа (--hueco-s внутри). */
.otros { margin-top: var(--hueco); }
.otros h2 { margin: 0; }
.otros .tarjetas { margin-top: var(--hueco-s); }

/* ---------- лист и «Другие игры» ---------- */

/* .columnas — лист текста (.lectura: «см. также» и .texto) и «Другие игры».
   До 1024 px — одна колонка: лист во всю ширину, под ним карточки сеткой.
   С 1024 px — лист слева (до --ancho-hoja), игры справа на весь остаток (--ancho-lista)
   списком: картинка 6–10rem, рядом название и «Играть», описание скрыто (оно есть в карточках
   на главной и в разделах). Шесть игр — 780–850 px (название в узкой колонке — в две строки):
   при окне выше 896 px список едет вместе с листом (sticky), ниже — стоит на месте, чтобы низ
   не прятался. Больше шести игр в списке — пересчитай высоту и порог. Без «Других игр»
   (главная, .lista) лист с 1024 px — в две колонки. */
.columnas { margin-top: var(--hueco); }
@media (min-width: 64em) {
  .columnas:has(> .otros) {
    display: grid; column-gap: var(--esp-10); align-items: start;
    grid-template-columns: minmax(0, var(--ancho-hoja)) var(--ancho-lista);
  }
  .columnas > .otros { margin-top: 0; }
  .columnas > .otros .tarjetas { grid-template-columns: 1fr; gap: var(--esp-3); }
  .columnas > .otros .tarjeta {
    display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(8rem, 1fr); align-content: center;
    column-gap: var(--esp-4); row-gap: var(--esp-2); padding: var(--esp-3);
  }
  .columnas > .otros .tarjeta img { grid-row: 1 / span 2; align-self: center; }
  .columnas > .otros .tarjeta h3 { margin: 0; align-self: end; font-size: inherit; }
  .columnas > .otros .tarjeta p { display: none; }
  .columnas > .otros .tarjeta .ir { margin: 0; align-self: start; justify-self: start; }

  .columnas.lista:not(:has(> .otros)) .texto { columns: 2; column-gap: var(--esp-12); }
  .columnas.lista:not(:has(> .otros)) .texto :is(h2, h3) { break-after: avoid; }
  .columnas.lista:not(:has(> .otros)) .texto :is(p, ul, ol) { break-inside: avoid; }
}
@media (min-width: 64em) and (min-height: 56em) {
  .columnas > .otros { position: sticky; top: var(--esp-4); }
}

/* ---------- подвал и плашка cookies ---------- */

/* Подвал: строка игр и строка «политика · настройки cookie · ©» — ряды ссылок по 44 px с
   одинаковым зазором; поля сверху и снизу равные. Отступ до подвала даёт main. */
.pie { background: var(--obivka); color: var(--sobre-obivka); }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; padding: var(--esp-6) var(--campo); font-size: var(--texto-s); }
.pie a { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--sobre-obivka); }
.pie a:hover { color: var(--gorchica-svet); }
.pie ul, .pie-fila { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--esp-6); }
.pie ul { list-style: none; }
.pie li + li { margin-top: 0; }
/* Линия 1 px между рядами — геометрия подвала, цвет — та же полупрозрачная белая, что у наведения. */
.pie-fila { margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: 1px solid var(--sobre-obivka-hover); }

.boton {
  min-height: var(--toque); padding: 0 var(--esp-6); font-weight: var(--peso-fuerte);
  background: var(--obivka); color: var(--sobre-obivka); border: 0; border-radius: var(--radio-m); cursor: pointer;
}
.boton:hover { background: var(--obivka-temnaya); }

/* Кнопка в виде ссылки — действие на месте, а не переход («Настройки cookie» в подвале). */
.enlace {
  display: inline-flex; align-items: center; min-height: var(--toque-min); padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.enlace:hover { text-decoration-thickness: 3px; }
.pie .enlace:hover { color: var(--gorchica-svet); }

/* Выбор cookie: плавает снизу, пока выбора нет или его открыли из подвала. Кнопки — одна и та же
   .boton в двух равных колонках: «Принять» не выделяется. Компьютер: текст слева, кнопки справа
   (22rem + 18rem + зазор влезают в 46rem); телефон — во всю ширину снизу, кнопки под текстом. */
.cookies {
  position: fixed; left: var(--esp-4); right: var(--esp-4); bottom: var(--esp-4); z-index: var(--capa-aviso);
  max-width: 46rem; margin: 0 auto; padding: var(--esp-4) var(--esp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5);
  background: var(--bumaga); border: var(--borde) solid var(--tinta); border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  font-size: var(--texto-s);
}
.cookies p { margin: 0; flex: 1 1 22rem; }
.cookies-botones { flex: 1 1 18rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.cookies-botones .boton { padding: 0 var(--esp-4); }
/* Пока под плашкой «Играть» или открыта игра, плашка спрятана: не видна и не ловит фокус (sitio.js). */
.cookies.apartada { visibility: hidden; }
@media (max-width: 47.99em) {
  .cookies {
    left: 0; right: 0; bottom: 0; max-width: none; padding: var(--esp-3) var(--esp-4);
    border-width: var(--borde) 0 0; border-radius: var(--radio) var(--radio) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}