/* ==========================================
   Design System — all-mods.ru
   Все компоненты новой вёрстки. Префикс ds-.
   Подключать после tokens.css.
   ========================================== */

/* ==========================================
   RESET
   ========================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  /* Ровный цвет вместо фоновой картинки: не тянет 193 КБ, не даёт
     лагов с `fixed` на мобильных и не спорит с содержимым. */
  background-color: var(--ds-bg-body);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-body);
  font-size: var(--ds-font-size-base);
  line-height: 1.5;
}

a {
  color: var(--ds-text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; vertical-align: middle; }

ul, ol { list-style: none; margin: 0; padding: 0; }

/* ==========================================
   SCROLLBAR — единый стиль на всём сайте
   Одно правило на всё: тонкая полоса цветом --ds-bg-overlay
   на прозрачном треке (раньше так был оформлен только сайдбар).
   Компоненты, которым полоса мешает, прячут её своими
   правилами (scrollbar-width: none + ::-webkit-scrollbar).
   ========================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-bg-overlay) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ds-bg-overlay);
  border-radius: var(--ds-radius-sm);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ds-bg-overlay-hover); }

/* ==========================================
   LAYOUT — панель слева + контент
   ========================================== */
.ds-body {
  /* Оболочка целиком: сайдбар + контент. Горизонтальных отступов нет —
     панель прижата к левому краю окна и её фон идёт от верха до низа,
     как будто страница разделена на две части. Фон оболочки — цвет
     правой части (--ds-bg-content): панель перекрывает его своим, более
     светлым (--ds-bg-raised), и обе половины читаются как две области. */
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--ds-bg-content);
  min-height: 590px;
}

.ds-layout {
  display: flex;
  align-items: flex-start;
  /* Зазора нет: он задан левым отступом .ds-main, чтобы полоска сверху
     могла его перекрыть и состыковаться с панелью (см. .ds-header). */
  gap: 0;
  min-height: 590px;
}

.ds-main {
  /* Колонка контента прежней ширины и НЕ центрируется: идёт сразу за
     панелью, а свободное место остаётся справа. Центрирование ломало
     бы общий левый край со списком и с шапкой страницы.
     64px слева — удвоенный базовый зазор до панели (было 32px). */
  flex: 1;
  min-width: 0;
  max-width: var(--ds-content-max-width);
  padding: 0 var(--ds-space-6) var(--ds-space-5) calc(var(--ds-space-8) * 2);
}

/* ==========================================
   DS-SIDE — левая панель («я и сайт»)
   Логотип и профиль закреплены сверху, середина прокручивается,
   служебные ссылки стоят в конце прокрутки. Ширина прежняя
   (--ds-sidebar-width).
   ========================================== */
.ds-side {
  width: var(--ds-sidebar-width);
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  background: var(--ds-bg-raised);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 50;
}
.ds-side__top {
  flex: 0 0 auto;
  padding: var(--ds-space-4) var(--ds-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
.ds-side__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ds-space-4);
  display: flex;
  flex-direction: column;
}
/* Блоки середины (личные ссылки, навигация, избранное, служебные ссылки)
   отделяются линией с зазором 12px с каждой стороны. */
.ds-side__scroll > * + * {
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid #333;
}
.ds-side__logo {
  display: block;
  height: 56px;
  background: url(/logo_small.png) no-repeat left center;
  background-size: contain;
}
.ds-side__logo a { display: block; height: 100%; }
.ds-side__close { display: none; }
.ds-side-overlay { display: none; }

/* --- Профиль --- */
.ds-side-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Кружок 36px: разметка та же, что у автора карточки мода
   (.mod-card__avatar), здесь только размер. */
.ds-side-profile__avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: rgb(255 255 255 / 0.18);
}
.ds-side-profile__avatar .mod-card__avatar-fallback { font-size: 16px; }
.ds-side-profile__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--ds-text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-side-profile__name:hover { color: #fff; text-decoration: none; }
.ds-side-profile__more {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--ds-radius-sm);
  color: #bbb;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-side-profile__more:hover,
.ds-side-profile-menu--open .ds-side-profile__more { background: #2a2a2a; color: #fff; }
.ds-side-profile__more:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }

/* Меню «⋯» — оформление и поведение как у меню сортировки. */
.ds-side-profile-menu { position: relative; flex: 0 0 auto; }
.ds-side-profile-menu__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--ds-bg-surface);
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.ds-side-profile-menu--open .ds-side-profile-menu__menu,
.ds-side-profile-menu:not(.ds-side-profile-menu--js):focus-within .ds-side-profile-menu__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-side-profile-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  color: #ccc;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-side-profile-menu__link:hover,
.ds-side-profile-menu__link:focus-visible {
  background: #2f2f2f;
  color: var(--ds-text-white);
  text-decoration: none;
  outline: none;
}

/* Гость: карточка с текстом и кнопками. */
.ds-side-profile--guest {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  background: var(--ds-bg-overlay);
  border-radius: var(--ds-radius-md);
}
.ds-side-profile__guest-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-text-primary);
}
.ds-side-profile__auth { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-side-profile__auth-btn { display: block; width: 100%; text-align: center; }
.ds-side-profile__auth-btn--outline {
  background: transparent;
  border: 1px solid var(--ds-bg-accent);
  color: var(--ds-text-white);
}
.ds-side-profile__auth-btn--outline:hover {
  background: rgb(130 34 39 / 0.25);
  text-decoration: none;
}

/* --- Пункты навигации (личные ссылки и основная навигация) --- */
.ds-side-nav__list { display: flex; flex-direction: column; gap: 2px; }
.ds-side-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--ds-radius-sm);
  color: #bbb;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-side-nav__link:hover { background: #2a2a2a; color: #fff; text-decoration: none; }
.ds-side-nav__link:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: -2px; }
.ds-side-nav__icon { flex: 0 0 16px; width: 16px; font-size: 16px; text-align: center; color: inherit; }
.ds-side-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-side-nav__item--active .ds-side-nav__link {
  background: #2a2a2a;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ds-bg-accent);
  padding-left: 13px;
}

/* --- Бургер шапки (виден только на узких экранах) --- */
.ds-side-toggle {
  display: none;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-overlay);
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-lg);
  cursor: pointer;
}
.ds-side-toggle:hover { background: var(--ds-bg-accent); color: var(--ds-text-on-accent); }
.ds-side-toggle:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }

/* --- Шторка до 1024px --- */
@media (max-width: 1024px) {
  .ds-side-toggle { display: flex; }

  .ds-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    max-height: none;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--ds-transition);
    box-shadow: 0 0 40px rgb(0 0 0 / 0.6);
  }
  .ds-side--open { transform: translateX(0); }

  .ds-side__close {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ds-bg-overlay);
    color: var(--ds-text-primary);
    font-size: var(--ds-font-size-xl);
    line-height: 1;
    cursor: pointer;
  }
  .ds-side__close:hover { background: var(--ds-bg-accent); color: var(--ds-text-on-accent); }

  .ds-side-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgb(0 0 0 / 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-transition), visibility var(--ds-transition);
  }
  .ds-side-overlay--visible { opacity: 1; visibility: visible; }

  /* Пока шторка открыта, страница под ней не прокручивается. */
  html.ds-side-locked,
  body.ds-side-locked { overflow: hidden; }

  /* Панель уезжает за край, поэтому зазор до неё не нужен. */
  .ds-main { padding: var(--ds-space-4); }
}


/* ==========================================
   DS-HEADER — шапка («найти»)
   Одинакова на всех страницах: бургер и логотип (узкие экраны), кнопка
   «Игры» и единый поиск. Sticky, фон с прозрачностью и блюром, снизу
   линия. z-index выше карточек и меню сортировки.
   ========================================== */
.ds-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 var(--ds-space-4);
  background: rgb(30 30 30 / 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ds-border-dark);
}
.ds-header__logo {
  display: none;
  flex: 0 0 auto;
  width: 120px;
  height: 38px;
  background: url(/logo_small.png) no-repeat left center;
  background-size: contain;
}

/* --- Кнопка «Игры» --- */
.ds-games-menu { position: relative; flex: 0 0 auto; }
.ds-games-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  font-family: var(--ds-font-body);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition);
}
.ds-games-menu__button:hover,
.ds-games-menu--open .ds-games-menu__button { background: var(--ds-bg-accent-hover); }
.ds-games-menu__button:focus-visible { outline: 2px solid var(--ds-text-white); outline-offset: 2px; }
.ds-games-menu__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--ds-transition);
}
.ds-games-menu--open .ds-games-menu__caret { transform: rotate(180deg); }
.ds-games-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 720px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--ds-bg-surface);
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.ds-games-menu--open .ds-games-menu__panel,
.ds-games-menu:not(.ds-games-menu--js):focus-within .ds-games-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-games-menu:not(.ds-games-menu--js):focus-within .ds-games-menu__button {
  background: var(--ds-bg-accent-hover);
}
.ds-games-menu__scroll { max-height: 70vh; overflow-y: auto; padding: 4px; }
.ds-games-menu__section + .ds-games-menu__section { margin-top: var(--ds-space-3); }
.ds-games-menu__title {
  padding: 6px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
/* Обложки общие у «Избранных игр» и «Популярных игр»: один компонент,
   отличается только заголовок блока. */
.ds-games-menu__popular {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-2);
}
.ds-games-menu__game { display: block; border-radius: var(--ds-radius-sm); text-decoration: none; }
.ds-games-menu__game:hover { text-decoration: none; }
.ds-games-menu__game img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ds-bg-overlay);
  transition: opacity var(--ds-transition);
}
.ds-games-menu__game:hover img,
.ds-games-menu__game:focus-visible img { opacity: 0.8; }
.ds-games-menu__game:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }
.ds-games-menu__game-name {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-games-menu__game:hover .ds-games-menu__game-name { color: #fff; }
.ds-games-menu__all {
  columns: 3;
  column-gap: var(--ds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-games-menu__all li { break-inside: avoid; }
.ds-games-menu__all-link {
  display: block;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 13px;
  color: #bbb;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-games-menu__all-link:hover,
.ds-games-menu__all-link:focus-visible { background: #2f2f2f; color: #fff; text-decoration: none; outline: none; }
/* --- Единый поиск --- */
.ds-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}
.ds-search__form {
  display: flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid var(--ds-border-input);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-input);
  overflow: hidden;
  transition: border-color var(--ds-transition);
}
.ds-search__form:focus-within { border-color: #5a5a5a; }
.ds-search__field { position: relative; flex: 1 1 auto; min-width: 0; }
.ds-search__input {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ds-text-white);
  font-family: var(--ds-font-body);
  font-size: 14px;
  outline: none;
}
.ds-search__input::placeholder { color: var(--ds-text-muted); opacity: 1; }
.ds-search__submit {
  flex: 0 0 46px;
  width: 46px;
  border: 0;
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--ds-transition);
}
.ds-search__submit:hover { background: var(--ds-bg-accent-hover); }
.ds-search__submit:focus-visible { outline: 2px solid var(--ds-text-white); outline-offset: -2px; }
.ds-search__toggle,
.ds-search__close { display: none; }

/* Панель подсказок. */
.ds-search__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--ds-bg-surface);
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}
.ds-search__panel[hidden] { display: none; }
.ds-search__group + .ds-search__group { margin-top: 6px; border-top: 1px solid #333; padding-top: 6px; }
.ds-search__group-title {
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.ds-search__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--ds-transition);
}
.ds-search__option:hover,
.ds-search__option.is-active,
.ds-search__option:focus-visible { background: #2f2f2f; text-decoration: none; outline: none; }
.ds-search__option-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ds-bg-overlay);
}
.ds-search__option-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ds-bg-overlay);
}
.ds-search__option-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-search__option-title {
  font-size: 13px;
  color: var(--ds-text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-search__option-game { font-size: 11px; color: #888; }
.ds-search__option-count,
.ds-search__option-dl { flex: 0 0 auto; font-size: 11px; color: #888; }
.ds-search__empty { padding: 12px 10px; font-size: 13px; color: var(--ds-text-muted); }

/* --- Подвал: единственное место служебных ссылок --- */
.ds-footer {
  max-width: var(--ds-content-max-width);
  margin: 0 auto;
  padding: var(--ds-space-5) var(--ds-space-6);
  border-top: 1px solid var(--ds-border-dark);
}
.ds-footer__links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ds-footer__link { font-size: 12px; color: #777; }
.ds-footer__link:hover { color: #bbb; text-decoration: none; }
.ds-footer__copy { margin-top: var(--ds-space-2); font-size: 11px; color: #666; }

/* --- Узкие экраны: бургер, логотип, раскрывающийся поиск --- */
@media (max-width: 1024px) {
  .ds-header {
    flex-wrap: nowrap;
    padding: 8px var(--ds-space-3);
  }
  .ds-header__logo { display: block; }
  .ds-header__logo + .ds-games-menu { margin-left: auto; }

  .ds-search { flex: 0 0 auto; max-width: none; }
  .ds-search__form { display: none; }
  .ds-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #3a3a3a;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-overlay);
    color: var(--ds-text-primary);
    font-size: var(--ds-font-size-lg);
    cursor: pointer;
  }
  .ds-search__toggle:hover { background: var(--ds-bg-accent); color: var(--ds-text-on-accent); }
  .ds-search__toggle:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }

  /* Поиск раскрывается на всю ширину шапки. */
  .ds-header--search-open .ds-side-toggle,
  .ds-header--search-open .ds-header__logo,
  .ds-header--search-open .ds-games-menu { display: none; }
  .ds-header--search-open .ds-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .ds-header--search-open .ds-search__form { display: flex; flex: 1 1 auto; min-width: 0; }
  .ds-header--search-open .ds-search__toggle { display: none; }
  .ds-header--search-open .ds-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid #3a3a3a;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-overlay);
    color: var(--ds-text-primary);
    font-size: var(--ds-font-size-lg);
    cursor: pointer;
  }
  /* Подсказки на узких экранах — во всю ширину экрана: панель шире
     контейнера поиска на отступы .ds-main и шапки. */
  .ds-header--search-open .ds-search__panel {
    left: calc(-1 * var(--ds-space-4) - var(--ds-space-3));
    right: calc(-1 * var(--ds-space-4) - var(--ds-space-3));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Панель «Игры» прижимаем к шапке, а не к кнопке: на планшете
     шириной во весь экран она уезжала за левый край. Шапка sticky —
     она и служит контейнером для абсолютной панели. */
  .ds-games-menu { position: static; }
  .ds-games-menu__panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: 720px;
    margin: 0 auto;
  }
  /* Обложки не раздуваются: колонок столько, сколько влезает по 140px. */
  .ds-games-menu__popular {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .ds-games-menu__all { columns: 2; }
}

@media (max-width: 600px) {
  .ds-games-menu__all { columns: 1; }
}

/* prefers-reduced-motion: анимации выключаются. */
@media (prefers-reduced-motion: reduce) {
  .ds-side,
  .ds-side-overlay,
  .ds-games-menu__panel,
  .ds-games-menu__caret,
  .ds-side-profile-menu__menu,
  .ds-search__option { transition: none; }
}

/* ==========================================
   DS-CHIPS — компактный список игр
   ========================================== */
.ds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 6px var(--ds-space-3);
  background: var(--ds-bg-overlay);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-sm);
  line-height: 1.4;
}
.ds-chip:hover {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  text-decoration: none;
}

/* ==========================================
   DS-BREADCRUMBS
   ========================================== */
.ds-breadcrumbs {
  padding: var(--ds-space-2) 0;
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
  /* Фон не задаём: крошки — часть контента и живут на его фоне, иначе
     между полоской и текстом появлялась бы третья по светлоте полоса. */
  background: none;
}
/* Крошки лежат внутри .ds-main, поэтому ширину им задавать не нужно —
   горизонтальные отступы уже даёт оболочка .ds-body. */
.ds-breadcrumbs__inner {
  padding: 0;
}
.ds-breadcrumbs a { color: var(--ds-text-muted); }
.ds-breadcrumbs a:hover { color: var(--ds-text-link); }
.ds-breadcrumbs__sep { margin: 0 var(--ds-space-1); }
.ds-breadcrumbs__current { color: var(--ds-text-primary); }

/* ==========================================
   DS-SECTION — секция (заголовок + тело)
   ========================================== */
.ds-section {
  margin-bottom: var(--ds-space-8);
}
.ds-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* По бокам отступа нет: заголовок и ссылка «все …» выравниваются по краям
     контента — по ним же идут карточки и плашки под ним. */
  padding: var(--ds-space-3) 0;
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-xl);
  color: var(--ds-text-heading);
  text-transform: uppercase;
}
.ds-section__head--accent {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  font-size: var(--ds-font-size-lg);
  display: inline-flex;
  padding: 0 var(--ds-space-3);
  line-height: 1.8;
  border-radius: var(--ds-radius-sm);
  text-transform: none;
}
.ds-section__head-label { flex: 1; }
.ds-section__head-extra {
  font-family: var(--ds-font-body);
  font-size: var(--ds-font-size-sm);
  text-transform: none;
  color: var(--ds-text-muted);
  cursor: pointer;
  border-bottom: 1px dashed var(--ds-text-muted);
}
.ds-section__head-extra:hover { color: var(--ds-text-white); }
.ds-section__body { }

/* ==========================================
   DS-CARD-GRID — сетка карточек
   CSS Grid, а не flex: карточки встают в колонки одинаковой ширины,
   ряды начинаются на одной линии. Флекс с space-evenly раздавал
   остаток ширины по краям, и ряды «плыли» друг относительно друга.
   ========================================== */
.ds-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}
/* Блок во всю ширину сетки — реклама внутри списка карточек. */
.ds-card-grid__full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-card-grid--tight { gap: var(--ds-space-1); }
.ds-card-grid--wide   { gap: var(--ds-space-6); }

/* Витрина «Моды в центре внимания»: ровные обложки одинакового размера. */
.ds-card-grid--featured {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ds-space-3);
}

/* ==========================================
   DS-CARD — карточка (все варианты)
   ========================================== */
.ds-card {
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
  position: relative;
  overflow: hidden;
  transition: background var(--ds-transition);
}
/* Карточка отзывается на курсор: блок отделяется светлотой,
   без теней и обводок — в тон плоскому стилю. Комментарии и пустые
   заглушки живут по своим правилам. */
.ds-card:not(.ds-card--empty):not(.ds-card--comment):hover {
  background: var(--ds-bg-card-hover);
}
.ds-card__thumb {
  display: block;
  overflow: hidden;
  margin: 0;
  position: relative;
}
.ds-card__thumb img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform var(--ds-transition);
}
/* Лёгкий зум обложки: карточка «оживает» под курсором, картинка
   при этом не выходит за скруглённые углы (overflow: hidden выше). */
.ds-card:hover .ds-card__thumb img { transform: scale(1.03); }
.ds-card__body { }
/* Карточка — колонка: низ прижат к низу, поэтому у карточек
   одинаковой высоты метаданные стоят на одной линии, как бы
   ни различались длина заголовка и анонса. */
.ds-card--file,
.ds-card--news {
  display: flex;
  flex-direction: column;
}
.ds-card--file .ds-card__body,
.ds-card--news .ds-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ds-card__title {
  color: var(--ds-text-link);
  font-size: var(--ds-font-size-lg);
  font-weight: normal;
  display: block;
  overflow: hidden;
}
.ds-card__title:hover { text-decoration: none; color: var(--ds-text-white); }
.ds-card__text {
  font-size: var(--ds-font-size-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ds-text-primary);
  word-break: break-word;
}
.ds-card__meta {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
}
.ds-card__meta a { color: var(--ds-text-muted); }
/* Иконки в метаданных: одна ширина у всех, поэтому счётчики в соседних
   карточках встают на одну вертикаль, а не «плывут» от разной ширины
   глифа. Цвет — общий с текстом строки, кроме счётчиков внизу карточки. */
.ds-card__meta .fa,
.ds-card__meta .fas,
.ds-card__meta .far {
  width: 1.2em;
  text-align: center;
}
.ds-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  color: #ffd700;
  font-size: var(--ds-font-size-sm);
  padding: 2px 6px;
  opacity: 0.5;
}
.ds-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.9));
  color: #fff;
  font-family: var(--ds-font-heading);
}

/* -- news -- */
.ds-card--news .ds-card__thumb,
.ds-card--news .ds-card__thumb img { height: 160px; }
.ds-card--news .ds-card__overlay {
  padding: var(--ds-space-3);
}
.ds-card--news .ds-card__title { font-size: var(--ds-font-size-lg); color: #fff; }
/* Заголовок лежит поверх обложки: без обрезки длинное название
   вылезает за пределы картинки. */
.ds-card--news .ds-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- file -- */
.ds-card--file {
  line-height: 1.6;
}
.ds-card--file .ds-card__thumb,
.ds-card--file .ds-card__thumb img { height: 189px; max-height: 189px; }
.ds-card--file .ds-card__body {
  padding: var(--ds-space-3);
}
.ds-card--file .ds-card__title {
  padding: 5px 0 0;
  margin-bottom: var(--ds-space-1);
  font-size: 15px;
  /* Заголовок не длиннее двух строк: иначе карточки в ряду
     разъезжаются по высоте. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-card--file .ds-card__meta--date {
  padding: 5px 0;
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-card-meta);
  background: none;
}
.ds-card--file .ds-card__meta--date a { color: var(--ds-text-card-meta); }
/* Анонса в карточке мода нет — он повторял служебную шапку записи
   («Что добавляет: 1.) Данный аддон добавляет…») и только удлинял карточку.
   Правило .ds-card__text осталось для блогов и новостей, где анонс
   осмысленный. */
.ds-card--file .ds-card__text {
  padding-bottom: var(--ds-space-3);
  font-size: 13px;
  font-weight: 300;
  /* Анонс — не больше четырёх строк, чтобы карточка не тянулась
     вниз из-за одного длинного текста. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* margin сверху auto: полоса с просмотрами и скачиваниями прижата к низу
   карточки. Карточки в ряду одной высоты, и без этого у записи с коротким
   заголовком полоса висела бы посередине, а под ней оставалась пустота.
   Полоса темнее тела карточки и отделена нейтральным разделителем: низ
   карточки читается как подвал, а не как ещё один абзац. Оттенок здесь
   не используем — подвал отделяется перепадом светлоты. */
.ds-card--file .ds-card__meta--bottom {
  background: var(--ds-bg-card-foot);
  border-top: 1px solid var(--ds-card-line);
  color: var(--ds-text-card-meta);
  padding: 6px var(--ds-space-3);
  margin: auto calc(-1 * var(--ds-space-3)) calc(-1 * var(--ds-space-3));
}
.ds-card--file .ds-card__meta--bottom a { color: var(--ds-text-card-meta); }
.ds-card--file .ds-card__meta--bottom a:hover { color: var(--ds-text-link); }
/* Иконки счётчиков светлее подписи — строка читается, но красный акцент
   остаётся только у кнопок, а не растекается по сетке каталога. */
.ds-card--file .ds-card__meta--bottom .fa,
.ds-card--file .ds-card__meta--bottom .fas,
.ds-card--file .ds-card__meta--bottom .far {
  color: var(--ds-card-icon);
}

/* -- top -- */
.ds-card--top {
  display: flex;
  flex-direction: column;
}
/* Обложка держит пропорцию 16:9 независимо от ширины колонки: карточки
   витрины получаются одного размера, а не «по высоте картинки».
   Градиент под картинкой — фолбэк для записей без обложки и для
   переноса без папки uploads. */
.ds-card--top .ds-card__thumb {
  height: auto;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #4a2b2d 0%, var(--ds-bg-overlay) 55%, #2b2b2b 100%);
}
.ds-card--top .ds-card__thumb img {
  height: 100%;
}
.ds-card--top .ds-card__overlay {
  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3);
}
.ds-card--top .ds-card__title {
  font-size: var(--ds-font-size-sm);
  color: #efefef;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- comment (компактный) --
   Комментарий занимает две колонки сетки: строка текста в одну колонку
   получается слишком короткой для чтения. */
.ds-card--comment {
  grid-column: span 2;
  background: none;
  border-bottom: 1px solid var(--ds-border-dark);
  border-radius: 0;
  padding-bottom: var(--ds-space-1);
  display: flex;
  gap: var(--ds-space-2);
  align-items: flex-start;
}
.ds-card--comment .ds-card__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ds-bg-raised);
  flex-shrink: 0;
  margin-top: 3px;
}
.ds-card--comment .ds-card__body { flex: 1; min-width: 0; }
.ds-card--comment .ds-card__title {
  font-size: var(--ds-font-size-sm);
  font-weight: normal;
  color: var(--ds-text-link);
  display: inline;
}
.ds-card--comment .ds-card__text {
  font-size: var(--ds-font-size-sm);
  display: inline;
}
.ds-card--comment .ds-card__text a {
  color: var(--ds-text-primary);
  line-height: 20px;
  word-break: break-all;
}
.ds-card--comment .ds-card__meta {
  font-size: var(--ds-font-size-xs);
  background: none;
  padding: 0;
}
.ds-card--comment .ds-card__cat {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-xs);
  float: right;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  line-height: 11px;
}

/* -- empty -- */
.ds-card--empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg-raised);
  border: 3px dashed #525252;
  color: #676767;
  font-size: var(--ds-font-size-sm);
  text-align: center;
  min-height: 75px;
  width: 100%;
}

/* ==========================================
   MODS-HEAD / MODS-SORT — шапка списка модов
   Заголовок категории слева, выпадающий список сортировки справа.
   Заменяет прежнюю панель .ds-nav-filter (удалена): её группы
   читались как несколько независимых сортировок, а на мобильном
   она разваливалась. Сортировка серверная (?select=), ссылки
   работают без JS. Общий js/dropdown.js только раскрывает меню.
   ========================================== */

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

.mods-head {
  position: relative;
  /* Меню должно перекрывать карточки: у них свои z-index и
     hover-трансформации, поэтому строка создаёт свой контекст. */
  z-index: 30;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  border-bottom: 1px solid #333;
  margin-bottom: var(--ds-space-4);
}
.mods-head__title {
  /* flex-basis: auto (а не 0) — длинный заголовок переносит кнопку
     на следующую строку; min-width: 0 разрешает тексту сжиматься. */
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Кнопка (закрытое состояние) --- */
.mods-sort {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  /* Сбрасываем наследование .ds-section__head: uppercase, 18px, заголовочный шрифт. */
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1;
  text-transform: none;
  color: var(--ds-text-white);
}
.mods-sort__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
  color: var(--ds-text-white);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: border-color var(--ds-transition), color var(--ds-transition);
}
.mods-sort__button:hover,
.mods-sort--open .mods-sort__button {
  border-color: rgb(245 199 106 / 0.6);
}
.mods-sort__button:focus-visible {
  outline: 2px solid #f5c76a;
  outline-offset: 2px;
}
.mods-sort__label {
  flex: 0 0 auto;
  color: #888;
}
/* Подпись нужна на всех ширинах, кроме узких (≤400px). */
@media (min-width: 401px) {
  .mods-sort__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}
.mods-sort__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--ds-text-white);
}
.mods-sort__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: #888;
  transition: transform var(--ds-transition), color var(--ds-transition);
}
.mods-sort__button:hover .mods-sort__chevron,
.mods-sort--open .mods-sort__chevron {
  color: #f5c76a;
}
.mods-sort--open .mods-sort__chevron {
  transform: rotate(180deg);
}
/* Иконка сортировки видна только там, где прячется подпись (≤400px). */
.mods-sort__icon {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: #888;
}
.mods-sort__button:hover .mods-sort__icon,
.mods-sort--open .mods-sort__icon {
  color: #f5c76a;
}

/* --- Меню (открытое состояние) --- */
.mods-sort__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: max(260px, 100%);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--ds-bg-surface);
  border: 1px solid #3a3a3a;
  border-radius: var(--ds-radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.mods-sort--open .mods-sort__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Без JS (.mods-sort--js не появился) меню открывает фокус. */
.mods-sort:not(.mods-sort--js):focus-within .mods-sort__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mods-sort:not(.mods-sort--js):focus-within .mods-sort__button {
  border-color: rgb(245 199 106 / 0.6);
}
.mods-sort:not(.mods-sort--js):focus-within .mods-sort__chevron {
  color: #f5c76a;
  transform: rotate(180deg);
}
.mods-sort__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mods-sort__item {
  margin: 0;
}
.mods-sort__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  color: #ccc;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.mods-sort__link--child {
  padding-left: 22px;
}
.mods-sort__link:hover,
.mods-sort__link:focus-visible {
  background: #2f2f2f;
  color: var(--ds-text-white);
  text-decoration: none;
  outline: none;
}
.mods-sort__link--active {
  background: rgb(245 199 106 / 0.12);
  color: #f5c76a;
}
.mods-sort__link--active:hover,
.mods-sort__link--active:focus-visible {
  background: rgb(245 199 106 / 0.12);
  color: #f5c76a;
}
.mods-sort__check {
  margin-left: auto;
  padding-left: 8px;
}
/* Галочка нарисована в каждом пункте, у неактивных скрыта: JS переключает
   состояние одним классом, не перестраивая разметку. */
.mods-sort__link:not(.mods-sort__link--active) .mods-sort__check {
  display: none;
}
.mods-sort__group-title {
  display: block;
  padding: 10px 10px 4px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #777;
}
.mods-sort__divider {
  height: 0;
  margin: 6px 0;
  border-top: 1px solid #3a3a3a;
}

/* На тач-устройствах пункт не меньше 40px по высоте. */
@media (hover: none), (pointer: coarse) {
  .mods-sort__link {
    min-height: 40px;
  }
}

@media (max-width: 560px) {
  .mods-sort {
    flex: 1 1 100%;
  }
  .mods-sort__button {
    width: 100%;
  }
  .mods-sort__menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  /* «Сортировка:» скрыто (класс .visually-hidden), вместо него иконка. */
  .mods-sort__icon {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mods-sort__menu,
  .mods-sort__button,
  .mods-sort__chevron,
  .mods-sort__link {
    transition: none;
  }
}

/* ==========================================
   MODS-MORE — «Показать ещё» в списке модов категории
   Кнопка дозагрузки под сеткой карточек (js/mods-list.js). Вид повторяет
   «Показать ещё» комментариев. Без JS ссылка ведёт на следующую страницу.
   ========================================== */
.mods-more {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-5);
}
.mods-more[hidden] { display: none; }
.mods-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 24px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-overlay);
  color: var(--ds-text-white);
  font-family: var(--ds-font-body);
  font-size: var(--ds-font-size-base);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ds-transition);
}
.mods-more__btn:hover:not([aria-disabled="true"]) {
  background: var(--ds-bg-overlay-hover);
  text-decoration: none;
}
.mods-more__btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.mods-more[data-error] .mods-more__btn { background: var(--ds-bg-accent); }
.mods-more__btn.is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mods-more-spin 0.7s linear infinite;
}
@keyframes mods-more-spin { to { transform: rotate(360deg); } }

/* Ошибка загрузки/сортировки — видимая строка под списком. */
.mods-error {
  margin: var(--ds-space-3) 0 0;
  color: #ff9a9a;
  font-size: var(--ds-font-size-base);
  text-align: center;
}
.mods-error[hidden] { display: none; }

/* Анонсы для скринридеров. */
.mods-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .mods-more__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mods-more__btn,
  .mods-more__btn.is-loading::after {
    transition: none;
    animation: none;
  }
}

/* ==========================================
   DS-PAGINATION
   Без общей рамки: страницы — отдельные кнопки, а не клетки одной
   длинной таблицы. Набор ссылок не выделяется в отдельный блок,
   а продолжает список карточек.
   ========================================== */
.ds-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-1);
  flex-wrap: wrap;
  padding: var(--ds-space-4) 0 0;
  margin: var(--ds-space-6) 0 0;
  background: none;
  border: none;
}
/* Якорь #jump-cat: после перехода по странице список не должен
   уезжать под закреплённую полоску. */
#jump-cat { scroll-margin-top: 90px; }
.ds-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  font-size: var(--ds-font-size-sm);
  font-weight: bold;
  border: 1px solid transparent;
  background: var(--ds-bg-overlay);
  color: var(--ds-text-primary);
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-pagination__item:hover {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  text-decoration: none;
}
.ds-pagination__item--current {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
}
.ds-pagination__item--gap {
  background: none;
  color: var(--ds-text-muted);
}
/* Пагинация комментариев приходит со стандартными классами WP. */
.ds-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--ds-space-2);
  background: var(--ds-bg-overlay);
  color: var(--ds-text-primary);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-font-size-sm);
  font-weight: bold;
}
.ds-pagination .page-numbers:hover,
.ds-pagination .page-numbers.current {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  text-decoration: none;
}

/* ==========================================
   DS-LINK-GROUP — ссылки скачивания
   ========================================== */
.ds-link-group {
  background: var(--ds-bg-raised);
  border: 1px solid #232323;
  margin: var(--ds-space-8) 0;
}
.ds-link-group .ds-link-group__name {
  background: var(--ds-bg-accent);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-xl);
  color: var(--ds-text-white);
  padding: var(--ds-space-2) var(--ds-space-3);
  margin: 0;
}
.ds-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-light);
}
.ds-link-row:last-child { border-bottom: none; }
.ds-link-row__name { flex: 1; min-width: 150px; font-size: var(--ds-font-size-base); }
.ds-link-row__size,
.ds-link-row__version,
.ds-link-row__source {
  display: flex;
  flex-direction: column;
  font-size: var(--ds-font-size-base);
  color: var(--ds-text-primary);
  white-space: nowrap;
}
/* Подпись над значением: «Размер», «Версия», «Источник» — так строка
   читается как таблица характеристик, а не как набор чисел. */
.ds-link-row__caption {
  font-size: var(--ds-font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-muted);
  margin-bottom: 2px;
}
.ds-link-row__dl a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-bg-accent);
  color: var(--ds-text-white);
  padding: 9px var(--ds-space-4);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-base);
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
  transition: background var(--ds-transition);
}
.ds-link-row__dl a:hover { background: var(--ds-bg-accent-hover); text-decoration: none; }

/* Старые правила .ds-comment* удалены: разметку комментариев теперь
   полностью описывает comments.css (подключается только на странице записи). */

/* ==========================================
   DS-SPOILER
   ========================================== */
.ds-spoiler {
  margin-bottom: var(--ds-space-5);
  font-size: var(--ds-font-size-base);
}
.ds-spoiler__head {
  cursor: pointer;
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-bg-raised);
  border: 1px solid var(--ds-border-dark);
  color: var(--ds-text-link);
  font-weight: bold;
}
.ds-spoiler__head::before { content: "▶ "; }
.ds-spoiler__body {
  background: var(--ds-bg-raised);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border-dark);
  border-top: none;
}

/* ==========================================
   DS-FORMS
   ========================================== */
.ds-input {
  background: var(--ds-bg-input);
  border: 1px solid var(--ds-border-input);
  color: var(--ds-text-primary);
  padding: 10px 12px;
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-font-size-base);
  font-family: var(--ds-font-body);
  box-sizing: border-box;
}
.ds-input:focus { outline: none; border-color: var(--ds-bg-accent); }
.ds-input--block { width: 100%; }

/* ==========================================
   DS-BTN
   ========================================== */
.ds-btn {
  display: inline-block;
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  border: none;
  border-radius: var(--ds-radius-sm);
  padding: 8px 20px;
  font-size: var(--ds-font-size-lg);
  cursor: pointer;
  text-align: center;
  font-family: var(--ds-font-body);
}
.ds-btn:hover { background: var(--ds-bg-accent-hover); text-decoration: none; }
.ds-btn--secondary {
  background: var(--ds-bg-dark);
  border-color: #191919;
  color: var(--ds-text-white);
}
.ds-btn--secondary:hover { background: var(--ds-bg-card-hover); }
.ds-btn--sm { font-size: var(--ds-font-size-sm); padding: 5px 10px; }
.ds-btn--lg { font-size: 17px; padding: 12px 30px; }

/* Подвал удалён целиком: полезного в нём не было, важные ссылки при
   необходимости добавим в сайдбар. Стили .ds-footer__* убраны. */

/* ==========================================
   MISC
   ========================================== */
.ds-info-box {
  margin: var(--ds-space-5) auto;
  background: rgba(130,34,39,.18);
  border: 1px solid #482829;
  padding: var(--ds-space-5);
  font-size: var(--ds-font-size-lg);
  color: var(--ds-text-primary);
  width: 80%;
}
.ds-tag {
  display: inline-block;
  background: var(--ds-bg-raised);
  border: 1px solid #3a3a3a;
  color: var(--ds-text-primary);
  padding: 4px 10px;
  font-size: var(--ds-font-size-sm);
}
.ds-tag:hover { background: var(--ds-bg-accent); color: #fff; text-decoration: none; }
.ds-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-empty {
  text-align: center;
  padding: var(--ds-space-10);
  color: var(--ds-text-muted);
}
.ds-empty__icon { font-size: 48px; margin-bottom: var(--ds-space-4); opacity: .5; }
/* Пустой список каталога — уведомление во всю ширину сетки карточек:
   иначе заглушка занимает одну колонку и читается как дырка в ряду.
   Без фона и рамки: сообщение стоит прямо на фоне страницы, а не
   выглядит ещё одной плиткой в ряду карточек. */
.ds-empty--notice {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3);
  width: 100%;
  padding: var(--ds-space-10) var(--ds-space-6);
  box-sizing: border-box;
}
.ds-empty--notice .ds-empty__icon {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  color: var(--ds-text-muted);
  opacity: 1;
}
.ds-empty--notice .ds-empty__title {
  margin: 0;
  font-size: var(--ds-font-size-2xl);
  font-weight: 700;
  color: var(--ds-text-heading);
}
.ds-empty--notice .ds-empty__text {
  margin: 0;
  max-width: 560px;
  font-size: var(--ds-font-size-base);
  line-height: 1.5;
  color: var(--ds-text-muted);
}
.ds-empty--notice .ds-empty__action { margin-top: var(--ds-space-2); }
.ds-divider {
  border: 0;
  border-top: 1px solid #4e4e4e;
  margin: var(--ds-space-5) 0;
}
.ds-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* POST HEADER (single) переехал в mod-header.css: размытый фон, обложка
   16:9, текст и «паспорт» мода. Старые плитки .ds-before-content и
   .ds-post-header удалены — этот шаблон их больше не выводит. */

/* ==========================================
   CONTENT AREA (single)
   ========================================== */
/* Деталка мода: сама статья уже общей колонки (960px против 1200px) —
   обложка, характеристики, текст, похожие записи и комментарии держат
   одну ширину, правый край ровный. Тянем только .ds-single (он есть лишь
   в single.php), а не .ds-main: полоса поиска и крошки остаются прежней
   ширины, поэтому шапка сайта не «прыгает» между страницами. */
.ds-single {
  max-width: var(--ds-single-width);
}

/* Без собственной меры и центрирования: текст занимает всю ширину
   контейнера, выравнивание задаётся родителем (.ds-main / .ds-single). */
.ds-post-content {
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-5);
  font-size: 15px;
  line-height: 1.65;
}
.ds-post-content h1, .ds-post-content h2,
.ds-post-content h3, .ds-post-content h4 {
  margin: 20px 0;
  color: var(--ds-text-heading);
}
.ds-post-content p { margin: 0 0 12px; }
.ds-post-content blockquote {
  background: var(--ds-bg-raised);
  border: 1px solid var(--ds-border-dark);
  padding: 15px;
  margin: 15px 0;
}
.ds-post-content ul, .ds-post-content ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
  list-style-type: disc;
}
.ds-post-content ul li, .ds-post-content ol li { line-height: 25px; }
.ds-post-content img {
  max-width: 100%;
  height: auto;
  margin-top: 3px;
}
/* Медиа и таблицы не должны вылезать за меру колонки. */
.ds-post-content iframe,
.ds-post-content table {
  max-width: 100%;
}
.ds-post-content img:hover { opacity: 0.8; }
/* Ядро печатает на галерею инлайновый style: #gallery-N img { border: 2px solid #cfcfcf }.
   Он стоит в разметке позже и по ID сильнее класса, поэтому перебиваем только !important. */
.ds-post-content .gallery img { border: none !important; }

/* ==========================================
   PRIVACY — политика обработки персональных данных
   ========================================== */
/* Текст документа длиннее обычной записи, поэтому первая строка-заголовок
   не прижимается к кромке. Содержание (nav.privacy__toc) — оглавление
   якорями: у документа 12 разделов, без него искать пункт неудобно. */
.privacy > h1:first-child {
  margin-top: 0;
}
.privacy__toc {
  background: var(--ds-bg-raised);
  border: 1px solid var(--ds-border-dark);
  padding: 12px 15px;
  margin: 0 0 20px;
}
.privacy__toc ol {
  margin: 0;
  padding: 0 0 0 22px;
  list-style-type: decimal;
  columns: 2;
  column-gap: 30px;
}
.privacy__toc li {
  line-height: 22px;
  break-inside: avoid;
}
.privacy__toc a {
  color: var(--ds-text-link, inherit);
  text-decoration: none;
}
.privacy__toc a:hover {
  text-decoration: underline;
}
/* Таблица «Цели обработки»: две колонки «поле — значение», без рамок и
   зебры — это не данные, а паспорт документа. */
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 15px;
  table-layout: fixed;
}
.privacy-table th,
.privacy-table td {
  padding: 8px 10px;
  border: 1px solid var(--ds-border-dark);
  text-align: left;
  vertical-align: top;
}
.privacy-table th {
  width: 30%;
  background: var(--ds-bg-raised);
  color: var(--ds-text-heading);
  font-weight: 600;
}
.privacy-table td p:last-child {
  margin-bottom: 0;
}
/* На узком экране оглавление в две колонки не читается. */
@media (max-width: 760px) {
  .privacy__toc ol {
    columns: 1;
  }
  .privacy-table,
  .privacy-table tbody,
  .privacy-table tr,
  .privacy-table th,
  .privacy-table td {
    display: block;
    width: auto;
  }
  .privacy-table th {
    border-bottom: none;
  }
  .privacy-table th + td {
    border-top: none;
  }
}

/* ==========================================
   ALL GAMES — обрезанный список + «Все игры»
   ========================================== */
/* Видимые ряды считает js/home-games.js: их высота зависит от ширины
   колонки, фиксированное число в CSS тут не работает. Скрипт кладёт
   в --ds-games-rows высоту видимых рядов, CSS добавляет к ней полосу
   с кнопкой. Без JS класс is-clipped не появляется и видны все игры. */
.ds-games-clip {
  position: relative;
}
.ds-games-clip.is-clipped {
  max-height: calc(var(--ds-games-rows, 640px) + 96px);
  overflow: hidden;
}

.ds-show-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  padding: var(--ds-space-2) var(--ds-space-4);
  /* Занавес растворяет нижний ряд игр в фоне страницы: цвет тот же, что у
     контента (--ds-bg-content), иначе полоса была бы светлее фона. */
  background: linear-gradient(to bottom, rgba(var(--ds-bg-content-rgb), 0) 0%, rgba(var(--ds-bg-content-rgb), .85) 40%, var(--ds-bg-content) 100%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-show-more[hidden] { display: none; }

.ds-games-collapse {
  display: flex;
  justify-content: center;
  padding-top: var(--ds-space-4);
}
.ds-games-collapse[hidden] { display: none; }

/* Кнопки «Показать все игры» / «Свернуть» — на общих .ds-btn. */
.ds-show-more .ds-btn {
  font-family: var(--ds-font-heading);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ==========================================
   HOME HERO — H1 и интро главной
   ========================================== */
.ds-home-hero {
  margin-bottom: var(--ds-space-6);
}
.ds-home-hero__title {
  margin: 0 0 var(--ds-space-2);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-3xl);
  font-weight: 400;
  color: var(--ds-text-heading);
  line-height: 1.25;
}
.ds-home-hero__text {
  margin: 0;
  font-size: var(--ds-font-size-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

/* ==========================================
   MODS-CATS — подкатегории игры
   Блок над заголовком списка модов: заголовка «Категории» нет, пункты —
   плашки. На десктопе плашки переносятся по строкам, на мобильном едут
   одной строкой с горизонтальной прокруткой (затухания по краям и
   подвод активного пункта — js/mods-cats.js). Активный пункт оформлен
   той же кнопкой, что «Игры» в полоске сверху: var(--ds-bg-accent),
   var(--ds-text-on-accent), var(--ds-radius-sm) и шрифтом заголовков.
   ========================================== */
.mods-cats {
  position: relative;
  /* Отступы блока задаёт .ds-section, в который он обёрнут (заголовок
     «Категории» — общий компонент секций). Свой margin дал бы двойной зазор. */
  margin: 0;
}
.mods-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mods-cats__item {
  display: flex;
  margin: 0;
}
.mods-cats__link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--ds-radius-sm);
  background: #2a2a2a;
  color: #ccc;
  font-family: var(--ds-font-heading);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mods-cats__link:hover {
  background: #333;
  color: #fff;
  text-decoration: none;
}
/* Активная плашка: фон, цвет текста и жирность — как у кнопки «Игры».
   На hover активная не меняется. */
.mods-cats__item--active .mods-cats__link,
.mods-cats__item--active .mods-cats__link:hover {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
  font-weight: 600;
}
.mods-cats__link:focus-visible {
  outline: 2px solid var(--ds-bg-accent);
  outline-offset: 2px;
}
/* Затухания — часть мобильной однострочной раскладки: на десктопе
   список переносится и не скроллится. */
.mods-cats__fade { display: none; }

/* На тач-устройствах плашка выше: 30px неудобно нажимать пальцем. */
@media (hover: none), (pointer: coarse) {
  .mods-cats__link { height: 36px; }
}

@media (max-width: 768px) {
  .mods-cats__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    /* padding даёт место обводке фокуса и не даёт затуханию срезать
       первый и последний пункт. */
    padding: 4px;
    /* Полосу прокрутки прячем: она съедает высоту и шумит.
       Прокрутка пальцем и колесом остаётся. */
    scrollbar-width: none;
  }
  .mods-cats__list::-webkit-scrollbar { display: none; }
  .mods-cats__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .mods-cats__fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .mods-cats__fade--start {
    left: 0;
    opacity: 0;
    background: linear-gradient(to right, var(--ds-bg-content), transparent);
  }
  .mods-cats__fade--end {
    right: 0;
    background: linear-gradient(to left, var(--ds-bg-content), transparent);
  }
  /* Затухание со стороны, где листать некуда, скрыто. Классы ставит
     mods-cats.js; без JS видимым остаётся только правое затухание. */
  .mods-cats--js:not(.mods-cats--at-start) .mods-cats__fade--start { opacity: 1; }
  .mods-cats--js.mods-cats--at-end .mods-cats__fade--end { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mods-cats__link,
  .mods-cats__fade { transition: none; }
}

/* ==========================================
   АДАПТИВ НОВЫХ БЛОКОВ
   Идёт в конце файла: .ds-header и .ds-card-grid--featured
   объявлены выше, и переопределить их из media-запроса
   можно только после них — специфичности у media-запроса нет.
   ========================================== */
@media (max-width: 900px) {
  /* Карточки в одну-две колонки: сетка сама пересчитывает колонки,
     но минимальная ширина 260px на планшете оставляла бы одну. */
  .ds-card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .ds-card--comment { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .ds-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .ds-home-hero__title { font-size: var(--ds-font-size-2xl); }

  .ds-link-row {
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
  }
  .ds-link-row__name { flex: 1 1 100%; }
  .ds-link-row__dl { margin-left: auto; }
}

/* --- Подложка выпадающих панелей (уведомления, чат) ---
   Затемняет страницу и перехватывает клики: панель закрывается кликом
   по подложке, а случайно нажать ссылку под ней нельзя. Сами панели
   лежат выше — у них z-index 1100. */
.ds-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, 0.5);
}

.ds-panel-backdrop[hidden] {
  display: none;
}