/**
 * Ticker block — CSS marquee з картками.
 *
 * Трюк безшовного лупа: список карток рендериться двічі поспіль,
 * а трек анімується від translateX(0) до translateX(-50%).
 * Коли -50% досягнуто, стан візуально ідентичний 0%, і цикл повторюється.
 *
 * Швидкість і колір суми керуються змінними, що ставляться інлайн
 * на корені .monobrend-ticker з PHP:
 *   --ticker-duration
 *   --ticker-amount-color
 */

.monobrend-ticker {
	width: 100%;
	margin: 32px 0;
	padding: 10px 0;
	border-radius: 10px;
	background: var(--ticker-widget-bg, rgba(0, 0, 30, 0.55));
	box-sizing: border-box;
	overflow: hidden;
}

/* --- Заголовок рядка ------------------------------------------------- */
.monobrend-ticker .ticker-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 16px 10px;
	flex-wrap: wrap;
}

.monobrend-ticker .ticker-title {
	margin: 0;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.monobrend-ticker .ticker-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.monobrend-ticker .ticker-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
	flex-shrink: 0;
}

/* --- Viewport / track ------------------------------------------------- */
.monobrend-ticker .ticker-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* М'яке згасання по краях — необов'язково, але гарно дивиться */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%
	);
}

.monobrend-ticker .ticker-track {
	display: flex;
	gap: 10px;
	width: max-content;
	padding: 6px 10px;
	animation-name: monobrend-ticker-scroll-left;
	animation-duration: var(--ticker-duration, 40s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	will-change: transform;
}

/* Напрямок → */
.monobrend-ticker.ticker-dir-right .ticker-track {
	animation-name: monobrend-ticker-scroll-right;
}

/* Пауза при наведенні (вмикається класом з PHP) */
.monobrend-ticker.ticker-pause-on-hover:hover .ticker-track,
.monobrend-ticker.ticker-pause-on-hover:focus-within .ticker-track {
	animation-play-state: paused;
}

/* --- Картки ---------------------------------------------------------- */
.monobrend-ticker .ticker-card {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	min-width: 190px;
	max-width: 260px;
	padding: 8px 12px;
	border-radius: 10px;
	background: linear-gradient(
		180deg,
		var(--ticker-card-bg, #12123a) 0%,
		var(--ticker-card-bg-dark, #0a0a22) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.monobrend-ticker .ticker-card-img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monobrend-ticker .ticker-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.monobrend-ticker .ticker-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.monobrend-ticker .ticker-card-player {
	color: var(--ticker-player-color, #8b96a8);
	font-size: 11px;
	font-weight: 500;
	margin-bottom: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monobrend-ticker .ticker-card-game {
	color: var(--ticker-text, #ffffff);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.monobrend-ticker .ticker-card-amount {
	color: var(--ticker-amount-color, #ff4d6a);
	font-size: 13px;
	font-weight: 700;
	margin-top: 2px;
	white-space: nowrap;
}

/* --- Keyframes ------------------------------------------------------- */
@keyframes monobrend-ticker-scroll-left {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes monobrend-ticker-scroll-right {
	0%   { transform: translate3d(-50%, 0, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* --- Пульс бейджа ---------------------------------------------------- */
@keyframes monobrend-ticker-badge-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.35); }
}

.monobrend-ticker .ticker-badge-pulse .ticker-badge-dot {
	animation: monobrend-ticker-badge-pulse 1.2s ease-in-out infinite;
}

/* --- Адаптив --------------------------------------------------------- */

/* Планшет — зменшуємо картки і заголовок */
@media (max-width: 1024px) {
	.monobrend-ticker {
		margin: 24px 0;
	}

	.monobrend-ticker .ticker-header {
		padding: 4px 12px 8px;
		gap: 10px;
	}

	.monobrend-ticker .ticker-card {
		min-width: 180px;
		max-width: 230px;
	}

	.monobrend-ticker .ticker-card-img {
		width: 36px;
		height: 36px;
	}
}

/* Мобільний — компактніші картки, трохи швидша анімація */
@media (max-width: 768px) {
	.monobrend-ticker {
		margin: 20px 0;
		padding: 8px 0;
		border-radius: 8px;
	}

	.monobrend-ticker .ticker-header {
		padding: 4px 10px 8px;
	}

	.monobrend-ticker .ticker-title {
		font-size: 14px;
	}

	.monobrend-ticker .ticker-badge {
		font-size: 10px;
		padding: 2px 8px;
	}

	.monobrend-ticker .ticker-card {
		min-width: 170px;
		padding: 6px 10px;
	}

	.monobrend-ticker .ticker-card-img {
		width: 34px;
		height: 34px;
	}

	.monobrend-ticker .ticker-card-game {
		font-size: 12px;
		max-width: 140px;
	}

	.monobrend-ticker .ticker-card-amount,
	.monobrend-ticker .ticker-card-player {
		font-size: 11px;
	}
}

/* Малий мобільний — ще менше і без фейд-маски (краще видно на вузькому екрані) */
@media (max-width: 480px) {
	.monobrend-ticker .ticker-card {
		min-width: 150px;
		gap: 8px;
	}

	.monobrend-ticker .ticker-card-img {
		width: 30px;
		height: 30px;
	}

	.monobrend-ticker .ticker-viewport {
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* --- Reduce motion: зупиняємо анімацію (accessibility) --------------- */
@media (prefers-reduced-motion: reduce) {
	.monobrend-ticker .ticker-track {
		animation: none !important;
		transform: none !important;
	}

	.monobrend-ticker .ticker-badge-pulse .ticker-badge-dot {
		animation: none !important;
	}

	/* у цьому режимі тримаємо оригінальну довжину треку — працює як статичний список, без дублювання видимого ефекту */
}

/* Порожній блок (у редакторі без карток) — не показуємо пустий трек */
.monobrend-ticker.is-empty .ticker-viewport {
	display: none;
}