/* ---- the monogram fallback ----------------------------------------------
   Almost every player on the live site has no headshot attachment, so
   stepfox_gi_pl_face() returns a .sfgi-face--mono span. gridiron.css sizes the
   CREST monograms but never the FACE ones, which left a 16px numeral adrift in
   a 168px circle. When a real photo does arrive it is an <img>, and the base
   guard's `[class^="sfgi-"] img { height: auto }` outranks .sfgi-phero__photo's
   own height — hence the element-qualified override, which must FILL the
   circle rather than letterbox inside it. */
.sfgi-phero__photo.sfgi-face--mono {
	font-family: var(--sfgi-f-display);
	font-size: 62px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--sfgi-ink) 72%, transparent);
	background:
		radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 40%, transparent), transparent 70%),
		var(--sfgi-panel-2);
}

/* ==========================================================================
   6. PLAYER GRID — .sfgi-grid--players
   Live DOM:
     <div class="sfgi-grid sfgi-grid--players" data-cols="4" data-noun="players">
       <div class="sfgi-filters"> … </div>
       <div class="sfgi-cards sfgi-cards--players" data-grid data-visible-max="0">
         <a class="sfgi-card sfgi-pcard sfgi-tilt sfgi-reveal sfgi-holo" …>
   829 players ship on /players/, so the card wrapper stays on
   content-visibility. gridiron.css already turns that on for
   `.sfgi-grid [data-grid] > .sfgi-card` with a 260px placeholder; a player
   card is taller than that, and an under-guess makes the scrollbar jump.
   ========================================================================== */

.sfgi-grid--players {
	--sfgi-pcols: 2;
	scroll-margin-top: 24px;
}
.sfgi-grid--players [data-grid] {
	grid-template-columns: repeat(var(--sfgi-pcols), minmax(0, 1fr));
	gap: var(--sfgi-gap-sm);
	min-width: 0;
}
.sfgi-grid--players [data-grid] > .sfgi-card {
	contain-intrinsic-size: auto 322px;
}
/* A grid pinned to one column by the block author stays pinned at every
   width; the rest step up with the viewport, capped by data-cols. */
.sfgi-grid--players[data-cols="1"] { --sfgi-pcols: 1; }

@media (min-width: 600px) {
	.sfgi-grid--players { --sfgi-pcols: 3; }
	.sfgi-grid--players [data-grid] { gap: var(--sfgi-gap); }
	.sfgi-grid--players[data-cols="1"] { --sfgi-pcols: 1; }
	.sfgi-grid--players[data-cols="2"] { --sfgi-pcols: 2; }
}
@media (min-width: 769px) {
	.sfgi-grid--players { --sfgi-pcols: 4; }
	.sfgi-grid--players[data-cols="1"] { --sfgi-pcols: 1; }
	.sfgi-grid--players[data-cols="2"] { --sfgi-pcols: 2; }
	.sfgi-grid--players[data-cols="3"] { --sfgi-pcols: 3; }
}
@media (min-width: 1025px) {
	.sfgi-grid--players[data-cols="5"] { --sfgi-pcols: 5; }
	.sfgi-grid--players[data-cols="6"] { --sfgi-pcols: 6; }
}
.sfgi-pcard__chips .sfgi-chip {
	max-width: 100%;
	padding: 3px 9px;
	font-size: 10px;
	letter-spacing: 0.16em;
}

/* The card's own monogram fallback, and the object-fit that makes a real
   headshot FILL the round tile instead of letterboxing inside it (the base
   guard's `img { height: auto }` outranks .sfgi-pcard__face on its own). */
.sfgi-pcard__face.sfgi-face--mono {
	font-family: var(--sfgi-f-display);
	font-size: calc(var(--sfgi-pface) * 0.36);
	line-height: 1;
	color: color-mix(in srgb, var(--sfgi-ink) 66%, transparent);
	background:
		radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 38%, transparent), transparent 72%),
		var(--sfgi-panel-2);
}
.sfgi-leadcard__face .sfgi-face--mono {
	font-family: var(--sfgi-f-display);
	font-size: 28px;
	line-height: 1;
	color: color-mix(in srgb, var(--sfgi-ink) 78%, transparent);
}
/* Fill the square crop; do not letterbox. Element-qualified so it outranks the
   `[class^="sfgi-"] img { height: auto }

/* ==========================================================================
   10. MOTION — cooperating with assets/fx.js
   fx.js writes, on a `.sfgi-tilt` card: --rx --ry (deg, capped at 7),
   --mx --my (0-100%) and --lift (px); on a `.sfgi-layer[data-depth]` inside
   it: --px --py --z; and on a `.sfgi-holo` element: --holo (0-200%). It adds
   `sfgi-fx` to <body> on boot and `sfgi-fx-pointer` only when the pointer
   effects are actually allowed to run, so all of this is dead weight for a
   no-JS visitor, a touch device or anyone who asked for reduced motion.

   The tilt is deliberately scoped to `sfgi-fx-pointer`: /players/ paints 829
   cards, and a non-none transform on every one of them is a cost worth paying
   only where the effect is real.
   ========================================================================== */

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

	/* The parallax layers. .sfgi-pcard and .sfgi-leadcard both clip their
	   overflow, which flattens preserve-3d, so --z is left alone and the shift
	   is done in the plane — which is the half of the effect that survives. */
	body.sfgi-fx-pointer .sfgi-pcard .sfgi-layer,
	body.sfgi-fx-pointer .sfgi-leadcard .sfgi-layer,
	body.sfgi-fx-pointer .sfgi-phero .sfgi-layer {
		transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
		transition: transform var(--sfgi-t) var(--sfgi-ease);
	}

	/* The scroll reveal. Gated on `sfgi-fx-reveal`, which fx.js adds ONLY when
	   an IntersectionObserver is present and motion is allowed — gating on
	   `sfgi-fx` alone would leave an older browser staring at a blank page.
	   Every selector also demands `.sfgi-reveal` itself: fx.js only ever adds
	   `.is-in` to elements carrying that class, so hiding anything else would
	   hide it for good. `.sfgi-leaders__item` is NOT one of them — the anchor
	   inside it is. */
	body.sfgi-fx-reveal .sfgi-pcard.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-lead.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-prank__row.sfgi-reveal {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		transition:
			opacity .5s var(--sfgi-ease) var(--fxd, 0ms),
			transform .5s var(--sfgi-ease) var(--fxd, 0ms);
	}
	body.sfgi-fx-reveal .sfgi-pcard.sfgi-reveal.is-in,
	body.sfgi-fx-reveal .sfgi-lead.sfgi-reveal.is-in,
	body.sfgi-fx-reveal .sfgi-prank__row.sfgi-reveal.is-in {
		opacity: 1;
		transform: none;
	}
	/* Once revealed, a card must go back to answering the tilt. */
	body.sfgi-fx-pointer.sfgi-fx-reveal .sfgi-pcard.sfgi-reveal.is-in {
		transform: perspective(var(--sfgi-persp)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfgi-pcard,
	.sfgi-leadcard,
	.sfgi-phero,
	.sfgi-lead,
	.sfgi-leaders__item,
	.sfgi-prank__row,
	.sfgi-pcard .sfgi-layer,
	.sfgi-leadcard .sfgi-layer,
	.sfgi-phero .sfgi-layer {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* ==========================================================================
   COMPONENT SHELLS (orphan audit, 2026-08) — appended, never edit above.
   The renderers in includes/blocks-player.php emit complete components
   (player grid cards, player hero, bio, rank, statline, leaders, and the
   roster-table column helpers) whose classes had no rule anywhere: the block
   theme composed those pages from field blocks, so the gap never surfaced
   there. Numbers are taken from the block demo's measured reference
   (#block_f-ldr-* in scratchpad/ref/rules-f.css) and the design language in
   assets/gridiron.css. Tokens only — no literal colors.
   ========================================================================== */

/* ---- 1. headshot size modifiers -----------------------------------------
   Base .sfgi-face is 44px. The element-qualified img selectors exist to
   outrank the `[class^="sfgi-"] img { height: auto }` guard in gridiron.css
   (0,1,1 vs 0,1,1, later in the cascade), so a real photo fills the circle. */
.sfgi-face--lg,
img.sfgi-face--lg {
	width: 72px;
	height: 72px;
}
.sfgi-face--sm,
img.sfgi-face--sm {
	width: 38px;
	height: 38px;
}
.sfgi-face--xs,
img.sfgi-face--xs {
	width: 26px;
	height: 26px;
}
.sfgi-face--mono.sfgi-face--lg { font-size: 26px; }
.sfgi-face--mono.sfgi-face--sm { font-size: 13px; }
.sfgi-face--mono.sfgi-face--xs { font-size: 10px; }

/* ---- 2. roster-table column helpers -------------------------------------
   blocks-team.php / blocks-player.php print the roster with one class per
   column. Numeric columns read right-aligned in Rajdhani tabular numerals;
   the player column stays left and wide; .sfgi-col-optional drops under
   768px so the table survives a phone without growing a scrollbar it does
   not need. */
.sfgi-col-num,
.sfgi-col-ht,
.sfgi-col-wt,
.sfgi-col-age,
.sfgi-col-exp,
.sfgi-col-pct,
.sfgi-col-rk,
.sfgi-col-stat,
.sfgi-col-strk {
	text-align: right;
	font-family: var(--sfgi-f-num);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sfgi-col-num  { width: 44px; }
.sfgi-col-ht   { width: 54px; }
.sfgi-col-wt   { width: 54px; }
.sfgi-col-age  { width: 48px; }
.sfgi-col-exp  { width: 48px; }
.sfgi-col-pct  { width: 64px; }
.sfgi-col-rk   { width: 44px; }
.sfgi-col-strk { width: 56px; }
.sfgi-col-stat { width: 84px; }
.sfgi-col-player {
	text-align: left;
	min-width: 180px;
}
.sfgi-col-pos {
	text-align: left;
	width: 64px;
}
.sfgi-col-college {
	text-align: left;
	white-space: nowrap;
}
/* Non-media base so the class is never a no-op on wide screens either. */
.sfgi-col-optional { transition: opacity var(--sfgi-t-fast) var(--sfgi-ease); }
@media (max-width: 768px) {
	.sfgi-col-optional { display: none; }
}

.sfgi-roster-num {
	font-family: var(--sfgi-f-num);
	font-weight: 600;
	color: var(--sfgi-muted);
}
.sfgi-roster-stat-value {
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	color: var(--sfgi-ink);
}
.sfgi-roster-stat-unit {
	margin-left: 5px;
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

/* The position tag, in club colour wherever --sfgi-team is set. */
.sfgi-pos {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--sfgi-r-sm);
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 40%, transparent);
}

/* ---- 3. player card — .sfgi-pcard__* ------------------------------------
   <a.sfgi-card.sfgi-pcard> > __media (number watermark + face)
   + __body (name / sub / chips) + __stats (three <span><b>v</b><span>u</span>). */
.sfgi-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow: hidden;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: box-shadow var(--sfgi-t) var(--sfgi-ease), transform var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-pcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring-hot);
}
.sfgi-pcard__media {
	--sfgi-pface: 96px;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	min-height: 128px;
	padding: 18px 16px 0;
	border-bottom: 1px solid var(--sfgi-line);
	background:
		radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 26%, transparent), transparent 72%),
		var(--sfgi-panel-2);
}
.sfgi-pcard__face,
img.sfgi-pcard__face {
	position: relative;
	z-index: 1;
	width: var(--sfgi-pface);
	height: var(--sfgi-pface);
	flex: 0 0 auto;
	border-radius: 999px 999px 0 0;
	object-fit: cover;
	object-position: 50% 12%;
	background: color-mix(in srgb, var(--sfgi-base) 55%, transparent);
	box-shadow: var(--sfgi-ring);
}
.sfgi-pcard__no {
	position: absolute;
	top: 4px;
	right: 12px;
	z-index: 0;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--sfgi-ink) 13%, transparent);
	pointer-events: none;
}
.sfgi-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 13px 16px 4px;
}
.sfgi-pcard__name {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-pcard__sub {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
.sfgi-pcard__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: auto;
	padding: 11px 16px 14px;
	border-top: 1px solid var(--sfgi-line);
}
.sfgi-pcard__stats > span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.sfgi-pcard__stats > span > b {
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 16px;
	line-height: 1.1;
	color: var(--sfgi-ink);
}
.sfgi-pcard__stats > span > span {
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

/* ---- 4. player hero — .sfgi-phero__* ------------------------------------
   The stage on single-gi_player: headshot left under the giant jersey
   number, identity right, headline tiles across the bottom. */
.sfgi-phero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 28px;
	padding: 26px 26px 24px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image:
		radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 20%, transparent), transparent 55%),
		var(--sfgi-sheen);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring);
	color: var(--sfgi-ink);
}
.sfgi-phero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 184px;
	flex: 0 0 auto;
}
.sfgi-phero__photo,
img.sfgi-phero__photo {
	position: relative;
	z-index: 1;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 14%;
	box-shadow: var(--sfgi-ring), 0 18px 44px rgba(0, 0, 0, 0.55);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sfgi-phero__no {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%, -54%);
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 190px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--sfgi-ink) 9%, transparent);
	pointer-events: none;
	user-select: none;
}
.sfgi-phero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}
.sfgi-phero__name {
	margin: 0;
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	font-size: clamp(30px, 4.6vw, 54px);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-phero__team {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
a.sfgi-phero__team:hover { color: var(--sfgi-accent-2); }
.sfgi-phero__physical {
	font-size: 13px;
	letter-spacing: 0.06em;
	row-gap: 6px;
}
.sfgi-phero__physical > span:not(:first-child) {
	position: relative;
	padding-left: 14px;
}
.sfgi-phero__physical > span:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: color-mix(in srgb, var(--sfgi-muted) 70%, transparent);
}
.sfgi-phero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}
.sfgi-phero__stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--sfgi-line);
}

/* ---- 5. statline + the stat tiles the hero shares -----------------------
   .sfgi-statline[data-cols] is a bare grid of .sfgi-stat tiles; the same
   tile treatment applies inside .sfgi-phero__stats. gridiron.css only sets
   the numeral typography on .sfgi-stat, so the tile shell lives here,
   scoped to the two containers this family owns. */
.sfgi-statline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sfgi-gap-sm);
}
@media (min-width: 600px) {
	.sfgi-statline,
	.sfgi-statline[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sfgi-statline[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfgi-statline[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sfgi-statline[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sfgi-statline[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sfgi-statline > .sfgi-stat,
.sfgi-phero__stats > .sfgi-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 12px 14px;
	border-radius: var(--sfgi-r);
	background-color: color-mix(in srgb, var(--sfgi-panel-2) 78%, transparent);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}
.sfgi-statline > .sfgi-stat > b,
.sfgi-phero__stats > .sfgi-stat > b {
	font-size: 26px;
	line-height: 1.05;
}
.sfgi-statline > .sfgi-stat > span,
.sfgi-phero__stats > .sfgi-stat > span {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
.sfgi-statline > .sfgi-stat > i,
.sfgi-phero__stats > .sfgi-stat > i {
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--sfgi-muted) 78%, transparent);
}
.sfgi-statline > .sfgi-stat .sfgi-i,
.sfgi-phero__stats > .sfgi-stat .sfgi-i {
	margin-bottom: 4px;
}

/* ---- 6. player bio — .sfgi-bio ------------------------------------------ */
.sfgi-bio {
	padding: var(--sfgi-pad);
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	color: var(--sfgi-ink);
}
.sfgi-bio__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 11px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--sfgi-line);
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
}
.sfgi-bio__prose {
	font-family: var(--sfgi-f-body);
	font-size: 15px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--sfgi-ink) 82%, var(--sfgi-muted));
}
.sfgi-bio__prose p { margin: 0 0 1em; }
.sfgi-bio__prose p:last-child { margin-bottom: 0; }
.sfgi-bio__prose a {
	color: var(--sfgi-accent-ink);
	text-decoration: none;
}
.sfgi-bio__prose a:hover { color: var(--sfgi-accent-2); }
.sfgi-bio__facts {
	margin-top: 16px;
	padding-top: 4px;
	border-top: 1px solid var(--sfgi-line);
}
.sfgi-bio__prose:only-child,
.sfgi-bio__head + .sfgi-bio__facts {
	border-top: 0;
	margin-top: 0;
}

/* ---- 7. leaders — .sfgi-leaders ------------------------------------------
   Panel numbers from the block demo (#block_f-ldr-pass): radius 22, panel
   background over a 1px ring, head underlined with the accent-2 label, rows
   7x8 with an 8px radius and a soft hover. */
.sfgi-leaders {
	padding: 16px 14px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	color: var(--sfgi-ink);
}
.sfgi-leaders--rows { padding-bottom: 12px; }
.sfgi-leaders--cards { padding-bottom: 14px; }
.sfgi-leaders__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 8px 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--sfgi-line);
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfgi-accent-2);
}
.sfgi-leaders__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.sfgi-lead {
	display: grid;
	grid-template-columns: 18px 38px minmax(0, 1fr) auto;
	grid-template-areas:
		"n face names val"
		"n face track track";
	align-items: center;
	column-gap: 10px;
	row-gap: 5px;
	padding: 7px 8px;
	border-radius: var(--sfgi-r-sm);
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: background-color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-lead:hover { background-color: color-mix(in srgb, var(--sfgi-ink) 5%, transparent); }
.sfgi-lead > .sfgi-face { grid-area: face; }
.sfgi-lead__n {
	grid-area: n;
	font-family: var(--sfgi-f-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-align: right;
	color: var(--sfgi-muted);
}
.sfgi-lead.is-first .sfgi-lead__n { color: var(--sfgi-accent-ink); }
.sfgi-lead__names {
	grid-area: names;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.sfgi-lead__names > b {
	font-family: var(--sfgi-f-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sfgi-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-lead:hover .sfgi-lead__names > b { color: var(--sfgi-accent-ink); }
.sfgi-lead__names > i {
	font-style: normal;
	font-family: var(--sfgi-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sfgi-lead__val {
	grid-area: val;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	text-align: right;
	color: var(--sfgi-ink);
}
.sfgi-lead__track {
	grid-area: track;
	display: block;
	height: 3px;
	border-radius: var(--sfgi-pill);
	overflow: hidden;
	background: color-mix(in srgb, var(--sfgi-ink) 8%, transparent);
}
.sfgi-lead__track > .sfgi-bar {
	display: block;
	width: var(--sfgi-pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sfgi-team, var(--sfgi-accent)), color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 55%, var(--sfgi-accent-2)));
}
.sfgi-lead.is-first .sfgi-lead__track { background: color-mix(in srgb, var(--sfgi-accent) 16%, transparent); }

/* The marquee card of layout=cards: face + name, the giant numeral, the
   full-width holo track, then the chasing pack as the same compact rows. */
.sfgi-leadcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 2px;
	padding: 14px 14px 12px;
	border-radius: var(--sfgi-r);
	background:
		radial-gradient(140% 110% at 100% 0%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 18%, transparent), transparent 60%),
		color-mix(in srgb, var(--sfgi-panel-2) 72%, transparent);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}
.sfgi-leadcard__top {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sfgi-ink);
	text-decoration: none;
}
.sfgi-leadcard__top .sfgi-lead__names > b { font-size: 15px; }
.sfgi-leadcard__top:hover .sfgi-lead__names > b { color: var(--sfgi-accent-ink); }
.sfgi-leadcard__face { flex: 0 0 auto; display: inline-flex; }
.sfgi-leadcard__val {
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--sfgi-ink);
	margin-top: 4px;
}
.sfgi-leadcard__unit {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	margin-bottom: 4px;
}
.sfgi-leadcard > .sfgi-track {
	display: block;
	height: 3px;
	border-radius: var(--sfgi-pill);
	overflow: hidden;
	background: color-mix(in srgb, var(--sfgi-ink) 8%, transparent);
}
.sfgi-leadcard > .sfgi-track > .sfgi-bar {
	display: block;
	width: var(--sfgi-pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--sfgi-g-holo);
}
.sfgi-leadcard__rest {
	margin: 8px -8px 0;
	padding-top: 6px;
	border-top: 1px solid var(--sfgi-line);
}

/* ---- 8. player rank — .sfgi-prank ---------------------------------------
   League-rank tiles on single-gi_player: the ordinal in Rajdhani, the stat
   label over its "Nth of M players" line, the value right. A top-ten row
   (.is-me) lights up in the accent. */
.sfgi-prank {
	padding: 16px 14px 12px;
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	color: var(--sfgi-ink);
}
.sfgi-prank__head { margin-bottom: 10px; }
.sfgi-prank__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--sfgi-r-sm);
	transition: background-color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-prank__row:hover { background-color: color-mix(in srgb, var(--sfgi-ink) 5%, transparent); }
.sfgi-prank__row + .sfgi-prank__row { border-top: 1px solid color-mix(in srgb, var(--sfgi-line) 60%, transparent); }
.sfgi-prank__n {
	flex: 0 0 44px;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 24px;
	line-height: 1;
	text-align: right;
	color: var(--sfgi-muted);
}
.sfgi-prank__row.is-me .sfgi-prank__n { color: var(--sfgi-accent-ink); }
.sfgi-prank__label { flex: 1 1 auto; }
.sfgi-prank__label > b { font-size: 13.5px; }
.sfgi-prank__val {
	flex: 0 0 auto;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	text-align: right;
	color: var(--sfgi-ink);
}
.sfgi-prank__row.is-me .sfgi-prank__val { color: var(--sfgi-accent-2); }

/* ---- 9. responsive -------------------------------------------------------
   Brief breakpoints: 1024 and 768. The hero stacks and centres, its number
   watermark and tiles step down, the card media shrinks a notch. */
@media (max-width: 1024px) {
	.sfgi-phero { gap: 10px 20px; padding: 22px 20px 20px; }
	.sfgi-phero__media { width: 168px; min-height: 156px; }
	.sfgi-phero__photo,
	img.sfgi-phero__photo { width: 140px; height: 140px; }
	.sfgi-phero__photo.sfgi-face--mono { font-size: 50px; }
	.sfgi-phero__no { font-size: 150px; }
	.sfgi-leadcard__val { font-size: 38px; }
}
@media (max-width: 768px) {
	.sfgi-phero {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		padding: 20px 16px 18px;
	}
	.sfgi-phero__body { align-items: center; }
	.sfgi-phero__media { width: 148px; min-height: 136px; }
	.sfgi-phero__photo,
	img.sfgi-phero__photo { width: 124px; height: 124px; }
	.sfgi-phero__photo.sfgi-face--mono { font-size: 44px; }
	.sfgi-phero__no { font-size: 120px; }
	.sfgi-phero__name { font-size: clamp(26px, 8vw, 38px); }
	.sfgi-phero__physical { justify-content: center; }
	.sfgi-phero__chips { justify-content: center; }
	.sfgi-phero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfgi-statline > .sfgi-stat > b,
	.sfgi-phero__stats > .sfgi-stat > b { font-size: 22px; }
	.sfgi-pcard__media { --sfgi-pface: 84px; min-height: 112px; }
	.sfgi-pcard__no { font-size: 52px; }
	.sfgi-pcard__name { font-size: 16px; }
	.sfgi-bio__prose { font-size: 14px; }
	.sfgi-prank__n { flex-basis: 36px; font-size: 20px; }
	.sfgi-leadcard__val { font-size: 34px; }
}

/* Fix: integer tile values are span.sfgi-count and were caught by the
   10.5px label rule above — floats (<b>) already read 26px. Both value
   shapes now match. */
.sfgi-statline > .sfgi-stat > span.sfgi-count,
.sfgi-phero__stats > .sfgi-stat > span.sfgi-count {
	font-family: var(--sfgi-f-num);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sfgi-ink);
	font-variant-numeric: tabular-nums;
}

.sfgi-statline > .sfgi-stat--hot > span.sfgi-count,
.sfgi-phero__stats > .sfgi-stat--hot > span.sfgi-count,
.sfgi-statline > .sfgi-stat--hot > b,
.sfgi-phero__stats > .sfgi-stat--hot > b {
	color: var(--sfgi-accent-ink);
}

/* Fix: nested reveals stall. The rank PANEL (.sfgi-prank) is itself a
   .sfgi-reveal, and its rows carried a second, staggered reveal that under
   scroll pressure sat at opacity 0 long after is-in landed — the panel
   painted as an empty slab. One reveal per component: the panel animates,
   the rows are simply visible. */
body.sfgi-fx-reveal .sfgi-prank__row.sfgi-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}


/* On single-gi_player the rank panel sits in a stretched column beside the taller
   Team-leaders card. Once the panel fills that column the rows must use the
   recovered height instead of bunching at the top. Inert wherever .sfgi-prank is
   content-height: flex-basis stays auto and with no free space nothing can grow. */
.sfgi-prank {
	display: flex;
	flex-direction: column;
}

.sfgi-prank > .sfgi-prank__head { flex: 0 0 auto; }
.sfgi-prank > .sfgi-prank__row  { flex: 1 1 auto; }