/* ==========================================================================
   GRIDIRON — 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
   ========================================================================== */

.sfgi-pickem-login {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	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 {
	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 {
	font-size: 13px;
	line-height: 1.55;
	color: var(--sfgi-muted);
	min-width: 0;
}
.sfgi-pickem-login .sfgi-btn {
	grid-column: 1 / -1;
	justify-self: start;
	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; }

/* ==========================================================================
   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-pickem-login {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 16px 18px;
	}
	.sfgi-pickem-login > .sfgi-i { align-self: center; }
	.sfgi-pickem-login .sfgi-btn { grid-column: auto; justify-self: end; }
}

@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;
	}
}