/* ============================================================================
 * skin.css - компоненты minecraft-slots.com поверх скина "mine".
 *
 * Подключается ПОСЛЕДНИМ (templates/layout.php), поэтому переопределяет всё.
 *
 * ПРАВИЛО ФАЙЛА: ни одного цвета литералом. Палитра и роли живут в skins.css,
 * блоке html[data-skin="mine"]; здесь только var(--...). Проверка сводом:
 *   grep -rnE "#[0-9a-fA-F]{3,8}|rgba?\(" assets/css/*.css \
 *     | grep -vE "tokens\.css|skins\.css" | grep -v "var(--"
 * должна быть пустой.
 *
 * Брейкпоинты ровно четыре и только min-width: 480 / 768 / 1024 / 1280.
 * Базовый слой - раскладка на 360px.
 * ========================================================================== */

/* ---------- Шрифты: свои файлы, чужих доменов нет ---------- */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/pixelify-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/pixelify-latin.woff2") format("woff2");
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Основа ----------
 * color-scheme нужен, иначе в тёмной теме остаются белые полосы прокрутки и
 * белые выпадающие списки - одна строка, которую всегда забывают. */
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

body { background-position: top center; }

/* Пиксельный шрифт хорош на коротком заголовке и плох на длинном подзаголовке:
   у него нет курсива, нет полутонов и очень широкая посадка. Поэтому им набраны
   h1 и h2, а h3 и h4 возвращаются к телесному шрифту. */
h1, h2 { letter-spacing: 0; text-wrap: balance; }
h3, h4 { font-family: var(--font-body); font-weight: var(--fw-bold); letter-spacing: -0.01em; }

/* Длинный адрес или Mine-Drop-подобное слово не должны рвать раскладку. */
p, li, dd, dt, td, th { overflow-wrap: anywhere; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Кнопки: блок, а не таблетка ---------- */
.btn {
  border-radius: 0;
  border: 2px solid var(--cta-edge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  white-space: normal;
  text-align: center;
  padding: var(--s-3) var(--s-5);
  line-height: 1.25;
}
.btn--primary,
.btn--gold {
  background-color: var(--cta-bg);
  background-image: linear-gradient(180deg, var(--cta-bg-2) 0, var(--cta-bg) 45%);
  color: var(--cta-text);
  border-color: var(--cta-edge);
  box-shadow: 4px 4px 0 0 var(--cta-edge);
}
.btn--primary:hover,
.btn--gold:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--cta-edge);
  background-image: linear-gradient(180deg, var(--cta-bg-2) 0, var(--cta-bg) 70%);
}
.btn--primary:active,
.btn--gold:active { transform: translate(4px, 4px); box-shadow: none; }
.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--pane-edge);
  box-shadow: 4px 4px 0 0 var(--pane-shade);
}
.btn--ghost:hover {
  background: var(--brand-soft);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--pane-shade);
}
.btn--outline { border-color: var(--rule-strong); box-shadow: none; }

/* ---------- Шапка ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 4px solid var(--pane-edge);
}
.site-header__bar { gap: var(--s-3); }
.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.02em;
}
.site-header__cta { display: none; }
.nav-desktop a {
  font-weight: var(--fw-semi);
  color: var(--text-dim);
  text-decoration: none;
  padding: var(--s-2) var(--s-2);
}
.nav-desktop a:hover { color: var(--brand); }
.nav-desktop a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -4px 0 0 var(--cta-bg);
}

/* Переключатель темы: маленький блок, который меняет наполнение по состоянию. */
.theme-toggle {
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pane-edge);
  background: var(--surface);
  flex: 0 0 auto;
}
.theme-toggle:hover { background: var(--brand-soft); }
.theme-toggle__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--text);
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%);
}
.theme-toggle[data-state="light"] .theme-toggle__box { background: transparent; }
.theme-toggle[data-state="dark"] .theme-toggle__box  { background: var(--text); }

.nav-toggle { border: 2px solid var(--pane-edge); background: var(--surface); }
.nav-drawer { background: var(--surface); border-left: 4px solid var(--pane-edge); }
.nav-drawer__link {
  border-bottom: 2px solid var(--rule);
  font-weight: var(--fw-semi);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}
.nav-drawer__lang a {
  border: 2px solid var(--pane-edge);
  padding: var(--s-2) var(--s-4);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: var(--fw-bold);
}
.nav-drawer__lang a[aria-current="true"] {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-edge);
}

@media (min-width: 1024px) {
  .site-header__cta { display: inline-flex; }
}

/* ---------- Полоса дёрна: подпись сайта, а не украшение ----------
 * Две строки блоков - трава на земле. Ставится между крупными секциями и на
 * границе героя. Декоративная, поэтому aria-hidden в разметке. */
.turf {
  height: 18px;
  background:
    repeating-linear-gradient(90deg,
      var(--block-grass) 0 12px,
      color-mix(in srgb, var(--block-grass) 78%, var(--text)) 12px 24px) top/100% 6px no-repeat,
    repeating-linear-gradient(90deg,
      var(--block-dirt) 0 12px,
      color-mix(in srgb, var(--block-dirt) 82%, var(--text)) 12px 24px) bottom/100% 12px no-repeat;
}

/* ---------- Герой ---------- */
.hero {
  padding-block: var(--s-7) var(--s-6);
  background: var(--bg-3);
  border-bottom: 4px solid var(--pane-edge);
}
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0.04em;
}
.hero h1 { margin-block: var(--s-3); }
.hero__lede { color: var(--text-dim); font-size: 1.0625rem; }
.hero__cta { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.hero__figure {
  margin-top: var(--s-5);
  border: 4px solid var(--pane-edge);
  box-shadow: var(--shadow-card);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* Обложки у игр разного формата: диаграмма шахты альбомная, официальная обложка
   Mine Drop 2 портретная. Без потолка по высоте портретная растягивает герой почти
   на тысячу пикселей и выдавливает текст за первый экран. */
.hero__figure img { width: auto; max-width: 100%; max-height: 440px; }

@media (min-width: 768px) {
  .hero { padding-block: var(--s-8) var(--s-7); }
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
  .hero__figure { margin-top: 0; }
}

/* ---------- Секции ---------- */
.section { padding-block: var(--s-7); }
.section--alt { background: var(--surface-2); }
.section--deep { background: var(--bg-3); }
.section__head { margin-bottom: var(--s-5); }
.section__head p { color: var(--text-mute); margin-top: var(--s-2); }

@media (min-width: 768px) { .section { padding-block: var(--s-8); } }

/* ---------- Карточки игр ---------- */
.slot-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.slot-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--pane);
  border: 3px solid var(--pane-edge);
  box-shadow: var(--shadow-card);
}
.slot-card__link { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; }
.slot-card__cover { width: 100%; border: 3px solid var(--pane-edge); }
.slot-card__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.slot-card__link:hover .slot-card__name { color: var(--brand); }
.slot-card__tag { color: var(--text-mute); font-size: var(--t-small); margin: 0; }
.slot-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.slot-card__facts div { border: 2px solid var(--rule); padding: var(--s-2); min-width: 0; }
.slot-card__facts dt { font-size: var(--t-tiny); color: var(--text-mute); margin: 0; }
.slot-card__facts dd { margin: 0; font-weight: var(--fw-bold); font-size: var(--t-small); }
.slot-card__where { font-size: var(--t-small); color: var(--text-mute); margin: 0; }
.slot-card .btn { margin-top: auto; }

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

/* ---------- Карточки площадок ---------- */
.casinos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.casino {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--pane);
  border: 3px solid var(--pane-edge);
  box-shadow: var(--shadow-card);
}
.casino__head { display: flex; flex-direction: column; gap: var(--s-2); }
.casino__logo-img { max-height: 40px; width: auto; }
.casino__logo-text {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.casino__why { color: var(--text-mute); font-size: var(--t-small); margin: 0; }
.casino__facts { margin: 0; display: grid; gap: var(--s-2); }
.casino__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-bottom: var(--s-2); border-bottom: 2px solid var(--rule); }
.casino__row dt { font-size: var(--t-tiny); color: var(--text-mute); margin: 0; }
.casino__row dd { margin: 0; font-size: var(--t-small); }
.casino__promo {
  font-family: var(--font-mono);
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 2px solid var(--cta-edge);
  padding: 2px var(--s-2);
  font-weight: var(--fw-bold);
}
.casino__games { font-size: var(--t-small); color: var(--text-mute); margin: 0; }
.casino .btn { margin-top: auto; }

@media (min-width: 768px) {
  .casinos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casino__row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
}
@media (min-width: 1024px) { .casinos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Таблицы ---------- */
.table-scroll {
  overflow-x: auto;
  border: 3px solid var(--pane-edge);
  background: var(--pane);
  box-shadow: var(--shadow-card);
}
.table-scroll:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.paytable, .compare { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.paytable th, .paytable td,
.compare th, .compare td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 2px solid var(--rule);
  vertical-align: top;
}
.paytable thead th, .compare thead th {
  background: var(--surface-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.paytable tbody th, .compare tbody th { font-weight: var(--fw-semi); white-space: nowrap; }
.paytable tbody tr:last-child th,
.paytable tbody tr:last-child td,
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }
.paytable__pay { font-weight: var(--fw-bold); font-family: var(--font-mono); }
.compare td { min-width: 8rem; }
.compare thead a {
  text-decoration: none;
  display: inline-block;
  padding-block: var(--s-2);
}

/* Квадратик материала перед названием блока: подпись без единой картинки. */
.chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--s-2);
  border: 2px solid var(--block-edge);
  vertical-align: -2px;
}
.chip--dirt     { background: var(--block-dirt); }
.chip--stone    { background: var(--block-stone); }
.chip--ore      { background: var(--block-ore); }
.chip--ruby     { background: var(--block-ore); }
.chip--gold     { background: var(--block-gold); }
.chip--diamond  { background: var(--block-diamond); }
.chip--obsidian { background: var(--block-obsidian); }
.chip--blast    { background: var(--block-blast); }
.chip--mystery  { background: var(--block-mystery); }

/* ---------- Паспорт игры ---------- */
.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  border: 3px solid var(--pane-edge);
  background: var(--pane);
  box-shadow: var(--shadow-card);
}
.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--rule);
}
.specs__row:last-child { border-bottom: none; }
.specs__row dt { font-size: var(--t-tiny); color: var(--text-mute); margin: 0; }
.specs__row dd { margin: 0; font-weight: var(--fw-bold); }

@media (min-width: 480px) {
  .specs__row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
  .specs__row dt { font-size: var(--t-small); }
}
@media (min-width: 1024px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs__row:nth-last-child(2) { border-bottom: none; }
}

/* ---------- Лента скриншотов ---------- */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
}
.shots:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.shots__item { scroll-snap-align: start; margin: 0; min-width: 0; }
.shots__item img { width: 100%; border: 3px solid var(--pane-edge); box-shadow: var(--shadow-card); }
.shots__item figcaption { font-size: var(--t-small); color: var(--text-mute); padding-top: var(--s-2); }

@media (min-width: 768px)  { .shots { grid-auto-columns: 46%; } }
@media (min-width: 1280px) { .shots { grid-auto-columns: 31%; } }

/* ---------- Фасад видео ---------- */
.video {
  position: relative;
  border: 3px solid var(--pane-edge);
  background: var(--surface-3);
  box-shadow: var(--shadow-card);
}
.video img { width: 100%; }
.video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 56px;
  background: var(--cta-bg);
  border: 3px solid var(--cta-edge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video__play:hover { background: var(--cta-bg-2); }
.video__triangle {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid var(--cta-text);
}

/* ---------- Шаги ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); counter-reset: шаг; }
.steps > li {
  position: relative;
  padding: var(--s-4);
  padding-left: calc(var(--s-6) + var(--s-4));
  background: var(--pane);
  border: 3px solid var(--pane-edge);
  box-shadow: var(--shadow-card);
  counter-increment: шаг;
}
.steps > li::before {
  content: counter(шаг);
  position: absolute;
  left: var(--s-3);
  top: var(--s-4);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 2px solid var(--cta-edge);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.steps > li h3 { margin-bottom: var(--s-2); font-size: var(--t-h4); }
.steps > li p:last-child { margin-bottom: 0; }

/* ---------- Врезки ---------- */
.callout {
  border: 3px solid var(--pane-edge);
  border-left-width: 10px;
  background: var(--surface-2);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.callout--note      { border-left-color: var(--info); }
.callout--important { border-left-color: var(--danger); }
.callout--tip       { border-left-color: var(--success); }
.callout--warning   { border-left-color: var(--warning); }
.callout__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--text-mute);
  margin-bottom: var(--s-2);
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Вопросы и ответы ---------- */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  border: 3px solid var(--pane-edge);
  background: var(--pane);
  box-shadow: var(--shadow-card);
}
.faq summary {
  cursor: pointer;
  padding: var(--s-4);
  font-weight: var(--fw-bold);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--text-mute);
  border-bottom: 3px solid var(--text-mute);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { border-bottom: 2px solid var(--rule); }
.faq__body { padding: var(--s-4); }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Хлебные крошки ---------- */
.breadcrumbs { padding-block: var(--s-4) 0; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; font-size: var(--t-small); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: var(--text-faint); margin-right: var(--s-2); }
.breadcrumbs__item[aria-current="page"] { color: var(--text-mute); }

/* ---------- Полоса цифр ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  border: 3px solid var(--pane-edge);
  background: var(--pane);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.stat__v { display: block; font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-bold); color: var(--text); }
.stat__k { display: block; font-size: var(--t-small); color: var(--text-mute); margin-top: var(--s-1); }

@media (min-width: 480px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Проза ---------- */
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose li + li { margin-top: var(--s-2); }
.lede { font-size: 1.125rem; color: var(--text-dim); }

/* ---------- Подвал ---------- */
.site-footer {
  background: var(--surface-2);
  border-top: 4px solid var(--pane-edge);
  padding-block: var(--s-7);
  margin-top: var(--s-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.site-footer__title {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  color: var(--text-mute);
  margin-bottom: var(--s-3);
  letter-spacing: 0.02em;
}
.site-footer__col a { display: block; padding-block: var(--s-2); color: var(--text-dim); text-decoration: none; min-height: 24px; }
.site-footer__col a:hover { color: var(--brand); text-decoration: underline; }
.site-footer__disclaimer { font-size: var(--t-small); color: var(--text-mute); padding-top: var(--s-4); border-top: 2px solid var(--rule); }
.site-footer__legal { font-size: var(--t-tiny); color: var(--text-faint); margin-top: var(--s-2); }

@media (min-width: 480px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Дата обновления ---------- */
.page-meta--bottom { padding-block: var(--s-5) 0; }
.page-meta__item { font-size: var(--t-small); color: var(--text-faint); }

/* ---------- Ссылка «пропустить к содержимому» ---------- */
.skip-link:focus {
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 2px solid var(--cta-edge);
  padding: var(--s-2) var(--s-4);
}

/* ---------- Пара «в двух словах» ---------- */
.tldr {
  border: 3px solid var(--pane-edge);
  border-top-width: 10px;
  border-top-color: var(--cta-bg);
  background: var(--pane);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.tldr__label { font-family: var(--font-display); font-size: var(--t-small); color: var(--text-mute); display: block; margin-bottom: var(--s-2); }
.tldr p:last-child { margin-bottom: 0; }

/* ---------- Две колонки текста и врезки на широком ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; } }

/* ---------- Список ссылок на разборы ---------- */
.readmore { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.readmore a {
  display: block;
  padding: var(--s-4);
  border: 3px solid var(--pane-edge);
  background: var(--pane);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text);
  font-weight: var(--fw-semi);
  min-height: var(--tap-min);
}
.readmore a:hover { background: var(--brand-soft); color: var(--brand); }
@media (min-width: 768px) { .readmore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Демо: iframe подставляется по нажатию ----------
 * Кадр игры не грузится, пока читатель не попросил. До нажатия страница не делает
 * ни одного запроса к чужому домену - то же правило, что и у фасада видео. */
.demo { margin-bottom: var(--s-7); }
.demo h3 { margin-bottom: var(--s-2); }
.demo-iframe__slot {
  position: relative;
  margin-block: var(--s-4);
  border: 3px solid var(--pane-edge);
  background: var(--surface-3);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.demo__frame { width: 100%; height: 100%; border: 0; display: block; }
.demo-iframe__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5);
  text-align: center;
  background: var(--surface-3);
  transition: opacity var(--dur-base) var(--ease);
}
@media (min-width: 768px) { .demo-iframe__slot { aspect-ratio: 16 / 10; } }

/* ---------- Приглушённая строка-примечание ---------- */
.muted { color: var(--text-mute); font-size: var(--t-small); }