/* =============================================================
 * Bethplanet — global chrome 2026
 * Шапка ($GLOBAL_CLEFTER$), сайдбар-информеры ($GLOBAL_DRIGHTER$),
 * футер ($GLOBAL_BFOOTER$). Использует токены --bp-g-* из game.css.
 * Заменяет Bootstrap-зависимости поверх legacy-разметки.
 * ============================================================= */

/* =============================================================
 * HEADER — sticky top bar
 * ============================================================= */
.bp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bp-chrome);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  font-family: var(--bp-g-font);
  color: #ffffff;
}

.bp-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.bp-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 40px;
}

.bp-header__logo img {
  max-height: 36px;
  width: auto;
  display: block;
}

.bp-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--bp-g-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    border-color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__menu-toggle:hover,
.bp-header__menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}

.bp-header__menu-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .bp-header__menu-toggle {
    display: inline-flex;
  }
}

/* --- Primary navigation (desktop) --- */
.bp-header__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.bp-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-nav__item {
  position: relative;
}

.bp-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--bp-g-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-nav__link:hover,
.bp-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.bp-nav__link.is-active {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.22);
}

.bp-nav__chevron {
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: 0.85;
  transition: transform var(--bp-g-dur) var(--bp-g-ease);
}

.bp-nav__item--has-dropdown:hover .bp-nav__chevron,
.bp-nav__item.is-open .bp-nav__chevron {
  transform: rotate(180deg);
}

.bp-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  min-width: 240px;
  margin: 6px 0 0;
  padding: 8px;
  list-style: none;
  background: var(--bp-bg);
  border: 1px solid var(--bp-g-line);
  border-radius: var(--bp-g-radius-md);
  box-shadow: var(--bp-g-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--bp-g-dur) var(--bp-g-ease),
    transform var(--bp-g-dur) var(--bp-g-ease),
    visibility 0s linear var(--bp-g-dur);
}

.bp-nav__item--has-dropdown:hover > .bp-nav__dropdown,
.bp-nav__item--has-dropdown:focus-within > .bp-nav__dropdown,
.bp-nav__item.is-open > .bp-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.bp-nav__dropdown a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--bp-g-text);
  text-decoration: none;
  border-radius: var(--bp-g-radius-sm);
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-nav__dropdown a:hover,
.bp-nav__dropdown a:focus-visible {
  background: var(--bp-g-surface);
  color: var(--bp-g-brand);
  outline: none;
  text-decoration: none;
}

@media (max-width: 900px) {
  .bp-header__nav {
    display: none;
  }
}

/* --- Right actions: search + user / login --- */
.bp-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bp-header__search {
  position: relative;
  display: flex;
  align-items: center;
}

.bp-header__search-input {
  width: 180px;
  height: 40px;
  padding: 0 36px 0 14px;
  background: rgba(0, 0, 0, 0.22);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bp-g-radius-pill);
  outline: none;
  transition: width var(--bp-g-dur) var(--bp-g-ease),
    border-color var(--bp-g-dur) var(--bp-g-ease),
    background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.bp-header__search-input:focus {
  width: 260px;
  background: #ffffff;
  color: #161618;
  border-color: #ffffff;
}

.bp-header__search-input:focus::placeholder {
  color: var(--bp-g-text-dim);
}

.bp-header__search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__search-input:focus ~ .bp-header__search-btn {
  color: #6b6b73;
}

.bp-header__search-btn:hover,
.bp-header__search-btn:focus-visible {
  color: #ffffff;
  outline: none;
}

.bp-header__search-input:focus ~ .bp-header__search-btn:hover {
  color: var(--bp-chrome);
}

.bp-header__search-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 700px) {
  .bp-header__search-input {
    width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .bp-header__search-input:focus {
    width: 200px;
    padding: 0 36px 0 14px;
    background: #ffffff;
    border: 1px solid var(--bp-g-brand);
  }
}

/* =============================================================
 * Переключатель темы. Живёт в шапке рядом с поиском.
 *
 * Иконка показывает, куда переключишься: луна — «включить
 * тёмную», солнце — «вернуть светлую». Состояние берётся из
 * тех же трёх источников, что и палитра, поэтому кнопка
 * правильно выглядит и до первого клика, когда выбора ещё нет
 * и тема идёт от системы.
 * ============================================================= */
.bp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-theme-toggle:hover,
.bp-theme-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
}

.bp-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.bp-theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* По умолчанию — светлая тема, значит предлагаем тёмную. */
.bp-theme-toggle__sun {
  display: none;
}

.bp-theme-toggle__moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-theme-toggle__sun {
    display: block;
  }

  :root:not([data-theme="light"]) .bp-theme-toggle__moon {
    display: none;
  }
}

:root[data-theme="dark"] .bp-theme-toggle__sun {
  display: block;
}

:root[data-theme="dark"] .bp-theme-toggle__moon {
  display: none;
}

/* Кнопка не должна прыгать при смене иконки. */
@media (prefers-reduced-motion: reduce) {
  .bp-theme-toggle {
    transition: none;
  }
}

/* На узком экране кнопка в шапке не помещается: с ней документ
 * становится шире вьюпорта на 18px и «Вход» уезжает за край.
 * Поэтому до 700px переключатель живёт в бургер-меню — там же,
 * где вход и разделы. */
@media (max-width: 700px) {
  .bp-theme-toggle {
    display: none;
  }
}

/* --- Переключатель темы в мобильном меню --------------------- */
.bp-mobile-menu__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bp-line);
  color: var(--bp-text);
  font-family: var(--bp-font);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  margin-bottom: 24px;
}

.bp-mobile-menu__theme-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bp-text-muted);
  font-size: 14px;
  font-weight: 400;
}

.bp-mobile-menu__theme svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.bp-header__user {
  position: relative;
}

.bp-header__user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bp-g-radius-pill);
  cursor: pointer;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    border-color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__user-btn:hover,
.bp-header__user-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.bp-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.bp-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ffffff;
  color: var(--bp-chrome);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bp-header__user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 110;
  min-width: 200px;
  margin: 6px 0 0;
  padding: 8px;
  list-style: none;
  background: var(--bp-bg);
  border: 1px solid var(--bp-g-line);
  border-radius: var(--bp-g-radius-md);
  box-shadow: var(--bp-g-shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--bp-g-dur) var(--bp-g-ease),
    transform var(--bp-g-dur) var(--bp-g-ease),
    visibility 0s linear var(--bp-g-dur);
}

.bp-header__user.is-open .bp-header__user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.bp-header__user-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--bp-g-text);
  text-decoration: none;
  border-radius: var(--bp-g-radius-sm);
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__user-menu a:hover,
.bp-header__user-menu a:focus-visible {
  background: var(--bp-g-surface);
  color: var(--bp-g-brand);
  outline: none;
  text-decoration: none;
}

.bp-header__user-menu-divider {
  height: 1px;
  background: var(--bp-g-line);
  margin: 6px 0;
}

.bp-header__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--bp-g-radius-pill);
  white-space: nowrap;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease),
    border-color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__cta--ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.bp-header__cta--ghost:hover,
.bp-header__cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: #ffffff;
  color: var(--bp-chrome);
  outline: none;
  text-decoration: none;
}

.bp-header__cta--primary {
  background: #ffffff;
  color: var(--bp-chrome);
  border: 1px solid #ffffff;
}

.bp-header__cta--primary:hover,
.bp-header__cta--primary:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--bp-chrome-hover);
  outline: none;
  text-decoration: none;
}

@media (max-width: 700px) {
  .bp-header__cta {
    padding: 0 12px;
    font-size: 13px;
  }
}

.bp-header__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  background: var(--bp-g-success);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--bp-g-radius-pill);
  transition: background var(--bp-g-dur) var(--bp-g-ease);
}

.bp-header__add:hover,
.bp-header__add:focus-visible {
  background: #166e3c;
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.bp-header__add svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* =============================================================
 * Mobile drawer (≤900px)
 * ============================================================= */
.bp-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bp-g-dur) var(--bp-g-ease),
    visibility 0s linear var(--bp-g-dur);
}

.bp-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bp-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--bp-bg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--bp-g-dur) var(--bp-g-ease);
  -webkit-overflow-scrolling: touch;
}

.bp-mobile-menu.is-open .bp-mobile-menu__panel {
  transform: translateX(0);
}

.bp-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bp-g-line);
}

.bp-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--bp-g-text);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--bp-g-dur) var(--bp-g-ease);
}

.bp-mobile-menu__close:hover {
  background: var(--bp-g-surface);
}

.bp-mobile-menu__close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.bp-mobile-menu__list {
  margin: 0;
  padding: 8px 12px;
  list-style: none;
}

.bp-mobile-menu__list a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--bp-g-text);
  text-decoration: none;
  border-radius: var(--bp-g-radius-sm);
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease);
}

.bp-mobile-menu__list a:hover {
  background: var(--bp-g-surface);
  color: var(--bp-g-brand);
}

.bp-mobile-menu__group {
  margin: 0 0 4px;
}

.bp-mobile-menu__group-label {
  display: block;
  padding: 14px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-g-text-dim);
}

.bp-mobile-menu__group-list {
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
}

.bp-mobile-menu__group-list a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--bp-g-text-muted);
}

body.bp-mobile-menu-open {
  overflow: hidden;
}

/* =============================================================
 * SIDEBLOCK — глобальная стилизация информеров $GLOBAL_DRIGHTER$
 * Применяется на ВСЕХ страницах с .sideblock (без scope) —
 * редизайн legacy через CSS, без правки разметки модулей.
 * ============================================================= */
.sideblock {
  /* Рамку и фон см. ниже, у .sideblock .content: единственный носитель
   * этого класса — карточка игры, и рисует её именно .content. */
  font-family: var(--bp-g-font);
  color: var(--bp-g-text);
}

.sideblock .h2 {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-g-text-dim);
}

.sideblock > a {
  color: inherit;
  text-decoration: none;
}

.sideblock > a:hover .h2,
.sideblock > a:focus-visible .h2 {
  color: var(--bp-g-brand);
}

/* List of recent items inside .sideblock (Новости / Моды / Форум) */
.sideblock .list-group {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.sideblock .list-group-item {
  display: block;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--bp-g-text);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--bp-g-line);
  background: transparent;
  transition: color var(--bp-g-dur) var(--bp-g-ease),
    padding-left var(--bp-g-dur) var(--bp-g-ease);
}

.sideblock .list-group-item:last-child {
  border-bottom: 0;
}

.sideblock .list-group-item:hover,
.sideblock .list-group-item:focus-visible {
  color: var(--bp-g-brand);
  text-decoration: none;
  outline: none;
}

/* "Скоро выйдут" — отдельный формат, с картинками-плитками */
.sideblock .row.list-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 !important;
}

.sideblock .row.list-group .list-group-item,
.sideblock .row.list-group > div,
.sideblock .row.list-group > a {
  padding: 0;
  border: 0;
  border-radius: var(--bp-g-radius-sm);
  overflow: hidden;
  background: var(--bp-g-surface-2);
  font-size: 12px;
  line-height: 1.3;
  color: var(--bp-g-text);
  text-align: center;
}

.sideblock .row.list-group img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bp-g-radius-sm);
}

/* Набор правил #gameinfo (по id) удалён 24.08.2026. Он дублировал
 * .sideblock ниже по файлу и, выигрывая по специфичности, навязывал
 * обложке aspect-ratio 16/9 с object-fit: cover. Обложки игр — 460×215,
 * то есть 2.14:1, и от них отрезались края: у Fallout 4 половина
 * Vault Boy. Плюс колонка подписей в 100px не вмещала «Дата выхода»
 * в верхнем регистре, и заголовок переносился на две строки. */

/* =============================================================
 * Sidebar — социальные ссылки + футер-блок DRIGHTER
 * Старая разметка (.fa-stack) заменяется на наш bp-social-icons,
 * но мы также стилизуем .sociallinks fallback под FontAwesome,
 * пока DRIGHTER не переписан.
 * ============================================================= */
.sideblock .content-bottom {
  font-size: 12px;
  color: var(--bp-g-text-muted);
  line-height: 1.5;
}

.sideblock .content-bottom p {
  margin: 0 0 10px;
}

.sociallinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.sociallinks > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bp-g-surface);
  color: var(--bp-g-text-muted);
  border: 1px solid var(--bp-g-line);
  border-radius: var(--bp-g-radius-sm);
  text-decoration: none;
  transition: background var(--bp-g-dur) var(--bp-g-ease),
    color var(--bp-g-dur) var(--bp-g-ease),
    border-color var(--bp-g-dur) var(--bp-g-ease);
}

.sociallinks > a:hover,
.sociallinks > a:focus-visible {
  background: var(--bp-g-brand-soft);
  color: var(--bp-g-brand);
  border-color: var(--bp-g-brand-line);
  outline: none;
}

/* Скрыть оригинальный fa-stack background-square — оставляем только иконку */
.sociallinks .fa-stack {
  font-size: 1em !important;
  width: auto;
  height: auto;
  line-height: 1;
}

.sociallinks .fa-stack .fa-stop {
  display: none !important;
}

.sociallinks .fa-stack .fa-stack-1x {
  position: static;
  font-size: 18px;
  line-height: 1;
  color: inherit !important;
}

/* =============================================================
 * Ad banner placeholders & misc cleanups in sidebar
 * ============================================================= */
.bp-news-side .bannerad,
.bp-game-layout__aside .bannerad {
  margin: 0 0 14px;
  min-height: 0;
}

/* =============================================================
 * Hide legacy old-design fragments that we deprecated
 * ============================================================= */
.side-menu.visible-xs {
  display: none !important;
}

.topus,
.top-menu {
  display: none !important;
}

/* =============================================================
 * Layout base (legacy pages that still use .container/.row/.col-*)
 * Они подхватывают bootstrap; здесь мы добавляем минимальные правки
 * по бренд-цветам, чтобы legacy-страницы выглядели согласованно с
 * редизайнной шапкой.
 * ============================================================= */
body {
  font-family: var(--bp-g-font);
  background-color: var(--bp-g-page-bg);
  background-image: none !important;
}

/* Breadcrumb header (legacy) — пока шаблоны легаси модулей не переписаны */
.header-bread {
  background: transparent;
  padding: 0;
}

.header-bread .breadcrumb {
  background: transparent;
  padding: 18px 0 6px;
  margin: 0;
  font-size: 13px;
  color: var(--bp-g-text-muted);
  border-radius: 0;
}

.header-bread .breadcrumb > li + li::before {
  content: "›";
  color: var(--bp-g-text-dim);
  padding: 0 6px;
}

.header-bread .breadcrumb a {
  color: var(--bp-g-text-muted);
  text-decoration: none;
}

.header-bread .breadcrumb a:hover {
  color: var(--bp-g-brand);
}

.header-bread .breadcrumb .active {
  color: var(--bp-g-text);
  font-weight: 600;
}

/* =============================================================
 * Reduced motion
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .bp-nav__dropdown,
  .bp-header__user-menu,
  .bp-header__search-input,
  .bp-mobile-menu,
  .bp-mobile-menu__panel,
  .bp-nav__chevron,
  .sideblock .list-group-item {
    transition: none;
  }
}

/* =============================================================
 * ЭТАП 1 АУДИТА ДИЗАЙНА — 22.08.2026
 * Точечные исправления видимых поломок; каждый блок помечен
 * идентификатором находки из аудита (B-01…B-06).
 * Правила для .news-main / .holonews / .main-game — временные
 * заплатки поверх легаси-главной на Bootstrap 3. Они уходят
 * вместе с переводом главной на общую систему карточек.
 * Бекап файла: /assets/css/_backup/global.css.2026-08-22.bak
 * ============================================================= */

/* --- B-06. Единая сетка --------------------------------------
 * Шапка стояла в .bp-container (max-width 1200, padding 16),
 * контент — в бутстраповском .container (width 1100, padding 15).
 * Логотип и меню из-за этого начинались на 50px левее заголовков. */
.bp-container {
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 1200px) {
  .container {
    width: 100%;
    max-width: 1200px;
  }
}

/* --- B-01. Шапка не помещалась в контейнер -------------------
 * Логотип + меню + поиск + две кнопки требовали ~1285px при
 * доступных 1170px, поэтому «Форум» и «Сайт» уезжали под форму
 * поиска. Ужимаем меню, сворачиваем поиск в лупу и отдаём
 * навигацию бургеру раньше — с 1200px вместо 900px. */
.bp-header__row {
  gap: 10px;
  flex-wrap: nowrap;
}

.bp-header__logo {
  min-width: 0;
}

.bp-header__logo img {
  max-width: 100%;
}

.bp-header__nav {
  flex: 0 1 auto;
  min-width: 0;
}

.bp-nav {
  gap: 2px;
}

.bp-nav__link {
  padding: 0 11px;
}

.bp-header__actions {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

/* Поиск свёрнут в лупу; по фокусу разворачивается абсолютом
 * поверх соседей, поэтому не расталкивает кнопки. */
.bp-header__search {
  position: relative;
  width: 36px;
  flex: 0 0 36px;
}

.bp-header__search-input {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.bp-header__search-input:focus {
  width: min(280px, 62vw);
  padding: 0 38px 0 14px;
  background: #ffffff;
  color: #161618;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.bp-header__search-btn {
  right: 2px;
  z-index: 2;
}

@media (max-width: 1199px) {
  .bp-header__nav {
    display: none;
  }

  .bp-header__menu-toggle {
    display: inline-flex;
  }
}

/* --- B-02. Горизонтальная прокрутка на телефоне --------------
 * На экране 375px документ был шириной 513px — блок кнопок уходил
 * за правый край на 138px. «Регистрацию» убираем из шапки: вход и
 * регистрация добавлены в бургер-меню (шаблон CLEFTER). */
@media (max-width: 700px) {
  .bp-header__row {
    gap: 8px;
  }

  .bp-header__cta--ghost {
    display: none;
  }

  .bp-header__logo img {
    max-height: 30px;
  }
}

@media (max-width: 380px) {
  .bp-header__logo img {
    max-height: 26px;
  }
}

/* --- B-05. Подписи карточек новостей на главной --------------
 * Инлайн-градиент в разметке информера идёт снизу вверх: 50%
 * чёрного у самой кромки и полная прозрачность к низу карточки.
 * Заголовок занимает верхние ~40% и своими нижними строками
 * попадает в зону, где затемнения уже почти нет, — белый текст
 * ложится на голый скриншот. .holonews растянут на всю карточку,
 * поэтому подложку вешаем на него. */
.news-main-inner .holonews {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

.news-main:hover .news-main-inner .holonews,
a.main-news-link:visited .news-main-inner .holonews {
  background: rgba(0, 0, 0, 0.68);
}

/* --- B-04. Подписи, спрятанные за :hover ---------------------
 * Уточнение после проверки исходных правил: и подпись в блоке
 * «Скоро выйдут» (.main-game-hover), и строка «дата · автор ·
 * просмотры» на карточках новостей (.additional) не сломаны —
 * они намеренно скрыты (opacity:0) и проявляются по наведению
 * поверх затемнения. Цвет там белый и контраста хватает.
 * Реальная проблема в другом: на тач-устройствах наведения нет,
 * поэтому дата выхода игры и мета новости недоступны в принципе.
 * Показываем их всегда там, где нет курсора. */
@media (hover: none) {
  .main-game .main-game-hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.72);
  }

  .news-main .additional {
    opacity: 1;
    margin-top: 0;
  }
}

/* --- B-03. Плашка игры в шапке новости была невидимой ---------
 * Причина: .bp-news a { color: var(--bp-g-brand) } из news.css
 * (специфичность 0,2,0) перебивало .bp-game-badge--brand
 * { color:#fff } из game.css (0,1,0) — текст красился в цвет
 * собственного фона, контраст 1:1.
 * Правило живёт здесь, а не в news.css, потому что специфичность
 * (0,3,1) выигрывает независимо от порядка подключения файлов.
 * При разборе стилей на этапе 2 переехать в news.css. */
.bp-news a.bp-game-badge--brand,
.bp-news a.bp-game-badge--brand:link,
.bp-news a.bp-game-badge--brand:visited,
.bp-news a.bp-game-badge--early,
.bp-news a.bp-game-badge--early:link,
.bp-news a.bp-game-badge--early:visited,
.bp-news a.bp-game-badge--cancelled,
.bp-news a.bp-game-badge--cancelled:link,
.bp-news a.bp-game-badge--cancelled:visited {
  color: #ffffff;
}

/* --- B-10. Заглушка «Игра дня» в каталоге игр -----------------
 * Пока информер не подключён, в боковой колонке /games/ висит
 * карточка «Здесь будет редакционная игра дня · Подключить
 * информер» — служебный текст, который видят посетители.
 * Заглушка узнаётся по ссылке на корень каталога: настоящая игра
 * дня всегда ведёт на страницу конкретной игры. Поэтому правило
 * само перестанет действовать, как только информер подключат. */
.bp-game-side-card:has(> a.bp-game-side-mini[href="/games/"]) {
  display: none;
}

/* --- B-04 (продолжение). Название игры в блоке «Скоро выйдут» --
 * В информере 65 под обложку добавлен $TITLE$: раньше блок
 * показывал только картинку, а название игры существовало лишь
 * в атрибуте alt. Свой цвет обязателен — иначе ссылку красит
 * дописанное в bootstrap.min.css правило .main-game a { color:
 * white }, и название стало бы белым на светлом фоне. */
.main-game__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: -8px 0 2px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--bp-g-text);
}

.main-game a:hover .main-game__title,
.main-game a:focus .main-game__title {
  color: var(--bp-g-brand);
}

/* =============================================================
 * ФУТЕР — этап 2 аудита, 22.08.2026.
 * Раньше футера на сайте не было: копирайт лежал последним
 * абзацем в правой колонке главной. Разметка — в глобальном
 * блоке $GLOBAL_BFOOTER$.
 * Тёмная подложка выбрана намеренно: она отделяет служебную зону
 * от контента и не спорит с бордовой шапкой, оставляя бренду
 * роль акцента на наведении.
 * ============================================================= */
.bp-footer {
  margin-top: 48px;
  background: var(--bp-footer-bg);
  /* В тёмной теме подвал и страница различаются на несколько
   * пунктов яркости — волосяная линия возвращает границу.
   * В светлой теме подвал и так контрастен, и линия не видна. */
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #b9b9c2;
  font-family: var(--bp-font);
  font-size: 14px;
  line-height: 1.6;
}

.bp-footer a {
  color: #b9b9c2;
  text-decoration: none;
  transition: color var(--bp-dur) var(--bp-ease);
}

.bp-footer a:hover,
.bp-footer a:focus-visible {
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

.bp-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 40px;
  padding-top: 44px;
  padding-bottom: 36px;
}

.bp-footer__logo {
  display: inline-block;
}

.bp-footer__logo img {
  display: block;
  max-height: 34px;
  width: auto;
  opacity: 0.92;
}

.bp-footer__tagline {
  margin: 16px 0 18px;
  max-width: 34ch;
  font-size: 13.5px;
  color: #8b8b95;
}

.bp-footer__social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  transition: background var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease);
}

.bp-footer__social a:hover,
.bp-footer__social a:focus-visible {
  background: var(--bp-chrome);
  color: #ffffff;
}

.bp-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.bp-footer__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b8b95;
}

.bp-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-footer__col li {
  margin-bottom: 7px;
}

.bp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bp-footer__copy {
  margin: 0;
  max-width: 78ch;
  font-size: 12.5px;
  color: #8b8b95;
}

@media (max-width: 900px) {
  .bp-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bp-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
}

@media (max-width: 480px) {
  .bp-footer__top {
    padding-top: 34px;
  }

  .bp-footer__tagline {
    margin-bottom: 16px;
  }
}

/* =============================================================
 * ФИРМЕННЫЙ ЦВЕТ ВМЕСТО БУТСТРАПОВСКОГО СИНЕГО
 * Этап 3, 22.08.2026.
 *
 * Bootstrap красит ссылки и главные кнопки в #337AB7. На сайте
 * это выглядело так: бордовая шапка, бордовые акценты в новостях
 * и играх — и синие «Другие новости», «Профиль», «Цитировать».
 * my.css с самого начала задавал .btn-primary фирменным цветом,
 * но bootstrap подключается позже и переспоривал его.
 *
 * Правила ниже лежат в global.css, который идёт после bootstrap,
 * поэтому специфичность повышать не требуется.
 * ============================================================= */
a {
  color: var(--bp-brand);
}

a:hover,
a:focus {
  color: var(--bp-brand-hover);
}

.btn-primary {
  color: #ffffff;
  background-color: var(--bp-chrome);
  border-color: var(--bp-brand);
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: var(--bp-chrome-hover);
  border-color: var(--bp-brand-hover);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
  background-color: var(--bp-chrome);
  border-color: var(--bp-brand);
}

/* =============================================================
 * ХЛЕБНЫЕ КРОШКИ НА СВОИХ КЛАССАХ
 * Этап 3, 22.08.2026. Замена бутстраповского .breadcrumb.
 * Пока сосуществуют: форум уже переведён на .bp-crumbs,
 * остальные разделы переедут вместе со своими шаблонами.
 * ============================================================= */
.header-bread .bp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 18px 0 6px;
  margin: 0;
  list-style: none;
  font-size: 13px;
  color: var(--bp-text-muted);
}

.header-bread .bp-crumbs > li + li::before {
  content: "›";
  padding: 0 6px;
  color: var(--bp-text-dim);
}

.header-bread .bp-crumbs a {
  color: var(--bp-text-muted);
  text-decoration: none;
}

.header-bread .bp-crumbs a:hover,
.header-bread .bp-crumbs a:focus-visible {
  color: var(--bp-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.header-bread .bp-crumbs .is-active {
  color: var(--bp-text);
}

/* =============================================================
 * ГЛАВНАЯ СТРАНИЦА — переверстка 22.08.2026 (этап 3).
 * Сетка Bootstrap (col-sm-8 / col-sm-4 / row) заменена на CSS Grid,
 * карточки новостей и статей собираются информерами 63 и 72,
 * боковые блоки — 65, 64 и 66. Фоновые картинки заменены на <img>
 * с alt, размерами и отложенной загрузкой.
 * ============================================================= */
.bp-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  padding: 22px 0 44px;
  align-items: start;
}

.bp-home__main {
  min-width: 0;
}

.bp-home__side {
  min-width: 0;
}

.bp-home__title {
  margin: 0 0 16px;
  font-family: var(--bp-font);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bp-text);
}

.bp-home__title + .bp-home__grid {
  margin-bottom: 18px;
}

.bp-home__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.bp-home__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bp-home__more {
  display: block;
  margin-bottom: 34px;
  text-align: center;
}

/* --- Карточка материала -------------------------------------- */
.bp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
  transition: border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    transform var(--bp-dur) var(--bp-ease);
}

.bp-card:hover,
.bp-card:focus-visible {
  text-decoration: none;
  border-color: var(--bp-brand-line);
  box-shadow: var(--bp-shadow-hover);
  transform: translateY(-2px);
  outline: none;
}

.bp-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bp-surface-2);
}

.bp-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--bp-ease);
}

.bp-card:hover .bp-card__img {
  transform: scale(1.03);
}

.bp-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px 15px;
}

.bp-card__cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-brand);
}

.bp-card__title {
  margin: 0;
  font-family: var(--bp-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bp-text);
}

.bp-card--sm .bp-card__title {
  font-size: 14.5px;
}

.bp-card:hover .bp-card__title {
  color: var(--bp-brand);
}

.bp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 12px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--bp-text-dim);
  font-variant-numeric: tabular-nums;
}

.bp-card__author {
  font-weight: 600;
  color: var(--bp-text-muted);
}

.bp-card__stat::after {
  content: " просм.";
}

.bp-card__stat--cmt::after {
  content: " комм.";
}

/* --- Боковая колонка ----------------------------------------- */
.bp-side {
  margin-bottom: 30px;
}

.bp-side__title {
  margin: 0 0 12px;
  font-family: var(--bp-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bp-text);
}

.bp-side__list {
  overflow: hidden;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
}

.bp-side-item {
  display: block;
  padding: 11px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--bp-line);
  transition: background var(--bp-dur) var(--bp-ease);
  /* Задают строку подписи (игра · дата): она лежит в анонимном блоке,
   * и её высоту определяет шрифт ссылки, а не самих подписей. */
  font-size: 11.5px;
  line-height: 1.35;
}

.bp-side-item:last-child {
  border-bottom: 0;
}

.bp-side-item:hover,
.bp-side-item:focus-visible {
  background: var(--bp-surface-2);
  text-decoration: none;
  outline: none;
}

.bp-side-item__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bp-text);
}

.bp-side-item:hover .bp-side-item__title {
  color: var(--bp-brand);
}

.bp-side-item__muted {
  font-weight: 400;
  color: var(--bp-text-dim);
}

/* Игра и дата — одна строка подписи, а не две. Раздельными строками
 * карточка мода занимала 80 пикселей при одной строке заголовка;
 * в липкой колонке высотой в экран это стоило целого пункта списка.
 * 24.08.2026. */
.bp-side-item__cat,
.bp-side-item__date {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
}

.bp-side-item__cat {
  color: var(--bp-brand);
}

.bp-side-item__date {
  color: var(--bp-text-dim);
}

/* Точка-разделитель только когда перед датой действительно есть игра:
 * в блоке форума у пункта одна дата и ведущая точка была бы мусором. */
.bp-side-item__cat + .bp-side-item__date::before {
  content: "·";
  margin: 0 5px;
  color: var(--bp-line-strong);
}

/* --- «Скоро выйдут» ------------------------------------------ */
.bp-side__games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bp-soon {
  display: block;
  text-decoration: none;
}

.bp-soon__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-sm);
}

.bp-soon__title {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bp-text);
}

.bp-soon:hover .bp-soon__title {
  color: var(--bp-brand);
}

.bp-soon__date {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bp-text-dim);
}

.bp-btn--wide {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 1000px) {
  .bp-home {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .bp-home__grid,
  .bp-home__grid--3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =============================================================
 * КНОПКИ САЙТА. Заведены для форума, переехали сюда 22.08.2026 —
 * они нужны и на главной, и в карточках.
 * ============================================================= */
.bp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--bp-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bp-text);
  background: var(--bp-bg);
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
}

.bp-btn:hover,
.bp-btn:focus-visible {
  color: var(--bp-brand);
  background: var(--bp-brand-soft);
  border-color: var(--bp-brand-line);
  text-decoration: none;
  outline: none;
}

.bp-btn--danger:hover,
.bp-btn--danger:focus-visible {
  color: var(--bp-neg);
  background: var(--bp-neg-soft);
  border-color: var(--bp-neg);
}


.bp-btn--primary,
.bp-btn--primary:link,
.bp-btn--primary:visited {
  color: #ffffff;
  background: var(--bp-chrome);
  border-color: var(--bp-brand);
}

.bp-btn--primary:hover,
.bp-btn--primary:focus-visible {
  color: #ffffff;
  background: var(--bp-chrome-hover);
  border-color: var(--bp-brand-hover);
}

.bp-btn--lg {
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
}


/* =============================================================
 * ВНУТРЕННИЕ СТРАНИЦЫ С САЙДБАРОМ — 22.08.2026.
 * Правая колонка ($GLOBAL_DRIGHTER$) переведена со связки
 * col-lg-4 + hidden-xs + hidden-sm на свою разметку. Раньше на
 * телефонах и планшетах она пряталась целиком.
 * ============================================================= */
/* Сетка текстовых страниц, блогов-списков, поиска и профиля.
 * 25.08.2026 приведена к геометрии .bp-entry: было 340px колонка
 * и зазор 34 против 320/28 у материалов — те самые 26 пикселей,
 * из-за которых сайдбар «прыгал» при переходе между разделами.
 * Отдельным именем остаётся только потому, что её печатают шесть
 * шаблонов (2/0, 7/1, 19/1, 4/5 и другие); значения — одни. */
.bp-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  padding: 18px 0 40px;
  align-items: start;
}

.bp-page__main,
.bp-page__side {
  min-width: 0;
}

/* Порог тот же, что у .bp-entry: 1024. Был 1000 — в интервале
 * 1001–1024 текстовая страница оставалась двухколоночной, когда
 * все материалы уже складывались в одну. */
@media (max-width: 1024px) {
  .bp-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

[hidden] {
  display: none !important;
}

.bp-side__title a {
  color: inherit;
  text-decoration: none;
}

.bp-side__title a:hover {
  color: var(--bp-brand);
}

/* --- Карточка игры в сайдбаре (блок #gameinfo) ----------------
 * Класс .sideblock остался на сайте ровно в одном месте — на этой
 * карточке. Рамку, фон и скругление рисует внутренний .content,
 * поэтому сама обёртка ничего не рисует: иначе получается рамка
 * в рамке (так и было, пока legacy.css задавал ей фон с !important). */
.sideblock {
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.sideblock .content {
  overflow: hidden;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
}

/* Обложку показываем как есть: у игр это 460×215, любое навязанное
 * соотношение сторон срезает часть картинки. Пока src не подставлен,
 * место под неё не резервируем — иначе на играх без обложки в карточке
 * висела бы пустая серая полоса. */
.sideblock .content > a > img,
#gamelogo {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bp-surface-2);
}

#gamelogo:not([src]) {
  display: none;
}

/* Таблицу расблокируем: строки ниже раскладываются сеткой, а внутри
 * табличного контекста ширину строки задаёт алгоритм таблицы, и вторая
 * колонка схлопывалась до ширины самого длинного слова. */
.sideblock table.table,
.sideblock table.table > tbody {
  display: block;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}

.sideblock table.table > caption {
  display: block;
}

.sideblock table.table caption {
  caption-side: top;
  padding: 12px 14px 8px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bp-text);
}

.sideblock table.table caption a {
  color: var(--bp-text);
  text-decoration: none;
}

.sideblock table.table caption a:hover {
  color: var(--bp-brand);
}

.sideblock table.table tr + tr {
  border-top: 1px solid var(--bp-line);
}

/* Подпись и значение — сеткой, а не процентами от ширины таблицы:
 * 46% на колонке в 320px давали 147px там, где хватает 112, и «Ролевая
 * игра, Экшен, Приключенческая игра» ломалось на три строки. */
.sideblock table.table tr {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 14px;
}

/* Движок печатает <tr> для строк, которых у игры нет (серия, издатель),
 * и они остаются пустыми. Пустая строка рисовала бы разделитель. */
.sideblock table.table tr:empty {
  display: none;
}

.sideblock table.table th,
.sideblock table.table td {
  padding: 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.sideblock table.table th {
  /* width сбрасываем явно: legacy.css задавал подписи 35.3% ширины
   * таблицы, и в колонке сетки это давало 40 пикселей. */
  width: auto;
  color: var(--bp-text-dim);
}

.sideblock table.table td {
  color: var(--bp-text);
}

.bannerad {
  margin-bottom: 24px;
}

/* =============================================================
 * ПОЛЯ ФОРМ. Заведены для форума, перенесены сюда 22.08.2026 —
 * нужны и в каталоге модов, и в других разделах.
 * ============================================================= */
.bp-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--bp-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--bp-text);
  background: var(--bp-bg);
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  transition: border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}

.bp-input:focus {
  border-color: var(--bp-brand);
  box-shadow: var(--bp-focus-ring);
  outline: none;
}

select.bp-input {
  width: auto;
  max-width: 100%;
}

/* =============================================================
 * ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ — переверстка 22.08.2026.
 * Было: три бутстраповские колонки, аватар и стопка кнопок слева,
 * «Информация» списками dl-horizontal, стена значков достижений
 * справа. Стало: шапка профиля, лента счётчиков, две карточки.
 * Блок достижений сохранён как есть — в нём своя логика на
 * десятки условий; изменено только его оформление.
 * ============================================================= */
.bp-profile {
  padding: 22px 0 44px;
}

.bp-profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px;
  padding: 22px;
  margin-bottom: 22px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-card);
}

.bp-profile__avatar img {
  display: block;
  width: 118px;
  height: 118px;
  object-fit: cover;
  background: var(--bp-surface-2);
  border-radius: 50%;
}

.bp-profile__ident {
  flex: 1 1 260px;
  min-width: 0;
}

.bp-profile__name {
  margin: 0 0 10px;
  font-family: var(--bp-font);
  font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--bp-text);
}

.bp-profile__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--bp-text-muted);
}

.bp-profile__group {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-brand);
  background: var(--bp-brand-soft);
  border: 1px solid var(--bp-brand-line);
  border-radius: var(--bp-radius-pill);
}

.bp-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bp-profile__ban {
  padding: 12px 16px;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--bp-neg);
  background: var(--bp-neg-soft);
  border-radius: var(--bp-radius-md);
}

/* Лента счётчиков активности */
.bp-profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.bp-profile__stat {
  display: block;
  padding: 13px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--bp-text-muted);
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  transition: border-color var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease);
}

.bp-profile__stat b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bp-text);
  font-variant-numeric: tabular-nums;
}

.bp-profile__stat:hover {
  color: var(--bp-brand);
  border-color: var(--bp-brand-line);
  text-decoration: none;
}

.bp-profile__stat:hover b {
  color: var(--bp-brand);
}

/* Две карточки: сведения и достижения */
.bp-profile__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.bp-profile__card {
  padding: 20px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
}

.bp-profile__cardTitle {
  margin: 0 0 14px;
  padding-bottom: 11px;
  font-family: var(--bp-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--bp-text);
  border-bottom: 1px solid var(--bp-line);
}

.bp-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}

.bp-dl dt {
  margin: 0;
  font-weight: 400;
  color: var(--bp-text-muted);
}

.bp-dl dd {
  margin: 0;
  color: var(--bp-text);
  overflow-wrap: anywhere;
}

/* Достижения: разметка блока не тронута, только оформление */
.achievements-profile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.achievements-profile a {
  display: block;
  line-height: 0;
}

.achievements-profile img {
  width: 100%;
  height: auto;
  padding: 0;
  background: var(--bp-surface-2);
  border-radius: var(--bp-radius-sm);
  transition: opacity var(--bp-dur) var(--bp-ease),
    transform var(--bp-dur) var(--bp-ease);
}

.achievements-profile img:hover {
  opacity: 1;
  transform: scale(1.08);
}

.bp-profile__sign {
  padding: 18px 20px;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bp-text-muted);
  background: var(--bp-surface-2);
  border-radius: var(--bp-radius-md);
}

@media (max-width: 900px) {
  .bp-profile__cols {
    grid-template-columns: 1fr;
  }

  .bp-profile__head {
    gap: 16px;
    padding: 18px;
  }

  .bp-profile__avatar img {
    width: 84px;
    height: 84px;
  }
}

/* Остатки бутстраповских обёрток на странице профиля (.row и
 * .col-lg-12 вокруг блока и внутри него) снимать точечными правками
 * шаблона рискованно — там рядом лежит блок достижений на десятки
 * условий. Убираем их из раскладки: display:contents делает обёртку
 * прозрачной, дети становятся прямыми детьми родителя. */
.row:has(> .col-lg-12 > .bp-profile),
.col-lg-12:has(> .bp-profile),
.bp-profile > .row {
  display: contents;
}

/* Заголовок шапки материала под это правило попадать не должен:
 * шаблон блога до сих пор обёрнут в div.page, и селектор
 * .page > .bp-container h1:first-of-type (0,3,1) перебивал
 * .bp-entry-hero__title (0,1,0) — заголовок записи выходил
 * 30/700 вместо 38/800, как на остальных материалах.
 * 24.08.2026. */
.bp-profile > h1,
.page > .bp-container h1:first-of-type:not(.bp-entry-hero__title) {
  margin: 0 0 18px;
  font-family: var(--bp-font);
  font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
}

/* Список сведений приходит из шаблона десятком отдельных <dl
 * class="dl-horizontal">. Раскладываем каждый в строку «метка —
 * значение» и собираем их в одну колонку. */
.bp-profile__card .dl-horizontal {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 0 16px;
  margin: 0 0 9px;
  font-size: 14px;
}

.bp-profile__card .dl-horizontal:last-of-type {
  margin-bottom: 0;
}

.bp-profile__card .dl-horizontal dt {
  width: auto;
  margin: 0;
  padding: 0;
  font-weight: 400;
  text-align: left;
  color: var(--bp-text-muted);
  white-space: normal;
  overflow: visible;
}

.bp-profile__card .dl-horizontal dd {
  margin: 0;
  color: var(--bp-text);
  overflow-wrap: anywhere;
}

/* Блок достижений остался снаружи сетки .bp-profile__cols (он сидит
 * в обёртке движка), поэтому карточки идут друг под другом. Делаем
 * сетку одноколоночной, чтобы «Сведения» и «Достижения» были одной
 * ширины, а не половинной и полной. */
.bp-profile__cols {
  grid-template-columns: minmax(0, 1fr);
}

.bp-profile__card {
  margin-bottom: 22px;
}

/* =============================================================
 * ВКЛАДКИ — 22.08.2026. Замена бутстраповских nav-tabs, которые
 * работали только вместе с bootstrap.min.js. Переключение теперь
 * на своём коде (скрипт лежит в содержимом страницы).
 * ============================================================= */
.bp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0 0 20px;
  padding: 0 0 2px;
  list-style: none;
  border-bottom: 1px solid var(--bp-line);
}

.bp-tabs__btn {
  padding: 9px 14px;
  font-family: var(--bp-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--bp-text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease);
}

.bp-tabs__btn:hover {
  color: var(--bp-text);
}

.bp-tabs__btn[aria-selected="true"] {
  font-weight: 600;
  color: var(--bp-brand);
  border-bottom-color: var(--bp-brand);
}

.bp-tabpane[hidden] {
  display: none;
}

/* --- Лента комментариев на странице /comments ----------------- */
.bp-clist__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bp-line);
}

.bp-clist__item:last-child {
  border-bottom: 0;
}

.bp-clist__avatar img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--bp-surface-2);
  border-radius: 50%;
}

.bp-clist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 5px;
}

.bp-clist__user {
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-brand);
  text-decoration: none;
}

.bp-clist__user:hover {
  color: var(--bp-brand-hover);
}

.bp-clist__date {
  font-size: 12px;
  color: var(--bp-text-dim);
}

.bp-clist__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bp-text);
  overflow-wrap: anywhere;
}

.bp-clist__source {
  display: inline-block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--bp-text-muted);
  text-decoration: none;
}

.bp-clist__source::before {
  content: "→ ";
  color: var(--bp-text-dim);
}

.bp-clist__source:hover {
  color: var(--bp-brand);
}

/* =============================================================
 * Поле ввода визуального редактора — 23.08.2026.
 *
 * Форма комментариев есть во всех модулях, поэтому правило
 * живёт здесь, а не в forum.css: wysibb копирует в <iframe>
 * только те таблицы стилей, что подключены к странице.
 *
 * wysibb рисует область набора текста в отдельном <iframe> и
 * копирует туда наши таблицы стилей. Свой iconset-0.css задаёт
 * .wysibb-body { background: white; color: black } и подключается
 * последним, поэтому берём на одну ступень выше — body.wysibb-body.
 *
 * Атрибут data-theme внутрь рамки браузером не переносится, его
 * ставит /assets/js/theme.js — без этого токены внутри iframe
 * разрешались бы в светлые значения даже при тёмной теме.
 * ============================================================= */
body.wysibb-body {
  padding: 10px 12px;
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: var(--bp-font);
  font-size: 15px;
  line-height: 1.55;
}

body.wysibb-body a {
  color: var(--bp-brand);
}

/* --- Обвязка редактора: рамка и панель кнопок ----------------
 * iconset-0.css (в панели: «Цветовая схема редактора → Светлая,
 * чёрно-белые иконки») задаёт белую рамку и светло-серую панель,
 * причём фон панели — с !important и градиентом. Подключается он
 * после наших файлов, поэтому повторяем длину его селекторов.
 *
 * Менять схему в панели на тёмную смысла нет: она зафиксировала бы
 * редактор в одном виде, а здесь он следует за темой сайта. */
body .wysibb {
  background: var(--bp-bg);
  border-color: var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  font-family: var(--bp-font);
  overflow: hidden;
}

body .wysibb .wysibb-toolbar {
  background: var(--bp-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--bp-line);
  box-shadow: none;
}

body .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover {
  background: var(--bp-surface-2);
  border-color: var(--bp-line-strong);
}

/* Иконки — один чёрно-белый спрайт (icons-0.png), поэтому в тёмной
 * теме его достаточно инвертировать: чёрные глифы становятся
 * белыми. Вложенным элементам инверсию возвращаем обратно —
 * у кнопки выбора цвета внутри лежит полоска выбранного цвета,
 * её переворачивать нельзя.
 *
 * ЗАВИСИМОСТЬ ОТ НАСТРОЙКИ: инверсия верна только для монохромного
 * набора иконок. В панели это «Настройка редактора → Цветовая схема
 * редактора», в uAPI — поле uwbb_iconset у PUT /site/setup
 * (0 — текст, 1 — цветной, 2 — монохромный). Если набор переключат
 * на цветной, инверсию отсюда надо убрать. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wysibb .wysibb-toolbar span.btn-inner {
    filter: invert(1);
  }

  :root:not([data-theme="light"]) .wysibb .wysibb-toolbar span.btn-inner > * {
    filter: invert(1);
  }
}

:root[data-theme="dark"] .wysibb .wysibb-toolbar span.btn-inner {
  filter: invert(1);
}

:root[data-theme="dark"] .wysibb .wysibb-toolbar span.btn-inner > * {
  filter: invert(1);
}

/* =============================================================
 * ТЕКСТ МАТЕРИАЛА — общий слой, 23.08.2026.
 *
 * До этого одни и те же правила были написаны трижды и успели
 * разойтись: абзац в статье имел отступ 1em, в новости — 14px,
 * а в моде не имел никакого; цитата в статье была на фирменной
 * подложке, в новости — на серой, в моде не оформлена вовсе.
 * Списки, таблицы, код и линия-разделитель у модов отсутствовали
 * полностью, хотя в описаниях модов списки — самое частое, что
 * есть (в выборке 22 пункта на пять материалов).
 *
 * Теперь набор один. Размер шрифта и внутренние поля остаются
 * за контейнером каждого модуля — здесь всё в em, поэтому
 * отступы масштабируются вместе с ним.
 *
 * Селектор :is() не поднимает специфичность выше одного класса,
 * так что модульные файлы, которые грузятся позже, по-прежнему
 * могут поправить частности.
 * ============================================================= */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) p {
  margin: 0 0 1em;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) > *:first-child {
  margin-top: 0;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) > *:last-child {
  margin-bottom: 0;
}

/* --- Заголовки --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) :is(h2, h3, h4, h5) {
  font-family: var(--bp-font);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bp-text);
  margin: 1.6em 0 0.6em;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) h2 { font-size: 1.4em; }
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) h3 { font-size: 1.18em; }
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) h4 { font-size: 1em; }
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) h5 {
  font-size: 0.92em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-text-muted);
}

/* --- Списки --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) :is(ul, ol) {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) li {
  margin: 0.35em 0;
}

/* Вложенный список не должен добавлять второй нижний отступ. */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) li > :is(ul, ol) {
  margin: 0.35em 0 0;
}

/* --- Ссылки --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) a {
  color: var(--bp-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--bp-brand-line);
  transition: border-color var(--bp-dur) var(--bp-ease);
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) a:hover {
  border-bottom-color: var(--bp-brand);
}

/* Картинка-ссылка не должна получать подчёркивание. */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) a:has(> img) {
  border-bottom: 0;
}

/* --- Цитата ---
 * Курсив убран намеренно: длинная кириллическая цитата курсивом
 * читается заметно хуже, а Inter рисует его синтетически. */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) blockquote {
  margin: 1.2em 0;
  padding: 0.75em 1.1em;
  background: var(--bp-brand-soft);
  border-left: 3px solid var(--bp-brand);
  border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
  color: var(--bp-text);
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) blockquote > *:last-child {
  margin-bottom: 0;
}

/* --- Медиа --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: var(--bp-radius-md);
}

/* Картинка внутри абзаца остаётся в потоке текста. */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) p > img:only-child {
  margin-inline: auto;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) :is(iframe, video, embed, object) {
  display: block;
  max-width: 100%;
  margin: 1.2em 0;
  border: 0;
  border-radius: var(--bp-radius-md);
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) figure {
  margin: 1.2em 0;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--bp-text-muted);
}

/* --- Таблицы --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
  font-size: 0.9em;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) :is(th, td) {
  padding: 0.6em 0.85em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bp-line);
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) th {
  background: var(--bp-surface);
  font-weight: 600;
  color: var(--bp-text);
}

/* --- Код --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) code {
  padding: 0.12em 0.4em;
  background: var(--bp-surface);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) pre {
  margin: 1.2em 0;
  padding: 0.9em 1em;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-sm);
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.5;
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) pre code {
  padding: 0;
  background: transparent;
  font-size: 1em;
}

/* --- Мелочи --- */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) hr {
  margin: 1.8em 0;
  border: 0;
  border-top: 1px solid var(--bp-line);
}

:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) :is(b, strong) {
  font-weight: 700;
  color: var(--bp-text);
}

/* Длинные ссылки и пути в старых материалах рвали вёрстку. */
:is(.bp-entry__body, .bp-article-body, .bp-news-body, .bp-mod-body) {
  overflow-wrap: break-word;
}

/* =============================================================
 * ЛИПКИЙ САЙДБАР — 24.08.2026.
 *
 * Замер на странице новости при 1280×900: колонка кончалась на 1508
 * пикселях, а статья шла до 6414. Три четверти прокрутки читатель
 * видел рядом с текстом пустоту.
 *
 * Первая версия давала колонке собственную прокрутку — внутри неё
 * появлялась вторая полоса, и это оказалось хуже пустоты. Теперь
 * прокрутки нет: колонка едет со страницей и прилипает, когда её
 * нижний край доходит до низа экрана. Смещение считает global.js
 * и кладёт в --bp-side-top: из CSS высоту колонки не узнать.
 *
 * Пока скрипт не отработал, --bp-side-top не задан и подставляется
 * запасное значение — колонка просто прилипает под шапкой.
 *
 * Селекторы перечисляют колонку каждого макета отдельно, а не общий
 * .bp-page__side: у новостей, модов, статей, объявлений и страниц игр
 * свои сетки, и .bp-page__side лежит там внутри обёртки. Липкость на
 * вложенном элементе работает только пока видна обёртка — то есть
 * почти никак.
 *
 * Порог 1025px: ровно на этой ширине все пять макетов ещё
 * двухколоночные (ниже они складываются в одну).
 * ============================================================= */
@media (min-width: 1025px) {
  .bp-page__side,
  .bp-news-layout__aside,
  .bp-mods-side,
  .bp-articles-side,
  .bp-board-side,
  .bp-game-layout__aside {
    position: sticky;
    top: var(--bp-side-top, calc(var(--bp-site-header-h) + 16px));
    align-self: start;
  }

  /* Вложенная колонка внутри своей обёртки липкой быть не должна —
   * иначе она прилипает внутри уже прилипшего родителя. */
  .bp-entry__side .bp-page__side,
  .bp-news-layout__aside .bp-page__side,
  .bp-mods-side .bp-page__side,
  .bp-articles-side .bp-page__side,
  .bp-board-side .bp-page__side,
  .bp-game-layout__aside .bp-page__side {
    position: static;
  }
}

/* =============================================================
 * СТРАНИЦА МАТЕРИАЛА — общий слой. Заведён 24.08.2026.
 *
 * До этого каждый модуль верстался отдельно, и пять страниц одного
 * назначения разъехались: шапка 280/320/340 пикселей, заголовок
 * 30/32/38/40, текст 15/16/17, межстрочный от 1,43 до 1,7, у блога
 * шапки не было вовсе, а колонка сайдбара называлась пятью разными
 * именами. Любая правка требовала пяти правок и снова расходилась.
 *
 * Здесь описано ВСЁ, что у страниц материалов общее. В модульных
 * файлах остаётся только то, что действительно своё: кнопка
 * скачивания и таблица версий у модов, галерея скриншотов,
 * блок «похожие» у читов.
 *
 * За основу взята шапка новостей — она была проработана лучше всех.
 * ============================================================= */

.bp-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  margin: 18px 0 40px;
  align-items: start;
}

.bp-entry__main {
  min-width: 0;
}

@media (max-width: 1024px) {
  .bp-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Боковая колонка. Липкость и её пределы — единственное правило
 * на весь сайт вместо шести селекторов, которые понадобились,
 * пока у каждого модуля была своя колонка. Смещение считает
 * global.js: колонка помещается — прилипает под шапкой,
 * не помещается — прилипает нижним краем. */
.bp-entry__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  font-family: var(--bp-g-font);
}

@media (min-width: 1025px) {
  .bp-entry__side {
    position: sticky;
    top: var(--bp-side-top, calc(var(--bp-site-header-h) + 16px));
    align-self: start;
  }
}

/* --- Шапка материала ----------------------------------------- */

.bp-entry-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  border-radius: var(--bp-radius-xl);
  background: var(--bp-surface-2);
  box-shadow: var(--bp-shadow-hero);
  isolation: isolate;
}

.bp-entry-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bp-entry-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-entry-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.72) 22%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.25) 65%,
      rgba(0, 0, 0, 0) 90%
    ),
    radial-gradient(
      ellipse 70% 60% at 30% 100%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0) 70%
    );
}

.bp-entry-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 28px 32px;
  color: #ffffff;
}

@media (max-width: 700px) {
  .bp-entry-hero__inner {
    min-height: 240px;
    padding: 22px 18px;
  }
}

/* Материал без обложки: шапка остаётся, но становится текстовой.
 * Так устроены блоги и часть трейнеров — своей картинки у них нет,
 * а страница без шапки выглядела с другого сайта. */
.bp-entry-hero--noimg {
  background: linear-gradient(135deg, #2d2d35 0%, #161618 100%);
}

.bp-entry-hero--noimg .bp-entry-hero__shade {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.bp-entry-hero--noimg .bp-entry-hero__inner {
  min-height: 200px;
}

/* Кнопки модератора движка — поверх шапки, а не в потоке. */
.bp-entry-hero__moder {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
}

.bp-entry-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.bp-entry-hero__badges a.bp-game-badge {
  text-decoration: none;
  transition: background var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease);
}

.bp-entry-hero__badges a.bp-game-badge:hover,
.bp-entry-hero__badges a.bp-game-badge:focus-visible {
  background: var(--bp-bg);
  color: var(--bp-brand);
  outline: none;
  text-decoration: none;
}

.bp-entry-hero__title {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.55);
}

/* --- Строка сведений: автор · дата · просмотры · комментарии ---
 * Порядок один на все модули. Раньше у новостей первой шла дата,
 * у модов автор, у трейнеров снова дата, а подписи к числам
 * («3450 просмотров») были только в статьях. */
.bp-entry-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.bp-entry-hero__meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--bp-dur) var(--bp-ease);
}

.bp-entry-hero__meta a:hover,
.bp-entry-hero__meta a:focus-visible {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.bp-entry-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bp-entry-hero__meta-item + .bp-entry-hero__meta-item::before {
  content: "·";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.5);
}

/* Значки строки сведений — контурные. Новости рисовали их заливкой,
 * а моды, статьи и читы контуром: две строки сведений выглядели
 * по-разному даже при одинаковом наборе полей. Оставлен контурный
 * набор — он был в трёх модулях из четырёх. 24.08.2026. */
.bp-entry-hero__meta-item svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* --- Текст материала ------------------------------------------
 * Один кегль и один межстрочный на все типы. Было от 15/1,43
 * в блогах до 17/1,7 в статьях — читалось как разные сайты.
 * Взят вариант статей: они длиннее всех, и он проверен на них. */
.bp-entry__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--bp-text);
}

@media (max-width: 700px) {
  .bp-entry__body {
    font-size: 16px;
  }
}

/* =============================================================
 * КАРТОЧКА В СПИСКЕ МАТЕРИАЛОВ — общая основа. 24.08.2026.
 *
 * Было пять семейств классов: bp-news-card, bp-mod-card,
 * bp-board-card и bp-article-card (её же занимали блоги).
 * Первые три отличались друг от друга ТОЛЬКО тем, на сколько строк
 * обрезается заголовок и текст (3 против 2), фоном подложки обложки
 * и тем, что у новостей в правиле наведения забыли :focus-within —
 * при переходе клавиатурой карточка не подсвечивалась. Четвёртая
 * была другой по-настоящему: крупнее и без обрезки.
 *
 * Здесь общая основа, а различия оставлены осмысленные — не «так
 * получилось», а «здесь читают иначе»:
 *   --news  лид на три строки: у новости он несёт суть;
 *   --file  два ряда и плотная строка фактов: у мода и трейнера
 *           важнее размер, версия и число загрузок, а не пересказ;
 *   --read  крупный заголовок и широкая обложка: статью и запись
 *           блога выбирают по теме, а не по цифрам.
 * ============================================================= */

.bp-item {
  position: relative;
  /* Отступ между карточками живёт здесь, а не на контейнере списка:
   * у блогов, поиска и части списков контейнера нет вовсе — движок
   * кладёт каждую запись в свой безымянный div, и карточки слипались
   * вплотную. У модов, статей и читов gap на контейнере снят, чтобы
   * отступ не удваивался. */
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
  font-family: var(--bp-font);
  transition: transform var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}

.bp-item:hover,
.bp-item:focus-within {
  transform: translateY(-2px);
  border-color: var(--bp-brand-line);
  box-shadow: var(--bp-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .bp-item,
  .bp-item:hover,
  .bp-item:focus-within {
    transform: none;
    transition: border-color var(--bp-dur) var(--bp-ease);
  }
}

.bp-item__cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bp-surface-2);
  border-radius: var(--bp-radius-sm);
}

.bp-item__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-item__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bp-item__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.bp-item__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bp-text);
  text-decoration: none;
}

.bp-item:hover .bp-item__title a {
  color: var(--bp-brand);
}

.bp-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bp-text-muted);
}

.bp-item__meta a {
  color: inherit;
  text-decoration: none;
  transition: color var(--bp-dur) var(--bp-ease);
}

.bp-item__meta a:hover {
  color: var(--bp-brand);
}

.bp-item__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bp-item__meta-item svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* Название игры — единственная выделенная цветом часть строки фактов:
 * по нему читатель и находит нужное в общем списке. */
.bp-item__meta-item--game a,
.bp-item__meta-item--game {
  color: var(--bp-brand);
  font-weight: 600;
}

.bp-item__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bp-text-muted);
}

/* --- Новости: лид важнее цифр -------------------------------- */
.bp-item--news .bp-item__title a {
  -webkit-line-clamp: 3;
}

.bp-item--news .bp-item__excerpt {
  -webkit-line-clamp: 3;
}

/* --- Моды и трейнеры: факты важнее пересказа ------------------ */
.bp-item--file .bp-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.bp-item--file .bp-item__fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--bp-text-muted);
  background: var(--bp-surface);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-pill);
  white-space: nowrap;
}

.bp-item--file .bp-item__fact svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* --- Статьи и блоги: выбирают по теме ------------------------- */
.bp-item--read {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
}

.bp-item--read .bp-item__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.bp-item--read .bp-item__title a {
  -webkit-line-clamp: 3;
}

.bp-item--read .bp-item__excerpt {
  -webkit-line-clamp: 3;
  font-size: 15px;
}

/* Внутрь выжимки движок кладёт первые абзацы материала как есть —
 * вместе с заголовками, списками и картинками. В карточке они не
 * нужны: это две-три строки текста, а не начало статьи. Сводим
 * содержимое к обычному тексту, не трогая сам материал. */
.bp-item__excerpt :is(h1, h2, h3, h4, h5, h6) {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  color: inherit;
}

.bp-item__excerpt :is(h1, h2, h3, h4, h5, h6)::after {
  content: " — ";
}

.bp-item__excerpt :is(p, ul, ol, blockquote) {
  display: inline;
  margin: 0;
  padding: 0;
}

.bp-item__excerpt :is(img, iframe, video, figure, table, hr, br) {
  display: none;
}

.bp-item__excerpt a {
  color: inherit;
  text-decoration: none;
}

/* Ссылка «Читать дальше» — только у длинных материалов. */
.bp-item__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-brand);
  text-decoration: none;
}

.bp-item__more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--bp-dur) var(--bp-ease);
}

.bp-item__more:hover svg {
  transform: translateX(3px);
}

/* Панель модератора — поверх карточки, а не в потоке: иначе она
 * сдвигала заголовок вниз только у тех, кто её видит. */
.bp-item__moder {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
}

/* Обложка, которой нет: серая плашка вместо пустоты. */
.bp-item__cover--empty {
  background: var(--bp-surface-2);
}

/* Видео — значок проигрывания поверх обложки. */
.bp-item__cover--video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* Запись блога и статья без обложки — одна колонка во всю ширину. */
.bp-item--read:not(:has(.bp-item__cover)),
.bp-item:not(:has(.bp-item__cover)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
  .bp-item,
  .bp-item--read {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .bp-item--read .bp-item__title {
    font-size: 19px;
  }
}