/* ==========================================================================
   Feeds — стили шаблона страницы feeds
   ========================================================================== */

/* Шрифты: Oswald, Roboto, Roboto Condensed, Roboto Mono, Roboto Slab, Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');

/* --------------------------------------------------------------------------
   Переменные
   -------------------------------------------------------------------------- */
:root {
	--font-oswald: 'Oswald', sans-serif;
	--font-roboto: 'Roboto', sans-serif;
	--font-roboto-condensed: 'Roboto Condensed', sans-serif;
	--font-roboto-mono: 'Roboto Mono', monospace;
	--font-roboto-slab: 'Roboto Slab', serif;
	--font-inter: 'Inter', sans-serif;

	/* Цвета */
	--bg-main: #1A1A2A;
	--accent-main: #7B61FF;

	/* Карточки игр: однозначные цвета без прозрачности */
	--card-overlay-color: #6E41F0;        /* обводка миниатюр новостей */
	--item-layout-news-default: #4D369A;  /* подложка новости */
	--item-layout-news-focus: #482F94;    /* подложка новости: hover, focus */

	/* Переопределяем базовые значения Bootstrap */
	--bs-body-font-family: var(--font-roboto);
	--bs-font-monospace: var(--font-roboto-mono);
	--bs-body-bg: var(--bg-main);
	--bs-body-color: #fff;
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
body.feeds-page {
	font-family: var(--font-roboto);
	background-color: var(--bg-main);
	color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-oswald);
}

/* --------------------------------------------------------------------------
   Утилиты шрифтов
   -------------------------------------------------------------------------- */
.ff-oswald           { font-family: var(--font-oswald) !important; }
.ff-roboto           { font-family: var(--font-roboto) !important; }
.ff-roboto-condensed { font-family: var(--font-roboto-condensed) !important; }
.ff-roboto-mono      { font-family: var(--font-roboto-mono) !important; }
.ff-roboto-slab      { font-family: var(--font-roboto-slab) !important; }

/* --------------------------------------------------------------------------
   Верхняя полоса меню
   -------------------------------------------------------------------------- */
:root {
	--feeds-topbar-h: 48px;
}

/* Отступ сверху под админ-бар WP (для залогиненных) */
body.feeds-page {
	--feeds-adminbar-h: 0px;
}

body.feeds-page.admin-bar {
	--feeds-adminbar-h: 32px;
}

@media (max-width: 782px) {
	body.feeds-page.admin-bar {
		--feeds-adminbar-h: 46px;
	}
}

/* На <600px админ-бар WP не фиксированный и уезжает со страницей */
@media (max-width: 600px) {
	body.feeds-page.admin-bar {
		--feeds-adminbar-h: 0px;
	}
}

/* Меню прилипает к верху с начала прокрутки */
.feeds-topbar {
	position: sticky;
	top: var(--feeds-adminbar-h);
	z-index: 1030;
	height: var(--feeds-topbar-h);
	background-color: var(--bg-main); /* фон, чтобы контент не просвечивал под меню */
	transition: box-shadow 0.2s;
}

.feeds-topbar.is-fixed {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.feeds-topbar .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
}

/* Мобильное меню раскрывается поверх контента, полоса остаётся 48px */
@media (max-width: 991.98px) {
	.feeds-topbar .navbar-collapse {
		position: absolute;
		top: var(--feeds-topbar-h);
		left: 0;
		right: 0;
		padding: 0.5rem 1rem;
		background: var(--bs-body-bg);
	}
}

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.site-main {}

/* --------------------------------------------------------------------------
   Блок 1 — Header
   -------------------------------------------------------------------------- */
.feeds-hero-section {
	background-color: rgba(20, 19, 32, 0.9);
	overflow-x: clip; /* Featuring шире контейнера — без горизонтального скролла */
}

.feeds-hero.container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 867px;
	padding: 32px 24px 0;
}

/* Header title: звёзды слева/справа + текст */
.feeds-hero__head {
	min-width: 360px;
	min-height: 144px;
}

.feeds-hero__stars {
	position: relative;
	width: 64px;
	max-width: 64px;
	height: 30px;
}

/* Картинки звёзд больше контейнера 64×30 — центрируем через -9999px
   по обеим осям, точная подгонка по макету — через --stars-x / --stars-y */
.feeds-hero__stars img {
	position: absolute;
	top: -9999px;
	bottom: -9999px;
	left: -9999px;
	right: -9999px;
	margin: auto;
	display: block;
	max-width: none;
	transform: translate(var(--stars-x, 0), var(--stars-y, 0));
	pointer-events: none;
	user-select: none;
}

.feeds-hero__stars--left img {
	width: 167px;
	height: 89px;
	--stars-x: -40px;
	--stars-y: 28px;
}

.feeds-hero__stars--right img {
	width: 184px;
	height: 93px;
	--stars-x: 64px;
	--stars-y: 0px;
}

.feeds-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
}

/* Текст 1 */
.feeds-hero__subtitle {
	margin: 0;
	font-family: var(--font-oswald);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

.feeds-hero__accent {
	font-family: var(--font-oswald);
	font-weight: 700;
	color: var(--accent-main);
}

.feeds-hero__sep {
	font-family: var(--font-inter);
	font-weight: 700;
	color: var(--accent-main);
}

.feeds-hero__brand {
	font-family: var(--font-oswald);
	font-weight: 700;
	color: #CFC6FF; /* цвет не указан в ТЗ, взят примерно с макета */
}

/* Текст 2 */
.feeds-hero__title {
	margin: 0;
	font-family: var(--font-roboto);
	font-weight: 900;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

/* Social links */
.feeds-social-band {
	padding: 16px;
	background-color: rgba(20, 19, 32, 0.9); /* @background-dark #141320, 90% */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.feeds-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 659px;
	min-height: 90px;
	margin: 0 auto;
	padding: 24px 32px;
	border: 5px solid var(--accent-main, #7B61FF);
}

.feeds-social__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-family: var(--font-roboto);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s, box-shadow 0.2s;
}

/* Размеры кнопок по макету */
.feeds-social__btn--vk,
.feeds-social__btn--tg,
.feeds-social__btn--fb,
.feeds-social__btn--ig,
.feeds-social__btn--x {
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}

.feeds-social__btn--vk { width: 116px; gap: 10px; }
.feeds-social__btn--tg { width: 110px; gap: 4px; }
.feeds-social__btn--fb { width: 109px; gap: 4px; }
.feeds-social__btn--ig { width: 111px; gap: 4px; }
.feeds-social__btn--x  { width: 91px;  gap: 4px; }

.feeds-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 18px;
}

.feeds-social__btn:hover,
.feeds-social__btn.active {
	background: var(--accent-main, #7B61FF);
	color: #fff;
	box-shadow: 0 0 16px rgba(123, 97, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Липкий блок соцсетей
   Блок прилипает под меню, пока прокручивается Featuring, и останавливается,
   когда нижняя граница зоны (.feeds-sticky-zone) поднимается до него.
   Точка остановки — --social-stop px выше низа Featuring.
   -------------------------------------------------------------------------- */
.feeds-sticky-zone {
	--social-stop: 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: var(--social-stop); /* возвращаем место, «срезанное» у Featuring */
}

.feeds-social-sticky {
	position: sticky;
	top: calc(var(--feeds-adminbar-h) + var(--feeds-topbar-h));
	z-index: 3;
}

/* Featuring «укорачивает» зону на --social-stop, сам при этом не обрезается */
.feeds-featuring-row {
	margin-bottom: calc(var(--social-stop) * -1);
}

/* Featuring: арт + слоган */
.feeds-featuring {
	position: relative;
	height: 360px;
}

/* шире родителя (1110 > 867) — центрирование через -9999px */
.feeds-featuring__inner {
	position: absolute;
	top: 0;
	left: -9999px;
	right: -9999px;
	margin: 0 auto;
	width: 1110px;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.feeds-featuring__art {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 496px;
	height: 360px;
}

.feeds-featuring__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Slogan — поверх арта */
.feeds-slogan {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 249px;
	min-height: 156px;
	margin-left: -125px; /* наплыв на арт, десктоп */
	padding-top: 16px;
	padding-bottom: 16px;
	border-radius: 4px;
	background: var(--Black-op-20, #00000033);
}

.feeds-slogan__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 200px;
	height: 40px;
	padding: 8px 24px;
	background: #3CFCD5;
	font-family: var(--font-oswald);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: #0B0A22;
}

.feeds-slogan__text {
	display: flex;
	flex-direction: column;
	width: 249px;
	min-height: 80px;
	margin: 0;
	font-family: var(--font-roboto);
	font-weight: 700;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #0BFBCB;
}

.feeds-slogan__word-1 {
	letter-spacing: 0.05em; /* 5% */
}

.feeds-slogan__word-2 {
	letter-spacing: 0;
}

/* Планшет и мобильные: арт и слоган друг под другом, без наплыва */
@media (max-width: 991.98px) {
	.feeds-featuring {
		height: auto;
	}

	.feeds-featuring__inner {
		position: static;
		width: 100%;
		height: auto;
		flex-direction: column;
		gap: 0;
	}

	/* Арт сохраняет 496×360 и центрируется через -9999px (шире контейнера — не страшно,
	   у секции overflow-x: clip). На экранах уже 394px уменьшается вместе с экраном,
	   а слоган поднимается следом, оставаясь сразу под артом. */
	.feeds-featuring__art {
		position: relative;
		align-self: stretch;
		width: auto;
		height: min(360px, calc(100vw * 360 / 394));
	}

	.feeds-featuring__art img {
		position: absolute;
		top: 0;
		left: -9999px;
		right: -9999px;
		width: min(496px, calc(100vw * 496 / 394));
		height: 100%;
		margin: 0 auto;
	}

	.feeds-slogan {
		margin-left: 0;
	}

	/* отступ 64px от слогана до конца Блока 1 (до следующего блока) */
	.feeds-sticky-zone {
		margin-bottom: calc(var(--social-stop) + 64px);
	}
}

/* --------------------------------------------------------------------------
   Блок 2
   -------------------------------------------------------------------------- */
.feeds-b2 {
	width: 100%;
	padding-top: 80px; /* отступ сверху по макету */
	background-color: #1A1A2A;
}

/* Заголовок «Промокоды и прочее: Новости | Сообщества» */
.feeds-b2-title {
	position: relative;
	z-index: 2; /* поверх .feeds-b2-body, который заходит под заголовок */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 1013px;
	min-height: 72px;
	margin: 0 auto;
	padding: 12px 32px;
	border-radius: 2px;
	border-style: solid;
	border-width: 0 1px;
	border-color: rgba(255, 255, 255, 0.08); /* цвет границ не указан в ТЗ */
	background:
		linear-gradient(0deg, var(--Grey-tint-950, #1D1B2D), var(--Grey-tint-950, #1D1B2D)),
		linear-gradient(0deg, var(--Grey-tint-Neutral-Blue-Neutral-Blue-10, #1A1A2A), var(--Grey-tint-Neutral-Blue-Neutral-Blue-10, #1A1A2A)),
		linear-gradient(0deg, var(--Grey-tint-Neutral-Blue-Neutral-Blue-05, #141320), var(--Grey-tint-Neutral-Blue-Neutral-Blue-05, #141320)),
		linear-gradient(0deg, var(--background-dark, #141320), var(--background-dark, #141320));
}

.feeds-b2-title__text {
	/* Группы в одну строку высотой 48px: то, что не влезло, переносится на вторую строку
	   и обрезается → «…: Новости | Сообщества» → «Промокоды и прочее» → «Промокоды» */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.28em;
	width: 100%;
	min-width: 0;
	height: 48px;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-roboto-slab);
	font-weight: 600;
	font-size: 36px;
	line-height: 48px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #fff;
}

.feeds-b2-title__group {
	white-space: nowrap;
}

/* Контейнер списка карточек */
.feeds-b2 {
	--feeds-b2-title-h: 72px;
}

.feeds-b2-body {
	margin: calc(var(--feeds-b2-title-h) / -2) 16px 0; /* заходит под заголовок на половину высоты */
	padding-top: calc(var(--feeds-b2-title-h) / 2);
	padding-bottom: 56px;
	background-color: #212035;
}

/* Счётчик промокодов | Обновлено */
.feeds-b2-stats {
	display: flex;
	align-items: center; /* блоки 48px по центру: по 8px сверху и снизу */
	width: 100%;
	height: 64px;
}

.feeds-b2-stats > .row {
	flex: 1;
}

.feeds-b2-stats .row {
	height: 48px;
}

.feeds-stat {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	white-space: nowrap;
	font-family: var(--font-roboto-mono);
	font-weight: 600;
	font-size: 12px;
	line-height: 48px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
}

/* левая половина: прижата к разделителю */
.feeds-stat--promo {
	justify-content: flex-end;
	position: relative;
	padding-right: 24px;
}

/* Центральный разделитель: всегда 24px, по центру по вертикали */
.feeds-stat--promo::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 24px;
	background-color: #7E72C23D;
	transform: translateY(-50%);
}

/* правая половина: от разделителя */
.feeds-stat--updated {
	justify-content: flex-start;
	padding-left: 24px;
}

.feeds-stat__label {
	color: #6D687F;
}

.feeds-stat__value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #C0BDC9;
}

.feeds-stat__icon {
	display: block;
	width: 12px;
	height: 42px;
	padding: 4px 0;
	object-fit: contain;
}

/* Узкие экраны: «Действующих промокодов» и «Обновлено» — двумя строками по центру, без разделителя */
@media (max-width: 575.98px) {
	.feeds-b2-stats {
		height: auto;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.feeds-b2-stats .row {
		height: auto;
	}

	.feeds-b2-stats .col-6 {
		width: 100%;
	}

	.feeds-stat,
	.feeds-stat--promo,
	.feeds-stat--updated {
		justify-content: center;
		height: 30px;
		padding: 0;
		line-height: 30px;
	}

	.feeds-stat--promo::after {
		display: none;
	}

	.feeds-stat__icon {
		height: 30px;
		padding: 5px 0;
	}
}

/* Поиск + фильтры: прилипают под меню, пока прокручиваются карточки,
   и уезжают вместе с концом списка карточек (граница — .feeds-b2-container) */
.feeds-toolbar-sticky {
	position: sticky;
	top: calc(var(--feeds-adminbar-h, 0px) + var(--feeds-topbar-h));
	z-index: 20; /* выше карточек; выпадающий список поиска — внутри */
	margin-top: 20px; /* 20 + 12 = 32px от строки счётчика */
	padding: 12px 0;
	background-color: #212035; /* фон списка — карточки уходят под блок */
	transition: box-shadow 0.2s;
}

.feeds-toolbar-sticky.is-stuck {
	box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
}

.feeds-placeholder {
	min-height: 36px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------------------------
   Поиск по играм
   -------------------------------------------------------------------------- */
.feeds-search {
	position: relative; /* точка отсчёта для выпадающего списка */
}

.feeds-search__field {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	max-width: 364px;
	height: 36px;
	padding: 8px;
	border: 1px solid rgba(126, 114, 194, 0.24);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.2);
	cursor: text;
	transition: border-color 0.2s;
}

.feeds-search__field:focus-within,
.feeds-search__field.show {
	border-color: var(--accent-main);
}

/* Иконка лупы: 12×12, отступ 4/4 внутри бокса 20×20 */
.feeds-search__icon {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.feeds-search__icon img {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
}

/* Поле ввода */
.feeds-search__input {
	flex: 1 1 300px;
	min-width: 0;
	height: 20px;
	padding: 4px;
	border: 0;
	border-radius: 4px;
	outline: none;
	background: transparent;
	color: #fff;
	font-family: var(--font-roboto);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.01em;
	vertical-align: middle;
}

.feeds-search__input::placeholder {
	color: #fff;
	opacity: 1;
}

/* убираем системный крестик у type="search" */
.feeds-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Стрелка: 6×10, повёрнута на -90° (вниз), открыто — вверх */
.feeds-search__toggle {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.feeds-search__chevron {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 6px;
	height: 10px;
	transform: rotate(-90deg);
	transition: transform 0.2s;
}

.feeds-search__field.show .feeds-search__chevron {
	transform: rotate(90deg);
}

/* Выпадающий список — на всю ширину строки поиск+сортировка */
.feeds-search__menu.dropdown-menu {
	--bs-dropdown-padding-y: 0;
	--bs-dropdown-border-radius: 2px;
	--bs-dropdown-border-color: rgba(126, 114, 194, 0.24);
	--bs-dropdown-bg: #1D1B2D;
	--bs-dropdown-link-color: #fff;
	--bs-dropdown-link-hover-color: #fff;
	--bs-dropdown-link-hover-bg: rgba(123, 97, 255, 0.16);
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-active-bg: var(--accent-main);
	width: 100%;
	max-height: 400px;
	margin-top: 4px;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* на lg поиск занимает 7 из 12 колонок — растягиваем список на все 12 */
@media (min-width: 992px) {
	.feeds-search__menu.dropdown-menu {
		width: calc((100% + var(--bs-gutter-x)) * 12 / 7 - var(--bs-gutter-x));
	}
}

.feeds-search__item {
	border-bottom: 1px solid rgba(126, 114, 194, 0.12);
	border-right: 1px solid rgba(126, 114, 194, 0.12);
}

.feeds-search__link.dropdown-item {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 8px 12px;
	font-family: var(--font-roboto);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.01em;
	white-space: normal;
}

.feeds-search__empty {
	padding: 8px 12px;
	font-size: 12px;
	line-height: 16px;
	color: #6D687F;
}

/* Карточки: столько колонок, сколько помещается по 330px (максимальная ширина карточки),
   вплоть до одной. Пока колонка 330px+ — карточка всегда 330px, как на макете;
   если экран уже 330px — одна колонка на всю ширину, карточка сжимается до min-width. */
.feeds-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
	gap: 24px;
	margin-top: 20px; /* + 12px низ липкого блока = 32px от поиска */
}

/* --------------------------------------------------------------------------
   Быстрые фильтры по платформам
   -------------------------------------------------------------------------- */
.feeds-filter {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	min-height: 36px; /* по высоте поля поиска */
	padding-left: 16px;
}

.feeds-filter__group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.feeds-filter__sep {
	flex-shrink: 0;
	width: 1px;
	height: 16px;
	margin: 0 7px;
	background: rgba(126, 114, 194, 0.24);
}

.feeds-filter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 24px;
	padding: 0 11px;
	border: 1px solid transparent; /* та же рамка, что у активной — без скачков ширины */
	border-radius: 16px;
	background: rgba(126, 114, 194, 0.1);
	color: rgba(149, 145, 165, 1);
	font-family: var(--font-roboto);
	font-weight: 400;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0.05em;
	vertical-align: middle;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.feeds-filter__btn--all {
	min-width: 40px;
	padding: 0 8px;
}

.feeds-filter__btn:hover {
	color: rgba(231, 222, 255, 1);
}

.feeds-filter__btn.is-active {
	border-color: rgba(126, 114, 194, 1);
	background: rgba(70, 69, 163, 1);
	color: rgba(231, 222, 255, 1);
}

@media (max-width: 991.98px) {
	.feeds-filter {
		justify-content: center;
		padding-left: 0;
	}

	.feeds-search__field {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Блок 3 — арт внизу страницы
   -------------------------------------------------------------------------- */
.feeds-bottom-art {
	padding-top: 24px;
	background: rgba(0, 0, 0, 0.2);
}

.feeds-bottom-art__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 530px;
	margin: 0 auto;
	padding-bottom: 48px;
}

.feeds-bottom-art__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Карточка игры
   -------------------------------------------------------------------------- */
.feeds-cards__col {
	display: flex;
}

.feeds-cards__empty {
	margin: 32px 0 0;
	text-align: center;
	color: #6D687F;
	font-size: 14px;
}

.feeds-game {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 260px;
	max-width: 330px;
	min-height: 400px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 8px;
	border-bottom: 8px solid #845CFF;
	background: #6E41F0;
	scroll-margin-top: calc(var(--feeds-adminbar-h, 0px) + var(--feeds-topbar-h) + 24px); /* якорь из поиска — не под меню */
}

/* ---------- Шапка ---------- */
.feeds-game__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 90px;
	min-height: 64px;
	padding: 8px 8px 15px 8px; /* 15px — от «Доступно» до низа шапки */
	background: #321D73;
}

/* Аватар: слой 52px (42 + 2×5), картинка 42px вписана с паддингом 5px */
.feeds-game__avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	padding: 5px;
	border-radius: 64px;
	background: rgba(70, 69, 163, 1);
}

.feeds-game__avatar img {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

/* Название сверху, «Доступно» с иконками прижаты к низу шапки */
.feeds-game__meta {
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.feeds-game__title-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 240px;
	height: 36px;
}

.feeds-game__title {
	margin: 0;
	overflow: hidden;
	font-family: var(--font-oswald);
	font-weight: 600;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 0;
	vertical-align: middle;
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.feeds-game__platforms {
	display: flex;
	align-items: center;
	gap: 12px;
}

.feeds-game__badge {
	display: inline-flex;
	align-items: center;
	height: 19px;
	padding: 0 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.2);
	color: #6666FF;
	font-family: var(--font-roboto-mono);
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
}

.feeds-game__platform {
	font-size: 12px;
	color: rgba(102, 102, 255, 0.25);
}

.feeds-game__platform.is-on {
	color: #6666FF;
}

/* ---------- Тело ---------- */
.feeds-game__body {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0 16px; /* 14px — отступ «Промокодов» от шапки */
}

/* Строка «Промокоды + Показать» — целиком кнопка на всю ширину */
.feeds-game__promo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	height: 30px;
	padding: 0 8px 0 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.feeds-game__ribbon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 116px;
	height: 30px;
	padding-left: 8px;
	background: rgba(60, 252, 213, 1);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
	color: rgba(21, 20, 25, 1);
	font-family: var(--font-oswald);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
	vertical-align: middle;
	text-transform: uppercase;
}

/* «Показать»: 20px по высоте, по центру строки 30px → 19px от шапки */
.feeds-game__show {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 86px;
	height: 20px;
	padding: 4px;
	border-radius: 16px;
	background: #3E238C;
	color: rgba(231, 222, 255, 1);
	font-family: var(--font-roboto);
	font-weight: 600;
	font-size: 13px;
	line-height: 14px;
	letter-spacing: -0.01em;
	vertical-align: middle;
	transition: background-color 0.2s;
}

.feeds-game__promo-row:hover .feeds-game__show {
	background: #2A1766;
}

.feeds-game__show i {
	font-size: 8px;
	transition: transform 0.2s;
}

.feeds-game__promo-row[aria-expanded="true"] .feeds-game__show i {
	transform: rotate(90deg);
}

/* Список промокодов */
.feeds-game__body > .collapse,
.feeds-game__body > .collapsing {
	align-self: stretch;
}

.feeds-game__promos {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 6px 8px 6px 16px;
	background: #141320;
}

/* Строка промокода: код + копирование | срок */
.feeds-promo {
	display: flex;
	align-items: stretch;
	gap: 4px;
	height: 40px;
}

.feeds-promo__code {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0 4px 0 12px;
	border: 0;
	border-left: 0.5px solid rgba(15, 159, 132, 1);
	background: none;
	color: #fff;
	font-family: var(--font-oswald);
	font-weight: 500;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: -0.01em;
	vertical-align: middle;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.feeds-promo__code-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.feeds-promo__code:hover,
.feeds-promo__code.is-copied {
	color: #3CFCD5;
}

.feeds-promo__code.is-copied {
	border-left-color: #3CFCD5;
}

/* Иконка копирования — картинка feeds/img/copy-icon.png */
.feeds-promo__copy {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: url('../img/copy-icon.png') center / contain no-repeat;
	transition: opacity 0.2s;
}

.feeds-promo__code.is-copied .feeds-promo__copy {
	opacity: 0.4;
}

/* Срок действия: «00:56:59» + часы / «Сегодня» / «до 15 сентября» / своя подпись */
.feeds-promo__term {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	min-width: 96px;
	height: 40px;
	padding: 0 4px 0 10px;
	background: #100F1A;
	color: #fff;
	font-family: var(--font-roboto-mono);
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 0;
	vertical-align: middle;
	white-space: nowrap;
}

/* Иконка часов — картинка feeds/img/clock-icon.png */
.feeds-promo__clock {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 24px;
	background: url('../img/clock-icon.png') center / contain no-repeat;
}

/* ---------- Соцсети игры ---------- */
.feeds-game__social {
	display: flex;
	align-items: center; /* надпись и иконки по центру высоты */
	justify-content: space-between;
	gap: 6px;
	align-self: stretch;
	height: 48px;
	margin: 0 16px; /* 314 − 2×16 = 282 */
	padding: 0 8px 0 8px; /* справа: 2px рамка + 8px = 10px до последней иконки */
	border: 2px solid rgba(88, 63, 163, 1);
	background: rgba(132, 92, 255, 1);
}

.feeds-game__social-title {
	font-family: var(--font-oswald);
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 1);
}

.feeds-game__social-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Кнопки соцсетей — картинки из feeds/img/ */
.feeds-game__social-link {
	display: inline-flex;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 24px;
	background-color: #7B61FF;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	transition: background-color 0.2s;
}

.feeds-game__social-link:hover {
	background-color: #3E238C;
}

.feeds-game__social-link--vk        { background-image: url('../img/social-vk.png'); }
.feeds-game__social-link--telegram  { background-image: url('../img/social-telegram.png'); }
.feeds-game__social-link--facebook  { background-image: url('../img/social-facebook.png'); }
.feeds-game__social-link--instagram { background-image: url('../img/social-instagram.png'); }
.feeds-game__social-link--x         { background-image: url('../img/social-x.png'); }

/* ---------- База знаний ---------- */
.feeds-game__kb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	margin: 0 16px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 14px;
	background: #7B61FF;
	color: #fff;
	font-family: var(--font-oswald);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
}

.feeds-game__kb:hover {
	color: #fff;
	background: #3E238C;
}

/* ---------- Новости ---------- */
.feeds-game__news {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 148px;
	padding: 6px 0;
	border-top: 2px solid rgba(88, 63, 163, 1);
	background: rgba(126, 114, 194, 0.4);
}

/* «Новости»: 25px слева, ~12px от верха блока до буквы «Н» */
.feeds-game__news-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 23px 0 25px;
}

.feeds-game__news-title {
	margin: 0;
	font-family: var(--font-oswald);
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 1);
}

.feeds-game__news-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 16px;
	padding: 2px 4px;
	border: 1px solid rgba(163, 163, 255, 1);
	border-radius: 8px;
	background: #7B61FF;
	color: rgba(231, 222, 255, 1);
	font-family: var(--font-roboto);
	font-weight: 500;
	font-size: 11px;
	line-height: 12px;
	letter-spacing: -0.01em;
	vertical-align: middle;
	text-decoration: none;
	white-space: nowrap;
}

.feeds-game__news-all i {
	font-size: 7px;
}

.feeds-game__news-all:hover {
	color: #fff;
	background: #3E238C;
}

/* Слайдер: лента карточек 245px с шагом 6px, следующая выглядывает справа.
   Логика (точки, свайп, события) — Bootstrap Carousel, движение ленты — feeds.js */
.feeds-game__carousel {
	--news-w: 245px;
	--news-gap: 22px;       /* > 12px выступа картинки: следующая новость не наезжает на текущую */
	margin-left: 16px;      /* граница обрезки слева = левый край подложки картинки */
	padding: 6px 0 0 12px;  /* 6px — подложка картинки выступает вверх; 16 + 12 = 28px до карточки новости */
	overflow: hidden;
}

.feeds-game__carousel .carousel-inner {
	display: flex;
	gap: var(--news-gap);
	width: auto;
	overflow: visible;
	transition: transform 0.4s ease;
}

.feeds-game__carousel .carousel-item {
	display: block;
	flex: 0 0 var(--news-w);
	float: none;
	width: var(--news-w);
	margin-right: 0;
	transform: none !important;  /* Bootstrap двигает слайды сам — отключаем, двигаем ленту */
	transition: opacity 0.3s ease;
	backface-visibility: visible;
}

/* пролистанные новости слева скрываем, чтобы не торчали за подложкой */
.feeds-game__carousel .carousel-item.is-past {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.feeds-game__carousel .carousel-inner {
		transition: none;
	}
}

/* Карточка новости */
.feeds-news {
	position: relative;
	display: block;
	width: var(--news-w);
	height: 74px;
	background: var(--item-layout-news-default);
	text-decoration: none;
	transition: background-color 0.2s;
}

.feeds-news:hover,
.feeds-news:focus,
.feeds-news:focus-visible {
	background: var(--item-layout-news-focus);
}

/* Обводка картинки — card-overlay-color, смещена влево-вверх */
.feeds-news__img {
	position: absolute;
	top: -6px;
	left: -12px;
	z-index: 1;
	width: 120px;
	height: 68px;
	padding: 4px;
	background: var(--card-overlay-color);
}

.feeds-news__img-inner {
	display: block;
	width: 112px;
	height: 60px;
	overflow: hidden;
	background: linear-gradient(135deg, #9D7CFF, #4D369A); /* если у записи нет картинки */
}

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

/* Текст справа от картинки: 108 (картинка) + 10 (gap) = 118px */
.feeds-news__text {
	position: absolute;
	inset: 0 0 0 118px;
	display: block;
}

.feeds-news__date {
	position: absolute;
	top: 7px;
	right: 11px;
	font-family: var(--font-roboto-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 12px;
	letter-spacing: 0;
	vertical-align: middle;
	white-space: nowrap;
	color: rgba(182, 157, 255, 1);
}

.feeds-news__excerpt {
	position: absolute;
	top: 23px; /* 7 + 12 (дата) + 4 (gap) */
	left: 0;
	display: -webkit-box;
	width: 103px;
	max-height: 42px; /* 3 строки по 14px */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--font-oswald);
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: -0.01em;
	color: rgba(192, 189, 201, 1);
}

.feeds-news:hover .feeds-news__excerpt {
	color: #fff;
}

/* Стрелка «дальше» — поверх выглядывающего кусочка следующей новости */
.feeds-game__next.carousel-control-next {
	top: 0;
	bottom: auto;
	width: max(32px, calc(100% - 12px - var(--news-w)));
	height: calc(6px + 74px); /* выступ картинки + высота новости */
	background: none;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.feeds-game__next.carousel-control-next:hover,
.feeds-game__next.carousel-control-next:focus-visible {
	opacity: 1;
}

.feeds-game__next .carousel-control-next-icon {
	width: 16px;
	height: 16px;
	background-image: none;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* на последней новости стрелку прячем */
.feeds-game__next.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Точки пагинации */
.feeds-game__dots.carousel-indicators {
	position: static;
	gap: 6px;
	margin: 10px 0 0;
	padding-right: 12px; /* компенсируем сдвиг слайдера, точки по центру карточки */
}

.feeds-game__dots.carousel-indicators [data-bs-target] {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background-color: rgba(88, 63, 163, 1);
	opacity: 1;
	text-indent: 0;
}

.feeds-game__dots.carousel-indicators .active {
	background-color: rgba(157, 124, 255, 1);
}

@media (max-width: 767.98px) {
	.feeds-b2 {
		padding-top: 48px;
	}
}

@media (max-width: 575.98px) {
	.feeds-game {
		min-width: 0; /* на совсем узких экранах не вылезать за край */
	}

	.feeds-hero.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.feeds-hero__head {
		position: relative;
		min-width: 0;
	}

	/* звёзды не занимают место в строке — лежат поверх по краям */
	.feeds-hero__stars-col {
		position: absolute;
		top: 8px;
		z-index: 0;
		padding: 0;
	}

	.feeds-hero__stars-col--left {
		left: 0;
	}

	.feeds-hero__stars-col--right {
		right: 0;
	}

	.feeds-hero__stars--left img {
		--stars-x: 4px;
		--stars-y: 24px;
	}

	.feeds-hero__stars--right img {
		--stars-x: -4px;
		--stars-y: 8px;
	}

	.feeds-hero__text {
		position: relative;
		z-index: 1;
	}

	.feeds-hero__title {
		font-size: 22px;
		line-height: 24px;
	}

	.feeds-social {
		padding: 16px;
	}
}

.section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.site-footer {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}