/**
 * Olimpia API Sync — Live Match (frontend).
 *
 * Visual treatment for games currently in progress:
 * - On event-blocks cards: a centered "LIVE" tag with a blinking red dot
 *   placed right above the score (.olimpia-card__live-indicator).
 * - On other contexts (list rows, single event): a compact LIVE badge in the
 *   corner of the live element (.live-match::after).
 * - A blinking score delimiter inside the live score wrapper.
 * - A small live clock (period + minute) injected by the JS.
 *
 * @package OlimpiaApiSync
 */

/* ------------------------------------------------------------------ *
 * Event-blocks card: LIVE tag above the score.
 * ------------------------------------------------------------------ */
.olimpia-card__live-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 4px;
	line-height: 1;
}

.olimpia-card__live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e10600;
	box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.6);
	animation: oas-live-dot 1.4s ease-in-out infinite;
}

.olimpia-card__live-label {
	color: #e10600;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Current quarter + played minute shown next to the LIVE tag. */
.olimpia-card__live-period,
.olimpia-card__live-minute {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #e10600;
}

/* The played minute blinks while live, with a small clock icon. */
.olimpia-card__live-minute {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	animation: oas-live-blink 1s steps(2, start) infinite;
}

.olimpia-card__live-minute::before {
	content: "";
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Keep hidden meta nodes hidden (higher specificity than the display rules). */
.olimpia-card__live-period[hidden],
.olimpia-card__live-minute[hidden] {
	display: none;
}

/* FULL-TIME tag (most recent concluded game): no dot, neutral label. */
.olimpia-card__live-indicator--ft .olimpia-card__live-label {
	color: #1a1a1a;
}

/* All event-blocks cards are light now, so the LIVE tag, dot, delimiter and
 * clock keep their red brand accents on every card state for contrast. */

/* The card uses the dedicated indicator, not the generic corner badge. */
.olimpia-card.live-match::after,
.olimpia-card.live-match::before {
	content: none;
}

/* ------------------------------------------------------------------ *
 * Single match detail (event-results): LIVE tag above the score.
 * ------------------------------------------------------------------ */
.olimpia-result__live-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
	line-height: 1;
}

.olimpia-result__live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e10600;
	box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.6);
	animation: oas-live-dot 1.4s ease-in-out infinite;
}

.olimpia-result__live-label {
	color: #e10600;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The detail uses the dedicated indicator, not the generic corner badge. */
.olimpia-result.live-match::after,
.olimpia-result.live-match::before {
	content: none;
}

/* ------------------------------------------------------------------ *
 * Generic LIVE badge for non-card contexts (table rows, single event).
 * ------------------------------------------------------------------ */
.live-match {
	position: relative;
}

.live-match::after {
	content: "LIVE";
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px 2px 18px;
	border-radius: 4px;
	background: #e10600;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Blinking red dot inside the generic badge. */
.live-match::before {
	content: "";
	position: absolute;
	top: 13px;
	right: 44px;
	z-index: 4;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: oas-live-blink 1s steps(2, start) infinite;
	pointer-events: none;
}

tr.live-match::after {
	top: 50%;
	transform: translateY(-50%);
}

tr.live-match::before {
	top: 50%;
	transform: translateY(-50%);
}

/* ------------------------------------------------------------------ *
 * Blinking score delimiter while live.
 * ------------------------------------------------------------------ */
.live-match-boxscore .boxscore-delimiter,
.live-match-boxscore .olimpia-result__score-sep,
.live-match .boxscore-delimiter,
.live-match .olimpia-result__score-sep {
	animation: oas-live-blink 1s steps(2, start) infinite;
	color: #e10600;
}

/* ------------------------------------------------------------------ *
 * Live clock (period + minute) injected by the JS.
 * ------------------------------------------------------------------ */
.oas-live-clock {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #e10600;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Animations.
 * ------------------------------------------------------------------ */
@keyframes oas-live-blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes oas-live-dot {
	0% {
		box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.6);
		opacity: 1;
	}
	70% {
		box-shadow: 0 0 0 7px rgba(225, 6, 0, 0);
		opacity: 0.6;
	}
	100% {
		box-shadow: 0 0 0 0 rgba(225, 6, 0, 0);
		opacity: 1;
	}
}

/* White-glow variant for the dot on the red live card. */
@keyframes oas-live-dot-light {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
		opacity: 1;
	}
	70% {
		box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
		opacity: 0.5;
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
		opacity: 1;
	}
}

/* Respect reduced-motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.olimpia-card__live-dot,
	.olimpia-card__live-minute,
	.olimpia-result__live-dot,
	.live-match::before,
	.live-match-boxscore .boxscore-delimiter,
	.live-match-boxscore .olimpia-result__score-sep,
	.live-match .boxscore-delimiter,
	.live-match .olimpia-result__score-sep {
		animation: none;
	}
}