/**
 * Audience-time features (2026-10-01): match-day room, Keep going block,
 * series + team hub pages. Markup: inc/psp-hubs.php + js/cricket-room.js.
 * Approved mockup: claude.ai/artifact/U8Tshy1UuLELYDbLwi2ux4.
 *
 * The cards carry their own navy surface so they read the same inside the
 * light article card, on the dark page and in light mode.
 */

:root {
	--psp-hb-navy: #0a1e38;
	--psp-hb-navy-2: #0f2a4d;
	--psp-hb-deep: #050e1c;
	--psp-hb-ice: #eaf4ff;
	--psp-hb-muted: #a9bdd6;
	--psp-hb-line: rgba( 234, 244, 255, 0.12 );
	--psp-hb-glass: rgba( 234, 244, 255, 0.04 );
	--psp-hb-gold: #ffb020;
	--psp-hb-gold-ink: #1a1200;
	--psp-hb-blue: #3a86e0;
	--psp-hb-blue-2: #7fb3ef;
	--psp-hb-good: #4fd18b;
	--psp-hb-bad: #ff8f8f;
	--psp-hb-live: #ff6b6b;
	--psp-hb-radius: 16px;
	--psp-hb-display: 'Outfit', 'PT Sans', sans-serif;
	--psp-hb-mono: 'JetBrains Mono', Consolas, monospace;
	--psp-hb-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* ---------- shared bits ---------- */

.psp-room,
.psp-keep,
.psp-hub {
	font-family: var( --psp-hb-display );
	color: var( --psp-hb-ice );
}
.psp-room *,
.psp-keep *,
.psp-hub * {
	box-sizing: border-box;
}
.psp-muted { color: var( --psp-hb-muted ); }
.psp-small { font-size: 12.5px; }
.psp-mono { font-family: var( --psp-hb-mono ); font-weight: 700; }
.psp-good { color: var( --psp-hb-good ); font-weight: 700; }
.psp-bad { color: var( --psp-hb-bad ); font-weight: 700; }

.psp-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --psp-hb-gold );
}

.psp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var( --psp-hb-glass );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice );
	white-space: nowrap;
}
.psp-chip--live {
	background: rgba( 255, 107, 107, 0.16 );
	border-color: rgba( 255, 107, 107, 0.5 );
	color: #ffb0b0;
}
.psp-chip--bat {
	padding: 2px 8px;
	font-size: 10px;
	background: rgba( 79, 209, 139, 0.15 );
	border-color: rgba( 79, 209, 139, 0.4 );
	color: var( --psp-hb-good );
	vertical-align: 2px;
}
.psp-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --psp-hb-live );
	box-shadow: 0 0 0 0 rgba( 255, 107, 107, 0.6 );
	animation: psp-hb-pulse 1.8s infinite;
}
@keyframes psp-hb-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 255, 107, 107, 0.55 ); }
	70% { box-shadow: 0 0 0 9px rgba( 255, 107, 107, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 255, 107, 107, 0 ); }
}

.psp-crest {
	--crest: #1e5087;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var( --crest );
	border: 2px solid rgba( 234, 244, 255, 0.28 );
	font-weight: 900;
	font-size: 11px;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 );
}
.psp-crest img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.psp-crest--lg { width: 56px; height: 56px; font-size: 16px; }

.psp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	font-family: var( --psp-hb-display );
	font-weight: 800;
	font-size: 14.5px;
	line-height: 1.1;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.18s var( --psp-hb-ease ), box-shadow 0.18s var( --psp-hb-ease ), background-color 0.18s;
}
.psp-btn:hover { transform: translateY( -1px ); }
.psp-btn:active { transform: translateY( 1px ); }
.psp-btn--gold,
.psp-btn--gold:hover,
.psp-btn--gold:focus { background: var( --psp-hb-gold ); color: var( --psp-hb-gold-ink ) !important; box-shadow: 0 8px 22px rgba( 255, 176, 32, 0.22 ); }
.psp-btn--ghost,
.psp-btn--ghost:hover,
.psp-btn--ghost:focus { background: var( --psp-hb-glass ); color: var( --psp-hb-ice ) !important; border-color: rgba( 234, 244, 255, 0.2 ); }
.psp-btn--ghost:hover { border-color: var( --psp-hb-gold ); }
.psp-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.psp-btn[data-proace-alerts].is-on { border-color: var( --psp-hb-good ); }
.psp-btn:focus-visible,
.psp-room a:focus-visible,
.psp-keep a:focus-visible,
.psp-hub a:focus-visible,
.psp-pulse__btn:focus-visible,
.psp-room__tab:focus-visible {
	outline: 3px solid var( --psp-hb-gold );
	outline-offset: 2px;
}

.psp-bar {
	display: flex;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba( 234, 244, 255, 0.08 );
	margin: 6px 0;
}
.psp-bar--thin { height: 7px; }
.psp-bar__seg { height: 100%; transition: width 0.6s var( --psp-hb-ease ); }
.psp-bar__seg--0 { background: var( --psp-hb-blue ); }
.psp-bar__seg--1 { background: var( --psp-hb-blue-2 ); }
.psp-bar__seg--2,
.psp-bar__seg--t { background: #9fb4cf; }
.psp-bar__seg--g { background: var( --psp-hb-gold ); }
.psp-bar__seg.is-right { box-shadow: inset 0 0 0 2px var( --psp-hb-good ); }

/* ---------- match-day room ---------- */

.psp-room {
	margin: 0 0 22px;
	scroll-margin-top: 90px;
}
.psp-room[hidden] { display: none !important; }
.psp-room__in {
	background: linear-gradient( 180deg, var( --psp-hb-navy-2 ), var( --psp-hb-navy ) );
	border: 1px solid var( --psp-hb-line );
	border-radius: 18px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-shadow: 0 24px 60px rgba( 5, 14, 28, 0.35 );
	animation: psp-hb-rise 0.5s var( --psp-hb-ease ) both;
}
.psp-room__in.is-live { box-shadow: 0 24px 60px rgba( 5, 14, 28, 0.35 ), 0 0 0 1px rgba( 255, 107, 107, 0.22 ); }
@keyframes psp-hb-rise {
	from { opacity: 0; transform: translateY( 10px ); }
	to { opacity: 1; transform: none; }
}
.psp-room__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.psp-room__title {
	margin: 0 !important;
	font-family: var( --psp-hb-display ) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var( --psp-hb-ice ) !important;
	line-height: 1.2 !important;
}
.psp-room__ctx { font-size: 14px; }
.psp-room__tabs {
	display: flex;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap;
}
.psp-room__tab {
	min-height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	font-family: var( --psp-hb-display );
	font-weight: 700;
	font-size: 13.5px;
	color: var( --psp-hb-muted );
	background: transparent;
	border: 1px solid var( --psp-hb-line );
	cursor: pointer;
}
.psp-room__tab.is-on {
	color: var( --psp-hb-ice );
	background: rgba( 58, 134, 224, 0.2 );
	border-color: var( --psp-hb-blue );
}
.psp-room__board {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	gap: 14px 20px;
	padding: 16px 20px;
	border-radius: 14px;
	background: rgba( 5, 14, 28, 0.55 );
}
.psp-room__side {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.psp-room__side--b {
	justify-content: flex-end;
	text-align: right;
}
.psp-room__team { font-size: 15px; font-weight: 700; }
.psp-room__score {
	font-family: var( --psp-hb-mono );
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
}
.psp-room__score small { font-size: 15px; color: var( --psp-hb-muted ); font-weight: 500; }
.psp-room__vs { font-family: var( --psp-hb-mono ); font-size: 13px; color: var( --psp-hb-muted ); }
.psp-room__status {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
}
.psp-room__status strong { color: var( --psp-hb-gold ); font-size: 15px; }
.psp-room__status a { color: var( --psp-hb-gold ); font-weight: 700; font-size: 14px; }
.psp-room__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}
.psp-room__grid > :only-child { grid-column: 1 / -1; }
.psp-room__panel {
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba( 234, 244, 255, 0.1 );
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.psp-room__panel--pulse {
	border-color: rgba( 255, 176, 32, 0.38 );
	background: rgba( 255, 176, 32, 0.05 );
}
.psp-room__ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.psp-room__pt { font-size: 16.5px; font-weight: 800; }
.psp-room__line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-top: 4px; }
.psp-room__mine {
	margin-top: 6px;
	padding: 9px 12px;
	border-radius: 10px;
	background: rgba( 79, 209, 139, 0.09 );
	font-size: 13.5px;
}
.psp-pulse__q { font-size: 19px; font-weight: 800; }
.psp-pulse__btns {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
}
.psp-pulse__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-family: var( --psp-hb-display );
	font-size: 15px;
	font-weight: 800;
	color: var( --psp-hb-ice );
	background: var( --psp-hb-glass );
	border: 1px solid rgba( 234, 244, 255, 0.2 );
	cursor: pointer;
	transition: transform 0.15s var( --psp-hb-ease ), border-color 0.15s;
}
.psp-pulse__btn:hover { border-color: var( --psp-hb-gold ); transform: translateY( -1px ); }
.psp-pulse__btn.is-on { border-color: var( --psp-hb-gold ); background: rgba( 255, 176, 32, 0.12 ); }
.psp-pulse__btn:disabled { opacity: 0.6; cursor: progress; }
.psp-room__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}
.psp-room__series { color: var( --psp-hb-gold ) !important; font-weight: 700; font-size: 14px; }
.psp-room__spacer { flex: 1 1 auto; }
.psp-room__next { font-size: 14px; color: var( --psp-hb-muted ); }
.psp-room__next strong { color: var( --psp-hb-ice ); }

/* ---------- Keep going (end of article) ---------- */

.psp-keep {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 34px 0 10px;
}
.psp-keep__streak {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba( 255, 176, 32, 0.09 );
	border: 1px solid rgba( 255, 176, 32, 0.32 );
	color: var( --psp-hb-gold );
}
.psp-keep__streak p {
	flex: 1 1 auto;
	margin: 0 !important;
	color: var( --psp-hb-ice );
	font-size: 15px;
}
.psp-keep__streak p span { color: var( --psp-hb-muted ); }
.psp-keep__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}
.psp-keep__title {
	margin: 2px 0 0 !important;
	font-family: var( --psp-hb-display ) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var( --psp-hb-ice ) !important;
	line-height: 1.15 !important;
}
.psp-keep__all { color: var( --psp-hb-gold ) !important; font-weight: 700; white-space: nowrap; }
.psp-keep__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
}
.psp-nextcard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: var( --psp-hb-radius );
	background: linear-gradient( 180deg, var( --psp-hb-navy-2 ), var( --psp-hb-navy ) );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	min-width: 0;
	transition: transform 0.2s var( --psp-hb-ease ), border-color 0.2s, box-shadow 0.2s;
}
.psp-nextcard:hover {
	transform: translateY( -3px );
	border-color: rgba( 255, 176, 32, 0.5 );
	box-shadow: 0 16px 36px rgba( 5, 14, 28, 0.4 );
}
.psp-nextcard--picked { border-style: dashed; }
.psp-nextcard__ctx { font-size: 12px; font-weight: 700; color: var( --psp-hb-muted ); }
.psp-nextcard__teams { display: flex; align-items: center; gap: 8px; min-width: 0; }
.psp-nextcard__teams strong { font-size: 16.5px; font-weight: 800; line-height: 1.2; margin-left: 4px; }
.psp-nextcard__meta { font-size: 13px; }
.psp-nextcard__meta--picked { color: var( --psp-hb-good ); }
.psp-nextcard .psp-btn { align-self: flex-start; margin-top: auto; }
.psp-countdown { font-family: var( --psp-hb-mono ); font-weight: 700; color: var( --psp-hb-gold ); font-size: 13px; }
.psp-countdown.is-soon { color: #ffd27a; }

.psp-keep__series {
	display: grid;
	grid-template-columns: 360px minmax( 0, 1fr );
	gap: 20px;
}
.psp-keep__series--solo { grid-template-columns: minmax( 0, 520px ); }
.psp-seriescard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: var( --psp-hb-radius );
	border: 1px solid var( --psp-hb-line );
	background: radial-gradient( circle at 15% 0%, rgba( 58, 134, 224, 0.38 ), transparent 60% ), linear-gradient( 180deg, var( --psp-hb-navy-2 ), var( --psp-hb-navy ) );
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	transition: transform 0.2s var( --psp-hb-ease ), border-color 0.2s;
}
.psp-seriescard:hover { transform: translateY( -3px ); border-color: rgba( 255, 176, 32, 0.5 ); }
.psp-seriescard__name { font-size: 24px; font-weight: 900; line-height: 1.1; }
.psp-seriescard__stats { display: flex; gap: 20px; margin-top: 4px; }
.psp-seriescard__stats span { display: flex; flex-direction: column; font-size: 12px; color: var( --psp-hb-muted ); }
.psp-seriescard__stats b { font-family: var( --psp-hb-mono ); font-size: 22px; color: var( --psp-hb-ice ); }
.psp-seriescard .psp-btn { align-self: flex-start; margin-top: 4px; }
.psp-keep__more { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.psp-postitem {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 10px;
	border-radius: 12px;
	background: rgba( 10, 30, 56, 0.85 );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	transition: border-color 0.2s, transform 0.2s var( --psp-hb-ease );
}
.psp-postitem:hover { border-color: rgba( 255, 176, 32, 0.45 ); transform: translateX( 3px ); }
.psp-postitem__thumb {
	width: 120px;
	height: 68px;
	flex-shrink: 0;
	border-radius: 10px;
	background: linear-gradient( 135deg, #1e5087, var( --psp-hb-navy ) ) center / cover no-repeat;
}
.psp-postitem__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.psp-postitem__text strong { font-size: 15.5px; line-height: 1.3; }
.psp-postitem__meta { font-size: 12.5px; color: var( --psp-hb-muted ); }

/* ---------- hub pages ---------- */

.psp-hub { padding-bottom: 50px; }
.psp-hubhero {
	margin: 0 -15px 30px;
	padding: 38px 0 30px;
	background:
		radial-gradient( circle at 85% 10%, rgba( 255, 176, 32, 0.16 ), transparent 45% ),
		radial-gradient( circle at 10% 0%, rgba( 58, 134, 224, 0.34 ), transparent 55% ),
		var( --psp-hb-navy );
	border-bottom: 1px solid var( --psp-hb-line );
}
.psp-hubhero__in,
.psp-hubbody {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}
.psp-hubhero__in { display: flex; flex-direction: column; gap: 18px; }
.psp-hubhero__crumb { font-size: 13px; color: var( --psp-hb-muted ); }
.psp-hubhero__crumb a { color: var( --psp-hb-muted ) !important; text-decoration: underline; text-underline-offset: 3px; }
.psp-hubhero__main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.psp-hubhero__titles { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 0; }
.psp-hubhero__title {
	margin: 0 !important;
	font-family: var( --psp-hb-display ) !important;
	font-size: clamp( 30px, 4.4vw, 46px ) !important;
	font-weight: 900 !important;
	line-height: 1.02 !important;
	color: var( --psp-hb-ice ) !important;
}
.psp-hubhero__sub { margin: 0 !important; color: var( --psp-hb-muted ); font-size: 15.5px; }
.psp-hubhero__live { order: 3; }
.psp-hubbadge {
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	border-radius: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --psp-hb-gold ), #e07b00 );
	color: var( --psp-hb-gold-ink );
	font-weight: 900;
	font-size: 28px;
	box-shadow: 0 14px 34px rgba( 255, 176, 32, 0.25 );
}
.psp-hubbadge--team { background: none; box-shadow: none; border-radius: 50%; }
.psp-hubbadge--team .psp-crest { font-size: 24px; border-width: 3px; }
.psp-hubhero__stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 12px;
	margin: 0;
}
.psp-stat {
	display: flex;
	flex-direction: column-reverse;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba( 5, 14, 28, 0.5 );
	border: 1px solid rgba( 234, 244, 255, 0.1 );
	animation: psp-hb-rise 0.5s var( --psp-hb-ease ) both;
}
.psp-stat:nth-child( 2 ) { animation-delay: 0.06s; }
.psp-stat:nth-child( 3 ) { animation-delay: 0.12s; }
.psp-stat:nth-child( 4 ) { animation-delay: 0.18s; }
.psp-stat dd { margin: 0; font-family: var( --psp-hb-mono ); font-size: 26px; font-weight: 700; color: var( --psp-hb-ice ); overflow-wrap: anywhere; }
.psp-stat dt { font-size: 13px; font-weight: 500; color: var( --psp-hb-muted ); }

.psp-hubbody--split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: 28px;
	align-items: start;
}
.psp-hubmain { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.psp-hubsec {
	margin: 14px 0 6px !important;
	font-family: var( --psp-hb-display ) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	color: var( --psp-hb-ice ) !important;
}
.psp-hubsec:first-child { margin-top: 0 !important; }
.psp-day {
	margin: 10px 0 2px !important;
	font-family: var( --psp-hb-display ) !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --psp-hb-muted ) !important;
}
.psp-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 150px, auto ) auto;
	align-items: center;
	gap: 12px 16px;
	padding: 13px 16px;
	border-radius: 12px;
	background: rgba( 10, 30, 56, 0.85 );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice );
	transition: border-color 0.2s;
}
.psp-row:hover { border-color: rgba( 234, 244, 255, 0.24 ); }
.psp-row--live { border-color: rgba( 255, 107, 107, 0.45 ); }
.psp-row:has( .psp-wl ) { grid-template-columns: auto minmax( 0, 1fr ) minmax( 150px, auto ) auto; }
.psp-row__match { display: flex; align-items: center; gap: 12px; min-width: 0; }
.psp-row__match strong { display: block; font-size: 15.5px; }
.psp-row__crests { display: flex; }
.psp-row__crests .psp-crest + .psp-crest { margin-left: -8px; }
.psp-row__sub { display: block; font-size: 12.5px; color: var( --psp-hb-muted ); }
.psp-row__state { font-size: 14px; }
.psp-row__act { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.psp-wl {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 13px;
}
.psp-wl--w { background: rgba( 79, 209, 139, 0.18 ); color: var( --psp-hb-good ); }
.psp-wl--l { background: rgba( 255, 107, 107, 0.16 ); color: var( --psp-hb-bad ); }
.psp-wl--n { background: var( --psp-hb-glass ); color: var( --psp-hb-muted ); }

.psp-hubside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.psp-sidecard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: var( --psp-hb-radius );
	background: linear-gradient( 180deg, var( --psp-hb-navy-2 ), var( --psp-hb-navy ) );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice );
}
.psp-sidecard--gold { border-color: rgba( 255, 176, 32, 0.42 ); }
.psp-sidecard__big { font-size: 18px; font-weight: 800; }
.psp-sidecard__link { color: var( --psp-hb-gold ) !important; font-weight: 700; font-size: 14px; }
.psp-sidecard p { margin: 0 !important; }
.psp-sidecard .psp-btn { align-self: flex-start; }
.psp-leaders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.psp-leaders li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.psp-leaders li.is-me { background: rgba( 58, 134, 224, 0.2 ); }
.psp-leaders__rank { width: 22px; font-family: var( --psp-hb-mono ); font-weight: 700; color: var( --psp-hb-muted ); }
.psp-leaders li:first-child .psp-leaders__rank { color: var( --psp-hb-gold ); }
.psp-leaders__name { flex: 1 1 auto; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psp-leaders__pts { font-family: var( --psp-hb-mono ); font-weight: 700; }
.psp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.psp-teamchip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 4px 12px 4px 5px;
	border-radius: 999px;
	background: var( --psp-hb-glass );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice ) !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none !important;
}
.psp-teamchip:hover { border-color: var( --psp-hb-gold ); }
.psp-best { font-size: 14px; }

.psp-postgrid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
}
.psp-postcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	min-width: 0;
}
.psp-postcard strong { font-size: 15px; line-height: 1.3; }
.psp-postcard__img {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: linear-gradient( 135deg, #1e5087, var( --psp-hb-navy ) ) center / cover no-repeat;
	transition: transform 0.3s var( --psp-hb-ease );
}
.psp-postcard:hover .psp-postcard__img { transform: scale( 1.02 ); }

.psp-tilegrid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
}
.psp-tilegrid--teams { grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); }
.psp-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: var( --psp-hb-radius );
	background: linear-gradient( 180deg, var( --psp-hb-navy-2 ), var( --psp-hb-navy ) );
	border: 1px solid var( --psp-hb-line );
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	transition: transform 0.2s var( --psp-hb-ease ), border-color 0.2s;
}
.psp-tile:hover { transform: translateY( -3px ); border-color: rgba( 255, 176, 32, 0.5 ); }
.psp-tile strong { font-size: 18px; font-weight: 800; }
.psp-tile__badge {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --psp-hb-gold ), #e07b00 );
	color: var( --psp-hb-gold-ink );
	font-weight: 900;
}
.psp-tile--team { flex-direction: row; align-items: center; gap: 14px; }
.psp-empty { color: var( --psp-hb-muted ); font-size: 16px; }

/* ---------- floating mini score over the discussion ---------- */

.psp-mini {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 99980;
	display: flex;
	align-items: center;
	max-width: min( 520px, calc( 100vw - 24px ) );
	padding: 4px 4px 4px 0;
	border-radius: 999px;
	background: rgba( 8, 22, 42, 0.94 );
	border: 1px solid rgba( 255, 107, 107, 0.45 );
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.4 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	font-family: var( --psp-hb-display );
	color: var( --psp-hb-ice );
	opacity: 0;
	pointer-events: none;
	transform: translate( -50%, 16px );
	transition: opacity 0.25s var( --psp-hb-ease ), transform 0.25s var( --psp-hb-ease );
}
.psp-mini.is-on { opacity: 1; pointer-events: auto; transform: translate( -50%, 0 ); }
.psp-mini__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 40px;
	padding: 0 6px 0 14px;
	color: var( --psp-hb-ice ) !important;
	text-decoration: none !important;
	font-size: 13.5px;
	white-space: nowrap;
}
.psp-mini__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffb0b0;
}
.psp-mini__teams { flex-shrink: 0; }
.psp-mini__score { font-family: var( --psp-hb-mono ); font-weight: 700; }
.psp-mini__ov,
.psp-mini__v { color: var( --psp-hb-muted ); font-size: 12px; }
.psp-mini__status {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var( --psp-hb-gold );
	font-size: 12.5px;
	font-weight: 600;
}
.psp-mini__more {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba( 234, 244, 255, 0.1 );
	font-size: 11px;
	font-weight: 800;
}
.psp-mini__x {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: rgba( 234, 244, 255, 0.08 );
	color: var( --psp-hb-muted );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.psp-mini__x:hover { color: var( --psp-hb-ice ); }
.psp-mini__link:focus-visible,
.psp-mini__x:focus-visible { outline: 3px solid var( --psp-hb-gold ); outline-offset: 2px; border-radius: 999px; }

/* Phones/tablets: above the bottom dock, clear of the back-to-top button. */
@media ( max-width: 991px ) {
	.psp-mini {
		left: 10px;
		right: 70px;
		max-width: none;
		transform: translateY( 16px );
		bottom: calc( var( --dock-h, 0px ) + 12px + env( safe-area-inset-bottom, 0px ) );
	}
	.psp-mini.is-on { transform: none; }
	/* The docked "Ads section → comments" pill moves up above the score. */
	body.has-psp-dock.psp-mini-on .cricket-ads-hint--dock {
		bottom: calc( var( --dock-h ) + 64px + env( safe-area-inset-bottom, 0px ) ) !important;
	}
	.psp-mini__link { flex: 1 1 auto; gap: 8px; padding-left: 12px; font-size: 13px; }
	.psp-mini__status { font-size: 12px; }
}
@media ( max-width: 420px ) {
	.psp-mini__live { font-size: 0; gap: 0; }
	.psp-mini__ov { display: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.psp-mini { transition: none; }
}

/* ---------- browse pills (Predictions + Live Scores pages) ---------- */

.psp-browse { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.psp-browse__pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var( --psp-hb-display );
	font-weight: 700;
	font-size: 14px;
	color: var( --psp-hb-ice ) !important;
	background: rgba( 234, 244, 255, 0.06 );
	border: 1px solid rgba( 234, 244, 255, 0.2 );
	text-decoration: none !important;
	transition: border-color 0.2s, transform 0.2s var( --psp-hb-ease );
}
.psp-browse__pill:hover { border-color: var( --psp-hb-gold ); transform: translateY( -1px ); }
.psp-browse__pill:focus-visible { outline: 3px solid var( --psp-hb-gold ); outline-offset: 2px; }

/* ---------- responsive ---------- */

@media ( max-width: 991px ) {
	.psp-keep__cards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.psp-keep__series { grid-template-columns: minmax( 0, 1fr ); }
	.psp-hubbody--split { grid-template-columns: minmax( 0, 1fr ); }
	.psp-hubside { position: static; }
	.psp-postgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 767px ) {
	.psp-room__in { padding: 14px; gap: 14px; }
	.psp-room__tabs { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.psp-room__tab { flex-shrink: 0; }
	.psp-room__board { grid-template-columns: minmax( 0, 1fr ); padding: 12px; gap: 10px; }
	.psp-room__vs { display: none; }
	.psp-room__side { justify-content: flex-start; }
	.psp-room__side--b { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
	.psp-crest--lg { width: 40px; height: 40px; font-size: 12px; }
	.psp-room__score { font-size: 24px; }
	.psp-room__grid { grid-template-columns: minmax( 0, 1fr ); }
	.psp-room__panel--pulse { order: -1; }
	.psp-room__foot .psp-btn--gold,
	.psp-room__foot [data-proace-alerts] { flex: 1 1 100%; }
	.psp-room__spacer { display: none; }

	.psp-keep { gap: 22px; }
	.psp-keep__streak { flex-wrap: wrap; }
	.psp-keep__streak .psp-btn { width: 100%; }
	.psp-keep__title { font-size: 21px !important; }
	.psp-keep__cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}
	.psp-nextcard { flex: 0 0 82%; scroll-snap-align: start; }
	.psp-keep__head { flex-wrap: wrap; }
	.psp-postitem__thumb { width: 96px; height: 60px; }

	.psp-hubhero { padding: 26px 0 22px; }
	.psp-hubbadge { width: 60px; height: 60px; font-size: 20px; border-radius: 16px; }
	.psp-hubhero__stats { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.psp-stat dd { font-size: 21px; }
	.psp-row,
	.psp-row:has( .psp-wl ) { grid-template-columns: minmax( 0, 1fr ); gap: 8px; }
	.psp-row:has( .psp-wl ) { grid-template-columns: auto minmax( 0, 1fr ); }
	.psp-row:has( .psp-wl ) .psp-row__state,
	.psp-row:has( .psp-wl ) .psp-row__act { grid-column: 2; }
	.psp-row__act { justify-content: flex-start; }
	.psp-postgrid { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.psp-room__in,
	.psp-stat { animation: none; }
	.psp-dot { animation: none; }
	.psp-btn,
	.psp-nextcard,
	.psp-seriescard,
	.psp-postitem,
	.psp-tile,
	.psp-postcard__img,
	.psp-bar__seg { transition: none; }
	.psp-btn:hover,
	.psp-nextcard:hover,
	.psp-seriescard:hover,
	.psp-postitem:hover,
	.psp-tile:hover,
	.psp-postcard:hover .psp-postcard__img { transform: none; }
}

/* ---------- light mode: only the text that sits on the page itself ---------- */

html[data-theme="light"] .psp-hub,
html[data-theme="light"] .psp-hubsec,
html[data-theme="light"] .psp-keep__title,
html[data-theme="light"] .psp-postcard { color: #0f2346 !important; }
html[data-theme="light"] .psp-day,
html[data-theme="light"] .psp-hub .psp-hubbody > .psp-empty,
html[data-theme="light"] .psp-postcard .psp-postitem__meta { color: #4d5f80 !important; }
html[data-theme="light"] .psp-keep__streak p { color: #0f2346; }
html[data-theme="light"] .psp-keep__streak p span { color: #4d5f80; }
html[data-theme="light"] .psp-keep__all,
html[data-theme="light"] .psp-keep > .psp-keep__block .psp-eyebrow,
html[data-theme="light"] .psp-keep__more > .psp-eyebrow { color: #a86300 !important; }