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

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

.sfih-boxscore {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sfih-boxscore.is-empty {
	padding: var(--sfih-pad);
	border-radius: var(--sfih-r);
	background-color: var(--sfih-panel);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d1), var(--sfih-ring);
}

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

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

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

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

.sfih-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(--sfih-r-sm);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--sfih-panel-2) 92%, transparent) 0%, color-mix(in srgb, var(--sfih-base) 78%, transparent) 100%);
	box-shadow: var(--sfih-ring), var(--sfih-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. */
.sfih-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);
}
.sfih-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));
}

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

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

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

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

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

/* ---- the rink plane ------------------------------------------------------
   .sfih-field ships with no children. The element and its pseudo-elements
   draw a clean sheet of ice: centre line, blue lines, circles and boards. */
.sfih-field {
	position: absolute;
	inset: 5%;
	overflow: hidden;
	border: 7px solid rgba(255, 255, 255, 0.92);
	border-radius: 46% / 18%;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 55px, rgba(215, 25, 63, 0.7) 56px 59px, transparent 60px),
		linear-gradient(90deg, transparent 0 32.6%, rgba(8, 126, 164, 0.72) 32.7% 33.1%, transparent 33.2% 66.7%, rgba(8, 126, 164, 0.72) 66.8% 67.2%, transparent 67.3%),
		linear-gradient(90deg, transparent 0 49.75%, rgba(215, 25, 63, 0.72) 49.8% 50.2%, transparent 50.25%),
		linear-gradient(180deg, rgba(248, 253, 255, 0.94), rgba(201, 239, 248, 0.84));
	box-shadow: 0 0 0 1px rgba(8, 126, 164, 0.28), 0 24px 70px rgba(0, 40, 85, 0.25), inset 0 0 48px rgba(0, 168, 207, 0.18);
	transform: perspective(900px) rotateX(13deg);
	transform-origin: 50% 100%;
}
.sfih-field::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 28%, rgba(215, 25, 63, 0.75) 0 4px, transparent 5px 36px, rgba(215, 25, 63, 0.42) 37px 39px, transparent 40px),
		radial-gradient(circle at 80% 28%, rgba(215, 25, 63, 0.75) 0 4px, transparent 5px 36px, rgba(215, 25, 63, 0.42) 37px 39px, transparent 40px),
		radial-gradient(circle at 20% 72%, rgba(215, 25, 63, 0.75) 0 4px, transparent 5px 36px, rgba(215, 25, 63, 0.42) 37px 39px, transparent 40px),
		radial-gradient(circle at 80% 72%, rgba(215, 25, 63, 0.75) 0 4px, transparent 5px 36px, rgba(215, 25, 63, 0.42) 37px 39px, transparent 40px);
	opacity: 0.72;
}
.sfih-field::after {
	content: "";
	position: absolute;
	inset: 9% 3%;
	border: 2px solid rgba(215, 25, 63, 0.44);
	border-left-width: 0;
	border-right-width: 0;
	border-radius: 44% / 16%;
	background:
		radial-gradient(120% 70% at 50% 50%, rgba(255, 255, 255, 0.3), transparent 62%);
}
.sfih-fh-meta .sfih-i { flex: 0 0 auto; opacity: 0.8; }
/* Keep the crest artwork flat inside the matchup panel. The circular wrapper
   supplies the hairline, so a second drop shadow would recreate a 3D puck. */
.sfih-fh-crest .sfih-crest {
	box-shadow: none;
}
.sfih-fh-chip .sfih-chip {
	color: var(--sfih-ink);
	background: color-mix(in srgb, var(--sfih-base) 62%, transparent);
	box-shadow: var(--sfih-ring);
}
.sfih-fh-countdown > .sfih-countdown {
	width: 100%;
	max-width: 480px;
}

/* ==========================================================================
   8. THEME TOGGLE
   DOM: .sfih-scheme > button.sfih-scheme-toggle[aria-pressed]
          > span.sfih-scheme-toggle-icons
              > svg.sfih-i.sfih-scheme-sun + svg.sfih-i.sfih-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).
   ========================================================================== */

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

.sfih-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(--sfih-muted);
	background-color: color-mix(in srgb, var(--sfih-panel-2) 78%, transparent);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d1), var(--sfih-ring);
	transition: color var(--sfih-t) var(--sfih-ease), box-shadow var(--sfih-t) var(--sfih-ease), background-color var(--sfih-t) var(--sfih-ease);
}
.sfih-scheme-toggle:hover {
	color: var(--sfih-ink);
	box-shadow: var(--sfih-d2), var(--sfih-ring-hot);
}

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

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

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

	.sfih-cd-cell { padding: 14px 6px 12px; }
	.sfih-cd--md .sfih-cd-num { font-size: 30px; }
	.sfih-cd--lg .sfih-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) {
	.sfih-cd-tiles { gap: 6px; }
	.sfih-cd-num { font-size: 24px; }
}

/* ==========================================================================
   11. MOTION
   Everything here is scoped under body.sfih-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.sfih-fx .sfih-field::before {
		animation: sfih-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.sfih-fx-reveal .sfih-gamecard.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-gamehero.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-fieldhero.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-boxscore.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-compare.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-countdown-block.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-gamecards.sfih-reveal:not(.is-in),
	body.sfih-fx-reveal .sfih-sb-cell.sfih-reveal:not(.is-in) {
		opacity: 0;
		translate: 0 16px;
		scale: 0.99;
	}
	body.sfih-fx-reveal .sfih-gamecard.sfih-reveal,
	body.sfih-fx-reveal .sfih-gamehero.sfih-reveal,
	body.sfih-fx-reveal .sfih-fieldhero.sfih-reveal,
	body.sfih-fx-reveal .sfih-boxscore.sfih-reveal,
	body.sfih-fx-reveal .sfih-compare.sfih-reveal,
	body.sfih-fx-reveal .sfih-countdown-block.sfih-reveal,
	body.sfih-fx-reveal .sfih-gamecards.sfih-reveal,
	body.sfih-fx-reveal .sfih-sb-cell.sfih-reveal {
		transition:
			opacity .52s var(--sfih-ease) var(--fxd, 0ms),
			translate .52s var(--sfih-ease) var(--fxd, 0ms),
			scale .52s var(--sfih-ease) var(--fxd, 0ms);
	}

	/* ---- pointer tilt (game detail hero only) ---- */
	@media (pointer: fine) {
		body.sfih-fx .sfih-gamehero.sfih-tilt {
			transform:
				perspective(var(--sfih-persp))
				rotateX(var(--rx, 0deg))
				rotateY(var(--ry, 0deg))
				translateY(var(--lift, 0px));
			transition: transform var(--sfih-t) var(--sfih-ease), box-shadow var(--sfih-t) var(--sfih-ease);
		}
		body.sfih-fx .sfih-gamehero.sfih-tilt.is-tilting { box-shadow: var(--sfih-d3-hi); }

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

@keyframes sfih-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) {
	.sfih-field::before,
	.sfih-holo-stage::after { animation: none !important; }

	.sfih-gamehero.sfih-tilt,
	.sfih-gh-crest.sfih-layer {
		transform: none !important;
	}

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

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

/* =========================================================== field hero
   ice-hockey/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 (.sfih-field, .sfih-cd-*, .sfih-btn, .sfih-eyebrow,
   .sfih-chip) already has rules — nothing here restyles it. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sfih-fh-matchup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--sfih-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(--sfih-d0), var(--sfih-ring);
	border-radius: var(--sfih-r-lg);
	padding: 28px 26px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sfih-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 (.sfih-gc-row,
   .sfih-gc-head, .sfih-gc-link, .sfih-gh-team, .sfih-gh-num, .sfih-cmp-team,
   .sfih-cmp-fill, .sfih-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 */

.sfih-day {
	display: block;
}

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

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

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

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

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

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

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

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

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

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

.sfih-gamecard {
	transform: none;
	box-shadow: var(--sfih-d1), var(--sfih-ring);
	transition: box-shadow var(--sfih-t) var(--sfih-ease), background-color var(--sfih-t) var(--sfih-ease);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The matchup: two teams flanking the huge score / VS. */
.sfih-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. */
.sfih-gh-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	text-decoration: none;
	color: var(--sfih-ink);
}

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

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

.sfih-gh-name i {
	font-style: normal;
	font-family: var(--sfih-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sfih-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(--sfih-line);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1024px) {

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

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

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

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

@media (max-width: 768px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ================================================== block-demo parity pass
   Measured against the /ice-hockey/ 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. */
.sfih-tick {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 3px;
}

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

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

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

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

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

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

.sfih-tick .sfih-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. */
.sfih-fh-copy {
	max-width: 640px;
}

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

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

.sfih-fh-seed {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: var(--sfih-pill);
	background: color-mix(in srgb, var(--sfih-gold) 14%, transparent);
	box-shadow: var(--sfih-ring-gold);
	color: var(--sfih-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. */
.sfih-fh-countdown,
.sfih-fh-countdown .sfih-countdown {
	width: 100%;
	max-width: none;
}