/* refactor.css — визуальный рефактор: иконки, раскладка «в один экран»,
   переработка сцен welcome / венок(select+река) / прыжок / статьи.
   Только transform/opacity в анимациях, декор pointer-events:none,
   все цвета/размеры — из tokens.css (слои 4–5). Десктоп-first.
   Подключается ПОСЛЕДНИМ — уточняет и перекрывает базовые стили. */

/* ═══════════════════════════════════════════
   1. Базовая иконка (.ui-icon → SVG-спрайт)
═══════════════════════════════════════════ */
.ui-icon {
	width: var(--icon-md);
	height: var(--icon-md);
	display: inline-block;
	color: var(--icon-color);
	fill: currentColor;
	flex: none;
	vertical-align: middle;
}

.ui-icon use {
	color: inherit;
}

.ui-icon--sm {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.ui-icon--lg {
	width: var(--icon-lg);
	height: var(--icon-lg);
}

.ui-icon--xl {
	width: var(--icon-xl);
	height: var(--icon-xl);
}

/* ═══════════════════════════════════════════
   1.1 Единый размер красных кнопок — формат «Смелый вызов»
   52px высота, 18px шрифт, авто-ширина. Все .btn приведены к нему,
   чтобы не было «одна больше другой». Узкие/ghost-варианты имеют
   собственные переопределения ниже.
═══════════════════════════════════════════ */
.btn {
	height: 52px;
	min-height: 52px;
	width: auto;
	min-width: 0;
	padding: 0 var(--space-l);
	font-size: 18px;
}

.btn--wide {
	width: auto;
	min-width: 0;
}

/* ═══════════════════════════════════════════
   2. Раскладка «в один экран»
   Каждая сцена #stage помещается в 100vh; скролл — только страховка.
═══════════════════════════════════════════ */
.scene__inner {
	padding-top: calc(var(--header-h) + var(--space-s));
	padding-bottom: var(--space-m);
}

/* На средних высотах ужимаем ритм */
@media (max-height: 860px) {
	:root {
		--panel-pad-y: var(--space-m);
		--panel-pad-x: var(--space-l);
	}

	.game__title {
		margin-bottom: var(--space-xs);
	}

	.game__intro {
		margin-bottom: var(--space-s);
	}
}

@media (max-height: 720px) {
	:root {
		--panel-pad-y: var(--space-s);
		--panel-pad-x: var(--space-m);
	}

	.game__intro {
		font-size: var(--fs-body);
	}
}

/* ═══════════════════════════════════════════
   3. Логотипы партнёров (общий слот <img>)
   Без кругов/рамок — только сам логотип с мягким золотым свечением
   вокруг его силуэта (drop-shadow повторяет альфа-контур PNG).
   Единая высота у всех логотипов = визуально «один размер».
═══════════════════════════════════════════ */
.partner-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: var(--logo-h, 60px);
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	color: var(--color-cream);
	transition: transform 0.25s ease;
}

.partner-logo:hover,
.partner-logo:focus-visible {
	transform: translateY(-4px) scale(1.06);
}

.partner-logo__img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 0 8px rgba(255, 208, 142, 0.55)) drop-shadow(0 0 20px rgba(255, 199, 120, 0.3));
	transition: filter 0.25s ease;
}

.partner-logo:hover .partner-logo__img,
.partner-logo:focus-visible .partner-logo__img {
	filter: drop-shadow(0 0 12px rgba(255, 208, 142, 0.75)) drop-shadow(0 0 28px rgba(255, 199, 120, 0.42));
}

/* МТС — квадратный логотип (801×804), остальные широкие (~2.5:1). При
   height:100% квадрат читается крупнее тонких широких логотипов. Приводим
   к единой визуальной высоте во ВСЕХ контекстах (welcome/вакансии/события/
   дубликаты каталога): фиксируем по высоте и не даём растягиваться по слоту. */
.partner-logo__img[src$="logo-mts.png"] {
	height: auto;
	width: auto;
	max-height: calc(var(--logo-h, 60px) * 0.82);
}

.partner-logo__fallback {
	align-items: center;
	justify-content: center;
	height: 100%;
	min-width: 96px;
	padding: 0 var(--space-s);
	border: 1.5px solid var(--color-gold);
	border-radius: var(--radius-full);
	background: rgba(18, 18, 23, 0.55);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	filter: drop-shadow(0 0 10px rgba(255, 208, 142, 0.35));
}

/* ═══════════════════════════════════════════
   3.1 Вакансии — панель по центру, логотипы в одну строку
═══════════════════════════════════════════ */
.vacancies__content {
	margin-inline: auto;
}

.vacancies__content .partner-logo-row {
	flex-wrap: nowrap;
}

.vacancies__content .partner-logo {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/* ═══════════════════════════════════════════
   3.2 Дубликаты каталога (вакансии/статьи/события) после формы —
   для тех, кто нажал «Пропустить игры». Простые секции в потоке,
   без игровой навигации и CTA-кнопок.
═══════════════════════════════════════════ */
.catalog-after {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	/* Раньше каждая секция была min-height:100vh — между блоками зияли пустые
	   экраны. Теперь высота по контенту + умеренный вертикальный ритм. */
	padding: var(--space-l) var(--space-section-x);
	/* Без overflow:hidden — декор не режется; туман/светлячки не дублируем
	   в каждой секции. Единый фон и атмосфера — из fixed #world. */
	overflow: visible;
}

.catalog-after > .scene-panel {
	position: relative;
	z-index: 2;
}

/* ── Подсказка «листай ниже» под формой ── */
.scroll-cue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	margin-top: var(--space-l);
	text-decoration: none;
	cursor: pointer;
}

/* Бабл с текстом — оформлен как подзаголовок секций (.section-subtitle) */
.scroll-cue__bubble {
	padding: 12px var(--space-l);
	border: 1.5px solid rgba(255, 208, 142, 0.5);
	border-radius: var(--radius-full);
	background: rgba(255, 208, 142, 0.07);
	box-shadow: 0 0 20px rgba(255, 199, 120, 0.14);
	font-size: var(--fs-20);
	font-weight: 500;
	color: var(--color-gold);
	line-height: 1.3;
	text-align: center;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.scroll-cue:hover .scroll-cue__bubble {
	background: rgba(255, 208, 142, 0.12);
	box-shadow: 0 0 28px rgba(255, 199, 120, 0.24);
}

/* Стрелка — под баблом */
.scroll-cue__chevron {
	display: inline-flex;
	color: var(--color-gold);
	will-change: transform;
	animation: scroll-cue-bob 1.6s ease-in-out infinite;
}

.scroll-cue__chevron svg {
	width: 28px;
	height: 28px;
	display: block;
}

@keyframes scroll-cue-bob {
	0%, 100% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scroll-cue__chevron {
		animation: none;
	}
}

/* Форма + дубликаты каталога: без локальных слоёв тумана/светлячков */
#form-finale .firefly-layer,
#form-finale .fog-layer,
.catalog-after .fog-layer,
.catalog-after .firefly-layer,
.catalog-after .accent-layer {
	display: none;
}

/* ═══════════════════════════════════════════
   4. WELCOME — компактный интро сверху, логотипы рядом
      НАД костром, кнопка снизу. Без наложений: каждый блок
      получает своё место в колонке, ничего не позиционируется
      поверх текста.
═══════════════════════════════════════════ */
.welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--space-m), 5vh, 96px);
	padding: calc(var(--header-h) + var(--space-s)) var(--space-section-x) var(--space-l);
	height: 100%;
	text-align: center;
}

.welcome__intro {
	max-width: 720px;
	padding: var(--space-m) var(--space-l);
	flex: none;
}

.welcome__intro .welcome__title {
	margin-bottom: var(--space-xs);
}

.welcome__lead {
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-cream);
	margin-bottom: var(--space-xs);
}

.welcome .call-phrase {
	font-size: var(--fs-body);
	color: var(--color-gold);
	text-shadow: var(--glow-white);
	margin: 0;
}

/* Логотипы — ряд над костром, не задевает ни текст сверху, ни кнопку снизу */
.welcome__logos {
	--logo-h: 60px;
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-m) var(--space-l);
}

.welcome__cta {
	flex: none;
}

/* ═══════════════════════════════════════════
   5. ВЕНОК — шаг select (венок в центре, карточки по бокам)
═══════════════════════════════════════════ */
.wreath-select {
	max-width: 1120px;
	width: 100%;
	text-align: center;
}

.wreath-select .game__title,
.wreath-select .game__intro {
	text-align: center;
}

.wreath-columns {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-m);
	margin: var(--space-s) 0 var(--space-m);
}

.wreath-side {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

/* Карточки растений — горизонтальные (иконка слева, текст справа) */
.wreath-columns .plant-card {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	text-align: left;
	padding: var(--space-s) var(--space-m);
}

.wreath-columns .plant-card__icon {
	margin: 0;
	display: inline-flex;
}

.wreath-columns .plant-card__icon .ui-icon {
	width: 36px;
	height: 36px;
	color: var(--color-gold);
}

.plant-card__body {
	display: flex;
	flex-direction: column;
}

/* Венок-основа + вплетённые иконки.
   Анимация покачивания висит на .wreath-stage (общий родитель), а не на
   самом SVG — иначе кольцо «дышит» отдельно от вплетённых иконок и это
   выглядит как рассинхрон/лаг. */
.wreath-stage {
	position: relative;
	width: min(36vh, 320px);
	height: min(36vh, 320px);
	margin: 0 auto;
	--wreath-r: min(14vh, 120px);
	will-change: transform;
	animation: float-bob 4.2s ease-in-out infinite;
}

.wreath-base {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(120, 175, 90, 0.3));
}

/* Мягкая подсветка-аура под венком (очень слабая, без тёмного диска) */
.wreath-halo {
	fill: rgba(120, 175, 90, 0.08);
}

/* Кольцо-основа: плотная зелёная лента, чтобы между листьями не просвечивал
   фон, но без «дыры»-диска в центре (лента, а не залитый круг). */
.wreath-ring-base {
	fill: none;
	stroke: #2c4a24;
	stroke-width: 30;
	opacity: 0.95;
}

/* Лист: заливка + тонкая прожилка для объёма */
.wreath-leaf {
	fill: currentColor;
}

.wreath-leaf__vein {
	fill: none;
	stroke: rgba(0, 0, 0, 0.20);
	stroke-width: 0.7;
	stroke-linecap: round;
}

/* Пять оттенков зелени — глубина и «живость» листвы */
.wreath-leaf--dark {
	color: #22371a;
	opacity: 0.98;
}

.wreath-leaf--dark2 {
	color: #2b451f;
	opacity: 1;
}

.wreath-leaf--mid {
	color: #3f6329;
	opacity: 1;
}

.wreath-leaf--mid2 {
	color: #4e7431;
	opacity: 1;
}

.wreath-leaf--light {
	color: #83ad52;
	opacity: 0.95;
}

/* Ягоды-акценты — тёплая брусника */
.wreath-berries circle {
	fill: #b5342b;
	stroke: #7d1f1a;
	stroke-width: 0.5;
	filter: drop-shadow(0 0 3px rgba(255, 120, 80, 0.35));
}

/* Мелкие лесные цветы — кремовые лепестки, золотая сердцевина */
.wreath-flower__petal {
	fill: #f6ecd2;
	filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.5));
}

.wreath-flower__core {
	fill: var(--color-gold, #e8b64a);
}

.wreath-weave {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wreath-slot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * var(--wreath-r))) rotate(calc(var(--i) * -60deg));
}

/* Мягкая тёплая подсветка-«площадка» под цветком, чтобы он не терялся на зелёной листве */
.wreath-slot::before {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 120, 0.4) 0%, rgba(255, 214, 120, 0.12) 55%, transparent 75%);
	z-index: -1;
}

.wreath-slot .ui-icon {
	width: 100%;
	height: 100%;
	color: var(--color-gold-glow);
	filter: drop-shadow(0 0 6px var(--color-gold-glow));
}

/* Плавное появление/исчезновение цветка в венке (вместо резкого opacity-скачка) */
.wreath-slot-t {
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wreath-slot-t-hidden {
	opacity: 0;
	transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * var(--wreath-r))) rotate(calc(var(--i) * -60deg)) scale(0.15) rotate(-35deg);
}

.wreath-slot-t-visible {
	opacity: 1;
	transform: rotate(calc(var(--i) * 60deg)) translateY(calc(-1 * var(--wreath-r))) rotate(calc(var(--i) * -60deg)) scale(1) rotate(0deg);
}

.wreath-counter {
	text-align: center;
	margin: 0 0 var(--space-m);
}

/* ═══════════════════════════════════════════
   6. ВЕНОК — шаг path («река»)
═══════════════════════════════════════════ */
.wreath-path {
	max-width: 980px;
	width: 100%;
	text-align: center;
}

.river-stage {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: var(--space-m) auto 0;
	aspect-ratio: 800 / 320;
}

.river-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* ─── РЕКА: рукава-дельта переменной ширины ─── */
.river-arm {
	transition: opacity 0.45s ease;
}

.river-arm.is-dim {
	opacity: 0.16;
}

/* мелководье светлое (по краям) */
.river-shallow {
	fill: var(--river-shallow);
	opacity: 0.92;
}

/* глубина — тёмный градиент по центру + холодный отблеск неба сверху */
.river-deep {
	fill: url(#waterDeep);
}

/* тонкая тёмная кромка-берег */
.river-edge {
	fill: none;
	stroke: var(--river-bank);
	stroke-width: 2.5;
	stroke-linejoin: round;
	opacity: 0.6;
}

/* Исток-омут: тёмная сердцевина под широким устьем */
.river-deep-src {
	fill: url(#waterDeep);
	opacity: 0.95;
}

/* Мягкое свечение втекания под кнопкой (устье рукава) */
.river-mouth {
	mix-blend-mode: screen;
}

/* Кувшинки — маленькие, полупрозрачные, с мягкой тенью, у берегов */
.river-lily {
	opacity: 0.5;
}

.river-lily__shadow {
	fill: #06131d;
	opacity: 0.4;
}

.river-lily__pad {
	fill: #315e34;
	stroke: #4f7d43;
	stroke-width: 0.6;
}

.river-lily__flower {
	fill: #f3e6cf;
	opacity: 0.85;
}

/* Размытая лунная дорожка на воде (мягкая, не «линза») */
.river-moonpath {
	transform-box: fill-box;
	transform-origin: center;
	mix-blend-mode: screen;
	will-change: opacity, transform;
	animation: moon-shimmer 5s ease-in-out infinite;
}

/* Течение: белёсые вытянутые блики дрейфуют вдоль русла */
.river-ripple {
	fill: var(--river-ripple);
	opacity: 0;
	offset-rotate: auto;
	offset-distance: 0%;
	will-change: offset-distance, opacity;
	animation: ripple-flow var(--rdur, 6s) linear infinite var(--rdelay, 0s);
}

/* ─── Мини-венок: стоит на старте, плывёт по осевой линии рукава ─── */
.mini-wreath {
	offset-path: path('M80 160 L91.4 156.7 L102.7 153.7 L114.1 150.9 L125.4 148.2 L136.8 145.6 L148.1 143.1 L159.5 140.5 L170.9 138 L182.2 135.3 L193.6 132.5 L204.9 129.6 L216.3 126.5 L227.6 123.3 L239 119.8 L250.4 116.3 L261.7 112.7 L273.1 109.1 L284.4 105.5 L295.8 101.9 L307.1 98.5 L318.5 95.3 L329.9 92.4 L341.2 89.8 L352.6 87.5 L363.9 85.7 L375.3 84.1 L386.6 83 L398 82.2 L409.4 81.8 L420.7 81.6 L432.1 81.7 L443.4 81.9 L454.8 82.2 L466.1 82.5 L477.5 82.9 L488.9 83.1 L500.2 83.2 L511.6 83.1 L522.9 82.8 L534.3 82.3 L545.6 81.5 L557 80.6 L568.4 79.5 L579.7 78.3 L591.1 77 L602.4 75.7 L613.8 74.4 L625.1 73.1 L636.5 72 L647.9 71.1 L659.2 70.4 L670.6 69.9 L681.9 69.6 L693.3 69.5 L704.6 69.7 L716 70');
	offset-distance: 0%;
	offset-rotate: 0deg;
	filter: drop-shadow(0 0 12px rgba(255, 199, 120, 0.45));
	will-change: offset-distance;
}

.mini-wreath[data-target="0"] {
	offset-path: path('M80 160 L91.4 156.7 L102.7 153.7 L114.1 150.9 L125.4 148.2 L136.8 145.6 L148.1 143.1 L159.5 140.5 L170.9 138 L182.2 135.3 L193.6 132.5 L204.9 129.6 L216.3 126.5 L227.6 123.3 L239 119.8 L250.4 116.3 L261.7 112.7 L273.1 109.1 L284.4 105.5 L295.8 101.9 L307.1 98.5 L318.5 95.3 L329.9 92.4 L341.2 89.8 L352.6 87.5 L363.9 85.7 L375.3 84.1 L386.6 83 L398 82.2 L409.4 81.8 L420.7 81.6 L432.1 81.7 L443.4 81.9 L454.8 82.2 L466.1 82.5 L477.5 82.9 L488.9 83.1 L500.2 83.2 L511.6 83.1 L522.9 82.8 L534.3 82.3 L545.6 81.5 L557 80.6 L568.4 79.5 L579.7 78.3 L591.1 77 L602.4 75.7 L613.8 74.4 L625.1 73.1 L636.5 72 L647.9 71.1 L659.2 70.4 L670.6 69.9 L681.9 69.6 L693.3 69.5 L704.6 69.7 L716 70');
}

.mini-wreath[data-target="1"] {
	offset-path: path('M80 160 L91.4 160.5 L102.7 160.8 L114.1 160.8 L125.4 160.5 L136.8 159.9 L148.1 159.1 L159.5 158 L170.9 156.8 L182.2 155.5 L193.6 154.3 L204.9 153.3 L216.3 152.5 L227.6 152.1 L239 152.1 L250.4 152.5 L261.7 153.5 L273.1 154.8 L284.4 156.6 L295.8 158.6 L307.1 160.9 L318.5 163.2 L329.9 165.5 L341.2 167.6 L352.6 169.4 L363.9 170.8 L375.3 171.7 L386.6 172 L398 171.7 L409.4 170.9 L420.7 169.6 L432.1 167.8 L443.4 165.6 L454.8 163.3 L466.1 160.9 L477.5 158.5 L488.9 156.3 L500.2 154.4 L511.6 152.9 L522.9 151.8 L534.3 151.2 L545.6 151.2 L557 151.5 L568.4 152.3 L579.7 153.4 L591.1 154.7 L602.4 156.1 L613.8 157.5 L625.1 158.8 L636.5 159.9 L647.9 160.8 L659.2 161.3 L670.6 161.5 L681.9 161.5 L693.3 161.2 L704.6 160.6 L716 160');
}

.mini-wreath[data-target="2"] {
	offset-path: path('M80 160 L91.4 163 L102.7 165.9 L114.1 168.8 L125.4 171.6 L136.8 174.5 L148.1 177.5 L159.5 180.6 L170.9 183.8 L182.2 187.2 L193.6 190.8 L204.9 194.4 L216.3 198.2 L227.6 202 L239 205.7 L250.4 209.4 L261.7 212.9 L273.1 216.1 L284.4 219.1 L295.8 221.7 L307.1 224 L318.5 225.8 L329.9 227.3 L341.2 228.3 L352.6 229 L363.9 229.4 L375.3 229.5 L386.6 229.5 L398 229.4 L409.4 229.2 L420.7 229.1 L432.1 229.1 L443.4 229.3 L454.8 229.7 L466.1 230.4 L477.5 231.3 L488.9 232.6 L500.2 234 L511.6 235.7 L522.9 237.6 L534.3 239.6 L545.6 241.6 L557 243.5 L568.4 245.4 L579.7 247.1 L591.1 248.6 L602.4 249.9 L613.8 250.8 L625.1 251.5 L636.5 251.9 L647.9 252.1 L659.2 252 L670.6 251.7 L681.9 251.3 L693.3 250.9 L704.6 250.4 L716 250');
}

.mini-wreath.is-sailing {
	animation: wreath-sail 1.75s cubic-bezier(0.45, 0.05, 0.35, 1) forwards;
}

.mini-wreath__spin {
	transform-box: fill-box;
	transform-origin: center;
	animation: mini-wreath-bob 3.4s ease-in-out infinite;
}

.mini-wreath__glow {
	fill: rgba(255, 190, 110, 0.16);
}

.mini-wreath__core {
	fill: rgba(255, 227, 170, 0.55);
}

.mini-wreath .wreath-berries circle {
	fill: #b5342b;
}

.river-banks {
	position: absolute;
	inset: 0;
}

.river-bank {
	position: absolute;
	right: 0.5%;
	top: calc(50% + (var(--i) - 1) * 27%);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-m);
	background: var(--color-card-fill);
	border: 2px solid rgba(255, 208, 142, 0.3);
	border-radius: var(--radius-full);
	color: var(--color-cream);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-16);
	cursor: pointer;
	white-space: nowrap;
	backdrop-filter: blur(var(--card-blur));
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, opacity 0.3s;
}

.river-bank:hover:not(:disabled) {
	border-color: var(--color-gold);
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 0 18px rgba(255, 199, 120, 0.25);
}

.river-bank:disabled {
	cursor: default;
}

.river-bank.is-dim {
	opacity: 0.35;
}

.river-bank.is-chosen {
	border-color: var(--color-gold);
	box-shadow: 0 0 24px rgba(255, 199, 120, 0.5);
	transform: translateY(-50%) scale(1.06);
}

.river-bank__icon .ui-icon {
	width: 24px;
	height: 24px;
	color: var(--color-gold);
}

/* ─── Мобильная река: схематичные волнистые ручьи (штрихи, а не полигоны).
   SVG-вариант показывается только на ≤600px (переключение в медиа-блоке ниже). ─── */
.river-svg--mobile {
	display: none;
}

.river-stream-edge {
	fill: none;
	stroke: var(--river-bank);
	stroke-width: 19;
	stroke-linecap: round;
	opacity: 0.65;
}

.river-stream {
	fill: none;
	stroke: var(--river-shallow);
	stroke-width: 15;
	stroke-linecap: round;
	opacity: 0.9;
}

.river-stream-deep {
	fill: none;
	stroke: var(--river-mid);
	stroke-width: 8;
	stroke-linecap: round;
}

/* Заплыв мини-венка по мобильным руслам (специфичнее десктопных правил) */
.river-svg--mobile .mini-wreath,
.river-svg--mobile .mini-wreath[data-target="1"] {
	offset-path: path('M296 210 C 272 218, 258 200, 240 206 C 222 212, 210 200, 192 208 C 176 215, 160 206, 150 210');
}

.river-svg--mobile .mini-wreath[data-target="0"] {
	offset-path: path('M296 210 C 272 200, 260 182, 244 162 C 228 142, 210 132, 194 114 C 182 100, 156 84, 150 64');
}

.river-svg--mobile .mini-wreath[data-target="2"] {
	offset-path: path('M296 210 C 272 220, 260 238, 244 258 C 228 278, 210 288, 194 306 C 182 320, 156 336, 150 356');
}

/* ═══════════════════════════════════════════
   7. ПРЫЖОК — искры-прогресс + вспышка костра
═══════════════════════════════════════════ */
.bonfire-questions {
	max-width: 720px;
	width: 100%;
	text-align: center;
}

.spark-progress {
	display: flex;
	gap: var(--space-s);
	justify-content: center;
	margin: var(--space-s) 0;
}

.spark-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(255, 208, 142, 0.2);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.45);
	transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.spark-dot.is-lit {
	background: radial-gradient(circle at 50% 40%, var(--color-cream), var(--color-gold-glow));
	box-shadow: 0 0 12px 2px var(--color-gold-glow);
	transform: scale(1.2);
}

.bonfire-progress-text {
	font-size: var(--fs-14);
	color: var(--color-gold);
	margin: 0 0 var(--space-s);
}

/* ── Костёр в Игре 2 (тот же детальный, что на первом экране) ── */
.game-fire {
	position: relative;
	width: 100%;
	height: 200px;
	margin: var(--space-s) auto 0;
	pointer-events: none;
}

.game-fire .fire-bg__bonfire {
	--fire-scale: 0.8;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) scale(var(--fire-scale));
	transition: none;
}

.game-fire--mini {
	height: 116px;
	margin: 0 auto var(--space-xs);
}

.game-fire--mini .fire-bg__bonfire {
	--fire-scale: 0.46;
}

/* Вспышка костра при ответе */
.game-fire--mini.is-flare .fire-bg__bonfire {
	animation: bonfire-breathe 3.4s ease-in-out infinite, bonfire-flare 0.6s ease-out;
}

@keyframes bonfire-flare {
	0%, 100% {
		transform: translateX(-50%) scale(var(--fire-scale));
	}
	35% {
		transform: translateX(-50%) scale(calc(var(--fire-scale) * 1.16));
	}
}

/* Стартовый экран Игры 2 — просторная рамка, всё по центру */
.bonfire-start {
	max-width: 860px;
	text-align: center;
}

.bonfire-start .game__intro {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.bonfire-start__cta {
	margin: var(--space-s) auto 0;
}

/* Экран вопросов — компактно, чтобы всё помещалось */
.bonfire-questions {
	max-width: 760px;
	text-align: center;
}

.bonfire-questions .spark-progress {
	margin: var(--space-xs) 0;
}

.bonfire-mini {
	position: relative;
	width: 130px;
	height: 96px;
	margin: 0 auto var(--space-m);
}

.bonfire-mini__glow {
	position: absolute;
	bottom: -14px;
	left: 50%;
	width: 180px;
	height: 130px;
	transform: translateX(-50%);
	background: var(--world-moon-glow);
	opacity: 0.5;
	pointer-events: none;
}

.bonfire-mini__flames {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 110px;
	height: 84px;
	transform: translateX(-50%);
	transform-origin: bottom center;
}

.bonfire-mini .flame {
	position: absolute;
	bottom: 0;
}

.bonfire-mini .flame--1 {
	left: 22px;
}

.bonfire-mini .flame--2 {
	left: 44px;
}

.bonfire-mini .flame--3 {
	left: 66px;
}

.bonfire-mini__wave {
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 90px;
	height: 90px;
	margin-left: -45px;
	border-radius: 50%;
	border: 2px solid var(--color-gold-glow);
	opacity: 0;
	pointer-events: none;
}

.bonfire-mini__sparks {
	position: absolute;
	bottom: 30px;
	left: 50%;
	width: 90px;
	height: 0;
	transform: translateX(-50%);
}

.bonfire-mini__sparks span {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-gold-glow);
	box-shadow: 0 0 6px 1px rgba(255, 140, 40, 0.7);
	opacity: 0;
}

/* Вспышка при ответе (класс is-flare добавляется через x-effect) */
.bonfire-mini.is-flare .bonfire-mini__flames {
	animation: flare-flames 0.6s ease-out;
}

.bonfire-mini.is-flare .bonfire-mini__wave {
	animation: flare-wave 0.7s ease-out;
}

.bonfire-mini.is-flare .bonfire-mini__sparks span {
	animation: flare-spark 0.85s ease-out;
}

.bonfire-mini__sparks span:nth-child(1) {
	--sx: -34px;
	animation-delay: 0.02s;
}

.bonfire-mini__sparks span:nth-child(2) {
	--sx: -18px;
	animation-delay: 0.06s;
}

.bonfire-mini__sparks span:nth-child(3) {
	--sx: -4px;
	animation-delay: 0s;
}

.bonfire-mini__sparks span:nth-child(4) {
	--sx: 10px;
	animation-delay: 0.08s;
}

.bonfire-mini__sparks span:nth-child(5) {
	--sx: 24px;
	animation-delay: 0.04s;
}

.bonfire-mini__sparks span:nth-child(6) {
	--sx: 38px;
	animation-delay: 0.1s;
}

.result-icon {
	text-align: center;
}

.result-icon .ui-icon {
	width: 74px;
	height: 74px;
	color: var(--color-gold);
	filter: drop-shadow(var(--glow-gold));
}

/* ═══════════════════════════════════════════
   8. СТАТЬИ — свитки-пергамент + вензеля заголовка
═══════════════════════════════════════════ */
.articles__content {
	max-width: 1320px;
	width: 100%;
	margin-left: auto; /* блок по центру сцены */
	margin-right: auto;
	text-align: center;
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	color: var(--color-gold);
	margin-bottom: var(--space-xs);
}

.section-heading h2 {
	margin: 0;
}

.ornament-flourish {
	width: 130px;
	height: 32px;
	color: var(--color-gold);
	opacity: 0.85;
	flex: none;
}

.ornament-flourish--r {
	transform: scaleX(-1);
}

.articles__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-m);
	align-items: stretch; /* свитки одной высоты (по самому высокому) */
	width: 100%;
	/* больше воздуха между подзаголовком, рядом свитков и кнопкой «Дальше» */
	margin: calc(var(--space-l) + var(--space-m)) auto;
}

/* Больше воздуха под заголовком/описанием блока */
.articles__content .section-heading {
	margin-bottom: var(--space-s);
}

.articles__content .section-subtitle {
	margin-bottom: var(--space-l);
}

/* Карточка = свиток пергамента (кликабельная ссылка целиком) */
.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center; /* логотип и заголовок по центру свитка */
	gap: var(--space-s);
	text-align: center;
	text-decoration: none;
	min-height: 264px; /* свитки короче */
	color: var(--scroll-text);
	padding: var(--space-l) var(--space-m) var(--space-l);
	filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
	transition: transform 0.25s ease;
	overflow: visible;
}

/* Полотно пергамента: неравномерный тон + текстура + неровные края + каймы */
.article-card__paper {
	position: absolute;
	inset: 0;
	z-index: -1; /* позади контента, но в потоке блендинга карточки */
	border-radius: 5px;
	/* неравномерный тон: светлее в центре, темнее к краям + мраморные разводы */
	background: radial-gradient(55% 42% at 28% 24%, rgba(120, 80, 30, 0.12), transparent 62%),
	radial-gradient(50% 40% at 78% 72%, rgba(110, 70, 25, 0.14), transparent 62%),
	radial-gradient(40% 30% at 62% 30%, rgba(150, 110, 55, 0.10), transparent 60%),
	radial-gradient(120% 92% at 50% 44%,
			var(--c-parch-light) 0%,
			var(--c-parch-mid) 50%,
			var(--c-parch-dark) 100%);
	/* тёплая внутренняя кайма + тёмные подпалины по краям + тени под валиками */
	box-shadow: inset 0 0 0 1.5px rgba(120, 84, 28, 0.5),
	inset 0 0 36px rgba(92, 56, 16, 0.5),
	inset 0 14px 16px -10px rgba(70, 46, 12, 0.6),
	inset 0 -14px 16px -10px rgba(70, 46, 12, 0.6);
	filter: url(#paper-edge); /* чуть неровные/волнистые края */
}

/* Подпалины/пятна по углам (тёмно-коричневые, выразительнее) */
.article-card__paper::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 5px;
	background: radial-gradient(46% 40% at 4% 6%, rgba(74, 44, 12, 0.34), transparent 68%),
	radial-gradient(44% 38% at 96% 9%, rgba(74, 44, 12, 0.28), transparent 68%),
	radial-gradient(48% 42% at 94% 94%, rgba(58, 34, 10, 0.34), transparent 70%),
	radial-gradient(46% 40% at 6% 92%, rgba(58, 34, 10, 0.30), transparent 70%);
	pointer-events: none;
}

/* Бумажная текстура: волокно + мелкое зерно (SVG-noise, data-URI) */
.article-card__paper::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 5px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.055 0.12' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 220px 220px;
	mix-blend-mode: multiply;
	opacity: 0.22;
	pointer-events: none;
}

/* Валики-стержни сверху/снизу — объёмные (градиент поперёк, тень, скруглённые торцы) */
.article-card::before,
.article-card::after {
	content: '';
	position: absolute;
	left: -8px;
	right: -8px;
	height: 20px;
	z-index: 2;
	border-radius: 11px / 60%;
	background: linear-gradient(180deg,
	#7c5a2a 0%,
	#caa768 22%,
	#f0dcac 50%,
	#b28f52 78%,
	#6f4f22 100%);
	box-shadow: inset 0 1px 1px rgba(255, 240, 200, 0.5),
	0 4px 8px rgba(0, 0, 0, 0.45);
}

.article-card::before {
	top: -10px;
}

.article-card::after {
	bottom: -10px;
}

.article-card:hover {
	transform: translateY(-5px);
}

/* Логотип компании сверху свитка — без подложки, прямо на пергаменте */
.article-card__logo {
	align-self: center;
	display: inline-flex;
	align-items: center;
	height: 38px;
}

.article-card__logo img {
	height: 100%;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
	/* белый фон, вшитый в PNG, растворяется на пергаменте (darken убирает белое,
	   сохраняя цветные части логотипа) */
	mix-blend-mode: darken;
}

.article-card__company {
	color: #6f4a16;
	font-weight: 700;
	font-size: var(--fs-14);
}

.article-card__title {
	color: #4b3417; /* выцветшие тёмно-коричневые чернила */
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

/* Кнопка «Дальше» — ниже ряда, по центру, с большим отступом */
.articles__cta {
	margin-top: calc(var(--space-l) + var(--space-m));
	text-align: center;
}

/* Компактная кнопка свитков — единый формат 52px */
.articles__cta .btn {
	height: 52px;
	min-height: 52px;
	width: auto;
	min-width: 0;
	padding: 0 var(--space-l);
	font-size: 18px;
}

/* Компактный ритм на невысоких экранах — чтобы сцена целиком помещалась
   в 100vh без внутреннего скролла (правило должно идти ПОСЛЕ базовых
   .articles__grid/.article-card выше — иначе порядок каскада проиграет
   при равной специфичности, даже если медиа-запрос совпал). */
@media (max-height: 720px) {
	.articles__grid {
		margin: var(--space-xs) 0;
	}

	.article-card {
		padding: var(--space-s) var(--space-s) var(--space-xs);
	}

	.section-heading {
		margin-bottom: var(--space-3xs);
	}

	.articles__cta {
		margin-top: var(--space-s);
	}
}

/* ═══════════════════════════════════════════
   8.5. Квест-акценты: рамка «Инструкция искателя» (challenge),
        «Подсказка искателя» на результатах, компактные CTA результатов
═══════════════════════════════════════════ */

/* ── Challenge: единственный совет — рамка «Инструкция искателя» ── */
.challenge__content {
	max-width: 760px;
}

.challenge__lead {
	margin: 0;
}

.quest-card {
	padding: var(--space-m);
	border: 1.5px solid rgba(255, 208, 142, 0.55);
	border-radius: var(--radius-16, 16px);
	background: rgba(255, 208, 142, 0.07);
	box-shadow: 0 0 26px rgba(255, 199, 120, 0.14), inset 0 0 22px rgba(255, 199, 120, 0.05);
	text-align: left;
}

/* Листок-папоротник в одну строку с заголовком — нет пустого места слева,
   текст под ними занимает всю ширину рамки. */
.quest-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.quest-card__fern {
	width: 30px;
	height: 38px;
	flex: none;
	filter: drop-shadow(0 0 8px rgba(131, 173, 82, 0.45));
}

.quest-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--color-gold);
}

.quest-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-cream);
}

.quest-card__text strong {
	color: var(--color-gold);
}

/* Кнопки challenge: компактный «Начать ритуал» + серый «Пропустить игры» */
.challenge__actions {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-s);
}

.challenge__actions .btn {
	height: 52px;
	min-height: 52px;
	width: auto;
	min-width: 0;
	padding: 0 var(--space-l);
	font-size: 18px;
}

.challenge__skip {
	height: 48px;
	min-height: 48px;
	font-size: 16px;
	border-color: rgba(255, 246, 234, 0.28);
	color: rgba(255, 246, 234, 0.72);
}

.challenge__skip:hover {
	background: rgba(255, 246, 234, 0.08);
	box-shadow: none;
	color: var(--color-cream);
}

/* ── «Подсказка искателя» на экранах результатов ── */
.seeker-hint {
	border: 1.5px solid rgba(255, 208, 142, 0.5);
	border-radius: var(--radius-16, 16px);
	background: rgba(255, 208, 142, 0.06);
	box-shadow: 0 0 26px rgba(255, 199, 120, 0.13);
	padding: var(--space-s) var(--space-m) var(--space-m);
}

.seeker-hint__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-gold);
	margin-bottom: var(--space-xs);
}

.seeker-hint__head .ui-icon {
	width: 20px;
	height: 20px;
	color: #9dc36a;
}

/* Цитата внутри рамки — без собственной полосы и фона */
.seeker-hint .game-result__hint,
[data-scene="omens"] .seeker-hint .game-result__hint {
	border-left: none;
	background: none;
	border-radius: 0;
	padding: 0;
}


/* ── Результаты: компактный CTA, тонкая «Сыграть заново» ── */
.game-result__actions .btn {
	height: 52px;
	min-height: 52px;
	width: auto;
	min-width: 0;
	padding: 0 var(--space-l);
	font-size: 18px;
}

/* «Отправиться к компаниям» — в одну строку, без переноса */
.wreath-result .game-result__actions .btn {
	white-space: nowrap;
}

/* Предсказание венка: одинаковые отступы между заголовком, подзаголовком
   и описанием. Перебивает @media(max-height:860px) .game__title{margin-xs},
   из-за которого заголовок и подзаголовок «слипались». */
.wreath-result .game-result__head .game-result__title,
.wreath-result .game-result__head .game-result__archetype {
	margin-bottom: var(--space-s);
}

.game-result__actions .link-nav {
	font-size: 14px;
	opacity: 0.8;
}

/* Красный флажок Альфы — прозрачный SVG, blend «darken» на пергаменте не нужен */
.article-card__logo img[src$="logo-alfa.svg"] {
	mix-blend-mode: normal;
}

/* Новые логотипы МТС (красный квадрат + белые буквы) и «Команда Москвы» —
   без darken, чтобы белые буквы МТС не вырезались на пергаменте. */
.article-card__logo img[src$="logo-mts.png"],
.article-card__logo img[src$="logo-moscow-team.png"] {
	mix-blend-mode: normal;
}

/* Квадратный МТС приводим к высоте широких логотипов и в свитках-статьях */
.article-card__logo img[src$="logo-mts.png"] {
	height: auto;
	max-height: 82%;
}

/* ═══════════════════════════════════════════
   9. Мелочи: кнопка «Назад», крестик, звезда успеха
═══════════════════════════════════════════ */
.btn-back .ui-icon {
	width: 18px;
	height: 18px;
	color: var(--color-gold);
}

.popup__close .ui-icon {
	width: 22px;
	height: 22px;
	color: var(--color-gold);
}

.success-star {
	width: 74px;
	height: 74px;
	color: var(--color-gold);
	filter: drop-shadow(0 0 14px var(--color-gold-glow));
	will-change: transform, opacity;
	animation: star-twinkle 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   10. Keyframes рефактора
═══════════════════════════════════════════ */
@keyframes river-flow {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

@keyframes river-shimmer {
	to {
		stroke-dashoffset: -38;
	}
}

/* Заплыв венка по выбранному руслу (проигрывается один раз после клика) */
@keyframes wreath-sail {
	from {
		offset-distance: 0%;
	}
	to {
		offset-distance: 100%;
	}
}

/* Лёгкое покачивание венка (±3°) */
@keyframes mini-wreath-bob {
	0%, 100% {
		transform: rotate(-3deg);
	}
	50% {
		transform: rotate(3deg);
	}
}

/* Течение: блик проплывает вдоль русла и плавно гаснет (бесшовный loop) */
@keyframes ripple-flow {
	0% {
		offset-distance: 0%;
		opacity: 0;
	}
	14% {
		opacity: 0.38;
	}
	82% {
		opacity: 0.24;
	}
	100% {
		offset-distance: 100%;
		opacity: 0;
	}
}

/* Мерцание лунной дорожки на воде */
@keyframes moon-shimmer {
	0%, 100% {
		opacity: 0.45;
		transform: scaleX(1);
	}
	50% {
		opacity: 0.8;
		transform: scaleX(1.28);
	}
}

@keyframes flare-flames {
	0% {
		transform: translateX(-50%) scaleY(1);
	}
	30% {
		transform: translateX(-50%) scaleY(1.5);
	}
	100% {
		transform: translateX(-50%) scaleY(1);
	}
}

@keyframes flare-wave {
	0% {
		opacity: 0.6;
		transform: scale(0.55);
	}
	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

@keyframes flare-spark {
	0% {
		opacity: 0;
		transform: translate(0, 0);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(var(--sx, 0), -62px);
	}
}

/* ═══════════════════════════════════════════
   11. Адаптив (десктоп-first)
═══════════════════════════════════════════ */
@media (max-width: 900px) {
	.articles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.welcome__logos {
		--logo-h: 48px;
		gap: var(--space-s) var(--space-m);
	}

	.partner-logo {
		width: 104px;
	}

	.ornament-flourish {
		width: 80px;
	}

	/* Венок: трёхколоночная раскладка не влезает уже на планшете —
	   переходим на вертикальную (венок сверху, карточки сеткой 2×3).
	   stretch + общий min-height — все чипы одного размера независимо
	   от количества строк подсказки. */
	.wreath-columns {
		/* minmax(0,1fr): чистые 1fr упираются в min-content («Папоротник»)
		   и колонки получаются разной ширины */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: var(--space-xs);
		margin: var(--space-s) 0;
	}

	.wreath-side {
		display: contents;
	}

	.wreath-stage {
		order: -1;
		grid-column: 1 / -1;
		width: min(34vw, 240px);
		height: min(34vw, 240px);
		--wreath-r: min(12.75vw, 90px);
		margin-bottom: var(--space-xs);
	}

	.wreath-slot {
		width: 34px;
		height: 34px;
		margin: -17px;
	}

	.wreath-columns .plant-card {
		padding: 10px 14px;
		gap: 10px;
		border-width: 1.5px;
		min-height: 72px; /* чуть выше 2-строчного контента — все чипы ровно одной высоты */
	}

	.wreath-columns .plant-card__icon .ui-icon {
		width: 26px;
		height: 26px;
	}
}

@media (max-width: 600px) {
	/* ── Венок: компактный венок сверху, карточки растений сеткой 2×3 ── */
	.wreath-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xs);
		margin: var(--space-s) 0;
	}

	/* Колонки-обёртки растворяются — карточки становятся ячейками общей сетки */
	.wreath-side {
		display: contents;
	}

	.wreath-stage {
		order: -1;
		grid-column: 1 / -1;
		width: min(50vw, 190px);
		height: min(50vw, 190px);
		--wreath-r: min(19vw, 72px);
		margin-bottom: var(--space-xs);
	}

	.wreath-slot {
		width: 30px;
		height: 30px;
		margin: -15px;
	}

	.wreath-columns .plant-card {
		padding: 10px 12px;
		gap: 10px;
		border-width: 1.5px;
	}

	.wreath-columns .plant-card__icon .ui-icon {
		width: 24px;
		height: 24px;
	}

	.plant-card__name {
		font-size: 14px;
		margin-bottom: 2px;
	}

	.plant-card__hint {
		font-size: 11px;
		line-height: 1.3;
	}

	.wreath-counter {
		margin-bottom: var(--space-s);
		font-size: var(--fs-14);
	}

	/* ── Свитки: один под одним, компактный свиток (лого + заголовок) ── */
	.articles__grid {
		grid-template-columns: 1fr;
		gap: calc(var(--space-m) + 14px); /* запас под валики, вылезающие на ±10px */
		margin: var(--space-m) auto;
	}

	.articles__content .section-subtitle {
		margin-bottom: var(--space-s);
	}

	.article-card {
		min-height: 0;
		padding: var(--space-m) var(--space-m) var(--space-m);
		gap: var(--space-xs);
	}

	.article-card::before,
	.article-card::after {
		height: 16px;
		left: -6px;
		right: -6px;
	}

	.article-card::before {
		top: -8px;
	}

	.article-card::after {
		bottom: -8px;
	}

	.article-card__logo {
		height: 28px;
	}

	.article-card__logo img {
		max-width: 120px;
	}

	.article-card__title {
		font-size: 16px;
		line-height: 1.4;
		font-weight: 700;
	}

	.articles__cta {
		margin-top: var(--space-m);
	}

	/* ── Река: портретная схема (венок справа, берега столбиком слева) ── */
	.river-svg--desktop {
		display: none;
	}

	.river-svg--mobile {
		display: block;
	}

	.river-stage {
		aspect-ratio: 360 / 420;
		max-width: 420px;
	}

	.river-bank {
		right: auto;
		left: 3%;
		top: calc(15.2% + var(--i) * 34.8%); /* устья мобильных русел: 64/210/356 из 420 */
		max-width: 46%;
		white-space: normal;
		text-align: left;
		line-height: 1.2;
		font-size: var(--fs-14);
		padding: var(--space-3xs) var(--space-s);
	}

	.welcome__logos {
		--logo-h: 40px;
		gap: var(--space-xs) var(--space-s);
	}

	.partner-logo {
		width: 84px;
	}

	/* ── Challenge: кнопки в столбик, рамка чуть компактнее ── */
	.challenge__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.challenge__actions .btn {
		width: 100%;
	}

	.quest-card {
		padding: var(--space-s) var(--space-m);
	}

	.quest-card__fern {
		width: 26px;
		height: 34px;
	}

	.quest-card__head {
		gap: 8px;
		margin-bottom: 6px;
	}
}

/* ═══════════════════════════════════════════
   12. prefers-reduced-motion — гасим движение
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.wreath-stage,
	.river-ripple,
	.river-moonlight,
	.mini-wreath__spin,
	.success-star {
		animation: none !important;
	}

	.river-ripple {
		opacity: 0.22;
	}

	/* Венок «причаливает» к берегу без длинной анимации */
	.mini-wreath.is-sailing {
		animation: none !important;
		offset-distance: 100%;
	}

	.bonfire-mini.is-flare .bonfire-mini__flames,
	.bonfire-mini.is-flare .bonfire-mini__wave,
	.bonfire-mini.is-flare .bonfire-mini__sparks span {
		animation: none !important;
	}
}