/*
 * Team Pages CSS — single-team + team-hub + (player Phase 4)
 *
 * Scoped under body.bo-team-route to avoid leaking the dark theme tokens
 * outside team URLs. Chrome (header/ticker/footer) is rendered by the
 * existing child-theme shell — this file only styles the .wrap content.
 *
 * Tokens align with brand-style-guide.md:
 *   --primary    = #33CC70  (BO green)
 *   --secondary  = #1A262E  (BO dark)
 * Plus team-specific --team / --team-2 injected inline per page from
 * ACF bo_colors_primary / bo_colors_secondary.
 */

/* Override the global child-theme wrapper that has a light background +
 * narrow max-width + side borders. Team pages need full-width dark canvas. */
body.bo-team-route .bo-page {
	background: var(--surf-0) !important;
	max-width: 100% !important;
	border: 0 !important;
	padding-bottom: 0 !important;
}

/* Picks archive — clickable team names inside the row title.
   The .bo-pa-row__overlay covers everything; team links elevate above. */
.bo-pa-row__team-link {
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 2;
	border-bottom: 1px dotted color-mix(in oklab, currentColor 30%, transparent);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.bo-pa-row__team-link:hover,
.bo-pa-row__team-link:focus-visible {
	color: var(--primary, #33CC70);
	border-bottom-color: var(--primary, #33CC70);
}

/* Single-pick hero — team-name + logo link */
.bo-sp-hero__team-link,
.bo-sp-hero__logo-link {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.bo-sp-hero__team-link { border-bottom: 1px dotted rgba(255,255,255,0.35); }
.bo-sp-hero__team-link:hover { color: var(--primary, #33CC70); border-bottom-color: var(--primary, #33CC70); }
.bo-sp-hero__logo-link:hover { transform: scale(1.04); opacity: 0.92; }

/* Breadcrumbs — dark variant matching the page surface.
   Overrides components.css `.bo-crumbs { background: var(--paper) }` etc. */
body.bo-team-route .bo-crumbs {
	background: var(--surf-0, #0A1117) !important;
	border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
	color: var(--txt-3, #707A82) !important;
}
body.bo-team-route .bo-crumbs a {
	color: var(--txt-2, #aaa) !important;
}
body.bo-team-route .bo-crumbs a:hover,
body.bo-team-route .bo-crumbs a:focus-visible {
	color: var(--primary-60, #70DD96) !important;
}
body.bo-team-route .bo-crumbs .sep {
	color: var(--txt-3, #707A82) !important;
	opacity: 0.6;
}
body.bo-team-route .bo-crumbs .current {
	color: #fff !important;
}

body.bo-team-route {
	--primary: #33CC70;
	--primary-60: #70DD96;
	--secondary: #1A262E;
	--gold: #bd9b60;
	--danger: #D94848;
	--warn: #E0A53A;
	--surf-0: #0A1117;
	--surf-1: #0F1820;
	--surf-2: #152128;
	--surf-3: #1B2A33;
	--line: rgba(255, 255, 255, 0.08);
	--line-2: rgba(255, 255, 255, 0.14);
	--txt-2: #9BA3AA;
	--txt-3: #6B7378;
	--mono: "JetBrains Mono", ui-monospace, monospace;

	/* Page background — full bleed under chrome */
	background: var(--surf-0);
	color: #fff;
}

body.bo-team-route .bo-team-page {
	position: relative;
	background:
		radial-gradient(900px 600px at 80% -10%, color-mix(in oklab, var(--team, #33CC70) 18%, transparent), transparent 60%),
		radial-gradient(700px 500px at 0% 90%, rgba(51, 204, 112, 0.05), transparent 60%),
		linear-gradient(180deg, var(--surf-0) 0%, var(--surf-1) 60%, var(--surf-2) 100%);
	min-height: 60vh;
	padding-bottom: 60px;
}
body.bo-team-route .bo-team-page::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
	z-index: 0;
}
body.bo-team-route .bo-team-page > * { position: relative; z-index: 1; }

body.bo-team-route .bo-team-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 0;
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -0.005em;
}

/* ─── HERO ─── */
.bo-team-hero {
	position: relative;
	padding: 28px 24px 24px;
	border-radius: 20px;
	background: linear-gradient(135deg, color-mix(in oklab, var(--team, #33CC70) 22%, var(--surf-1)) 0%, var(--surf-1) 60%);
	border: 1px solid var(--line);
	border-left: 3px solid var(--team, var(--primary));
	overflow: hidden;
	margin-bottom: 18px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: start;
}
.bo-team-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(600px 280px at 100% 0%, color-mix(in oklab, var(--team-2, var(--gold)) 14%, transparent), transparent 60%);
	z-index: 0;
}
/* Team logo watermark — left-anchored, fades to transparent on the right.
 * Lives behind the hero text. Inline style="background-image:url(...)" on
 * the div so each team gets its own logo. */
.bo-team-hero__bg {
	position: absolute;
	inset: 0;
	width: 55%;
	background-repeat: no-repeat;
	background-position: -8% center;
	background-size: contain;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 90%);
	        mask-image: linear-gradient(to right, black 0%, black 35%, transparent 90%);
	filter: saturate(1.1);
}

/* WC nations: flag overflows the hero height slightly (110%) so the
 * watermark feels generous rather than tightly cropped. We widen the bg
 * div so the flag lives across more of it, and override the mask so the
 * fade actually happens *on* the visible flag area (vs the parent rule
 * that fades way past where a 3:2 flag ends). */
.bo-team-hero__bg--flag {
	width: 35%;
	background-size: auto 110%;
	background-position: 0 center;
	opacity: 0.22;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 15%, transparent 95%);
	        mask-image: linear-gradient(to right, black 0%, black 15%, transparent 95%);
}

.bo-team-hero__main {
	position: relative;
	z-index: 1;
	min-width: 0;
	display: grid;
	grid-template-areas:
		"sport"
		"title"
		"meta";
	gap: 12px;
}
.bo-team-hero__sport-line {
	grid-area: sport;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
}
.bo-team-hero__title { grid-area: title; margin: 0; }
.bo-team-hero__meta {
	grid-area: meta;
	margin: 0;
	color: var(--txt-2);
	font-size: 14px;
	font-family: var(--mono);
	letter-spacing: 0.04em;
}

/* Quick facts box — desktop right rail */
.bo-team-hero__facts {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	min-width: 0;
}
.bo-team-hero__facts-title {
	margin: 0 0 12px;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}
.bo-team-hero__facts-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bo-team-hero__fact {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--line);
}
.bo-team-hero__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.bo-team-hero__fact dt {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	flex-shrink: 0;
}
.bo-team-hero__fact dd {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-align: right;
	font-family: var(--mono);
}

/* legacy sub-elements kept for backwards compat with player headers */
.bo-team-hero__row { position: relative; z-index: 1; display: block; min-width: 0; }
.bo-team-hero__eyebrow { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
/* When player uses the legacy hero, the grid wrapper has no facts → force single-col.
   EXCLUDE player hero v2 (which has .bo-player-photo as 2nd col). */
.bo-team-hero:not(:has(.bo-team-hero__main)):not(:has(.bo-player-photo)) {
	grid-template-columns: 1fr;
}
.bo-team-hero__logo {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	flex: none;
	background: linear-gradient(140deg, var(--team, var(--primary)) 0%, color-mix(in oklab, var(--team, var(--primary)) 70%, #000) 100%);
	color: var(--team-ink, #fff);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.04em;
	box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--team, var(--primary)) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	position: relative;
	overflow: hidden;
}
.bo-team-hero__logo .ring {
	position: absolute;
	inset: 5px;
	border-radius: 9px;
	border: 1.5px solid var(--team-2, var(--gold));
	opacity: 0.85;
}
.bo-team-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}

/* League hub variant: white background + use background-image (more
 * reliable than <img> + object-fit when the SVG has a tall viewBox like
 * the NBA logo at 441×1000). The PHP renderer drops the inner <img>
 * and sets style="background-image:url(…)" inline.
 */
.bo-team-hero__logo--league {
	background-color: #fff !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-origin: content-box !important;
	padding: 8px !important;
	box-sizing: border-box !important;
}
.bo-team-hero__logo--league img {
	display: none; /* fallback — we render via background-image instead */
}
.bo-team-hero__eyebrow-text {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bo-chip {
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line);
	color: #fff;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.bo-chip--team {
	background: color-mix(in oklab, var(--team, var(--primary)) 30%, transparent);
	border-color: color-mix(in oklab, var(--team, var(--primary)) 50%, transparent);
	color: #fff;
}
.bo-team-hero h1 {
	margin: 0 0 6px;
	font-size: 38px;
	line-height: 1.04;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: #fff;
}
/* Hero h1 accent — uses --team-accent (computed PHP-side via
   `bo_player_pick_em_color()` to pick the more vibrant of primary/secondary).
   Falls back to --team-2 then gold for legacy callers. Applies to BOTH team
   pages and player pages so e.g. "Cardinals" matches the player's last-name
   accent on the same team's player pages. */
.bo-team-hero h1 em { color: var(--team-accent, var(--team-2, var(--gold))); font-style: normal; }
.bo-team-hero--player h1 em { color: var(--team-accent, var(--team-2, var(--gold))); }
/* Club name in eyebrow — same accent color as player's last-name <em>
   (matches NBA/NFL convention where it's natural via team-2). */
.bo-team-hero__team-link {
	color: var(--team-accent, var(--team-2, var(--gold)));
	text-decoration: none;
	font-weight: 700;
	transition: opacity 0.15s ease;
}
.bo-team-hero__team-link:hover { opacity: 0.85; }
/* National team chip — same muted color as position ("DEFENDER · #2") */
.bo-team-hero__nat-link {
	color: var(--txt-2);
	text-decoration: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color 0.15s ease;
}
.bo-team-hero__nat-link::before { content: "🌍"; margin-right: 4px; font-size: 11px; }
.bo-team-hero__nat-link:hover { color: var(--primary-60, #70DD96); }

/* ─── Player hero v2 — info left, photo right (no background) ───
   Hero height is driven by the LEFT column content (eyebrow + h1 + meta).
   The photo on the right sizes itself to fit that height — never stretches it. */
.bo-team-hero.bo-team-hero--player {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;  /* photo column stretches to hero height */
	gap: 24px;
}
.bo-team-hero--player .bo-team-hero__row {
	min-width: 0;
	position: relative;
	z-index: 1;
}
/* Photo cell — sized by image height, capped by hero row height,
   vertically centered. */
.bo-player-photo {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;          /* vertical center */
	justify-content: center;
	background: transparent;
	height: 100%;
	max-width: 220px;
}
.bo-player-photo--has-image img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center;       /* centered horizontally + vertically */
	display: block;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
.bo-player-photo--placeholder {
	background:
		radial-gradient(120% 90% at 50% 0%,
			color-mix(in oklab, var(--team, #33CC70) 35%, transparent) 0%,
			transparent 70%),
		linear-gradient(160deg,
			color-mix(in oklab, var(--team, #33CC70) 18%, var(--surf-2, #1A262E)) 0%,
			color-mix(in oklab, var(--team-2, #1A262E) 30%, var(--surf-1, #0E1317)) 100%);
	border: 1px solid color-mix(in oklab, var(--team, #33CC70) 25%, transparent);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 color-mix(in oklab, var(--team, #fff) 18%, transparent),
		0 8px 24px -8px color-mix(in oklab, var(--team, #000) 50%, transparent);
	font-family: var(--sans);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--team-ink, #fff);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	align-items: center;
	margin: 0;
	aspect-ratio: auto;
	width: 160px;
	min-width: 140px;
	height: 100%;
	min-height: 140px;
	font-size: 64px;
}
.bo-player-photo__init {
	display: block;
	opacity: 0.95;
}
.bo-team-hero__tagline { margin: 0; color: var(--txt-2); font-size: 14px; max-width: 560px; }
.bo-team-hero__cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ─── Buttons ─── */
.bo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.005em;
	border: 1px solid transparent;
	background: transparent;
	color: #fff;
	transition: transform 0.15s ease, background 0.2s ease;
	cursor: pointer;
	text-decoration: none;
}
.bo-btn:hover { transform: translateY(-1px); }
.bo-btn--primary {
	background: var(--primary);
	color: #0a1a10;
	box-shadow: 0 6px 18px -8px var(--primary);
}
.bo-btn--primary:hover { background: var(--primary-60); }
.bo-btn--ghost { background: rgba(255, 255, 255, 0.05); border-color: var(--line-2); color: #fff; }
.bo-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.bo-btn--sm { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
.bo-btn .arr { font-size: 14px; }

/* ─── KPI strip ─── */
.bo-team-kpi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 18px;
}
.bo-team-kpi--3 { grid-template-columns: repeat(3, 1fr); }
.bo-team-kpi__cell {
	padding: 14px 16px;
	background: var(--surf-2);
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
}
.bo-team-kpi__cell--accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: var(--team, var(--primary));
}
.bo-team-kpi__label { font-family: var(--mono); font-size: 10px; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.1em; }
.bo-team-kpi__val { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.bo-team-kpi__val--mono { font-family: var(--mono); font-weight: 600; font-size: 22px; }
.bo-team-kpi__small { font-family: var(--mono); font-size: 10px; color: var(--txt-2); }

/* ─── Next match ─── */
.bo-next-match {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 20px 22px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--surf-2) 0%, var(--surf-3) 100%);
	border: 1px solid var(--line);
	border-left: 3px solid var(--team, var(--primary));
	margin-bottom: 18px;
}
.bo-next-match__meta {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.bo-next-match__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bo-next-match__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bo-mini-logo {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: -0.02em;
	flex: none;
	color: #fff;
	overflow: hidden;
	box-sizing: border-box;
}
.bo-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.bo-mini-logo--xs { width: 28px; height: 28px; border-radius: 6px; padding: 0; }
.bo-mini-logo--xs img { padding: 3px; }

/* schedule opp-name link */
.bo-schedule__opp-name--link {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.bo-schedule__opp-name--link:hover {
	color: var(--team-2, var(--gold));
	border-bottom-color: var(--team-2, var(--gold));
}

/* next-match opp-name link */
.bo-next-match__name--link {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.bo-next-match__name--link:hover {
	color: var(--team-2, var(--gold));
	border-bottom-color: var(--team-2, var(--gold));
}
.bo-next-match__name { font-weight: 700; font-size: 15px; color: #fff; }
.bo-next-match__rec { display: block; font-family: var(--mono); font-size: 11px; color: var(--txt-2); font-weight: 500; margin-top: 2px; }
.bo-next-match__vs { font-family: var(--mono); font-size: 12px; color: var(--txt-3); text-transform: uppercase; font-weight: 600; }
.bo-next-match__odds { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.bo-next-match__spread {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--line);
}
.bo-next-match__spread--team {
	color: var(--team-2, var(--gold));
	border-color: color-mix(in oklab, var(--team-2, var(--gold)) 40%, transparent);
	background: color-mix(in oklab, var(--team-2, var(--gold)) 10%, transparent);
}
.bo-next-match--placeholder {
	border-left-color: var(--line);
	color: var(--txt-2);
	text-align: center;
	padding: 30px;
	display: block;
}
.bo-next-match--placeholder p { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; }

/* ─── Sportsbook banner (top operator above schedule) ─── */
.bo-book-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 12%, var(--surf-2)) 0%, var(--surf-2) 60%);
	border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--line));
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.bo-book-banner__logo {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: #fff;
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
	font-weight: 900;
	font-size: 14px;
	color: var(--secondary);
}
.bo-book-banner__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.bo-book-banner__text { flex: 1; min-width: 0; }
.bo-book-banner__eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--primary-60);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.bo-book-banner__name-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.bo-book-banner__name { font-weight: 700; font-size: 14px; color: #fff; }
.bo-book-banner__sep { color: var(--txt-3); }
.bo-book-banner__bonus { color: var(--primary-60); font-weight: 700; }
.bo-book-banner__desc {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	margin-top: 4px;
	font-weight: 500;
}

/* Book card promo description (3-up) */
.bo-book-card__promo-d {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-2);
	font-weight: 500;
	margin-top: 4px;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* Storyline CTA bonus desc */
.bo-storyline__cta-desc {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-2);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin-top: -4px;
}

/* ─── Section ─── */
.bo-team-section { margin-bottom: 32px; }
.bo-team-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	flex-wrap: wrap;
}
.bo-team-section__head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.bo-team-section__sub {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ─── World Cup widget ─── */
.bo-wc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bo-wc__block { background: var(--surf-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.bo-wc__block h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	font-family: var(--mono);
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.bo-wc__group { display: flex; flex-direction: column; gap: 8px; }
.bo-wc__game {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px dashed var(--line);
	font-size: 13px;
}
.bo-wc__game:last-child { border-bottom: 0; }
.bo-wc__g-team { display: flex; gap: 8px; align-items: center; font-weight: 600; min-width: 0; }
.bo-wc__flag {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: 8px;
	font-weight: 700;
	color: #fff;
	background: var(--surf-3);
	overflow: hidden;
}
.bo-wc__flag img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.bo-wc__opp { color: #fff; }
.bo-wc__time { font-family: var(--mono); font-size: 11px; color: var(--txt-2); }
.bo-wc__game--played .bo-wc__time { color: var(--primary-60); font-weight: 700; }

/* Linked variant — opponent row clickable to its team page */
a.bo-wc__game--linked {
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease, padding 0.15s ease;
	margin: 0 -8px;
	padding: 8px;
	border-radius: 6px;
}
a.bo-wc__game--linked:hover,
a.bo-wc__game--linked:focus-visible {
	background: color-mix(in oklab, var(--primary, #33CC70) 10%, transparent);
	outline: 0;
}
a.bo-wc__game--linked .bo-wc__opp {
	border-bottom: 1px dotted color-mix(in oklab, currentColor 30%, transparent);
}
a.bo-wc__game--linked:hover .bo-wc__opp {
	color: var(--primary-60, #70DD96);
	border-bottom-color: var(--primary-60, #70DD96);
}

.bo-wc__path { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 6px; }
.bo-wc__stage {
	flex: 1;
	text-align: center;
	padding: 10px 6px;
	border-radius: 8px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--surf-3);
	color: var(--txt-3);
	border: 1px solid var(--line);
}
.bo-wc__stage--lit {
	background: color-mix(in oklab, var(--team, var(--primary)) 25%, var(--surf-2));
	color: #fff;
	border-color: var(--team, var(--primary));
}
.bo-wc__stage--active {
	background: var(--team, var(--primary));
	color: var(--team-ink, #0a0a0a);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--team, var(--primary)) 30%, transparent);
}
.bo-wc__stage--elim {
	background: rgba(217, 72, 72, 0.12);
	color: #E78282;
	border-color: rgba(217, 72, 72, 0.3);
	text-decoration: line-through;
}
.bo-wc__arrow {
	color: var(--txt-3);
	font-family: var(--mono);
	font-size: 14px;
}

.bo-wc__odds {
	margin-top: 10px;
	padding: 12px;
	border-radius: 10px;
	background: linear-gradient(90deg, color-mix(in oklab, var(--team, var(--primary)) 14%, var(--surf-3)) 0%, var(--surf-3) 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bo-wc__odds-l { font-family: var(--mono); font-size: 10px; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.1em; }
.bo-wc__odds-v { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--team-2, var(--gold)); }

@media (max-width: 600px) {
	.bo-wc { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Schedule rows ─── */
.bo-schedule { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.bo-schedule__row {
	display: grid;
	grid-template-columns: 110px 1fr 80px 110px;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	background: var(--surf-2);
	min-height: 52px;
	transition: background 0.15s ease;
}
.bo-schedule__row:hover { background: var(--surf-3); }
.bo-schedule__date { font-family: var(--mono); font-size: 11px; color: var(--txt-2); font-weight: 600; }
.bo-schedule__opp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bo-schedule__opp-name { font-weight: 600; font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-schedule__ha { font-family: var(--mono); font-size: 10px; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.08em; }
.bo-schedule__ha--home { color: var(--primary-60); }
.bo-schedule__score { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; color: #fff; }
.bo-schedule__score--W { color: var(--primary); }
.bo-schedule__score--L { color: var(--danger); }
.bo-schedule__score--T { color: var(--warn); }

/* ─── Player KPI strip (.pstats) ─── */
.bo-pstats {
	display: grid;
	/* auto-fit so a 2-cell strip (e.g. NFL DL: GP + Position) doesn't
	   leave 3 ghost columns; min 110px to keep cells legible. */
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 1px;
	background: var(--line);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 18px;
}
.bo-pstats__cell { padding: 14px; background: var(--surf-2); text-align: center; }
.bo-pstats__label { font-family: var(--mono); font-size: 10px; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.1em; }
.bo-pstats__val { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin-top: 4px; line-height: 1; color: #fff; }
.bo-pstats__form { font-family: var(--mono); font-size: 10px; color: var(--primary-60); font-weight: 600; margin-top: 2px; }

/* ─── Roster ─── */
.bo-team-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.bo-roster-tile {
	position: relative;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: transform 0.15s ease, border-color 0.2s ease;
	cursor: pointer;
	text-align: center;
	color: inherit;
	text-decoration: none;
}
.bo-roster-tile:hover { transform: translateY(-2px); border-color: var(--team, var(--primary)); }
.bo-roster-tile__head {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--team, var(--primary)) 0%, color-mix(in oklab, var(--team, var(--primary)) 60%, #000) 100%);
	color: var(--team-ink, #fff);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -0.02em;
	position: relative;
	/* NB: NO overflow:hidden here — would clip the jersey badge that
	   intentionally overflows. Image is clipped via its own border-radius. */
}
.bo-roster-tile__init { display: block; }
/* Photo variant: replaces gradient with a near-white bg so transparent
   PNGs (api-sports headshots have shoulders cut out) render cleanly. */
.bo-roster-tile__head--photo {
	background: #f3f5f8;
}
.bo-roster-tile__head--photo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;            /* clip image to circle directly */
	object-fit: cover;
	object-position: center 18%;   /* show face, crop torso */
	display: block;
}
.bo-roster-tile__jersey {
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--primary, #33CC70);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-weight: 700;
	font-size: 10px;
	border: 2px solid var(--surf-2);
	z-index: 2;                 /* above photo */
}
.bo-roster-tile__name { font-size: 13px; font-weight: 700; line-height: 1.15; margin-top: 4px; color: #fff; }
.bo-roster-tile__pos { font-family: var(--mono); font-size: 10px; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.1em; }

/* ─── Player headshot (placeholder + photo override) ─── */
.bo-player-headshot {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--team, var(--primary)) 0%, color-mix(in oklab, var(--team, var(--primary)) 60%, #000) 100%);
	display: grid;
	place-items: center;
	position: relative;
	flex: none;
	box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--team, var(--primary)) 70%, transparent);
	overflow: hidden;
}
.bo-player-headshot--sm { width: 64px; height: 64px; }
.bo-player-headshot__init {
	font-weight: 900;
	font-size: 22px;
	color: var(--team-ink, #fff);
	letter-spacing: -0.04em;
}
.bo-player-headshot__jr {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--primary, #33CC70);
	border: 2px solid var(--surf-2);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-weight: 800;
	font-size: 11px;
}
.bo-player-headshot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Photo variant: white-ish bg so transparent api-sports PNGs don't blend
 * into the team gradient and become unreadable. */
.bo-player-headshot--photo {
	background: linear-gradient(135deg, color-mix(in oklab, var(--team, var(--primary)) 35%, #f4f4f4) 0%, #f4f4f4 100%);
}

.bo-player-meta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.bo-pi {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.bo-pi b { color: #fff; font-weight: 700; }

/* ─── Storyline ─── */
.bo-storyline {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 22px 24px;
	position: relative;
}
.bo-storyline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	width: 32px;
	height: 3px;
	background: var(--team, var(--primary));
	border-radius: 0 0 3px 3px;
}
.bo-storyline h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; max-width: 680px; color: #fff; }
.bo-storyline p { margin: 0 0 12px; color: #D5DADD; font-size: 14px; max-width: 680px; }
.bo-storyline p:last-of-type { margin-bottom: 0; }
.bo-storyline__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 14px;
}

/* 2-column layout: storyline body left, sportsbook CTA right (desktop only). */
.bo-storyline__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: start;
}
.bo-storyline__body { min-width: 0; }
.bo-storyline__cta {
	background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, var(--surf-3)) 0%, var(--surf-3) 100%);
	border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--line));
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bo-storyline__cta-book {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bo-storyline__cta-name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.bo-storyline__cta-bonus {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--primary-60);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

/* ─── Stats table ─── */
.bo-stats-tbl {
	width: 100%;
	border-collapse: collapse;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}
.bo-stats-tbl th, .bo-stats-tbl td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.bo-stats-tbl tr:last-child td { border-bottom: 0; }
.bo-stats-tbl th {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	background: var(--surf-3);
}
.bo-stats-tbl td { font-weight: 600; font-size: 14px; color: #fff; }
.bo-stats-tbl .bo-stats-tbl__lbl {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

/* ─── Sportsbook banner logo — fit the 42x42 chip cleanly ─── */
.bo-book-banner__logo {
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
}
.bo-book-banner__logo img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
	display: block;
}

/* ─── Stats source caption (above pstats KPI strip) ─── */
.bo-stats-source {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 0 8px;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--txt-2);
	font-weight: 600;
}
.bo-stats-source__icon { font-size: 12px; line-height: 1; }
.bo-stats-source em {
	font-style: normal;
	color: var(--primary-60, #70DD96);
	font-weight: 700;
}

/* ─── National team chip (in hero eyebrow) ─── */
.bo-chip--nat {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	background: color-mix(in oklab, var(--primary, #33CC70) 18%, transparent);
	color: var(--primary-60, #70DD96);
	border: 1px solid color-mix(in oklab, var(--primary, #33CC70) 30%, transparent);
	text-decoration: none;
	transition: background 0.15s ease;
}
.bo-chip--nat:hover { background: color-mix(in oklab, var(--primary, #33CC70) 30%, transparent); }
.bo-chip--nat::before {
	content: "🌍";
	margin-right: 4px;
	font-size: 11px;
}

/* ─── World Cup 2026 dedicated section ─── */
.bo-pwc {
	background: linear-gradient(135deg,
		color-mix(in oklab, var(--primary, #33CC70) 8%, var(--surf-2)) 0%,
		var(--surf-2) 70%);
	border: 1px solid color-mix(in oklab, var(--primary, #33CC70) 25%, var(--line));
	padding: 22px 24px;       /* breathe — was inheriting too tight */
}
.bo-pwc .bo-team-section__head h2::before {
	content: "🌍";
	margin-right: 8px;
}
.bo-pwc__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
}
.bo-pwc__nat {
	display: flex; align-items: center; gap: 14px;
	color: inherit; text-decoration: none;
	transition: opacity 0.15s ease;
}
.bo-pwc__nat:hover { opacity: 0.85; }
.bo-pwc__flag {
	width: 64px; height: 44px; object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--line);
}
.bo-pwc__name { font-weight: 700; font-size: 17px; color: #fff; }
.bo-pwc__meta {
	display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
	font-size: 12px; color: var(--txt-2); margin-top: 4px;
}
.bo-pwc__meta b { color: #fff; font-weight: 700; }
.bo-pwc__rank {
	font-family: var(--mono);
	font-size: 10px; padding: 2px 6px;
	background: color-mix(in oklab, var(--primary, #33CC70) 18%, transparent);
	color: var(--primary-60, #70DD96);
	border-radius: 3px;
	font-weight: 700;
}
.bo-pwc__next {
	background: rgba(0,0,0,0.25);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 16px;
	min-width: 180px;
}
.bo-pwc__next-lbl {
	font-family: var(--mono); font-size: 9px;
	color: var(--primary-60, #70DD96);
	text-transform: uppercase; letter-spacing: 0.12em;
	font-weight: 700;
}
.bo-pwc__next-mt {
	font-weight: 700; font-size: 14px; color: #fff; margin-top: 4px;
}
.bo-pwc__next-when {
	font-family: var(--mono); font-size: 11px;
	color: var(--txt-2); margin-top: 2px;
}
.bo-pwc__note {
	margin: 14px 0 0; padding: 10px 12px;
	background: rgba(0,0,0,0.15);
	border-radius: 6px;
	font-size: 11px; color: var(--txt-2);
	font-style: italic;
}

/* ─── Per-90 strip variant (visually subordinate to the season-totals KPI) ─── */
.bo-pstats--per90 {
	margin-top: -10px; /* close to the totals strip */
	margin-bottom: 18px;
}
.bo-pstats--per90 .bo-pstats__cell { padding: 10px 8px; background: var(--surf-1, #0E1317); }
.bo-pstats--per90 .bo-pstats__val { font-size: 18px; }
.bo-pstats--per90 .bo-pstats__label { font-size: 9px; }

/* ─── Performance breakdown 4-card grid ─── */
.bo-perf-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.bo-perf-card {
	background: var(--surf-2, #1A262E);
	border: 1px solid var(--line, color-mix(in oklab, var(--surf-2) 70%, #fff 18%));
	border-radius: 12px;
	padding: 14px;
}
.bo-perf-card__head {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--primary-60, #70DD96);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid color-mix(in oklab, currentColor 20%, transparent);
}
.bo-perf-card__list { list-style: none; margin: 0; padding: 0; }
.bo-perf-card__list li {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 7px 0; font-size: 13px;
	border-bottom: 1px solid color-mix(in oklab, var(--line) 50%, transparent);
}
.bo-perf-card__list li:last-child { border-bottom: 0; }
.bo-perf-card__lbl { color: var(--txt-2, #aaa); font-weight: 500; }
.bo-perf-card__val b { color: #fff; font-weight: 700; font-size: 15px; }
.bo-perf-card__val i {
	font-style: normal; font-family: var(--mono);
	font-size: 10px; color: var(--txt-2);
	margin-left: 4px;
}

/* ─── Team context card ─── */
.bo-pteam-ctx__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
}
.bo-pteam-ctx__team {
	display: flex; align-items: center; gap: 14px;
	color: inherit; text-decoration: none;
	transition: opacity 0.15s ease;
}
.bo-pteam-ctx__team:hover { opacity: 0.85; }
.bo-pteam-ctx__logo {
	width: 56px; height: 56px; object-fit: contain;
	background: var(--surf-1, #0E1317); border-radius: 10px; padding: 4px;
}
.bo-pteam-ctx__name { font-weight: 700; font-size: 16px; color: #fff; }
.bo-pteam-ctx__meta {
	display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
	font-size: 12px; color: var(--txt-2); margin-top: 4px;
}
.bo-pteam-ctx__meta b { color: #fff; font-weight: 700; }
.bo-pteam-ctx__form { display: inline-flex; gap: 3px; }
.bo-form-pill {
	font-style: normal; font-family: var(--mono);
	font-size: 9px; font-weight: 700;
	width: 16px; height: 16px;
	border-radius: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
}
.bo-form-pill--w { background: #2a8a4c; }
.bo-form-pill--d { background: #6c7280; }
.bo-form-pill--l { background: #b0445a; }
.bo-pteam-ctx__next {
	background: var(--surf-1, #0E1317);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 16px;
	min-width: 180px;
}
.bo-pteam-ctx__next-lbl {
	font-family: var(--mono); font-size: 9px;
	color: var(--primary-60, #70DD96);
	text-transform: uppercase; letter-spacing: 0.12em;
	font-weight: 700;
}
.bo-pteam-ctx__next-mt {
	font-weight: 700; font-size: 14px; color: #fff; margin-top: 4px;
}
.bo-pteam-ctx__next-when {
	font-family: var(--mono); font-size: 11px;
	color: var(--txt-2); margin-top: 2px;
}

/* ─── Player props (NBA) ─── */
.bo-player-props .bo-player-props__tbl { width: 100%; }
.bo-player-props .bo-player-props__tbl thead th { font-size: 10px; }
.bo-player-props .bo-player-props__tbl td b { font-size: 16px; color: var(--accent, #f5b300); }
.bo-player-props__cta-col { width: 1%; white-space: nowrap; }
.bo-player-props__cta-cell { text-align: right; }
.bo-player-props__cta-cell .bo-btn { padding: 6px 10px; font-size: 11px; line-height: 1; gap: 4px; }
.bo-player-props__cta-cell .bo-btn .arr { font-size: 11px; }
.bo-player-props__disclaimer {
	margin: 10px 0 0; font-size: 11px; color: var(--txt-2);
	font-style: italic; text-align: right;
}

/* ─── In-table opponent links ─── */
.bo-stats-tbl a.bo-tbl-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted color-mix(in oklab, currentColor 35%, transparent);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.bo-stats-tbl a.bo-tbl-link:hover,
.bo-stats-tbl a.bo-tbl-link:focus-visible {
	color: var(--primary-60, #33CC70);
	border-bottom-color: var(--primary-60, #33CC70);
}

/* ─── Mobile cards (game log + splits) ─── */
.bo-game-log__cards,
.bo-splits__cards { display: none; list-style: none; padding: 0; margin: 0; }
.bo-game-log__card,
.bo-splits__card {
	background: var(--surf-2, #1A262E);
	border: 1px solid var(--line, color-mix(in oklab, var(--surf-2) 70%, #fff 18%));
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 10px;
}
.bo-game-log__card:last-child,
.bo-splits__card:last-child { margin-bottom: 0; }
.bo-game-log__card-head,
.bo-splits__card-head {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 6px;
	font-size: 12px; color: var(--txt-2);
	padding-bottom: 8px; margin-bottom: 8px;
	border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.bo-game-log__date,
.bo-splits__lbl {
	font-family: var(--mono);
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--txt-2);
}
.bo-splits__lbl { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.05em; }
.bo-game-log__opp { color: #fff; font-weight: 600; flex: 1; min-width: 0; text-align: center; }
.bo-game-log__res { font-weight: 700; }
.bo-game-log__kpis,
.bo-splits__kpis {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bo-game-log__kpis span,
.bo-splits__kpis span {
	display: flex; flex-direction: column; align-items: center;
	background: var(--surf-1, #0E1317);
	border-radius: 8px; padding: 8px 4px;
}
.bo-game-log__kpis b,
.bo-splits__kpis b { font-size: 16px; color: #fff; font-weight: 700; line-height: 1; }
.bo-game-log__kpis i,
.bo-splits__kpis i {
	font-style: normal; font-family: var(--mono);
	font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--txt-2); margin-top: 4px;
}

/* ─── Sportsbook 3-up ─── */
.bo-book3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bo-book-card {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.15s ease, border-color 0.2s ease;
	position: relative;
	color: inherit;
	text-decoration: none;
}
.bo-book-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.bo-book-card__rk { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; color: var(--txt-3); font-weight: 700; }
.bo-book-card__row { display: flex; gap: 12px; align-items: center; }
.bo-book-card__logo {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.02em;
	flex: none;
	background: #fff;
	color: var(--secondary);
	overflow: hidden;
	box-sizing: border-box;
}
.bo-book-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.bo-book-card__name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: #fff; }
.bo-book-card__stars { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--txt-2); }
.bo-book-card__stars b { color: #fff; font-weight: 700; }
.bo-book-card__promo {
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--surf-3);
	border: 1px dashed var(--line-2);
}
.bo-book-card__promo-l { font-family: var(--mono); font-size: 9px; color: var(--primary-60); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.bo-book-card__promo-v { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; margin-top: 2px; color: #fff; }

/* ─── Footer linked teams ─── */
.bo-team-footer {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.bo-linked-teams h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.bo-linked-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bo-linked {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: all 0.2s ease;
	color: #fff;
	text-decoration: none;
}
.bo-linked:hover { background: var(--surf-3); border-color: var(--line-2); }
.bo-linked .ll { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-weight: 900; font-size: 9px; color: #fff; letter-spacing: -0.02em; overflow: hidden; }
.bo-linked .ll img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

/* ─── MLS top scorers / assists (hub) ─── */
.bo-mls-top__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.bo-mls-top__col {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
}
.bo-mls-top__title {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
}
.bo-mls-top__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bo-mls-top__row {
	display: grid;
	grid-template-columns: auto 32px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed var(--line);
}
.bo-mls-top__row:last-child { border-bottom: 0; }
.bo-mls-top__rank {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--txt-3);
	font-weight: 700;
}
.bo-mls-top__photo {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--surf-3), var(--line));
	overflow: hidden;
	object-fit: cover;
}
.bo-mls-top__photo--ph { background: var(--surf-3); }
.bo-mls-top__meta { display: flex; flex-direction: column; min-width: 0; }
.bo-mls-top__name {
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bo-mls-top__name-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.bo-mls-top__name-link:hover,
.bo-mls-top__name-link:focus-visible { color: var(--primary-60, #70DD96); }
.bo-mls-top__photo-link {
	display: inline-flex;
	border-radius: 50%;
	transition: transform 0.15s ease;
}
.bo-mls-top__photo-link:hover { transform: scale(1.06); }
.bo-mls-top__team {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--txt-3);
	letter-spacing: 0.04em;
}
.bo-mls-top__stat {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 16px;
	color: var(--primary-60);
}
.bo-mls-top__stat small {
	font-size: 9px;
	color: var(--txt-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-left: 2px;
}
@media (max-width: 700px) {
	.bo-mls-top__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Hub team index ─── */
.bo-hub-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bo-hub-chip {
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--txt-2);
	cursor: pointer;
	transition: all 0.2s ease;
}
.bo-hub-chip:hover { color: #fff; }
.bo-hub-chip--active { background: var(--surf-3); color: #fff; border-color: var(--line-2); }

.bo-hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bo-team-card {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.2s ease;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}
.bo-team-card:hover { transform: translateY(-2px); border-color: var(--team-c, var(--primary)); }
.bo-team-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--team-c, var(--primary)); }
.bo-team-card__row { display: flex; align-items: center; gap: 12px; }
.bo-team-card__logo {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--team-c, var(--primary)) 0%, color-mix(in oklab, var(--team-c, var(--primary)) 60%, #000) 100%);
	color: #fff;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.02em;
	flex: none;
	overflow: hidden;
}
.bo-team-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bo-team-card__name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.bo-team-card__conf { font-family: var(--mono); font-size: 10px; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; }
.bo-team-card__stats { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); }
.bo-team-card__stat { display: flex; flex-direction: column; gap: 2px; }
.bo-team-card__stat-l { font-family: var(--mono); font-size: 9px; color: var(--txt-3); text-transform: uppercase; letter-spacing: 0.08em; }
.bo-team-card__stat-v { font-family: var(--mono); font-weight: 700; font-size: 14px; color: #fff; }
.bo-team-card__stat-v--win { color: var(--primary-60); }
.bo-team-card__form { display: flex; gap: 3px; align-items: center; }
.bo-team-card__form-b { width: 8px; height: 14px; border-radius: 2px; background: var(--line); }
.bo-team-card__form-b--W { background: var(--primary); }
.bo-team-card__form-b--L { background: var(--danger); }

/* ─── Mobile ─── */
/* Player headshot + schedule + pstats mobile */
@media (max-width: 600px) {
	.bo-player-headshot { width: 50px; height: 50px; border-radius: 12px; }
	.bo-player-headshot__init { font-size: 18px; }
	.bo-player-headshot__jr { width: 22px; height: 22px; font-size: 10px; border-width: 2px; top: -3px; right: -3px; }
	.bo-player-meta-row { gap: 8px; }
	.bo-pi { font-size: 10px; }
	.bo-schedule__row { grid-template-columns: 70px 1fr 80px; gap: 8px; padding: 10px 12px; font-size: 12px; }
	.bo-schedule__row .bo-schedule__ha { display: none; }
	.bo-schedule__opp-name { font-size: 12px; }
	.bo-pstats__cell { padding: 10px 4px; }
	.bo-pstats__val { font-size: 16px; }
	.bo-pstats__label { font-size: 9px; }
}

@media (max-width: 900px) {
	.bo-team-hero { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 600px) {
	body.bo-team-route .bo-team-wrap { padding: 14px 14px 0; }
	.bo-team-hero { padding: 16px 16px 14px; border-radius: 14px; margin-bottom: 14px; }
	/* Mobile: stack as sport / title / meta — logo lives in the bg watermark */
	.bo-team-hero__main {
		grid-template-areas:
			"sport"
			"title"
			"meta";
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.bo-team-hero__bg {
		width: 70%;
		opacity: 0.08;
		background-position: -15% center;
	}
	/* WC flag mobile: full-width hero background, no fade. */
	.bo-team-hero__bg--flag {
		width: 100%;
		background-size: cover;
		background-position: center;
		opacity: 0.14;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.bo-team-hero h1, .bo-team-hero__title { font-size: 26px; line-height: 1.02; margin: 0; }
	.bo-team-hero__sport-line { font-size: 10px; margin-bottom: 0; }
	.bo-team-hero__meta { font-size: 12px; }
	/* Legacy player hero still uses inline logo in eyebrow */
	.bo-team-hero__logo { width: 56px; height: 56px; font-size: 16px; border-radius: 12px; flex: none; }
	.bo-team-hero__logo .ring { inset: 4px; border-radius: 8px; }
	.bo-team-hero__facts { padding: 12px; }
	.bo-team-hero__facts-title { font-size: 9px; margin-bottom: 8px; }
	.bo-team-hero__fact dt, .bo-team-hero__fact dd { font-size: 10px; }
	/* legacy player hero */
	.bo-team-hero__tagline { font-size: 13px; }
	.bo-team-hero__eyebrow { margin-bottom: 10px; gap: 10px; }
	.bo-team-hero__eyebrow-text { font-size: 10px; gap: 6px; }
	.bo-team-hero__cta { margin-top: 12px; gap: 8px; }
	.bo-team-hero__cta .bo-btn { flex: 1; justify-content: center; padding: 11px 12px; font-size: 13px; }
	.bo-team-kpi__cell { padding: 10px 8px; }
	.bo-team-kpi__val { font-size: 18px; }
	.bo-team-kpi__label { font-size: 9px; }
	.bo-next-match { grid-template-columns: 1fr; gap: 14px; padding: 16px; border-radius: 12px; }
	.bo-next-match__odds { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.bo-team-section__head h2 { font-size: 17px; }
	.bo-team-roster { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.bo-roster-tile { padding: 10px 6px; }
	.bo-roster-tile__head { width: 50px; height: 50px; font-size: 15px; }
	.bo-stats-tbl th, .bo-stats-tbl td { padding: 9px 10px; font-size: 12px; }
	/* Game log + splits → swap to mobile cards (table hidden) */
	.bo-game-log__tbl,
	.bo-splits__tbl { display: none; }
	.bo-game-log__cards,
	.bo-splits__cards { display: block; }
	.bo-book3 { grid-template-columns: 1fr; gap: 10px; }
	/* Performance grid: 4 cols → 2 on tablet, will be 1 on mobile via min(110px) auto-fit fallback */
	.bo-perf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.bo-perf-card { padding: 12px; }
	.bo-perf-card__list li { font-size: 12px; padding: 6px 0; }
	.bo-perf-card__val b { font-size: 14px; }
	/* Team context + WC: stack vertically */
	.bo-pteam-ctx__row,
	.bo-pwc__row { grid-template-columns: 1fr; gap: 12px; }
	.bo-pteam-ctx__next,
	.bo-pwc__next { width: 100%; }

	/* Player hero v2 mobile: still 2-col (info L, photo R) — just tighter */
	.bo-team-hero.bo-team-hero--player {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		padding: 18px 16px;
		align-items: stretch;
	}
	.bo-team-hero--player .bo-player-photo {
		max-width: 110px;
		min-width: 90px;
	}
	.bo-team-hero--player .bo-player-photo--placeholder {
		width: 90px;
		min-width: 80px;
		min-height: 100px;
		font-size: 32px;
		border-radius: 12px;
	}
	.bo-team-hero--player h1 { font-size: 26px !important; }
	.bo-team-hero--player .bo-player-meta-row { font-size: 11px; }
	.bo-hub-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.bo-storyline { padding: 18px 16px; }
	.bo-storyline h3 { font-size: 18px; }
	.bo-storyline__layout { grid-template-columns: 1fr; gap: 14px; }
	.bo-storyline__cta { padding: 12px; }
	.bo-team-footer { margin-top: 32px; }
}