/**
 * Basketball Results Banner Pro - Frontend styles
 * Ticker deportivo tipo ESPN/NBA TV con marcador estilo LED.
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

.brbp-ticker-wrapper {
	--brbp-bg: #0A0A0A;
	--brbp-text: #FFFFFF;
	--brbp-score: #FF6B00;

	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	border-radius: 4px;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.brbp-ticker-wrapper::before,
.brbp-ticker-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	z-index: 2;
	pointer-events: none;
}

.brbp-ticker-wrapper::before {
	left: 0;
	background: linear-gradient(90deg, var(--brbp-bg) 0%, transparent 100%);
}

.brbp-ticker-wrapper::after {
	right: 0;
	background: linear-gradient(270deg, var(--brbp-bg) 0%, transparent 100%);
}

.brbp-ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation-name: brbp-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.brbp-ticker-wrapper.brbp-paused .brbp-ticker-track {
	animation-play-state: paused;
}

@keyframes brbp-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.brbp-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	font-family: 'Orbitron', 'Courier New', monospace;
	font-size: 15px;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.brbp-team-logo {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.brbp-team-name {
	font-weight: 500;
	color: var(--brbp-text);
	text-transform: uppercase;
}

.brbp-score {
	font-family: 'Orbitron', 'Courier New', monospace;
	font-weight: 900;
	font-size: 20px;
	padding: 0 4px;
	text-shadow:
		0 0 4px currentColor,
		0 0 10px currentColor,
		0 0 18px currentColor;
}

.brbp-vs {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.6;
	letter-spacing: 1px;
}

.brbp-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	letter-spacing: 0.5px;
	background: rgba(255, 255, 255, 0.08);
}

.brbp-badge-en_juego {
	background: rgba(255, 0, 0, 0.25);
	color: #ff4d4d;
	animation: brbp-blink 1.4s ease-in-out infinite;
}

.brbp-badge-finalizado {
	background: rgba(0, 255, 128, 0.15);
	color: #33ff99;
}

.brbp-badge-programado {
	background: rgba(255, 255, 255, 0.1);
	color: #cccccc;
}

@keyframes brbp-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

.brbp-date {
	font-size: 11px;
	opacity: 0.65;
}

.brbp-separator {
	opacity: 0.3;
	margin: 0 4px;
}

.brbp-empty {
	padding: 12px 20px;
	background: #151515;
	color: #ffffff;
	text-align: center;
	border-radius: 4px;
	font-family: sans-serif;
}

/* Responsive */
@media (max-width: 782px) {
	.brbp-ticker-item {
		font-size: 13px;
		padding: 0 14px;
		gap: 6px;
	}
	.brbp-score {
		font-size: 16px;
	}
	.brbp-team-logo {
		width: 18px;
		height: 18px;
	}
	.brbp-date {
		display: none;
	}
}

@media (max-width: 480px) {
	.brbp-badge {
		display: none;
	}
	.brbp-vs {
		font-size: 9px;
	}
}