/**
 * Single-post redesign layer (2026-09-16) — single posts only, loaded after
 * cricket-content.css and cricket-predictions.css.
 *
 * The big one is the legacy-formatting normaliser. Nearly every one of the
 * 1,143 published posts carries inline styling from the old light-theme
 * editor (color:#0000ff / #ff0000 spans, 'arial black' font-family, inline
 * font-size, centred H1s inside the body). Rather than editing any post, the
 * rules below neutralise those inline declarations inside .entry-content so
 * every article renders in one consistent type system. Embedded prediction
 * cards and the injected section strip are excluded so they keep their own
 * styling.
 */

:root {
	--psp-a-ink: #16233c;
	--psp-a-text: #2a3651;
	--psp-a-muted: #6b7a99;
	--psp-a-blue: #1e5087;
	--psp-a-gold: #ffb020;
	--psp-a-line: #e6ebf3;
	--psp-a-soft: #f3f6fb;
	--psp-a-mono: 'JetBrains Mono', Consolas, monospace;
	--psp-a-display: 'Outfit', 'PT Sans', sans-serif;
}

/* ---------------------------------------------------------------------
 * Article card + base type
 * ------------------------------------------------------------------- */

body.single .cricket-content-page .cricket-article-main > .hentry {
	padding: 40px 44px 34px;
	border-radius: 16px;
}

body.single .cricket-content-page .entry-content {
	max-width: 70ch;
	font-size: 17px;
	line-height: 1.72;
	color: var( --psp-a-text );
}

body.single .cricket-content-page .entry-content > * {
	max-width: 70ch;
}

/* ---------------------------------------------------------------------
 * Legacy inline formatting normaliser
 * ------------------------------------------------------------------- */

/* Specificity note: every exclusion below is wrapped in :where() so these
   resets stay LOW specificity (they only need !important to beat inline
   style attributes). The purposeful rules further down — table header row,
   label column, h3 colour — then win normally without an arms race. */

/* Fonts: every legacy face/size declaration inherits from the article. */
body.single .cricket-content-page .entry-content :where( p, li, td, th, div, span, font, b, strong, em, i, u, a, small, big ):not( :where( .proace-prediction, .cricket-toc ) * ):not( :where( .proace-prediction, .cricket-toc ) ) {
	font-family: inherit !important;
}

body.single .cricket-content-page .entry-content :where( span, font, b, strong, em, i, u, small, big ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	font-size: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
}

/* Running text: one readable ink colour. */
body.single .cricket-content-page .entry-content :where( p, li, td, div ):not( :where( .proace-prediction, .cricket-toc ) * ):not( :where( .proace-prediction, .cricket-toc ) ) {
	color: var( --psp-a-text ) !important;
	font-size: inherit !important;
}

body.single .cricket-content-page .entry-content :where( p, li ) :where( b, strong ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	color: var( --psp-a-ink ) !important;
}

/* Headings — including the H1s legacy posts put inside the body. */
body.single .cricket-content-page .entry-content :is( h1, h2, h3, h4, h5, h6 ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	font-family: var( --psp-a-display ) !important;
	color: var( --psp-a-ink ) !important;
	text-align: left !important;
	text-wrap: balance;
	scroll-margin-top: 110px;
}

body.single .cricket-content-page .entry-content :is( h1, h2 ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	position: relative;
	margin: 36px 0 14px;
	padding-left: 16px;
	font-size: clamp( 22px, 2.6vw, 27px ) !important;
	font-weight: 800;
	line-height: 1.2;
}

body.single .cricket-content-page .entry-content :is( h1, h2 ):not( :where( .proace-prediction, .cricket-toc ) * )::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient( 180deg, var( --psp-a-gold ), #ff6b6b );
}

body.single .cricket-content-page .entry-content :is( h3 ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	margin: 28px 0 10px;
	font-size: clamp( 18px, 2vw, 20px ) !important;
	font-weight: 700;
	color: var( --psp-a-blue ) !important;
	line-height: 1.3;
}

body.single .cricket-content-page .entry-content :is( h4, h5, h6 ):not( :where( .proace-prediction, .cricket-toc ) * ) {
	margin: 22px 0 8px;
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.35;
}

body.single .cricket-content-page .entry-content :is( h1, h2, h3, h4, h5, h6 ):not( :where( .proace-prediction, .cricket-toc ) * ) * {
	color: inherit !important;
	font-size: inherit !important;
}

/* The first element of the body is often a restated, centred H1 title —
   keep the rhythm tight so it doesn't open with a big gap. */
body.single .cricket-content-page .entry-content > :first-child {
	margin-top: 0 !important;
}

/* Empty legacy headings/paragraphs (e.g. <h2 style="text-align:center"></h2>)
   collapse instead of leaving holes. */
body.single .cricket-content-page .entry-content > :is( h1, h2, h3, h4, p ):empty {
	display: none;
}

/* Links keep one recognisable colour regardless of inline spans. */
body.single .cricket-content-page .entry-content a:not( :where( .proace-prediction, .cricket-toc ) * ):not( .cricket-toc a ) {
	color: var( --psp-a-blue ) !important;
}

body.single .cricket-content-page .entry-content a:not( :where( .proace-prediction, .cricket-toc ) * ) * {
	color: inherit !important;
}

body.single .cricket-content-page .entry-content a:not( :where( .proace-prediction, .cricket-toc ) * ):hover {
	color: #ff6b6b !important;
}

/* ---------------------------------------------------------------------
 * Tables → fixture cards
 * ------------------------------------------------------------------- */

body.single .cricket-content-page .cricket-table-wrap {
	max-width: 70ch;
	margin: 10px 0 26px;
	overflow-x: auto;
	border-radius: 14px;
	border: 1px solid #dfe6f2;
	box-shadow: 0 12px 28px -20px rgba( 9, 25, 52, 0.45 );
	-webkit-overflow-scrolling: touch;
}

body.single .cricket-content-page .entry-content table {
	width: 100% !important;
	height: auto !important;
	margin: 0;
	border: 0;
	border-collapse: separate !important;
	border-spacing: 0;
	font-size: 15px;
	background: #ffffff;
}

/* Tables not wrapped by JS (JS disabled) still get the card frame. */
body.single .cricket-content-page .entry-content > table {
	margin: 10px 0 26px;
	border: 1px solid #dfe6f2;
	border-radius: 14px;
	overflow: hidden;
}

body.single .cricket-content-page .entry-content table :is( td, th ) {
	padding: 11px 16px;
	border: 0;
	border-top: 1px solid #edf1f7;
	vertical-align: middle;
	text-align: left;
	background: transparent;
}

body.single .cricket-content-page .entry-content table tbody tr:nth-child( even ) :is( td, th ) {
	background: #f7f9fc;
}

/* Header row: a real <thead>, or the first row when there isn't one. */
body.single .cricket-content-page .entry-content table thead tr :is( td, th ),
body.single .cricket-content-page .entry-content table:not( :has( thead ) ) tr:first-child :is( td, th ) {
	border-top: 0;
	background: linear-gradient( 90deg, #0d2038, #1e5087 ) !important;
	color: #eaf4ff !important;
	font-family: var( --psp-a-mono ) !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.single .cricket-content-page .entry-content table thead tr :is( td, th ) *,
body.single .cricket-content-page .entry-content table:not( :has( thead ) ) tr:first-child :is( td, th ) * {
	color: inherit !important;
}

/* Two-column "label | value" rows: mono label, bold value. */
body.single .cricket-content-page .entry-content table tbody tr > td:first-child:nth-last-child( 2 ) {
	width: 38%;
	font-family: var( --psp-a-mono ) !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --psp-a-muted ) !important;
}

body.single .cricket-content-page .entry-content table tbody tr > td:first-child:nth-last-child( 2 ) * {
	color: inherit !important;
	font-weight: 700;
}

body.single .cricket-content-page .entry-content table tbody tr > td:last-child:nth-child( 2 ) {
	font-weight: 700;
	color: var( --psp-a-ink ) !important;
}

/* ---------------------------------------------------------------------
 * "In this preview" section strip (built by cricket-article.js from the
 * article's own H2/H3s — only when there are at least three).
 * ------------------------------------------------------------------- */

body.single .cricket-content-page .entry-content .cricket-toc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 28px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var( --psp-a-soft );
	border: 1px solid #e1e8f3;
}

.cricket-toc__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 4px;
	font-family: var( --psp-a-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-a-ink );
}

.cricket-toc__label svg {
	color: var( --psp-a-blue );
}

body.single .cricket-content-page .entry-content .cricket-toc a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #dde5f1;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --psp-a-blue );
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.single .cricket-content-page .entry-content .cricket-toc a:hover,
body.single .cricket-content-page .entry-content .cricket-toc a:focus-visible,
body.single .cricket-content-page .entry-content .cricket-toc a.is-active {
	background: var( --psp-a-blue );
	border-color: var( --psp-a-blue );
	color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Reading progress
 * ------------------------------------------------------------------- */

.cricket-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100000;
	width: 100%;
	height: 3px;
	transform-origin: 0 50%;
	transform: scaleX( 0 );
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	pointer-events: none;
}

body.admin-bar .cricket-progress {
	top: 32px;
}

/* ---------------------------------------------------------------------
 * Embedded prediction card inside the white article body
 * ------------------------------------------------------------------- */

body.single .cricket-content-page .entry-content .proace-prediction {
	max-width: 70ch;
	margin: 30px 0;
	scroll-margin-top: 110px;
}

body.single .cricket-content-page .entry-content .proace-prediction:target .proace-prediction__surface {
	box-shadow: 0 0 0 3px rgba( 255, 176, 32, 0.6 ), 0 18px 38px -16px rgba( 0, 0, 0, 0.5 );
}

/* ---------------------------------------------------------------------
 * "Predict this match" card (sidebar) + compact bar (mobile)
 * ------------------------------------------------------------------- */

.cricket-predict-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	overflow: hidden;
	border-radius: 16px;
	background:
		radial-gradient( circle at 100% 0%, rgba( 255, 176, 32, 0.25 ), transparent 45% ),
		linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.3 );
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cricket-predict-card:hover,
.cricket-predict-card:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 20px 40px rgba( 0, 0, 0, 0.38 );
}

.cricket-predict-card__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cricket-predict-card__eyebrow {
	font-family: var( --psp-a-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --psp-a-gold );
}

.cricket-predict-card__question {
	font-family: var( --psp-a-display );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #eaf4ff;
}

.cricket-predict-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-family: var( --psp-a-mono );
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba( 234, 244, 255, 0.7 );
}

.cricket-predict-card__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba( 255, 140, 60, 0.35 );
}

/* The compact bar only exists for phones/tablets; the sidebar card covers desktop. */
.cricket-predict-card--bar {
	display: none;
}

/* ---------------------------------------------------------------------
 * Previous / next article cards (psp_single_post_nav()) — own class names,
 * so the legacy Customizer `.nav-links span/a` rules can't reach them.
 * Previous reads left-to-right (arrow · thumb · text); Next mirrors it.
 * ------------------------------------------------------------------- */

.cricket-postnav {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 40px 0 8px;
}

.cricket-postnav__item,
.cricket-postnav__item:visited {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	min-height: 104px;
	padding: 16px 18px;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.9 ), rgba( 10, 24, 48, 0.9 ) );
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	box-shadow: 0 16px 34px -20px rgba( 0, 0, 0, 0.65 );
	color: #eaf4ff;
	text-decoration: none;
	transition: border-color 0.22s ease, transform 0.22s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.22s ease;
}

/* Gold edge that grows in from the arrow side on hover. */
.cricket-postnav__item::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient( 180deg, #ffb020, #ff6b6b );
	opacity: 0;
	transform: scaleY( 0.4 );
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.cricket-postnav__item--prev::before {
	left: 0;
}

.cricket-postnav__item--next::before {
	right: 0;
}

.cricket-postnav__item--next {
	flex-direction: row-reverse;
	text-align: right;
}

/* Legacy link rules underline on hover — the card's own hover state (lift,
   gold edge, filled arrow) replaces that. */
.cricket-postnav a.cricket-postnav__item:is( :hover, :focus, :focus-visible, :active ),
.cricket-postnav a.cricket-postnav__item:is( :hover, :focus, :focus-visible, :active ) * {
	text-decoration: none !important;
}

a.cricket-postnav__item:hover,
a.cricket-postnav__item:focus-visible {
	color: #eaf4ff;
	border-color: rgba( 255, 176, 32, 0.38 );
	box-shadow: 0 22px 40px -20px rgba( 0, 0, 0, 0.75 );
	transform: translateY( -3px );
}

a.cricket-postnav__item:hover::before,
a.cricket-postnav__item:focus-visible::before {
	opacity: 1;
	transform: scaleY( 1 );
}

a.cricket-postnav__item:focus-visible {
	outline: 2px solid #ffb020;
	outline-offset: 3px;
}

.cricket-postnav__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	color: #eaf4ff;
	transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

a.cricket-postnav__item:hover .cricket-postnav__arrow,
a.cricket-postnav__item:focus-visible .cricket-postnav__arrow {
	background: linear-gradient( 135deg, #ffb020, #ff6b6b );
	border-color: transparent;
	color: #1a1200;
}

a.cricket-postnav__item--prev:hover .cricket-postnav__arrow {
	transform: translateX( -3px );
}

a.cricket-postnav__item--next:hover .cricket-postnav__arrow {
	transform: translateX( 3px );
}

.cricket-postnav__thumb {
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
}

.cricket-postnav__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

a.cricket-postnav__item:hover .cricket-postnav__thumb img {
	transform: scale( 1.08 );
}

.cricket-postnav__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	min-width: 0;
}

.cricket-postnav__dir {
	font-family: var( --psp-a-mono );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffb020;
}

.cricket-postnav__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var( --psp-a-display );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #eaf4ff;
}

.cricket-postnav__meta {
	font-size: 12.5px;
	color: rgba( 234, 244, 255, 0.55 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-postnav__item--empty {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	background: rgba( 255, 255, 255, 0.02 );
	border-style: dashed;
	box-shadow: none;
}

.cricket-postnav__item--next.cricket-postnav__item--empty {
	align-items: flex-end;
}

.cricket-postnav__item--empty .cricket-postnav__dir {
	color: rgba( 234, 244, 255, 0.45 );
}

.cricket-postnav__none {
	font-size: 14px;
	color: rgba( 234, 244, 255, 0.55 );
}

/* ---------------------------------------------------------------------
 * Related posts meta line
 * ------------------------------------------------------------------- */

.cricket-content-page .cricket-related__meta {
	display: block;
	padding: 0 16px 16px;
	margin-top: -4px;
	font-size: 12px;
	color: rgba( 234, 244, 255, 0.55 );
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media ( max-width: 860px ) {
	/* The stacked layout inherited align-items:flex-start from the desktop
	   row, which lets the article column size itself to its widest content
	   (legacy tables, long headings) instead of the screen — measured at
	   659px inside a 347px column on a 390px phone. Stretch it to the
	   column so tables scroll inside their own frame instead. */
	.cricket-article-layout {
		align-items: stretch;
	}

	.cricket-article-main {
		width: 100%;
		min-width: 0;
	}

	body.single .cricket-content-page .entry-content {
		overflow-wrap: break-word;
	}

	body.single .cricket-content-page .entry-content :is( iframe, embed, video, object ) {
		max-width: 100%;
	}

	/* On stacked layouts the sidebar sits below the whole article, so the
	   linked prediction moves up as a compact bar above the body instead. */
	.cricket-predict-card--bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 16px;
		padding: 12px 14px;
		border-radius: 14px;
	}

	.cricket-predict-card--bar .cricket-predict-card__question {
		font-size: 14px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.cricket-predict-card--bar .cricket-predict-card__cta {
		flex: none;
		align-self: center;
		min-height: 44px;
		padding: 0 16px;
	}

	.cricket-sidebar .cricket-predict-card--sidebar {
		display: none;
	}
}

@media ( max-width: 600px ) {
	body.single .cricket-content-page .cricket-article-main > .hentry {
		padding: 24px 18px 22px;
	}

	/* Section strip: one swipeable row instead of a tall stack of chips. */
	body.single .cricket-content-page .entry-content .cricket-toc {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 18px;
		margin-inline: -18px;
		padding: 12px 18px;
		border-radius: 0;
		border-inline: 0;
		scrollbar-width: none;
	}

	body.single .cricket-content-page .entry-content .cricket-toc::-webkit-scrollbar {
		display: none;
	}

	body.single .cricket-content-page .entry-content .cricket-toc a,
	.cricket-toc__label {
		flex: none;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	body.single .cricket-content-page .entry-content {
		font-size: 16px;
		line-height: 1.7;
	}

	body.single .cricket-content-page .entry-content table {
		font-size: 14px;
	}

	body.single .cricket-content-page .entry-content table :is( td, th ) {
		padding: 9px 12px;
	}

	.cricket-postnav {
		grid-template-columns: minmax( 0, 1fr );
		gap: 10px;
		margin-top: 28px;
	}

	.cricket-postnav__item,
	.cricket-postnav__item:visited {
		min-height: 88px;
		padding: 12px 14px;
		gap: 12px;
	}

	.cricket-postnav__thumb {
		width: 56px;
		height: 56px;
		border-radius: 10px;
	}

	.cricket-postnav__arrow {
		width: 36px;
		height: 36px;
	}

	.cricket-postnav__title {
		font-size: 15px;
	}

	/* The "no newer / no older article" placeholder adds nothing on phones. */
	.cricket-postnav__item--empty {
		display: none;
	}

	body.admin-bar .cricket-progress {
		top: 46px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-predict-card,
	.cricket-postnav__item,
	.cricket-postnav__item::before,
	.cricket-postnav__arrow,
	.cricket-postnav__thumb img {
		transition: none;
	}

	.cricket-predict-card:hover,
	a.cricket-postnav__item:hover,
	a.cricket-postnav__item:hover .cricket-postnav__arrow,
	a.cricket-postnav__item:hover .cricket-postnav__thumb img {
		transform: none;
	}

	.cricket-progress {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Linked predictions appended to the article by the plugin
 * (Proace_Shortcodes::append_linked_predictions) — a clearly separated
 * block at the end of the body, only on posts that have one.
 * ------------------------------------------------------------------- */

body.single .cricket-content-page .entry-content .proace-post-predictions {
	max-width: 70ch;
	margin: 40px 0 8px;
	padding-top: 28px;
	border-top: 1px solid var( --psp-a-line );
}

body.single .cricket-content-page .entry-content .proace-post-predictions > .proace-post-predictions__title {
	margin: 0 0 4px;
}

body.single .cricket-content-page .entry-content .proace-post-predictions .proace-prediction {
	margin: 18px 0 0;
}

/* Links inside a prediction card placed in the article body (shortcode or
   appended) — the article's own dark-blue underlined link style made
   "Log in to make your prediction" nearly unreadable on the navy card. */
body.single .cricket-content-page .entry-content .proace-prediction a,
body.single .cricket-content-page .entry-content .proace-prediction a:visited {
	color: #ffb020;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 176, 32, 0.45 );
	text-underline-offset: 3px;
}

body.single .cricket-content-page .entry-content .proace-prediction a:hover,
body.single .cricket-content-page .entry-content .proace-prediction a:focus-visible {
	color: #ffe066;
	text-decoration-color: currentColor;
}

/* Headings that contain only whitespace / &nbsp; / <br> in legacy content
   are flagged by cricket-article.js and hidden (CSS :empty can't see them). */
body.single .cricket-content-page .entry-content .cricket-empty-heading {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Sidebar "Open Predictions" — real votable cards, compacted for the
 * 300px column (psp_sidebar_open_predictions_voting()).
 * ------------------------------------------------------------------- */

.cricket-sidebar-open--voting .cricket-sidebar-card__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cricket-sidebar-open__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.14 );
	font-family: var( --psp-a-mono );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #b36b00;
}

.cricket-sidebar-open__live span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff8a00;
	box-shadow: 0 0 0 0 rgba( 255, 138, 0, 0.6 );
	animation: psp-live-ping 1.8s ease-out infinite;
}

@keyframes psp-live-ping {
	0% { box-shadow: 0 0 0 0 rgba( 255, 138, 0, 0.55 ); }
	80%, 100% { box-shadow: 0 0 0 7px rgba( 255, 138, 0, 0 ); }
}

.cricket-sidebar-open__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0 12px;
}

.cricket-sidebar-open--voting .proace-prediction {
	margin: 0;
}

.cricket-sidebar-open--voting .proace-prediction__surface {
	padding: 14px 14px 12px;
	border-radius: 14px;
	box-shadow: 0 10px 22px -14px rgba( 0, 0, 0, 0.55 );
}

.cricket-sidebar-open--voting .proace-prediction__top {
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.cricket-sidebar-open--voting .proace-prediction__tourney {
	font-size: 9.5px;
	min-width: 0;
}

.cricket-sidebar-open--voting .proace-prediction__status {
	gap: 6px;
}

.cricket-sidebar-open--voting .proace-prediction__timer {
	font-size: 9px;
}

.cricket-sidebar-open--voting .proace-prediction__badge {
	padding: 3px 8px;
	font-size: 8.5px;
}

.cricket-sidebar-open--voting .proace-prediction__question {
	margin-bottom: 10px;
	font-size: 14.5px;
	line-height: 1.3;
}

.cricket-sidebar-open--voting .proace-prediction__login {
	margin-bottom: 10px;
	font-size: 12.5px;
}

.cricket-sidebar-open--voting .proace-prediction__login a,
.cricket-sidebar-open--voting .proace-prediction__login a:visited {
	color: #ffb020;
	font-weight: 700;
}

/* Options: always a tidy stack/grid in the narrow column. */
.cricket-sidebar-open--voting .proace-prediction__options {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 6px;
}

.cricket-sidebar-open--voting .proace-prediction__options--void {
	grid-template-columns: minmax( 0, 1fr );
	margin-top: 6px;
}

.cricket-sidebar-open--voting .proace-prediction__option {
	min-height: 40px;
	padding: 8px 10px;
	font-size: 13px;
	justify-content: space-between;
}

.cricket-sidebar-open--voting .proace-prediction__vs-row {
	gap: 6px;
}

.cricket-sidebar-open--voting .proace-prediction__option--vs {
	padding: 10px 6px;
	gap: 4px;
}

.cricket-sidebar-open--voting .proace-prediction__crest {
	width: 36px;
	height: 36px;
	font-size: 11px;
}

.cricket-sidebar-open--voting .proace-prediction__vs-name {
	font-size: 12.5px;
}

.cricket-sidebar-open--voting .proace-prediction__vs-mid {
	width: 26px;
	height: 26px;
	font-size: 9px;
}

.cricket-sidebar-open--voting .proace-prediction__vs-mid svg {
	width: 12px;
	height: 12px;
}

.cricket-sidebar-open--voting .proace-prediction__participants {
	font-size: 10px;
	gap: 6px;
}

.cricket-sidebar-open--voting .proace-prediction__feedback {
	margin-top: 8px;
	font-size: 12px;
}

/* The feedback slot holds whitespace until a vote happens, so :empty never
   matches — hide it until prediction.js gives it a state class. */
.cricket-sidebar-open--voting .proace-prediction__feedback:not( [class*="proace-prediction__feedback--"] ) {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-sidebar-open__live span {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Decorative image frames (2026-09-16).
 * 1. Featured image: glowing gold/blue edge, inset hairline frame with gold
 *    corner brackets, a light sweep on load + hover, gentle zoom on hover.
 * 2. Larger photos inside the article (flagged by cricket-article.js as
 *    .cricket-img-frame, so small logos/icons/GIF buttons stay untouched):
 *    gradient border mat, soft shadow, lift on hover.
 * ------------------------------------------------------------------- */

@property --psp-frame-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

body.single .cricket-content-page .cricket-hero-article:not( .cricket-hero-article--no-image ) {
	isolation: isolate;
	box-shadow:
		0 0 0 1px rgba( 255, 176, 32, 0.35 ),
		0 0 0 6px rgba( 10, 24, 48, 0.9 ),
		0 0 0 7px rgba( 58, 134, 224, 0.35 ),
		0 30px 60px -30px rgba( 0, 0, 0, 0.85 ),
		0 0 60px -20px rgba( 255, 176, 32, 0.35 );
}

.cricket-hero-article__media {
	isolation: isolate;
}

.cricket-hero-article__bg {
	transition: transform 1.2s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cricket-hero-article:hover .cricket-hero-article__bg {
	transform: scale( 1.035 );
}

/* Inset gradient hairline + corner brackets. */
.cricket-hero-article__media::before,
.cricket-hero-article__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.cricket-hero-article__media::before {
	inset: 12px;
	border-radius: 12px;
	padding: 1.5px;
	background: conic-gradient( from var( --psp-frame-angle ), rgba( 255, 214, 107, 0.95 ), rgba( 255, 255, 255, 0.15 ) 25%, rgba( 58, 134, 224, 0.9 ) 50%, rgba( 255, 255, 255, 0.15 ) 75%, rgba( 255, 214, 107, 0.95 ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.8;
	animation: psp-frame-spin 9s linear infinite;
}

.cricket-hero-article__media::after {
	inset: 6px;
	--c: #ffd66b;
	--l: 34px;
	--t: 3px;
	background:
		linear-gradient( var( --c ) 0 0 ) top left / var( --l ) var( --t ),
		linear-gradient( var( --c ) 0 0 ) top left / var( --t ) var( --l ),
		linear-gradient( var( --c ) 0 0 ) top right / var( --l ) var( --t ),
		linear-gradient( var( --c ) 0 0 ) top right / var( --t ) var( --l ),
		linear-gradient( var( --c ) 0 0 ) bottom left / var( --l ) var( --t ),
		linear-gradient( var( --c ) 0 0 ) bottom left / var( --t ) var( --l ),
		linear-gradient( var( --c ) 0 0 ) bottom right / var( --l ) var( --t ),
		linear-gradient( var( --c ) 0 0 ) bottom right / var( --t ) var( --l );
	background-repeat: no-repeat;
	filter: drop-shadow( 0 0 6px rgba( 255, 176, 32, 0.7 ) );
	transition: inset 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.cricket-hero-article:hover .cricket-hero-article__media::after {
	inset: 10px;
}

/* Light sweep across the image. */
.cricket-hero-article__scrim::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.22 ), transparent );
	transform: skewX( -18deg );
	animation: psp-frame-sweep 1.6s 0.4s cubic-bezier( 0.4, 0, 0.2, 1 ) both;
}

.cricket-hero-article:hover .cricket-hero-article__scrim::after {
	animation: psp-frame-sweep-hover 1.2s cubic-bezier( 0.4, 0, 0.2, 1 ) both;
}

@keyframes psp-frame-spin {
	to { --psp-frame-angle: 360deg; }
}

@keyframes psp-frame-sweep {
	from { left: -60%; }
	to { left: 130%; }
}

@keyframes psp-frame-sweep-hover {
	from { left: -60%; }
	to { left: 130%; }
}

body.single .cricket-content-page .entry-content img.cricket-img-frame {
	box-sizing: border-box;
	padding: 6px;
	border: 2px solid transparent;
	border-radius: 18px;
	background:
		linear-gradient( #ffffff, #ffffff ) padding-box,
		linear-gradient( 135deg, #ffd66b, #ff8a5c 35%, #3a86e0 70%, #7c5cff ) border-box;
	box-shadow:
		0 18px 36px -18px rgba( 10, 24, 48, 0.55 ),
		0 0 0 6px rgba( 255, 176, 32, 0.08 );
	transition: transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ), box-shadow 0.35s ease;
}

body.single .cricket-content-page .entry-content img.cricket-img-frame:hover {
	transform: translateY( -3px );
	box-shadow:
		0 26px 44px -20px rgba( 10, 24, 48, 0.6 ),
		0 0 0 6px rgba( 255, 176, 32, 0.16 );
}

@media ( max-width: 767px ) {
	.cricket-hero-article__media::before {
		inset: 8px;
	}

	.cricket-hero-article__media::after {
		inset: 4px;
		--l: 22px;
	}

	body.single .cricket-content-page .entry-content img.cricket-img-frame {
		padding: 4px;
		border-radius: 14px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-hero-article__media::before,
	.cricket-hero-article__scrim::after {
		animation: none !important;
	}

	.cricket-hero-article__scrim::after {
		display: none;
	}

	.cricket-hero-article__bg,
	.cricket-hero-article__media::after,
	body.single .cricket-content-page .entry-content img.cricket-img-frame {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * "Ads section — click to go down to comments" pill (js/cricket-ads-hint.js).
 * Floats over a Disqus/Taboola ad on hover; docks at the bottom of the
 * screen on touch devices while an ad is in view.
 * ------------------------------------------------------------------- */
.cricket-ads-hint {
	position: fixed;
	z-index: 9990;
	top: 0;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc( 100vw - 24px );
	margin: 0;
	padding: 6px 16px 6px 6px;
	border: 0;
	border-radius: 999px;
	background:
		linear-gradient( rgba( 10, 24, 48, 0.94 ), rgba( 10, 24, 48, 0.94 ) ) padding-box,
		linear-gradient( 100deg, #ffd66b, #ff8a5c, #3a86e0 ) border-box;
	border: 1.5px solid transparent;
	box-shadow: 0 16px 34px -12px rgba( 0, 0, 0, 0.75 ), 0 0 0 6px rgba( 255, 176, 32, 0.12 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: #eaf4ff;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	transform: translate( -50%, 8px ) scale( 0.94 );
	transition: opacity 0.22s ease, transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.2s ease;
}

.cricket-ads-hint.is-on {
	opacity: 1;
	transform: translate( -50%, 0 ) scale( 1 );
}

.cricket-ads-hint:hover,
.cricket-ads-hint:focus-visible {
	box-shadow: 0 20px 40px -12px rgba( 0, 0, 0, 0.8 ), 0 0 0 7px rgba( 255, 176, 32, 0.25 );
	outline: none;
}

.cricket-ads-hint__tag {
	padding: 6px 10px;
	border-radius: 999px;
	background: linear-gradient( 140deg, #ffe08a, #ffb020 60%, #ff8a5c );
	color: #1a1200;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cricket-ads-hint__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cricket-ads-hint__arrow {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba( 255, 214, 107, 0.16 );
	color: #ffd66b;
	font-size: 12px;
	animation: psp-ads-bounce 1.2s ease-in-out infinite;
}

@keyframes psp-ads-bounce {
	0%, 100% { transform: translateY( -2px ); }
	50% { transform: translateY( 3px ); }
}

/* Touch screens: docked above the bottom edge. */
.cricket-ads-hint--dock {
	top: auto !important;
	left: 50% !important;
	bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
	font-size: 12.5px;
}

.cricket-ads-hint[hidden] {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-ads-hint,
	.cricket-ads-hint__arrow {
		transition: none;
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Share rail reader tools (2026-09-16). These fill the empty column under
 * the share buttons: reading-progress ring / back to top, jump to comments,
 * predictions (live count), leaderboard, text size. Desktop rail only.
 * ------------------------------------------------------------------- */
.cricket-rail-divider {
	display: block;
	width: 26px;
	height: 3px;
	margin: 6px 0 4px;
	border-radius: 3px;
	background: linear-gradient( 90deg, #ffd66b, #ff8a5c, #3a86e0 );
	opacity: 0.8;
}

.cricket-rail-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cricket-rail-tool,
.cricket-rail-size__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	background: rgba( 255, 255, 255, 0.08 );
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cricket-rail-tool:visited {
	color: #ffffff;
}

.cricket-rail-tool:hover,
.cricket-rail-tool:focus-visible,
.cricket-rail-size__btn:focus-visible {
	transform: translateY( -2px );
	border-color: rgba( 255, 214, 107, 0.7 );
	background: rgba( 255, 176, 32, 0.18 );
	box-shadow: 0 8px 20px -8px rgba( 255, 150, 40, 0.7 );
	outline: none;
}

.cricket-rail-tool .emoji {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
}

/* Tooltip to the right of each tool. */
.cricket-rail-tools [data-tip]::after {
	content: attr( data-tip );
	position: absolute;
	left: calc( 100% + 10px );
	top: 50%;
	z-index: 20;
	padding: 6px 10px;
	border-radius: 8px;
	background: #0a1830;
	border: 1px solid rgba( 255, 214, 107, 0.4 );
	color: #ffe9b3;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate( -4px, -50% );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cricket-rail-tools [data-tip]:hover::after,
.cricket-rail-tools [data-tip]:focus-visible::after {
	opacity: 1;
	transform: translate( 0, -50% );
}

/* Progress ring */
.cricket-rail-tool--progress {
	width: 48px;
	height: 48px;
	border: 0;
	background: rgba( 10, 24, 48, 0.7 );
}

.cricket-rail-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate( -90deg );
}

.cricket-rail-ring circle {
	fill: none;
	stroke-width: 3.5;
}

.cricket-rail-ring__track {
	stroke: rgba( 255, 255, 255, 0.12 );
}

.cricket-rail-ring__bar {
	stroke: #ffb020;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.15s linear;
}

.cricket-rail-tool__pct,
.cricket-rail-tool__up {
	position: relative;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 11.5px;
	font-weight: 800;
	color: #ffe9b3;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cricket-rail-tool__up {
	position: absolute;
	font-size: 16px;
	opacity: 0;
	transform: translateY( 6px );
}

.cricket-rail-tool--progress:hover .cricket-rail-tool__pct,
.cricket-rail-tool--progress:focus-visible .cricket-rail-tool__pct {
	opacity: 0;
	transform: translateY( -6px );
}

.cricket-rail-tool--progress:hover .cricket-rail-tool__up,
.cricket-rail-tool--progress:focus-visible .cricket-rail-tool__up {
	opacity: 1;
	transform: none;
}

.cricket-rail-tools.is-done .cricket-rail-ring__bar {
	stroke: #2ee58a;
}

/* Live count badge on predictions */
.cricket-rail-tool__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: linear-gradient( 140deg, #ff6b6b, #ff8a5c );
	box-shadow: 0 0 0 2px #0a1830;
	color: #ffffff;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	animation: psp-rail-badge 2.4s ease-in-out infinite;
}

@keyframes psp-rail-badge {
	0%, 100% { box-shadow: 0 0 0 2px #0a1830, 0 0 0 2px rgba( 255, 107, 107, 0.5 ); }
	50% { box-shadow: 0 0 0 2px #0a1830, 0 0 0 7px rgba( 255, 107, 107, 0 ); }
}

/* Text size pair: one pill, two halves */
.cricket-rail-size {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 44px;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	background: rgba( 255, 255, 255, 0.08 );
}

.cricket-rail-size__btn {
	width: 42px;
	height: 38px;
	border: 0;
	background: transparent;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #ffe9b3;
}

.cricket-rail-size__btn:first-child {
	border-radius: 999px 999px 0 0;
}

.cricket-rail-size__btn + .cricket-rail-size__btn {
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: 0 0 999px 999px;
}

.cricket-rail-size__btn:hover:not( :disabled ) {
	background: rgba( 255, 176, 32, 0.18 );
}

.cricket-rail-size__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Short screens: keep the sticky rail inside the viewport. */
@media ( max-height: 860px ) {
	.cricket-rail-size {
		display: none;
	}
}

/* Very short screens: tiles drop their labels (tooltips still name them). */
@media ( max-height: 720px ) {
	.cricket-rail-link__label {
		display: none;
	}

	.cricket-rail-link {
		padding: 3px 0;
	}
}

/* Mobile: the rail becomes a horizontal share bar, and the tools stay out of it. */
@media ( max-width: 860px ) {
	.cricket-rail-divider,
	.cricket-rail-tools {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Sporty post title (2026-09-16): condensed italic display face, uppercase,
 * white-to-gold gradient fill, a slanted gold "speed" bar at the start and
 * racing stripes underneath.
 * ------------------------------------------------------------------- */
body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title {
	position: relative;
	max-width: 30ch;
	margin: 0 0 22px;
	padding: 0 0 18px 22px;
	font-family: 'Barlow Condensed', 'Outfit', 'PT Sans', sans-serif;
	font-size: clamp( 34px, 5vw, 58px );
	font-style: italic;
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient( 100deg, #ffffff 0%, #ffffff 42%, #ffe9b3 62%, #ffb020 82%, #ff8a5c 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow( 0 3px 0 rgba( 3, 10, 24, 0.55 ) ) drop-shadow( 0 10px 24px rgba( 0, 0, 0, 0.35 ) );
	animation: psp-title-in 0.9s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

/* Slanted speed bar */
body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.08em;
	bottom: calc( 18px + 0.08em );
	width: 7px;
	border-radius: 2px;
	background: linear-gradient( 180deg, #ffd66b, #ff8a5c );
	transform: skewX( -14deg );
	box-shadow: 0 0 14px rgba( 255, 176, 32, 0.6 );
}

/* Racing stripes */
body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title::after {
	content: "";
	position: absolute;
	left: 22px;
	bottom: 0;
	width: min( 220px, 60% );
	height: 6px;
	background:
		linear-gradient( 90deg, #ffb020, #ff8a5c ) 0 0 / 58% 100% no-repeat,
		linear-gradient( 90deg, #ffffff, #ffffff ) 76% 0 / 12% 100% no-repeat,
		linear-gradient( 90deg, #3a86e0, #3ad0ff ) 100% 0 / 10% 100% no-repeat;
	transform: skewX( -24deg );
	transform-origin: left;
	animation: psp-title-stripes 1s 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

@keyframes psp-title-in {
	from { opacity: 0; transform: translateX( -18px ); }
	to { opacity: 1; transform: none; }
}

@keyframes psp-title-stripes {
	from { transform: skewX( -24deg ) scaleX( 0 ); }
	to { transform: skewX( -24deg ) scaleX( 1 ); }
}

@media ( max-width: 860px ) {
	body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title {
		font-size: clamp( 30px, 8.4vw, 40px );
		padding: 0 0 14px 16px;
		margin-bottom: 16px;
	}

	body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title::before {
		width: 5px;
		bottom: calc( 14px + 0.08em );
	}

	body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title::after {
		left: 16px;
		height: 5px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title,
	body.single .cricket-content-page .cricket-hero-article .entry-header .entry-title::after,
	.cricket-rail-tool__badge {
		animation: none;
	}
}

/* Hero meta links (author) — legacy visited/link colours made the author name black on navy. */
body.single .cricket-content-page .cricket-hero-article .entry-meta a,
body.single .cricket-content-page .cricket-hero-article .entry-meta a:visited {
	color: #ffe9b3;
	-webkit-text-fill-color: #ffe9b3;
}

body.single .cricket-content-page .cricket-hero-article .entry-meta a:hover {
	color: #ffb020;
	-webkit-text-fill-color: #ffb020;
}

/* Desktop: keep the share rail (and its reader tools) sticky beside the
   article. The layout row stretches its children, which made the rail as
   tall as the article so position:sticky had nothing to do. */
@media ( min-width: 861px ) {
	.cricket-article-layout > .cricket-share-rail {
		align-self: flex-start;
		position: sticky;
		top: 110px;
	}
}

/* Legacy Customizer CSS sets `html, body { overflow-x:hidden }`, which turns
   <body> into its own (never-scrolling) scroll container and silently
   breaks every position:sticky element on the post. `clip` still stops
   sideways overflow without creating a scroll container. */
body.single {
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------------------------------------------------------------------
 * Rail quick-link tiles (2026-09-16 v2): Comments, Predict, Ranks and
 * Account in one glass capsule. Each tile has an accent-coloured icon disc
 * with a short label under it; hover lights the disc and turns the label
 * gold. Replaces the old bare emoji circles.
 * ------------------------------------------------------------------- */
.cricket-rail-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 60px;
	padding: 8px 0;
	border-radius: 999px;
	background:
		linear-gradient( 180deg, rgba( 16, 38, 70, 0.92 ), rgba( 8, 20, 42, 0.94 ) ) padding-box,
		linear-gradient( 180deg, rgba( 255, 214, 107, 0.55 ), rgba( 58, 134, 224, 0.35 ) 50%, rgba( 255, 138, 92, 0.45 ) ) border-box;
	border: 1px solid transparent;
	box-shadow: 0 18px 36px -18px rgba( 0, 0, 0, 0.8 ), inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
}

.cricket-rail-link {
	--rail-accent: #3a86e0;
	--rail-accent-2: #3ad0ff;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 56px;
	margin: 0;
	padding: 6px 0 5px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: #cfe0f5;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cricket-rail-link:visited {
	color: #cfe0f5;
}

.cricket-rail-link--predict { --rail-accent: #ffb020; --rail-accent-2: #ff8a5c; }
.cricket-rail-link--board { --rail-accent: #b58cff; --rail-accent-2: #ffd66b; }
.cricket-rail-link--account { --rail-accent: #2ee58a; --rail-accent-2: #3ad0ff; }

.cricket-rail-link__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var( --rail-accent );
	background: color-mix( in srgb, var( --rail-accent ) 14%, transparent );
	box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var( --rail-accent ) 55%, transparent );
	transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.cricket-rail-link__icon svg {
	display: block;
}

.cricket-rail-link__icon--initials {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.cricket-rail-link__label {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.cricket-rail-link:hover,
.cricket-rail-link:focus-visible {
	background: rgba( 255, 255, 255, 0.05 );
	outline: none;
}

.cricket-rail-link:hover .cricket-rail-link__icon,
.cricket-rail-link:focus-visible .cricket-rail-link__icon {
	color: #0a1830;
	background: linear-gradient( 140deg, var( --rail-accent ), var( --rail-accent-2 ) );
	box-shadow: 0 8px 18px -6px color-mix( in srgb, var( --rail-accent ) 80%, transparent );
	transform: translateY( -2px ) scale( 1.06 );
}

.cricket-rail-link:hover .cricket-rail-link__label,
.cricket-rail-link:focus-visible .cricket-rail-link__label {
	color: #ffd66b;
}

.cricket-rail-link:focus-visible {
	box-shadow: 0 0 0 2px rgba( 255, 214, 107, 0.7 );
}

/* Live count on Predict */
.cricket-rail-link__badge {
	position: absolute;
	top: 1px;
	right: 5px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: linear-gradient( 140deg, #ff6b6b, #ff8a5c );
	box-shadow: 0 0 0 2px #0c1f3a;
	color: #ffffff;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 10px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
	animation: psp-rail-badge 2.4s ease-in-out infinite;
}

/* Tooltip for the tiles (same look as the other rail tooltips) */
.cricket-rail-links [data-tip]::after {
	left: calc( 100% + 12px );
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-rail-link__badge {
		animation: none;
	}

	.cricket-rail-link__icon {
		transition: none;
	}
}

/* Legacy a:hover underline off; rail above the article card so tooltips show. */
.cricket-rail-link,
.cricket-rail-link:hover,
.cricket-rail-link:focus,
.cricket-rail-link:visited {
	text-decoration: none;
}

@media ( min-width: 861px ) {
	.cricket-article-layout > .cricket-share-rail {
		z-index: 40;
	}
}

/* =====================================================================
 * Discussion card + "Chat now" button (2026-09-17)
 * =================================================================== */

/* --- Light sky-blue discussion card ---------------------------------
 * Disqus picks its colour scheme from this container's text colour: dark
 * text here keeps it on its light scheme (black/blue text), which now sits
 * on a light background instead of the navy page. */
.cricket-discussion {
	position: relative;
	max-width: 1100px;
	margin: 40px auto 10px;
	padding: 26px 28px 22px;
	border-radius: 24px;
	color: #0f2a4a;
	background:
		radial-gradient( 90% 60% at 100% 0%, rgba( 125, 211, 252, 0.45 ), transparent 60% ),
		linear-gradient( 180deg, #dff2ff 0%, #eef8ff 30%, #f8fcff 65%, #ffffff 100% );
	border: 1px solid #bfe3fb;
	box-shadow: 0 30px 60px -30px rgba( 0, 0, 0, 0.65 ), inset 0 1px 0 #ffffff;
	scroll-margin-top: 110px;
}

.cricket-discussion::before {
	content: "";
	position: absolute;
	top: 0;
	left: 28px;
	right: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient( 90deg, #38bdf8, #1e5087, #ffb020 );
}

.cricket-discussion__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba( 30, 80, 135, 0.14 );
}

.cricket-discussion__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: #ffffff;
	background: linear-gradient( 135deg, #38bdf8, #1e5087 );
	box-shadow: 0 10px 22px -10px rgba( 30, 80, 135, 0.8 );
}

.cricket-discussion__titles {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.cricket-content-page .cricket-discussion__title {
	margin: 0;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: #0d2a4d;
}

.cricket-discussion__sub {
	font-size: 14px;
	line-height: 1.45;
	color: #3b5575;
}

.cricket-discussion #disqus_thread,
.cricket-discussion #disqus_recommendations {
	color: #0f172a;
	background: transparent;
}

.cricket-discussion #disqus_thread a,
.cricket-discussion #disqus_recommendations a {
	color: #1d5fb8;
}

/* The WP-native comment fallback (when Disqus isn't loaded) reads dark too. */
.cricket-content-page .cricket-discussion #comments {
	max-width: none;
	margin-top: 0;
	color: #0f2a4a;
}

.cricket-content-page .cricket-discussion .comments-title {
	color: #0d2a4d;
}

@media ( max-width: 640px ) {
	.cricket-discussion {
		margin: 28px 0 6px;
		padding: 18px 14px 14px;
		border-radius: 18px;
	}

	.cricket-discussion::before {
		left: 18px;
		right: 18px;
	}

	.cricket-discussion__icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.cricket-content-page .cricket-discussion__title {
		font-size: 19px;
	}

	.cricket-discussion__sub {
		font-size: 13px;
	}
}

/* --- "Chat now" floating button ------------------------------------- */

.cricket-chat-fab,
.cricket-chat-fab:visited {
	position: fixed;
	left: 24px;
	bottom: 28px;
	z-index: 9980;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px 0 0;
	border-radius: 999px;
	text-decoration: none !important;
	color: #ffffff !important;
	background: rgba( 10, 24, 48, 0.88 );
	border: 1px solid rgba( 125, 211, 252, 0.45 );
	box-shadow: 0 16px 32px -14px rgba( 0, 0, 0, 0.85 ), 0 0 0 5px rgba( 56, 189, 248, 0.1 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ), visibility 0s linear 0.35s, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* With JS: hidden until scrolled, and while the discussion is on screen. */
.cricket-chat-fab.is-js {
	opacity: 0;
	visibility: hidden;
	transform: translateX( -24px ) scale( 0.9 );
}

.cricket-chat-fab.is-js.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ), visibility 0s, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cricket-chat-fab__disc {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: -1px 0 -1px -1px;
	border-radius: 50%;
	color: #ffffff;
	background: radial-gradient( circle at 32% 28%, #7dd3fc, #0ea5e9 45%, #1e5087 100% );
	box-shadow: inset 0 -3px 8px rgba( 10, 24, 48, 0.35 ), inset 0 2px 4px rgba( 255, 255, 255, 0.35 );
	animation: cricket-chat-float 2.6s ease-in-out infinite;
}

.cricket-chat-fab__bubble {
	position: relative;
	z-index: 1;
	transform-origin: 30% 90%;
}

.cricket-chat-fab__dots {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: flex;
	gap: 3px;
	transform: translate( -52%, -58% );
}

.cricket-chat-fab__dots i {
	display: block;
	width: 3.5px;
	height: 3.5px;
	border-radius: 50%;
	background: #ffffff;
	animation: cricket-chat-typing 1.2s ease-in-out infinite;
}

.cricket-chat-fab__dots i:nth-child( 2 ) { animation-delay: 0.15s; }
.cricket-chat-fab__dots i:nth-child( 3 ) { animation-delay: 0.3s; }

/* Expanding ring every few seconds */
.cricket-chat-fab__ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba( 125, 211, 252, 0.9 );
	animation: cricket-chat-ping 2.8s cubic-bezier( 0, 0, 0.2, 1 ) infinite;
	pointer-events: none;
}

.cricket-chat-fab__label {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: linear-gradient( 90deg, #ffffff 0%, #bae6fd 40%, #ffffff 60%, #ffffff 100% );
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: cricket-chat-shine 3.6s ease-in-out infinite;
}

.cricket-chat-fab.is-visible:hover,
.cricket-chat-fab:not( .is-js ):hover,
.cricket-chat-fab:focus-visible {
	border-color: rgba( 125, 211, 252, 0.85 );
	box-shadow: 0 20px 36px -14px rgba( 14, 165, 233, 0.65 ), 0 0 0 6px rgba( 56, 189, 248, 0.2 );
	transform: translateY( -3px );
}

.cricket-chat-fab:hover .cricket-chat-fab__bubble,
.cricket-chat-fab:focus-visible .cricket-chat-fab__bubble {
	animation: cricket-chat-wiggle 0.6s ease-in-out;
}

.cricket-chat-fab:focus-visible {
	outline: 2px solid #7dd3fc;
	outline-offset: 3px;
}

.cricket-chat-fab.is-launch .cricket-chat-fab__disc {
	animation: cricket-chat-launch 0.6s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes cricket-chat-float {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -3px ); }
}

@keyframes cricket-chat-typing {
	0%, 60%, 100% { transform: translateY( 0 ); opacity: 0.55; }
	30% { transform: translateY( -3px ); opacity: 1; }
}

@keyframes cricket-chat-ping {
	0% { transform: scale( 1 ); opacity: 0.9; }
	70%, 100% { transform: scale( 1.7 ); opacity: 0; }
}

@keyframes cricket-chat-shine {
	0%, 55% { background-position: 100% 0; }
	100% { background-position: -150% 0; }
}

@keyframes cricket-chat-wiggle {
	0%, 100% { transform: rotate( 0 ); }
	25% { transform: rotate( -12deg ); }
	50% { transform: rotate( 9deg ); }
	75% { transform: rotate( -5deg ); }
}

@keyframes cricket-chat-launch {
	0% { transform: scale( 1 ); }
	40% { transform: scale( 0.86 ); }
	100% { transform: scale( 1 ); }
}

@media ( max-width: 640px ) {
	.cricket-chat-fab,
	.cricket-chat-fab:visited {
		left: 14px;
		bottom: 22px;
		gap: 8px;
		padding-right: 14px;
	}

	.cricket-chat-fab__disc {
		width: 46px;
		height: 46px;
	}

	.cricket-chat-fab__bubble {
		width: 23px;
		height: 23px;
	}

	.cricket-chat-fab__label {
		font-size: 13px;
	}
}

@media print {
	.cricket-chat-fab {
		display: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-chat-fab.is-js,
	.cricket-chat-fab.is-js.is-visible {
		transition: opacity 0.2s ease, visibility 0s;
		transform: none;
	}

	.cricket-chat-fab__disc,
	.cricket-chat-fab__dots i,
	.cricket-chat-fab__ping,
	.cricket-chat-fab__label,
	.cricket-chat-fab:hover .cricket-chat-fab__bubble,
	.cricket-chat-fab.is-launch .cricket-chat-fab__disc {
		animation: none;
	}

	.cricket-chat-fab__label {
		-webkit-text-fill-color: #ffffff;
	}
}

/* Chat button beside the share rail (mid-size screens, set by cricket-share.js). */
.cricket-chat-fab.is-compact {
	left: 14px;
	gap: 0;
	padding-right: 0;
}

.cricket-chat-fab.is-compact .cricket-chat-fab__label,
.cricket-chat-fab.is-right .cricket-chat-fab__label {
	position: absolute;
	left: calc( 100% + 10px );
	top: 50%;
	padding: 4px 10px;
	border-radius: 999px;
	background: #0a1830;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	animation: none;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px rgba( 125, 211, 252, 0.45 );
	-webkit-text-fill-color: #ffffff;
	opacity: 0;
	transform: translate( -6px, -50% );
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.cricket-chat-fab.is-right {
	left: auto;
	right: 24px;
	bottom: 108px;
	gap: 0;
	padding-right: 0;
}

.cricket-chat-fab.is-right .cricket-chat-fab__label {
	left: auto;
	right: calc( 100% + 10px );
	transform: translate( 6px, -50% );
}

.cricket-chat-fab.is-js.is-right:not( .is-visible ) {
	transform: translateX( 24px ) scale( 0.9 );
}

.cricket-chat-fab.is-compact:hover .cricket-chat-fab__label,
.cricket-chat-fab.is-compact:focus-visible .cricket-chat-fab__label,
.cricket-chat-fab.is-right:hover .cricket-chat-fab__label,
.cricket-chat-fab.is-right:focus-visible .cricket-chat-fab__label {
	opacity: 1;
	transform: translate( 0, -50% );
}