/* Games — база игр и достижений (модуль games).
 *
 * Страницы /games/…: каталог, игра, достижение; карточка «Об игре» и ссылки
 * на игры/достижения в тексте статей. Все классы — с префиксом gm-, чтобы не
 * пересекаться со стилями DLE-шаблона. Подключается после engine.css.
 *
 * Уровни редкости (data-tier на карточке/иконке/шкале задаёт цвет --gm-tier):
 * common < uncommon < rare < epic < legendary. */

:root {
  --gm-common: #9aa4a8;
  --gm-uncommon: #4ade80;
  --gm-rare: #60a5fa;
  --gm-epic: #c084fc;
  --gm-legendary: #fbbf24;
  /* Кубок-маска для ссылок на достижения в тексте */
  --gm-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h3a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4h-.35A5.01 5.01 0 0 1 13 14.9V17h3v2H8v-2h3v-2.1A5.01 5.01 0 0 1 7.35 12H7a4 4 0 0 1-4-4V6a1 1 0 0 1 1-1h3V3Zm-2 4v1a2 2 0 0 0 2 2V7H5Zm14 0h-2v3a2 2 0 0 0 2-2V7Z'/%3E%3C/svg%3E");
  /* Стрелка «Как в игре»: своя, с отступом справа как у текста слева (у нативной отступа нет) */
  --gm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --gm-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23969da0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.gm-page [data-tier="common"] { --gm-tier: var(--gm-common); }
.gm-page [data-tier="uncommon"] { --gm-tier: var(--gm-uncommon); }
.gm-page [data-tier="rare"] { --gm-tier: var(--gm-rare); }
.gm-page [data-tier="epic"] { --gm-tier: var(--gm-epic); }
.gm-page [data-tier="legendary"] { --gm-tier: var(--gm-legendary); }
.gm-page [data-tier="none"] { --gm-tier: var(--color4); }

/* ───────────────────────────── каркас страницы ───────────────────────────── */

.gm-page {
  grid-template-columns: minmax(0, 1fr);
  color-scheme: dark;
  /* Ширина колонки зависит от сайдбаров и экрана, поэтому адаптив — по ширине
     самой страницы (container queries), а не окна браузера. */
  container: gm / inline-size;
}
.gm-page > * { min-width: 0; }

.gm-block {
  background-color: var(--color1);
  border-radius: var(--borderradius);
  padding: 20px;
}
.gm-section { display: grid; gap: 16px; align-content: start; }

.gm-h1 {
  margin: 0;
  padding: 0;
  color: var(--color_white);
  font-size: clamp(24px, 4.4vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.gm-h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 0 0 12px;
  color: var(--color_white);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid var(--color2);
}
.gm-h2__count {
  padding: 1px 9px;
  color: var(--color_gray);
  font-size: 13px;
  font-weight: 600;
  background: var(--color2);
  border-radius: 999px;
}
.gm-lead {
  max-width: 720px;
  margin: 0;
  color: var(--color_lightgray);
  font-size: 15px;
  line-height: 1.55;
}
.gm-counter { margin: 0; color: var(--color_gray); font-size: 13px; }
.gm-more { margin: 0; font-size: 15px; font-weight: 600; }
.gm-note { margin: 8px 0 0; color: var(--color_gray); font-size: 13px; }

/* Скрыто визуально, но читается экранным диктором */
.gm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Кнопки и чипы: сброс шрифта (в теме у button нет своего) и видимый фокус */
.gm-btn, .gm-tab, .gm-chipbtn, .gm-sort, .gm-linkbtn { font: inherit; cursor: pointer; }
.gm-btn:focus-visible,
.gm-tab:focus-visible,
.gm-chipbtn:focus-visible,
.gm-sort:focus-visible,
.gm-linkbtn:focus-visible,
.gm-card__link:focus-visible,
.gm-pub__link:focus-visible,
.gm-tile__link:focus-visible,
.gm-pn__link:focus-visible,
.gm-rarest:focus-visible,
.gm-ach__name a:focus-visible,
.gm-about a:focus-visible,
.gm-gamecard:focus-visible,
.gm-guidecard__title a:focus-visible,
.gm-crumbs a:focus-visible {
  outline: 2px solid var(--color_white);
  outline-offset: 2px;
}

.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  color: var(--color_white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--maincolor);
  border: 0;
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease;
}
.gm-btn:hover { text-decoration: none; background: var(--maincolordark); }

.gm-linkbtn {
  padding: 0;
  color: var(--maincolor);
  font-size: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
}
.gm-linkbtn:hover { color: var(--color_white); }

/* ───────────────────────────── хлебные крошки ───────────────────────────── */

.gm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  color: var(--color_gray);
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
}
.gm-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.gm-crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--color4); }
.gm-crumbs a { color: var(--color_lightgray); }
.gm-crumbs a:hover { color: var(--color_white); }

/* ─────────────────────────────── шапка (hero) ─────────────────────────────── */

.gm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color2);
  border-radius: var(--borderradius);
}
/* Размытый фон: вынесен за края, чтобы размытие не светлело у границ */
.gm-hero__bg {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: -2;
  width: calc(100% + 28px);
  max-width: none;
  height: calc(100% + 28px);
  object-fit: cover;
  filter: blur(9px) saturate(1.25) brightness(0.9);
}
/* Затемнение под яркость фона (правка Эмиля: текст сливался со светлым фоном). Непрозрачность
   подбирает HeroShade по яркости картинки под текстом; без JS — значение по умолчанию. */
.gm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--color1);
  opacity: var(--gm-shade, 0.4);
  transition: opacity 0.35s ease;
}
/* Градиент в цвет страницы: шапка плавно переходит в блоки ниже */
.gm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(22, 27, 29, 0.05) 0%, rgba(22, 27, 29, 0.62) 62%, var(--color1) 100%),
    linear-gradient(90deg, rgba(22, 27, 29, 0.55), transparent 75%);
}
.gm-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 250px;
  padding: 28px 24px 24px;
}
.gm-hero__cover {
  flex: 0 0 clamp(220px, 32%, 320px);
  aspect-ratio: 460 / 215;
  overflow: hidden;
  background: var(--color3);
  border-radius: var(--borderradius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.gm-hero__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Вертикальный постер 2:3 (правка Эмиля): занимает высоту шапки, а не пустую полосу под горизонтальной обложкой */
.gm-hero__cover--poster { flex-basis: clamp(150px, 24%, 210px); aspect-ratio: 2 / 3; }
.gm-hero__icon { flex: none; }
.gm-hero__info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
/* «Голова» (крошки, название, дата и платформы) и сведения (компании, жанры, магазины, описание) */
.gm-hero__head,
.gm-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.gm-hero .gm-h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65); }
/* Мелкий текст на фоне-картинке: тень страхует контраст там, где фон пёстрый */
.gm-hero .gm-crumbs, .gm-hero__aliases, .gm-hero .gm-chip__label { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.gm-hero__aliases { margin: -4px 0 0; color: var(--color_lightgray); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.gm-hero__desc {
  max-width: 760px;
  margin: 0;
  color: #dfe4e6;
  font-size: 15px;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Страница достижения: свечение цвета редкости за иконкой; слева иконка и название, справа карточка игры */
.gm-hero--achievement .gm-hero__inner {
  align-items: center;
  gap: 24px;
  min-height: 0;
  padding: 22px 24px;
  background: radial-gradient(
    420px 240px at 100px 50%,
    color-mix(in srgb, var(--gm-tier) 26%, transparent),
    transparent 72%
  );
}
.gm-hero--achievement .gm-hero__info { gap: 14px; }
/* Название и оригинальное название — одна группа: в узкой раскладке они стоят рядом с иконкой */
.gm-hero__title { display: grid; gap: 8px; min-width: 0; width: 100%; }
.gm-hero__title .gm-hero__aliases { margin: 0; }

/* Карточка «Игра»: вертикальный постер, название, разработчик и год, число достижений */
.gm-gamecard {
  display: flex;
  flex: 0 0 clamp(250px, 30%, 310px);
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  padding: 10px;
  color: inherit;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gm-gamecard:hover { text-decoration: none; background: rgba(0, 0, 0, 0.62); border-color: rgba(255, 255, 255, 0.32); }
.gm-gamecard__poster {
  display: block;
  flex: none;
  width: 92px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--color3);
  border-radius: var(--borderradius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.gm-gamecard__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-gamecard__nopic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color4);
  font-size: 40px;
  font-weight: 800;
}
.gm-gamecard__body { display: grid; flex: 1 1 auto; align-content: center; gap: 4px; min-width: 0; }
.gm-gamecard__label { color: var(--color_gray); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; }
.gm-gamecard__title { color: var(--color_white); font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.gm-gamecard:hover .gm-gamecard__title { color: var(--maincolor); }
.gm-gamecard__meta { color: var(--color_lightgray); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.gm-gamecard__count { color: var(--color_gray); font-size: 13px; line-height: 1.35; }

/* ───────────────────── чипы, плашки платформ, значки ───────────────────── */

.gm-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; }
/* Чип: высота задана, текст по центру — отступы сверху и снизу равные (у baseline они расходились) */
.gm-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 11px;
  color: #e6e9ea;
  font-size: 13px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--borderradius);
}
.gm-chip__label { color: var(--color_gray); }
.gm-chip__icon { color: var(--color_gray); font-size: 14px; }
.gm-chip__icon:before { margin: 0; }
.gm-chip--genre { color: #ffd9de; background: color-mix(in srgb, var(--t-accent, #f11a36) 14%, transparent); border-color: color-mix(in srgb, var(--t-accent, #f11a36) 35%, transparent); }
.gm-chip--platform { gap: 6px; font-weight: 600; }
/* Своя дата выхода на платформе — после подписи, приглушённо и без жирного. */
.gm-chip__date { color: var(--color_gray); font-weight: 400; white-space: nowrap; }
.gm-chip__date::before { content: "·"; margin-right: 6px; opacity: 0.7; }
/* Компании: обычный поток текста, а не flex — имена идут сразу за подписью и переносятся по словам
   (иначе длинный список уходил целиком на новую строку, оставляя подпись одну) */
.gm-chip--company { display: inline-block; line-height: 20px; padding-top: 3px; padding-bottom: 3px; }
.gm-chip--company .gm-chip__label { margin-right: 2px; }
/* Имя компании целиком: переносится между компаниями, а не посреди названия */
.gm-chip--company .gm-chip__links a { white-space: nowrap; }
.gm-chip__links a { color: var(--color_white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.gm-chip__links a:hover { color: var(--maincolor); text-decoration-color: currentColor; }

/* Иконки платформ (SVG дизайна v6.0 и глифы шрифта темы) — одного размера */
.gm-picon { display: block; flex: none; width: 16px; height: 16px; color: var(--color_white); }
.gm-picon--glyph { width: auto; height: auto; font-size: 16px; line-height: 16px; }
.gm-picon--glyph:before { margin: 0; }

/* Магазины: плашки-ссылки */
.gm-stores { gap: 8px; }
.gm-store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 12px;
  color: var(--color_white);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  background: var(--color3);
  border: 1px solid var(--color4);
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gm-store:hover { text-decoration: none; background: var(--color4); border-color: var(--color_gray); }

.gm-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  color: var(--color_white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--color3);
  border: 1px solid var(--color4);
  border-radius: var(--borderradius);
}
.gm-platform i:before { margin: 0 2px 0 0; }
a.gm-platform:hover { text-decoration: none; background: var(--color4); }

.gm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--borderradius);
}
.gm-badge i:before { margin: 0; font-size: 12px; }
.gm-badge--hidden { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.38); }
.gm-badge--guide { color: #86efac; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); }
.gm-badge--platinum { color: #e5e7eb; background: rgba(229, 231, 235, 0.14); border-color: rgba(229, 231, 235, 0.35); }
.gm-badge--gold { color: #fbbf24; background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.38); }
.gm-badge--silver { color: #cbd5e1; background: rgba(203, 213, 225, 0.12); border-color: rgba(203, 213, 225, 0.32); }
.gm-badge--bronze { color: #fb923c; background: rgba(251, 146, 60, 0.14); border-color: rgba(251, 146, 60, 0.38); }
.gm-badge--points { color: #93c5fd; background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.38); }
.gm-badge--dlc { color: #f0abfc; background: rgba(217, 70, 239, 0.12); border-color: rgba(217, 70, 239, 0.34); }
/* Итог списка: трофеи PlayStation по типам, сумма геймерскора Xbox */
.gm-sum { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; }

/* ───────────────────────── редкость и иконка достижения ───────────────────────── */

.gm-rarity { display: grid; gap: 5px; min-width: 0; }
.gm-rarity__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gm-rarity__pct {
  color: var(--gm-tier);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gm-rarity__tier { color: var(--color_gray); font-size: 12px; text-align: right; }
.gm-rarity__track { height: 6px; overflow: hidden; background: var(--color3); border-radius: 999px; }
.gm-rarity__fill {
  display: block;
  height: 100%;
  background: var(--gm-tier);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gm-tier) 55%, #000), var(--gm-tier));
  border-radius: inherit;
}
.gm-rarity[data-tier="legendary"] .gm-rarity__fill { box-shadow: 0 0 8px var(--gm-tier); }
.gm-rarity--lg { gap: 8px; }
.gm-rarity--lg .gm-rarity__pct { font-size: 36px; }
.gm-rarity--lg .gm-rarity__tier { font-size: 14px; }
.gm-rarity--lg .gm-rarity__track { height: 10px; }
.gm-rarity--none { color: var(--color_gray); font-size: 12px; font-style: italic; }

.gm-icon {
  --s: 78px;
  position: relative;
  /* Блочный flex, не inline-flex: строчная иконка в блочной ссылке добавляла
     под собой место для выносных элементов строки, и высота «съезжала» */
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  color: var(--color_gray);
  background: var(--color3);
  border-radius: var(--borderradius);
  box-shadow: 0 0 0 2px var(--gm-tier, var(--color4));
}
.gm-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.gm-icon--sm { --s: 48px; border-radius: var(--borderradius); }
.gm-icon--lg { --s: 128px; border-radius: var(--borderradius); box-shadow: 0 0 0 3px var(--gm-tier, var(--color4)); }
.gm-icon[data-tier="legendary"] {
  box-shadow: 0 0 0 2px var(--gm-tier), 0 0 10px 0 color-mix(in srgb, var(--gm-tier) 60%, transparent);
}
.gm-icon--lg[data-tier="legendary"] {
  box-shadow: 0 0 0 3px var(--gm-tier), 0 0 36px 4px color-mix(in srgb, var(--gm-tier) 45%, transparent);
}

/* ───────────────────────── статистика игры ───────────────────────── */

.gm-stats { display: grid; gap: 12px; }
.gm-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gm-stat { min-width: 0; padding: 14px 16px; background: var(--color2); border-radius: var(--borderradius); }
.gm-stat__value {
  color: var(--color_white);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gm-stat__label { margin-top: 4px; color: var(--color_gray); font-size: 13px; line-height: 1.3; }

.gm-rarest {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(130px, 230px);
  align-items: center;
  gap: 8px 16px;
  padding: 12px;
  overflow: hidden;
  color: inherit;
  background: var(--color2);
  border: 1px solid var(--gm-tier);
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease;
}
.gm-rarest::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gm-tier) 14%, transparent), transparent 55%);
}
.gm-rarest > * { position: relative; }
.gm-rarest:hover { text-decoration: none; background: var(--color3); }
.gm-rarest__text { display: grid; gap: 2px; min-width: 0; }
.gm-rarest__label { color: var(--gm-tier); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.gm-rarest__name { color: var(--color_white); font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }

/* ───────────────────── список достижений (клиентский) ───────────────────── */

.gm-list { display: grid; gap: 20px; min-width: 0; }

.gm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-tab, .gm-chipbtn, .gm-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  color: var(--color_lightgray);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  background: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gm-tab { font-weight: 600; }
.gm-tab:hover, .gm-chipbtn:hover:not(:disabled), a.gm-sort:hover { color: var(--color_white); text-decoration: none; background: var(--color3); }
.gm-tab[aria-pressed="true"],
.gm-chipbtn[aria-pressed="true"],
.gm-sort[aria-current="page"] {
  color: var(--color_white);
  background: var(--maincolor);
  border-color: var(--maincolor);
}
.gm-chipbtn:disabled { cursor: not-allowed; opacity: 0.45; }
.gm-tab__count, .gm-chipbtn__count { font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; }

.gm-controls { display: grid; gap: 20px; }
.gm-tools { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; }

.gm-field { min-width: 0; }
.gm-field input,
.gm-field select,
.gm-search input[type="search"] {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--color_white);
  font: inherit;
  font-size: 14px;
  background-color: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gm-field input[type="search"],
.gm-search input[type="search"] {
  padding-left: 38px;
  background-image: var(--gm-search-icon);
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}
.gm-field select {
  padding-right: 36px;
  background-image: var(--gm-select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gm-field input::placeholder, .gm-search input::placeholder { color: var(--color_gray); font-size: 14px; }
.gm-field input:focus-visible,
.gm-field select:focus-visible,
.gm-search input:focus-visible {
  border-color: var(--maincolor);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent, #f11a36) 30%, transparent);
}

.gm-ach-list { display: grid; gap: 8px; margin: 0; padding: 0; }
.gm-ach {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(130px, 190px);
  align-items: center;
  gap: 6px 16px;
  padding: 12px;
  background: var(--color2);
  border: 1px solid transparent;
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 106px;
}
.gm-ach:hover { background: #262e32; border-color: var(--color3); }
.gm-ach__icon { display: block; align-self: start; }
.gm-ach__icon:hover { text-decoration: none; }
.gm-ach__main { min-width: 0; }
.gm-ach__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gm-ach__name { margin: 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.gm-ach__name a { color: var(--color_white); }
.gm-ach__name a:hover { color: var(--maincolor); text-decoration: none; }
.gm-ach__en { margin-top: 1px; color: var(--color_gray); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.gm-ach__rarity { min-width: 0; }

.gm-desc { margin: 4px 0 0; color: var(--color_lightgray); font-size: 14px; line-height: 1.5; text-indent: 0; overflow-wrap: anywhere; }
.gm-desc--lg { margin-top: 10px; font-size: 17px; line-height: 1.6; }
.gm-desc--muted { color: var(--color_gray); font-style: italic; }

/* Спойлер описания скрытого достижения: нативный <details>, работает без JS */

.gm-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 32px 16px;
  text-align: center;
  background: var(--color2);
  border: 1px dashed var(--color4);
  border-radius: var(--borderradius);
}
.gm-block.gm-empty { background: var(--color1); }
.gm-empty__title { margin: 0; color: var(--color_white); font-size: 18px; font-weight: 700; }
.gm-empty__text { margin: 0; max-width: 520px; color: var(--color_lightgray); font-size: 14px; line-height: 1.55; }
.gm-empty .gm-btn { margin-top: 6px; }

.gm-source { margin: 0; color: var(--color_gray); font-size: 12px; line-height: 1.5; }

/* ───────────────────────────── каталог игр ───────────────────────────── */

.gm-catalog-head { display: grid; gap: 14px; }
.gm-search { display: flex; gap: 10px; }
.gm-search input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; font-size: 15px; }
.gm-search .gm-btn { height: 46px; }
.gm-sorts { display: flex; flex-wrap: wrap; gap: 8px; }

.gm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.gm-card { min-width: 0; }
.gm-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  background: var(--color1);
  border: 1px solid var(--color2);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease;
}
/* Карточка на месте (правка Эмиля: без подъёма) — увеличивается только картинка внутри */
.gm-card__link:hover { text-decoration: none; border-color: var(--maincolor); }
.gm-card__cover { aspect-ratio: 460 / 215; overflow: hidden; background: var(--color2); }
.gm-card__cover img { display: block; width: 100%; height: 100%; transition: transform 0.4s ease; }
.gm-card__link:hover .gm-card__cover img { transform: scale(1.07); }
.gm-card__nocover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color4);
  font-size: 64px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color2), var(--color3));
}
.gm-card__body { display: grid; flex: 1 1 auto; align-content: start; gap: 4px; padding: 12px 14px 14px; }
.gm-card__title {
  display: -webkit-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--color_white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  border: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gm-card__link:hover .gm-card__title { color: var(--maincolor); }
.gm-card__meta { color: var(--color_lightgray); font-size: 13px; }
.gm-card__date { color: var(--color_gray); font-size: 12px; }
.gm-card__platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gm-card__platforms .gm-platform { padding: 2px 8px; font-size: 12px; }

/* ──────────────────────────── плитки статей ──────────────────────────── */

.gm-pubs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.gm-pub { min-width: 0; }
.gm-pub__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding-bottom: 12px;
  overflow: hidden;
  color: inherit;
  background: var(--color1);
  border: 1px solid var(--color2);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease;
}
.gm-pub__link:hover { text-decoration: none; border-color: var(--color4); }
.gm-pub__image { aspect-ratio: 100 / 55; overflow: hidden; background: var(--color2); }
.gm-pub__image img { display: block; width: 100%; height: 100%; }
.gm-pub__title {
  display: -webkit-box;
  margin: 0 12px;
  overflow: hidden;
  color: var(--color_white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.gm-pub__link:hover .gm-pub__title { text-decoration: underline; }
.gm-pub__meta { margin: auto 12px 0; color: var(--color_gray); font-size: 12px; }

/* ─────────────────────────── страница достижения ─────────────────────────── */

/* Описание и редкость — один компактный блок: текст сверху, под ним полоса редкости в одну строку */
.gm-detail { display: grid; gap: 12px; padding: 16px 20px; }
.gm-detail__about { min-width: 0; }
.gm-detail .gm-h2 { padding-bottom: 8px; font-size: clamp(17px, 2.6vw, 20px); }
.gm-detail .gm-desc--lg { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.gm-detail .gm-note { margin-top: 4px; }
.gm-detail__rarity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
  padding: 10px 16px;
  background: var(--color2);
  border: 1px solid var(--gm-tier);
  border-radius: var(--borderradius);
}
.gm-detail__label {
  flex: none;
  margin: 0;
  padding: 0;
  color: var(--color_gray);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 0;
}
.gm-detail__meter { flex: 1 1 260px; max-width: 460px; min-width: 0; }
.gm-detail .gm-rarity--lg { gap: 6px; }
.gm-detail .gm-rarity--lg .gm-rarity__pct { font-size: 28px; }
.gm-detail .gm-rarity--lg .gm-rarity__track { height: 8px; }
.gm-detail__text { flex: 1 1 180px; margin: 0; color: var(--color_lightgray); font-size: 15px; line-height: 1.4; }
.gm-detail__text strong { color: var(--color_white); }

.gm-guide .gm-h2 { margin-bottom: 0; }
.gm-guide { gap: 16px; }

/* Статья-гайд в «Как получить»: картинка, заголовок, краткое описание и кнопка */
.gm-guidecards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gm-guidecard {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease;
}
.gm-guidecard:hover { border-color: var(--color4); }
.gm-guidecard--plain { grid-template-columns: minmax(0, 1fr); }
.gm-guidecard__image { position: relative; display: block; min-height: 150px; overflow: hidden; background: var(--color3); }
.gm-guidecard__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gm-guidecard:hover .gm-guidecard__image img { transform: scale(1.05); }
.gm-guidecard__body { display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; padding: 14px 16px 16px; }
.gm-guidecard__meta { color: #86efac; font-size: 12px; font-weight: 600; line-height: 1.4; }
.gm-guidecard__title { margin: 0; padding: 0; font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; border: 0; }
.gm-guidecard__title a { color: var(--color_white); }
.gm-guidecard__title a:hover { color: var(--maincolor); text-decoration: none; }
.gm-guidecard__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color_lightgray);
  font-size: 14px;
  line-height: 1.55;
  text-indent: 0;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.gm-guidecard__btn { margin-top: 4px; }
.gm-placeholder {
  padding: 22px 18px;
  text-align: center;
  background: var(--color2);
  border: 1px dashed var(--color4);
  border-radius: var(--borderradius);
}
.gm-placeholder__title { margin: 0 0 6px; color: var(--color_white); font-size: 17px; font-weight: 700; text-indent: 0 !important; }
.gm-placeholder__text { margin: 0; color: var(--color_lightgray); font-size: 15px; line-height: 1.55; text-indent: 0 !important; }

.gm-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm-pn__link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
  color: inherit;
  background: var(--color1);
  border: 1px solid var(--color2);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease;
}
a.gm-pn__link:hover { text-decoration: none; border-color: var(--maincolor); }
.gm-pn__link--next { text-align: right; }
.gm-pn__link--empty { visibility: hidden; }
.gm-pn__dir { color: var(--color_gray); font-size: 12px; }
.gm-pn__name { color: var(--color_white); font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.gm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.gm-tile { min-width: 0; }
.gm-tile__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 12px;
  color: inherit;
  background: var(--color2);
  border: 1px solid transparent;
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gm-tile__link:hover { text-decoration: none; background: #262e32; border-color: var(--color4); }
.gm-tile__text { display: grid; flex: 1 1 auto; gap: 6px; min-width: 0; }
.gm-tile__name { color: var(--color_white); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gm-tile__guide { color: #86efac; font-size: 12px; }

/* ──────────────────── карточка «Об игре» под текстом статьи ──────────────────── */

/* Обёртка — контейнер: карточка перестраивается по своей ширине, а не окна */
.gm-about-box { container: gm-about / inline-size; min-width: 0; }
.gm-about {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px;
  text-indent: 0;
  background: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
  transition: border-color 0.2s ease;
}
.gm-about:hover { border-color: var(--color4); }
.gm-about__cover {
  flex: 0 0 clamp(120px, 34%, 190px);
  aspect-ratio: 460 / 215;
  overflow: hidden;
  background: var(--color3);
  border-radius: var(--borderradius);
}
.gm-about__cover img { display: block; width: 100%; height: 100%; max-height: none; }
.gm-about__body { display: grid; flex: 1 1 auto; gap: 6px; justify-items: start; min-width: 0; }
.gm-about__label { color: var(--color_gray); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.gm-about__title { font-size: clamp(17px, 3vw, 21px); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.gm-about__title a { color: var(--color_white); text-decoration: none; }
/* Растянутая ссылка: кликабельна вся карточка, а чипы и кнопка лежат поверх */
.gm-about__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--borderradius); }
.gm-about__title a:hover { color: var(--maincolor); }
.gm-about__cta {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 6px 14px;
  line-height: 1.35;
  color: #ff8794;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: color-mix(in srgb, var(--t-accent, #f11a36) 15%, transparent);
  border-radius: var(--borderradius);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gm-about__cta:hover { color: var(--t-accent-contrast, #fff); text-decoration: none; background: var(--maincolor); }
.gm-about__more { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.gm-about__more-label { color: var(--color_gray); }
.gm-about__chip { padding: 2px 10px; color: var(--color_white); text-decoration: none; background: var(--color3); border-radius: 999px; }
.gm-about__chip:hover { text-decoration: none; background: var(--color4); }

/* ─────────────── ссылки на игры и достижения в тексте статей ───────────────
 * Ядро ставит <a class="wl-game-link"> / <a class="wl-ach-link"> на первое упоминание
 * игры или достижения — помеченное маркером или найденное в тексте; маркер со ссылки
 * снимается (ссылка сама выделяет название), поэтому внутри ссылки только текст. */

a.wl-game-link, a.wl-ach-link {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
a.wl-game-link:hover, a.wl-ach-link:hover { text-decoration-style: solid; }
a.wl-game-link:focus-visible, a.wl-ach-link:focus-visible {
  outline: 2px solid var(--color_white);
  outline-offset: 2px;
  border-radius: var(--borderradius);
}

/* Кубок после названия достижения */
a.wl-ach-link::after {
  content: "";
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.35em;
  vertical-align: -0.06em;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: var(--gm-trophy) center / contain no-repeat;
  mask: var(--gm-trophy) center / contain no-repeat;
  transition: opacity 0.15s ease;
}
a.wl-ach-link:hover::after { opacity: 1; }
h2 a.wl-ach-link, h3 a.wl-ach-link, h4 a.wl-ach-link,
h2 a.wl-game-link, h3 a.wl-game-link, h4 a.wl-game-link { color: inherit; }
h2 a.wl-ach-link:hover, h3 a.wl-ach-link:hover, h4 a.wl-ach-link:hover,
h2 a.wl-game-link:hover, h3 a.wl-game-link:hover, h4 a.wl-game-link:hover { color: var(--maincolor); }

/* ─────────────── трейлеры и скриншоты, системные требования ───────────────
 * Слайдер — общий со статьями (styles/article-media.css, js/slider.js). */

/* Кадр скруглён и снизу (правка Эмиля): под ним подпись того же цвета, что и блок, — без этого низ кадра прямой */
.gm-media .wl-slide-media { border-radius: var(--borderradius); }
.gm-media .wl-slide-caption { padding-bottom: 0; }

.gm-req__os {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color_lightgray);
  font-size: 14px;
  font-weight: 600;
}
/* «Минимальные» и «Рекомендуемые» рядом; на узкой странице — друг под другом */
.gm-req__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 32px; }
.gm-req__cols[hidden] { display: none; }
.gm-req__title {
  margin: 0 0 10px;
  color: var(--color_white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gm-req__list { display: grid; margin: 0; padding: 0; list-style: none; }
.gm-req__row {
  display: grid;
  grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
  gap: 2px 14px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.45;
  border-bottom: 1px solid var(--color2);
}
.gm-req__row:first-child { padding-top: 0; }
.gm-req__row:last-child { border-bottom: 0; }
/* Строка без подписи («64-разрядные процессор и операционная система») — во всю ширину */
.gm-req__row--note { grid-template-columns: minmax(0, 1fr); }
.gm-req__label { color: var(--color_gray); }
.gm-req__value { color: #e6e9ea; overflow-wrap: anywhere; }

/* ──────────────── вкладки страницы игры (правка Эмиля, как на landofgames.ru) ────────────────
 * Строка ссылок внизу шапки: «Об игре», «Новости», «Гайды»… Открытая — белая с полосой цвета сайта; число статей —
 * верхним индексом. На узком экране строка прокручивается вбок (components/GameTabsNav.tsx подкручивает к открытой).
 * Вкладка «Карта» — блок карт maps.wol.su, его стили — game-maps.css. */

.gm-nav { position: relative; padding: 0 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gm-nav__list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gm-nav__list::-webkit-scrollbar { display: none; }
.gm-nav__link {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 10px 13px;
  color: var(--color_lightgray);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease;
}
.gm-nav__link:hover { color: var(--color_white); text-decoration: none; }
.gm-nav__link[aria-current="page"] { color: var(--color_white); }
.gm-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  background: var(--maincolor);
  border-radius: 3px 3px 0 0;
}
.gm-nav__link:focus-visible { outline: 2px solid var(--color_white); outline-offset: -3px; }
.gm-nav__count { top: -0.35em; font-size: 11px; font-weight: 600; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* Переход между вкладками без перезагрузки (правка Эмиля): полоса ожидания у нажатой вкладки и затухание старого
 * содержимого — общие правила вкладок игры и профиля, tab-switch.css. .gm-tab-body — обёртка содержимого вкладки
 * (views/GameLayoutView.tsx): display: contents, блоки остаются в сетке страницы. */
.gm-tab-body { display: contents; }

/* ───────────── «Наш обзор» на вкладке «Об игре» (правка Эмиля: оценка и ссылка на обзор) ─────────────
 * Балл — кольцо как у оценки на странице обзора: доля окружности = балл из 10. */

.gm-review { display: flex; gap: 18px; align-items: center; }
.gm-review__score {
  position: relative;
  display: grid;
  flex: none;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--maincolor) var(--gm-score, 0%), rgba(255, 255, 255, 0.1) 0);
}
.gm-review__score::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--color1);
}
.gm-review__score span {
  position: relative;
  color: var(--color_white);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.gm-review__body { display: grid; gap: 6px; min-width: 0; }
.gm-review__label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
  color: var(--color_lightgray);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gm-review__label time { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.8; }
.gm-review__title {
  color: var(--color_white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.gm-review__summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color_lightgray);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.gm-review__more { justify-self: start; font-size: 14px; font-weight: 700; }
@container gm (max-width: 480px) {
  .gm-review { gap: 14px; align-items: flex-start; }
  .gm-review__score { width: 60px; height: 60px; }
  .gm-review__score::before { inset: 5px; }
  .gm-review__score span { font-size: 19px; }
  .gm-review__title { font-size: 16px; }
}

/* ───────────────────────────── адаптив ─────────────────────────────
 * Контейнер gm — сама страница (.gm-page): ширину ей задают сайдбары и окно. */

@media (max-width: 768px) {
  .gm-block { padding: 15px; }
}

/* Достижение: иконка с названием, а карточка игры — отдельной строкой под ними (рядом её места не хватает) */
@container gm (max-width: 820px) {
  .gm-hero--achievement .gm-hero__inner { flex-wrap: wrap; gap: 16px 20px; padding: 20px 16px; }
  /* Иконка и сведения занимают строку целиком (100% минус иконка и зазор), поэтому карточка переносится вниз */
  .gm-hero--achievement .gm-hero__info { flex: 1 1 calc(100% - 150px); }
  .gm-hero--achievement .gm-gamecard { flex: 0 1 380px; }
}

@container gm (max-width: 760px) {
  .gm-hero__cover { flex-basis: 240px; }
  .gm-hero__inner { padding: 20px 16px; }
  /* Средние и узкие экраны (правка Эмиля): рядом с постером — только «голова», а компании, жанры,
     магазины и описание — под постером во всю ширину, а не узкой колонкой чипов сбоку */
  .gm-hero__inner.gm-hero__inner--poster {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas: "cover head" "meta meta";
    align-items: start;
    gap: 16px 18px;
  }
  .gm-hero__inner--poster .gm-hero__cover--poster { grid-area: cover; width: 100%; }
  .gm-hero__inner--poster .gm-hero__info { display: contents; }
  .gm-hero__inner--poster .gm-hero__head { grid-area: head; }
  .gm-hero__inner--poster .gm-hero__meta { grid-area: meta; }
}

@container gm (max-width: 640px) {
  .gm-hero__inner { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .gm-hero__cover { flex: none; width: 100%; max-width: 460px; }
  .gm-hero__inner.gm-hero__inner--poster { grid-template-columns: 120px minmax(0, 1fr); gap: 14px 16px; }
  /* Достижение на узком экране: крошки на всю ширину, затем иконка рядом с названием, плашки и карточка игры */
  .gm-hero--achievement .gm-hero__inner {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "crumbs crumbs" "icon title" "badges badges" "card card";
    align-items: start;
    gap: 14px 16px;
    background: radial-gradient(
      320px 200px at 60px 100px,
      color-mix(in srgb, var(--gm-tier) 26%, transparent),
      transparent 72%
    );
  }
  .gm-hero--achievement .gm-hero__info { display: contents; }
  .gm-hero--achievement .gm-crumbs { grid-area: crumbs; }
  .gm-hero--achievement .gm-hero__icon { grid-area: icon; }
  .gm-hero--achievement .gm-hero__title { grid-area: title; align-self: center; }
  .gm-hero--achievement .gm-platforms { grid-area: badges; }
  .gm-hero--achievement .gm-gamecard { grid-area: card; }
  .gm-hero--achievement .gm-icon--lg { --s: 88px; border-radius: var(--borderradius); }
}

@container gm (max-width: 620px) {
  .gm-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-ach { grid-template-columns: 78px minmax(0, 1fr); gap: 8px 12px; padding: 10px; }
  .gm-ach__rarity { grid-column: 1 / -1; }
}

/* Телефон: постер меньше, чипы плотнее — дата и платформы помещаются рядом с постером */
@container gm (max-width: 480px) {
  .gm-hero__inner.gm-hero__inner--poster { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 12px; }
  .gm-hero__head { gap: 8px; }
  .gm-hero__head .gm-h1 { font-size: 22px; }
  .gm-hero__head .gm-chips { gap: 5px; }
  .gm-hero__head .gm-chip { min-height: 26px; padding: 2px 8px; font-size: 12px; }
  .gm-stores { gap: 6px; }
  .gm-store { min-height: 28px; padding: 3px 10px; font-size: 12px; }
}

@container gm-about (max-width: 380px) {
  .gm-about { flex-direction: column; align-items: stretch; }
  .gm-about__cover { flex: none; width: 100%; }
}

@container gm (max-width: 540px) {
  .gm-stat { padding: 10px 12px; }
  .gm-tools { grid-template-columns: minmax(0, 1fr); }
  .gm-rarest { grid-template-columns: auto minmax(0, 1fr); }
  .gm-rarest__meter { grid-column: 1 / -1; }
  .gm-pn { grid-template-columns: minmax(0, 1fr); }
  .gm-pn__link--empty { display: none; }
  .gm-pn__link--next { text-align: left; }
  .gm-pubs { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .gm-guidecard { grid-template-columns: minmax(0, 1fr); }
  .gm-guidecard__image { min-height: 0; aspect-ratio: 16 / 9; }
  .gm-detail { padding: 14px; }
  .gm-detail__meter, .gm-detail__text { flex-basis: 100%; max-width: none; }
}

@container gm (max-width: 480px) {
  .gm-nav { padding: 0 6px; }
  .gm-nav__link { padding: 12px 9px 11px; font-size: 14px; }
  .gm-req__row { grid-template-columns: minmax(0, 1fr); }
  .gm-search { flex-wrap: wrap; }
  .gm-search input[type="search"] { flex-basis: 100%; }
  .gm-search .gm-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-card__link, .gm-card__cover img, .gm-hero::before, .gm-nav__link { transition: none; }
  .gm-card__link:hover .gm-card__cover img { transform: none; }
}