/* =========================================================================
   Flathead Baseball — main stylesheet (v0.3)
   Register: plain-spoken and left-aligned, patterned on electdugan.com
   (the commissioner's own site): flat dark blocks, sentence case, one
   heading face, framed photos with captions, a single accent color.
   FAMBL's palette comes from the league logo: spruce, glacier sky,
   marigold. One signature element: the outfield-wall CTA strip.

   Contrast notes (AA-checked):
     white on spruce #14342E        ≈ 13.9:1
     marigold #E5A33D on spruce     ≈ 6.1:1
     sky #79BFC6 on spruce          ≈ 6.5:1
     ink #23312B on white           ≈ 13.5:1
     moss #5A6963 on white          ≈ 5.6:1
     spruce-deep on marigold        ≈ 6.6:1
   ========================================================================= */

/* ---------- Heading face (body text is the system stack) -----------------
   Libre Franklin: the Franklin Gothic lineage — newspaper sports-section
   headlines, set in sentence case. */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/libre-franklin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/libre-franklin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/libre-franklin-800.woff2') format('woff2');
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
	--c-spruce: #14342E;
	--c-spruce-deep: #0D241F;
	--c-peak: #1E3A5F;
	--c-sky: #79BFC6;
	--c-mint: #EDF4F0;
	--c-white: #FFFFFF;
	--c-ink: #23312B;
	--c-moss: #5A6963;
	--c-marigold: #E5A33D;
	/* E7f, 2026-07-26: was #B97F24, which failed 4.5:1 as a hover colour on light
	   surfaces (3.43 on white, 3.07 on the mint panel) and under white text on the
	   primary buttons (3.43). The binding constraint is the mint panel, not white.
	   #94661D is the first value in this hue that reaches 4.5 there; this one reaches
	   4.99 and leaves headroom. Same hue and saturation, lightness only. */
	--c-marigold-deep: #8C5F18;
	--c-line: #E3E7E4;

	/* Weekly-award accents (approved icon design handoff, 2026-07): gold =
	   Hitter/home-plate, slate-blue = Pitcher/baseball. */
	--award-gold: #a9762a; --award-gold-deep: #8a5f20; --award-gold-tint: #f4ead6;
	--award-blue: #3d6f80; --award-blue-deep: #356070; --award-blue-tint: #e3edf0;
	/* Reliever of the Week — a pine green distinct from the Starter's blue. */
	--award-green: #4f7a3f; --award-green-deep: #3f6432; --award-green-tint: #e7efe0;
	--c-dirt: #A6462A; /* warning-track red clay */
	--c-foul: #EDD84A; /* foul-pole yellow */
	--c-sign-blue: #2E6FB0;
	--c-sign-red: #C24B3E;

	--font-head: 'Libre Franklin', 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--radius: 8px;
	--shadow: 0 2px 12px rgba(20, 52, 46, 0.07);
}

/* ---------- Reset-lite ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, dl { margin: 0 0 1em; }

a { color: var(--c-peak); text-underline-offset: 2px; }
a:hover { color: var(--c-marigold-deep); }

/* Visible focus everywhere — WCAG 2.4.7 / 2.4.11 */
:focus-visible {
	outline: 3px solid var(--c-marigold-deep);
	outline-offset: 2px;
	border-radius: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.team-hero :focus-visible,
.page-hero :focus-visible {
	outline-color: var(--c-sky);
}

/* E7e, 2026-07-26. The sky ring above clears 3:1 on every dark backdrop those
   regions actually use, but .cta-alt is a sign-red band (#C24B3E) and sky on it
   measures 2.31, under the 3.0 that WCAG 2.2 AA 1.4.11 needs for a focus
   indicator. spruce-deep measures 3.39 there. Note spruce is NOT enough: it
   comes out at 2.80.

   Scoped this narrowly on purpose. The ring is drawn 2px OUTSIDE the element
   (outline-offset), so it sits on the page background, not on the button it
   surrounds. A global dark ring would therefore be invisible across the dark
   chrome, which is most of the site. The two-tier rule above is correct. */
.cta-alt :focus-visible {
	outline-color: var(--c-spruce-deep);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Utilities ------------------------------------------------------ */
.container {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section-alt { background: var(--c-mint); }
.section-pad-bottom { padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }


.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius);
}

.fine-print { color: var(--c-moss); font-size: 0.9rem; }

/* "E — name" fielding-error footnote under the box score. */
.boxscore-errors { color: var(--c-moss); font-size: 0.92rem; margin: 0.25rem 0 0.75rem; }
.boxscore-errors strong { letter-spacing: 0.03em; }

.text-link { font-weight: 700; }

.prose { max-width: 68ch; }
.prose img { border-radius: var(--radius); }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 6px;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--c-marigold); color: var(--c-spruce-deep); }
.btn-primary:hover { background: var(--c-marigold-deep); color: var(--c-white); }

.btn-secondary { background: transparent; color: var(--c-ink); border-color: currentColor; }
.btn-secondary:hover { color: var(--c-marigold-deep); }
.btn-on-dark { color: var(--c-white); }
.btn-on-dark:hover { color: var(--c-sky); }

.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }

/* ---------- Header --------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 0px,
			rgba(255, 255, 255, 0.035) 2px,
			transparent 2px,
			transparent 110px
		),
		var(--c-spruce-deep);
	color: var(--c-white);
	/* Painted home-run line along the top rail. */
	border-top: 4px solid var(--c-marigold);
}
.header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
	flex-wrap: wrap;
	padding-block: 0.4rem;
}

.site-branding {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.site-branding .custom-logo { max-height: 64px; width: auto; }
.site-title {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.15;
	max-width: 15ch;
	color: var(--c-white);
	text-decoration: none;
}

/* Mobile menu button */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }

/* Mobile nav panel */
.primary-nav {
	display: none;
	flex-basis: 100%;
	padding-block: 0.5rem 1rem;
}
.primary-nav.is-open { display: block; }

.primary-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav .menu a {
	display: block;
	padding: 0.7rem 0.25rem;
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.primary-nav .menu a:hover,
.primary-nav .menu .current-menu-item > a,
.primary-nav .menu a[aria-current='page'] {
	color: var(--c-marigold);
}
.nav-cta { padding-top: 1rem; }

.header-cta { display: none; }
@media (min-width: 480px) {
	.header-cta { display: block; }
}

/* Nav submenus (Schedule → RSVP). Mobile: an indented run of the same
   stacked list. Desktop: a small spruce dropdown on hover, kept open for
   keyboard users via :focus-within. The parent link still navigates —
   touch users land on the schedule page, which carries its own RSVP
   button, so nothing is hover-only. */
.menu-item-has-children > a::after {
	content: ' ▾';
	font-size: 0.75em;
	opacity: 0.7;
}
.primary-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.1rem;
}

/* Desktop nav */
@media (min-width: 920px) {
	.nav-toggle { display: none; }
	.primary-nav {
		display: block;
		flex-basis: auto;
		padding: 0;
	}
	.primary-nav .menu {
		display: flex;
		gap: 0.25rem;
	}
	.primary-nav .menu a {
		padding: 0.6rem 0.5rem;
		font-size: 0.9rem;
		border-bottom: 0;
		border-radius: 6px;
	}
	.primary-nav .menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--c-white); }
	.primary-nav .menu .current-menu-item > a,
	.primary-nav .menu a[aria-current='page'] {
		box-shadow: inset 0 -3px 0 var(--c-marigold);
		color: var(--c-white);
	}
	/* Desktop dropdown: attached flush under the parent item (no hover gap). */
	.primary-nav .menu .menu-item-has-children { position: relative; }
	.primary-nav .menu .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 110;
		min-width: 10rem;
		padding: 0.3rem;
		background: var(--c-spruce-deep);
		border-radius: 6px;
		box-shadow: 0 10px 24px rgba(13, 36, 31, 0.35);
	}
	.primary-nav .menu .menu-item-has-children:hover .sub-menu,
	.primary-nav .menu .menu-item-has-children:focus-within .sub-menu { display: block; }
	.primary-nav .menu .sub-menu a { display: block; }
	.primary-nav .menu .sub-menu a:hover { background: var(--c-spruce); }
	.nav-cta { display: none; }
	/* The name beside the badge carries readability; the badge just needs presence. */
	.site-branding .custom-logo { max-height: 76px; }
	.site-title { font-size: 1.05rem; }
}

/* ---------- Hero: full-bleed photo, text on the quiet side ---------------- */
.hero {
	background: var(--c-spruce);
	background-size: cover;
	background-position: center;
	color: var(--c-white);
	position: relative;
}
/* Shade is heaviest behind the text and eases off across the photo. */
.hero.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(13, 36, 31, 0.88) 0%, rgba(13, 36, 31, 0.6) 55%, rgba(13, 36, 31, 0.3) 100%);
}
.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 660px;
	padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero-kicker {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-sky);
	margin-bottom: 1rem;
}
.hero-title {
	color: var(--c-white);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: 0.4em;
}
.hero-title .hero-accent { color: var(--c-marigold); }
.hero-sub {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.94);
	max-width: 52ch;
}
/* Links in the hero (e.g. the MSBL/MABL link) need a bright color and underline
   to read against the dark photo — the default link navy disappears there. */
.hero a:not(.btn) {
	color: var(--c-marigold);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hero a:not(.btn):hover { color: var(--c-white); }
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Offseason "play next season" CTA. Deliberately NOT marigold: the hero form's
   submit is already marigold and sits right above it, and two identical primary
   buttons a few pixels apart read as one decision split in half. Solid white on
   the photo gives it equal weight with a different voice — and stays distinct
   from the white *ghost* "Score a game" button further down. */
.hero-next-season {
	margin: 2rem 0 0;
}
.hero-next-season .btn {
	background: var(--c-white);
	color: var(--c-spruce-deep);
	border-color: var(--c-white);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.hero-next-season .btn:hover,
.hero-next-season .btn:focus-visible {
	background: var(--c-marigold);
	color: var(--c-spruce-deep);
	border-color: var(--c-marigold);
}

/* "Join our Discord": a secondary action under the signup, centered to the
   form's width so it lines up beneath the submit button. */
.hero-discord {
	margin: 1.1rem 0 0;
}
/* Secondary "Score a game" prompt under the signup — a white ghost button so it
   reads on the photo without competing with the marigold primary action. */
.hero-score-cta {
	margin-top: 1.1rem;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hero-score-cta .btn {
	margin-left: 0.5rem;
	background: transparent;
	color: var(--c-white);
	border: 2px solid var(--c-white);
}
.hero-score-cta .btn:hover,
.hero-score-cta .btn:focus-visible {
	background: var(--c-white);
	color: var(--c-spruce-deep);
}
.hero-deadline {
	margin-top: 1rem;
	font-weight: 600;
	color: var(--c-marigold);
}
/* The badge poster-size on the hero's quiet side — wide screens only;
   the header lockup carries the name everywhere else. */
.hero-badge { display: none; }
@media (min-width: 1100px) {
	.hero .container { position: relative; }
	.hero-badge {
		display: block;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		height: clamp(280px, 24vw, 380px);
		width: auto;
		z-index: 1;
		border-radius: 4px;
		box-shadow: 0 14px 36px rgba(13, 36, 31, 0.45);
	}
}

/* Photo credit, tucked where a photographer would put it */
.hero-photo-credit {
	position: absolute;
	right: 1rem;
	bottom: 0.6rem;
	z-index: 1;
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Homepage: the ask ---------------------------------------------- */
.join-inner { max-width: 68ch; }
.join-action { margin-block: 1.25rem; }

/* ---------- Cards ------------------------------------------------------------ */
.card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.4rem 1.25rem;
}
.card h2, .card h3 { margin-top: 0; }

.card-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) {
	.two-up { grid-template-columns: repeat(2, 1fr); }
}

.card-link { font-weight: 700; }

/* ---------- Role guide embeds ------------------------------------------------ */
.guide-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--c-peak);
	border-bottom: 2px solid var(--c-marigold);
	padding-bottom: 2px;
}
.guide-jump:hover { color: var(--c-marigold-deep); }
.guide-jump-arrow { transition: transform 0.15s ease; }
.guide-jump:hover .guide-jump-arrow { transform: translateY(2px); }
/* On the dark hero, flip to white for contrast. */
.page-hero .guide-jump { color: var(--c-white); }
.page-hero .guide-jump:hover { color: var(--c-marigold); }

.guide-embed {
	margin: 2rem 0 0;
	scroll-margin-top: 1.25rem;
}
.guide-embed-heading {
	margin: 0 0 0.35rem;
}
.guide-embed-intro {
	margin: 0 0 1rem;
	color: var(--c-moss);
	max-width: 60ch;
}
.guide-embed-frame {
	border: 1px solid var(--c-line);
	border-top: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	background: var(--c-white);
}
.guide-embed-frame iframe {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 520px;
	max-height: 760px;
	border: 0;
}
.guide-embed-fallback {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
}

.check-list {
	list-style: none;
	padding: 0;
	max-width: 46ch;
}
.check-list li {
	padding: 0.35rem 0 0.35rem 1.75rem;
	position: relative;
}
.check-list li::before {
	content: '✔';
	position: absolute;
	left: 0;
	color: var(--c-marigold-deep);
	font-weight: 700;
}

.pricing-list { list-style: none; padding: 0; }
.pricing-list li { padding-block: 0.4rem; border-bottom: 1px solid var(--c-line); }
.pricing-list li:last-child { border-bottom: 0; }
.pricing-list strong {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--c-spruce);
}

.recruit-band { margin-top: 2rem; }

/* ---------- Badges ------------------------------------------------------------ */
.badge {
	display: inline-block;
	padding: 0.15em 0.65em;
	border-radius: 4px;
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.badge-final { background: var(--c-spruce); color: var(--c-white); }
.badge-alert { background: var(--c-peak); color: var(--c-white); }
.badge-note { background: var(--c-mint); color: var(--c-ink); border: 1px solid var(--c-line); }
.badge-division { background: var(--c-sky); color: var(--c-spruce-deep); }
.badge-record { background: var(--c-peak); color: var(--c-white); }
.badge-tier { background: var(--c-mint); color: var(--c-moss); border: 1px solid var(--c-line); font-weight: 600; }

/* ---------- Game rows ----------------------------------------------------------- */
.game-day-heading {
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 1.75rem 0 0.6rem;
	color: var(--c-ink);
}
.game-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.game-row {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'when   result'
		'match  result'
		'where  result';
	align-items: center;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
}
.game-when { grid-area: when; color: var(--c-moss); font-size: 0.9rem; }
.game-when .game-time::before { content: '· '; }
.game-matchup {
	grid-area: match;
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-ink);
}
.game-matchup .badge { margin-left: 0.5rem; }
/* Let the matchup column actually shrink inside the grid... */
.game-matchup { min-width: 0; }
/* ...so a long note (e.g. an "estimated stats" disclaimer) drops to its own line
   and clips with an ellipsis instead of blowing out the row. The full text still
   shows on the game page. */
.game-matchup .badge-note {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0.35rem 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.game-where { grid-area: where; color: var(--c-moss); font-size: 0.9rem; }
.game-result { grid-area: result; text-align: right; }

.game-row--rainout .game-matchup,
.game-row--canceled .game-matchup { color: var(--c-moss); }

@media (min-width: 720px) {
	.game-row {
		grid-template-columns: 150px 1fr auto auto;
		grid-template-areas: 'when match where result';
	}
	.game-when .game-time::before { content: ''; }
	.game-when .game-time { display: block; }
}

/* ---------- Season filter pills --------------------------------------------------- */
.season-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.pill {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 2px solid var(--c-spruce);
	border-radius: 999px;
	color: var(--c-spruce);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}
.pill:hover { border-color: var(--c-marigold-deep); color: var(--c-marigold-deep); }
.pill.is-active { background: var(--c-spruce); color: var(--c-white); }

/* ---------- Tables ------------------------------------------------------------------ */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5rem;
}
.standings-table,
.roster-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}
.standings-table caption,
.roster-table caption {
	font-family: var(--font-head);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--c-ink);
	text-align: left;
	padding: 0.75rem 0.25rem;
}
.standings-table th,
.standings-table td,
.roster-table th,
.roster-table td {
	padding: 0.6rem 0.75rem;
	text-align: center;
	border-bottom: 1px solid var(--c-line);
	font-variant-numeric: tabular-nums;
}
.standings-table thead th,
.roster-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.standings-table thead abbr,
.roster-table thead abbr { text-decoration: none; }
.standings-table tbody th,
.roster-table tbody th { text-align: left; font-weight: 600; }
.standings-table .col-wide,
.roster-table .col-wide { text-align: left; width: 40%; }
.standings-table tbody tr:nth-child(even),
.roster-table tbody tr:nth-child(even) { background: var(--c-mint); }
.standings-table tbody tr:first-child { box-shadow: inset 4px 0 0 var(--c-marigold); }
.standings-table tbody tr:first-child th,
.standings-table tbody tr:first-child td { font-weight: 700; }

/* ---------- Team & player pages ------------------------------------------------- */
.team-hero {
	background: var(--c-spruce);
	color: var(--c-white);
	padding-block: clamp(2rem, 5vw, 3rem);
}
.team-hero h1 { color: var(--c-white); margin-bottom: 0.25em; }
.team-hero-inner {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.team-hero-logo img {
	max-width: 120px;
	max-height: 120px;
	object-fit: contain;
	background: var(--c-white);
	border-radius: var(--radius);
	padding: 0.5rem;
}
.team-hero-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.team-sponsor-line a { color: var(--c-sky); }

.team-card { text-align: left; }
.team-card-logo img { max-height: 110px; object-fit: contain; }
.team-card-name { font-size: 1.25rem; margin: 0.5rem 0 0.35rem; }
.team-card-name a { color: var(--c-ink); text-decoration: none; }
.team-card-name a:hover { color: var(--c-marigold-deep); }
.team-card-record, .team-card-manager { margin: 0.15rem 0; color: var(--c-moss); font-size: 0.95rem; }

.team-roster, .team-schedule { margin-top: 2.5rem; }

.player-card { max-width: 560px; }
.player-photo img { border-radius: var(--radius); margin-bottom: 1rem; }
.player-number { color: var(--c-moss); font-size: 0.7em; }
.player-facts dt {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--c-spruce);
}
.player-facts dd { margin: 0 0 0.75rem; }

/* ---------- Register page --------------------------------------------------------- */
.page-hero {
	background: var(--c-spruce);
	color: var(--c-white);
	padding-block: clamp(2rem, 5vw, 3rem);
	margin-bottom: 2rem;
}
.page-hero h1 { color: var(--c-white); }
.page-hero .hero-deadline { color: var(--c-marigold); font-weight: 600; }

.steps-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	counter-reset: step;
	margin: 1rem 0 0;
	padding: 0;
}
.steps-strip li {
	counter-increment: step;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}
.steps-strip li::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--c-marigold);
	color: var(--c-spruce-deep);
	font-family: var(--font-head);
	font-weight: 800;
}

.register-layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 920px) {
	.register-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.register-aside { display: grid; gap: 1rem; }

/*
 * The in-season drop-in block, below the main signup. The rule and the extra
 * space are load-bearing: it is a second, different offer on a page whose job
 * is the first one, so it has to read as a separate decision rather than as a
 * continuation of the form above it.
 */
.register-dropin {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 3px solid var(--c-marigold);
}
.register-dropin > h2 { margin-top: 0; }

.notice-box {
	background: var(--c-mint);
	border-left: 5px solid var(--c-marigold);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

/* ---------- Forms (native + Fluent Forms when it arrives) ----------------------- */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='date'],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.75rem;
	border: 2px solid var(--c-line);
	border-radius: 6px;
	background: var(--c-white);
	color: var(--c-ink);
	font: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--c-spruce);
}
label { font-weight: 600; }

.search-form { max-width: 480px; margin-block: 1rem; }
.search-controls { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.search-field { flex: 1; }

/* Match the site's primary (marigold) buttons. !important beats Fluent Forms'
   own default button colour, which otherwise renders it blue. */
.fluentform .ff-btn-submit,
.fluentform button[type='submit'] {
	background: var(--c-marigold) !important;
	color: var(--c-spruce-deep) !important;
	border: 0 !important;
	border-radius: 6px;
	padding: 0.85rem 1.9rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type='submit']:hover { background: var(--c-marigold-deep) !important; color: var(--c-white) !important; }

/* WCAG 2.2 AA, 2.4.7 Focus Visible. Fluent Forms clears the outline on its own
   text controls, so the theme's global :focus-visible rule at the top of this
   file never lands on them and FIVE controls on the Register form showed no
   focus indicator at all (measured 2026-07-26, Approved Actions List E7a, which
   says four: the careful re-walk found a fifth, the number input).
   Fixed here rather than in the plugin so a Fluent Forms update cannot silently
   revert it. !important is required to beat the plugin's own reset, matching
   what the submit-button rule directly above already has to do.

   Values are copied from the theme's global :focus-visible (line ~111) on
   purpose: same 3px marigold-deep ring and 2px offset a keyboard user already
   sees everywhere else on the site, so the form does not get its own dialect.
   Paired with the border-colour shift the theme's native inputs use. */
.fluentform .ff-el-form-control:focus-visible,
.fluentform textarea.ff-el-form-control:focus-visible,
.fluentform select.ff-el-form-control:focus-visible {
	outline: 3px solid var(--c-marigold-deep) !important;
	outline-offset: 2px !important;
	border-color: var(--c-spruce);
}

/* The hero email-list signup is the same Fluent Forms markup as the Register
   form, so it inherits the inputs and marigold submit button above. These rules
   only adapt it to the hero: a compact width and light label/help/message text
   so it reads against the dark photo. */
.hero-form { max-width: 34rem; }
/* The form ships with no heading, so the theme prints one above it (a prompt
   like "Get league updates"). Light + bold so it reads over the dark photo. */
.hero-form-label {
	margin: 0 0 0.6rem;
	color: var(--c-white);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hero-form .fluentform .ff-el-group { margin-bottom: 0; }
/* The field placeholders ("Enter Your First Name", "Email Address") name each
   field, so hide the form's own labels — they render dark from the form styler
   and disappear against the photo. Kept for screen readers (visually hidden). */
.hero-form .fluentform .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.hero-form .fluentform .ff-section-heading,
.hero-form .fluentform .ff-el-help-message,
.hero-form .fluentform .ff-el-custom-html,
.hero-form .fluentform .ff-message-success { color: var(--c-white); }
.hero-form .fluentform input::placeholder { color: var(--c-moss); opacity: 1; }
/* Size the field and button to the same 44px height as the site buttons, so the
   signup and the "See the schedule" button sit balanced side by side. */
.hero-form .fluentform input[type='email'],
.hero-form .fluentform input[type='tel'],
.hero-form .fluentform input[type='text'] { min-height: 44px; padding: 0.6rem 0.85rem; }
/* Give the submit button room below the inputs (the field groups have their
   bottom margin zeroed for compactness, which otherwise crowds the button). */
.hero-form .fluentform .ff-btn-submit,
.hero-form .fluentform button[type='submit'] { min-height: 44px; margin-top: 1rem; padding: 0.6rem 1.5rem; }
/* Fluent Forms centers the submit button; left-align it so it lines up with the
   inputs above and the "Join our Discord" button below. */
.hero-form .fluentform .ff_submit_btn_wrapper { text-align: left; }

/* ---------- CTA strip: the outfield wall ----------------------------------------- */
/* The one theatrical element, kept quiet: wall green, a painted top
   rail, the distance marker ghosted in the corner — like Memorial
   Field's fence in the team photos. */
.cta-band {
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 0px,
			rgba(255, 255, 255, 0.035) 2px,
			transparent 2px,
			transparent 110px
		),
		var(--c-spruce-deep);
	color: var(--c-white);
	position: relative;
	border-top: 5px solid var(--c-marigold);
}
/* 320, painted low on the right near the foul pole. */
.cta-band::after {
	content: '320';
	position: absolute;
	right: calc(7% + 2.5rem); /* a fixed gap to the left of the foul pole (at 7%) */
	bottom: 2.4rem;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	color: var(--c-marigold);
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
}

/* FAMBL badge on the left of the wall (desktop only — no room on phones). */
.wall-logo { display: none; }
@media (min-width: 920px) {
	.wall-logo {
		display: block;
		position: absolute;
		left: 3%;
		top: 50%;
		transform: translateY(-50%);
		height: 92%; /* fill most of the wall height */
		width: calc(47vw - 320px); /* cap the box so the badge never reaches the banners */
		z-index: 0;
		filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
	}
	.wall-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; border-radius: 8px; }
}

/* Foul pole on the right: a painted yellow line down the wall, with the pole and
   mesh screen rising above it (desktop). The white foul line lives on the footer. */
.foul-pole {
	position: absolute;
	right: 7%;
	top: 0;
	bottom: 0;
	width: clamp(2px, 0.3vw, 4px);
	background: var(--c-foul);
	z-index: 0;
	pointer-events: none;
}
.foul-pole-mast,
.foul-pole-screen { position: absolute; bottom: 100%; }
.foul-pole-mast {
	left: 50%;
	transform: translateX(-50%);
	width: clamp(5px, 0.55vw, 8px);
	/* Tall enough to reach the heading of the section above the wall. That section
	   gets taller on narrow screens (text wraps more), so the height grows as the
	   viewport narrows. */
	height: clamp(430px, calc(653px - 15.1vw), 640px);
	background: var(--c-foul);
	border-radius: 3px 3px 0 0;
}
.foul-pole-screen {
	right: calc(50% + 2px); /* the fair (left) side of the mast */
	width: clamp(30px, 7vw, 100px);
	height: clamp(390px, calc(613px - 15.1vw), 600px);
	margin-bottom: clamp(12px, 2vw, 24px);
	background: radial-gradient(circle, transparent 1.9px, var(--c-foul) 2.1px) 0 0 / 7px 7px;
	border: 1px solid var(--c-foul);
}
/* On phones, keep the "How the league works" text clear of the tall foul
   pole/mesh on the right (they rise up into this section). Desktop clears on its
   own. */
@media (max-width: 719px) {
	.how-it-works .prose { padding-right: 4.75rem; }
	/* Interior pages don't reserve room above the wall for the pole, so hide the
	   mast + mesh that rise above it on phones (they'd overlap page content). The
	   painted line down the wall stays. Desktop keeps the full pole. */
	.cta-band--interior .foul-pole-mast,
	.cta-band--interior .foul-pole-screen { display: none; }
}

/* The three CTA "ad banners": staggered, varied colour, text centred. */
.cta-band-inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.cta-band-title,
.cta-alt {
	margin: 0;
	border: 3px solid var(--c-white);
	border-radius: 10px;
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}
.cta-band-title {
	align-self: flex-start;
	max-width: 12em;
	padding: clamp(0.5rem, 1.4vw, 0.9rem) clamp(0.8rem, 1.8vw, 1.3rem);
	font-size: clamp(1.15rem, 2.4vw, 1.7rem);
	line-height: 1.15;
	background: var(--c-sign-blue);
	color: var(--c-white);
}
.cta-band-action { align-self: flex-end; margin: 0; }
.cta-band-action .btn {
	border: 3px solid var(--c-white);
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}
.cta-alt {
	align-self: center;
	padding: 0.45rem 0.9rem;
	border-width: 2px;
	background: var(--c-sign-red);
	color: var(--c-white);
	font-size: 0.92rem;
}
.cta-alt a { color: var(--c-white); text-decoration: underline; }
.cta-spots, .cta-deadline { align-self: center; margin: 0; color: var(--c-marigold); font-weight: 600; }
/* On phones, keep the banners clear of the foul pole line on the right, and tuck
   the 320 (smaller) into the space below the banners so it isn't hidden. */
@media (max-width: 719px) {
	.cta-band-inner { padding-right: 4.2rem; }
	.cta-band::after { font-size: 1.4rem; bottom: 0.5rem; z-index: 2; }
}

/* ---------- Sponsors ----------------------------------------------------------------- */
.sponsor-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
@media (min-width: 640px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .sponsor-grid { grid-template-columns: repeat(4, 1fr); } }

.sponsor-item {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	min-height: 110px;
}
.sponsor-item img { max-height: 72px; object-fit: contain; }
.sponsor-name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
}

/* ---------- Blog / news cards ---------------------------------------------------------- */
.post-list { display: grid; gap: 1rem; }
.post-card-title { margin-bottom: 0.25rem; }
.post-card-title a { color: var(--c-ink); text-decoration: none; }
.post-card-title a:hover { color: var(--c-marigold-deep); }
.post-card-meta { color: var(--c-moss); font-size: 0.9rem; }

.navigation.pagination { margin-block: 1.5rem; }
.navigation.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 2px solid var(--c-spruce);
	border-radius: 6px;
	text-decoration: none;
	color: var(--c-spruce);
	font-family: var(--font-head);
	font-weight: 700;
}
.navigation.pagination .page-numbers.current { background: var(--c-spruce); color: var(--c-white); }

/* ---------- 404 --------------------------------------------------------------------------- */
.link-list { list-style: none; padding: 0; }
.link-list li { padding-block: 0.3rem; }

/* ---------- Footer --------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	/* Stadium grass with mowed stripes, and a straight warning-track dirt strip
	   along the top (an inset shadow keeps it a uniform width). */
	background: repeating-linear-gradient(90deg, #163a2b 0, #163a2b 72px, #1e4a39 72px, #1e4a39 144px);
	box-shadow: inset 0 36px 0 var(--c-dirt);
	color: rgba(255, 255, 255, 0.92);
}
/* When a CTA-band wall sits directly above, the footer is the field: a straight
   warning track (from the base footer above) with the foul line off the right. */
.site-footer.has-wall {
	padding-top: 22px; /* keep the warning track off the footer text below it */
	overflow: hidden; /* clip the long foul line to the footer's bottom edge */
}
.site-footer.has-wall::before {
	content: '';
	position: absolute;
	top: 0; /* the warning-track top, where the yellow wall line ends */
	right: 7%;
	width: clamp(2px, 0.3vw, 4px);
	height: 120vh; /* runs to the bottom of the window (clipped by the footer) */
	background: rgba(255, 255, 255, 0.85);
	transform-origin: top center;
	transform: rotate(8deg); /* angle down toward home, clear of the footer text */
	z-index: 5; /* above the clay track so it crosses it and meets the pole */
	pointer-events: none;
}
.site-footer a { color: var(--c-white); }
.site-footer a:hover { color: var(--c-marigold); }

.footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

.footer-heading {
	font-size: 1rem;
	color: var(--c-sky);
	margin-bottom: 0.75rem;
}
.footer-contact { font-style: normal; }
.footer-contact p { margin-bottom: 0.35rem; }

.site-footer .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .menu a {
	display: inline-block;
	padding-block: 0.3rem;
	text-decoration: none;
}
.site-footer .menu a:hover { text-decoration: underline; }

.social-links {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	gap: 1rem;
}
.social-links a { font-weight: 700; }

.footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-block: 1rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.75);
}
.footer-legal p { margin: 0; }

/* ---------- Single game: the box score ---------------------------------------------------------
   The league's printed record of one game, in newspaper order: scoreline,
   line score, batting, pitching. The line score sits in the dark band like
   the scoreboard at the field (spruce-deep slab, marigold rail — same family
   as the outfield-wall CTA). The tables below run denser than the standings
   table on purpose: sports-section agate. No E column — FAMBL doesn't score
   errors. */

/* Same specificity as .section; these come later in the file, so the
   tighter top padding wins after the hero band. */
.game-body { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }

.game-hero .hero-kicker { margin-bottom: 0.75rem; }
.game-hero h1 { margin-bottom: 0.3em; }
.game-hero-note { margin: 0.75rem 0 0; }
/* The note here can be a full sentence (e.g. an "estimated stats" disclaimer),
   so let it wrap to multiple lines at a readable width instead of running off as
   a one-line badge. */
.game-hero-note .badge-note {
	white-space: normal;
	max-width: min(60ch, 100%);
	line-height: 1.5;
	padding: 0.5em 0.85em;
	text-align: left;
}

/* Called-off banner in the game hero: loud, plain-language, stands off the
   dark hero. Red clay for canceled and rained-out games. */
.game-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0.7rem 1rem;
	border-radius: var(--radius);
	max-width: min(60ch, 100%);
	background: var(--c-dirt);
	color: var(--c-white);
}
.game-callout-label {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.game-callout-blurb { line-height: 1.4; }

/* The line score slab: hugs its numbers like a real scoreboard, never
   stretches to fill the band. */
.linescore-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 1.5rem;
	max-width: 100%;
}
.linescore {
	border-collapse: collapse;
	background: var(--c-spruce-deep);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-top: 4px solid var(--c-marigold);
	font-family: var(--font-head);
	font-variant-numeric: tabular-nums;
	color: var(--c-white);
}
.linescore th,
.linescore td {
	padding: 0.45rem 0.6rem;
	text-align: center;
	border: 0;
	min-width: 2em;
}
.linescore thead th,
.linescore thead td {
	color: var(--c-sky);
	font-size: 0.72rem;
	font-weight: 700;
	padding-top: 0.55rem;
	padding-bottom: 0.15rem;
}
.linescore tbody th {
	text-align: left;
	font-weight: 700;
	font-size: 0.95rem;
	padding-right: 1.25rem;
	padding-left: 0.9rem;
	white-space: nowrap;
}
.linescore tbody td { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.linescore .ls-rh {
	border-left: 2px solid rgba(255, 255, 255, 0.28);
	font-weight: 800;
}
.linescore tbody .ls-rh { font-size: 1.05rem; }
.linescore .ls-win { color: var(--c-marigold); }
.linescore tbody tr:last-child th,
.linescore tbody tr:last-child td { padding-bottom: 0.6rem; }

/* Batting / pitching: two-up on desktop, away (bats first) on the left. */
.boxscore-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: start;
	margin-bottom: 0.5rem;
}
@media (min-width: 920px) { .boxscore-grid { grid-template-columns: repeat(2, 1fr); } }

.game-pitching { margin-top: 2rem; }

.box-team .table-scroll { margin-bottom: 0; }

/* Agate: smaller, tighter, numerals right-aligned — box scores are dense
   because that's how you know they're real. */
.box-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	font-size: 0.9rem;
	line-height: 1.4;
}
.box-table caption {
	font-family: var(--font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-ink);
	text-align: left;
	padding: 0 0.25rem 0.5rem;
}
.box-table th,
.box-table td {
	padding: 0.35rem 0.6rem;
	text-align: right;
	border-bottom: 1px solid var(--c-line);
	font-variant-numeric: tabular-nums;
}
.box-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.box-table thead abbr { text-decoration: none; }
.box-table tbody th,
.box-table tfoot th { text-align: left; font-weight: 600; white-space: nowrap; }
/* Phones: shave the cell padding so a full batting line fits without a
   sideways scroll (the .table-scroll wrapper stays as the fallback). */
@media (max-width: 640px) {
	.box-table th,
	.box-table td { padding-inline: 0.35rem; }
	.box-table .col-wide { width: auto; }
}
.box-table .col-wide { text-align: left; width: 44%; }
.box-table tfoot th,
.box-table tfoot td {
	border-top: 2px solid var(--c-spruce);
	border-bottom: 0;
	background: var(--c-mint);
	font-weight: 700;
}

.box-extras {
	margin: 0.5rem 0 0;
	padding-inline: 0.25rem;
	color: var(--c-moss);
	font-size: 0.85rem;
}

/* Play-by-play: the chronological account under the box score. */
.game-plays { margin-top: 2.5rem; }
.pbp-inning { margin-top: 1.25rem; }
.pbp-head {
	font-size: 1rem;
	margin: 0 0 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--c-marigold);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.pbp-team { color: var(--c-moss); font-size: 0.85rem; font-weight: 400; }
.pbp-list { list-style: none; margin: 0; padding: 0; }
.pbp-play {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pbp-play--scored { font-weight: 600; }
.pbp-score {
	font-variant-numeric: tabular-nums;
	color: var(--c-moss);
	white-space: nowrap;
}

.game-backlink { margin-top: 2rem; }

/* Schedule rows: a final with a box score links to its game page. */
.game-matchup a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--c-marigold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.game-matchup a:hover { color: var(--c-marigold-deep); }

/* Win/loss chip on a final game's teams (schedule + team pages). */
.wl {
	display: inline-block;
	margin-left: 0.3em;
	padding: 0 0.36em;
	border-radius: 4px;
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1.55;
	vertical-align: text-top;
}
.wl-w { background: var(--c-spruce); color: var(--c-white); }
.wl-l { background: var(--c-line); color: var(--c-moss); }

/* ---------- Team check-in (/rsvp/) --------------------------------------------------------------
   A utility page for signed-in players: quiet house cards, one clear
   segmented control per game. In = marigold (the answer managers want),
   Maybe = sky, Out = outline. Tap targets stay ≥44px. */

.rsvp-app { max-width: 620px; }
.rsvp-loading { color: var(--c-moss); }
.rsvp-error { color: #8A2A1B; font-weight: 600; }

.rsvp-card { margin-bottom: 1.25rem; }
.rsvp-card h2 { font-size: 1.35rem; }

.rsvp-login-form,
.rsvp-join-form { display: grid; gap: 0.6rem; justify-items: start; margin-top: 0.75rem; }
.rsvp-login-form input,
.rsvp-join-form input { max-width: 320px; }
.rsvp-code-input {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	max-width: 220px;
}

.rsvp-roster {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .rsvp-roster { grid-template-columns: repeat(2, 1fr); } }
.rsvp-player-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-ink);
	text-align: left;
	cursor: pointer;
}
.rsvp-player-btn:hover { border-color: var(--c-spruce); }
.rsvp-player-number { color: var(--c-moss); font-weight: 700; font-size: 0.85rem; }

.rsvp-join-head { margin-top: 0.5rem; }

.rsvp-linklike {
	background: none;
	border: 0;
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	color: var(--c-peak);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.rsvp-linklike:hover { color: var(--c-marigold-deep); }

.rsvp-me { color: var(--c-moss); }
.rsvp-me strong { color: var(--c-ink); }

/* ---- Player dashboard (My FAMBL) ---- */
.rsvp-dash-head { border-top: 4px solid var(--c-marigold); }
.rsvp-dash-kicker {
	margin: 0 0 0.15rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-marigold-deep);
}
.rsvp-dash-name {
	margin: 0 0 0.2rem;
	font-size: 1.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.rsvp-dash-number { font-size: 1rem; font-weight: 600; color: var(--c-moss); }
.rsvp-dash-team { margin: 0 0 0.6rem; color: var(--c-ink); }
.rsvp-dash-team a { font-weight: 700; }

.rsvp-dash-stats h3,
.rsvp-dash-balance h3 { margin: 0 0 0.6rem; }
.rsvp-dash-balance { border-top: 4px solid var(--c-dirt); }
.rsvp-balance-amount {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--c-dirt);
}
.rsvp-stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.rsvp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-mint);
	border-radius: var(--radius);
	padding: 0.6rem 0.25rem;
}
.rsvp-stat-val { font-size: 1.35rem; font-weight: 800; color: var(--c-spruce); line-height: 1.1; }
.rsvp-stat-key {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-top: 0.15rem;
}

.rsvp-stat-label {
	margin: 0.9rem 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.rsvp-stat-label:first-of-type { margin-top: 0.2rem; }

.rsvp-stats-toggle { margin-top: 0.9rem; }

.rsvp-stats-full {
	margin-top: 0.9rem;
	border-top: 1px solid var(--c-line);
	padding-top: 0.9rem;
}
.rsvp-fullgrid-label {
	margin: 0.6rem 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.rsvp-fullgrid-label:first-child { margin-top: 0; }
.rsvp-fullgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 0.4rem;
}
.rsvp-fullstat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-mint);
	border-radius: 6px;
	padding: 0.4rem 0.15rem;
}
.rsvp-fullstat-val { font-size: 1rem; font-weight: 800; color: var(--c-spruce); line-height: 1.1; }
.rsvp-fullstat-key {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-top: 0.1rem;
}

.rsvp-stats-empty { color: var(--c-moss); margin: 0 0 0.9rem; }
.rsvp-stats-sent { color: var(--c-spruce); font-weight: 600; margin: 0.5rem 0 0; }

.rsvp-section-head {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.1rem;
}

/* One game: header, the segmented answer, then who's said what. */
.rsvp-game {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
}
.rsvp-game-head { margin-bottom: 0.75rem; }
.rsvp-game-head p { margin: 0; }
.rsvp-game-when { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-game-matchup {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--c-ink);
}
.rsvp-game-where { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-game-head .badge { margin-top: 0.35rem; }

.rsvp-choice {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}
.rsvp-btn {
	flex: 1 1 0;
	min-width: 90px;
	min-height: 46px;
	padding: 0.55rem 1rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsvp-btn:hover:not(:disabled) { border-color: var(--c-spruce); }
.rsvp-btn:disabled { opacity: 0.45; cursor: default; }
.rsvp-btn--in.is-active { background: var(--c-marigold); border-color: var(--c-marigold); color: var(--c-spruce-deep); }
.rsvp-btn--maybe.is-active { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-spruce-deep); }
.rsvp-btn--out.is-active { background: var(--c-spruce); border-color: var(--c-spruce); color: var(--c-white); }

.rsvp-tally { border-top: 1px solid var(--c-line); padding-top: 0.6rem; }
.rsvp-tally-line { margin: 0 0 0.35rem; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }
.rsvp-tally-row { margin: 0 0 0.2rem; color: var(--c-moss); font-size: 0.9rem; }
.rsvp-tally-row strong { color: var(--c-ink); font-family: var(--font-head); font-size: 0.85rem; }

.rsvp-dash-fillins { border-top: 4px solid var(--c-moss); }
.rsvp-fillin-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.rsvp-fillin-row {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	margin-bottom: 0.75rem;
}
.rsvp-fillin-row p { margin: 0 0 0.25rem; }
.rsvp-fillin-head {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
}
.rsvp-fillin-status { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-claimant { font-weight: 600; color: var(--c-ink); }
.rsvp-fillin-where { color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-notes { font-style: italic; color: var(--c-moss); font-size: 0.9rem; }
.rsvp-fillin-row .btn,
.rsvp-fillin-row .rsvp-linklike { margin-top: 0.4rem; }
.rsvp-fillin-form {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-line);
}
.rsvp-fillin-form select,
.rsvp-fillin-form input { max-width: 320px; }

.is-busy { opacity: 0.6; }

/* ---------- Stats (page + player profiles) ------------------------------------------------------
   Season aggregates from the scoring app's box scores. Leaders read like
   the agate column of a sports page — names and numbers, no big-number
   cards. Full tables reuse the game page's .box-table agate; rows under
   the rate-stat minimums are quieted, not hidden. */

.stats-leaders { margin-bottom: 1.5rem; }
.statlead-group { margin-bottom: 1.5rem; }
.statlead-group h3 { margin-bottom: 0.6rem; }

/* Each category is its own small numbered leaderboard; the cards flow into
   as many columns as the width allows — easier to scan than a run-on line.
   Namespaced .statlead-* so it never collides with the postseason
   .leader-* season-leader cards. */
.statlead-cats {
	display: grid;
	gap: 1rem 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.statlead-cat h4 {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
	margin: 0 0 0.35rem;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid var(--c-marigold);
}
.statlead-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rank;
	font-size: 0.95rem;
}
.statlead-list li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.22rem 0;
	border-bottom: 1px solid var(--c-line);
}
.statlead-list li:last-child { border-bottom: 0; }
.statlead-list li::before {
	counter-increment: rank;
	content: counter(rank) '.';
	flex: 0 0 1.5em;
	color: var(--c-moss);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}
.statlead-name { flex: 1; min-width: 0; }
.statlead-name a { color: var(--c-ink); }
.statlead-name a:hover { color: var(--c-marigold-deep); }
.statlead-val {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
}

.stats-section { margin-top: 2rem; }
.stats-table .stat-team { text-align: left; white-space: nowrap; }
.stats-table .stat-uq th,
.stats-table .stat-uq td,
.stat-uq th,
.stat-uq td { color: var(--c-moss); }
.stat-uq th a { color: var(--c-moss); }

/* Click-to-sort headings (enhanced by assets/js/stats-sort.js). Without the
   script the tables render as normal server-sorted tables; the script wraps
   each heading in this button and toggles aria-sort. */
.stats-table thead th { padding: 0; }
.stats-sort-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3rem;
	width: 100%;
	margin: 0;
	padding: 0.35rem 0.6rem;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
@media (max-width: 640px) {
	.stats-table thead th .stats-sort-btn { padding-inline: 0.35rem; }
}
/* Player and Team read left-to-right; their headings align left to match. */
.stats-table thead th.col-wide .stats-sort-btn,
.stats-table thead th:nth-child(2) .stats-sort-btn { justify-content: flex-start; }
.stats-sort-btn:hover { background: var(--c-spruce-deep); }
.stats-sort-btn:focus-visible { outline: 2px solid var(--c-marigold); outline-offset: -2px; }
/* A faint up/down glyph hints every column is sortable; the active column
   shows a solid arrow for its direction. */
.stats-sort-ind {
	font-size: 0.9em;
	line-height: 1;
}
.stats-sort-ind::before { content: "\21C5"; } /* up-down arrow */
.stats-table thead th[aria-sort="none"] .stats-sort-ind { opacity: 0.4; }
.stats-table thead th[aria-sort="ascending"] .stats-sort-ind::before { content: "\2191"; } /* up */
.stats-table thead th[aria-sort="descending"] .stats-sort-ind::before { content: "\2193"; } /* down */

/* Player profile: game log as a quiet dated list. */
.game-log {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 560px;
}
.game-log li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--c-line);
	font-size: 0.95rem;
}
.game-log li:last-child { border-bottom: 0; }
.game-log-when {
	flex: 0 0 3.2em;
	color: var(--c-moss);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}
.game-log-opp { font-weight: 600; white-space: nowrap; }
.game-log-line { color: var(--c-ink); }

/* ---------- Sticky mobile CTA ------------------------------------------------------------------ */
.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	justify-content: center;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(13, 36, 31, 0.97);
	box-shadow: 0 -2px 12px rgba(13, 36, 31, 0.4);
}
.sticky-cta .btn {
	width: 100%;
	max-width: 420px;
}
body.has-sticky-cta { padding-bottom: 4.5rem; }

@media (min-width: 920px) {
	.sticky-cta { display: none; }
	body.has-sticky-cta { padding-bottom: 0; }
}

/* ---------- Manager player pool (/player-pool/) -------------------------------------------------
   Managers open a magic link and see this season's sign-ups — available up top,
   claimed below and quieted. Same house-card look as the check-in page. */
.pool-app { max-width: 720px; }
.pool-head { font-size: 1.2rem; margin: 1.75rem 0 0.75rem; }
.pool-list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin-bottom: 0.5rem;
}
@media (min-width: 620px) { .pool-list { grid-template-columns: repeat(2, 1fr); } }

.pool-player {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1rem 1.1rem;
}
.pool-player.is-claimed { background: var(--c-mint); box-shadow: none; opacity: 0.9; }
.pool-player-name { margin: 0; font-size: 1.1rem; }
.pool-player-contact { margin: 0; font-size: 0.95rem; word-break: break-word; }
.pool-player-fields {
	list-style: none;
	margin: 0.1rem 0 0;
	padding: 0;
	color: var(--c-moss);
	font-size: 0.9rem;
}
.pool-player-fields li { margin-bottom: 0.1rem; }
.pool-player-fields strong { color: var(--c-ink); font-family: var(--font-head); font-size: 0.82rem; }

.pool-player-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.35rem;
}
.pool-player-actions .btn { padding: 0.5rem 1.1rem; min-height: 40px; }
.pool-claimed-by {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--c-spruce);
}

/* ---------- Umpire assignments (/umpire/) -------------------------------------------------------
   Umpires take the plate or bases on upcoming games. Reuses the check-in game
   card; each game shows two slots. Games short an umpire get a warning-track rail. */
.ump-app { max-width: 620px; }
.ump-game {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
}
.ump-game.needs-ump { box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow); }
.ump-game .rsvp-game-head { margin-bottom: 0.5rem; }
.ump-slot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-top: 1px solid var(--c-line);
}
.ump-slot-label {
	flex: 0 0 4.5em;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.ump-slot-who { font-weight: 600; color: var(--c-ink); }
.ump-slot .btn { margin-left: auto; padding: 0.45rem 1rem; min-height: 40px; }

/* ---------- League HQ (/hq/) --------------------------------------------------------------------
   Commissioner view + manager fill-in RSVPs. Reuses the check-in game card;
   adds compact per-player answer rows (name, status pill, mini In/Maybe/Out)
   and the links vault (collapsed team cards full of copy buttons). Games
   short an umpire get the same warning-track rail as the umpire portal. */

.hq-app { max-width: 720px; }

.hq-section-head {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
	color: var(--c-ink);
}

.hq-attn {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow);
}
.hq-attn li { margin: 0.2rem 0; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }

.hq-game.needs-ump { box-shadow: inset 4px 0 0 var(--c-dirt), var(--shadow); }

.hq-ump-line { margin: 0 0 0.5rem; font-size: 0.9rem; }
.hq-ump-label {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.hq-ump-who { font-weight: 600; color: var(--c-ink); }
.hq-ump-open { font-weight: 700; color: #8A2A1B; text-transform: uppercase; font-size: 0.85rem; }

.hq-details { border-top: 1px solid var(--c-line); padding: 0.4rem 0; }
.hq-side-sum {
	cursor: pointer;
	padding: 0.35rem 0;
	font-size: 0.95rem;
	color: var(--c-moss);
}
.hq-side-sum strong { color: var(--c-ink); font-family: var(--font-head); }
.hq-side-sum:hover { color: var(--c-spruce); }

.hq-tally-line { margin: 0 0 0.4rem; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; }

.hq-player-list { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; }
.hq-player-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	padding: 0.4rem 0;
	border-top: 1px solid var(--c-line);
}
.hq-player-name { flex: 1 1 10em; min-width: 8em; font-weight: 600; color: var(--c-ink); }

.hq-pill {
	flex: 0 0 auto;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hq-pill--in { background: var(--c-marigold); color: var(--c-spruce-deep); }
.hq-pill--maybe { background: var(--c-sky); color: var(--c-spruce-deep); }
.hq-pill--out { background: var(--c-spruce); color: var(--c-white); }
.hq-pill--none { background: var(--c-mint); color: var(--c-moss); }

.hq-set { display: inline-flex; gap: 0.3rem; }
.hq-set-btn {
	min-height: 36px;
	padding: 0.3rem 0.7rem;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: 6px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hq-set-btn:hover { border-color: var(--c-spruce); }
.hq-set-btn--in.is-active { background: var(--c-marigold); border-color: var(--c-marigold); color: var(--c-spruce-deep); }
.hq-set-btn--maybe.is-active { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-spruce-deep); }
.hq-set-btn--out.is-active { background: var(--c-spruce); border-color: var(--c-spruce); color: var(--c-white); }

/* Links vault */
.hq-links-card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.6rem 1.25rem;
	margin-bottom: 0.75rem;
}
.hq-linkrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0.5rem 0;
}
.hq-link-label {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.hq-link-note { color: var(--c-moss); font-size: 0.9rem; overflow-wrap: anywhere; }
.hq-alert { color: #8A2A1B; font-weight: 600; }
.hq-code {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.18em;
	color: var(--c-ink);
}
.hq-copy { min-height: 36px; padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* ---------- Postseason: bracket, champions, leaders --------------------------------- */
.postseason {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 3px solid var(--c-marigold);
}
.postseason > h2 {
	font-family: var(--font-head);
	font-size: 1.6rem;
	color: var(--c-ink);
	margin: 0 0 1.25rem;
}
.postseason h3 {
	font-family: var(--font-head);
	font-size: 1.15rem;
	color: var(--c-spruce);
	margin: 0 0 0.25rem;
}
/* Bracket at the top of /schedule/ during the playoffs: the gold rule flips to
   the underside so it separates the bracket from the game lists below instead
   of hanging under the page header. */
.postseason--bracket-only {
	margin-top: 1.5rem;
	padding-top: 0;
	padding-bottom: 2rem;
	border-top: 0;
	border-bottom: 3px solid var(--c-marigold);
}
/* Up here "Postseason" sits beside the page's other section headings
   ("Upcoming games", "Regular season"), so it takes their size rather than the
   smaller one it wore as a bottom-of-page band. */
.postseason--bracket-only > h2 { font-size: 2rem; }
.postseason--bracket-only .postseason-bracket:last-child { margin-bottom: 0; }

/* Bracket */
.postseason-bracket { margin-bottom: 2rem; }
.bracket-head { margin-bottom: 1rem; }
.bracket-note { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--c-moss); font-style: italic; }
.bracket-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
}
.bracket-round { flex: 1 1 260px; min-width: 240px; }
.bracket-round-label {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin-bottom: 0.5rem;
}
.bracket-round--semis .bracket-matchup + .bracket-matchup { margin-top: 1rem; }

.bracket-matchup { position: relative; }
.bracket-matchup-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-moss);
	margin-bottom: 0.3rem;
}
.bracket-card {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.bracket-team {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
}
.bracket-team + .bracket-team { border-top: 1px solid var(--c-line); }
.bracket-seed {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--c-mint);
	color: var(--c-moss);
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.bracket-name {
	flex: 1 1 auto;
	color: var(--c-ink);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bracket-name:hover { color: var(--c-marigold-deep); }
.bracket-score {
	flex: none;
	min-width: 1.5rem;
	text-align: right;
	font-family: var(--font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}
.bracket-team.is-winner { background: color-mix(in srgb, var(--c-marigold) 12%, var(--c-white)); }
.bracket-team.is-winner .bracket-seed { background: var(--c-marigold); color: var(--c-spruce-deep); }
.bracket-team.is-winner .bracket-name { color: var(--c-spruce); }
.bracket-team--tbd { color: var(--c-moss); }
.bracket-team--tbd .bracket-name { color: var(--c-moss); font-weight: 500; }

.bracket-status { display: inline-block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--c-moss); }
.bracket-status a { color: var(--c-moss); }
.bracket-status.is-final {
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-spruce);
}
.bracket-round--final .bracket-card { border-color: var(--c-marigold); }
.bracket-champion {
	margin-top: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: var(--c-spruce);
	color: var(--c-white);
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 700;
}
.bracket-champion a { color: var(--c-foul); text-decoration: none; }
.bracket-champion a:hover { text-decoration: underline; }
.bracket-trophy { margin-right: 0.15rem; }
.bracket-third { margin-top: 1.5rem; max-width: 300px; }

/* Champions roll */
.postseason-champions { margin-bottom: 2rem; }
.champions-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-line);
}
.champions-table th,
.champions-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--c-line);
}
.champions-table thead th {
	background: var(--c-spruce);
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.champions-table tbody th { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.champions-table tbody tr:nth-child(even) { background: var(--c-mint); }
.champions-table a { color: var(--c-ink); text-decoration: none; font-weight: 600; }
.champions-table a:hover { color: var(--c-marigold-deep); }
.champ-cell { font-weight: 700; }
.champ-trophy { margin-right: 0.15rem; }
.champ-none { color: var(--c-moss); }

/* Season leaders strip */
.postseason-leaders { margin-bottom: 1rem; }
.leader-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.leader-chip {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 0.9rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-marigold);
	border-radius: var(--radius);
	min-width: 120px;
}
.leader-cat {
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.leader-name { font-weight: 600; color: var(--c-ink); }
.leader-name a { color: var(--c-ink); text-decoration: none; }
.leader-name a:hover { color: var(--c-marigold-deep); }
.leader-val { font-family: var(--font-head); font-weight: 700; color: var(--c-spruce); font-variant-numeric: tabular-nums; }
.leaders-more { margin: 0.75rem 0 0; font-size: 0.9rem; }
.leader-groups { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.leader-group-title {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-spruce);
	margin: 0 0 0.4rem;
}
.leader-group .leader-chips { margin-top: 0; }

@media (max-width: 640px) {
	.bracket-grid { flex-direction: column; align-items: stretch; gap: 1.25rem; }
	.bracket-round { min-width: 0; }
}

/* ---------- Documents library ------------------------------------------------------ */
.doc-group { margin-bottom: 2rem; }
.doc-group-title {
	font-family: var(--font-head);
	font-size: 1.15rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--c-marigold);
}
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.doc-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--c-ink);
	transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.doc-link:hover, .doc-link:focus {
	border-color: var(--c-marigold);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(20, 52, 46, 0.12);
	outline: none;
}
.doc-icon { flex: none; font-size: 1.4rem; line-height: 1; }
.doc-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.doc-name { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.doc-desc { font-size: 0.9rem; color: var(--c-moss); }
.doc-hint {
	flex: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-moss);
	background: var(--c-mint);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
}
.doc-link:hover .doc-name { color: var(--c-marigold-deep); }

/* ---------- Divisions + waitlist --------------------------------------------------- */
.division-pills { margin-top: -0.5rem; }

.waitlist-band {
	background: var(--c-mint);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-marigold);
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0 0;
}
.waitlist-band > h2 {
	font-family: var(--font-head);
	font-size: 1.4rem;
	color: var(--c-ink);
	margin: 0 0 0.4rem;
}
.waitlist-band > p { margin: 0 0 1rem; color: var(--c-moss); max-width: 46ch; }

.waitlist-form { max-width: 520px; }
.waitlist-field { margin: 0 0 0.9rem; }
.waitlist-field label {
	display: block;
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 0.25rem;
}
.waitlist-field input,
.waitlist-field select,
.waitlist-field textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-white);
	font: inherit;
	color: var(--c-ink);
}
.waitlist-field input:focus,
.waitlist-field select:focus,
.waitlist-field textarea:focus {
	outline: none;
	border-color: var(--c-marigold);
	box-shadow: 0 0 0 3px rgba(229, 163, 61, 0.25);
}
.waitlist-field--split { display: flex; gap: 0.9rem; }
.waitlist-field--split > span { flex: 1 1 0; }
.waitlist-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 520px) {
	.waitlist-field--split { flex-direction: column; gap: 0; }
	.waitlist-field--split > span { margin-bottom: 0.9rem; }
}

/* ---------- Awards: page cards + badge chips --------------------------------------- */
.award-week { margin-bottom: 2rem; }
.award-week-title {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--c-marigold);
}
.award-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.award-card {
	position: relative;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-top: 3px solid var(--award-gold);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: var(--shadow);
}
.award-card--pitcher { border-top-color: var(--award-blue); }
.award-card--starter { border-top-color: var(--award-blue); }
.award-card--reliever { border-top-color: var(--award-green); }
/* Weekly-award icon tile (approved icon design handoff, 2026-07): custom
   home-plate (hitter) / baseball (pitcher) SVG in a tinted rounded tile. The
   Starter (blue) and Reliever (green) share the baseball glyph, split by tile
   color. */
.award-icon {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.award-card--hitter  .award-icon { background: var(--award-gold-tint); color: var(--award-gold); }
.award-card--pitcher .award-icon,
.award-card--starter .award-icon { background: var(--award-blue-tint); color: var(--award-blue); }
.award-card--reliever .award-icon { background: var(--award-green-tint); color: var(--award-green); }
.award-type {
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
	margin: 0.35rem 0 0.15rem;
}
.award-card--hitter  .award-type { color: var(--award-gold-deep); }
.award-card--pitcher .award-type,
.award-card--starter .award-type { color: var(--award-blue-deep); }
.award-card--reliever .award-type { color: var(--award-green-deep); }
.award-player {
	font-family: var(--font-head);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-ink);
	line-height: 1.15;
}
.award-player a { color: inherit; text-decoration: none; }
.award-player a:hover { color: var(--c-marigold-deep); }
.award-card--hitter  .award-player,
.award-card--hitter  .award-player a { color: var(--award-gold); }
.award-team {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--c-moss);
	margin-top: 0.15rem;
}
.award-rule { height: 1px; background: var(--c-line); margin: 0.9rem 0 0.85rem; }
.award-line {
	margin-top: 0.6rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}

/* Homepage "Around the league": Players of the Week + season leaders */
.home-highlights .home-awards { margin-bottom: 1.5rem; }
.home-highlights-sub {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}
/* The "Players of the Week" heading links to the full /awards/ listing. Inherits
   the heading color with a soft persistent underline so it reads as a link, and
   turns marigold on hover/focus. */
.home-awards-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 3px;
}
.home-awards-link:hover,
.home-awards-link:focus-visible {
	color: var(--c-marigold-deep);
	text-decoration-color: currentColor;
}
.home-awards-week {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-moss);
}
.home-highlights .postseason-leaders { margin-bottom: 0; }
.home-highlights .postseason-leaders h3 {
	font-family: var(--font-head);
	font-size: 1.1rem;
	color: var(--c-spruce);
	margin: 0 0 0.25rem;
}

/* Season-leader per-group accent — homepage module only (Schedule/Standings
   keep the default marigold). The award-card icon design is now global (above). */
.home-highlights .leader-group--batting  .leader-chip { border-left-color: var(--award-gold); }
.home-highlights .leader-group--pitching .leader-chip { border-left-color: var(--award-blue); }

/* Badge chips — shared by My FAMBL dashboard + player profiles. */
.fambl-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fambl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	background: color-mix(in srgb, var(--c-marigold) 14%, var(--c-white));
	border: 1px solid var(--c-marigold);
	border-radius: 999px;
	font-size: 0.82rem;
	color: var(--c-ink);
	line-height: 1.2;
}
.fambl-badge--pitcher,
.fambl-badge--starter {
	background: color-mix(in srgb, var(--c-sky) 18%, var(--c-white));
	border-color: var(--c-sky);
}
.fambl-badge--reliever {
	background: color-mix(in srgb, var(--award-green) 16%, var(--c-white));
	border-color: var(--award-green);
}
.fambl-badge-icon { display: inline-flex; color: var(--award-gold); }
.fambl-badge-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.fambl-badge--pitcher .fambl-badge-icon,
.fambl-badge--starter .fambl-badge-icon { color: var(--award-blue); }
.fambl-badge--reliever .fambl-badge-icon { color: var(--award-green); }
.fambl-badge-week { color: var(--c-moss); }

/* Footer quick links (Awards / Documents) above the copyright line. */
.footer-legal .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 0.5rem;
	font-weight: 600;
}
.footer-legal .footer-links a { color: var(--c-white); text-decoration: none; }
.footer-legal .footer-links a:hover { color: var(--c-marigold); text-decoration: underline; }

/* ---------- Rainout makeup tags + schedule key ------------------------------------- */
/* Pending = the actionable state (still needs rescheduling) — marigold to stand out. */
.badge-pending {
	background: var(--c-marigold);
	color: var(--c-spruce-deep);
	font-weight: 700;
}
/* Made up = resolved; it's a link to the makeup game. */
.badge-makeup {
	background: var(--c-mint);
	color: var(--c-spruce);
	border: 1px solid var(--c-sky);
	text-decoration: none;
}
a.badge-makeup:hover,
a.badge-makeup:focus { background: var(--c-sky); color: var(--c-spruce-deep); }

/* A rainout still awaiting a makeup gets a subtle marigold left-edge so it catches
   the eye when scanning the schedule. */
.game-row--rainout,
.game-row--canceled { position: relative; }
.game-row--rainout:has(.badge-pending),
.game-row--canceled:has(.badge-pending) { box-shadow: inset 3px 0 0 var(--c-marigold); }

.schedule-key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.1rem;
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--c-moss);
}
.schedule-key-label { font-weight: 700; color: var(--c-ink); }
.schedule-key-item { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ===== LIVE game banner (homepage) + live game view (/live/) ============== */
/* Homepage hero band, revealed by assets/js/live.js while a game is in progress. */
.fambl-live-banner[hidden] { display: none; }
.fambl-live-banner {
	background: var(--c-spruce);
	color: var(--c-white);
	border-bottom: 4px solid var(--c-marigold);
}
.fambl-live-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.1rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.7rem 1.1rem;
	color: var(--c-white);
	text-decoration: none;
}
.fambl-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--c-sign-red);
	color: var(--c-white);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}
.fambl-live-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-white);
	animation: fambl-live-pulse 1.4s ease-in-out infinite;
}
@keyframes fambl-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .fambl-live-badge::before { animation: none; } }
.fambl-live-score { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.fambl-live-team { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.fambl-live-name { font-size: 1rem; }
.fambl-live-runs {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-marigold);
	min-width: 1.2ch;
	text-align: center;
}
.fambl-live-vs { opacity: 0.6; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.fambl-live-state { font-size: 0.9rem; opacity: 0.92; }
.fambl-live-cta { margin-left: auto; font-weight: 700; color: var(--c-marigold); white-space: nowrap; }
.fambl-live-more {
	display: block;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.1rem 0.55rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	text-decoration: none;
}
.fambl-live-more:hover { color: var(--c-white); text-decoration: underline; }
@media (max-width: 560px) {
	.fambl-live-cta { margin-left: 0; width: 100%; }
}

/* ---------- Game-day banner (postseason slate, homepage) --------------------
   Marigold rather than the live banner's spruce, so that on a championship
   afternoon the two bands read as different things stacked on each other:
   what's on today, and what's happening right now. */
.fambl-gameday[hidden] { display: none; }
.fambl-gameday {
	background: var(--c-marigold);
	color: var(--c-ink);
	border-bottom: 4px solid var(--c-spruce);
}
.fambl-gameday-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.85rem 1.1rem 0.95rem;
}
.fambl-gameday-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
}
.fambl-gameday-badge {
	background: var(--c-spruce);
	color: var(--c-white);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}
.fambl-gameday-title {
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 800;
}
.fambl-gameday-games {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fambl-gameday-game {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}
.fambl-gameday-round {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-spruce-deep);
}
.fambl-gameday-time { font-weight: 800; }
.fambl-gameday-teams { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid rgba(35, 49, 43, 0.35); }
.fambl-gameday-teams:hover { color: var(--c-spruce-deep); border-bottom-color: var(--c-spruce-deep); }
.fambl-gameday-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
}
.fambl-gameday-where { color: var(--c-spruce-deep); }
.fambl-gameday-cta { margin-left: auto; font-weight: 700; color: var(--c-spruce-deep); white-space: nowrap; }
@media (max-width: 560px) {
	.fambl-gameday-inner { padding: 0.65rem 1rem 0.7rem; }
	.fambl-gameday-head { margin-bottom: 0.4rem; }
	.fambl-gameday-title { font-size: 1.05rem; }
	/* One line per game. The type shrinks just enough that the longest matchup
	   ("Rockies at Cannon Ballers") clears a 360px screen — below that it wraps
	   to two lines rather than overflowing. Left at the desktop scale the banner
	   ate a quarter of a phone screen before the page even started. */
	.fambl-gameday-games { gap: 0.35rem; flex-direction: column; }
	.fambl-gameday-game { gap: 0.4rem; align-items: baseline; }
	.fambl-gameday-round { font-size: 0.65rem; }
	.fambl-gameday-time { font-size: 0.88rem; }
	.fambl-gameday-teams { font-size: 0.88rem; }
	.fambl-gameday-foot { margin-top: 0.45rem; font-size: 0.8rem; }
	.fambl-gameday-cta { margin-left: 0; }
}

/* Homepage bracket: the shared block, minus the in-page section chrome. */
.home-bracket .postseason-bracket { margin-bottom: 0; }
.home-bracket .bracket-head h3 {
	font-family: var(--font-head);
	font-size: 1.15rem;
	color: var(--c-spruce);
	margin: 0 0 0.25rem;
}
.home-bracket .fine-print { margin-top: 1.25rem; }
/* The bracket lands between two sections that don't alternate around it, so it
   carries the same gold rule that divides the bracket from what follows it on
   /schedule/ and /standings/ rather than leaning on a background change. */
.home-bracket .container {
	border-bottom: 3px solid var(--c-marigold);
	padding-bottom: 2.25rem;
}

/* The /live/ running-game view. */
.fambl-livepage { padding-top: 1.5rem; }
.fambl-live-loading { color: var(--c-moss); }
.fambl-lg-scorebug {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.4rem;
	background: var(--c-spruce);
	color: var(--c-white);
	border-radius: 12px;
	border-bottom: 4px solid var(--c-marigold);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
}
.fambl-lg-team { display: flex; align-items: baseline; gap: 0.6rem; }
.fambl-lg-name { font-size: 1.15rem; font-weight: 700; }
.fambl-lg-runs { font-size: 1.9rem; font-weight: 800; color: var(--c-marigold); min-width: 1.4ch; }
.fambl-lg-state { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.fambl-lg-live {
	background: var(--c-sign-red);
	color: var(--c-white);
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
}
.fambl-lg-statetext { font-weight: 700; }
.fambl-lg-state.is-final .fambl-lg-statetext { color: var(--c-marigold); text-transform: uppercase; letter-spacing: 0.04em; }

/* Signature: a broadcast baseball diamond centered in the panel's open middle.
   Occupied bases light marigold; the out count shows as pips beneath it. */
.fambl-lg-situation {
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
}
.fambl-diamond-wrap { width: clamp(116px, 44%, 148px); }
.fambl-diamond { display: block; width: 100%; height: auto; overflow: visible; }
.fambl-diamond-path {
	fill: rgba(166, 70, 42, 0.06); /* faint warning-track clay infield */
	stroke: rgba(20, 52, 46, 0.20);
	stroke-width: 2;
	stroke-linejoin: round;
}
.fambl-base {
	fill: var(--c-white);
	stroke: rgba(20, 52, 46, 0.32);
	stroke-width: 2.2;
	transition: fill 0.25s ease, stroke 0.25s ease;
}
.fambl-base.is-on {
	fill: var(--c-marigold);
	stroke: var(--c-marigold-deep);
	filter: drop-shadow(0 1px 3px rgba(185, 127, 36, 0.5));
}
.fambl-home { fill: rgba(20, 52, 46, 0.30); }
.fambl-outs { display: flex; gap: 0.4rem; }
.fambl-out {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.6px solid rgba(20, 52, 46, 0.3);
}
.fambl-out.is-out { background: var(--c-spruce); border-color: var(--c-spruce); }

/* /live/ index: a scoreboard of every in-progress game (no ?g= selected). */
.fambl-live-index-title {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 1rem;
}
.fambl-live-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}
.fambl-live-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-marigold);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.fambl-live-card:hover,
.fambl-live-card:focus-visible {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}
.fambl-live-card-team {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
}
.fambl-live-card-name { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--c-ink); }
.fambl-live-card-runs {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--c-marigold-deep);
	font-variant-numeric: tabular-nums;
}
.fambl-live-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	border-top: 1px solid var(--c-line);
	padding-top: 0.7rem;
}
.fambl-live-card-state { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--c-moss); font-size: 0.9rem; }
.fambl-live-card-badge {
	background: var(--c-sign-red);
	color: var(--c-white);
	font-weight: 800;
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	padding: 0.15rem 0.42rem;
	border-radius: 999px;
}
.fambl-live-card-cta { font-family: var(--font-head); font-weight: 800; color: var(--c-spruce); font-size: 0.85rem; }
/* Box score + live matchup sit side by side on wide screens, stacked on phones. */
.fambl-lg-boxrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
}
.fambl-lg-boxrow .linescore-scroll { flex: 1 1 20rem; }
.fambl-lg-matchup {
	flex: 1 1 16rem;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.9rem;
	background: var(--c-mint);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-marigold);
	border-radius: 12px;
	padding: 1.15rem 1.2rem;
}
.fambl-lg-mu-block { display: flex; flex-direction: column; gap: 0.15rem; }
.fambl-lg-mu-label {
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-moss);
}
.fambl-lg-mu-name {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 3.6vw, 1.95rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}
.fambl-lg-mu-sub { font-size: 0.9rem; font-weight: 700; color: var(--c-moss); }
.fambl-lg-mu-statline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 0.35rem;
}
.fambl-lg-mu-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.fambl-lg-mu-statval {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--c-marigold-deep);
	font-variant-numeric: tabular-nums;
}
.fambl-lg-mu-statlbl {
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-moss);
}

/* Flip-card ball-strike count. Each tile flips in when its value changes. */
.fambl-count { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; font-size: 1.15rem; perspective: 300px; }
.fambl-count-sep { color: var(--c-moss); font-weight: 800; }
.fambl-flip {
	display: inline-block;
	min-width: 1.65rem;
	padding: 0.2rem 0.4rem;
	text-align: center;
	background: var(--c-spruce);
	color: var(--c-marigold);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	border-radius: 6px;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
	transform-origin: center top;
	backface-visibility: hidden;
}
.fambl-flip.is-flip { animation: fambl-flip-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes fambl-flip-in {
	0% { transform: rotateX(-90deg); opacity: 0; }
	55% { transform: rotateX(14deg); opacity: 1; }
	100% { transform: rotateX(0); opacity: 1; }
}

/* Broadcast call-out for the newest play (SINGLE, HOME RUN, STRIKEOUT, ...). */
#fambl-callout-host {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 16vh;
	pointer-events: none;
	z-index: 1200;
}
.fambl-callout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.85rem 1.8rem;
	border-radius: 14px;
	background: var(--c-spruce);
	color: var(--c-white);
	border-bottom: 5px solid var(--c-marigold);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
	text-align: center;
	animation: fambl-callout-pop 2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.fambl-callout-label {
	font-size: clamp(1.6rem, 6vw, 2.6rem);
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1;
}
.fambl-callout-sub { font-size: 0.95rem; font-weight: 700; opacity: 0.85; }
.fambl-callout-k {
	font-size: clamp(2.6rem, 10vw, 4.2rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: 0.02em;
}
.fambl-callout-k.is-looking { display: inline-block; transform: scaleX(-1); } /* backwards K = called strike */
.fambl-callout--strikeout { background: var(--c-sign-red); border-bottom-color: #7d1f16; }
.fambl-callout--out { background: var(--c-moss); border-bottom-color: var(--c-spruce-deep); }
.fambl-callout--walk { background: var(--c-sign-blue); border-bottom-color: #1c4f82; }
.fambl-callout--hbp { background: var(--c-dirt); border-bottom-color: #6f2c19; }
.fambl-callout--homerun {
	background: linear-gradient(135deg, var(--c-marigold), var(--c-marigold-deep));
	color: var(--c-spruce-deep);
	border-bottom-color: var(--c-spruce);
	animation: fambl-callout-hr 2.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.fambl-callout--homerun .fambl-callout-label { font-size: clamp(2rem, 8vw, 3.4rem); }
@keyframes fambl-callout-pop {
	0% { transform: scale(0.6) translateY(-8px); opacity: 0; }
	10% { transform: scale(1.06); opacity: 1; }
	18% { transform: scale(1); }
	80% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.03) translateY(-6px); opacity: 0; }
}
@keyframes fambl-callout-hr {
	0% { transform: scale(0.5) rotate(-6deg); opacity: 0; }
	10% { transform: scale(1.12) rotate(3deg); opacity: 1; }
	22% { transform: scale(1) rotate(-2deg); }
	34% { transform: rotate(1deg); }
	44% { transform: rotate(0); }
	82% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.05) translateY(-8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fambl-flip.is-flip { animation: none; }
	.fambl-callout,
	.fambl-callout--homerun { animation: fambl-callout-fade 2s linear forwards; }
	@keyframes fambl-callout-fade {
		0% { opacity: 0; }
		8% { opacity: 1; }
		85% { opacity: 1; }
		100% { opacity: 0; }
	}
}

.fambl-lg-plays { margin-top: 1.6rem; }