/**
 * Player Opponents — H2H rivalry moments (fixed 3×3 scorecard deck).
 *
 * Each card is a little scoreboard: kicker (what the moment is), the true
 * scoreline (NameA goals – goals NameB, never flipped), and the date. The page
 * Winner name (own chrome/red), goals, dash, and date use winner colour;
 * beaten name and goals are heavily dimmed grey. Draws: holo throughout.
 */

body.k2-site .k2-h2h2-moments {
	--k2-mc-blue: var(--k2-h2h2-blue, var(--k2-pure-chrome));
	--k2-mc-red: var(--k2-table-negative);
	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-moments__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 34px);
}

/* ===== card shell (2px accent border + garden glow + bloom) ===== */
body.k2-site .k2-h2h2-mcard {
	--k2-mc-accent: var(--k2-border-strong, var(--k2-border-subtle));
	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 {
	border: 2px solid var(--k2-mc-accent);
	box-shadow:
		0 0 12px color-mix(in srgb, var(--k2-mc-accent) 28%, transparent),
		0 0 28px color-mix(in srgb, var(--k2-mc-accent) 18%, transparent),
		0 0 52px color-mix(in srgb, var(--k2-mc-accent) 8%, transparent),
		0 0 20px color-mix(in srgb, var(--k2-mc-accent) 38%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--k2-mc-accent) 12%, transparent);
}

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;
}

/* Hover — outer accent ring (reads thicker) + stronger halo; no lift */
body.k2-site a.k2-h2h2-mcard--link.is-active:hover,
body.k2-site a.k2-h2h2-mcard--link.is-active:focus-visible {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--k2-mc-accent) 72%, transparent),
		0 0 14px color-mix(in srgb, var(--k2-mc-accent) 34%, transparent),
		0 0 32px color-mix(in srgb, var(--k2-mc-accent) 24%, transparent),
		0 0 60px color-mix(in srgb, var(--k2-mc-accent) 12%, transparent),
		0 0 28px color-mix(in srgb, var(--k2-mc-accent) 48%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--k2-mc-accent) 16%, transparent);
}

/* ===== 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: color-mix(in srgb, var(--k2-mc-accent) 58%, var(--k2-text-secondary));
}

body.k2-site .k2-h2h2-mcard.is-drawn.is-active .k2-h2h2-mcard__kicker {
	color: var(--k2-pure-holo);
}

/* ===== 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.is-winner .k2-h2h2-mcard__goals {
	color: var(--k2-mc-accent);
	text-shadow:
		0 0 8px color-mix(in srgb, var(--k2-mc-accent) 92%, transparent),
		0 0 22px color-mix(in srgb, var(--k2-mc-accent) 72%, transparent),
		0 0 42px color-mix(in srgb, var(--k2-mc-accent) 52%, transparent),
		0 0 64px color-mix(in srgb, var(--k2-mc-accent) 34%, transparent),
		0 0 80px color-mix(in srgb, var(--k2-mc-accent) 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);
}

body.k2-site .k2-h2h2-mcard.is-active:not(.is-drawn) .k2-h2h2-mcard__dash {
	color: var(--k2-mc-accent);
}

/* ===== 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;
}

body.k2-site .k2-h2h2-mcard.is-active:not(.is-drawn) .k2-h2h2-mcard__date {
	color: color-mix(in srgb, var(--k2-mc-accent) 76%, var(--k2-text-secondary));
}

/* ===== 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;
}

/* ===== outcome accents — whoever won the game owns the card ===== */
body.k2-site .k2-h2h2-mcard.is-won-subject { --k2-mc-accent: var(--k2-mc-blue); }
body.k2-site .k2-h2h2-mcard.is-won-opponent { --k2-mc-accent: var(--k2-mc-red); }
body.k2-site .k2-h2h2-mcard.is-drawn { --k2-mc-accent: var(--k2-pure-holo); }

body.k2-site .k2-h2h2-mcard.is-drawn .k2-h2h2-mcard__name {
	color: var(--k2-pure-holo);
}

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-pure-holo);
}

/* ===== 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;
	}
}