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