/* Мобильная карусель плиток на главной — шаблон Prime.
   Работает только на экранах до 768px. На ПК блок скрыт, старые баннеры не трогаются. */

.mtiles { display: none; }

@media (max-width: 768px) {
	/* на мобилке вместо старых баннеров показываем плитки */
	.banner_top .new-banners-wrap { display: none !important; }
	.banner_top:has(+ .mtiles) { display: none; }

	.mtiles {
		display: block;
		margin-top: -14px; /* ближе к шапке */
	}

	.mtiles-track {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 1px 16px;
	}

	.mtiles-track::-webkit-scrollbar { display: none; }

	/* две карточки на экран */
	.mt-card {
		position: relative;
		flex: 0 0 calc((100% - 10px) / 2);
		aspect-ratio: 3 / 5;
		scroll-snap-align: start;
		border-radius: 18px;
		overflow: hidden;
		border: 1.5px solid rgba(0, 158, 255, .28);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 8px 24px -12px rgba(0, 158, 255, .35);
		background:
			radial-gradient(120% 80% at 50% 0%, rgba(0, 158, 255, .28), transparent 65%),
			linear-gradient(180deg, #1f2733 0%, var(--hover, #1d1d1e) 70%);
		text-decoration: none !important;
		color: var(--text-white, #fff);
		-webkit-tap-highlight-color: transparent;
		transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
	}

	.mt-card:hover,
	.mt-card:active {
		border-color: var(--accent, #009eff);
		box-shadow: inset 0 0 0 1px rgba(0, 158, 255, .15), 0 10px 30px -10px rgba(0, 158, 255, .6);
	}

	.mt-card:active { transform: scale(.97); }

	/* запасная иконка: видна, пока не загружена картинка */
	.mt-art {
		position: absolute;
		inset: 0 0 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--accent, #009eff);
	}

	.mt-art svg {
		width: 50%;
		height: auto;
		filter: drop-shadow(0 10px 24px rgba(0, 158, 255, .45));
	}

	/* картинка персонажа поверх иконки */
	.mt-img {
		position: absolute;
		inset: 0;
		background-position: center top;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* затемнение снизу, чтобы текст читался */
	.mt-card::after {
		content: "";
		position: absolute;
		inset: 45% 0 0;
		background: linear-gradient(180deg, transparent, rgba(10, 12, 16, .92) 70%);
		pointer-events: none;
	}

	.mt-text {
		position: absolute;
		z-index: 1;
		left: 14px;
		right: 14px;
		bottom: 14px;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mt-text b {
		font-size: 16.5px;
		font-weight: 800;
		line-height: 1.2;
		text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
	}

	.mt-text small {
		font-size: 12px;
		font-weight: 600;
		color: var(--accent, #009eff);
	}

	.mtiles-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 0;
	}

	.mtiles-dots button {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .28);
		transition: width .2s ease, background .2s ease, border-radius .2s ease;
	}

	.mtiles-dots button.is-active {
		width: 16px;
		border-radius: 999px;
		background: var(--accent, #009eff);
	}
}