/*
 * Sunday Night Winner League — design system
 *
 * Dark stadium-night theme: Sunday night kickoff under the lights. Gold is
 * reserved for glory (trophies, wins), crimson for shame, turf green for
 * action and links. Hive amber is a *mild* honeycomb accent, not a
 * redesign — see .hex-accent. Every page on the site loads this one file;
 * this is where the whole site's look is centralized.
 */

:root {
	/* Design-language tokens (binding — see plan Global Constraints) */
	--bg: #0B1220;
	--panel: #131C2E;
	--panel-raised: #182545;
	--text: #F4F1E8;
	--turf: #2FBF71;
	--gold: #F5B301;
	--hive: #FFB300;
	--shame: #C0392B;

	--border: rgba(244, 241, 232, 0.10);
	--border-strong: rgba(244, 241, 232, 0.18);
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

	--radius: 10px;
	--radius-sm: 6px;
	--max-width: 1100px;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	color-scheme: dark;
}

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

html, body {
	margin: 0;
	padding: 0;
	/* No horizontal scroll anywhere on the site, ever. */
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* Gridiron texture: faint yard lines the whole site sits on — a static
	   texture, not an animation, so it needs no prefers-reduced-motion
	   handling. Kept extremely subtle (2.5% opacity) — accent, not turf. */
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(244, 241, 232, 0.025) 0px,
		rgba(244, 241, 232, 0.025) 1px,
		transparent 1px,
		transparent 80px
	);
}

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

a {
	color: var(--turf);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--gold);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Uppercase, bold, letterspaced headings — no webfonts, system-ui only. */
h1, h2, h3, h4 {
	margin: 0 0 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Header + mild hive/honeycomb branding */
.site-header {
	position: relative;
	overflow: hidden;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

/* Tileable honeycomb outline, very low opacity — "mild" branding per spec:
   an accent motif, not a redesign. Colored with --hive (amber). */
.hex-accent {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* The league's hive-buzz mark, ghosted large in the header — the source
   image is black line-art on white, so `invert` flips it to pale line-art
   on near-black, which merges softly into --panel at this opacity. Clipped
   by .site-header's own `overflow: hidden`, no extra containment needed. */
.hex-accent-mark {
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%);
	width: 220px;
	height: 220px;
	opacity: 0.08;
	filter: invert(1);
	pointer-events: none;
}

.header-inner {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
}

.brand:hover,
.brand:focus-visible {
	color: var(--hive);
	text-decoration: none;
}

.brand-mark {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	flex: none;
}

/* Buzzing hive — logo marks give a little wiggle on hover. Gated under
   prefers-reduced-motion below. */
@keyframes bee-wiggle {
	0%, 100% { transform: rotate(0deg) translateX(0); }
	20%      { transform: rotate(-8deg) translateX(-1px); }
	40%      { transform: rotate(6deg) translateX(1px); }
	60%      { transform: rotate(-5deg) translateX(-1px); }
	80%      { transform: rotate(3deg) translateX(1px); }
}

.brand-mark:hover,
.footer-mark:hover,
.home-hero-mark:hover {
	animation: bee-wiggle 0.5s ease-in-out;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.site-nav a {
	color: var(--text);
	opacity: 0.68;
	text-decoration: none;
	letter-spacing: 0.01em;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	opacity: 1;
	color: var(--text);
	background: rgba(244, 241, 232, 0.08);
	text-decoration: none;
}

/* current section */
.site-nav a.nav-active {
	opacity: 1;
	color: #0B1220;
	background: var(--me-accent, var(--hive));
}

/* ESPN is a distinct call-to-action, always lit */
.site-nav a.nav-espn {
	opacity: 1;
	color: #06121f;
	font-weight: 800;
	background: linear-gradient(135deg, var(--turf), #1d8f57);
	box-shadow: 0 4px 12px -4px var(--turf);
}
.site-nav a.nav-espn:hover,
.site-nav a.nav-espn:focus-visible {
	filter: brightness(1.08);
	background: linear-gradient(135deg, var(--turf), #1d8f57);
	color: #06121f;
}

.nav-sep {
	color: var(--hive);
	opacity: 0.4;
	margin: 0 0.6rem;
	font-weight: 700;
}

/* Page layout */
.site-main {
	max-width: var(--max-width);
	margin: 2rem auto;
	padding: 0 1.25rem;
	width: 100%;
}

/* .card — the base panel component every section sits in. */
.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow);
}

.card:last-child { margin-bottom: 0; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

/* .plaque — engraved record cards for the Wall of Glory / trophy case. */
.plaque {
	position: relative;
	background:
		linear-gradient(155deg, rgba(245, 179, 1, 0.14), rgba(245, 179, 1, 0) 60%),
		var(--panel-raised);
	border: 1px solid rgba(245, 179, 1, 0.35);
	border-left: 5px solid rgba(245, 179, 1, 0.6);
	border-radius: var(--radius);
	padding: 1.15rem 1.3rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), var(--shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Every plaque lifts on hover except the shame ones, which have their own
   wobble (below) — a translate here would fight that animation. */
.plaque:not(.plaque--shame):hover {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 14px 32px rgba(0, 0, 0, 0.55);
}

.plaque-title {
	margin: 0 0 0.35rem;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
	font-size: 0.85rem;
}

.plaque-holder {
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1.15;
}

.plaque-detail {
	color: var(--text);
	opacity: 0.8;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

.plaque-year {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* A photo tagged with the plaque's holder + record year, laid low-opacity
   behind the plaque's text (never in front of it — see the negative
   z-index, which paints below the plaque's normal-flow content within its
   own `.plaque { position: relative }` stacking context). */
.plaque-photo-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	pointer-events: none;
}

/* .plaque--shame — Wall of Shame: washed-out-polaroid treatment. Crimson,
   desaturated with a sepia cast, tilted 1deg, an aged warm-toned border ring
   in place of the base plaque's neutral one. */
.plaque--shame {
	background:
		repeating-linear-gradient(-45deg, rgba(192, 57, 43, 0.10) 0 12px, transparent 12px 24px),
		linear-gradient(155deg, rgba(192, 57, 43, 0.22), rgba(192, 57, 43, 0) 60%),
		var(--panel-raised);
	border-color: rgba(192, 57, 43, 0.5);
	border-left-color: var(--shame);
	box-shadow: inset 0 0 0 1px rgba(160, 120, 80, 0.28), var(--shadow);
	transform: rotate(-1deg);
	filter: saturate(0.7) sepia(0.18);
}

.plaque--shame .plaque-title {
	color: var(--shame);
}

/* A skull stamps the shame; the title reads like a rap sheet. */
.plaque--shame .plaque-title::before {
	content: "\1F480\00A0"; /* 💀 + nbsp */
}

/* A sad wobble on hover — gated under prefers-reduced-motion below. */
@keyframes shame-wobble {
	0%, 100% { transform: rotate(-1deg); }
	25%      { transform: rotate(-3.5deg); }
	50%      { transform: rotate(1.5deg); }
	75%      { transform: rotate(-2.5deg); }
}

.plaque--shame:hover {
	animation: shame-wobble 0.5s ease-in-out;
}

/* Stadium-scoreboard tables: tabular numerals, uppercase headers. */
table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th, td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

th {
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	font-weight: 700;
	border-bottom: 2px solid var(--border-strong);
	white-space: nowrap;
}

tbody tr {
	transition: background-color 0.12s ease;
}

tbody tr:hover {
	background: rgba(255, 255, 255, 0.035);
}

tbody tr:last-child td {
	border-bottom: none;
}

td.num, th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Scoreboard energy: score numerals glow like an LED readout. */
.led-score {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var(--turf);
	text-shadow: 0 0 3px currentColor, 0 0 8px rgba(47, 191, 113, 0.5);
}

/* Jersey-style W/L/T chips next to a score — small, bold, unmistakable. */
.jersey-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.15em;
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 800;
	color: #fff;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.jersey-chip--win { background: var(--turf); }
.jersey-chip--loss { background: var(--shame); }
.jersey-chip--tie { background: var(--hive); color: #1a1200; }

/* Jersey-number ranks — standings rank digits styled like a jersey number:
   big, bold, outlined. Rank 1 gets the gold treatment. */
.jersey-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7em;
	font-weight: 800;
	font-size: 1.05em;
	color: var(--text);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55), -1px -1px 0 rgba(0, 0, 0, 0.25);
}

.jersey-rank--gold {
	color: var(--gold);
	text-shadow: 0 0 6px rgba(245, 179, 1, 0.55), 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Footer — present on every page. */
.site-footer {
	max-width: var(--max-width);
	margin: 3rem auto 0;
	padding: 1.75rem 1.25rem 3rem;
	text-align: center;
	border-top: 1px solid var(--border);
	color: var(--text);
	opacity: 0.75;
	font-size: 0.85rem;
}

.commish-sig {
	margin-top: 0.4rem;
	color: var(--gold);
	font-style: italic;
	letter-spacing: 0.03em;
	opacity: 1;
}

.footer-mark {
	/* Override the global img{display:block} reset — this mark sits inline
	   with the footer's centered text, not as a block on its own line. */
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--border);
	vertical-align: middle;
	margin-left: 0.35rem;
}

/* Home hero — the league's mark gets its biggest, boldest showing right at
   the top of the home page. */
.home-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* End-zone diagonal stripe accent, fading out from the left edge — static,
   no motion. */
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.05;
	background-image: repeating-linear-gradient(45deg, var(--gold) 0px, var(--gold) 12px, transparent 12px, transparent 24px);
	-webkit-mask-image: linear-gradient(to right, black, transparent 45%);
	mask-image: linear-gradient(to right, black, transparent 45%);
}

/* Honeycomb watermark, strengthened slightly here vs. the header's 0.06 —
   still mild, an accent for the page's marquee moment, not wallpaper. */
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.1;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23FFB300' stroke-width='1.5'/%3E%3C/svg%3E");
}

.home-hero-mark {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid rgba(245, 179, 1, 0.4);
	box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.08), var(--shadow);
}

.home-hero-text h1 {
	margin-bottom: 0.15rem;
}

.home-hero-text p:last-child {
	margin-top: 0.15rem;
}

/* Small helpers reused across later pages */
/* Gridiron hash mark — a small yard-line tick before every section eyebrow
   (the "hash marks... on section headers" texture; static, no motion). */
.eyebrow {
	position: relative;
	padding-left: 14px;
	color: var(--hive);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.75rem;
}

.eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translateY(-50%);
	background-image: linear-gradient(var(--hive), var(--hive)), linear-gradient(var(--hive), var(--hive));
	background-size: 1px 8px, 8px 1px;
	background-position: center, center;
	background-repeat: no-repeat;
	opacity: 0.6;
}

/* Scoreboard bug — the little broadcast-graphic treatment for standings and
   scoreboard section labels. */
.scoreboard-bug {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 0.2rem 0.6rem 0.2rem 1rem;
	margin-bottom: 0.5rem;
}

.muted {
	opacity: 0.7;
}

.pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}

.pill-gold {
	border-color: rgba(245, 179, 1, 0.45);
	color: var(--gold);
}

/* Draft-day migration alert bar — top of the home page. */
.alert-bar {
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.18), rgba(47, 191, 113, 0.1));
	border: 1px solid rgba(245, 179, 1, 0.35);
	border-radius: var(--radius-sm);
	padding: 0.75rem 1.1rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
}

.alert-bar strong {
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.alert-bar a {
	font-weight: 700;
}

/* Roster check-in board chips. */
.checkin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.7rem;
}

/* Each team is a card: crest + name up top, a row of starter headshots
   below. The status is carried by the left accent bar + flag dot. */
.checkin-card {
	position: relative;
	padding: 0.7rem 0.8rem 0.75rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong);
	background: var(--panel-raised);
	border-left: 3px solid var(--border-strong);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.checkin-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: rgba(244, 241, 232, 0.28);
}

.checkin-card--in {
	border-left-color: var(--turf);
	background: linear-gradient(180deg, rgba(47, 191, 113, 0.12), transparent 60%), var(--panel-raised);
}

.checkin-card--not-in {
	border-left-color: var(--shame);
}

.checkin-card--open {
	border-left-color: var(--border-strong);
	opacity: 0.72;
}

.checkin-card-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.checkin-logo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--border-strong);
	flex: none;
}

.checkin-name {
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.2;
	flex: 1 1 auto;
	min-width: 0;
}

.checkin-flag {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: var(--border-strong);
}

.checkin-flag--in {
	background: var(--turf);
	box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.6);
	animation: checkin-pulse 2.4s ease-out infinite;
}

.checkin-flag--not-in { background: var(--shame); }

/* Overlapping starter headshots — the "live action" of the board. They fan
   apart and lift on hover so the card feels like it's coming to life. */
.checkin-stars {
	display: flex;
	margin-top: 0.6rem;
	padding-left: 6px;
}

.checkin-star {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	margin-left: -6px;
	background: var(--panel);
	border: 2px solid var(--panel-raised);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	transition: transform 0.18s ease, margin 0.18s ease, border-color 0.18s ease;
}

.checkin-card:hover .checkin-star {
	margin-left: 0;
	border-color: var(--turf);
}

.checkin-card:hover .checkin-star:hover {
	transform: translateY(-5px) scale(1.12);
	z-index: 2;
}

@keyframes checkin-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(47, 191, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

/* Sign in with Slack button + the "or" divider on the join page. */
.slack-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem;
	border-radius: var(--radius-sm);
	background: #fff;
	color: #1d1c1d;
	font-weight: 700;
	border: 1px solid rgba(0, 0, 0, 0.15);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slack-button:hover,
.slack-button:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.slack-button-mark {
	display: inline-flex;
	line-height: 0;
}

.or-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0;
	color: var(--text);
	opacity: 0.55;
	font-size: 0.85rem;
}

.or-divider::before,
.or-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-strong);
}

/* Meet dock — a small fixed "hangout window" launcher. Google blocks framing
   meet.google.com (x-frame-options: SAMEORIGIN), so this can't embed the live
   call; it keeps the real Meet URL and pops it into its own small window. */
.meet-dock {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	width: 260px;
	max-width: calc(100vw - 32px);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--panel-raised);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.meet-dock[hidden] {
	display: none;
}

.meet-dock-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.7rem;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid var(--border);
}

.meet-dock-live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.meet-dock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
	animation: meet-dot-pulse 1.8s ease-out infinite;
}

.meet-dock-close {
	background: none;
	border: 0;
	color: var(--text);
	opacity: 0.6;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.2rem;
}

.meet-dock-close:hover {
	opacity: 1;
}

.meet-dock-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1rem 0.9rem;
	text-align: center;
	background:
		radial-gradient(90% 80% at 50% 0%, rgba(26, 115, 232, 0.18), transparent 70%),
		#0a1020;
}

.meet-dock-cam {
	font-size: 1.8rem;
}

.meet-dock-note {
	margin: 0;
	font-size: 0.82rem;
	color: rgba(244, 241, 232, 0.82);
	line-height: 1.35;
}

.meet-dock-join {
	display: block;
	text-align: center;
	padding: 0.7rem;
	background: #1a73e8;
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.meet-dock-join:hover,
.meet-dock-join:focus-visible {
	background: #1666d0;
}

@keyframes meet-dot-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
	70%  { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

/* Draft-day hero — the set pick order + one-tap "get in" buttons, top of home. */
.draft-hero {
	border: 1px solid rgba(245, 179, 1, 0.45);
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(245, 179, 1, 0.16), transparent 55%),
		var(--panel-raised);
}

.draft-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 1rem 0 1.4rem;
}

.draft-cta {
	flex: 1 1 260px;
	text-align: center;
	font-size: 1.05rem;
	padding: 0.95rem 1.2rem;
	text-decoration: none;
}

/* Doubled class raises specificity above the base .cta-button (which is
   defined later in this file) so the brand colors win regardless of order. */
.draft-cta.draft-cta--espn {
	background: #d50a0a; /* ESPN/football red */
	color: #fff;
}

.draft-cta.draft-cta--meet {
	background: #1a73e8; /* Google Meet blue */
	color: #fff;
}

.draft-cta:hover,
.draft-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.draft-order {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.5rem;
}

.draft-slot {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--panel);
}

.draft-pick-num {
	flex: none;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gold);
	color: #0B1220;
	font-weight: 800;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.draft-team {
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	line-height: 1.15;
}

a.draft-team:hover {
	color: var(--gold);
}

.draft-hero-foot {
	margin-top: 1rem;
	margin-bottom: 0;
}

/* The Film Room — a hype-reel video wall of legendary NFL plays. Cards are
   fast thumbnail facades (YouTube still image) that swap to an embedded player
   on click, so the page doesn't load five iframes up front. */
.film-room-sub {
	margin-top: -0.35rem;
	margin-bottom: 1rem;
}

.film-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.9rem;
}

.film-card,
.film-embed {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
}

.film-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	cursor: pointer;
	border: 1px solid var(--border-strong);
	background-color: #000;
	background-size: cover;
	background-position: center;
	color: var(--text);
	text-align: left;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.film-card--feature {
	grid-column: 1 / -1;
}

.film-card:hover,
.film-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: var(--gold);
	outline: none;
}

.film-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(11, 18, 32, 0.92) 100%);
}

.film-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(245, 179, 1, 0.94);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	transition: transform 0.18s ease, background 0.18s ease;
}

.film-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #0B1220;
}

.film-card:hover .film-play,
.film-card:focus-visible .film-play {
	transform: translate(-50%, -50%) scale(1.12);
	background: var(--hive);
}

.film-card--feature .film-play {
	width: 86px;
	height: 86px;
}

.film-card--feature .film-play::after {
	border-width: 15px 0 15px 25px;
}

.film-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.7rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.film-title {
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.film-card--feature .film-title {
	font-size: 1.5rem;
}

.film-blurb {
	font-size: 0.82rem;
	color: rgba(244, 241, 232, 0.88);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* Keep the smaller cards clean — blurb only on the feature. */
.film-card:not(.film-card--feature) .film-blurb {
	display: none;
}

.film-embed {
	position: relative;
	width: 100%;
	border: 1px solid var(--gold);
}

.film-embed--feature {
	grid-column: 1 / -1;
}

.film-embed iframe,
.film-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	object-fit: contain;
}

/* Smack Board — the trash-talk wall. */
.smack-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.8rem;
}

.smack-form-label {
	font-size: 0.85rem;
	color: var(--text);
	opacity: 0.85;
}

.smack-form textarea {
	width: 100%;
	resize: vertical;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong);
	background: var(--panel);
	color: var(--text);
	font: inherit;
}

.smack-form .cta-button {
	align-self: flex-start;
}

.smack-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.smack-post {
	border: 1px solid var(--border);
	border-left: 3px solid var(--hive);
	border-radius: var(--radius-sm);
	background: var(--panel-raised);
	padding: 0.7rem 0.9rem;
}

.smack-post-head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.2rem;
}

.smack-author {
	font-weight: 800;
	color: var(--gold);
	text-decoration: none;
}

.smack-author:hover {
	text-decoration: underline;
}

.smack-when {
	font-size: 0.78rem;
}

.smack-body {
	margin: 0;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Franchise theming — a manager's accent color skins their hero. The accent
   is a validated hex in --franchise-accent (set inline on .manager-hero). */
.manager-hero--themed {
	border-top: 4px solid var(--franchise-accent, var(--gold));
}

.manager-hero--themed .eyebrow {
	color: var(--franchise-accent, var(--gold));
}

.manager-hero-motto {
	margin: 0.15rem 0 0.4rem;
	font-size: 1.25rem;
	font-weight: 700;
	font-style: italic;
	color: var(--franchise-accent, var(--gold));
}

.cta-button--ghost {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text);
	text-decoration: none;
}

.cta-button--ghost:hover,
.cta-button--ghost:focus-visible {
	border-color: var(--franchise-accent, var(--gold));
}

.form-saved {
	color: var(--turf);
	font-weight: 700;
}

/* Commissioner's Office report — preserve the model's paragraph breaks. */
.commish-generate {
	margin-top: 0.8rem;
}

.commish-report {
	border-left: 4px solid var(--gold);
}

.commish-body {
	white-space: pre-wrap;
	line-height: 1.55;
	font-size: 1.02rem;
}

/* Prediction accountability grades on the board. */
.grade {
	font-weight: 900;
}

.grade--hit {
	color: var(--turf);
}

.grade--miss {
	color: var(--shame);
}

/* Numbered/bulleted step lists — the Get In guide and drafting primer. */
.step-list {
	margin: 0;
	padding-left: 1.4rem;
	display: grid;
	gap: 0.9rem;
	line-height: 1.6;
}

.step-list li::marker {
	color: var(--hive);
	font-weight: 700;
}

/* Call-to-action buttons — the ESPN invite and Draft Room links. */
.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, var(--gold), #d99a00);
	color: #1a1200;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9rem;
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(245, 179, 1, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
	color: #1a1200;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(245, 179, 1, 0.35);
}

.cta-button--roam {
	background: linear-gradient(135deg, var(--turf), #1f8a52);
	color: #06180d;
	box-shadow: 0 6px 18px rgba(47, 191, 113, 0.25);
}

.cta-button--roam:hover,
.cta-button--roam:focus-visible {
	color: #06180d;
	box-shadow: 0 10px 24px rgba(47, 191, 113, 0.35);
}

.cta-caption {
	font-size: 0.75rem;
	opacity: 0.6;
	margin-bottom: 0.5rem;
}

/* Join / claim / predictions forms — passphrase, franchise picker,
   predictions editor. */
.stack-form {
	display: grid;
	gap: 0.5rem;
	max-width: 32rem;
}

.stack-form label {
	font-size: 0.85rem;
	font-weight: 700;
	margin-top: 0.5rem;
}

.stack-form input,
.stack-form select,
.stack-form textarea {
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: 0.55rem 0.7rem;
	font: inherit;
}

.stack-form button {
	margin-top: 0.75rem;
	justify-self: start;
	border: none;
	cursor: pointer;
}

.form-error {
	color: var(--shame);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.form-success {
	color: var(--turf);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.link-button {
	background: none;
	border: none;
	color: var(--gold);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	padding: 0;
}

.prediction-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 1rem;
}

.prediction-summary dt {
	opacity: 0.7;
	font-size: 0.85rem;
}

.prediction-summary dd {
	margin: 0;
	font-weight: 700;
}

/* Claim badge on manager pages. */
.claim-badge {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font-size: 0.85rem;
	font-weight: 700;
}

.claim-badge--mine {
	color: var(--turf);
	border-color: rgba(47, 191, 113, 0.5);
	background: rgba(47, 191, 113, 0.12);
}

/* Home page's predictions-lock banner. */
.predictions-banner {
	display: block;
	margin-bottom: 1.5rem;
	text-decoration: none;
	color: inherit;
}

.predictions-banner strong {
	display: block;
	color: var(--gold);
}

/* Scoreboard-style countdown component (draft target + season kickoff) —
   chunky LED digit blocks in a bezeled panel. Ticked client-side by the tiny
   inline script in base.html; server-rendered values are always correct on
   their own for JS-off progressive enhancement. */
.scoreboard-countdown {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sb-block {
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 0.6rem 0.9rem;
	text-align: center;
	min-width: 4.2rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.sb-digits {
	display: block;
	font-variant-numeric: tabular-nums;
	font-size: 2rem;
	font-weight: 800;
	color: var(--gold);
	text-shadow: 0 0 4px currentColor, 0 0 10px rgba(245, 179, 1, 0.5);
}

.sb-label {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.sb-sep {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--gold);
	opacity: 0.5;
}

.scoreboard-countdown-label {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

.scoreboard-countdown-caption {
	margin-top: 0.6rem;
}

.scoreboard-countdown-live {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--gold);
	text-shadow: 0 0 8px rgba(245, 179, 1, 0.5);
	margin: 0;
}

/* Compact variant — the home page's draft alert bar. */
.scoreboard-countdown--compact .sb-block {
	padding: 0.25rem 0.5rem;
	min-width: 2.6rem;
}

.scoreboard-countdown--compact .sb-digits {
	font-size: 1.1rem;
}

.scoreboard-countdown--compact .sb-label {
	font-size: 0.55rem;
}

.scoreboard-countdown--compact .scoreboard-countdown-live {
	font-size: 1rem;
}

/* Huge variant — the /draft hero. */
.scoreboard-countdown--huge .sb-digits {
	font-size: 3rem;
}

.scoreboard-countdown--huge .sb-block {
	min-width: 5.5rem;
	padding: 0.85rem 1.1rem;
}

.scoreboard-countdown--huge .sb-sep {
	font-size: 2.4rem;
}

.scoreboard-countdown--huge .scoreboard-countdown-live {
	font-size: 2.6rem;
}

.footer-version {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: .02em;
	opacity: 0.85;
}

/* Season/history team logos — small, inline with the team name. */
.team-logo {
	display: inline-block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 0.4rem;
	border-radius: 4px;
	background: var(--panel-raised);
}

/* Manager page current-roster grid. */
.roster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 0.9rem;
}

.roster-player {
	text-align: center;
}

.roster-player--bench {
	opacity: 0.6;
}

.roster-photo {
	width: 64px;
	height: 64px;
	margin: 0 auto 0.4rem;
	border-radius: 50%;
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	overflow: hidden;
}

.roster-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roster-player-name {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.roster-player-pos {
	font-size: 0.7rem;
	margin: 0.1rem 0 0;
}

/* The Belt — home-page badge + /belt hero. */
.belt-badge {
	display: block;
	margin-bottom: 1.5rem;
	text-decoration: none;
	color: inherit;
}

.belt-badge-holder {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--gold);
}

.belt-hero .belt-holder {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--gold);
	text-shadow: 0 0 8px rgba(245, 179, 1, 0.4);
	margin-bottom: 0.2rem;
}

/* Wide tables (standings, scoreboards) scroll within their own container on
   narrow viewports instead of the page ever scrolling horizontally. */
.table-scroll {
	overflow-x: auto;
}

.table-scroll table {
	min-width: 460px;
}

/* Rank-1 gets a subtle gold treatment — the reigning champion once a season
   is final, or simply whoever's on top mid-season otherwise. A slow glow
   pulse gives champion rows a little celebratory energy (gated under
   prefers-reduced-motion at the bottom of this file). */
@keyframes row-lead-glow {
	0%, 100% { box-shadow: inset 3px 0 0 var(--gold); }
	50% { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 14px rgba(245, 179, 1, 0.3); }
}

tbody tr.row-lead {
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.14), rgba(245, 179, 1, 0) 70%);
	box-shadow: inset 3px 0 0 var(--gold);
	animation: row-lead-glow 2.6s ease-in-out infinite;
}

tbody tr.row-lead:hover {
	background: linear-gradient(90deg, rgba(245, 179, 1, 0.2), rgba(245, 179, 1, 0.03) 70%);
}

/* Last place gets the matching crimson treatment. */
tbody tr.row-shame {
	background: linear-gradient(90deg, rgba(192, 57, 43, 0.14), rgba(192, 57, 43, 0) 70%);
	box-shadow: inset 3px 0 0 var(--shame);
}

tbody tr.row-shame:hover {
	background: linear-gradient(90deg, rgba(192, 57, 43, 0.2), rgba(192, 57, 43, 0.03) 70%);
}

/* Season archive: a big year + champion banner. */
.season-hero h1 {
	font-size: 2.6rem;
	margin-bottom: 0.35rem;
}

.season-hero-champion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: 1.05rem;
}

/* Archive-gaps footnote box — a quieter aside, not another data table. */
.notes-box {
	border-left: 3px solid var(--hive);
}

.notes-box ul {
	margin: 0;
	padding-left: 1.1rem;
	opacity: 0.85;
	font-size: 0.9rem;
}

.notes-box li {
	margin-bottom: 0.35rem;
}

.notes-box li:last-child {
	margin-bottom: 0;
}

.week-group {
	margin-bottom: 1.5rem;
}

.week-group:last-child {
	margin-bottom: 0;
}

/* Today in League History: photo + plaque side by side, each filling the
   space gracefully when the other is absent. */
.today-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.25rem;
}

.today-grid > img {
	flex: 1 1 260px;
	max-height: 320px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.today-grid > .plaque {
	flex: 1 1 260px;
}

/* Manager pages — the site's crown jewels: a celebration of each franchise. */
.manager-card {
	display: block;
	color: var(--text);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.manager-card:hover,
.manager-card:focus-visible {
	color: var(--text);
	text-decoration: none;
	border-color: var(--border-strong);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.manager-card h2 {
	margin-bottom: 0.15rem;
	font-size: 1.15rem;
}

.manager-nickname {
	margin-bottom: 0.6rem;
	font-style: italic;
}

.manager-record {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0.4rem 0 0;
}

.manager-trophies {
	margin: 0.35rem 0 0;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
}

.manager-span {
	margin-top: 0.75rem;
	font-size: 0.75rem;
}

/* Hero header — big, confident, first thing a visitor sees on a profile. */
.manager-hero h1 {
	font-size: 2.4rem;
	margin-bottom: 0.25rem;
}

.manager-hero-nickname {
	font-style: italic;
	font-size: 1.1rem;
	opacity: 0.85;
	margin-bottom: 0.75rem;
}

.manager-hero-record {
	font-variant-numeric: tabular-nums;
	font-size: 1.3rem;
	font-weight: 700;
}

/* Trophy Case / Shame Case plaque stacks. */
.plaque-stack {
	display: grid;
	gap: 0.75rem;
}

/* Trophy plaques get a CSS-only confetti burst on hover — no JS, per the
   design brief. Colored dots fan out from the plaque's corners. */
.plaque--trophy {
	position: relative;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(245, 179, 1, 0.28), rgba(245, 179, 1, 0) 55%),
		linear-gradient(155deg, rgba(245, 179, 1, 0.18), rgba(245, 179, 1, 0) 60%),
		var(--panel-raised);
	border-color: rgba(245, 179, 1, 0.5);
	border-left-color: var(--hive);
}

/* A gold trophy stamps every championship plaque. */
.plaque--trophy .plaque-title::before {
	content: "\1F3C6\00A0"; /* 🏆 + nbsp */
}

.plaque--trophy:hover,
.plaque--trophy:focus-within {
	border-color: var(--gold);
	box-shadow: inset 0 0 0 1px rgba(245, 179, 1, 0.35), 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(245, 179, 1, 0.35);
}

.plaque--trophy::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: inherit;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 7px 7px;
	background-image:
		radial-gradient(circle, var(--gold) 45%, transparent 50%),
		radial-gradient(circle, var(--turf) 45%, transparent 50%),
		radial-gradient(circle, var(--hive) 45%, transparent 50%),
		radial-gradient(circle, var(--gold) 45%, transparent 50%),
		radial-gradient(circle, var(--turf) 45%, transparent 50%);
	background-position:
		8% -12%, 30% -18%, 70% -16%, 92% -10%, 50% -20%;
	opacity: 0;
	transform: translateY(6px) scale(0.7);
	transition: opacity 0.2s ease, transform 0.3s ease;
}

.plaque--trophy:hover::before,
.plaque--trophy:focus-within::before {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Trophy shimmer — a gold sweep across the plaque, always running (gated
   under prefers-reduced-motion below). Backgrounds never overflow their own
   element box, so this needs no clipping and doesn't disturb the confetti
   burst's intentional overflow above. */
@keyframes trophy-shimmer {
	0%   { background-position: -150% 0; }
	100% { background-position: 250% 0; }
}

.plaque--trophy::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	/* A narrow band (46-54% of a 250%-wide background ≈ 20% of the plaque's
	   own width) reads as a slim light sweep; wider bands here looked like a
	   solid gold block frozen mid-card at most animation frames. */
	background-image: linear-gradient(100deg, transparent 46%, rgba(245, 179, 1, 0.3) 50%, transparent 54%);
	background-size: 250% 100%;
	animation: trophy-shimmer 3.5s ease-in-out infinite;
}

/* Stagger the shimmer across a stack of trophy plaques (Trophy Case, Wall
   of Glory) so they don't all sweep in lockstep. Negative delays start each
   one already mid-cycle. */
.plaque-stack .plaque--trophy:nth-child(2)::after { animation-delay: -0.7s; }
.plaque-stack .plaque--trophy:nth-child(3)::after { animation-delay: -1.4s; }
.plaque-stack .plaque--trophy:nth-child(4)::after { animation-delay: -2.1s; }
.plaque-stack .plaque--trophy:nth-child(5)::after { animation-delay: -2.8s; }

/* Confetti pieces — real DOM spans (not pseudo-elements: ::before/::after
   are already spoken for by the burst-dots and shimmer above), one-shot on
   page load via fill-mode: both leaving them faded out at rest. Hover gets
   its own celebration via the burst-dots ::before above, rather than
   replaying this same fall (CSS can't cleanly re-trigger a finished
   animation without JS, and a tiny vanilla script wasn't worth it for a
   frankly cosmetic detail — this stays pure CSS). Gated under
   prefers-reduced-motion below. */
.confetti-piece {
	position: absolute;
	top: -10px;
	width: 6px;
	height: 10px;
	opacity: 0;
	pointer-events: none;
	animation: confetti-fall 1.8s ease-out 1 both;
}

.confetti-piece:nth-child(1) { left: 10%; background: var(--gold); animation-delay: 0s; }
.confetti-piece:nth-child(2) { left: 30%; background: var(--turf); animation-delay: 0.15s; }
.confetti-piece:nth-child(3) { left: 50%; background: var(--hive); animation-delay: 0.05s; }
.confetti-piece:nth-child(4) { left: 70%; background: var(--gold); animation-delay: 0.25s; }
.confetti-piece:nth-child(5) { left: 90%; background: var(--turf); animation-delay: 0.1s; }

@keyframes confetti-fall {
	0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
	15%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(90px) rotate(280deg); }
}

/* Photo strip — horizontal scroller so the page itself never scrolls
   sideways. */
.photo-strip {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.photo-strip img {
	flex: 0 0 160px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

/* League ticker — an ESPN-bottom-line-style scrolling strip. The track's
   content is rendered twice server-side (see homeView.Ticker) so
   translateX(-50%) always lands exactly on the start of the second,
   identical copy: a seamless loop with no visible seam or reset-jump.
   Pauses on hover; gated under prefers-reduced-motion below. */
.ticker {
	overflow: hidden;
	background: var(--panel-raised);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.ticker-track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 45s linear infinite;
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
	animation-play-state: paused;
}

.ticker-item {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 2rem 0.6rem 0;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--text);
	opacity: 0.9;
	white-space: nowrap;
}

.ticker-item::before {
	content: "\1F3C8";
	margin-right: 0.6rem;
	opacity: 0.7;
}

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
	.header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.site-nav {
		gap: 0.25rem;
	}

	.card {
		padding: 1.1rem;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.2rem; }

	.manager-hero h1 { font-size: 1.8rem; }
	.season-hero h1 { font-size: 2rem; }

	.home-hero {
		gap: 0.85rem;
	}

	.home-hero-mark {
		width: 52px;
		height: 52px;
	}

	.hex-accent-mark {
		width: 140px;
		height: 140px;
		right: -30px;
	}
}

/* Visually-hidden label text — present for screen readers, off-screen for
   sighted users (the poll fieldset legend). */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Site-wide announcement banner (base.html) — gold/hive accent, above the
   header. Operator-driven ($ANNOUNCEMENT_HTML); dismissible per-visitor via a
   cookie (progressive enhancement — no JS, it just stays put). */
.announcement-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: linear-gradient(90deg, rgba(255, 179, 0, 0.22), rgba(245, 179, 1, 0.12));
	border-bottom: 2px solid var(--hive);
	color: var(--text);
	padding: 0.7rem 1.1rem;
	font-size: 0.92rem;
	line-height: 1.4;
}

.announcement-inner {
	flex: 1;
	min-width: 0;
}

.announcement-inner strong {
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.announcement-inner a {
	color: var(--hive);
	font-weight: 800;
	text-decoration: underline;
	white-space: nowrap;
}

.announcement-dismiss {
	flex: none;
	background: none;
	border: none;
	color: var(--text);
	opacity: 0.7;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0 0.3rem;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.announcement-dismiss:hover,
.announcement-dismiss:focus-visible {
	opacity: 1;
}

/* Draft-date poll (/draft-poll) — availability results board and the
   per-manager checkbox ballot. */
.poll-results {
	display: grid;
	gap: 0.75rem;
}

.poll-row {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--panel-raised);
	padding: 0.7rem 0.9rem;
}

.poll-row--best {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px rgba(245, 179, 1, 0.4) inset;
}

.poll-row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.poll-date {
	font-weight: 800;
	font-size: 1rem;
}

.poll-count {
	margin-left: auto;
	color: var(--turf);
	font-weight: 700;
	font-size: 0.85rem;
}

.poll-managers {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
}

.poll-fieldset {
	border: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.poll-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	cursor: pointer;
}

.poll-check input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--turf);
}

/* Every animation added in the game-day pass, disabled for users who asked
   for less motion. Static textures/gradients (gridiron yard lines, hash
   marks, end-zone stripes, honeycomb watermarks) aren't touched here — they
   don't move, so this media feature doesn't apply to them. */
@media (prefers-reduced-motion: reduce) {
	.ticker-track,
	.plaque--trophy::after,
	.confetti-piece,
	tbody tr.row-lead,
	.brand-mark,
	.footer-mark,
	.home-hero-mark,
	.checkin-flag--in,
	.meet-dock-dot {
		animation: none !important;
	}

	.checkin-card:hover,
	.checkin-card:hover .checkin-star:hover,
	.film-card:hover,
	.film-card:focus-visible,
	.plaque:not(.plaque--shame):hover {
		transform: none !important;
	}

	.film-card:hover .film-play,
	.film-card:focus-visible .film-play {
		transform: translate(-50%, -50%) !important;
	}

	.plaque--shame:hover {
		animation: none !important;
	}
}

/* ============================================================
   Customization Studio + franchise "office vibes"
   ============================================================ */

/* Two-pane studio: controls scroll, the live preview stays put so you always
   see the effect of what you're picking. Collapses to one column on mobile,
   preview first so touch users see it react. */
.studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: 1.5rem;
	align-items: start;
}

.studio-head {
	margin-bottom: 1rem;
}

.studio-head h1 {
	margin: 0.1rem 0 0.3rem;
}

.studio-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.studio-block {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 1rem 1.1rem 1.2rem;
	margin: 0;
}

.studio-block legend {
	padding: 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
}

.studio-hint {
	margin: 0 0 0.8rem;
	font-size: 0.85rem;
	color: rgba(244, 241, 232, 0.6);
}

/* NFL palette grid — dense, tappable. Each swatch shows its two colors as a
   split chip; the club name reads underneath so it's usable without knowing
   every color by heart. */
.palette-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
	gap: 0.5rem;
}

.palette-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.3rem;
	background: var(--panel-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.12s ease, transform 0.12s ease;
}

.palette-swatch:hover,
.palette-swatch:focus-visible {
	border-color: var(--border-strong);
	transform: translateY(-2px);
	outline: none;
}

.palette-swatch.is-active {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold);
}

.palette-chip {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.palette-name {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Vibe picker — cards, each naming a material and its mood. */
.vibe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.6rem;
}

.vibe-option {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: left;
	padding: 0.7rem 0.8rem;
	background: var(--panel-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.vibe-option:hover,
.vibe-option:focus-visible {
	border-color: var(--border-strong);
	outline: none;
}

.vibe-option.is-active {
	border-color: var(--gold);
	background: rgba(245, 179, 1, 0.12);
}

.vibe-name {
	font-weight: 700;
}

.vibe-blurb {
	font-size: 0.78rem;
	color: rgba(244, 241, 232, 0.6);
}

.color-row {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 0.9rem;
}

.color-field,
.motto-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-weight: 600;
}

.color-field input[type="color"] {
	width: 4rem;
	height: 2.6rem;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: none;
	cursor: pointer;
}

.motto-field input {
	padding: 0.6rem 0.7rem;
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text);
	font: inherit;
}

.studio-save {
	align-self: flex-start;
}

/* The stage holds the live preview. Sticky on desktop so it tracks as you
   scroll the controls. */
.studio-stage {
	position: sticky;
	top: 1rem;
}

.studio-stage-label,
.studio-stage-note {
	font-size: 0.8rem;
	color: rgba(244, 241, 232, 0.6);
	margin: 0 0 0.5rem;
}

.studio-stage-note {
	margin: 0.5rem 0 0;
}

@media (max-width: 760px) {
	.studio {
		grid-template-columns: 1fr;
	}
	.studio-stage {
		position: static;
		order: -1;
	}
}

/* ---- Vibes: the material of the hero, driven by the two chosen colors ----
   Applied as .manager-hero.vibe-<key>; the same classes power the studio's
   live preview, so the preview is truthful. Each rule leans on
   --franchise-accent (primary) and --franchise-accent-2 (secondary). */
.themed-title {
	position: relative;
}

/* Clean — the restrained default: a two-color top rule, nothing shouting. */
.manager-hero.vibe-clean {
	border-top: 4px solid var(--franchise-accent, var(--gold));
	background-image: linear-gradient(90deg,
		var(--franchise-accent, var(--gold)) 0,
		var(--franchise-accent-2, transparent) 60%,
		transparent 60%);
	background-size: 100% 4px;
	background-repeat: no-repeat;
	background-position: top left;
}

/* Blackout — lights down, one bright ring. */
.manager-hero.vibe-blackout {
	border: 1px solid var(--franchise-accent, var(--gold));
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
		#05070c;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 34px -6px var(--franchise-accent, var(--gold));
}
.manager-hero.vibe-blackout .themed-title {
	color: #fff;
	text-shadow: 0 0 18px color-mix(in srgb, var(--franchise-accent, #fff) 70%, transparent);
}
.manager-hero.vibe-blackout .eyebrow {
	color: var(--franchise-accent-2, var(--gold));
}

/* Gold Standard — championship foil, colors as the metal. */
.manager-hero.vibe-gold {
	border: 1px solid color-mix(in srgb, var(--franchise-accent, var(--gold)) 60%, #000);
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 9px),
		linear-gradient(135deg,
			color-mix(in srgb, var(--franchise-accent, var(--gold)) 32%, #0b0d12),
			color-mix(in srgb, var(--franchise-accent-2, #000) 26%, #0b0d12));
}
.manager-hero.vibe-gold .themed-title {
	background: linear-gradient(90deg, var(--franchise-accent, var(--gold)), var(--franchise-accent-2, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Turf — a field with chalk yard lines and hash marks. */
.manager-hero.vibe-turf {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 70px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
		linear-gradient(180deg,
			color-mix(in srgb, var(--franchise-accent, var(--turf)) 78%, #06180d),
			color-mix(in srgb, var(--franchise-accent, var(--turf)) 55%, #06180d));
}
.manager-hero.vibe-turf .themed-title,
.manager-hero.vibe-turf .eyebrow {
	color: #fff;
}
.manager-hero.vibe-turf .themed-title {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* Chrome — brushed metal with a specular streak. */
.manager-hero.vibe-chrome {
	border: 1px solid var(--franchise-accent-2, #9aa3ad);
	background:
		linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%),
		linear-gradient(180deg, #2b3037, #171a1f 60%, #23272d);
}
.manager-hero.vibe-chrome .themed-title {
	background: linear-gradient(180deg, #f4f6f8, var(--franchise-accent, #aeb6bf) 60%, #6b7178);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.manager-hero.vibe-chrome .eyebrow {
	color: var(--franchise-accent, #cfd4d9);
}

/* Neon — arcade glow, two-tone. */
.manager-hero.vibe-neon {
	border: 2px solid var(--franchise-accent-2, var(--gold));
	background: #0a0713;
	box-shadow: inset 0 0 24px -6px var(--franchise-accent-2, var(--gold)), 0 0 20px -8px var(--franchise-accent, var(--gold));
}
.manager-hero.vibe-neon .themed-title {
	color: #fff;
	text-shadow:
		0 0 6px var(--franchise-accent, var(--gold)),
		0 0 16px var(--franchise-accent, var(--gold)),
		0 0 30px var(--franchise-accent-2, var(--gold));
}
.manager-hero.vibe-neon .eyebrow {
	color: var(--franchise-accent-2, var(--gold));
}

/* Throwback — a warm, faded pennant. Deliberately breaks the dark shell. */
.manager-hero.vibe-throwback {
	border: 2px dashed color-mix(in srgb, var(--franchise-accent, var(--gold)) 65%, #3a2f18);
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 3px, transparent 3px 6px),
		linear-gradient(180deg, #efe4c8, #dcc9a0);
}
.manager-hero.vibe-throwback .themed-title {
	color: color-mix(in srgb, var(--franchise-accent, #6b3b12) 70%, #2a1c08);
}
.manager-hero.vibe-throwback .eyebrow {
	color: color-mix(in srgb, var(--franchise-accent-2, #7a5a1a) 65%, #2a1c08);
}
.manager-hero.vibe-throwback .manager-hero-motto {
	color: color-mix(in srgb, var(--franchise-accent, #6b3b12) 60%, #2a1c08);
}
.manager-hero.vibe-throwback .manager-hero-record,
.manager-hero.vibe-throwback .manager-hero-record .muted {
	color: #4a3a1e;
}

/* ============================================================
   League News feed (/news) + home preview
   ============================================================ */
.news-feed {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.news-item {
	border-left: 3px solid var(--border-strong);
}
.news-item--commish {
	border-left-color: var(--gold);
}
.news-item--rename {
	border-left-color: var(--turf);
}
.news-item--history {
	border-left-color: var(--gold);
}
.news-item--scandal {
	border-left-color: var(--shame);
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}

/* Kind badge — a small pill that names what the story is. */
.news-badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--panel-raised);
	color: var(--text);
	border: 1px solid var(--border-strong);
	white-space: nowrap;
}
.news-badge--commish {
	background: rgba(245, 179, 1, 0.16);
	border-color: var(--gold);
	color: var(--gold);
}
.news-badge--rename {
	background: rgba(47, 191, 113, 0.16);
	border-color: var(--turf);
	color: var(--turf);
}
.news-badge--history {
	background: rgba(245, 179, 1, 0.16);
	border-color: var(--gold);
	color: var(--gold);
}
.news-badge--scandal {
	background: rgba(192, 57, 43, 0.18);
	border-color: var(--shame);
	color: #e8776b;
}
.news-link a {
	font-weight: 700;
	color: var(--gold);
}

.news-when {
	font-size: 0.8rem;
}

.news-title {
	margin: 0.1rem 0 0.3rem;
	font-size: 1.35rem;
}

.news-team {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

/* Story bodies arrive as plain multi-paragraph text (from the Commish AI or a
   name-change note); preserve their line breaks without trusting them as HTML
   — the template escapes them. */
.news-body {
	white-space: pre-wrap;
	line-height: 1.6;
	color: rgba(244, 241, 232, 0.9);
}

/* Home preview — a compact list, newest league news near the top of the page. */
.news-preview {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.news-preview-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.news-preview-title {
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}
.news-preview-title:hover,
.news-preview-title:focus-visible {
	text-decoration: underline;
}

/* Big-deal name-change banner — the loud announcement at the very top of the
   home page when a team rebrands. Meant to grab you. */
.namechange-banner {
	border: 2px solid var(--turf);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(47, 191, 113, 0.22), transparent 55%),
		linear-gradient(90deg, rgba(47, 191, 113, 0.14), rgba(245, 179, 1, 0.08));
	box-shadow: 0 0 26px -8px var(--turf);
}

.namechange-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--turf);
}

.namechange-headline {
	margin: 0 0 0.5rem;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.15;
}

.namechange-link {
	font-weight: 700;
	color: var(--turf);
	text-decoration: none;
}
.namechange-link:hover,
.namechange-link:focus-visible {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.namechange-headline {
		font-size: 1.35rem;
	}
}

/* The announcement bar sets display:flex, which otherwise overrides the [hidden]
   attribute the dismiss button toggles — so without this the × does nothing.
   This makes "dismiss" (and the remembered-dismissal on reload) actually hide it. */
.announcement-bar[hidden] {
	display: none;
}

/* ESPN league CTA — a direct, unmistakable jump into the league on ESPN. */
.espn-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
}

.espn-cta-text h2 {
	margin: 0.1rem 0 0.3rem;
}
.espn-cta-text p {
	margin: 0;
}

/* ESPN red, overriding the default gold .cta-button (declared later, same
   specificity, so this wins). */
.cta-button--espn {
	background: #d50a0a;
	color: #fff;
	box-shadow: 0 6px 18px rgba(213, 10, 10, 0.3);
}
.cta-button--espn:hover,
.cta-button--espn:focus-visible {
	color: #fff;
}

/* ============================================================
   The Office — the manager's command center
   ============================================================ */
.office-hero h1 {
	margin: 0.1rem 0 0.3rem;
}

.office-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.8rem;
	margin-bottom: 1.25rem;
}

.office-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.9rem 1rem;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.office-stat-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(244, 241, 232, 0.55);
}

.office-stat-value {
	font-size: 1.7rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.office-stat-sub {
	font-size: 1rem;
	font-weight: 600;
	color: rgba(244, 241, 232, 0.5);
}

.office-stat--form {
	grid-column: span 2;
}
.office-form {
	display: flex;
	gap: 0.3rem;
}
.form-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: var(--radius-sm);
	font-weight: 800;
	font-size: 0.85rem;
	color: #0b1220;
}
.form-chip--W { background: var(--turf); }
.form-chip--L { background: var(--shame); color: #fff; }
.form-chip--T { background: rgba(244, 241, 232, 0.4); }

.office-matchup {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.matchup-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.matchup-team {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
}
a.matchup-team:hover { text-decoration: underline; }
.matchup-score {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.matchup-vs {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(244, 241, 232, 0.45);
}

.office-soon {
	border: 1px dashed var(--border-strong);
	background: linear-gradient(180deg, rgba(245, 179, 1, 0.05), transparent);
}
.office-soon h2 { margin: 0.15rem 0 0.4rem; }
.office-soon-list {
	margin: 0.6rem 0 1.1rem;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	line-height: 1.5;
}
.office-soon-list strong { color: var(--text); }

/* Lineup table — starters then bench, bench dimmed. */
.lineup-slot {
	display: inline-block;
	min-width: 2.8rem;
	text-align: center;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-sm);
	background: var(--panel-raised);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
}
.live-tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--shame);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.lineup-player {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.lineup-face {
	flex: none;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--panel-raised);
	border: 1px solid var(--border);
}
.lineup-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.lineup-table tr.lineup-bench {
	opacity: 0.62;
}
.lineup-table tr.lineup-bench .lineup-slot {
	background: transparent;
	border: 1px solid var(--border);
}

/* Commish "writing…" state while a report generates in the background. */
.commish-writing {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--gold);
}
.commish-writing-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--gold);
	animation: commish-pulse 1s ease-in-out infinite;
}
@keyframes commish-pulse {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.commish-writing-dot { animation: none; }
}

/* ============================================================
   Site-wide "your color" hint — a subtle tint of the signed-in
   manager's franchise accent (--me-accent, set by a head script from
   the me_accent cookie). Deliberately restrained: a wash at the top,
   an accent line under the header, and accent-colored nav hovers.
   ============================================================ */
.has-me-accent body {
	background-image:
		radial-gradient(130% 55% at 50% -5%, color-mix(in srgb, var(--me-accent) 12%, transparent), transparent 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.has-me-accent .site-header {
	box-shadow: inset 0 -3px 0 -1px color-mix(in srgb, var(--me-accent) 55%, transparent);
}

.has-me-accent .site-nav a:not(.nav-active):not(.nav-espn):hover,
.has-me-accent .site-nav a:not(.nav-active):not(.nav-espn):focus-visible {
	color: var(--me-accent);
}

.has-me-accent .ticker {
	border-color: color-mix(in srgb, var(--me-accent) 35%, var(--border));
}

.has-me-accent .footer-version {
	color: color-mix(in srgb, var(--me-accent) 45%, rgba(244, 241, 232, 0.4));
}

/* ============================================================
   Office — Around the League (transactions) + Know Your Team (scandals)
   ============================================================ */
.tx-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tx-row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.tx-row:last-child {
	border-bottom: none;
}
.tx-badge {
	flex: none;
	min-width: 3.6rem;
	text-align: center;
	padding: 0.1rem 0.4rem;
	border-radius: var(--radius-sm);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	color: rgba(244, 241, 232, 0.75);
}
.tx-badge--WAIVER {
	border-color: var(--gold);
	color: var(--gold);
}
.tx-badge--TRADE {
	border-color: var(--turf);
	color: var(--turf);
}
.tx-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.tx-team {
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
}
.tx-team:hover {
	text-decoration: underline;
}
.tx-action {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tx-action--added {
	color: var(--turf);
}
.tx-action--dropped {
	color: var(--shame);
}
.tx-player {
	font-weight: 600;
}
.tx-bid {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gold);
}
.tx-when {
	flex: none;
	font-size: 0.8rem;
}

/* Know Your Team — the scandal counter. One loud number. */
.scandal-card {
	border-left: 3px solid var(--shame);
}
.scandal-counter {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0.2rem 0 0.6rem;
	flex-wrap: wrap;
}
.scandal-days {
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--shame);
	font-variant-numeric: tabular-nums;
}
.scandal-label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(244, 241, 232, 0.7);
}
.scandal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.scandal-row a {
	font-weight: 600;
	color: var(--text);
}
.scandal-clean {
	margin: 0.3rem 0 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: rgba(244, 241, 232, 0.85);
}

/* Player News — headlines on your roster. */
.pnews-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.pnews-row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.pnews-row:last-child {
	border-bottom: none;
}
.pnews-player {
	flex: none;
	font-weight: 700;
	color: var(--gold);
	min-width: 8rem;
}
.pnews-headline {
	flex: 1;
	min-width: 12rem;
	color: var(--text);
	font-weight: 500;
}
.pnews-when {
	flex: none;
	font-size: 0.8rem;
}

.office-cta {
	text-align: center;
}

/* Franchise avatars — uploaded photo or ESPN team logo. */
.manager-avatar {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	margin-bottom: 0.4rem;
}
.manager-hero-avatar {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--panel-raised);
	border: 2px solid var(--border-strong);
	margin-bottom: 0.5rem;
}

/* Customize — franchise photo uploader. */
.photo-block {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 1rem 1.1rem 1.2rem;
	margin: 0 0 1.25rem;
}
.photo-block legend {
	padding: 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
}
.photo-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.photo-current img,
.photo-current .photo-empty {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--panel-raised);
	border: 1px solid var(--border-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
}
.photo-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.photo-fields input[type="file"] {
	color: var(--text);
	font: inherit;
}

/* ============================================================
   THE LEAGUE — "Madden HUD" design system
   Green grass, orange pylons, challenge-flag yellow, high-tech panels.
   ============================================================ */
:root {
	--grass: #1f7a3d;
	--grass-2: #124d27;
	--chalk: rgba(255,255,255,0.55);
	--pylon: #ff6b1a;
	--flag: #ffd23f;
	--hud-line: rgba(47,191,113,0.35);
}

.league { display: flex; flex-direction: column; gap: 1.5rem; }

.lg-section { position: relative; }
.lg-head {
	display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
	margin-bottom: 0.9rem;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(90deg, var(--grass), var(--pylon) 60%, transparent) 1;
	padding-bottom: 0.4rem;
}
.lg-eyebrow {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--flag);
}
.lg-head h2 { margin: 0; font-size: 1.4rem; }

/* ---- matchup player-cards ---- */
.mup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1rem;
}
.mup {
	position: relative;
	background:
		linear-gradient(180deg, rgba(31,122,61,0.10), transparent 40%),
		var(--panel);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	box-shadow: var(--shadow);
	overflow: hidden;
}
.mup::before { /* pylon corner tick */
	content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 4px;
	background: var(--pylon);
}
.mup::after { /* grass baseline */
	content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
	background: repeating-linear-gradient(90deg, var(--grass) 0 26px, transparent 26px 30px);
	opacity: 0.5;
}
.mup--live { border-color: var(--flag); box-shadow: 0 0 22px -8px var(--flag), var(--shadow); }
.mup--belt::before { background: var(--gold); }

.mup-body { display: grid; grid-template-columns: 1fr; }
.mup-side {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
	padding: 0.75rem 0.9rem;
}
.mup-side.is-leading { background: linear-gradient(90deg, rgba(47,191,113,0.12), transparent); }
.mup-side.is-leading .mup-score { color: var(--turf); }

.mup-face {
	position: relative; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--panel-raised); border: 1px solid var(--border-strong);
	display: inline-flex; align-items: center; justify-content: center; overflow: visible;
}
.mup-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mup-emoji {
	position: absolute; right: -4px; bottom: -4px; font-size: 1rem;
	background: var(--panel); border-radius: 50%; line-height: 1; padding: 1px;
}
.mup-id { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mup-team { font-weight: 800; font-size: 1.02rem; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mup-team:hover { text-decoration: underline; }
.mup-mgr { font-size: 0.78rem; color: rgba(244,241,232,0.6); display: flex; align-items: center; gap: 0.35rem; }
.mup-seed { font-weight: 800; color: var(--flag); }
.mup-form { display: flex; gap: 3px; margin-top: 0.15rem; }
.fc { width: 9px; height: 9px; border-radius: 2px; display: inline-block; background: rgba(244,241,232,0.25); }
.fc--W { background: var(--turf); }
.fc--L { background: var(--shame); }
.fc--T { background: rgba(244,241,232,0.4); }
.mup-score { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.mup-mid { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; padding: 0.1rem 0.9rem 0.2rem; }
.mup-bar { flex: 1 1 100%; height: 6px; border-radius: 999px; overflow: hidden; display: flex; background: var(--panel-raised); }
.mup-bar-home { background: var(--turf); transition: width 0.6s ease; }
.mup-bar-away { background: var(--pylon); transition: width 0.6s ease; }
.mup-odds { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(244,241,232,0.6); }
.mup-odds b:first-child { color: var(--turf); }
.mup-odds b:last-child { color: #8fa3b5; }
.mup-odds i { font-style: normal; font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.mup-state {
	flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(244,241,232,0.55);
	display: inline-flex; align-items: center; gap: 0.3rem;
}
.mup--live .mup-state { color: var(--flag); }
.live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--flag); animation: live-pulse 1.1s ease-in-out infinite; }
@keyframes live-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Game of the Week hero */
.mup--gotw {
	margin-bottom: 1rem;
	border-color: var(--gold);
	background: linear-gradient(180deg, rgba(245,179,1,0.10), transparent 45%), var(--panel);
	box-shadow: 0 0 30px -10px var(--gold), var(--shadow);
}
.mup--gotw::before { background: var(--gold); width: 100%; }

/* Shame of the Week hero: same stage, copper light — the cellar with a spotlight on the ladder */
.mup--shame {
	border-color: #e07a3f;
	background: linear-gradient(180deg, rgba(224,122,63,0.12), transparent 45%), var(--panel);
	box-shadow: 0 0 30px -10px #e07a3f, var(--shadow);
}
.mup--shame::before { background: #e07a3f; width: 100%; }
.mup--shame .mup-banner { background: linear-gradient(90deg, #e07a3f, #b85a28); color: #1a0d00; }
.lg-mast-gotw--shame .lg-mast-gotw-tag { color: #e07a3f; }

/* Popout tabs: Box Score | Projection */
.det-tabs { display: flex; gap: .4rem; margin-bottom: .7rem; }
.det-tab {
	appearance: none; border: 1px solid rgba(255,255,255,0.18); background: transparent;
	color: inherit; font: inherit; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
	padding: .35rem .7rem; border-radius: 8px; cursor: pointer;
}
.det-tab.is-active { border-color: var(--gold, #f5b301); color: var(--gold, #f5b301); }
.det-proj-svg { width: 100%; height: auto; display: block; }
.det-proj-legend { margin-top: .4rem; }

/* Autopilot health strip on /admin: a dead loop must be unmissable */
.adminp-alarm {
	background: rgba(220,60,60,0.14); border: 1px solid rgba(220,60,60,0.6);
	border-radius: 8px; padding: .6rem .8rem; font-weight: 700; margin-bottom: .6rem;
}
.adminp-health { margin-bottom: .6rem; }

/* Popout projections + the pissed-off bench */
.det-proj { display: block; font-style: normal; font-size: .62rem; font-weight: 600; color: rgba(255,255,255,0.5); letter-spacing: .06em; text-transform: uppercase; }
.det-angry { font-size: .85em; }
.det-row--angry { background: rgba(220,60,60,0.10); box-shadow: inset 3px 0 0 rgba(220,60,60,0.75); }
.det-row--angry .det-player > em { color: rgba(255,140,120,0.85); }
.mup-banner {
	background: linear-gradient(90deg, var(--gold), #d99a00);
	color: #1a1200; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
	font-size: 0.78rem; padding: 0.3rem 0.9rem;
}
.mup--gotw .mup-score { font-size: 2.3rem; }
.mup-flag {
	background: rgba(245,179,1,0.14); color: var(--gold); font-weight: 800; font-size: 0.7rem;
	text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.9rem;
}

/* ---- standings ladder ---- */
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rung {
	display: grid;
	grid-template-columns: 2.2rem 2.6rem 1fr auto auto auto auto;
	align-items: center; gap: 0.7rem;
	padding: 0.5rem 0.8rem;
	background: var(--panel);
	border-left: 3px solid transparent;
}
.rung--playoff { border-left-color: var(--turf); }
.rung-seed { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--flag); text-align: center; }
.rung-face { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.rung-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rung-face .mup-emoji { font-size: 0.8rem; }
.rung-id { min-width: 0; display: flex; flex-direction: column; }
.rung-team { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rung-team:hover { text-decoration: underline; }
.rung-mgr { font-size: 0.75rem; color: rgba(244,241,232,0.55); }
.rung-form { display: flex; gap: 3px; }
.rung-rec { font-weight: 800; font-variant-numeric: tabular-nums; }
.rung-pts { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 2.6rem; }
.rung-pts b { font-weight: 800; font-variant-numeric: tabular-nums; }
.rung-pts small { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.06em; color: rgba(244,241,232,0.4); margin-top: 1px; }
.rung-pf { font-size: 1rem; }
.rung-pts--against b { color: rgba(244,241,232,0.55); font-size: 0.86rem; }
@media (max-width: 560px) { .rung { grid-template-columns: 1.8rem 2.2rem 1fr auto auto; } .rung-form, .rung-pts--against { display: none; } }

/* ---- rails: news wire + trash-talk chat ---- */
.lg-rails { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.wire, .chat { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; }
.wire-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wire-row:last-child { border-bottom: none; }
.wire-badge { flex: none; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; background: var(--panel-raised); border: 1px solid var(--border-strong); color: rgba(244,241,232,0.7); }
.wire-badge--commish { background: rgba(245,179,1,0.16); border-color: var(--gold); color: var(--gold); }
.wire-badge--rename { background: rgba(47,191,113,0.16); border-color: var(--turf); color: var(--turf); }
.wire-badge--scandal { background: rgba(192,57,43,0.18); border-color: var(--shame); color: #e8776b; }
.wire-title { flex: 1; min-width: 10rem; font-weight: 600; color: var(--text); text-decoration: none; }
.wire-title:hover { text-decoration: underline; }
.wire-when, .chat-when { flex: none; font-size: 0.78rem; }

.smack-inline { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.smack-inline input { flex: 1; padding: 0.55rem 0.7rem; background: var(--panel-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font: inherit; }
.chat-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chat-row:last-child { border-bottom: none; }
.chat-who { flex: none; font-weight: 700; color: var(--flag); text-decoration: none; }
.chat-body { flex: 1; min-width: 8rem; }

.hud-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }

@media (max-width: 760px) {
	.lg-rails { grid-template-columns: 1fr; }
	.mup-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.live-dot { animation: none; }
}

/* ============================================================
   THE LEAGUE — projected meter, commish picker, expand/flip modal
   ============================================================ */
.mup[data-mup] { cursor: pointer; }
.mup[data-mup]:hover { border-color: var(--flag); }
.mup[data-mup]:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }

.mup-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.mup-proj { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(244,241,232,0.45); text-transform: uppercase; }
.mup--gotw .mup-proj { color: rgba(245,179,1,0.7); }

.mup-hint { font-size: 0.72rem; margin: 0.5rem 0 0; text-align: center; }

/* commish Game-of-the-Week picker */
.gotw-set {
	display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
	background: linear-gradient(90deg, rgba(245,179,1,0.10), transparent);
	border: 1px dashed rgba(245,179,1,0.5);
	padding: 0.55rem 0.8rem; margin-bottom: 1rem; border-radius: var(--radius-sm);
}
.gotw-set label { font-weight: 800; font-size: 0.8rem; color: var(--gold); }
.gotw-set select {
	flex: 1; min-width: 12rem; padding: 0.4rem 0.6rem; font: inherit;
	background: var(--panel-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}

/* ---- expand / flip modal ---- */
body.modal-open { overflow: hidden; }
.mup-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mup-modal[hidden] { display: none; }
.mup-modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,18,0.82); backdrop-filter: blur(3px); }
.mup-modal { padding: 0.75rem; }
.mup-modal-card {
	position: relative; z-index: 1; width: min(76rem, 97vw); max-height: 94vh; overflow-y: auto;
	background: var(--panel); border: 1px solid var(--flag);
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
	box-shadow: 0 0 40px -8px rgba(255,210,63,0.4), var(--shadow);
}
.mup-modal-body { padding: 1rem 1.2rem; }
/* roomier lineup rows in the enlarged blow-up */
.mup-modal .det-rosters { gap: 1.5rem; }
.mup-modal .det-row { padding: 0.42rem 0.4rem; grid-template-columns: 2.6rem 2rem 1fr auto; }
.mup-modal .det-face { width: 2rem; height: 2rem; }
.mup-modal .det-player { font-size: 0.9rem; }
.mup-modal .det-player em { font-size: 0.7rem; }
.mup-modal .det-pts { font-size: 1.15rem; }
.mup-modal .det-scores { margin-bottom: 1.1rem; }
.mup-modal .det-score { font-size: 2rem; }
.mup-modal-title { font-size: 1.05rem; }
.mup-modal-bar {
	display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.5rem;
	padding: 0.55rem 0.8rem; border-bottom: 2px solid var(--pylon);
	position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.mup-modal-title { grid-column: 2; text-align: center; font-size: 0.95rem; }
.mup-nav, .mup-modal-close {
	width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
	background: var(--panel-raised); color: var(--text); border: 1px solid var(--border-strong);
	border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mup-nav:hover, .mup-modal-close:hover { border-color: var(--flag); color: var(--flag); }
.mup-modal-body { padding: 0.9rem; }

.det-scores { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.det-team { display: flex; align-items: center; gap: 0.5rem; }
.det-team--away { flex-direction: row-reverse; text-align: right; }
.det-emoji { font-size: 1.6rem; }
.det-name { display: flex; flex-direction: column; font-weight: 800; }
.det-name em { font-style: normal; font-weight: 500; font-size: 0.72rem; color: rgba(244,241,232,0.55); }
.det-score { font-size: 1.7rem; font-weight: 800; }
.det-team.is-leading .det-score { color: var(--turf); }
.det-vs { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(244,241,232,0.55); text-align: center; }

.det-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.det-lineup { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.det-row { display: grid; grid-template-columns: 2.4rem 1.8rem 1fr auto; align-items: center; gap: 0.4rem; padding: 0.28rem 0.35rem; background: var(--panel-raised); }
.det-row--togo { opacity: 0.55; }
.det-slot { font-size: 0.62rem; font-weight: 800; color: var(--pos, var(--flag)); text-align: center; }
.det-face { width: 1.8rem; height: 1.8rem; border-radius: 50%; overflow: hidden; background: var(--panel); }
.det-face img { width: 100%; height: 100%; object-fit: cover; }
.det-player { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }
.det-player { font-size: 0.82rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.det-player em { font-style: normal; font-weight: 500; font-size: 0.66rem; color: var(--turf); white-space: normal; overflow: visible; }
.det-pts { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
	.det-rosters { grid-template-columns: 1fr; }
	.det-lineup--away .det-row { grid-template-columns: 2.4rem 1.8rem 1fr auto; direction: ltr; }
	.det-lineup--away .det-player { text-align: left; }
	.det-scores { grid-template-columns: 1fr auto 1fr; }
}

/* ---- design push: a real grass field behind the scoreboard ---- */
.lg-section:first-of-type .lg-head,
.lg-section .lg-head {
	position: relative;
}
.mup-grid, .mup--gotw {
	position: relative;
}
/* Turf backdrop panel wrapping the scoreboard cards */
.lg-section:has(.mup-grid) {
	padding: 1rem 1rem 1.2rem;
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, rgba(18,77,39,0.55), rgba(11,18,32,0.2)),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 84px),
		repeating-linear-gradient(0deg, var(--grass) 0 46px, var(--grass-2) 46px 92px);
	border: 1px solid rgba(47,191,113,0.3);
	box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
}
.lg-section:has(.mup-grid) .lg-head { border-image: linear-gradient(90deg, #fff, var(--flag) 60%, transparent) 1; }
.lg-section:has(.mup-grid) .lg-eyebrow { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.lg-section:has(.mup-grid) .lg-head h2 { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }

/* ============================================================
   LEAGUE DIRECTORY / CONFIG  (/config)
   ============================================================ */
.nav-config { font-size: 1.05rem; text-decoration: none; opacity: 0.8; }
.nav-config:hover { opacity: 1; }

.cfg { display: flex; flex-direction: column; gap: 0.6rem; }
.cfg-lede { margin: 0 0 0.6rem; }
.cfg-table { display: flex; flex-direction: column; gap: 3px; }
.cfg-row {
	display: grid;
	grid-template-columns: minmax(11rem, 1.4fr) 1.2fr 1fr 1fr 0.8fr 1.3fr;
	align-items: center; gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	background: var(--panel);
	border-left: 3px solid transparent;
}
.cfg-row--head {
	background: transparent; padding-bottom: 0.3rem; border-bottom: 2px solid var(--pylon);
	font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--flag);
}
.cfg-row--inactive { opacity: 0.5; }
.cfg-row--me { border-left-color: var(--turf); background: linear-gradient(90deg, rgba(47,191,113,0.10), var(--panel)); }

.cfg-mgr { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.cfg-face { position: relative; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none; background: var(--panel-raised); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.cfg-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cfg-face .mup-emoji { font-size: 0.8rem; }
.cfg-names { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.cfg-name { font-weight: 800; color: var(--text); text-decoration: none; }
.cfg-name:hover { text-decoration: underline; }
.cfg-tag { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid var(--border-strong); color: rgba(244,241,232,0.6); }
.cfg-tag--me { background: rgba(47,191,113,0.16); border-color: var(--turf); color: var(--turf); }
.cfg-tag--claimed { background: rgba(245,179,1,0.14); border-color: var(--gold); color: var(--gold); }
.cfg-tag--open { color: rgba(244,241,232,0.4); }

.cfg-team { font-weight: 600; }
.cfg-espn, .cfg-slack, .cfg-seen { font-size: 0.84rem; color: rgba(244,241,232,0.75); overflow-wrap: anywhere; }
.cfg-rivals { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rival-chip { font-size: 0.72rem; font-weight: 700; text-decoration: none; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(192,57,43,0.16); border: 1px solid var(--shame); color: #e8776b; }
.rival-chip:hover { background: rgba(192,57,43,0.28); }

.cfg-edit { grid-column: 1 / -1; margin-top: 0.2rem; }
.cfg-edit > summary { cursor: pointer; font-size: 0.74rem; font-weight: 800; color: var(--flag); width: fit-content; list-style: none; }
.cfg-edit > summary::-webkit-details-marker { display: none; }
.cfg-edit > summary::before { content: "✎ "; }
.cfg-form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin-top: 0.6rem; padding: 0.7rem; background: var(--panel-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.cfg-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; color: rgba(244,241,232,0.7); }
.cfg-form input, .cfg-form select { padding: 0.4rem 0.55rem; font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.cfg-form select[multiple] { min-width: 12rem; }

/* rival matchup accents on The League */
.mup--rival { border-color: var(--shame); }
.mup--rival::before { background: var(--shame); }
.mup-rivaltag { background: rgba(192,57,43,0.16); color: #e8776b; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.9rem; }

@media (max-width: 820px) {
	.cfg-row--head { display: none; }
	.cfg-row { grid-template-columns: 1fr 1fr; row-gap: 0.35rem; }
	.cfg-mgr { grid-column: 1 / -1; }
	.cfg-espn::before { content: "ESPN: "; color: rgba(244,241,232,0.4); }
	.cfg-slack::before { content: "Slack: "; color: rgba(244,241,232,0.4); }
	.cfg-seen::before { content: "Seen: "; color: rgba(244,241,232,0.4); }
	.cfg-rivals { grid-column: 1 / -1; }
}

/* ============================================================
   THE WIRE — one unified, postable stream
   ============================================================ */
.wire-post { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.wire-post input { flex: 1; padding: 0.6rem 0.75rem; background: var(--panel-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font: inherit; }
.wire-post input:focus { outline: none; border-color: var(--flag); }

.wire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wire-item {
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem;
	padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--border);
}
.wire-item:last-child { border-bottom: none; }
.wire-item--post { background: linear-gradient(90deg, rgba(255,179,0,0.05), transparent); }
.wire-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.wire-title { font-weight: 700; color: var(--text); text-decoration: none; }
a.wire-title:hover { text-decoration: underline; }
.wire-body { color: rgba(244,241,232,0.9); overflow-wrap: anywhere; }
.wire-who { font-weight: 800; color: var(--flag); text-decoration: none; }
.wire-who:hover { text-decoration: underline; }
.wire-when { flex: none; font-size: 0.78rem; white-space: nowrap; }

.wire-badge {
	flex: none; align-self: baseline; padding: 0.1rem 0.5rem; border-radius: 999px;
	font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
	background: var(--panel-raised); border: 1px solid var(--border-strong); color: rgba(244,241,232,0.7);
}
.wire-badge--post     { background: rgba(255,179,0,0.16); border-color: var(--hive); color: var(--hive); }
.wire-badge--commish  { background: rgba(245,179,1,0.16); border-color: var(--gold); color: var(--gold); }
.wire-badge--rename   { background: rgba(47,191,113,0.16); border-color: var(--turf); color: var(--turf); }
.wire-badge--scandal  { background: rgba(192,57,43,0.18); border-color: var(--shame); color: #e8776b; }
.wire-badge--add      { background: rgba(47,191,113,0.16); border-color: var(--turf); color: var(--turf); }
.wire-badge--drop     { background: rgba(192,57,43,0.16); border-color: var(--shame); color: #e8776b; }
.wire-badge--history  { background: rgba(245,179,1,0.12); border-color: var(--gold); color: var(--gold); }

/* ============================================================
   MY TEAM — the 2.5-D franchise locker room (/office)
   Scene is tinted by --team / --team2 (set inline from the theme).
   ============================================================ */
.lk-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.lk-crest{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;overflow:visible;
  background:linear-gradient(145deg,var(--me-accent,var(--turf)),rgba(0,0,0,.4));box-shadow:0 6px 18px rgba(0,0,0,.5)}
.lk-crest img{width:100%;height:100%;border-radius:12px;object-fit:cover}
.lk-crest-emoji{position:absolute;bottom:-6px;right:-6px;font-size:.95rem;line-height:1;padding:1px;border-radius:50%;
  background:rgba(8,12,20,.9);box-shadow:0 2px 5px rgba(0,0,0,.5)}
.lk-id{display:flex;flex-direction:column;min-width:0}
.lk-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.lk-team{font-size:1.5rem;font-weight:900;line-height:1.05}
.lk-motto{font-size:.8rem;color:rgba(244,241,232,.6);font-style:italic}
.lk-rec{margin-left:auto;text-align:right}
.lk-rec b{font-size:1.4rem}
.lk-rec span{display:block;font-size:.7rem;color:rgba(244,241,232,.55);letter-spacing:.06em;text-transform:uppercase}

.locker-room{position:relative;height:560px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--team) 22%,#0b1220), #070c16 70%);
  border:1px solid var(--border);box-shadow:inset 0 0 120px rgba(0,0,0,.6)}
.lk-floor{position:absolute;left:-5%;right:-5%;bottom:0;height:190px;transform:perspective(700px) rotateX(58deg);transform-origin:bottom;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 60px),linear-gradient(#0d1626,#0a1220);
  border-top:2px solid color-mix(in srgb,var(--team) 40%,#000)}
.lk-midlogo{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:3.4rem;opacity:.16}

.lk-lockers{position:absolute;top:22px;left:22px;right:22px;height:150px;display:flex;gap:8px}
.lk-locker{flex:1;border-radius:8px 8px 4px 4px;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--team) 55%,#0a1018),color-mix(in srgb,var(--team) 20%,#0a1018));
  border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 -18px 30px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.08)}
.lk-locker::after{content:"";position:absolute;left:50%;top:12px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:var(--team2);box-shadow:0 0 6px var(--team2)}
.lk-locker--me{background:linear-gradient(180deg,var(--team2),color-mix(in srgb,var(--team2) 40%,#000));box-shadow:0 0 22px -4px var(--team2)}
.lk-plate{position:absolute;bottom:8px;left:5px;right:5px;font-size:.48rem;text-align:center;letter-spacing:.03em;text-transform:uppercase;color:#06121f;font-weight:800;background:rgba(255,255,255,.35);border-radius:3px;padding:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lk-screen{position:absolute;top:92px;left:50%;transform:translateX(-50%);width:360px;max-width:46vw;border-radius:10px;z-index:3;
  background:linear-gradient(#04202a,#02141b);border:6px solid #05303d;padding:12px 16px;
  box-shadow:0 0 40px -6px color-mix(in srgb,var(--turf) 60%,transparent),0 14px 30px rgba(0,0,0,.6)}
.lk-screen-tag{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--flag)}
.lk-scoreline{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.lk-scoreline .t{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.lk-scoreline .n{font-size:1.7rem;font-weight:900;font-variant-numeric:tabular-nums;color:#5f7488}
.lk-scoreline .n.lead{color:var(--turf)}
.lk-scanbar{height:5px;border-radius:3px;margin-top:8px;background:linear-gradient(90deg,var(--turf) 58%,var(--pylon) 58%)}

.lk-shelf{position:absolute;left:22px;bottom:150px;width:220px;z-index:5}
.lk-shelf-lbl{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.6);margin-bottom:6px}
.lk-trophies{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;background:linear-gradient(#0e1a2b,#0a1522);border:1px solid var(--border);border-radius:8px;padding:10px;box-shadow:0 10px 20px rgba(0,0,0,.4),inset 0 -3px 0 color-mix(in srgb,var(--gold) 40%,#000)}
.lk-trophies--empty{font-size:.68rem;color:rgba(244,241,232,.5)}
.lk-trophy{font-size:1.6rem;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.lk-trophy--glow{filter:drop-shadow(0 0 8px var(--gold))}

.lk-side{position:absolute;right:22px;top:40px;width:250px;max-width:40vw;display:flex;flex-direction:column;gap:12px;z-index:5}
.lk-board{background:#eef1e9;color:#14202c;border-radius:8px;padding:10px 12px;border:6px solid #6b4a2a;box-shadow:0 12px 26px rgba(0,0,0,.5)}
.lk-board h4{margin:0 0 6px;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#0b6b5f}
.lk-xo{font-size:.72rem;line-height:1.5;font-family:"Courier New",monospace}
.lk-xo b{color:#0b6b5f}
.lk-cork{background:repeating-linear-gradient(45deg,#b5793f,#b5793f 6px,#a86c35 6px,#a86c35 12px);border-radius:8px;padding:10px;box-shadow:0 12px 26px rgba(0,0,0,.5)}
.lk-cork h4{margin:0 0 6px;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:#3a2510}
.lk-pin{background:#fff8ec;color:#1a1410;font-size:.6rem;border-radius:4px;padding:4px 6px;margin-bottom:5px;box-shadow:0 3px 6px rgba(0,0,0,.35);position:relative}
.lk-pin::before{content:"";position:absolute;top:-4px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--shame)}
.lk-pin b{color:#1a6b3a}

.lk-coaches{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center}
.lk-coach{display:flex;flex-direction:column;align-items:center}
.lk-coach-name{margin-top:-4px;font-size:.72rem;font-weight:800;text-align:center}
.lk-coach-name small{display:block;color:var(--team2);font-weight:700;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.lk-coach-stats{display:flex;gap:3px;margin-top:4px;font-size:1rem;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}

/* coach figure: sizing + layer toggles */
.coach-fig{--team-sh:color-mix(in srgb,var(--team,#2FBF71) 60%,#000);display:inline-block;width:132px}
.coach-svg{width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 14px 12px rgba(0,0,0,.55))}
/* character wheel: every cosmetic group is hidden until the coach's chosen
   classes (hat-*, hair-*, outfit-*, gear-*) switch it on. bald/none/jersey
   defaults simply match no rule and show nothing extra. */
.coach-fig .opt{display:none}
.coach-fig.hat-cap .opt--hat-cap,.coach-fig.hat-beanie .opt--hat-beanie,.coach-fig.hat-visor .opt--hat-visor,.coach-fig.hat-headband .opt--hat-headband,.coach-fig.hat-bucket .opt--hat-bucket{display:inline}
.coach-fig.hair-short .opt--hair-short,.coach-fig.hair-medium .opt--hair-medium,.coach-fig.hair-long .opt--hair-long,.coach-fig.hair-mohawk .opt--hair-mohawk,.coach-fig.hair-afro .opt--hair-afro,.coach-fig.hair-buzz .opt--hair-buzz{display:inline}
.coach-fig.outfit-polo .opt--outfit-polo,.coach-fig.outfit-hoodie .opt--outfit-hoodie,.coach-fig.outfit-tee .opt--outfit-tee,.coach-fig.outfit-tracksuit .opt--outfit-tracksuit,.coach-fig.outfit-jersey .opt--outfit-jersey{display:inline}
.coach-fig.gear-shades .opt--gear-shades,.coach-fig.gear-whistle .opt--gear-whistle,.coach-fig.gear-clipboard .opt--gear-clipboard,.coach-fig.gear-towel .opt--gear-towel,.coach-fig.gear-headset .opt--gear-headset{display:inline}
.coach-fig .coach-trophy,.coach-fig .coach-chicken{display:none}
.coach-fig.holds-trophy .coach-trophy{display:inline}
.coach-fig.holds-chicken .coach-chicken{display:inline}

.lk-binders{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;margin-top:14px;padding:14px 16px 10px;border-radius:12px;
  background:linear-gradient(#0e1a2b,#0a1522);border:1px solid var(--border);box-shadow:inset 0 -6px 0 #241a10}
.lk-binders-lbl{writing-mode:vertical-rl;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.6);margin-right:6px}
.lk-binder{width:34px;height:96px;border-radius:3px 5px 5px 3px;display:grid;place-items:center;font-size:.6rem;font-weight:800;color:#f4f1e8;text-decoration:none;transform:rotate(-1deg);box-shadow:2px 4px 8px rgba(0,0,0,.5);writing-mode:vertical-rl}
.lk-binder:nth-child(3n){background:linear-gradient(#245b53,#123832)}
.lk-binder:nth-child(3n+1){background:linear-gradient(#5a4a1e,#3a300f)}
.lk-binder:nth-child(3n+2){background:linear-gradient(#3a3550,#241f38)}
.lk-binder--champ{outline:2px solid var(--gold);box-shadow:0 0 14px -2px var(--gold)}
.lk-binder--last{outline:2px solid var(--shame)}
.lk-binder:hover{transform:rotate(-1deg) translateY(-4px)}

/* big, obvious "edit my team" call-to-action in your own office */
.lk-editcta{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  margin:0 0 14px;padding:.85rem 1.2rem;border-radius:var(--radius);text-decoration:none;
  font-size:1.05rem;font-weight:900;letter-spacing:.01em;color:#0b1220;
  background:linear-gradient(180deg,var(--gold),#d99a08);
  box-shadow:0 10px 22px -6px color-mix(in srgb,var(--gold) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
  border:1px solid #b7830a;transition:transform .12s ease,box-shadow .12s ease}
.lk-editcta:hover{transform:translateY(-1px);box-shadow:0 14px 26px -6px color-mix(in srgb,var(--gold) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.lk-editcta span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.lk-editcta b{font-size:1.2rem;line-height:1}
.taunts{margin:0 0 14px;padding:.8rem 1rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.taunts-eyebrow{display:block;margin-bottom:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.taunts-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
.taunt-form{margin:0}
.taunt-btn{padding:.5rem .8rem;border-radius:999px;border:1px solid #b7830a;background:transparent;color:inherit;font:inherit;font-size:.85rem;text-align:left;cursor:pointer}
.taunt-btn:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)}

.lk-edit{margin-top:14px;scroll-margin-top:1rem}
.lk-edit>summary{cursor:pointer;font-size:.9rem;font-weight:800;color:var(--gold);width:fit-content;list-style:none}
.lk-edit>summary::-webkit-details-marker{display:none}
.lk-edit-form{margin-top:12px;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.lk-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.lk-edit label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;font-weight:700;color:rgba(244,241,232,.7)}
.lk-edit input,.lk-edit select{padding:.45rem .55rem;font:inherit;background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.lk-edit input[type="color"]{padding:2px;height:2.2rem}
.lk-coach-edit{margin-top:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lk-coach-edit legend{font-size:.7rem;font-weight:800;color:var(--team2,var(--gold));text-transform:uppercase;letter-spacing:.06em}
.lk-edit button{margin-top:12px}

@media (max-width:760px){
  .locker-room{height:auto;min-height:640px}
  .lk-side{position:static;width:auto;max-width:none;margin:12px}
  .lk-shelf{position:static;width:auto;margin:12px}
  .lk-screen{max-width:90vw;width:auto;left:12px;right:12px;transform:none}
  .lk-coaches{position:static;transform:none;margin-top:12px}
  .lk-lockers{position:static;margin:12px}
}

/* ============================================================
   MY TEAM v2 — the pseudorealistic franchise HQ scene
   ============================================================ */
.lroom{position:relative;height:640px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--team) 20%,#0b1220), #05090f 72%);
  border:1px solid var(--border);box-shadow:inset 0 0 140px rgba(0,0,0,.7)}
.lr-floor{position:absolute;left:-6%;right:-6%;bottom:0;height:210px;transform:perspective(760px) rotateX(60deg);transform-origin:bottom;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 2px,transparent 2px 64px),linear-gradient(#0e1728,#0a1220);
  border-top:2px solid color-mix(in srgb,var(--team) 40%,#000)}
.lr-logo{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:3rem;opacity:.14;z-index:1}

/* ---- trophy case ---- */
.case{position:absolute;left:22px;top:30px;width:190px;height:384px;z-index:3;border-radius:10px;
  background:linear-gradient(150deg,#3a2a17,#241708 60%,#1a1006);
  border:3px solid #12100a;box-shadow:0 24px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.04);
  padding:8px;display:flex;flex-direction:column}
.case-glow{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:radial-gradient(80% 30% at 50% 0%, color-mix(in srgb,var(--team2) 45%,transparent), transparent 70%);
  box-shadow:inset 0 -26px 40px -10px color-mix(in srgb,var(--team) 55%,transparent)}
.case-head{position:relative;z-index:1;text-align:center;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--team2);padding:2px 0 6px}
.case-shelves{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,rgba(180,220,255,.10),rgba(120,160,220,.04));border-radius:6px;
  border:1px solid rgba(180,220,255,.14);overflow:hidden}
.case-shelves::after{content:"";position:absolute;top:0;left:-30%;width:40%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);pointer-events:none}
.case-shelf{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;justify-content:center;padding:6px;
  border-bottom:3px solid rgba(0,0,0,.5);box-shadow:inset 0 -8px 12px rgba(0,0,0,.4)}
.case-shelf:last-child{border-bottom:none}
.tobj-wrap{filter:drop-shadow(0 3px 2px rgba(0,0,0,.6));display:flex;flex-direction:column;align-items:center;gap:1px}
.tobj{width:26px;height:auto;image-rendering:pixelated}
.tobj-wrap--belt .tobj{width:34px}
.tobj-year{font-size:.5rem;font-weight:800;letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tobj-year--shame{font-size:.44rem;color:rgba(244,241,232,.55)}
.case-empty{font-size:.6rem;color:rgba(244,241,232,.35)}

/* ---- big-screen TV ---- */
.tv{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(448px,46vw);z-index:2}
.tv-screen{position:relative;border-radius:8px;background:#05070c;border:8px solid #0a0d14;
  box-shadow:0 0 60px -10px color-mix(in srgb,var(--turf) 55%,transparent),0 22px 40px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.03);
  overflow:hidden}
.tv-broadcast{position:relative;padding:14px 18px;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
  radial-gradient(120% 80% at 50% 120%, color-mix(in srgb,var(--team) 26%,#03121a), #02090f)}
.tv-bug{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:.12em;color:var(--flag)}
.tv-line{display:flex;align-items:center;gap:10px;margin-top:8px}
.tv-chip{width:12px;height:16px;border-radius:2px;flex:none;box-shadow:0 0 6px rgba(0,0,0,.5)}
/* the two sides are colour-keyed to the win bar: you = green (turf), them =
   orange (pylon), so the bar's halves read against the names */
.tv-chip--me{background:var(--turf)}
.tv-chip--opp{background:var(--pylon)}
.tv-team--me{color:var(--turf)}
.tv-team--opp{color:var(--pylon)}
.tv-team{flex:1;font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tv-score{font-size:2rem;font-weight:900;font-variant-numeric:tabular-nums;color:#4f6578;letter-spacing:-.02em}
.tv-score.lead{color:var(--turf);text-shadow:0 0 14px color-mix(in srgb,var(--turf) 60%,transparent)}
.tv-winbar{height:6px;border-radius:3px;margin-top:12px;overflow:hidden;background:var(--pylon)}
.tv-winbar span{display:block;height:100%;background:var(--turf);transition:width .6s ease}
.tv-odds{display:flex;align-items:center;justify-content:space-between;margin-top:5px;font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;color:rgba(244,241,232,.72)}
.tv-odds-me{color:var(--turf);text-shadow:0 0 10px color-mix(in srgb,var(--turf) 45%,transparent)}
.tv-odds-opp{color:var(--pylon)}
.tv-odds-lbl{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,232,.45)}
/* TV channel flipper */
.tv-channel{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2}
.tv-ch{flex:none;min-width:2.6rem;height:2.1rem;padding:0 .5rem;font-size:1.1rem;font-weight:900;line-height:1;cursor:pointer;color:#04140b;
  background:linear-gradient(180deg,var(--turf),#1c9c5c);border:1px solid #0c7a45;border-radius:8px;
  box-shadow:0 3px 8px -2px color-mix(in srgb,var(--turf) 55%,transparent)}
.tv-ch:hover{filter:brightness(1.1)}
.tv-ch:active{transform:translateY(1px)}
.tv-ch-label{min-width:6.5rem;text-align:center;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.8)}
.tv-idle{margin-top:8px;font-size:.72rem;color:rgba(244,241,232,.5)}
.tv-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0 18%,transparent 40%)}
.tv-mount{width:70px;height:12px;margin:0 auto;background:linear-gradient(#0a0d14,#05070c);border-radius:0 0 6px 6px;box-shadow:0 8px 14px rgba(0,0,0,.6)}

/* ---- framed team photo ---- */
.photo{position:absolute;right:22px;top:30px;width:224px;z-index:3;transform:rotate(1.2deg);
  background:linear-gradient(150deg,#6b4a2a,#3f2a15);padding:10px 10px 4px;border-radius:4px;
  box-shadow:0 20px 34px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.3)}
.photo-inner{background:linear-gradient(180deg,#dcae7e,#b98a52);border-radius:2px;padding:10px 8px 4px;position:relative;filter:saturate(.92)}
.photo-inner::after{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:inset 0 0 30px rgba(60,30,0,.5);pointer-events:none}
.photo-faces{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:flex-end}
.pf{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#2a3444;border:2px solid #efe0c8;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.pf img{width:100%;height:100%;object-fit:cover;object-position:top center}
.photo .pf--coach{width:52px;height:auto;border:none;background:none;box-shadow:none;order:-1;margin:0 2px;overflow:visible;display:flex;align-items:flex-end}
.photo .pf--coach .coach-svg{width:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.photo-plate{margin-top:6px;text-align:center;font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a2510}

/* ---- background bookshelf (history, dim) ---- */
.shelfbg{position:absolute;left:24px;bottom:18px;width:168px;z-index:2;opacity:.62;transition:opacity .2s}
.shelfbg:hover{opacity:1}
.shelfbg-lbl{display:block;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.5);margin-bottom:4px;padding-left:4px}
.shelfbg-books{display:flex;gap:3px;align-items:flex-end;padding:6px 6px 3px;border-radius:3px;
  background:linear-gradient(#20160c,#160f07);box-shadow:inset 0 -5px 0 #0c0803,0 8px 16px rgba(0,0,0,.5)}
.book{width:15px;height:56px;border-radius:2px;writing-mode:vertical-rl;display:grid;place-items:center;
  font-size:.5rem;font-weight:800;color:rgba(244,241,232,.85);text-decoration:none;box-shadow:1px 2px 3px rgba(0,0,0,.5)}
.book:nth-child(4n){background:linear-gradient(#2c4f49,#173029);height:60px}
.book:nth-child(4n+1){background:linear-gradient(#4a3f22,#2c2510);height:52px}
.book:nth-child(4n+2){background:linear-gradient(#3a2036,#241426);height:58px}
.book:nth-child(4n+3){background:linear-gradient(#2a3550,#1a2238);height:54px}
.book--champ{outline:1px solid var(--gold);box-shadow:0 0 8px -1px var(--gold)}
.book--last{outline:1px solid var(--shame)}
.book:hover{transform:translateY(-4px)}

/* ---- the coach ---- */
.lr-coach{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center}
.lr-coach-name{margin-top:-4px;font-size:.74rem;font-weight:800;text-align:center}
.lr-coach-name small{display:block;color:var(--team2);font-weight:700;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
.lr-coach-stats{display:flex;gap:3px;margin-top:4px;font-size:1rem;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}

/* ---- opponent scouting ---- */
.scout{position:absolute;right:22px;bottom:18px;width:268px;z-index:4;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#141c2c,#0e1420);border:1px solid var(--border-strong);box-shadow:0 18px 34px rgba(0,0,0,.6)}
.scout--rival{border-color:var(--shame);box-shadow:0 0 26px -8px var(--shame),0 18px 34px rgba(0,0,0,.6)}
.scout-head{font-size:.6rem;font-weight:900;letter-spacing:.1em;padding:6px 12px;color:#0b1220;
  background:linear-gradient(90deg,var(--flag),#e0a800)}
.scout--rival .scout-head{background:linear-gradient(90deg,var(--shame),#7d251e);color:#fff}
.scout-body{display:flex;gap:10px;padding:10px 12px;align-items:center}
.scout .scout-coach{width:60px;flex:none;align-self:flex-end}
.scout .scout-coach .coach-svg{width:100%}
.scout-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.scout-team{font-weight:800;font-size:.95rem;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scout-team:hover{text-decoration:underline}
.scout-mgr{font-size:.72rem;color:rgba(244,241,232,.7)}
.scout-h2h{font-size:.68rem;color:rgba(244,241,232,.55)}
.scout-h2h b{color:var(--flag)}
.scout-motto{font-size:.68rem;font-style:italic;color:rgba(244,241,232,.6)}
.scout-moves{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;font-size:.6rem}
.scout-moves span{background:var(--panel-raised);border-radius:4px;padding:2px 6px;color:rgba(244,241,232,.75)}

@media (max-width:820px){
  /* Stack the scene vertically and let it grow — a fixed height + overflow:hidden
     would clip whatever flows last. The coach is the hero, so float it (and its
     scoreboard) to the top; the rest follows. */
  .lroom{height:auto;min-height:0;padding:12px 12px 16px;display:flex;flex-direction:column}
  .case,.tv,.photo,.scout,.shelfbg,.lr-coach{position:static;transform:none;width:auto;margin:12px auto}
  .lr-coach{order:-3;margin-top:4px}
  .lr-coaches{width:100%}
  .tv{width:auto;order:-2}
  .case{order:-1}
  .lr-floor,.lr-logo{display:none}
  .photo{transform:none}
  /* the coach's stress meter sits inline above the figure when stacked */
  .lr-stress{position:static;margin:0 auto 6px;flex-direction:row;width:max-content}
}

/* ---- trophy object sizing: giant champion cup, small shame ---- */
.case-shelf--champ{flex:1.7}
.tobj-wrap--champ .tobj{width:60px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 55%,transparent))}
.case-shelf--shame{flex:.7}
.tobj-wrap--shame .tobj{width:16px;opacity:.85}

/* ---- TV is tappable when a game is on ---- */
.tv--live{cursor:pointer}
.tv--live .tv-screen{transition:box-shadow .2s}
.tv--live:hover .tv-screen,.tv--live:focus-visible .tv-screen{box-shadow:0 0 70px -8px color-mix(in srgb,var(--turf) 70%,transparent),0 22px 40px rgba(0,0,0,.7)}
.tv--live::after{content:"▶ tap for full game";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--flag);white-space:nowrap}

/* ---- full-game broadcast modal ---- */
.lk-game-card{width:min(52rem,100%)}
.lkg-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;margin-bottom:1rem}
.lkg-team{display:flex;flex-direction:column}
.lkg-team--away{text-align:right;align-items:flex-end}
.lkg-name{font-weight:800;font-size:1rem}
.lkg-score{font-size:2.1rem;font-weight:900;font-variant-numeric:tabular-nums;color:#5f7488;line-height:1}
.lkg-lead .lkg-score{color:var(--turf)}
.lkg-proj{font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:rgba(244,241,232,.45)}
.lkg-mid{font-size:.66rem;font-weight:800;letter-spacing:.08em;color:rgba(244,241,232,.55);display:inline-flex;align-items:center;gap:.3rem}
.lkg-benchsep{list-style:none;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,232,.4);padding:.5rem .35rem .2rem;border-top:1px dashed var(--border)}
@media (max-width:620px){.lkg-head{grid-template-columns:1fr auto 1fr}}

/* ---- polish: players-news whiteboard, layout tightening, bigger photo coach ---- */
.board2{position:absolute;left:236px;top:198px;width:220px;z-index:4;
  background:#eef1e9;color:#14202c;border-radius:8px;border:6px solid #6b4a2a;padding:10px 12px;
  box-shadow:0 16px 30px rgba(0,0,0,.55);transform:rotate(-.6deg)}
.board2-h{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0b6b5f;margin-bottom:6px}
.board2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.board2-list li{font-size:.68rem;line-height:1.3;color:#22303c;border-bottom:1px dashed rgba(20,32,44,.18);padding-bottom:4px}
.board2-list li:last-child{border-bottom:none}
.board2-list b{color:#0b6b5f}
.board2-list a{color:inherit;text-decoration:none}
.board2-list a:hover{text-decoration:underline}
.board2-empty{margin:0;font-size:.7rem;color:#4a5a66;font-style:italic}

/* bigger, front-and-center coach head in the framed team photo */
.photo .pf--coach{width:62px}

/* tighten the room a touch — desktop only. On mobile the scene stacks and the
   room must grow to fit it, or a fixed height + overflow:hidden clips the coach
   (which flows last). Scoping this to desktop keeps the mobile height:auto. */
@media (min-width:821px){
  .lroom{height:600px}
  .tv{top:20px}
  .lr-coach{bottom:4px}
}

/* coach stress meter + reaction — floats beside the coach's head */
.lr-stress{position:absolute;top:2px;right:-6px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:.25rem .35rem;border-radius:8px;background:rgba(8,12,20,.7);border:1px solid rgba(255,255,255,.08)}
.lr-stress-face{font-size:1.1rem;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.lr-stress-meter{width:64px;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.lr-stress-meter i{display:block;height:100%;width:calc(var(--stress,0)*1%);border-radius:999px;
  background:linear-gradient(90deg,#39d98a,#ffd23f 55%,#ff3b1f);transition:width .5s ease}
.lr-stress small{font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,#ff3b1f calc(var(--stress,0)*1%),#39d98a)}
.lr-coach--stressed .coach-fig,.lr-coach--stressed .coach-svg{animation:coach-shake .28s ease-in-out infinite}
@keyframes coach-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px) rotate(-1deg)}75%{transform:translateX(1.5px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.lr-coach--stressed .coach-fig,.lr-coach--stressed .coach-svg{animation:none}.lr-stress-meter i{transition:none}}

/* the coach's desk: computer · boombox (off) · phone — beside the coach */
.lr-desk{position:absolute;left:calc(50% + 96px);bottom:16px;transform:rotate(-.6deg);width:176px;z-index:4;pointer-events:none}
.lr-desk-gear{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:0 26px;margin-bottom:-3px}
.lr-desk-gear .dsk,.lr-desk-gear .dsk-top{image-rendering:pixelated;height:auto}
.dsk--computer .dsk{width:34px}
.dsk--radio .dsk{width:44px}
.dsk--phone .dsk{width:26px}
.lr-desk-top .dsk-top{width:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.dsk-obj{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
@media (max-width:900px){.lr-desk{position:static;transform:none;width:200px;margin:8px auto}}
.case{top:26px;height:360px}
.photo{top:26px}
.board2{top:190px}

@media (max-width:820px){.board2{position:static;transform:none;width:auto;margin:12px}}
.det-rosters--solo{grid-template-columns:1fr;max-width:32rem;margin:0 auto}

/* ---- bigger, bolder area headers (The League + My Team) ---- */
.lg-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 900; letter-spacing: -0.01em; line-height: 1.05; }
.lg-eyebrow { font-size: 0.82rem; letter-spacing: 0.14em; }
.lk-team { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 900; }
.lk-eyebrow { font-size: 0.82rem; letter-spacing: 0.14em; }
.lk-crest { width: 58px; height: 58px; font-size: 1.9rem; }

/* ---- coach motto speech bubble ---- */
.lr-speech{position:relative;max-width:200px;margin-bottom:10px;padding:7px 11px;background:#f4f1e8;color:#14202c;
  border-radius:10px;font-size:.72rem;font-weight:700;font-style:italic;text-align:center;line-height:1.3;
  border:2px solid var(--team2);box-shadow:0 8px 16px rgba(0,0,0,.5)}
.lr-speech::before{content:"“"}.lr-speech::after{content:"”"}
.lr-speech i{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #f4f1e8}
/* bigger champion trophy so the chicken + pedestal read */
.tobj-wrap--champ .tobj{width:72px}

/* ============================================================
   Full-game view: maximize space + per-player game clock; bye board
   ============================================================ */
.lk-game-card{width:min(74rem,96vw);max-height:92vh}
.lk-game-card .mup-modal-body{padding:1rem 1.2rem}
.lk-game-card .det-rosters{gap:1.4rem}

/* locker full-game row (own class so the League modal is untouched) */
.lkg-row{display:grid;grid-template-columns:2.4rem 1.9rem 1fr 5.4rem auto;align-items:center;gap:.5rem;
  padding:.4rem .4rem;background:var(--panel-raised);border-radius:4px;margin-bottom:2px}
.lkg-row--togo{opacity:.55}
.lkg-game{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0}
.dg-lbl{font-size:.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:rgba(244,241,232,.5);white-space:nowrap}
.dg-lbl.dg-live{color:var(--flag)}
.dg-lbl.dg-final{color:rgba(244,241,232,.4)}
.dg-meter{width:100%;height:4px;border-radius:999px;background:var(--panel);overflow:hidden}
.dg-meter i{display:block;height:100%;background:var(--flag)}

/* bye-week board — called out */
.byeboard{margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(192,57,43,.14),rgba(11,18,32,.4));border:1px solid rgba(192,57,43,.4)}
.byeboard-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:12px;
  border-bottom:2px solid var(--shame);padding-bottom:.4rem}
.byeboard-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e8776b}
.byeboard-head h2{margin:0;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:900;line-height:1}
.byeboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.byecard{background:var(--panel);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;opacity:.6}
.byecard--up{opacity:1;border-color:var(--shame);box-shadow:0 0 20px -8px var(--shame)}
.byecard-wk{font-size:1.3rem;font-weight:900;color:var(--flag);letter-spacing:.02em}
.byecard--up .byecard-wk{color:#e8776b}
.byecard-players{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.byecard-players span{font-size:.78rem;font-weight:600;color:rgba(244,241,232,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:620px){.lkg-row{grid-template-columns:2.2rem 1.7rem 1fr auto;}.lkg-game{display:none}}

/* bye-card player position badge */
.byecard-players span{display:flex;align-items:center;gap:6px}
.byepos{flex:none;min-width:1.9rem;text-align:center;font-size:.56rem;font-weight:800;letter-spacing:.02em;
  padding:1px 4px;border-radius:4px;background:var(--panel-raised);border:1px solid var(--border-strong);color:var(--flag)}

/* ============================================================
   Locker room: TV score crawler, photo wire, bench "Shit List",
   and repositioned players whiteboard (no more TV overlap)
   ============================================================ */
/* live score crawler under the TV */
.tv-crawl{overflow:hidden;background:#02090f;border-top:1px solid rgba(47,191,113,.35);padding:4px 0;position:relative}
.tv-crawl::before{content:"LIVE";position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 6px;
  font-size:.55rem;font-weight:900;letter-spacing:.06em;color:#02090f;background:var(--flag);z-index:1}
.tv-crawl-track{display:inline-flex;gap:2.4rem;white-space:nowrap;padding-left:2.4rem;will-change:transform;animation:tvcrawl 32s linear infinite}
@keyframes tvcrawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tv-crawl-i{font-size:.72rem;font-weight:700;color:#bfe3d5;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.tv-crawl-track{animation:none}}

/* team photo: hanging picture wire */
.photo{overflow:visible}
.photo-wire{position:absolute;left:50%;top:-27px;transform:translateX(-50%);width:130px;height:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 30'%3E%3Cpath d='M65 6 L10 29 M65 6 L120 29' stroke='%235a4327' stroke-width='2' fill='none'/%3E%3Ccircle cx='65' cy='5' r='3.5' fill='%23b9a06a'/%3E%3Ccircle cx='65' cy='5' r='1.4' fill='%235a4327'/%3E%3C/svg%3E") no-repeat center/contain}

/* players whiteboard — clear of the TV now */
.board2{top:238px;left:220px;width:208px}

/* THE SHIT LIST — the bench */
.shitlist{margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(120,90,30,.12),rgba(11,18,32,.4));border:1px solid rgba(245,179,1,.3)}
.shitlist-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:12px;border-bottom:2px solid var(--gold);padding-bottom:.4rem}
.shitlist-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.shitlist-head h2{margin:0;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:900;line-height:1}
.shitlist-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.shit-row{display:grid;grid-template-columns:2rem 12rem 1fr auto auto;align-items:center;gap:.7rem;
  padding:.45rem .6rem;background:var(--panel);border-radius:6px}
.shit-row--togo{opacity:.6}
.shit-row .det-face{width:2rem;height:2rem}
.shit-id{display:flex;flex-direction:column;min-width:0}
.shit-id b{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shit-id em{font-style:normal;font-size:.62rem;color:rgba(244,241,232,.5)}
.shit-doing{font-size:.74rem;color:var(--turf);overflow-wrap:anywhere}
.shit-game{font-size:.6rem}
.shit-pts{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:640px){.shit-row{grid-template-columns:2rem 1fr auto}.shit-doing,.shit-game{display:none}}

/* ---- Give 'Em a Chance: bench points since last start ---- */
.needchance{margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(40,16,10,.7),rgba(11,15,22,.9));border:1px solid rgba(255,90,40,.28);box-shadow:0 16px 30px rgba(0,0,0,.35)}
.needchance-head{display:flex;align-items:baseline;gap:.7rem;border-bottom:2px solid #ff5a2f;padding-bottom:.4rem}
.needchance-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ff7a4f}
.needchance-head h2{margin:0;font-size:clamp(1.5rem,3vw,2rem);font-weight:900;line-height:1}
.needchance-sub{margin:.4rem 0 .7rem;font-size:.76rem;color:rgba(244,241,232,.55)}
.needchance-list{list-style:none;margin:0;padding:0;counter-reset:nc;display:flex;flex-direction:column;gap:3px}
.nc-row{display:grid;grid-template-columns:1.6rem 2.2rem 1fr auto;gap:.7rem;align-items:center;
  padding:.5rem .6rem;border-radius:8px;position:relative;isolation:isolate;background:rgba(255,255,255,.03)}
.nc-row::before{counter-increment:nc;content:counter(nc);grid-column:1;text-align:center;font-weight:900;font-size:.9rem;color:#ff7a4f}
.nc-row::after{content:"";position:absolute;inset:0;border-radius:8px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,60,20,calc(var(--rage,0)/100*.3)),transparent 75%)}
.nc-face{width:2.2rem;height:2.2rem;border-radius:50%;overflow:hidden;background:#2a3444;flex:none}
.nc-face img{width:100%;height:100%;object-fit:cover;object-position:top center}
.nc-id{min-width:0}
.nc-id b{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-id em{font-style:normal;font-size:.68rem;color:rgba(244,241,232,.6)}
.nc-total{text-align:right;line-height:1.05}
.nc-total b{font-size:1.2rem;font-weight:900;color:#ff7a4f;font-variant-numeric:tabular-nums}
.nc-total small{display:block;font-size:.54rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(244,241,232,.45)}

/* ---- YOUR LINEUP: starters above the bench, same stats ---- */
.lineupcard{margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,26,34,.92),rgba(11,15,22,.92));border:1px solid rgba(255,255,255,.07);box-shadow:0 16px 30px rgba(0,0,0,.35)}
.lineupcard-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:12px;border-bottom:2px solid var(--gold);padding-bottom:.4rem}
.lineupcard-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.lineupcard-head h2{margin:0;font-size:clamp(1.5rem,3vw,2rem);font-weight:900;line-height:1}
.lineupcard-callout{margin:.1rem 0 0;flex-basis:100%;font-size:.8rem;color:rgba(244,241,232,.72)}
.lineupcard-callout b{color:var(--turf)}
.link-btn{background:none;border:none;padding:0;font:inherit;color:var(--team2,var(--gold));font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--turf)}
.lineup-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rr{display:grid;grid-template-columns:2.3rem 2rem 1fr auto auto;align-items:center;gap:.7rem;
  padding:.45rem .6rem;background:var(--panel);border-radius:6px}
.rr--bench{background:rgba(255,255,255,.02)}
.rr--togo{opacity:.62}
.rr .det-face{width:2rem;height:2rem;border-radius:50%;overflow:hidden;background:#2a3444;flex:none}
.rr .det-face img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rr-id{display:flex;flex-direction:column;min-width:0}
.rr-id b{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-id em{font-style:normal;font-size:.66rem;color:rgba(244,241,232,.55);overflow-wrap:anywhere}
/* a benched player who's balling out fumes — a rage meter fills 10→20 pts and
   the row reddens / catches fire the angrier they get (--rage is 0–100) */
.rr--raging{position:relative;isolation:isolate}
.rr--raging::before{content:"";position:absolute;inset:0;border-radius:6px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,50,20,calc(var(--rage,0)/100*.38)),transparent 76%)}
.rr--raging::after{content:"";position:absolute;inset:0;border-radius:6px;z-index:-1;pointer-events:none;
  opacity:calc(var(--rage,0)/100*.55);
  background:radial-gradient(70% 130% at 100% 110%,rgba(255,95,0,.6),transparent 62%);
  animation:rage-flick .55s ease-in-out infinite alternate}
@keyframes rage-flick{from{opacity:calc(var(--rage,0)/100*.32)}to{opacity:calc(var(--rage,0)/100*.62)}}
.rr-rage{display:flex;align-items:center;gap:.45rem;margin-top:3px}
.rr-rage-lbl{font-size:.6rem;font-weight:800;white-space:nowrap;letter-spacing:.02em;
  color:color-mix(in srgb,#ff3b1f calc(var(--rage,0)*1%),#e79a4a)}
.rr-rage-bar{flex:1;height:.5rem;max-width:9rem;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.rr-rage-bar i{display:block;height:100%;width:calc(var(--rage,0)*1%);border-radius:999px;
  background:linear-gradient(90deg,#ffc23f,#ff5a1f 55%,#d21a05);transition:width .5s ease}
@media (prefers-reduced-motion:reduce){.rr--raging::after{animation:none}.rr-rage-bar i{transition:none}}
.rr-game{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:5.4rem}
.rr-benchw{font-size:.6rem;font-weight:800;color:#e79a4a;background:rgba(231,154,74,.14);padding:1px 6px;border-radius:999px;white-space:nowrap}
.rr-nums{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.rr-nums .det-pts{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.rr-proj{font-size:.58rem;color:rgba(244,241,232,.5);font-variant-numeric:tabular-nums}
.lineup-benchhead{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:14px 0 8px;padding-top:.5rem;border-top:1px dashed rgba(255,255,255,.14)}
.lineup-benchsub{font-size:.72rem;color:rgba(244,241,232,.5)}
@media (max-width:640px){.rr{grid-template-columns:2rem 1.7rem 1fr auto}.rr-game{display:none}}

/* live win odds in the full-game modal header */
/* channel flipper inside the game-details modal */
.lkg-chan{display:inline-flex;align-items:center;gap:.5rem;margin:0 auto}
.lkg-ch{flex:none;min-width:2.2rem;height:1.9rem;padding:0 .4rem;font-size:1.05rem;font-weight:900;line-height:1;cursor:pointer;color:#04140b;
  background:linear-gradient(180deg,var(--turf),#1c9c5c);border:1px solid #0c7a45;border-radius:7px}
.lkg-ch:hover{filter:brightness(1.1)}
.lkg-chlabel{min-width:6rem;text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,232,.75)}
.lkg-crawl{border-radius:0 0 10px 10px}
.lkg-nolup{padding:1.4rem 1rem;text-align:center;color:rgba(244,241,232,.55)}
.lkg-odds{display:inline-flex;flex-direction:column;align-items:center;line-height:1;margin-top:3px}
.lkg-odds b{font-size:.95rem;color:var(--turf)}
.lkg-odds i{font-style:normal;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* relocate players whiteboard to the lower-left, archives beside it — clears the TV entirely */
.board2{top:auto;bottom:16px;left:22px;width:200px;transform:rotate(-.6deg)}
.shelfbg{left:238px;bottom:16px}

/* ---- room switcher: walk franchise to franchise ---- */
.roomswitch{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rs-nav{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:800;color:var(--text);text-decoration:none;padding:.3rem .6rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--border-strong);white-space:nowrap;max-width:14rem}
.rs-nav .rs-nm{overflow:hidden;text-overflow:ellipsis;max-width:8rem}
.rs-face{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;overflow:hidden;background:#2a3444;display:inline-block;border:1px solid var(--border-strong)}
.rs-face img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rs-nav:hover{border-color:var(--me-accent,var(--turf));color:var(--me-accent,var(--turf))}
.rs-pick{display:flex;align-items:center;gap:8px;margin:0 auto;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.rs-pick select{font:inherit;font-size:.82rem;font-weight:700;text-transform:none;letter-spacing:0;padding:.4rem .6rem;
  background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer}

/* ============================================================
   Consistent position colors (site-wide)
   ============================================================ */
.pos-qb{--pos:#ff5d73}
.pos-rb{--pos:#2fbf71}
.pos-wr{--pos:#4aa3ff}
.pos-te{--pos:#f5a13c}
.pos-k{--pos:#b884ff}
.pos-dst{--pos:#c99a5b}
.pos-flex{--pos:#8b9bb0}
.pos-bench{--pos:#6f7d8c}
.pos-other{--pos:var(--flag)}
/* badges pick up the position color */
.byepos{color:var(--pos,var(--flag));border-color:color-mix(in srgb,var(--pos,var(--flag)) 45%,var(--border-strong));
  background:color-mix(in srgb,var(--pos,var(--flag)) 14%,var(--panel-raised))}
.pos-tag{display:inline-block;min-width:1.7rem;text-align:center;font-size:.58rem;font-weight:800;padding:0 4px;border-radius:3px;
  color:var(--pos,var(--flag));background:color-mix(in srgb,var(--pos,var(--flag)) 16%,var(--panel-raised));margin-right:4px}

/* ============================================================
   Funtasize — pixel avatars + the pixel face in the team photo
   ============================================================ */
/* crisp pixels when a small pixel-art avatar is scaled up; harmless on
   downscaled ESPN logos (image-rendering only changes upscaling) */
.mup-face img,.rung-face img,.cfg-face img{image-rendering:pixelated}
.pf--pxface{border:2px solid #efe0c8;overflow:hidden;order:-1;width:56px;height:56px}
.pf--pxface img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

.fbit-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,rgba(47,191,113,.12),transparent);border:1px dashed rgba(47,191,113,.5)}
.fbit-form label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--turf)}
.fbit-commish{margin-top:14px;background:linear-gradient(90deg,rgba(245,179,1,.12),transparent);border-color:rgba(245,179,1,.5)}
.fbit-commish label{color:var(--gold)}

/* funtasized pixel face on the standing coach's head */
.coach-fig{position:relative}
/* When a pixel face is laid on, drop the blocky head entirely: clip the top of
   the coach body (head + neck) and hide any hat/hair, so only the funtasized
   face shows above the shoulders. */
.has-pxface .coach-svg{clip-path:inset(var(--pxf-clip,33%) 0 0 0)}
.has-pxface .coach-cap,.has-pxface .coach-hair{display:none}
.coach-pxface{position:absolute;left:19%;top:0;width:62%;aspect-ratio:1;object-fit:contain;object-position:center top;z-index:2;
  image-rendering:pixelated;
  transform:translate(var(--pxf-x,0),var(--pxf-y,0)) scale(var(--pxf-scale,1));transform-origin:center top}
/* funtasized cut-outs are transparent PNGs — drop the framed box treatment */
.pf--pxface{border:none;background:none;box-shadow:none}
.pf--pxface img{image-rendering:pixelated}

/* funtasized-face fit controls in the edit panel */
.lk-face-edit{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.lk-face-edit legend{font-size:.72rem;font-weight:800;color:var(--gold);padding:0 6px}
.lk-face-hint{margin:.1rem 0 .6rem;font-size:.7rem;color:rgba(244,241,232,.6)}
.lk-face-edit label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:700;color:rgba(244,241,232,.7);margin-top:8px}
.lk-face-edit output{font-weight:800;color:var(--team2,var(--gold));font-variant-numeric:tabular-nums}
.lk-face-edit input[type="range"]{width:100%;accent-color:var(--team2,var(--gold))}
/* in-panel live preview of the funtasized face on the coach */
.face-preview,.coach-preview{display:flex;justify-content:center;margin:2px 0 10px;
  background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--team,#2FBF71) 22%,transparent),transparent 70%);border-radius:12px;padding:8px}
.face-preview .coach-fig,.coach-preview .coach-fig{width:130px;position:relative;--team-sh:color-mix(in srgb,var(--team,#2FBF71) 60%,#000)}

/* unsaved-changes cue on the customize form */
.lk-save-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:12px}
.lk-unsaved{font-size:.76rem;font-weight:800;color:var(--flag,#ff5d3a)}
.lk-dirty .lk-save-btn{animation:save-pulse 1.3s ease-in-out infinite;box-shadow:0 0 0 0 color-mix(in srgb,var(--turf) 60%,transparent)}
@keyframes save-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--turf) 55%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.lk-dirty .lk-save-btn{animation:none}}

/* franchise emoji picker */
.emoji-field{position:relative}
.emoji-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font:inherit;cursor:pointer;
  background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.emoji-trigger .emoji-current{font-size:1.35rem;line-height:1}
.emoji-trigger .emoji-cta{font-size:.62rem;font-weight:800;color:rgba(244,241,232,.6);text-transform:uppercase;letter-spacing:.06em}
.emoji-pop{position:absolute;z-index:30;top:100%;left:0;margin-top:6px;width:min(340px,86vw);max-height:236px;overflow-y:auto;
  padding:8px;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 16px 30px rgba(0,0,0,.5)}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2rem,1fr));gap:2px}
.emoji-opt{font-size:1.25rem;line-height:1;padding:.25rem;background:none;border:none;border-radius:6px;cursor:pointer}
.emoji-opt:hover{background:color-mix(in srgb,var(--team2,var(--gold)) 32%,transparent)}

/* character wheel — coach cosmetics cyclers */
.lk-wheel-edit{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.lk-wheel-edit legend{font-size:.72rem;font-weight:800;color:var(--gold);padding:0 6px}
.wheel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wheel{display:flex;flex-direction:column;gap:4px}
.wheel-cat{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,241,232,.6)}
.wheel-ctl{display:flex;align-items:center;gap:6px;background:var(--panel-raised);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:2px}
.wheel-nav{flex:none;width:1.8rem;height:1.8rem;font-size:1.15rem;font-weight:800;line-height:1;cursor:pointer;background:none;border:none;color:var(--team2,var(--gold));border-radius:6px}
.wheel-nav:hover:not(:disabled){background:color-mix(in srgb,var(--team2,var(--gold)) 25%,transparent)}
.wheel-nav:disabled{opacity:.35;cursor:not-allowed}
.wheel-label{flex:1;text-align:center;font-weight:800;font-size:.82rem;text-transform:capitalize;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Fun Tokens badge on the coach ---- */
.lr-tokens{display:inline-flex;align-items:center;gap:.3rem;margin-top:6px;padding:.25rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:700;color:#04140b;background:linear-gradient(180deg,var(--gold),#d99a08);
  box-shadow:0 4px 10px -3px color-mix(in srgb,var(--gold) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.lr-tokens b{font-size:.95rem;font-weight:900}
.lr-tokens small{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.56rem;opacity:.8}

/* ---- Franchise Legend (AI backstory) ---- */
.backstory{margin-top:16px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(28,20,8,.7),rgba(11,15,22,.9));border:1px solid rgba(245,179,1,.28);box-shadow:0 16px 30px rgba(0,0,0,.4)}
.backstory-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:10px;border-bottom:2px solid var(--gold);padding-bottom:.4rem}
.backstory-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.backstory-head h2{margin:0;font-size:clamp(1.5rem,3vw,2rem);font-weight:900;line-height:1.05}
.backstory-text{margin:.2rem 0 .8rem;font-size:1.02rem;line-height:1.6;color:rgba(244,241,232,.9);max-width:60ch;white-space:pre-wrap}
.backstory-form{display:flex;flex-direction:column;gap:.7rem}
.backstory-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.backstory-cost{font-size:.74rem;color:rgba(244,241,232,.6)}
.backstory-owner{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.backstory-edit summary{cursor:pointer;font-size:.78rem;font-weight:800;color:var(--gold);width:fit-content}
.backstory-edit textarea{width:100%;max-width:52rem;margin:.5rem 0;padding:.6rem;font:inherit;line-height:1.5;background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);resize:vertical}
.backstory-announce{margin:0}
.power-seed{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;font-size:1.02rem;line-height:1.5}
.power-pre{font-weight:700;color:rgba(244,241,232,.85)}
#power-input{flex:1;min-width:14rem;padding:.35rem .5rem;font:inherit;color:var(--gold);font-weight:700;
  background:transparent;border:none;border-bottom:2px dashed color-mix(in srgb,var(--gold) 60%,transparent)}
#power-input:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--gold)}
#power-input::placeholder{color:rgba(244,241,232,.35);font-weight:400;font-style:italic}
.seed-hint{margin:0 0 .3rem;font-size:.8rem;color:rgba(244,241,232,.7)}
.seed-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.seed-chip{font:inherit;font-size:.76rem;text-align:left;cursor:pointer;padding:.4rem .7rem;border-radius:999px;
  color:var(--text);background:var(--panel-raised);border:1px solid var(--border-strong);max-width:100%}
.seed-chip:hover{border-color:var(--gold)}
.seed-chip.is-sel{background:color-mix(in srgb,var(--gold) 26%,transparent);border-color:var(--gold);color:#04140b;font-weight:700}
#seed-input{width:100%;max-width:44rem;padding:.5rem .6rem;font:inherit;background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.seed-commish{margin-top:14px;padding:12px;border:1px dashed var(--gold);border-radius:var(--radius);display:flex;flex-direction:column;gap:.5rem}
.seed-commish-h{margin:0;font-size:.78rem;font-weight:800;color:var(--gold)}
.seed-commish input[type="text"]{width:100%;padding:.45rem .55rem;font:inherit;background:var(--panel-raised);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.seed-commish button{align-self:flex-start}

/* ---- Live Wire ticker on the league scoreboard ---- */
.lwire{position:relative;display:flex;align-items:center;gap:.7rem;margin:0 0 14px;padding:.55rem .7rem;border-radius:10px;
  background:linear-gradient(90deg,rgba(47,191,113,.16),rgba(11,18,32,.5));border:1px solid rgba(47,191,113,.3);overflow:hidden}
.lwire-tag{flex:none;display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--turf)}
.lwire-track{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.lwire-track::-webkit-scrollbar{display:none}
.lwire-item{flex:none;font-size:.76rem;white-space:nowrap;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.04)}
.lwire-item b{color:var(--team2,var(--gold));margin-right:.25rem}
.lwire-item i{font-style:normal;font-size:.62rem;color:rgba(244,241,232,.5);margin-left:.25rem}

/* ---- LIVE WIRE: play-by-play + reactive scoring ---- */
.playwire{position:relative;margin-top:16px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(11,18,32,.92),rgba(8,12,20,.92));border:1px solid rgba(47,191,113,.28);box-shadow:0 16px 30px rgba(0,0,0,.4)}
.playwire-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:12px;border-bottom:2px solid var(--turf);padding-bottom:.4rem}
.playwire-eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--turf)}
.playwire-head h2{margin:0;font-size:clamp(1.5rem,3vw,2rem);font-weight:900;line-height:1}
.playwire-status{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--flag)}
.playwire-cols{display:grid;grid-template-columns:1fr;gap:18px}
.pw-col h3{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,241,232,.55)}
.pw-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:20rem;overflow-y:auto}
.pw-empty{font-size:.78rem;color:rgba(244,241,232,.45);padding:.4rem 0}
/* full-width play row with clearly delineated fields */
.pw-row{display:grid;grid-template-columns:3.5rem 3rem 2.4rem 1.6rem 2.6rem 1fr;gap:.6rem;align-items:center;
  padding:.5rem .7rem;border-radius:8px;background:rgba(255,255,255,.03);font-size:.86rem;border:1px solid rgba(255,255,255,.04)}
.pw-row+.pw-row{margin-top:2px}
.pw-row--score{background:color-mix(in srgb,var(--turf) 15%,transparent);border-color:color-mix(in srgb,var(--turf) 30%,transparent)}
/* leftmost: real-world local-time of the update; then the in-game clock */
.pw-when{font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.08);padding-right:.5rem;color:var(--gold,#f5b301)}
.pw-gametime{font-size:.62rem;font-weight:700;letter-spacing:.02em;color:rgba(244,241,232,.5);white-space:nowrap;text-align:right}
/* summary bar: who's actually playing */
.pw-summary{display:flex;flex-direction:column;gap:.35rem;margin:.2rem 0 .7rem}
.pw-sumrow{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.pw-sumlab{font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:rgba(244,241,232,.55);white-space:nowrap;flex:none}
.pw-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.pw-chip{font-size:.74rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.pw-chip em{font-style:normal;font-weight:800;color:var(--team2,var(--gold));font-size:.66rem;margin-left:.15rem}
.pw-chip i{font-style:normal;color:rgba(244,241,232,.55);font-size:.66rem;font-variant-numeric:tabular-nums}
.pw-chip--live{background:color-mix(in srgb,var(--turf) 18%,transparent);border-color:color-mix(in srgb,var(--turf) 40%,transparent)}
.pw-chip--post{opacity:.65}
.pw-ptcol{text-align:center}
.pw-pts{display:inline-block;min-width:1.9rem;padding:.1rem .35rem;border-radius:999px;font-size:.72rem;font-weight:900;font-variant-numeric:tabular-nums;color:#04140b;background:var(--turf)}
.pw-face{font-size:1.05rem;text-align:center}
.pw-tm{font-weight:800;font-size:.72rem;color:var(--team2,var(--gold));text-align:center;letter-spacing:.02em}
.pw-body{min-width:0}
.pw-who{color:#fff;font-weight:800}
.pw-txt{color:rgba(244,241,232,.82)}
@media (max-width:560px){.pw-row{grid-template-columns:3.3rem 2.6rem 1fr;gap:.5rem}.pw-ptcol,.pw-face,.pw-tm{display:none}}
/* celebration pops */
.pw-celebrate{position:absolute;top:8px;right:8px;left:8px;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:6}
.pw-pop{align-self:center;max-width:100%;padding:.55rem .9rem;border-radius:999px;font-size:.86rem;font-weight:800;color:#04140b;
  background:linear-gradient(180deg,var(--turf),#1c9c5c);box-shadow:0 10px 24px -6px color-mix(in srgb,var(--turf) 70%,transparent);
  transform:translateY(-8px) scale(.9);opacity:0;animation:pw-in .35s cubic-bezier(.2,1.3,.4,1) forwards}
.pw-pop b{margin-right:.3rem}
.pw-pop--out{animation:pw-out .6s ease forwards}
@keyframes pw-in{to{transform:translateY(0) scale(1);opacity:1}}
@keyframes pw-out{to{transform:translateY(-8px) scale(.95);opacity:0}}
@media (prefers-reduced-motion:reduce){.pw-pop{animation:none;opacity:1;transform:none}.pw-pop--out{animation:none;opacity:0}}

.fbit-keepbg{display:flex;align-items:center;gap:.4rem;margin-top:6px;font-size:.72rem;color:rgba(244,241,232,.6);cursor:pointer}
.fbit-keepbg input{width:auto}
.fbit-zoom{display:flex;flex-direction:column;gap:.25rem;margin-top:8px;font-size:.72rem;font-weight:700;color:rgba(244,241,232,.7)}
.fbit-zoom output{font-weight:800;color:var(--team2,var(--gold))}
.fbit-zoom input[type="range"]{width:100%;accent-color:var(--team2,var(--gold))}
.fbit-zoom small{font-weight:600;color:rgba(244,241,232,.45);font-size:.64rem}

/* ---- the boombox radio widget (fixed, always reachable to mute) ---- */
.radio{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(180deg,#2a2f38,#171a20);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.radio-power{width:2.4rem;height:2.4rem;font-size:1.3rem;cursor:pointer;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35)}
.radio.is-on .radio-power{background:linear-gradient(180deg,var(--turf),#1c9c5c);box-shadow:0 0 14px color-mix(in srgb,var(--turf) 60%,transparent)}
.radio-body{display:none;flex-direction:column;gap:5px;min-width:9.5rem}
.radio.is-on .radio-body{display:flex}
.radio-nowplaying{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;color:#fff}
.radio-eq{display:inline-flex;align-items:flex-end;gap:2px;height:.9rem}
.radio-eq i{width:2.5px;height:30%;background:var(--turf);border-radius:1px;animation:eq .7s ease-in-out infinite}
.radio-eq i:nth-child(2){animation-delay:.12s}.radio-eq i:nth-child(3){animation-delay:.26s}.radio-eq i:nth-child(4){animation-delay:.4s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.radio-ctrls{display:flex;align-items:center;gap:6px}
.radio-ch{width:1.7rem;height:1.7rem;font-size:1.05rem;font-weight:900;cursor:pointer;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);color:#fff}
.radio-off{flex:1;font-size:.72rem;font-weight:800;cursor:pointer;padding:.3rem .5rem;border-radius:6px;border:1px solid var(--pylon);background:color-mix(in srgb,var(--pylon) 22%,transparent);color:#fff;white-space:nowrap}
.radio-prompt{font-size:.74rem;font-weight:800;cursor:pointer;padding:.45rem .7rem;border-radius:999px;border:none;color:#04140b;
  background:linear-gradient(180deg,var(--gold),#d99a08);box-shadow:0 4px 14px -3px color-mix(in srgb,var(--gold) 70%,transparent);animation:radio-pulse 1.1s ease-in-out infinite}
@keyframes radio-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* the enormous win celebration */
.win-confetti{position:fixed;inset:0;z-index:200;pointer-events:none}
.win-confetti canvas{position:fixed;inset:0}
.win-banner{position:fixed;top:12%;left:50%;transform:translateX(-50%);font-size:clamp(2rem,8vw,5.5rem);font-weight:900;letter-spacing:.02em;color:var(--gold);white-space:nowrap;
  text-shadow:0 4px 0 #b7830a,0 0 34px rgba(245,179,1,.75);animation:win-pop .55s cubic-bezier(.2,1.5,.4,1),win-float 1.8s ease-in-out .55s infinite}
@keyframes win-pop{from{transform:translateX(-50%) scale(.3);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes win-float{0%,100%{margin-top:0}50%{margin-top:-12px}}
@media (prefers-reduced-motion:reduce){.radio-eq i,.radio-prompt,.win-banner{animation:none}}

/* reset a bad face upload */
.fbit-reset{margin-top:8px}
.reset-face-btn{font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--pylon);
  background:none;border:1px solid color-mix(in srgb,var(--pylon) 55%,transparent);border-radius:var(--radius-sm);padding:.4rem .7rem}
.reset-face-btn:hover{background:color-mix(in srgb,var(--pylon) 15%,transparent)}

/* ── Commish admin desk (/admin) ─────────────────────────────────────── */
.adminp-head h1{margin:.2rem 0}
.adminp-links{font-size:.85rem;margin:.4rem 0 0}
.adminp-links a{color:var(--turf);text-decoration:none;font-weight:700}
.adminp-links a:hover{text-decoration:underline}

.adminp-tablewrap{overflow-x:auto;margin-top:.6rem}
.adminp-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.adminp-table th,.adminp-table td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);vertical-align:middle}
.adminp-table thead th{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 55%,transparent);font-weight:800}
.adminp-table .adminp-num{text-align:right;font-variant-numeric:tabular-nums}
.adminp-inactive{opacity:.6}
.adminp-fr{display:flex;align-items:center;gap:.55rem}
.adminp-emoji{font-size:1.2rem;line-height:1}
.adminp-frnames{display:flex;flex-direction:column;line-height:1.2}
.adminp-team{font-size:.78rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.adminp-seen{white-space:nowrap;font-size:.85rem}
.adminp-status{display:flex;flex-wrap:wrap;gap:.3rem}
.adminp-badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:.15rem .4rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:color-mix(in srgb,var(--ink) 65%,transparent)}
.adminp-badge--on{background:color-mix(in srgb,var(--turf) 22%,transparent);color:var(--turf)}
.adminp-badge--claim{background:color-mix(in srgb,var(--turf) 16%,transparent);color:var(--turf)}
.adminp-badge--open{background:color-mix(in srgb,var(--pylon) 16%,transparent);color:var(--pylon)}
.adminp-badge--slack{background:color-mix(in srgb,#4a154b 22%,transparent);color:#e01e5a}
.adminp-tokenform{display:flex;gap:.35rem;align-items:center}
.adminp-tokenform input[type=number]{width:5rem;font:inherit;font-size:.85rem;padding:.3rem .45rem;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}
.adminp-btn{font:inherit;font-weight:800;cursor:pointer;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:var(--radius-sm);padding:.45rem .8rem;font-size:.85rem}
.adminp-btn:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.adminp-btn--sm{padding:.32rem .6rem;font-size:.78rem}
.adminp-btn--gen{background:color-mix(in srgb,var(--turf) 18%,transparent);border-color:color-mix(in srgb,var(--turf) 40%,transparent);color:var(--turf)}
.adminp-btn--gen:hover{background:color-mix(in srgb,var(--turf) 28%,transparent)}
.adminp-btn--gen:disabled{opacity:.5;cursor:not-allowed}
.adminp-btn--post{background:color-mix(in srgb,var(--pylon) 18%,transparent);border-color:color-mix(in srgb,var(--pylon) 42%,transparent);color:var(--pylon)}
.adminp-btn--post:hover{background:color-mix(in srgb,var(--pylon) 28%,transparent)}

.adminp-drafts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-top:.8rem}
.adminp-draft{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:var(--radius-md);padding:1rem;background:color-mix(in srgb,var(--card) 60%,transparent)}
.adminp-draft-head{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.5rem}
.adminp-draft-emoji{font-size:1.6rem;line-height:1}
.adminp-draft-head h3{margin:0;font-size:1.05rem}
.adminp-draft-head p{margin:.15rem 0 0;font-size:.8rem}
.adminp-notes-label{display:block;font-size:.78rem;font-weight:700;margin-bottom:.5rem}
.adminp-notes-label .muted{font-weight:400}
.adminp-genform textarea,.adminp-body{width:100%;font:inherit;font-size:.85rem;box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);padding:.5rem .6rem;resize:vertical}
.adminp-genform textarea{margin-top:.25rem}
.adminp-genform{margin-bottom:.7rem;padding-bottom:.7rem;border-bottom:1px dashed color-mix(in srgb,var(--ink) 14%,transparent)}
.adminp-genform .adminp-btn{margin-top:.5rem}
.adminp-body{line-height:1.5;min-height:9rem}
.adminp-stamp{font-size:.72rem;margin:.35rem 0}
.adminp-editbtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.cfg-adminlink{margin:.2rem 0 .6rem;font-size:.9rem}
.cfg-adminlink a{color:var(--pylon);font-weight:800;text-decoration:none}
.cfg-adminlink a:hover{text-decoration:underline}

/* ── League page featured matchup header (both coaches dressed) ───────── */
.lgf{border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,transparent),color-mix(in srgb,var(--card) 70%,transparent));
  padding:1rem 1.1rem 1.15rem;margin:0 0 1rem;overflow:hidden}
.lgf-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.lgf-tag{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pylon)}
.lgf-flags{display:flex;gap:.35rem;flex-wrap:wrap}
.lgf-flag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.15rem .45rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);color:color-mix(in srgb,var(--ink) 70%,transparent)}
.lgf-flag--belt{background:color-mix(in srgb,#f5b301 26%,transparent);color:#f5b301}
.lgf-flag--rival{background:color-mix(in srgb,var(--pylon) 22%,transparent);color:var(--pylon)}
.lgf-flag--live{background:color-mix(in srgb,#ff2d2d 20%,transparent);color:#ff5a5a}
.lgf-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:.5rem}
.lgf-side{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}
.lgf-side--me .lgf-fig{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--turf) 60%,transparent))}
.lgf-coach{display:block;line-height:0}
.lgf-fig{display:inline-block;width:96px;max-width:26vw;height:auto}
.lgf-coachimg{display:inline-block;width:96px;max-width:26vw;height:auto;border-radius:10px;image-rendering:pixelated}
.lgf-fig .coach-svg{width:100%;height:auto}
.lgf-meta{display:flex;align-items:center;gap:.5rem;justify-content:center;text-align:left;min-width:0}
.lgf-seed{font-size:1.15rem;font-weight:900;color:color-mix(in srgb,var(--ink) 45%,transparent);font-variant-numeric:tabular-nums;flex:none}
.lgf-names{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.lgf-coachname{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgf-you{font-size:.6rem;font-weight:800;text-transform:uppercase;background:var(--turf);color:#04120b;padding:.05rem .3rem;border-radius:999px;vertical-align:middle}
.lgf-team{font-size:.78rem;color:color-mix(in srgb,var(--ink) 58%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgf-emoji{margin-right:.25rem}
.lgf-rec{font-size:.74rem;font-weight:700;color:color-mix(in srgb,var(--ink) 50%,transparent);font-variant-numeric:tabular-nums}
.lgf-vs{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:0 .3rem 1.2rem}
.lgf-vs-word{font-size:.85rem;font-weight:900;letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 40%,transparent)}
.lgf-vs-score{font-size:.9rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lgf-vs-score em{color:color-mix(in srgb,var(--ink) 35%,transparent);font-style:normal;margin:0 .1rem}
.lgf-odds{display:flex;height:22px;border-radius:999px;overflow:hidden;margin:.7rem 0 .1rem;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.lgf-odds-seg{display:flex;align-items:center;min-width:0;transition:width .5s ease}
.lgf-odds-seg--home{justify-content:flex-start}
.lgf-odds-seg--away{justify-content:flex-end;border-left:2px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.lgf-odds-seg i{font-style:normal;font-size:.68rem;font-weight:900;color:#fff;padding:0 .5rem;
  text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}
.lgf-foot{text-align:center;margin-top:.55rem}
.lgf-edit{font-size:.82rem;font-weight:800;color:var(--turf);text-decoration:none}
.lgf-edit:hover{text-decoration:underline}
@media (max-width:520px){.lgf-fig{width:74px}.lgf-meta{flex-direction:column;gap:.15rem;text-align:center}.lgf-names{align-items:center}}

/* ── Coach badge on the scoreboard card (team logo stays the main crest) ── */
.mup-logo{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mup-coach{position:absolute;left:-6px;bottom:-6px;width:1.65rem;height:1.65rem;border-radius:50%;
  overflow:hidden;background:var(--panel);border:1.5px solid var(--border-strong);
  display:flex;align-items:flex-end;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.mup-coachimg{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.mup-coachfig{display:block;width:150%;height:150%;margin-bottom:-12%}
.mup-coachfig svg{width:100%;height:100%}
/* a franchise with no team logo: let the coach badge take the main crest */
.mup-face:not(:has(.mup-logo)) .mup-coach{position:static;width:100%;height:100%;border:none;box-shadow:none;background:transparent}

/* ── Team-logo uploader in the locker customize panel ─────────────────── */
.lk-logo-block{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed color-mix(in srgb,var(--ink) 16%,transparent)}
.lk-logo-head{display:block;font-weight:800;font-size:.9rem;margin-bottom:.5rem}
.lk-logo-head small{display:block;font-weight:400;color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:.76rem;margin-top:.15rem}
.lk-logo-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.lk-logo-preview{width:3rem;height:3rem;border-radius:50%;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);font-size:.6rem;text-align:center}
.lk-logo-preview img{width:100%;height:100%;object-fit:cover}
.lk-logo-form{flex:1;min-width:200px}

/* ── Two coaches in the locker scene ─────────────────────────────────── */
.lr-coaches{display:flex;align-items:flex-end;justify-content:center;gap:.5rem}
.lr-coaches--pair .lr-coach-one .coach-fig,.lr-coaches--pair .lr-coach-one>span{max-width:42%}
.lr-coach-one{display:flex;flex-direction:column;align-items:center;min-width:0}
.lk-cocoach{margin:.4rem 0;border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);border-radius:var(--radius-sm);padding:.5rem .6rem}
.lk-cocoach>summary{cursor:pointer;font-weight:800;font-size:.9rem}
.lk-cocoach>summary small{font-weight:400;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.lk-cocoach[open]>summary{margin-bottom:.5rem}

/* Franchise legend — empty state + AI sub-option */
.backstory-empty{margin:.4rem 0 .8rem;font-size:.92rem;line-height:1.5}
.backstory-ai{margin-top:.6rem}
.backstory-ai>summary small{font-weight:400;color:color-mix(in srgb,var(--ink) 55%,transparent)}

/* Admin league tools */
.adminp-toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:.6rem}
.adminp-tool{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:var(--radius-md);padding:1rem;background:color-mix(in srgb,var(--card) 60%,transparent)}
.adminp-tool h3{margin:0 0 .2rem;font-size:1rem}
.adminp-tool p{font-size:.82rem;margin:.15rem 0 .6rem}
.adminp-toolrow{display:flex;gap:.5rem;align-items:center}
.adminp-toolrow input[type=number]{width:6rem;font:inherit;font-size:.9rem;padding:.4rem .5rem;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}
.adminp-check{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin-bottom:.6rem}

/* Auto-generated legend disclaimer */
.backstory-auto{font-size:.8rem;font-weight:700;color:var(--gold,#f5b301);background:color-mix(in srgb,var(--gold,#f5b301) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold,#f5b301) 30%,transparent);border-radius:8px;padding:.45rem .6rem;margin:0 0 .6rem}

/* Admin generation failure notice */
.adminp-genfail{font-size:.82rem;font-weight:700;color:#ff7a6d;background:color-mix(in srgb,#ff4d3d 12%,transparent);
  border:1px solid color-mix(in srgb,#ff4d3d 34%,transparent);border-radius:8px;padding:.5rem .65rem;margin:0 0 .6rem}
.lk-logo-note{font-size:.76rem;color:color-mix(in srgb,var(--ink) 58%,transparent);margin:.2rem 0 .6rem;line-height:1.45}
.lk-logo-note strong{color:var(--turf)}
.adminp-emoji-in{width:3.6rem;font-size:1rem;text-align:center;padding:.3rem .3rem;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}

/* Live Wire enrichment: scorer headshot + roster metadata */
.lwire-face { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin-right: 2px; object-fit: cover; background: rgba(255,255,255,.15); }
.lwire-item a { color: inherit; text-decoration: underline; }
.lwire-meta { opacity: .75; font-style: normal; }

/* Game of the Week chat */
.gotw-chat-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .5rem 0; }
.gotw-msg { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; }
.gotw-msg--mine .gotw-msg-body b { color: var(--me-accent, var(--gold)); }
.gotw-msg-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(255,255,255,.12); }
.gotw-msg-body i { opacity: .55; font-size: .72rem; margin-left: .3rem; }
.gotw-chat-form { display: flex; gap: .5rem; margin-top: .4rem; }
.gotw-chat-form input { flex: 1; min-width: 0; }

/* Game of the Week hero: inline starter lineups on the scoreboard card */
.gotw-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; padding: .55rem .8rem .25rem; }
.gotw-lineups .det-lineup { margin: 0; }
.gotw-lineups-hint { text-align: center; font-size: .72rem; margin: .1rem 0 .55rem; }
@media (max-width: 700px) { .gotw-lineups { grid-template-columns: 1fr; } }
.det-benchhead { margin: .7rem 0 .2rem; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.det-rosters--bench .det-row { opacity: .62; }

/* GotW hero hub: split halves, projection graph, blow-by-blow */
.gotw-hero { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.gotw-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
.gotw-half { padding: .7rem .9rem .9rem; }
.gotw-half h4 { margin: 0 0 .5rem; font-size: .9rem; }
.gotw-half h4 em { display: block; font-size: .72rem; opacity: .65; font-style: normal; }
.gotw-half--home { border-right: 1px solid rgba(255,255,255,.08); box-shadow: inset 4px 0 0 var(--gold, #f5b301); }
.gotw-half--away { box-shadow: inset -4px 0 0 #7fd4ff; text-align: right; }
.gotw-half--away .det-row { flex-direction: row-reverse; }
@media (max-width: 700px) { .gotw-halves { grid-template-columns: 1fr; } .gotw-half--away { text-align: left; } .gotw-half--away .det-row { flex-direction: row; } .gotw-half--home { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } }
.gotw-graph svg { width: 100%; height: 200px; display: block; }
.gotw-graph-legend { margin: .3rem 0 0; font-size: .78rem; }
.gotw-pbp-list { display: flex; flex-direction: column; gap: .45rem; max-height: 360px; overflow-y: auto; }
.gotw-play { display: flex; align-items: center; gap: .55rem; font-size: .82rem; padding: .35rem .5rem; border-radius: 8px; background: rgba(255,255,255,.03); }
.gotw-play--away { box-shadow: inset -3px 0 0 #7fd4ff; }
.gotw-play--home { box-shadow: inset 3px 0 0 var(--gold, #f5b301); }
.gotw-play--score { background: rgba(245,179,1,.12); }
.gotw-play-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(255,255,255,.12); }
.gotw-play-body em { display: block; font-style: normal; opacity: .6; font-size: .72rem; }
.gotw-play-pts { margin-left: auto; font-weight: 800; color: var(--gold, #f5b301); }

/* Display face for the scoreboard masthead + scores (self-hosted, OFL). */
@font-face {
	font-family: "Anton";
	src: url("/static/fonts/anton.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* The scoreboard masthead: game-day hype band with the GotW billing. */
.lg-masthead { position: relative; margin-bottom: 1.1rem; padding: 1rem 1.1rem 1.2rem; border-radius: 14px; overflow: hidden;
	background: linear-gradient(112deg, rgba(245,179,1,.16), rgba(255,255,255,.03) 42%, rgba(127,212,255,.12));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lg-masthead::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(112deg, transparent 0 46px, rgba(255,255,255,.035) 46px 54px); }
.lg-mast-eyebrow { margin: 0 0 .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; opacity: .7; }
.lg-mast-week { display: flex; align-items: baseline; gap: .8rem; }
.lg-mast-title { margin: 0; font-family: "Anton", "Arial Narrow", Impact, sans-serif; font-weight: 400;
	font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .95; text-transform: uppercase; letter-spacing: .015em;
	background: linear-gradient(180deg, #fff 55%, var(--gold, #f5b301)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-mast-live { transform: translateY(-4px); }
.lg-mast-gotw { display: block; margin-top: .8rem; padding: .6rem .8rem; border-radius: 10px; text-decoration: none; color: inherit;
	background: rgba(0,0,0,.28); box-shadow: inset 4px 0 0 var(--gold, #f5b301), inset -4px 0 0 #7fd4ff; }
.lg-mast-gotw:hover { background: rgba(0,0,0,.4); }
.lg-mast-gotw-tag { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold, #f5b301); margin-bottom: .25rem; }
.lg-mast-gotw-bill { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.lg-mast-team { font-family: "Anton", "Arial Narrow", Impact, sans-serif; font-size: clamp(1rem, 2.6vw, 1.5rem); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.lg-mast-team em { display: block; font-family: inherit; font-size: .62em; font-style: normal; opacity: .6; letter-spacing: .08em; }
.lg-mast-team--away { text-align: right; }
.lg-mast-score { font-family: "Anton", "Arial Narrow", Impact, sans-serif; font-size: clamp(1.3rem, 3.4vw, 2rem); white-space: nowrap; }
.lg-mast-score i { font-style: normal; font-size: .55em; opacity: .6; margin: 0 .25rem; }
@media (max-width: 560px) { .lg-mast-gotw-bill { flex-direction: column; align-items: stretch; text-align: center; } .lg-mast-team--away { text-align: center; } .lg-mast-team { text-align: center; } }

/* Let the display face carry the big numbers on the matchup cards too. */
.mup-score, .det-score { font-family: "Anton", "Arial Narrow", Impact, sans-serif; letter-spacing: .02em; }
html { scroll-behavior: smooth; }

/* Manager faces on the masthead billing and hub halves */
.lg-mast-face { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; vertical-align: -10px; margin: 0 .45rem 0 0; image-rendering: pixelated; background: rgba(255,255,255,.1); }
.lg-mast-team--away .lg-mast-face { margin: 0 0 0 .45rem; }
.gotw-half-face { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; vertical-align: -8px; margin-right: .4rem; image-rendering: pixelated; background: rgba(255,255,255,.1); }