/* ==========================================================================
   1. BRACKET — .sfgi-bracket (SPEC §5 row 23)
   ========================================================================== */

/* The rounds scroll inside the panel, never the page. gridiron.css clips the
   panel itself, so the scroller has to live one level in. */
.sfgi-bracket > .sfgi-scroll {
	padding-bottom: 2px;
}

@keyframes sfgi-cup-sheen {
	0%,
	62% {
		transform: translateX(0) rotate(8deg);
		opacity: 0;
	}
	68% {
		opacity: 1;
	}
	100% {
		transform: translateX(560%) rotate(8deg);
		opacity: 0;
	}
}

/* ==========================================================================
   2. GROUP STAGE — .sfgi-groups (SPEC §5 row 26)
   ========================================================================== */

.sfgi-group__head .sfgi-i {
	color: var(--sfgi-gold-ink);
	flex: 0 0 auto;
}
.sfgi-group__team .sfgi-crest {
	flex: 0 0 auto;
}
.sfgi-chero__mvp .sfgi-i {
	color: var(--sfgi-gold-ink);
}

/* ==========================================================================
   8. REDUCED MOTION
   Every animation and every transform declared above is switched off. The
   layout, the colour and the depth all survive — only the movement stops.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.sfgi-scroll {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   APPENDED 2026-08-19 — full component styling for the competition family.
   Everything below is new; nothing above is redefined. Classes styled here
   are the cups-family orphans (bracket, bracket-cards, competition-hero,
   groups, champions, trophy-case, playoff/round badges) plus the structural
   helpers only these components emit (.sfgi-bk-team, .sfgi-bk-third,
   .sfgi-group__team, .sfgi-chero__art/__img, .sfgi-bkcard__img).
   Numbers follow scratchpad/ref/rules-f.css (#block_f-brk/cups/grp/champ/tro).
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. BADGES — .sfgi-badge--playoff / .sfgi-badge--round
   Small uppercase chips (self-sufficient: no .sfgi-badge base rule exists).
   Playoff wears the violet ring, round the neon ring.
   -------------------------------------------------------------------------- */

.sfgi-badge--playoff,
.sfgi-badge--round {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	background: color-mix(in srgb, var(--sfgi-panel-2) 78%, transparent);
}
.sfgi-badge--playoff {
	color: var(--sfgi-violet-ink);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-violet) 45%, transparent);
}
.sfgi-badge--round {
	color: var(--sfgi-neon-ink);
	box-shadow: var(--sfgi-ring-neon);
}

/* --------------------------------------------------------------------------
   B. BRACKET — the knockout tree
   Round columns run left→right inside the .sfgi-scroll the renderer wraps
   them in; the champion capsule closes the rail. (#block_f-brk-*)
   -------------------------------------------------------------------------- */

.sfgi-bracket__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sfgi-line);
}
.sfgi-bracket__head .sfgi-title {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}
.sfgi-bracket__head .sfgi-more { margin-left: auto; }

.sfgi-bk-rounds {
	display: flex;
	align-items: stretch;
	gap: 18px;
	min-width: max-content;
	padding: 2px 2px 8px;
}

.sfgi-bk-round {
	display: flex;
	flex-direction: column;
	flex: 0 0 232px;
	width: 232px;
	min-width: 0;
}
.sfgi-bk-round__label,
.sfgi-bk-third__label {
	margin: 0 0 8px;
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
}

/* Later rounds have fewer matches: distributing the free space vertically
   centres the Final against its semi-finals, the way a tree reads. */
.sfgi-bk-matches {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 10px;
}

.sfgi-bk-match {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 5px;
	border-radius: var(--sfgi-r-sm);
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring);
	transition: box-shadow var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-bk-match:hover { box-shadow: var(--sfgi-ring-neon); }

.sfgi-bk-match .sfgi-bk-team {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 5px 7px;
	border-radius: var(--sfgi-r-sm);
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: background-color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-bk-team:hover { background: rgba(255, 255, 255, 0.05); }
a.sfgi-bk-team:hover .sfgi-bk-team__name { color: var(--sfgi-accent); }

.sfgi-bk-team__seed {
	flex: 0 0 14px;
	width: 14px;
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	font-weight: 700;
	text-align: right;
	color: var(--sfgi-muted);
}
.sfgi-bk-team__blank {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sfgi-panel);
	box-shadow: var(--sfgi-ring);
}
.sfgi-bk-match .sfgi-bk-team .sfgi-crest { flex: 0 0 auto; }
.sfgi-bk-team__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sfgi-f-ui);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-bk-team__score {
	flex: 0 0 auto;
	min-width: 26px;
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	color: var(--sfgi-ink);
}

/* Winner emphasised, loser receding, TBD ghosted. */
.sfgi-bk-team.is-winner .sfgi-bk-team__name { font-weight: 700; }
.sfgi-bk-team.is-winner .sfgi-bk-team__score { color: var(--sfgi-accent); }
.sfgi-bk-team.is-loser .sfgi-bk-team__name,
.sfgi-bk-team.is-loser .sfgi-bk-team__score { color: var(--sfgi-muted); }
.sfgi-bk-team.is-tbd .sfgi-bk-team__name {
	color: var(--sfgi-muted);
	font-weight: 500;
}

.sfgi-bk-match__note {
	margin: 0;
	padding: 3px 7px 5px;
	font-family: var(--sfgi-f-body);
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--sfgi-muted);
	text-decoration: none;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-bk-match__note:hover { color: var(--sfgi-accent); }

.sfgi-bk-third { margin-top: 14px; }

/* Champion capsule at the end of the rail. */
.sfgi-bk-champ {
	align-self: center;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 188px;
	padding: 18px 18px 16px;
	border-radius: var(--sfgi-r);
	text-align: center;
	text-decoration: none;
	color: var(--sfgi-ink);
	background-color: color-mix(in srgb, var(--sfgi-gold) 7%, var(--sfgi-panel-2));
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring-gold);
	transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
}
a.sfgi-bk-champ:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring-gold);
}
.sfgi-bk-champ__trophy { color: var(--sfgi-gold-ink); }
.sfgi-bk-champ__label {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-bk-champ .sfgi-crest { margin: 2px 0; }
.sfgi-bk-champ__name {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.sfgi-bk-champ.is-tbd .sfgi-bk-champ__name { color: var(--sfgi-muted); }
.sfgi-bk-champ__sub {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

@media (max-width: 768px) {
	.sfgi-bk-round {
		flex-basis: 208px;
		width: 208px;
	}
	.sfgi-bk-rounds { gap: 14px; }
}

/* --------------------------------------------------------------------------
   C. COMPETITION CARDS — .sfgi-bkcards / .sfgi-bkcard  (#block_f-cups-*)
   Card grid of competitions: key-art or mono-glyph header, Anton name,
   status chips, winner foot row. --sfgi-cols comes inline from the widget.
   -------------------------------------------------------------------------- */

.sfgi-bkcards {
	display: grid;
	grid-template-columns: repeat(var(--sfgi-cols, 3), minmax(0, 1fr));
	gap: 18px;
}

.sfgi-bkcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
}
a.sfgi-bkcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
}

.sfgi-bkcard__art {
	position: relative;
	display: block;
	height: 150px;
	overflow: hidden;
	background: var(--sfgi-panel-2);
}
.sfgi-bkcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Mono variant: no key art — centre the champion crest (or the trophy glyph)
   on a soft radial wash of the champion's colour. */
.sfgi-bkcard__art--mono {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: radial-gradient(
		130% 120% at 50% 0%,
		color-mix(in srgb, var(--sfgi-team, var(--sfgi-gold)) 20%, transparent) 0%,
		transparent 68%
	);
	background-color: var(--sfgi-panel-2);
}
.sfgi-bkcard__crest {
	width: 76px;
	height: 76px;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}
.sfgi-bkcard__glyph {
	color: var(--sfgi-gold-ink);
	opacity: 0.9;
}

.sfgi-bkcard__top {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 14px 0;
}
.sfgi-bkcard__name {
	display: block;
	padding: 10px 14px 0;
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-bkcard:hover .sfgi-bkcard__name { color: var(--sfgi-accent); }
.sfgi-bkcard__sub {
	display: block;
	padding: 6px 14px 0;
}
.sfgi-bkcard__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--sfgi-line);
}
.sfgi-bkcard__sub + .sfgi-bkcard__foot,
.sfgi-bkcard__name + .sfgi-bkcard__foot { margin-top: 14px; }
.sfgi-bkcard__winner {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-bkcard__winner .sfgi-i { flex: 0 0 auto; }
.sfgi-bkcard__meta {
	margin-left: auto;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-muted);
}

@media (max-width: 1024px) {
	.sfgi-bkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.sfgi-bkcards {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.sfgi-bkcard__name { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   D. COMPETITION HERO — .sfgi-chero
   Tournament header stage: eyebrow + Anton title + status chips, a fact
   grid, and the champion (or "still to play for") row.
   -------------------------------------------------------------------------- */

.sfgi-chero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 24px 24px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	color: var(--sfgi-ink);
}

/* Optional key art sits behind everything as a dimmed backdrop. */
.sfgi-chero__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.2;
	-webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
}
.sfgi-chero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sfgi-chero > :not(.sfgi-chero__art) {
	position: relative;
	z-index: 1;
}

.sfgi-chero__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.sfgi-chero__name {
	margin: 0;
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-chero__top .sfgi-sub {
	margin: 0;
	max-width: 640px;
}
.sfgi-chero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.sfgi-chero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 18px;
	padding-top: 16px;
	border-top: 1px solid var(--sfgi-line);
}

.sfgi-chero__winner {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px 14px 14px;
	border-radius: var(--sfgi-r);
	color: var(--sfgi-ink);
	text-decoration: none;
	background-color: color-mix(in srgb, var(--sfgi-gold) 7%, var(--sfgi-panel-2));
	box-shadow: var(--sfgi-d1), var(--sfgi-ring-gold);
	transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
}
a.sfgi-chero__winner:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring-gold);
}
.sfgi-chero__crest { flex: 0 0 auto; }
svg.sfgi-chero__crest { color: var(--sfgi-gold-ink); }
.sfgi-chero__winner-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sfgi-chero__winner-body > span {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-chero__winner-body > b {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.sfgi-chero__winner.is-tbd .sfgi-chero__winner-body > b { color: var(--sfgi-muted); }
.sfgi-chero__winner-sub {
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
.sfgi-chero__mvp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
	text-decoration: none;
}
a.sfgi-chero__mvp:hover { color: var(--sfgi-accent); }

@media (max-width: 768px) {
	.sfgi-chero {
		padding: 20px 16px 18px;
		gap: 14px;
	}
	.sfgi-chero__winner { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   E. GROUP STAGE — .sfgi-groups  (#block_f-grp-*)
   One panel per group in a two-column grid. The table element itself
   (.sfgi-group-table) belongs to the standings sheet; everything here hangs
   off the group__* classes only these renderers emit.
   -------------------------------------------------------------------------- */

.sfgi-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.sfgi-groups__legend {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--sfgi-f-body);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sfgi-muted);
}

.sfgi-group {
	min-width: 0;
	padding: 16px 14px 12px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
}
.sfgi-group__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sfgi-line);
}
.sfgi-group__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-group__count {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-muted);
}

/* The caption is a full descriptive sentence — screen readers only. */
.sfgi-group__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sfgi-group__row td {
	padding: 7px 8px;
	border-top: 1px solid var(--sfgi-line);
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	color: var(--sfgi-ink);
	vertical-align: middle;
	white-space: nowrap;
}
.sfgi-group__row td.is-num {
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 13.5px;
	text-align: right;
}
.sfgi-group__row td.is-p,
.sfgi-group__row td.is-l,
.sfgi-group__row td.is-t,
.sfgi-group__row td.is-pa { color: var(--sfgi-muted); }
.sfgi-group__row td.is-pts {
	font-weight: 700;
	color: var(--sfgi-turf-ink);
}
.sfgi-group__row.is-through {
	background: color-mix(in srgb, var(--sfgi-turf) 5%, transparent);
}

/* Rank cell + the qualification stripe on its left edge. */
.sfgi-group__row td.is-pos {
	position: relative;
	width: 34px;
	padding-left: 12px;
}
.sfgi-group__stripe {
	position: absolute;
	left: 0;
	top: 5px;
	bottom: 5px;
	width: 3px;
	border-radius: 2px;
	background: transparent;
}
.sfgi-group__row.is-through .sfgi-group__stripe {
	background: var(--sfgi-team, var(--sfgi-turf));
	box-shadow: 0 0 10px color-mix(in srgb, var(--sfgi-team, var(--sfgi-turf)) 55%, transparent);
}
.sfgi-group__pos {
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 700;
	color: var(--sfgi-muted);
}
.sfgi-group__row.is-through .sfgi-group__pos { color: var(--sfgi-ink); }

.sfgi-group__team {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	color: var(--sfgi-ink);
	text-decoration: none;
}
.sfgi-group__abbr {
	font-family: var(--sfgi-f-ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-group__team:hover .sfgi-group__abbr { color: var(--sfgi-accent); }
.sfgi-group__nick {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--sfgi-muted);
}

/* Qualification cut line between the qualifiers and the rest. */
.sfgi-group__cut td {
	padding: 2px 8px;
	border-top: 1px dashed color-mix(in srgb, var(--sfgi-turf) 55%, transparent);
	text-align: right;
}
.sfgi-group__cut-label {
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-turf-ink);
}

@media (max-width: 1024px) {
	.sfgi-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.sfgi-group { padding: 13px 11px 10px; }
	.sfgi-group__nick { display: none; }
}

/* --------------------------------------------------------------------------
   F. CHAMPIONS — .sfgi-champs / .sfgi-champ  (#block_f-champ-*)
   Reigning-champion cards: gold-ringed panel, crown mark, Anton club name,
   competition + season, MVP and runner-up lines.
   -------------------------------------------------------------------------- */

.sfgi-champs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.sfgi-champ {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 16px 16px 14px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 22%, transparent);
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
}
a.sfgi-champ:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 55%, transparent);
}
.sfgi-champ__crown {
	position: absolute;
	top: 14px;
	right: 14px;
	color: var(--sfgi-gold-ink);
}
.sfgi-champ__crest { margin-bottom: 8px; }
.sfgi-champ__season {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-champ__name {
	margin: 2px 0;
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-champ:hover .sfgi-champ__name { color: var(--sfgi-accent); }
.sfgi-champ__comp {
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--sfgi-muted);
}
.sfgi-champ__runner {
	margin-top: 6px;
	font-family: var(--sfgi-f-body);
	font-size: 12px;
	color: var(--sfgi-muted);
}
.sfgi-champ__mvp {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
}
.sfgi-champ__trophy {
	align-self: stretch;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--sfgi-line);
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

@media (max-width: 1024px) {
	.sfgi-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.sfgi-champs {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   G. TROPHY CASE — .sfgi-trophies  (#block_f-tro-*)
   strip = one horizontal snap rail inside .sfgi-scroll; grid = wrapping
   tile wall. Tiles: gold trophy icon, Rajdhani year, crest, club.
   -------------------------------------------------------------------------- */

.sfgi-trophies {
	display: grid;
	gap: 14px;
	min-width: 0;
}
.sfgi-trophies__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.sfgi-trophies--strip .sfgi-trophies__rail {
	flex-wrap: nowrap;
	min-width: max-content;
}
.sfgi-trophies--strip .sfgi-trophies__wrap {
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
}
.sfgi-trophies--strip .sfgi-trophy { scroll-snap-align: start; }

.sfgi-trophy {
	flex: 1 1 150px;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 16px 12px;
	border-radius: var(--sfgi-r);
	text-align: center;
	text-decoration: none;
	color: var(--sfgi-ink);
	background-color: var(--sfgi-panel-2);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 24%, transparent);
	transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-trophies--strip .sfgi-trophy {
	flex: 0 0 164px;
	width: 164px;
	max-width: none;
}
a.sfgi-trophy:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 62%, transparent);
}
.sfgi-trophy__icon { color: var(--sfgi-gold-ink); }
.sfgi-trophy__year {
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--sfgi-gold-ink);
}
.sfgi-trophy__crest { margin: 2px 0; }
.sfgi-trophy__name {
	font-family: var(--sfgi-f-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-trophy:hover .sfgi-trophy__name { color: var(--sfgi-accent); }
.sfgi-trophy__sub {
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

@media (max-width: 768px) {
	.sfgi-trophies--strip .sfgi-trophy {
		flex-basis: 148px;
		width: 148px;
	}
}

/* --------------------------------------------------------------------------
   H. REDUCED MOTION for everything appended above — the hover transforms
   stop moving; colour, ring and depth changes survive.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	a.sfgi-bk-champ:hover,
	a.sfgi-bkcard:hover,
	a.sfgi-chero__winner:hover,
	a.sfgi-champ:hover,
	a.sfgi-trophy:hover {
		transform: none;
	}
}