.sfgi-tick-chip .sfgi-chip {
	padding: 3px 8px;
	font-size: 9.5px;
	letter-spacing: 0.12em;
}
.sfgi-tick-chip .sfgi-chip time { font: inherit; color: inherit; }
.sfgi-gc-head .sfgi-chip { margin-left: auto; flex: 0 0 auto; }
.sfgi-gc-venue .sfgi-i,
.sfgi-gc-tv .sfgi-i { flex: 0 0 auto; color: var(--sfgi-muted); opacity: 0.8; }
.sfgi-gh-crest .sfgi-crest {
	box-shadow:
		var(--sfgi-ring),
		0 18px 34px rgba(0, 0, 0, 0.5),
		0 0 40px color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 40%, transparent);
}
.sfgi-gh-countdown > .sfgi-countdown {
	width: 100%;
	max-width: 420px;
}
.sfgi-gh-meta-v .sfgi-i { flex: 0 0 auto; color: var(--sfgi-muted); }

/* ==========================================================================
   4. GAME BOXSCORE
   DOM: .sfgi-boxscore[.is-empty]
          > .sfgi-tablewrap.sfgi-box-scroll > table.sfgi-table.sfgi-box-table
              > thead th.sfgi-col-team / th.sfgi-col-total / th.sfgi-col-q
              > tbody tr.sfgi-box-row.is-away[.is-winner]
                  > th.sfgi-col-team > a > crest b.sfgi-box-abbr .sfgi-box-nick
                    td.sfgi-col-total > b ; td.sfgi-col-q
          > .sfgi-box-summary
              > .sfgi-box-subhead > h4 + .sfgi-box-key(> span.is-away/.is-home)
              > ol.sfgi-box-qlist > li.sfgi-box-q
                  > .sfgi-box-qlabel .sfgi-box-qbar(> i.sfgi-box-qfill x2)
                    .sfgi-box-qval(> b.is-away + b.is-home) .sfgi-box-qrun
              > ul.sfgi-box-facts > li > .sfgi-box-fact-k + .sfgi-box-fact-v
   ========================================================================== */

.sfgi-boxscore {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sfgi-boxscore.is-empty {
	/* The empty card now fills its column instead of sitting short beside a
	   taller neighbour, so the one-line placeholder is centred in it rather
	   than pinned to the top of a tall panel. */
	justify-content: center;
	text-align: center;
	padding: var(--sfgi-pad);
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}

/* ==========================================================================
   6. COUNTDOWN
   DOM: .sfgi-countdown-block.sfgi-cd-block--md
          > .sfgi-countdown.sfgi-cd--md[data-sfgi-countdown]
              > p.sfgi-cd-label
              > .sfgi-cd-tiles > span.sfgi-cd-cell
                  > b.sfgi-cd-num[data-cd] + i.sfgi-cd-unit
              > p.sfgi-cd-when > time + span.sfgi-cd-tv
          > a.sfgi-cd-game > b.sfgi-cd-matchup + i.sfgi-cd-week
   Sizes: .sfgi-cd--md .sfgi-cd--lg, plus the two placement variants
   .sfgi-cd--hero (over the field) and .sfgi-cd--inline (inside the game hero).
   (gridiron.css styles .sfgi-cd-units / .sfgi-cd-u, which nothing emits — that
   is why the tiles currently print "06Days12Hrs27Min48Sec".)
   ========================================================================== */

.sfgi-countdown-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sfgi-cd-block--md {
	gap: 10px;
	max-width: 520px;
}

.sfgi-cd-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sfgi-accent-ink);
}
.sfgi-cd-label::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--sfgi-accent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--sfgi-accent) 70%, transparent);
}

.sfgi-cd-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.sfgi-cd-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	padding: 12px 4px 10px;
	border-radius: var(--sfgi-r-sm);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--sfgi-panel-2) 92%, transparent) 0%, color-mix(in srgb, var(--sfgi-base) 78%, transparent) 100%);
	box-shadow: var(--sfgi-ring), var(--sfgi-d1);
	overflow: hidden;
}
/* The split-flap seam. It is what makes a rounded rectangle read as a tile
   rather than a box with a number in it. */
.sfgi-cd-cell::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.45), transparent);
}
.sfgi-cd-cell::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
}

.sfgi-cd-num {
	position: relative;
	z-index: 1;
	font-family: var(--sfgi-f-num);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--sfgi-ink);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.sfgi-cd-unit {
	position: relative;
	z-index: 1;
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-cd-when {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 600;
	color: var(--sfgi-muted);
}
.sfgi-cd-tv {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
.sfgi-cd-tv .sfgi-i { flex: 0 0 auto; opacity: 0.8; }

/* ---- sizes ---- */
.sfgi-cd--md .sfgi-cd-num { font-size: 26px; }
.sfgi-cd--md .sfgi-cd-cell { padding: 10px 4px 9px; }
.sfgi-cd--lg .sfgi-cd-num { font-size: 32px; }
.sfgi-cd--lg .sfgi-cd-cell { padding: 14px 5px 12px; }
.sfgi-cd--inline .sfgi-cd-tiles { width: 100%; }

.sfgi-countdown.is-over .sfgi-cd-tiles,
.sfgi-countdown.is-done .sfgi-cd-tiles { opacity: 0.5; }

/* ---- the matchup line under the tiles ---- */
.sfgi-cd-game {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 13px;
	border-radius: var(--sfgi-r-sm);
	text-decoration: none;
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-panel-2) 72%, transparent);
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
	transition: box-shadow var(--sfgi-t) var(--sfgi-ease), background-color var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-cd-game:hover { box-shadow: var(--sfgi-ring-hot), var(--sfgi-d1); }
.sfgi-cd-matchup {
	min-width: 0;
	font-family: var(--sfgi-f-display);
	font-size: 15px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sfgi-cd-week {
	flex: 0 0 auto;
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	white-space: nowrap;
}

/* ---- the perspective yard-line plane ------------------------------------
   .sfgi-field ships with NO children by contract: the plane, the lines, the
   hash rails and the horizon are this element's two pseudo-elements. */
.sfgi-field {
	position: absolute;
	inset: 0;
	overflow: hidden;
	perspective: 640px;
	perspective-origin: 50% 0%;
}
.sfgi-field::before {
	content: "";
	position: absolute;
	left: -70%;
	right: -70%;
	top: 32%;
	bottom: -90%;
	transform-origin: 50% 0%;
	transform: rotateX(76deg);
	background-color: color-mix(in srgb, var(--sfgi-turf) 10%, transparent);
	background-image:
		/* the five-yard lines, marching toward the viewer */
		repeating-linear-gradient(180deg,
			color-mix(in srgb, var(--sfgi-ink) 38%, transparent) 0 2px,
			transparent 2px 96px),
		/* hash rails running the length of the field */
		repeating-linear-gradient(90deg,
			color-mix(in srgb, var(--sfgi-ink) 16%, transparent) 0 2px,
			transparent 2px 118px),
		/* mow stripes */
		repeating-linear-gradient(90deg,
			color-mix(in srgb, var(--sfgi-turf) 7%, transparent) 0 118px,
			transparent 118px 236px);
	background-size: 100% 96px, 100% 100%, 100% 100%;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 12%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 12%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0) 100%);
}
/* The horizon: a cool bloom where the plane meets the sky, plus the fade that
   stops the plane having a visible top edge. */
.sfgi-field::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(140% 44% at 50% 33%, color-mix(in srgb, var(--sfgi-neon) 20%, transparent) 0%, transparent 66%),
		linear-gradient(180deg, color-mix(in srgb, var(--sfgi-base) 92%, transparent) 0%, transparent 36%);
}
.sfgi-fh-meta .sfgi-i { flex: 0 0 auto; opacity: 0.8; }
/* OVERRIDE — the shared .sfgi-crest ships a flat 4px/14px shadow. At hero size
   it needs the full depth ladder plus the team bloom. */
.sfgi-fh-crest .sfgi-crest {
	box-shadow:
		var(--sfgi-ring),
		0 26px 54px rgba(0, 0, 0, 0.6),
		0 0 70px color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 45%, transparent),
		inset 0 2px 0 rgba(255, 255, 255, 0.14);
}
.sfgi-fh-chip .sfgi-chip {
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-base) 62%, transparent);
	box-shadow: var(--sfgi-ring);
}
.sfgi-fh-countdown > .sfgi-countdown {
	width: 100%;
	max-width: 480px;
}

/* ==========================================================================
   8. THEME TOGGLE
   DOM: .sfgi-scheme > button.sfgi-scheme-toggle[aria-pressed]
          > span.sfgi-scheme-toggle-icons
              > svg.sfgi-i.sfgi-scheme-sun + svg.sfgi-i.sfgi-scheme-moon
   Both icons ship in the DOM always; this file shows exactly one per scheme.
   Dark is the default, and the icon advertises the DESTINATION, matching the
   button's accessible name ("Switch to the light colour scheme" -> sun).
   ========================================================================== */

.sfgi-scheme {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.sfgi-scheme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--sfgi-muted);
	background-color: color-mix(in srgb, var(--sfgi-panel-2) 78%, transparent);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
	transition: color var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease), background-color var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-scheme-toggle:hover {
	color: var(--sfgi-ink);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-hot);
}

.sfgi-scheme-toggle-icons {
	position: relative;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
}
.sfgi-scheme-sun,
.sfgi-scheme-moon {
	grid-area: 1 / 1;
	width: 18px;
	height: 18px;
	transition: opacity var(--sfgi-t) var(--sfgi-ease), transform var(--sfgi-t) var(--sfgi-ease);
}
/* Dark scheme (the default): offer the sun. */
.sfgi-scheme-sun { opacity: 1; transform: none; }
.sfgi-scheme-moon { opacity: 0; transform: rotate(-80deg) scale(0.5); }
/* Light scheme: offer the moon. */
:root.sfgi-light .sfgi-scheme-sun { opacity: 0; transform: rotate(80deg) scale(0.5); }
:root.sfgi-light .sfgi-scheme-moon { opacity: 1; transform: none; }
:root.sfgi-light .sfgi-scheme-toggle { color: var(--sfgi-violet-ink); }

/* ==========================================================================
   9. FOCUS — a visible ring on every interactive element this sheet owns
   ========================================================================== */

.sfgi-tick:focus-visible,
.sfgi-sb-cell:focus-visible,
.sfgi-gc-link:focus-visible,
.sfgi-gh-team:focus-visible,
.sfgi-gh-comp:focus-visible,
.sfgi-cmp-team:focus-visible,
.sfgi-cd-game:focus-visible,
.sfgi-fh-team:focus-visible,
.sfgi-fh-btn:focus-visible,
.sfgi-scheme-toggle:focus-visible,
.sfgi-box-scroll:focus-visible,
.sfgi-scoreboard--ticker:focus-visible,
.sfgi-box-row th.sfgi-col-team a:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 3px;
	border-radius: var(--sfgi-r-sm);
}
.sfgi-scheme-toggle:focus-visible { border-radius: 50%; }
.sfgi-tick:focus-visible,
.sfgi-cd-game:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   10. RESPONSIVE
   Base rules above are the 390px layout. Nothing below widens anything that
   could push the page sideways: the ticker rail and the boxscore table each
   scroll inside their own box at every width.
   ========================================================================== */

@media (min-width: 600px) {

	.sfgi-cd-cell { padding: 14px 6px 12px; }
	.sfgi-cd--md .sfgi-cd-num { font-size: 30px; }
	.sfgi-cd--lg .sfgi-cd-num { font-size: 38px; }
}

/* Very narrow phones: give the two-up matchups room by dropping the parts the
   crest and the score already tell you. */
@media (max-width: 389px) {
	.sfgi-cd-tiles { gap: 6px; }
	.sfgi-cd-num { font-size: 24px; }
}

/* ==========================================================================
   11. MOTION
   Everything here is scoped under body.sfgi-fx (assets/fx.js adds it on boot),
   so a visitor with JavaScript off gets the complete, flat, correct page.
   Pointer effects are additionally gated on (pointer: fine).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* ---- the field drifts toward the viewer ---- */
	body.sfgi-fx .sfgi-field::before {
		animation: sfgi-field-run 9s linear infinite;
	}

	/* ---- scroll reveal ----
	   `:not(.is-in)` means the start state stops matching the instant fx.js
	   marks the element in view — no other sheet's `.is-in` rule has to win a
	   specificity fight for the content to appear. `translate`/`scale` are used
	   rather than `transform` so the tilt transform below is never clobbered. */
	body.sfgi-fx-reveal .sfgi-gamecard.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-gamehero.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-fieldhero.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-boxscore.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-compare.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-countdown-block.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-gamecards.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-sb-cell.sfgi-reveal:not(.is-in) {
		opacity: 0;
		translate: 0 16px;
		scale: 0.99;
	}
	body.sfgi-fx-reveal .sfgi-gamecard.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-gamehero.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-fieldhero.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-boxscore.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-compare.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-countdown-block.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-gamecards.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-sb-cell.sfgi-reveal {
		transition:
			opacity .52s var(--sfgi-ease) var(--fxd, 0ms),
			translate .52s var(--sfgi-ease) var(--fxd, 0ms),
			scale .52s var(--sfgi-ease) var(--fxd, 0ms);
	}

	/* ---- pointer tilt ---- */
	@media (pointer: fine) {
		body.sfgi-fx .sfgi-gamecard.sfgi-tilt,
		body.sfgi-fx .sfgi-gamehero.sfgi-tilt,
		body.sfgi-fx .sfgi-fh-matchup.sfgi-tilt {
			transform:
				perspective(var(--sfgi-persp))
				rotateX(var(--rx, 0deg))
				rotateY(var(--ry, 0deg))
				translateY(var(--lift, 0px));
			transition: transform var(--sfgi-t) var(--sfgi-ease), box-shadow var(--sfgi-t) var(--sfgi-ease);
		}
		body.sfgi-fx .sfgi-gamecard.sfgi-tilt.is-tilting,
		body.sfgi-fx .sfgi-gamehero.sfgi-tilt.is-tilting { box-shadow: var(--sfgi-d3-hi); }
		body.sfgi-fx .sfgi-fh-matchup.sfgi-tilt.is-tilting { box-shadow: var(--sfgi-d4), var(--sfgi-ring-neon); }

		/* The pointer glare that rides the tilt. */
		body.sfgi-fx .sfgi-gamecard.sfgi-tilt::before,
		body.sfgi-fx .sfgi-fh-matchup.sfgi-tilt::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 3;
			pointer-events: none;
			border-radius: inherit;
			opacity: 0;
			background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 68%);
			transition: opacity var(--sfgi-t) var(--sfgi-ease);
		}
		body.sfgi-fx .sfgi-gamecard.sfgi-tilt.is-tilting::before,
		body.sfgi-fx .sfgi-fh-matchup.sfgi-tilt.is-tilting::before { opacity: 1; }

		/* Parallax layers. fx.js writes --z/--px/--py; the perspective travels
		   in the transform itself so no preserve-3d chain is required. */
		body.sfgi-fx .sfgi-gc-crest.sfgi-layer,
		body.sfgi-fx .sfgi-gh-crest.sfgi-layer,
		body.sfgi-fx .sfgi-fh-crest.sfgi-layer,
		body.sfgi-fx .sfgi-fh-versus.sfgi-layer {
			transition: transform var(--sfgi-t) var(--sfgi-ease);
		}
	}

	.sfgi-gc-crest.sfgi-layer {
		transform: perspective(600px) translate3d(var(--px, 0px), var(--py, 0px), var(--z, 0px));
	}
}

@keyframes sfgi-field-run {
	from { background-position: 0 0, 0 0, 0 0; }
	to   { background-position: 0 96px, 0 0, 0 0; }
}

/* Reduced motion: the page keeps every colour, shadow and layout decision and
   loses every moving part. */
@media (prefers-reduced-motion: reduce) {
	.sfgi-field::before,
	.sfgi-holo-stage::after { animation: none !important; }

	.sfgi-gamecard.sfgi-tilt,
	.sfgi-gamehero.sfgi-tilt,
	.sfgi-fh-matchup.sfgi-tilt,
	.sfgi-gc-crest.sfgi-layer,
	.sfgi-gh-crest.sfgi-layer,
	.sfgi-fh-crest.sfgi-layer,
	.sfgi-fh-versus.sfgi-layer {
		transform: none !important;
	}

	.sfgi-gamecard.sfgi-reveal,
	.sfgi-gamecards.sfgi-reveal,
	.sfgi-gamehero.sfgi-reveal,
	.sfgi-fieldhero.sfgi-reveal,
	.sfgi-boxscore.sfgi-reveal,
	.sfgi-compare.sfgi-reveal,
	.sfgi-countdown-block.sfgi-reveal,
	.sfgi-sb-cell.sfgi-reveal {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
	}

	.sfgi-tick,
	.sfgi-tick::after,
	.sfgi-tick-side,
	.sfgi-sb-cell,
	.sfgi-gamecard,
	.sfgi-gc-row,
	.sfgi-gc-link,
	.sfgi-gc-link-i,
	.sfgi-gh-comp,
	.sfgi-cmp-team,
	.sfgi-cmp-fill,
	.sfgi-box-qfill,
	.sfgi-cd-game,
	.sfgi-fh-btn,
	.sfgi-fh-btn-i,
	.sfgi-scheme-toggle,
	.sfgi-scheme-sun,
	.sfgi-scheme-moon {
		transition: none !important;
	}
}

/* =========================================================== field hero
   gridiron/field-hero — layout authored against the RENDERED DOM (the
   component previously had structural classes with no rules anywhere; the
   block theme composed its own hero so the gap never surfaced). Geometry
   mirrors the block front hero: min-height 620/540/460, inner 1240 grid,
   copy 560 left, stage 46% right, 128px ringed crests, glass matchup panel.
   Base furniture (.sfgi-field, .sfgi-cd-*, .sfgi-btn, .sfgi-eyebrow,
   .sfgi-chip) already has rules — nothing here restyles it. */

.sfgi-fieldhero {
	position: relative;
	overflow: hidden;
	min-height: 620px;
	display: flex;
	align-items: stretch;
	background: var(--sfgi-base);
}

.sfgi-fieldhero .sfgi-fh-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sfgi-fieldhero .sfgi-fh-bg .sfgi-field {
	position: absolute;
	inset: 0;
}

.sfgi-field-glow {
	position: absolute;
	width: 46vw;
	height: 46vw;
	max-width: 720px;
	max-height: 720px;
	border-radius: 999px;
	filter: blur(90px);
	opacity: 0.35;
	pointer-events: none;
}

.sfgi-field-glow.is-away {
	left: -8vw;
	top: -20%;
	background: radial-gradient(circle, var(--sfgi-away, var(--sfgi-accent)) 0%, transparent 65%);
}

.sfgi-field-glow.is-home {
	right: -8vw;
	bottom: -20%;
	background: radial-gradient(circle, var(--sfgi-home, var(--sfgi-neon)) 0%, transparent 65%);
}

.sfgi-fh-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 72px 28px;
}

.sfgi-fh-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 560px;
	flex: 1 1 auto;
	min-width: 0;
}

.sfgi-fh-eyebrow {
	margin: 0;
	color: var(--sfgi-muted);
	letter-spacing: 0.14em;
	font-weight: 600;
}

.sfgi-fh-headline {
	margin: 0;
	font-family: var(--sfgi-f-display);
	font-size: 76px;
	line-height: 0.94;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

.sfgi-fh-sub {
	margin: 0;
	font-family: var(--sfgi-f-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--sfgi-muted);
	max-width: 480px;
}

.sfgi-fh-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.sfgi-fh-btn {
	padding: 13px 26px;
	border-radius: var(--sfgi-pill);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.sfgi-fh-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 2px 0 0;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--sfgi-muted);
}

.sfgi-fh-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Right stage: glass matchup panel over the countdown. */
.sfgi-fh-stage {
	width: 46%;
	flex: 0 0 46%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.sfgi-fh-matchup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--sfgi-glass-2, rgba(19, 26, 41, 0.66));
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	border-radius: var(--sfgi-r-lg);
	padding: 28px 26px;
}

.sfgi-fh-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
	text-decoration: none;
	text-align: center;
}

.sfgi-fh-crest {
	width: 128px;
	height: 128px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sfgi-panel);
	border-radius: 999px;
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	padding: 6px;
}

.sfgi-fh-crest .sfgi-crest {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 999px;
}

.sfgi-fh-abbr {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-fh-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sfgi-fh-name i {
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-fh-name b {
	font-family: var(--sfgi-f-display);
	font-size: 34px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

.sfgi-fh-rec {
	font-family: var(--sfgi-f-num);
	font-size: 13px;
	font-weight: 700;
	color: var(--sfgi-ink);
}

.sfgi-fh-seed {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
}

.sfgi-fh-versus {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.sfgi-fh-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-size: 40px;
	color: var(--sfgi-ink);
}

.sfgi-fh-vs {
	font-family: var(--sfgi-f-display);
	font-size: 22px;
	color: var(--sfgi-muted);
}

.sfgi-fh-chip {
	display: inline-flex;
}

.sfgi-fh-countdown .sfgi-countdown {
	margin: 0;
}

/* Holo variant: violet/neon wash instead of the turf plane. */
.sfgi-fieldhero--holo {
	background:
		radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--sfgi-violet) 26%, transparent) 0%, transparent 55%),
		radial-gradient(120% 90% at 85% 100%, color-mix(in srgb, var(--sfgi-neon) 18%, transparent) 0%, transparent 55%),
		var(--sfgi-base);
}

.sfgi-fieldhero--holo .sfgi-field {
	opacity: 0.35;
}

@media (max-width: 1024px) {
	.sfgi-fieldhero {
		min-height: 540px;
	}

	.sfgi-fh-inner {
		gap: 30px;
		padding: 56px 22px;
	}

	.sfgi-fh-headline {
		font-size: 58px;
	}

	.sfgi-fh-stage {
		width: 48%;
		flex-basis: 48%;
	}

	.sfgi-fh-crest {
		width: 108px;
		height: 108px;
	}

	.sfgi-fh-name b {
		font-size: 30px;
	}
}

@media (max-width: 768px) {
	.sfgi-fieldhero {
		min-height: 460px;
	}

	.sfgi-fh-inner {
		flex-wrap: wrap;
		gap: 26px;
		padding: 40px 16px;
	}

	.sfgi-fh-headline {
		font-size: 40px;
	}

	.sfgi-fh-stage {
		width: 100%;
		flex-basis: 100%;
	}

	.sfgi-fh-crest {
		width: 84px;
		height: 84px;
	}

	.sfgi-fh-name b {
		font-size: 24px;
	}

	.sfgi-fh-matchup {
		padding: 20px 14px;
		gap: 10px;
	}
}

/* Scoreboard ticker track — single scrolling row (previously unstyled). */
.sfgi-scoreboard--ticker {
	overflow: hidden;
}

.sfgi-scoreboard--ticker .sfgi-ticker {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sfgi-scoreboard--ticker .sfgi-ticker::-webkit-scrollbar {
	display: none;
}

.sfgi-ticker-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	width: max-content;
}

/* ==========================================================================
   11. GAMES FAMILY — appended (game cards, game hero, game compare, ticker
   pill internals, cd/fh leftovers). Orphan-list work: everything below styles
   previously ruleless classes; the few structural companions (.sfgi-gc-row,
   .sfgi-gc-head, .sfgi-gc-link, .sfgi-gh-team, .sfgi-gh-num, .sfgi-cmp-team,
   .sfgi-cmp-fill, .sfgi-tick-side) belong to the same components, are claimed
   by no other family sheet, and only had transition/focus rules before.
   Card / row numbers mirror the block demo week cards (#block_f-wk-*).
   ========================================================================== */

/* ------------------------------------------------ game cards: day sections */

.sfgi-day {
	display: block;
}

.sfgi-day + .sfgi-day {
	margin-top: 28px;
}

.sfgi-day-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sfgi-line);
}

.sfgi-day-label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sfgi-f-ui);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

/* Relative part ("Today" / "Tomorrow"): the red day badge. */
.sfgi-day-label b {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 4px 10px;
	border-radius: var(--sfgi-pill);
	background: var(--sfgi-accent);
	color: var(--sfgi-on-bright);
}

.sfgi-day-label b + span {
	font-size: 12.5px;
	color: var(--sfgi-muted);
}

/* Live day: a hot dot ahead of the label. */
.sfgi-day-head.is-live .sfgi-day-label::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sfgi-accent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--sfgi-accent) 70%, transparent);
}

.sfgi-day-count {
	margin-left: auto;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	white-space: nowrap;
}

/* ---------------------------------------------------- game cards: the grid */

.sfgi-gamecards-grid {
	display: grid;
	grid-template-columns: repeat(var(--sfgi-cols, 3), minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* ---------------------------------------------------- game cards: one card */

/* Structural companions: header / matchup rows / details link had no layout. */
.sfgi-gc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px 10px;
}

.sfgi-gc-week {
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-gc-body {
	display: flex;
	flex-direction: column;
}

.sfgi-gc-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-radius: var(--sfgi-r-sm);
	transition: background-color var(--sfgi-t-fast) ease;
}

.sfgi-gc-row:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

.sfgi-gc-name {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
}

.sfgi-gc-city {
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-gc-nick {
	font-family: var(--sfgi-f-ui);
	font-style: normal;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--sfgi-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfgi-gc-rec {
	flex: 0 0 auto;
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-muted);
	min-width: 34px;
	text-align: right;
}

.sfgi-gc-score {
	flex: 0 0 auto;
	font-family: var(--sfgi-f-num);
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--sfgi-ink);
	min-width: 34px;
	text-align: right;
}

.sfgi-gc-score.is-blank {
	color: var(--sfgi-muted);
}

/* Final games: the losing score steps back. */
.sfgi-gamecard.is-final .sfgi-gc-row:not(.is-winner) .sfgi-gc-score {
	color: var(--sfgi-muted);
}

.sfgi-gc-chev {
	flex: 0 0 auto;
	width: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--sfgi-accent-2);
}

.sfgi-gc-chev-i {
	display: block;
	width: 14px;
	height: 14px;
}

.sfgi-gc-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding: 12px 4px 0;
	border-top: 1px solid var(--sfgi-line);
}

.sfgi-gc-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--sfgi-muted);
}

.sfgi-gc-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sfgi-gc-link {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sfgi-accent);
	transition: color var(--sfgi-t-fast) ease;
	white-space: nowrap;
}

.sfgi-gc-link:hover {
	color: var(--sfgi-accent-2);
}

/* --------------------------------------------------------------- game hero */

/* Team-colour glows behind the stage (wrapper carries --sfgi-away/--sfgi-home
   custom properties from its inline style; .sfgi-stage provides position,
   overflow and panel chrome). */
.sfgi-gh-glow {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	filter: blur(90px);
	opacity: 0.3;
	pointer-events: none;
}

.sfgi-gh-glow.is-away {
	left: -160px;
	top: -200px;
	background: radial-gradient(circle, var(--sfgi-away, var(--sfgi-accent)) 0%, transparent 65%);
}

.sfgi-gh-glow.is-home {
	right: -160px;
	bottom: -200px;
	background: radial-gradient(circle, var(--sfgi-home, var(--sfgi-neon)) 0%, transparent 65%);
}

.sfgi-gh-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 40px 36px 32px;
	text-align: center;
}

.sfgi-gh-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.sfgi-gh-round {
	color: var(--sfgi-accent-2);
}

.sfgi-gh-season {
	color: var(--sfgi-muted);
	font-variant-numeric: tabular-nums;
}

/* Companion: the competition link inside the eyebrow. */
.sfgi-gh-comp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sfgi-muted);
	text-decoration: none;
	transition: color var(--sfgi-t-fast) ease;
}

a.sfgi-gh-comp:hover {
	color: var(--sfgi-accent);
}

/* The matchup: two teams flanking the huge score / VS. */
.sfgi-gh-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
}

/* Companion: team columns had no layout rule. */
.sfgi-gh-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	text-decoration: none;
	color: var(--sfgi-ink);
}

.sfgi-gh-abbr {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

.sfgi-gh-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.2;
}

.sfgi-gh-name i {
	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-gh-name b {
	font-family: var(--sfgi-f-ui);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.sfgi-gh-rec {
	font-family: var(--sfgi-f-num);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-muted);
}

.sfgi-gh-seed {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--sfgi-pill);
	background: color-mix(in srgb, var(--sfgi-gold) 14%, transparent);
	color: var(--sfgi-gold-ink);
}

.sfgi-gh-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: clamp(56px, 8vw, 92px);
	line-height: 0.9;
	color: var(--sfgi-ink);
}

/* Companions: score digits / dash carry state classes but had no rules. */
.sfgi-gh-num {
	min-width: 1.1em;
	text-align: center;
}

.sfgi-gh-num.is-winner {
	color: var(--sfgi-accent-2);
	text-shadow: 0 0 34px color-mix(in srgb, var(--sfgi-accent-2) 45%, transparent);
}

.sfgi-gh-dash {
	font-size: 0.55em;
	color: var(--sfgi-muted);
}

.sfgi-gh-vs {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: clamp(44px, 7vw, 72px);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--sfgi-g-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sfgi-gh-state {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.sfgi-gh-kickoff {
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

/* Companions: the live clock / final margin share the state line. */
.sfgi-gh-clock {
	font-family: var(--sfgi-f-num);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-neon-ink);
}

.sfgi-gh-margin {
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--sfgi-muted);
}

.sfgi-gh-meta {
	list-style: none;
	width: 100%;
	max-width: 880px;
	margin: 6px auto 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--sfgi-line);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 40px;
}

.sfgi-gh-meta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.sfgi-gh-meta-k {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

/* Companion: the value cell (icon colour already set near the file top). */
.sfgi-gh-meta-v {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sfgi-f-num);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-ink);
}

/* ------------------------------------------------------------ game compare */

/* Companion: the component wrapper only had reveal/empty rules. */
.sfgi-compare {
	padding: var(--sfgi-pad);
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
}

.sfgi-cmp-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sfgi-line);
}

/* Companion: team chips in the header had no layout. */
.sfgi-cmp-team {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	color: var(--sfgi-ink);
}

.sfgi-cmp-team.is-away {
	justify-self: start;
}

.sfgi-cmp-team.is-home {
	justify-self: end;
	flex-direction: row-reverse;
	text-align: right;
}

.sfgi-cmp-abbr {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

.sfgi-cmp-name {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.sfgi-cmp-vs {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--sfgi-pill);
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring);
	color: var(--sfgi-muted);
}

.sfgi-cmp-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sfgi-cmp-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
}

.sfgi-cmp-label {
	text-align: center;
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	white-space: nowrap;
}

.sfgi-cmp-val {
	font-family: var(--sfgi-f-num);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-ink);
}

.sfgi-cmp-val.is-away {
	text-align: left;
}

.sfgi-cmp-val.is-home {
	text-align: right;
}

.sfgi-cmp-val.is-better {
	color: var(--sfgi-accent-2);
}

/* Dual bars growing towards the centre, painted in team colours. */
.sfgi-cmp-bars {
	grid-column: 1 / -1;
	display: flex;
	gap: 6px;
	height: 6px;
}

.sfgi-cmp-half {
	flex: 1 1 0;
	display: flex;
	border-radius: var(--sfgi-pill);
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-d0);
	overflow: hidden;
}

.sfgi-cmp-half.is-away {
	justify-content: flex-end;
}

/* Companion: the fill only had a motion-kill rule; width from inline --sfgi-w. */
.sfgi-cmp-fill {
	display: block;
	height: 100%;
	width: var(--sfgi-w, 0%);
	border-radius: var(--sfgi-pill);
}

.sfgi-cmp-half.is-away .sfgi-cmp-fill {
	background: var(--sfgi-away, var(--sfgi-accent));
}

.sfgi-cmp-half.is-home .sfgi-cmp-fill {
	background: var(--sfgi-home, var(--sfgi-neon));
}

/* -------------------------------------------------- ticker pill internals */

/* Companions: pill chrome comes from .sfgi-pill; sides had no layout. */
.sfgi-tick {
	flex: 0 0 auto;
	white-space: nowrap;
	text-decoration: none;
}

.sfgi-tick-side {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sfgi-tick-abbr {
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sfgi-ink);
}

.sfgi-tick-rec {
	font-style: normal;
	font-family: var(--sfgi-f-num);
	font-size: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-muted);
}

.sfgi-tick-score {
	font-family: var(--sfgi-f-num);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-accent-2);
}

.sfgi-tick-at {
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--sfgi-muted);
}

/* ------------------------------------------- countdown / field-hero crumbs */

/* Hero placement: centred under the hero copy, no extra chrome of its own. */
.sfgi-cd--hero {
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
}

.sfgi-cd--hero .sfgi-cd-label,
.sfgi-cd--hero .sfgi-cd-when {
	justify-content: center;
	text-align: center;
}

/* Field-hero meta crumbs (parent .sfgi-fh-meta already lays the row out). */
.sfgi-fh-meta-round,
.sfgi-fh-meta-venue,
.sfgi-fh-meta-tv,
.sfgi-fh-meta-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--sfgi-muted);
}

/* Turf variant wrapper: the .sfgi-field plane paints the pitch; the wrapper
   only needs a solid fallback behind it. */
.sfgi-fieldhero--field {
	background: var(--sfgi-base);
}

/* --------------------------------------------------- motion (opt-in only) */

@media (prefers-reduced-motion: no-preference) {

	.sfgi-day-head.is-live .sfgi-day-label::before {
		animation: sfgi-day-live 1.6s ease-in-out infinite;
	}

	@keyframes sfgi-day-live {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.45; transform: scale(0.8); }
	}

	.sfgi-cmp-fill {
		transition: width 0.6s var(--sfgi-ease);
	}
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {

	.sfgi-gamecards-grid[data-columns="3"],
	.sfgi-gamecards-grid[data-columns="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sfgi-gh-inner {
		padding: 32px 24px 26px;
	}

	.sfgi-gh-score {
		font-size: clamp(48px, 9vw, 72px);
	}

	.sfgi-gh-vs {
		font-size: clamp(38px, 7vw, 56px);
	}
}

@media (max-width: 768px) {

	.sfgi-gamecards-grid,
	.sfgi-gamecards-grid[data-columns="3"],
	.sfgi-gamecards-grid[data-columns="4"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.sfgi-gc-nick {
		font-size: 17px;
	}

	.sfgi-gc-score {
		font-size: 20px;
	}

	.sfgi-gh-inner {
		padding: 26px 16px 22px;
		gap: 14px;
	}

	.sfgi-gh-teams {
		gap: 12px;
	}

	.sfgi-gh-abbr {
		font-size: 20px;
	}

	.sfgi-gh-name b {
		font-size: 13px;
	}

	.sfgi-gh-score {
		font-size: 40px;
		gap: 10px;
	}

	.sfgi-gh-vs {
		font-size: 34px;
	}

	.sfgi-gh-meta {
		gap: 12px 22px;
	}

	.sfgi-cmp-abbr {
		font-size: 16px;
	}

	.sfgi-cmp-name {
		display: none;
	}

	.sfgi-cmp-label {
		white-space: normal;
	}
}

/* ================================================== block-demo parity pass
   Measured against the /gridiron/ block front page (owner review). */

/* Ticker pills: the demo stacks away over home inside one pill, with the
   status chip on the right spanning both rows — not one long line. */
.sfgi-tick {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 3px;
}

.sfgi-tick .sfgi-tick-at {
	display: none;
}

.sfgi-tick .sfgi-tick-side {
	display: flex;
	align-items: center;
	gap: 6px;
	grid-column: 1;
	min-width: 0;
}

.sfgi-tick .sfgi-tick-side.is-away {
	grid-row: 1;
}

.sfgi-tick .sfgi-tick-side.is-home {
	grid-row: 2;
}

.sfgi-tick .sfgi-tick-rec {
	min-width: 32px;
	font-style: normal;
}

.sfgi-tick .sfgi-tick-score {
	margin-left: auto;
	min-width: 18px;
	text-align: right;
}

.sfgi-tick .sfgi-tick-chip {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}

/* Field hero: the demo's copy column is wide enough for "THE SEASON STARTS"
   on one line; VS is neon; the seed is a gold chip; the kickoff card is the
   compact days+hours read, not the four-tile odometer. */
.sfgi-fh-copy {
	max-width: 640px;
}

.sfgi-fh-sub {
	max-width: 560px;
}

.sfgi-fh-vs {
	font-size: 28px;
	color: var(--sfgi-neon);
	text-shadow: 0 0 18px color-mix(in srgb, var(--sfgi-neon) 55%, transparent);
	letter-spacing: 0.04em;
}

.sfgi-fh-seed {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: var(--sfgi-pill);
	background: color-mix(in srgb, var(--sfgi-gold) 14%, transparent);
	box-shadow: var(--sfgi-ring-gold);
	color: var(--sfgi-gold-ink);
	font-size: 10px;
	letter-spacing: 0.14em;
}

/* Owner preference: the four-tile odometer stays (it reads better than the
   demo's compact "3d 08h"); the card just fills the stage width evenly. */
.sfgi-fh-countdown,
.sfgi-fh-countdown .sfgi-countdown {
	width: 100%;
	max-width: none;
}

/* =========================================================== box score
   gridiron/game-boxscore — authored against the RENDERED DOM (the class
   contract at the top of this file). These classes were documented there but
   never styled: the summary rendered as one run-on paragraph of digits.
   Team colours ride in as --sfgi-away / --sfgi-home on the block root. */

.sfgi-boxscore {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sfgi-boxscore .sfgi-tablewrap {
	overflow-x: auto;
	background: var(--sfgi-panel);
	border-radius: var(--sfgi-r);
	box-shadow: var(--sfgi-d1), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Scoped under .sfgi-boxscore: standings.css loads AFTER this sheet and its
   shared `.sfgi-table th/td` base pads cells with var(--sfgi-cell-x) — a
   token its own components define and the box score does not, so the whole
   padding declaration went invalid and the edge cells sat clipped against
   the panel radius. The extra class outranks the (0,1,1) base for good. */
.sfgi-boxscore .sfgi-box-table {
	width: 100%;
	border-collapse: collapse;
}

/* The total header is an <abbr>; the UA dotted underline is clutter here. */
.sfgi-boxscore abbr[title] {
	text-decoration: none;
	border-bottom: none;
}

.sfgi-boxscore .sfgi-box-table th,
.sfgi-boxscore .sfgi-box-table td {
	padding: 11px 14px;
	text-align: center;
}

.sfgi-boxscore .sfgi-box-table thead th {
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	border-bottom: 1px solid var(--sfgi-line);
}

.sfgi-boxscore .sfgi-box-row + .sfgi-box-row th,
.sfgi-boxscore .sfgi-box-row + .sfgi-box-row td {
	border-top: 1px solid var(--sfgi-line);
}

.sfgi-boxscore .sfgi-box-table .sfgi-col-team {
	text-align: left;
	/* The team column absorbs the slack, so the five number columns cluster
	   evenly at the right instead of scattering across the card's width. */
	width: 42%;
}

.sfgi-boxscore .sfgi-box-row th.sfgi-col-team a {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--sfgi-ink);
	text-decoration: none;
	min-width: 0;
	white-space: nowrap;
}

.sfgi-boxscore .sfgi-box-row .sfgi-col-team img,
.sfgi-boxscore .sfgi-box-row .sfgi-col-team .sfgi-crest {
	width: 30px;
	height: 30px;
	object-fit: contain;
	flex-shrink: 0;
}

.sfgi-box-abbr {
	font-family: var(--sfgi-f-num);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.sfgi-box-nick {
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-boxscore .sfgi-box-table .sfgi-col-q {
	font-family: var(--sfgi-f-num);
	font-size: 14px;
	color: var(--sfgi-muted);
	min-width: 44px;
}

.sfgi-boxscore .sfgi-box-table .sfgi-col-total b {
	font-family: var(--sfgi-f-num);
	font-size: 19px;
	font-weight: 700;
	color: var(--sfgi-ink);
}

.sfgi-boxscore .sfgi-box-row.is-winner .sfgi-col-total b {
	color: var(--sfgi-accent-2);
}

/* ------------------------------------------------- the scoring summary --
   One row per quarter: label | mirrored team bars | the two scores | the
   running score. The bars' widths arrive as --sfgi-w from the renderer. */

.sfgi-box-summary {
	background: var(--sfgi-panel);
	border-radius: var(--sfgi-r);
	box-shadow: var(--sfgi-d1), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sfgi-box-subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sfgi-box-subhead h4 {
	margin: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-box-key {
	display: flex;
	gap: 7px;
}

.sfgi-box-key span {
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 3px 10px;
	border-radius: 999px;
	color: #fff;
	background: var(--sfgi-team);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.sfgi-box-qlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sfgi-box-q {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) 58px 72px;
	align-items: center;
	gap: 12px;
}

.sfgi-box-qlabel {
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 700;
	color: var(--sfgi-muted);
	text-align: center;
	background: var(--sfgi-panel-2);
	border-radius: var(--sfgi-r-sm);
	padding: 4px 0;
}

.sfgi-box-qbar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sfgi-box-qfill {
	display: block;
	height: 6px;
	width: var(--sfgi-w, 0%);
	min-width: 2px;
	border-radius: 999px;
	background: var(--sfgi-team);
	transition: width 0.4s var(--sfgi-ease);
}

.sfgi-box-qfill.is-away {
	background: var(--sfgi-away, var(--sfgi-team));
}

.sfgi-box-qfill.is-home {
	background: var(--sfgi-home, var(--sfgi-team-2));
}

.sfgi-box-qval {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	font-family: var(--sfgi-f-num);
}

.sfgi-box-qval b {
	font-size: 14px;
	font-weight: 700;
	color: var(--sfgi-ink);
	min-width: 20px;
	text-align: right;
}

.sfgi-box-qrun {
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	color: var(--sfgi-muted);
	text-align: right;
	white-space: nowrap;
}

/* The facts strip: key over value, chips in a row. */
.sfgi-box-facts {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--sfgi-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.sfgi-box-facts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sfgi-box-fact-k {
	font-family: var(--sfgi-f-ui);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-box-fact-v {
	font-family: var(--sfgi-f-num);
	font-size: 14px;
	font-weight: 700;
	color: var(--sfgi-ink);
}

@media (max-width: 560px) {
	.sfgi-box-q {
		grid-template-columns: 22px minmax(0, 1fr) 52px;
	}

	.sfgi-box-qrun {
		display: none;
	}
}