/* ==========================================================================
   YARDLINE — PICK'EM component internals
   --------------------------------------------------------------------------
   Loads AFTER assets/gridiron.css (registered with it as a dependency), so
   everything here may lean on the `--sfgi-*` token contract declared in that
   file's `:root`. NOTHING here declares a colour literal: every surface,
   hairline, shadow, radius, easing and family is a token, so the visitor's
   light/dark toggle repaints this sheet for free. The only literals are the
   `rgba(255,255,255,a)` LIT-EDGE highlights, which mirror the depth ladder's
   own inset top edges (`--sfgi-d0` … `--sfgi-d4`) exactly as `.sfgi-btn`
   does in gridiron.css — those are light, not colour.

   BLOCK FAMILIES OWNED HERE
     gridiron/pickem              .sfgi-pickem
     gridiron/pickem-leaderboard  .sfgi-lb .sfgi-pickem-lb
     gridiron/pickem-card         .sfgi-mycard .sfgi-pickem-card

   MARKUP IS GROUND TRUTH. Every selector below was written against the DOM
   that includes/pickem.php actually emits (verified on the live page at
   /gridiron/pickem/) and against the state classes assets/pickem.js sets:

     .sfgi-pick        is-locked is-final is-live is-picked is-guest
                       is-correct | is-push | is-wrong      (PHP + JS)
                       is-saving  is-error                  (JS only)
     .sfgi-pick-opt    is-home | is-away, is-chosen, is-winner, is-loser,
                       is-tbd (a <span>, not a <button>)
     .sfgi-mycard-pick is-open is-locked is-missing is-correct is-push is-wrong
     .sfgi-lb rows     is-leader is-me is-outside, plus tr.sfgi-lb-gap
     .sfgi-pickem-countdown  is-over / is-done (fx.js, at zero)

   SPECIFICITY NOTE. gridiron.css normalises `[class^="sfgi-"] button` and
   `[class^="sfgi-"] img` at (0,1,1) — a bare `.sfgi-pick-opt` (0,1,0) would
   LOSE to `background: none` and a bare `.sfgi-lb-ava-img` would lose to
   `height: auto`. Those two component roots are therefore addressed through
   their parent (`.sfgi-pick-row .sfgi-pick-opt`, `.sfgi-lb-ava .sfgi-…-img`),
   which is the only reason those selectors are two levels deep.

   FX COOPERATION. assets/fx.js writes --rx/--ry/--mx/--my/--lift/--holo and
   toggles .is-in / .is-tilting / .is-foiled on the shared `.sfgi-tilt`,
   `.sfgi-reveal` and `.sfgi-holo` atoms. Those atoms belong to the shared
   sheet, so this file NEVER declares a `transform`, a `background-image` or a
   `::before`/`::after` on an element that carries one of them — that is
   `.sfgi-mycard` (tilt + holo + reveal), `.sfgi-mycard-head` (holo),
   `.sfgi-pickem` / `.sfgi-lb` / `.sfgi-pick` (reveal) and the shared
   `.sfgi-stat` tiles (tilt + reveal). Decoration on those goes on a child or
   on `background-color` + `box-shadow`, which compose instead of colliding.

   MOBILE FIRST. The base rules are correct at 390px; layout widens at
   600px / 769px / 1025px only. The leaderboard table scrolls inside the
   `.sfgi-scroll` the PHP already wraps it in — the page never moves sideways.
   ========================================================================== */

/* ==========================================================================
   1. PICK'EM ROOT — the weekly board panel
   Markup: <div class="sfgi-pickem [is-guest] sfgi-reveal" data-season …>
             .sfgi-pickem-head
             [.sfgi-pickem-login]        guests only
             .sfgi-pickem-list > .sfgi-pick …
   ========================================================================== */

.sfgi-pickem {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 14px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image:
		radial-gradient(128% 88% at 6% -20%, color-mix(in srgb, var(--sfgi-neon) 13%, transparent), transparent 62%),
		radial-gradient(118% 82% at 97% -14%, color-mix(in srgb, var(--sfgi-accent) 13%, transparent), transparent 60%),
		var(--sfgi-sheen);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	isolation: isolate;
	min-width: 0;
}

/* The mandatory empty state (SPEC 4.2) is a single `.sfgi-empty` paragraph —
   drop the board gutters so it does not read as an oversized blank panel. */
.sfgi-pickem.is-empty {
	gap: 0;
	padding: 12px;
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}

/* ---- 1a. head ---------------------------------------------------------- */

.sfgi-pickem-head {
	position: relative;
	display: grid;
	gap: 12px;
	padding-bottom: 14px;
	min-width: 0;
}

/* Holographic rule under the head. `.sfgi-pickem-head` carries no FX class,
   so a pseudo-element here can never collide with the shared foil/glare. */
.sfgi-pickem-head::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	border-radius: var(--sfgi-pill);
	background-image: var(--sfgi-g-holo);
	opacity: 0.5;
	pointer-events: none;
}

.sfgi-pickem-headline {
	display: grid;
	gap: 5px;
	min-width: 0;
}

/* Inherits the shared `.sfgi-eyebrow` atom; this adds the board's own glow. */
.sfgi-pickem-eyebrow {
	gap: 8px;
	color: var(--sfgi-accent-ink);
	text-shadow: 0 0 18px color-mix(in srgb, var(--sfgi-accent) 42%, transparent);
}

.sfgi-pickem-title {
	font-family: var(--sfgi-f-display);
	font-size: clamp(24px, 6.6vw, 34px);
	line-height: 1.02;
	letter-spacing: 0.012em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	overflow-wrap: break-word;
}

.sfgi-pickem-sub {
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	color: var(--sfgi-muted);
}

/* ---- 1b. the three scoring rules, as sunken pills ---------------------- */

.sfgi-pickem-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.sfgi-pickem-rule {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	background-color: color-mix(in srgb, var(--sfgi-base) 52%, transparent);
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
}
.sfgi-pickem-rule .sfgi-i { color: var(--sfgi-accent-ink); }
.sfgi-pickem-rule:nth-child(2) .sfgi-i { color: var(--sfgi-neon-ink); }
.sfgi-pickem-rule:nth-child(3) .sfgi-i { color: var(--sfgi-gold-ink); }
.sfgi-pickem-you-streak .sfgi-i { color: var(--sfgi-accent-ink); }

/* ---- 1e. "First kickoff …" ---------------------------------------------
   fx.js treats this one as a state-only clock: it never rewrites the prose,
   it only adds `.is-over` / `.is-done` when the countdown reaches zero. */

.sfgi-pickem-countdown {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	justify-self: start;
	max-width: 100%;
	padding: 7px 14px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-neon-ink);
	background-color: color-mix(in srgb, var(--sfgi-neon) 10%, transparent);
	box-shadow: var(--sfgi-ring-neon), var(--sfgi-d0);
}
.sfgi-pickem-countdown::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--sfgi-neon);
	box-shadow: 0 0 10px color-mix(in srgb, var(--sfgi-neon) 75%, transparent);
}
.sfgi-pickem-countdown.is-over,
.sfgi-pickem-countdown.is-done {
	color: var(--sfgi-accent-ink);
	background-color: color-mix(in srgb, var(--sfgi-accent) 13%, transparent);
	box-shadow: var(--sfgi-ring-hot), var(--sfgi-d0);
}
.sfgi-pickem-countdown.is-over::before,
.sfgi-pickem-countdown.is-done::before {
	background-color: var(--sfgi-accent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--sfgi-accent) 75%, transparent);
}

/* ==========================================================================
   2. THE LOG-IN PANEL
   Most visitors are logged out, so this has to read as a designed state and
   not as a broken board: real glass, a neon ring, a live call to action.
   Markup: .sfgi-pickem-login > svg.sfgi-i + p + a.sfgi-btn.sfgi-btn--accent
   ========================================================================== */

/* Laid out on the PANEL's own width, not the viewport's. This card is used
 * both full width and inside the narrow sticky sidebar column, so a viewport
 * media query gets it wrong exactly where it matters: at a tablet width the
 * `min-width: 600px` rule used to force icon | text | button onto one row
 * inside a ~300px column, and the copy collapsed to one word per line beside
 * a full-width button. A wrapping flex row with a real basis on the paragraph
 * drops the button to its own line whenever the text cannot keep 200px,
 * whatever the viewport is doing. */
.sfgi-pickem-login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 15px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-glass-2);
	background-image: var(--sfgi-sheen);
	-webkit-backdrop-filter: var(--sfgi-glass-blur);
	backdrop-filter: var(--sfgi-glass-blur);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-neon);
	min-width: 0;
}
.sfgi-pickem-login > .sfgi-i {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	align-self: start;
	color: var(--sfgi-neon-ink);
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sfgi-neon) 45%, transparent));
}
.sfgi-pickem-login p {
	flex: 1 1 200px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sfgi-muted);
	min-width: 0;
}
.sfgi-pickem-login .sfgi-btn {
	/* No auto margin: the paragraph is the flexible item, so on a row that
	 * fits it grows and carries the button to the right edge by itself. Once
	 * the button wraps to its own line it then sits at the start, which is
	 * the stacked layout this panel has always used when space is tight. */
	flex: 0 0 auto;
	padding: 10px 18px;
	font-size: 12px;
}

/* ==========================================================================
   3. THE SLATE
   ========================================================================== */

.sfgi-pickem-list {
	display: grid;
	gap: 10px;
	min-width: 0;
}

/* ==========================================================================
   4. ONE GAME'S PICK WIDGET
   Markup: <div class="sfgi-pick sfgi-reveal …" data-game …>
             [form.sfgi-pick-form]      only when the reader may pick
               .sfgi-pick-when
               .sfgi-pick-row
               .sfgi-pick-split[hidden]
               [.sfgi-pick-award]
               p.sfgi-pick-note[data-note]
   The form is a real submit target so the board works with JS off; it also
   sits between the widget and its children, so it has to carry the same grid.
   ========================================================================== */

.sfgi-pick {
	position: relative;
	display: grid;
	gap: 10px;
	padding: 12px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel-2);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
	isolation: isolate;
	min-width: 0;
	transition:
		box-shadow var(--sfgi-t) var(--sfgi-ease),
		background-color var(--sfgi-t) var(--sfgi-ease),
		filter var(--sfgi-t) var(--sfgi-ease);
}

/* ---- 4a. kickoff line -------------------------------------------------- */

.sfgi-pick-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sfgi-pick-facts {
	flex: 1 1 140px;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--sfgi-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sfgi-pick-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: auto;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--sfgi-accent-ink);
	transition: color var(--sfgi-t-fast) var(--sfgi-ease), text-shadow var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-pick-link::after {
	content: "\2192";
	font-family: var(--sfgi-f-num);
	transition: transform var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-pick-link:hover {
	color: var(--sfgi-ink);
	text-shadow: 0 0 16px color-mix(in srgb, var(--sfgi-accent) 55%, transparent);
}

/* ---- 4b. the two big buttons ------------------------------------------ */

.sfgi-pick-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 6px;
	min-width: 0;
}

/* `.sfgi-pick-vs` is the "at" pip between the two sides. */
.sfgi-pick-vs {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	background-color: color-mix(in srgb, var(--sfgi-base) 68%, transparent);
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
}

/* Two levels deep on purpose — see the SPECIFICITY NOTE in the file header.
   `--sfgi-opt` is this side's livery, inherited by every child of the button;
   the PHP sets `--sfgi-team` inline per side from stepfox_gi_team_vars(). */
.sfgi-pick-row .sfgi-pick-opt {
	--sfgi-opt: var(--sfgi-team, var(--sfgi-accent));
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 7px;
	min-width: 0;
	padding: 14px 8px 12px;
	border: 0;
	border-radius: var(--sfgi-r);
	text-align: center;
	cursor: pointer;
	color: var(--sfgi-ink);
	background-color: color-mix(in srgb, var(--sfgi-base) 55%, transparent);
	background-image:
		radial-gradient(122% 76% at 50% -16%, color-mix(in srgb, var(--sfgi-opt) 36%, transparent), transparent 66%),
		var(--sfgi-sheen);
	box-shadow: var(--sfgi-ring), var(--sfgi-d1);
	-webkit-appearance: none;
	appearance: none;
	transition:
		box-shadow var(--sfgi-t) var(--sfgi-ease),
		background-color var(--sfgi-t) var(--sfgi-ease),
		filter var(--sfgi-t) var(--sfgi-ease),
		opacity var(--sfgi-t) var(--sfgi-ease),
		transform var(--sfgi-t-fast) var(--sfgi-ease);
}

/* A disabled side is still a full-contrast card — the guest board must look
   deliberate, not greyed out. Only the affordance goes away. */
.sfgi-pick-row .sfgi-pick-opt[disabled] {
	cursor: default;
}

/* "To be decided" placeholder: a <span>, never a <button>. */
.sfgi-pick-row .sfgi-pick-opt.is-tbd {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	padding: 22px 10px;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	background-image: none;
	box-shadow: var(--sfgi-ring);
}

/* ---- 4c. inside a button ---------------------------------------------- */

.sfgi-pick-crestbox {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
/* Team-coloured bloom behind the crest — the layer that sells the 3D read. */
.sfgi-pick-crestbox::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sfgi-opt) 46%, transparent), transparent 70%);
	filter: blur(9px);
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}

.sfgi-pick-crestbox .sfgi-pick-crest {
	position: relative;
	z-index: 1;
	width: 52px;
	height: 52px;
	padding: 4px;
	box-shadow: var(--sfgi-ring), var(--sfgi-d1);
}
.sfgi-pick-crestbox .sfgi-pick-crest.sfgi-crest--mono {
	font-size: 18px;
	letter-spacing: 0.02em;
}

.sfgi-pick-id {
	display: grid;
	justify-items: center;
	gap: 2px;
	width: 100%;
	min-width: 0;
}

.sfgi-pick-abbr {
	font-family: var(--sfgi-f-display);
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}

.sfgi-pick-name {
	font-family: var(--sfgi-f-ui);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	overflow-wrap: anywhere;
}

.sfgi-pick-meta {
	font-style: normal;
	font-family: var(--sfgi-f-num);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--sfgi-muted) 88%, transparent);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Underdog bonus on offer (pre-kickoff only). */
.sfgi-pick-bonus {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-gold-ink);
	background-color: color-mix(in srgb, var(--sfgi-gold) 13%, transparent);
	box-shadow: var(--sfgi-ring-gold);
}
.sfgi-pick-row .sfgi-pick-opt.is-winner .sfgi-pick-score { color: var(--sfgi-ink); }

/* This side's share of the public vote. pickem.js writes the text and clears
   `hidden` the moment anybody has voted. */
.sfgi-pick-pct {
	font-family: var(--sfgi-f-num);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sfgi-muted);
	font-variant-numeric: tabular-nums;
}
.sfgi-pick-row .sfgi-pick-opt.is-chosen .sfgi-pick-pct { color: var(--sfgi-neon-ink); }

/* The tick badge. Out of flow so it cannot reflow the card when it appears. */
.sfgi-pick-check {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--sfgi-on-bright);
	background-color: var(--sfgi-neon);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--sfgi-neon) 20%, transparent),
		0 6px 16px color-mix(in srgb, var(--sfgi-neon) 40%, transparent);
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
	transition: opacity var(--sfgi-t-fast) var(--sfgi-ease), transform var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-pick-check .sfgi-i { stroke-width: 2.6; }
.sfgi-pick-row .sfgi-pick-opt.is-chosen .sfgi-pick-check {
	opacity: 1;
	transform: scale(1);
}
.sfgi-pick-row .sfgi-pick-opt.is-chosen.is-winner .sfgi-pick-check {
	background-color: var(--sfgi-turf);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--sfgi-turf) 20%, transparent),
		0 6px 16px color-mix(in srgb, var(--sfgi-turf) 40%, transparent);
}

/* ---- 4d. button states ------------------------------------------------- */

/* Chosen — the neon ring the brief asks for, over a team-tinted slab. */
.sfgi-pick-row .sfgi-pick-opt.is-chosen {
	background-color: color-mix(in srgb, var(--sfgi-opt) 22%, var(--sfgi-base));
	box-shadow:
		var(--sfgi-ring-neon),
		0 0 0 2px color-mix(in srgb, var(--sfgi-neon) 62%, transparent),
		0 18px 44px color-mix(in srgb, var(--sfgi-neon) 24%, transparent),
		var(--sfgi-d2);
}

/* Winner of a played game — turf. */
.sfgi-pick-row .sfgi-pick-opt.is-winner {
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 58%, transparent),
		0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 34%, transparent),
		var(--sfgi-d2);
}
.sfgi-pick-row .sfgi-pick-opt.is-chosen.is-winner {
	background-color: color-mix(in srgb, var(--sfgi-turf) 18%, var(--sfgi-base));
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 66%, transparent),
		0 0 0 2px color-mix(in srgb, var(--sfgi-turf) 55%, transparent),
		0 18px 44px color-mix(in srgb, var(--sfgi-turf) 26%, transparent),
		var(--sfgi-d2);
}

/* Beaten side — recedes rather than shouts. */
.sfgi-pick-row .sfgi-pick-opt.is-loser {
	filter: saturate(0.45);
	opacity: 0.6;
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
}
/* …unless it is the reader's own losing call, which stays legible. */
.sfgi-pick-row .sfgi-pick-opt.is-chosen.is-loser {
	filter: saturate(0.6);
	opacity: 0.82;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--sfgi-muted) 55%, transparent),
		var(--sfgi-d1);
}

@media (hover: hover) and (pointer: fine) {
	.sfgi-pick-row .sfgi-pick-opt:not([disabled]):not(.is-tbd):hover {
		background-color: color-mix(in srgb, var(--sfgi-opt) 17%, var(--sfgi-base));
		box-shadow: var(--sfgi-ring-hot), var(--sfgi-d2);
	}
	/* Motion only when fx.js has confirmed the page is allowed to move. */
	body.sfgi-fx .sfgi-pick-row .sfgi-pick-opt:not([disabled]):not(.is-tbd):hover {
		transform: translateY(-2px);
	}
	body.sfgi-fx .sfgi-pick-row .sfgi-pick-opt:not([disabled]):not(.is-tbd):active {
		transform: translateY(0) scale(0.985);
	}
}

/* ---- 4e. the public tally bar ------------------------------------------
   Away fill is rendered first, so it sits on the left under the away button;
   home is on the right under the home button. pickem.js only rewrites the
   two inline widths, so the colour split has to come from [data-side]. */

.sfgi-pick-split {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.sfgi-pick-bar {
	display: flex;
	width: 100%;
	height: 7px;
	border-radius: var(--sfgi-pill);
	background-color: color-mix(in srgb, var(--sfgi-base) 66%, transparent);
	box-shadow: var(--sfgi-ring);
	overflow: hidden;
}

.sfgi-pick-fill {
	display: block;
	flex: 0 0 auto;
	height: 100%;
	min-width: 0;
	transition: width var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-pick-fill[data-side="away"] {
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--sfgi-accent) 55%, transparent) 0%, var(--sfgi-accent) 100%);
	box-shadow: 0 0 14px color-mix(in srgb, var(--sfgi-accent) 45%, transparent);
}
.sfgi-pick-fill[data-side="home"] {
	background-image: linear-gradient(90deg, var(--sfgi-neon) 0%, color-mix(in srgb, var(--sfgi-neon) 55%, transparent) 100%);
	box-shadow: 0 0 14px color-mix(in srgb, var(--sfgi-neon) 45%, transparent);
}

.sfgi-pick-total {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
/* The PHP prints an empty span before anybody has voted. */
.sfgi-pick-total:empty { display: none; }

.sfgi-pick-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sfgi-muted);
}
/* Every widget ships one, usually blank — never leave a gap for it. */
.sfgi-pick-note:empty { display: none; }

/* ---- 4g. widget states -------------------------------------------------
   Set by includes/pickem.php on render and by assets/pickem.js on every
   click. If these do nothing, pressing a pick looks like a no-op. */

.sfgi-pick.is-picked {
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-neon);
}

.sfgi-pick.is-live {
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-hot);
}

.sfgi-pick.is-final {
	background-color: color-mix(in srgb, var(--sfgi-panel-2) 72%, transparent);
}

/* A locked game keeps its colour but loses every affordance. */
.sfgi-pick.is-locked .sfgi-pick-opt { cursor: default; }
.sfgi-pick.is-locked:not(.is-guest) .sfgi-pick-opt:not(.is-chosen):not(.is-winner) {
	filter: saturate(0.68);
}

/* A guest board is complete and full-contrast; the login panel carries the
   explanation, so nothing here is allowed to look disabled. */
.sfgi-pick.is-guest .sfgi-pick-opt { cursor: default; }

/* Called it — turf. */
.sfgi-pick.is-correct {
	background-image: var(--sfgi-g-turf), var(--sfgi-sheen);
	box-shadow:
		var(--sfgi-d2),
		inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 55%, transparent);
}
.sfgi-pick.is-correct .sfgi-pick-note { color: var(--sfgi-turf-ink); }

/* Missed it — recedes. Deliberately `filter` and NOT `opacity`: this element
   also carries `.sfgi-reveal`, whose start/end state is opacity, and the two
   would overwrite each other depending on which sheet loaded last. */
.sfgi-pick.is-wrong {
	filter: saturate(0.5) brightness(0.9);
	background-color: color-mix(in srgb, var(--sfgi-panel-2) 64%, transparent);
	box-shadow: var(--sfgi-d0), var(--sfgi-ring);
}
.sfgi-pick.is-wrong .sfgi-pick-note { color: var(--sfgi-muted); }

/* Tied game — the pick pushes and the streak survives. */
.sfgi-pick.is-push {
	box-shadow: var(--sfgi-d1), var(--sfgi-ring-gold);
}
.sfgi-pick.is-push .sfgi-pick-note { color: var(--sfgi-gold-ink); }

/* A write is in flight (JS only). */
.sfgi-pick.is-saving {
	cursor: progress;
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-neon);
}
.sfgi-pick.is-saving .sfgi-pick-note { color: var(--sfgi-neon-ink); }

/* The last write was refused; pickem.js clears this after six seconds. */
.sfgi-pick.is-error {
	box-shadow: var(--sfgi-d2), var(--sfgi-ring-hot);
}
.sfgi-pick.is-error .sfgi-pick-note { color: var(--sfgi-accent-ink); }

@keyframes sfgi-pk-breathe {
	0%, 100% { box-shadow: var(--sfgi-d1), var(--sfgi-ring-neon); }
	50%      { box-shadow: var(--sfgi-d2), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-neon) 80%, transparent); }
}
@keyframes sfgi-pk-live {
	0%, 100% { box-shadow: var(--sfgi-d1), var(--sfgi-ring-hot); }
	50%      { box-shadow: var(--sfgi-d2), inset 0 0 0 1px color-mix(in srgb, var(--sfgi-accent) 85%, transparent); }
}
body.sfgi-fx .sfgi-pick.is-saving { animation: sfgi-pk-breathe 1.1s var(--sfgi-ease) infinite; }
body.sfgi-fx .sfgi-pick.is-live   { animation: sfgi-pk-live 2.4s var(--sfgi-ease) infinite; }

/* ==========================================================================
   5. LEADERBOARD
   Markup: <div class="sfgi-lb sfgi-pickem-lb [is-empty] sfgi-reveal">
             .sfgi-scroll > table.sfgi-tbl.sfgi-lb-tbl
             p.sfgi-lb-foot
   `.sfgi-tbl` and the `.sfgi-c-*` column atoms are shared across blocks, so
   every rule that touches them here is scoped inside `.sfgi-lb-tbl` and can
   never leak into another family's table.
   ========================================================================== */

.sfgi-lb {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 14px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	min-width: 0;
}

/* The pick'em flavour of the board: a gold wash from the trophy corner. */
.sfgi-pickem-lb {
	background-image:
		radial-gradient(120% 84% at 94% -18%, color-mix(in srgb, var(--sfgi-gold) 14%, transparent), transparent 62%),
		var(--sfgi-sheen);
}

.sfgi-lb.is-empty {
	gap: 0;
	padding: 12px;
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}
.sfgi-lb-tbl .sfgi-c-streak .sfgi-i { margin-inline-end: 4px; }
.sfgi-lb-tbl td.sfgi-c-rank .sfgi-i { margin-inline-end: 5px; vertical-align: middle; }
/* Two levels deep: gridiron.css normalises `[…sfgi-] img { height: auto }

/* ==========================================================================
   6. THE PERSONAL CARD
   Markup: <div class="sfgi-mycard sfgi-pickem-card […] sfgi-tilt sfgi-holo">
             .sfgi-mycard-head.sfgi-holo   (avatar + identity)
             .sfgi-mycard-stats.sfgi-statline > .sfgi-stat ×6
             [p.sfgi-mycard-note]
             .sfgi-mycard-week > p.sfgi-eyebrow + ul.sfgi-mycard-picks
   NOTE: this root and its head both carry `.sfgi-holo`, and the root also
   carries `.sfgi-tilt` — so no `transform`, no `background-image` and no
   pseudo-element is declared on either, or it would overwrite the shared
   foil/tilt layer instead of composing with it.
   ========================================================================== */

.sfgi-mycard {
	position: relative;
	display: grid;
	gap: 13px;
	padding: 14px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	overflow: hidden;
	isolation: isolate;
	min-width: 0;
}

/* The holographic edge that marks it as the collectible card of the set. */
.sfgi-pickem-card {
	min-width: 0;
	box-shadow:
		var(--sfgi-d3),
		inset 0 0 0 1px color-mix(in srgb, var(--sfgi-violet) 38%, transparent);
}

.sfgi-mycard.is-guest { gap: 0; }

/* Section 6 documented this markup from the start but only ever styled the
 * root, so everything inside it was inline: the eyebrow, the display name and
 * the rank ran together on one line ("stephogUnranked — make your first
 * pick"), the avatar sat on the text baseline as a square, and every row of
 * the week list collapsed into a sentence ("SEAWed 9 Sep, 8:20 pm").
 *
 * NOTHING here declares transform, background-image or a pseudo-element on
 * .sfgi-mycard or .sfgi-mycard-head — see the NOTE above; both carry .sfgi-holo
 * and the root also carries .sfgi-tilt. Background COLOUR composes fine. */

.sfgi-mycard-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring);
	min-width: 0;
}
.sfgi-mycard-ava {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--sfgi-ring-gold);
}
/* get_avatar() prints width/height attributes, so the box needs stating. */
.sfgi-mycard-ava-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sfgi-mycard-id {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.sfgi-mycard-name {
	font-family: var(--sfgi-f-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.08;
	color: var(--sfgi-ink);
	overflow-wrap: anywhere;
}
/* <i>, so the italic has to be turned off explicitly. */
.sfgi-mycard-rank {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

/* Six tiles: three and three reads even, where the shared 4-column statline
 * leaves a ragged 4 + 2 inside a card this narrow. */
.sfgi-mycard-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sfgi-mycard-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sfgi-muted);
}

.sfgi-mycard-week {
	display: grid;
	gap: 8px;
	min-width: 0;
}
.sfgi-mycard-picks {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
/* matchup | pick | outcome-or-kickoff, wrapping only when it truly cannot fit. */
.sfgi-mycard-pick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 8px 10px;
	border-radius: var(--sfgi-r-sm);
	background-color: color-mix(in srgb, var(--sfgi-panel-2) 62%, transparent);
	box-shadow: var(--sfgi-ring);
	min-width: 0;
}
.sfgi-mycard-game {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	text-decoration: none;
}
.sfgi-mycard-choice {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-mycard-choice i {
	font-style: normal;
	color: var(--sfgi-muted);
}
.sfgi-mycard-result {
	flex: 0 0 auto;
	font-family: var(--sfgi-f-num);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sfgi-muted);
}

/* The six row states the PHP emits. */
.sfgi-mycard-pick.is-correct .sfgi-mycard-result { color: var(--sfgi-turf-ink); }
.sfgi-mycard-pick.is-wrong .sfgi-mycard-result { color: var(--sfgi-accent-ink); }
.sfgi-mycard-pick.is-missing .sfgi-mycard-choice { color: var(--sfgi-muted); }
.sfgi-mycard-pick.is-locked { opacity: 0.82; }

/* ==========================================================================
   7. FOCUS
   gridiron.css already rings every `sfgi-` button, link and input; these
   rules only correct the radius and offset so the ring hugs the real shape
   of a pick button, a pill and a card row instead of the generic 8px.
   ========================================================================== */

.sfgi-pick-row .sfgi-pick-opt:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 3px;
	border-radius: var(--sfgi-r);
}
.sfgi-pick-link:focus-visible,
.sfgi-mycard-game:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 3px;
	border-radius: var(--sfgi-r-sm);
}
.sfgi-pickem-login .sfgi-btn:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 3px;
	border-radius: var(--sfgi-pill);
}
.sfgi-lb .sfgi-scroll:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 2px;
	border-radius: var(--sfgi-r-sm);
}

/* ==========================================================================
   8. RESPONSIVE — 600 / 769 / 1025, matching the stepfox-looks device keys.
   Nothing above this point assumes more than 390px of width.
   ========================================================================== */

@media (min-width: 600px) {
	.sfgi-pickem,
	.sfgi-lb,
	.sfgi-mycard { padding: var(--sfgi-pad); }

	.sfgi-pickem { gap: var(--sfgi-gap); }
	.sfgi-pickem-list { gap: 12px; }
	.sfgi-pick { padding: 14px; gap: 11px; }
	.sfgi-pick-row { gap: 10px; }
	.sfgi-pick-row .sfgi-pick-opt { padding: 16px 12px 14px; gap: 8px; }
	.sfgi-pick-crestbox .sfgi-pick-crest { width: 60px; height: 60px; }
	.sfgi-pick-crestbox .sfgi-pick-crest.sfgi-crest--mono { font-size: 21px; }
	.sfgi-pick-abbr { font-size: 23px; }
	.sfgi-pick-vs { width: 30px; height: 30px; font-size: 11px; }

	.sfgi-mycard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.sfgi-pickem-login { padding: 16px 18px; }
	.sfgi-pickem-login > .sfgi-i { align-self: center; }
}

@media (min-width: 769px) {
	.sfgi-pickem-head { gap: 13px; padding-bottom: 15px; }
	.sfgi-pick-row .sfgi-pick-opt { padding: 18px 14px 15px; }
}

@media (min-width: 1025px) {
	/* Headline and the scoring rules share a row; everything the signed-in
	   reader gets spans the full width beneath them. */
	.sfgi-pickem-head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: 20px;
	}
	.sfgi-pickem-headline { grid-column: 1; grid-row: 1; }
	.sfgi-pickem-rules {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
		max-width: 340px;
	}
	.sfgi-pickem-countdown { grid-column: 1 / -1; }

	.sfgi-pick-crestbox .sfgi-pick-crest { width: 64px; height: 64px; }
	.sfgi-pick-crestbox .sfgi-pick-crest.sfgi-crest--mono { font-size: 23px; }
	.sfgi-pick-abbr { font-size: 25px; }
	.sfgi-pick-name { font-size: 13px; }
	.sfgi-pick-vs { width: 34px; height: 34px; }
	.sfgi-pick-row { gap: 12px; }
}

/* ==========================================================================
   9. REDUCED MOTION — everything that moves, stops. Colour states stay.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sfgi-pick,
	.sfgi-pick-form,
	.sfgi-pick-link,
	.sfgi-pick-link::after,
	.sfgi-pick-fill,
	.sfgi-pick-check,
	.sfgi-pickem-progress-fill,
	.sfgi-pickem-countdown,
	.sfgi-mycard-game,
	.sfgi-pick-row .sfgi-pick-opt {
		transition: none !important;
		animation: none !important;
	}

	body.sfgi-fx .sfgi-pick.is-saving,
	body.sfgi-fx .sfgi-pick.is-live {
		animation: none !important;
	}

	body.sfgi-fx .sfgi-pick-row .sfgi-pick-opt:not([disabled]):not(.is-tbd):hover,
	body.sfgi-fx .sfgi-pick-row .sfgi-pick-opt:not([disabled]):not(.is-tbd):active {
		transform: none !important;
	}

	/* The tick still appears — it just does not spring in. */
	.sfgi-pick-check,
	.sfgi-pick-row .sfgi-pick-opt.is-chosen .sfgi-pick-check {
		transform: none !important;
	}
}

/* ==========================================================================
   11. LEADERBOARD IDENTITY — the avatar and name cell
   Markup: td.sfgi-c-player > .sfgi-lb-player
             .sfgi-lb-ava > [img.sfgi-lb-ava-img | span.sfgi-lb-ava-init]
             .sfgi-lb-name > b [+ i "you"]

   These three atoms were emitted by stepfox_gi_pk_board_row() from the start
   but never had rules, so the identity cell fell back to raw inline layout:
   the avatar sat on the text baseline as an unsized box and the name dropped
   underneath it, which read as an unstyled table.

   Per this sheet's own note, `.sfgi-lb-ava-img` is addressed THROUGH its
   parent — a bare class selector loses to the `height: auto` that core's
   image rules set on an avatar.
   ========================================================================== */

.sfgi-lb-player {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sfgi-lb-ava {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--sfgi-panel-2, #131a29);
	box-shadow: var(--sfgi-ring);
}

.sfgi-lb-ava .sfgi-lb-ava-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

/* The monogram the PHP falls back to when an account has no avatar. */
.sfgi-lb-ava-init {
	font-family: var(--sfgi-f-display);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	opacity: 0.92;
}

/* The leader wears the trophy colour the panel is already washed with. */
.sfgi-lb-tbl tr.is-leader .sfgi-lb-ava {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 58%, transparent);
}
.sfgi-lb-tbl tr.is-leader .sfgi-lb-ava-init {
	color: var(--sfgi-gold);
	opacity: 1;
}

/* The signed-in player's own row. */
.sfgi-lb-tbl tr.is-me .sfgi-lb-ava {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sfgi-accent) 60%, transparent);
}

.sfgi-lb-name {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.sfgi-lb-name b {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sfgi-lb-name i {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-accent);
}

@media (min-width: 769px) {
	.sfgi-lb-ava { width: 44px; height: 44px; }
	.sfgi-lb-ava-init { font-size: 18px; }
	.sfgi-lb-player { gap: 12px; }
}

/* ==========================================================================
   12. LEADERBOARD TABLE — columns, alignment, rhythm

   `.sfgi-tbl` is described in §5 as shared, but no sheet ever defined it, so
   this table ran on browser defaults: `th` inherited the UA's `center` while
   `td` stayed at `start`, which put every heading 50-odd pixels off the figures
   underneath it, and `table-layout: auto` handed 495px of a 1148px table to the
   Player column while the stats bunched up on the right.

   The rules below are the standings table's conventions (assets/css/standings.css
   §"…table th/td") applied here, and scoped inside `.sfgi-lb-tbl` so they cannot
   leak into another family's table.
   ========================================================================== */

.sfgi-lb-tbl {
	width: 100%;
	border-collapse: collapse;
}

/* The section already carries a LEADERBOARD heading, so the caption is the
   table's own quiet label rather than a second title floating up the middle. */
.sfgi-lb-tbl caption {
	caption-side: top;
	padding: 0 8px 10px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: start;
	color: var(--sfgi-muted);
}

.sfgi-lb-tbl th {
	padding: 0 8px 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: right;
	white-space: nowrap;
	color: var(--sfgi-muted);
}

.sfgi-lb-tbl td {
	padding: 9px 8px;
	vertical-align: middle;
}

/* Identity columns read from the left; both halves of the column agree. */
.sfgi-lb-tbl th.sfgi-c-rank,
.sfgi-lb-tbl td.sfgi-c-rank {
	width: 1%;
	white-space: nowrap;
	text-align: start;
}

/* The one elastic column: it absorbs the slack so the stats stay tight. */
.sfgi-lb-tbl th.sfgi-c-player,
.sfgi-lb-tbl td.sfgi-c-player {
	width: 100%;
	text-align: start;
}

/* Figures right-align under their heading, in the numeric face, so the digits
   line up column-wise the way a stats table is read. */
.sfgi-lb-tbl th.sfgi-c-num,
.sfgi-lb-tbl td.sfgi-c-num {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.sfgi-lb-tbl td.sfgi-c-num {
	font-family: var(--sfgi-f-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sfgi-lb-tbl td.sfgi-c-pts b {
	font-weight: 700;
	color: var(--sfgi-ink);
}

/* "/58" is the denominator, not a second number. */
.sfgi-lb-of {
	color: var(--sfgi-muted);
	font-weight: 500;
}

/* Hairline between rows, never above the first one. */
.sfgi-lb-tbl tbody tr + tr > td {
	border-top: 1px solid var(--sfgi-line);
}

/* The leader keeps the trophy colour the panel is washed with. */
.sfgi-lb-tbl tbody tr.is-leader > td {
	background-color: color-mix(in srgb, var(--sfgi-gold) 7%, transparent);
}

.sfgi-lb-tbl tbody tr.is-me > td {
	background-color: color-mix(in srgb, var(--sfgi-accent) 8%, transparent);
}

/* The name sits left and the figures right, so a wide panel leaves a gap in the
   middle of every row. Give the stat columns real breathing room so they read as
   one block rather than four stragglers, and light the row under the pointer so
   the eye can cross that gap without losing its line. */
.sfgi-lb-tbl th.sfgi-c-num,
.sfgi-lb-tbl td.sfgi-c-num {
	padding-inline: 14px;
}

.sfgi-lb-tbl tbody tr:hover > td {
	background-color: color-mix(in srgb, var(--sfgi-ink) 5%, transparent);
}

.sfgi-lb-tbl tbody tr.is-leader:hover > td {
	background-color: color-mix(in srgb, var(--sfgi-gold) 11%, transparent);
}