/**
 * Player Opponents — H2H rivalry moments (fixed 3×3 scorecard deck).
 *
 * Neutral card shells (no outcome border glow). Rivalry chrome/red lives on the
 * scoreline only: winner name + goals neon; beaten side muted. Draws: holo on
 * both names + goals; kicker (--k2-mc-draw), dash, date stay muted draw scale.
 */

body.k2-site .k2-h2h2-moments {
	--k2-mc-blue: var(--k2-h2h2-blue, var(--k2-pure-chrome));
	--k2-mc-red: var(--k2-table-negative);
	--k2-mc-draw: color-mix(in srgb, var(--k2-text-muted) 82%, transparent);
	width: 100%;
	max-width: var(--k2-h2h2-marquee-max, 48rem);
	margin: clamp(36px, 4.8vw, 52px) auto 0;
	padding: 0;
}

body.k2-site .k2-h2h2-all-games + .k2-h2h2-moments {
	margin-top: clamp(24px, 3.6vw, 36px);
}

body.k2-site .k2-h2h2-moments__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 34px);
}

/* ===== card shell — neutral frame; colour is scoreline-only ===== */
body.k2-site .k2-h2h2-mcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, 1vw, 8px);
	padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.6vw, 14px);
	border: 1px solid var(--k2-border-subtle);
	border-radius: var(--k2-radius-lg, 14px);
	background: var(--k2-bg-surface);
	text-align: center;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

body.k2-site .k2-h2h2-mcard.is-active {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.k2-site .k2-h2h2-mcard.is-dim {
	opacity: 0.5;
	filter: grayscale(0.4);
}

body.k2-site a.k2-h2h2-mcard--link,
body.k2-site a.k2-h2h2-mcard--link:visited,
body.k2-site a.k2-h2h2-mcard--link:hover,
body.k2-site a.k2-h2h2-mcard--link:focus-visible {
	color: inherit;
	text-decoration: none;
}

body.k2-site a.k2-h2h2-mcard--link.is-active:hover,
body.k2-site a.k2-h2h2-mcard--link.is-active:focus-visible {
	border-color: var(--k2-border-strong);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 18px rgba(255, 255, 255, 0.04);
}

/* ===== kicker (moment label — sentence case, not tag caps) ===== */
body.k2-site .k2-h2h2-mcard__kicker {
	font-family: var(--k2-font-display);
	font-size: clamp(12px, 1.7vw, 13px);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin: 0 0 clamp(6px, 1.2vw, 10px);
	color: var(--k2-text-secondary);
	text-wrap: balance;
}

body.k2-site .k2-h2h2-mcard.is-active .k2-h2h2-mcard__kicker {
	color: var(--k2-mc-draw);
}

/* ===== scoreline board ===== */
body.k2-site .k2-h2h2-mcard__board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(6px, 1.2vw, 10px);
	width: 100%;
}

body.k2-site .k2-h2h2-mcard__side {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
}

body.k2-site .k2-h2h2-mcard__name {
	display: block;
	width: 100%;
	font-size: clamp(12px, 1.6vw, 12.5px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.05em;
	text-align: center;
	overflow-wrap: break-word;
	word-break: normal;
	color: var(--k2-text-secondary);
}

body.k2-site .k2-h2h2-mcard__goals {
	align-self: center;
	font-family: var(--k2-font-display);
	font-size: clamp(24px, 4.2vw, 34px);
	font-weight: 700;
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
	color: var(--k2-text-primary);
}

body.k2-site .k2-h2h2-mcard__side--subject.is-winner .k2-h2h2-mcard__goals {
	color: var(--k2-mc-blue);
	text-shadow:
		0 0 8px color-mix(in srgb, var(--k2-mc-blue) 92%, transparent),
		0 0 22px color-mix(in srgb, var(--k2-mc-blue) 72%, transparent),
		0 0 42px color-mix(in srgb, var(--k2-mc-blue) 52%, transparent),
		0 0 64px color-mix(in srgb, var(--k2-mc-blue) 34%, transparent),
		0 0 80px color-mix(in srgb, var(--k2-mc-blue) 22%, transparent);
}

body.k2-site .k2-h2h2-mcard__side--opponent.is-winner .k2-h2h2-mcard__goals {
	color: var(--k2-mc-red);
	text-shadow:
		0 0 8px color-mix(in srgb, var(--k2-mc-red) 92%, transparent),
		0 0 22px color-mix(in srgb, var(--k2-mc-red) 72%, transparent),
		0 0 42px color-mix(in srgb, var(--k2-mc-red) 52%, transparent),
		0 0 64px color-mix(in srgb, var(--k2-mc-red) 34%, transparent),
		0 0 80px color-mix(in srgb, var(--k2-mc-red) 22%, transparent);
}

body.k2-site .k2-h2h2-mcard__side--subject.is-winner .k2-h2h2-mcard__name {
	color: color-mix(in srgb, var(--k2-mc-blue) 82%, var(--k2-text-secondary));
}

body.k2-site .k2-h2h2-mcard__side--opponent.is-winner .k2-h2h2-mcard__name {
	color: color-mix(in srgb, var(--k2-mc-red) 82%, var(--k2-text-secondary));
}

body.k2-site .k2-h2h2-mcard__side.is-beaten .k2-h2h2-mcard__goals,
body.k2-site .k2-h2h2-mcard__side.is-beaten .k2-h2h2-mcard__name {
	color: color-mix(in srgb, var(--k2-text-muted) 88%, var(--k2-text-primary));
	opacity: 0.42;
}

body.k2-site .k2-h2h2-mcard__dash {
	font-family: var(--k2-font-display);
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 600;
	color: var(--k2-text-muted);
	align-self: center;
	/* drop the dash to sit on the goal baseline, below the names */
	transform: translateY(6px);
}

/* ===== date footer ===== */
body.k2-site .k2-h2h2-mcard__date {
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--k2-text-muted);
	line-height: 1.2;
}

/* ===== empty / pending slot ===== */
body.k2-site .k2-h2h2-mcard__board--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

body.k2-site .k2-h2h2-mcard__pending {
	font-family: var(--k2-font-display);
	font-size: clamp(24px, 4.2vw, 34px);
	font-weight: 700;
	line-height: 0.9;
	color: var(--k2-text-muted);
}

body.k2-site .k2-h2h2-mcard__date--empty {
	font-style: italic;
}

/* ===== draws — holo names + goals; kicker/dash/date muted ===== */
body.k2-site .k2-h2h2-mcard.is-drawn .k2-h2h2-mcard__name {
	color: color-mix(in srgb, var(--k2-pure-holo) 82%, var(--k2-text-secondary));
}

body.k2-site .k2-h2h2-mcard.is-drawn .k2-h2h2-mcard__goals {
	color: var(--k2-pure-holo);
	text-shadow:
		0 0 8px color-mix(in srgb, var(--k2-pure-holo) 92%, transparent),
		0 0 22px color-mix(in srgb, var(--k2-pure-holo) 72%, transparent),
		0 0 42px color-mix(in srgb, var(--k2-pure-holo) 52%, transparent),
		0 0 64px color-mix(in srgb, var(--k2-pure-holo) 34%, transparent),
		0 0 80px color-mix(in srgb, var(--k2-pure-holo) 22%, transparent);
}

body.k2-site .k2-h2h2-mcard.is-drawn .k2-h2h2-mcard__dash,
body.k2-site .k2-h2h2-mcard.is-drawn .k2-h2h2-mcard__date {
	color: var(--k2-mc-draw);
}

/* ===== responsive ===== */
@media (max-width: 760px) {
	body.k2-site .k2-h2h2-moments__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	body.k2-site .k2-h2h2-moments {
		padding-inline: clamp(2px, 1vw, 8px);
	}

	body.k2-site .k2-h2h2-moments__grid {
		grid-template-columns: 1fr;
	}
}