/**
 * Prediction card (plugin's [proace_prediction], .proace-prediction), every
 * leaderboard surface, and the homepage predictions feed — the plugin's own
 * [proace_leaderboard] table stays theme-independent by default; overriding
 * it here (and owning the theme-native modules' markup entirely) is the
 * sanctioned mechanism, see class-proace-shortcodes.php's own doc comment.
 *
 * Design language (2026-09-16 pass): glass-depth cards (soft gradient sheen
 * + elevated shadow, no neon gradient border frame), layered radial-gradient
 * page backgrounds with a subtle grain texture and two faint arc outlines
 * for depth, monospace micro-labels (JetBrains Mono, loaded alongside this
 * file — see psp_child_enqueue_assets()), real avatars with a soft glow
 * reserved for #1 only. Independently designed — not a clone of any
 * reference site — after two earlier passes read as either too flat or too
 * busy (animated orbs/rings, gradient-frame cards).
 */

:root {
	--proace-navy-deep: #050e1c;
	--proace-navy: #0a1e38;
	--proace-blue: #1e5087;
	--proace-blue-light: #3a86e0;
	--proace-accent: #ffb020;
	--proace-ice: #eaf4ff;
	--proace-ice-muted: rgba( 234, 244, 255, 0.6 );
	--proace-glass-border: rgba( 255, 255, 255, 0.09 );
	--proace-correct: #4fd18b;
	--proace-wrong: #ff6b6b;
	--proace-silver: #c7d2e0;
	--proace-bronze: #e8a06b;
	--proace-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--proace-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Colored initials avatar (psp_predictor_avatar()) — replaces WordPress's
   default gray "mystery man" Gravatar placeholder everywhere a predictor
   shows up. */
.psp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex: 0 0 auto;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
}

/* Reusable page-background decoration: two faint circular arcs + a grain
   texture. Used by the homepage feed/leaderboard sections and the
   Leaderboard/Predictions pages — each declares its own ::fx wrapper with
   these shared sub-classes so one visual language covers every surface. */
.cricket-bg-arc {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.05 );
	pointer-events: none;
}

.cricket-bg-grain {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: var( --proace-grain );
}

/* -----------------------------------------------------------------------
 * Prediction card
 * --------------------------------------------------------------------- */

/* The plugin's brand-neutral prediction.css gives this OUTER wrapper a light
   background, border and padding; the theme draws the card on __surface, so
   the wrapper must be bare or every dark card sits inside a white frame. */
.proace-prediction {
	margin: 26px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.proace-prediction__surface {
	position: relative;
	border-radius: 16px;
	padding: 22px 24px;
	overflow: hidden;
	background: linear-gradient( 165deg, rgba( 255, 255, 255, 0.05 ), rgba( 255, 255, 255, 0.015 ) ), var( --proace-navy );
	border: 1px solid var( --proace-glass-border );
	box-shadow: 0 18px 38px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.05 );
}

.proace-prediction__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.proace-prediction__tourney {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var( --proace-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #8fb8ee;
}

.proace-prediction__tourney svg {
	color: var( --proace-blue-light );
	flex: 0 0 auto;
}

.proace-prediction__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-family: var( --proace-mono );
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 11px;
	border-radius: 7px;
	white-space: nowrap;
}

.proace-prediction__badge--open {
	color: var( --proace-accent );
	background: rgba( 255, 176, 32, 0.1 );
	border: 1px solid rgba( 255, 176, 32, 0.3 );
}

.proace-prediction__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --proace-accent );
	box-shadow: 0 0 8px rgba( 255, 176, 32, 0.7 );
}

.proace-prediction__badge--resolved {
	color: var( --proace-correct );
	background: rgba( 79, 209, 139, 0.1 );
	border: 1px solid rgba( 79, 209, 139, 0.3 );
}

.proace-prediction__badge--closed {
	color: var( --proace-ice-muted );
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid var( --proace-glass-border );
}

.proace-prediction__question {
	position: relative;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	color: var( --proace-ice );
	margin-bottom: 18px;
	line-height: 1.35;
}

.proace-prediction__login {
	position: relative;
	margin-bottom: 14px;
	font-size: 14px;
}

.proace-prediction__login a {
	color: var( --proace-accent );
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba( 255, 176, 32, 0.4 );
}

.proace-prediction__login a:hover {
	border-bottom-color: var( --proace-accent );
}

/* --- Generic pill options (custom text, 3+ options, Void) --------------- */

.proace-prediction__options {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.proace-prediction__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 11px;
	border: 1px solid var( --proace-glass-border );
	background: rgba( 255, 255, 255, 0.02 );
	color: var( --proace-ice );
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.proace-prediction__option[style*="--proace-pct"]::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2.5px;
	width: var( --proace-pct, 0% );
	background: linear-gradient( 90deg, var( --proace-blue ), var( --proace-blue-light ) );
	transition: width 0.4s ease;
}

.proace-prediction__option:hover:not(:disabled) {
	border-color: rgba( 255, 176, 32, 0.4 );
	transform: translateY( -1px );
}

.proace-prediction__option:focus-visible {
	outline: 2px solid var( --proace-accent );
	outline-offset: 2px;
}

.proace-prediction__option:disabled {
	cursor: not-allowed;
}

.proace-prediction__option--leading {
	border-color: rgba( 255, 176, 32, 0.3 );
	background: rgba( 255, 176, 32, 0.04 );
}

.proace-prediction__option--mine {
	border-color: var( --proace-accent );
	background: rgba( 255, 176, 32, 0.1 );
	font-weight: 800;
}

.proace-prediction__option--mine::after {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var( --proace-accent );
	color: var( --proace-navy-deep );
	font-size: 9px;
	font-weight: 800;
}

.proace-prediction__option--correct {
	border-color: rgba( 79, 209, 139, 0.4 );
	background: rgba( 79, 209, 139, 0.08 );
	color: var( --proace-correct );
	font-weight: 800;
}

.proace-prediction__option--correct .proace-prediction__option[style*="--proace-pct"]::before,
.proace-prediction__option--correct::before {
	background: var( --proace-correct );
}

.proace-prediction__option--wrong.proace-prediction__option--mine {
	border-color: rgba( 255, 107, 107, 0.4 );
	background: rgba( 255, 107, 107, 0.08 );
	color: var( --proace-wrong );
}

.proace-prediction__option--wrong.proace-prediction__option--mine::after {
	content: "\2715";
	background: var( --proace-wrong );
	color: #2a0d0d;
}

.proace-prediction__pct {
	font-family: var( --proace-mono );
	font-size: 11px;
	font-weight: 700;
	color: var( --proace-ice-muted );
	opacity: 0.9;
}

.proace-prediction__options--void {
	justify-content: center;
	margin-bottom: 16px;
}

.proace-prediction__options--void .proace-prediction__option {
	padding: 7px 16px;
	font-size: 12px;
	opacity: 0.8;
}

/* --- VS matchup layout — real team crest + color either side of a
   divider, for predictions with exactly 2 team-linked options. --------- */

.proace-prediction__vs-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.proace-prediction__option--vs {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	text-align: center;
	background: rgba( 255, 255, 255, 0.02 );
}

.proace-prediction__option--vs[style*="--proace-pct"]::before {
	display: none;
}

.proace-prediction__crest {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: #ffffff;
	border: 2px solid rgba( 255, 255, 255, 0.14 );
	background-size: cover;
	background-position: center;
}

.proace-prediction__option--leading .proace-prediction__crest {
	box-shadow: 0 0 0 3px rgba( 255, 176, 32, 0.18 ), 0 0 18px rgba( 255, 176, 32, 0.28 );
}

.proace-prediction__option--correct .proace-prediction__crest {
	box-shadow: 0 0 0 3px rgba( 79, 209, 139, 0.2 ), 0 0 18px rgba( 79, 209, 139, 0.3 );
}

.proace-prediction__option--wrong.proace-prediction__option--mine .proace-prediction__crest {
	box-shadow: 0 0 0 3px rgba( 255, 107, 107, 0.22 );
}

.proace-prediction__vs-name {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: var( --proace-ice );
}

.proace-prediction__vs-pct {
	font-family: var( --proace-mono );
	font-size: 11px;
	color: var( --proace-ice-muted );
}

.proace-prediction__option--leading .proace-prediction__vs-pct {
	color: var( --proace-accent );
}

.proace-prediction__option--correct .proace-prediction__vs-pct {
	color: var( --proace-correct );
}

.proace-prediction__vs-mid {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var( --proace-glass-border );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --proace-accent );
	background: rgba( 255, 255, 255, 0.02 );
}

.proace-prediction__vs-mid span {
	display: none;
}

.proace-prediction__split-bar {
	position: relative;
	display: flex;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.05 );
	margin-bottom: 16px;
}

.proace-prediction__split-bar span:first-child {
	background: linear-gradient( 90deg, var( --proace-blue ), var( --proace-blue-light ) );
}

.proace-prediction__split-bar span:last-child {
	background: linear-gradient( 90deg, var( --proace-accent ), #ff8a5c );
}

/* --- Resolved-state result strip — plain-language verdict everyone sees,
   not just the voter (the per-user feedback below is separate). --------- */

.proace-prediction__result-strip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: rgba( 79, 209, 139, 0.07 );
	border: 1px solid rgba( 79, 209, 139, 0.22 );
	border-radius: 9px;
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --proace-correct );
	text-align: center;
	margin-bottom: 16px;
}

/* --- Footer: participant count + avatar stack --------------------------- */

.proace-prediction__foot {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 22px;
}

.proace-prediction__participants {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var( --proace-mono );
	font-size: 11px;
	color: var( --proace-ice-muted );
}

.proace-prediction__avatars {
	display: flex;
	align-items: center;
}

.proace-prediction__avatars .psp-avatar {
	border: 2px solid var( --proace-navy );
	margin-left: -8px;
}

.proace-prediction__avatars .psp-avatar:first-child {
	margin-left: 0;
}

.proace-prediction__avatars img.avatar {
	border-radius: 50%;
	border: 2px solid var( --proace-navy );
	margin-left: -8px;
}

.proace-prediction__feedback {
	position: relative;
	margin-top: 14px;
	min-height: 18px;
}

.proace-prediction__feedback:empty {
	margin-top: 0;
	min-height: 0;
}

/* A real notification pill instead of plain muted text — one visual
   treatment shared by the JS-driven submit flow (submitting/success/error,
   see prediction.js) and the server-rendered states on page load
   (success/locked/correct/wrong), so a fresh vote and a page reload of an
   already-voted card look identical. */
.proace-prediction__feedback[class*="proace-prediction__feedback--"] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	animation: proaceFeedbackPop 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

@keyframes proaceFeedbackPop {
	from {
		opacity: 0;
		transform: translateY( 4px ) scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

.proace-prediction__feedback--submitting {
	background: rgba( 58, 134, 224, 0.14 );
	border: 1px solid rgba( 58, 134, 224, 0.32 );
	color: var( --proace-blue-light );
}

.proace-prediction__feedback--submitting::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --proace-blue-light );
	animation: proaceFeedbackPulse 0.9s ease-in-out infinite;
}

.proace-prediction__feedback--success,
.proace-prediction__feedback--correct {
	background: rgba( 79, 209, 139, 0.14 );
	border: 1px solid rgba( 79, 209, 139, 0.34 );
	color: var( --proace-correct );
}

.proace-prediction__feedback--success::before {
	content: "✓";
	flex: 0 0 auto;
	font-size: 11px;
}

.proace-prediction__feedback--locked {
	background: rgba( 234, 244, 255, 0.06 );
	border: 1px solid var( --proace-glass-border );
	color: var( --proace-ice-muted );
}

.proace-prediction__feedback--error,
.proace-prediction__feedback--wrong {
	background: rgba( 255, 107, 107, 0.14 );
	border: 1px solid rgba( 255, 107, 107, 0.34 );
	color: var( --proace-wrong );
}

.proace-prediction__feedback--error::before {
	content: "!";
	flex: 0 0 auto;
	font-weight: 800;
}

@keyframes proaceFeedbackPulse {
	0%,
	100% {
		opacity: 1;
		transform: scale( 1 );
	}
	50% {
		opacity: 0.35;
		transform: scale( 0.7 );
	}
}

.proace-prediction__result--correct {
	color: var( --proace-correct );
}

.proace-prediction__result--wrong {
	color: var( --proace-wrong );
}

@media ( prefers-reduced-motion: reduce ) {
	.proace-prediction__feedback[class*="proace-prediction__feedback--"] {
		animation: none;
	}

	.proace-prediction__feedback--submitting::before {
		animation: none;
	}
}

@media ( max-width: 560px ) {
	.proace-prediction__surface {
		padding: 18px;
	}

	.proace-prediction__options {
		flex-direction: column;
	}

	.proace-prediction__option:not(.proace-prediction__option--vs) {
		width: 100%;
		justify-content: space-between;
	}

	.proace-prediction__crest {
		width: 40px;
		height: 40px;
		font-size: 12px;
	}
}

/* -----------------------------------------------------------------------
 * [proace_leaderboard] shortcode table — restyle for wherever it's
 * embedded directly (e.g. pasted into a post); the theme-native modules
 * below are the primary leaderboard surfaces on this site.
 * --------------------------------------------------------------------- */

.proace-leaderboard {
	margin: 26px 0;
}

.proace-leaderboard__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var( --proace-navy );
	border: 1px solid var( --proace-glass-border );
	border-radius: 14px;
	overflow: hidden;
}

.proace-leaderboard__table th,
.proace-leaderboard__table td {
	padding: 12px 16px;
	border-bottom: 1px solid var( --proace-glass-border );
	text-align: left;
	font-size: 14px;
	color: var( --proace-ice );
}

.proace-leaderboard__table tr:last-child td {
	border-bottom: none;
}

.proace-leaderboard__table th {
	font-family: var( --proace-mono );
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --proace-ice-muted );
	background: rgba( 255, 255, 255, 0.02 );
}

.proace-leaderboard__table img {
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 8px;
	border: 2px solid var( --proace-glass-border );
}

.proace-leaderboard__row--top {
	background: rgba( 255, 176, 32, 0.06 );
	font-weight: 700;
}

.proace-leaderboard__empty {
	color: var( --proace-ice-muted );
	font-size: 14px;
}

/* =========================================================================
 * Podium — shared "rank card" component used by both the homepage
 * leaderboard preview and the full Leaderboard page. Flat, equal-height
 * cards (no riser steps); #1 gets a crown, a subtle lift, and a soft gold
 * glow instead of a busy spinning ring.
 * ======================================================================= */

.cricket-podium {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	grid-template-areas: "p2 p1 p3";
	gap: 16px;
	max-width: 780px;
	margin: 0 auto 30px;
	align-items: end;
}

.cricket-podium__place {
	position: relative;
	grid-area: p2;
	border-radius: 16px;
	padding: 20px 16px;
	text-align: center;
	background: linear-gradient( 165deg, rgba( 255, 255, 255, 0.05 ), rgba( 255, 255, 255, 0.015 ) ), var( --proace-navy );
	border: 1px solid var( --proace-glass-border );
	box-shadow: 0 18px 36px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.05 );
}

.cricket-podium__place--1 {
	grid-area: p1;
	transform: translateY( -10px );
	border-color: rgba( 255, 176, 32, 0.35 );
	box-shadow: 0 0 0 1px rgba( 255, 176, 32, 0.22 ), 0 22px 46px -12px rgba( 255, 176, 32, 0.26 ), inset 0 1px 0 rgba( 255, 255, 255, 0.07 );
}

.cricket-podium__place--3 {
	grid-area: p3;
}

/* Homepage-only: glossy/transparent podium cards. Scoped to the homepage
   leaderboard preview so the dedicated Leaderboard page keeps its solid
   glass-depth look. No overflow:hidden here — the background gradient
   already clips to border-radius on its own, and the crown SVG sits
   outside the card's padding box via a negative top offset. */
.cricket-leaderboard-section .cricket-podium__place {
	background:
		linear-gradient( 120deg, rgba( 255, 255, 255, 0.14 ) 0%, transparent 34% ),
		linear-gradient( 165deg, rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.02 ) );
	backdrop-filter: blur( 16px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 160% );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
}

.cricket-leaderboard-section .cricket-podium__place--1 {
	border-color: rgba( 255, 176, 32, 0.4 );
}

/* Staggered entrance + a continuous soft glow pulse on the #1 card. */
@keyframes cricketPodiumRise {
	from {
		opacity: 0;
		translate: 0 18px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes cricketPodiumGlow {
	0%,
	100% {
		box-shadow: 0 0 0 1px rgba( 255, 176, 32, 0.22 ), 0 22px 46px -12px rgba( 255, 176, 32, 0.26 ), inset 0 1px 0 rgba( 255, 255, 255, 0.07 );
	}
	50% {
		box-shadow: 0 0 0 1px rgba( 255, 176, 32, 0.42 ), 0 22px 54px -10px rgba( 255, 176, 32, 0.44 ), inset 0 1px 0 rgba( 255, 255, 255, 0.1 );
	}
}

.cricket-leaderboard-section .cricket-podium__place {
	animation: cricketPodiumRise 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

.cricket-leaderboard-section .cricket-podium__place--2 {
	animation-delay: 0.05s;
}

.cricket-leaderboard-section .cricket-podium__place--3 {
	animation-delay: 0.27s;
}

.cricket-leaderboard-section .cricket-podium__place--1 {
	animation: cricketPodiumRise 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ) 0.16s both,
		cricketPodiumGlow 2.6s ease-in-out 0.9s infinite;
}

.cricket-podium__crown {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX( -50% );
}

.cricket-podium__top {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
}

.cricket-podium__avatar {
	border: 2px solid rgba( 255, 255, 255, 0.14 );
}

.cricket-podium__place--1 .cricket-podium__avatar {
	box-shadow: 0 0 0 4px rgba( 255, 176, 32, 0.15 ), 0 0 22px rgba( 255, 176, 32, 0.32 );
}

.cricket-podium__rank-chip {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 10.5px;
	color: var( --proace-navy-deep );
	border: 2px solid var( --proace-navy-deep );
	background: var( --proace-silver );
}

.cricket-podium__place--1 .cricket-podium__rank-chip {
	background: var( --proace-accent );
}

.cricket-podium__place--3 .cricket-podium__rank-chip {
	background: var( --proace-bronze );
}

.cricket-podium__name {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var( --proace-ice );
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-podium__level {
	display: block;
	font-family: var( --proace-mono );
	font-size: 9px;
	font-weight: 700;
	color: var( --proace-ice-muted );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}

.cricket-podium__points {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: var( --proace-accent );
	line-height: 1;
}

.cricket-podium__place--1 .cricket-podium__points {
	font-size: 29px;
}

.cricket-podium__points-label {
	display: block;
	font-family: var( --proace-mono );
	font-size: 8.5px;
	font-weight: 700;
	color: var( --proace-ice-muted );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 3px;
}

.cricket-podium__stat {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	color: var( --proace-ice-muted );
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid var( --proace-glass-border );
	padding: 4px 10px;
	border-radius: 999px;
}

@media ( max-width: 720px ) {
	.cricket-podium {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "p1 p1" "p2 p3";
		max-width: 420px;
	}

	.cricket-podium__place--1 {
		transform: none;
		margin-bottom: 10px;
	}
}

/* -----------------------------------------------------------------------
 * Sidebar module (single-post sidebar) — .cricket-sidebar-card is a
 * near-white card (see cricket-content.css), so this module uses that
 * light-card palette, not the dark tokens used everywhere else on this
 * page.
 * --------------------------------------------------------------------- */

.cricket-leaderboard-sidebar__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba( 22, 35, 60, 0.08 );
}

.cricket-leaderboard-sidebar__row:last-of-type {
	border-bottom: none;
}

.cricket-leaderboard-sidebar__rank {
	flex: 0 0 22px;
	font-family: var( --proace-mono );
	font-size: 12px;
	font-weight: 700;
	color: #8a93a6;
	text-align: center;
}

.cricket-leaderboard-sidebar__row--1 .cricket-leaderboard-sidebar__rank,
.cricket-leaderboard-sidebar__row--2 .cricket-leaderboard-sidebar__rank,
.cricket-leaderboard-sidebar__row--3 .cricket-leaderboard-sidebar__rank {
	color: #d68a00;
}

.cricket-leaderboard-sidebar__avatar {
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid rgba( 22, 35, 60, 0.1 );
}

.cricket-leaderboard-sidebar__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #16233c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-leaderboard-sidebar__points {
	flex: 0 0 auto;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #d68a00;
}

.cricket-leaderboard-sidebar__empty {
	font-size: 13px;
	color: #8a93a6;
	padding: 6px 0;
}

.cricket-leaderboard-sidebar__cta {
	display: block;
	text-align: center;
	margin-top: 12px;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.12 );
	border: 1px solid rgba( 255, 176, 32, 0.35 );
	color: #d68a00;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}

.cricket-leaderboard-sidebar__cta:hover,
.cricket-leaderboard-sidebar__cta:focus-visible {
	background: rgba( 255, 176, 32, 0.22 );
	color: #d68a00;
	transform: translateY( -1px );
}

/* =========================================================================
 * Homepage — Leaderboard preview section
 * ======================================================================= */

/* Glass, not a solid slab: the homepage's animated .cricket-storm layer
   (cricket-storm.css) is position:fixed behind the whole page, and the
   hero/community sections above this one are fully transparent to it —
   a solid navy gradient here would cut that continuity at this exact
   point. A lighter translucent tint (not the near-opaque 0.5 the first
   pass at this used — the storm is dark, so a dark-on-dark blur alone
   read as no different from opaque) + a diagonal sheen highlight (the
   same trick used on the cards below) + a hairline top/bottom edge is
   what actually makes it register as glass rather than "still opaque". */
.cricket-leaderboard-section {
	position: relative;
	padding: 56px 0;
	overflow: hidden;
	background:
		linear-gradient( 120deg, rgba( 255, 255, 255, 0.1 ) 0%, transparent 30% ),
		radial-gradient( 1000px 480px at 18% -12%, rgba( 255, 176, 32, 0.2 ), transparent 55% ),
		radial-gradient( 900px 560px at 88% 12%, rgba( 58, 134, 224, 0.24 ), transparent 55% ),
		rgba( 8, 20, 40, 0.3 );
	backdrop-filter: blur( 32px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 32px ) saturate( 160% );
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.07 );
}

.cricket-leaderboard-section__fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.cricket-leaderboard-section__arc {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.05 );
	pointer-events: none;
}

.cricket-leaderboard-section__arc--a {
	width: 720px;
	height: 720px;
	top: -460px;
	left: -160px;
}

.cricket-leaderboard-section__arc--b {
	width: 520px;
	height: 520px;
	top: -140px;
	right: -200px;
	border-color: rgba( 255, 176, 32, 0.07 );
}

.cricket-leaderboard-section__grain {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	mix-blend-mode: overlay;
	background-image: var( --proace-grain );
}

.cricket-leaderboard-section .container {
	position: relative;
	z-index: 1;
}

.cricket-leaderboard-section__header {
	position: relative;
	text-align: center;
	max-width: 620px;
	margin: 0 auto 34px;
}

.cricket-leaderboard-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var( --proace-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --proace-accent );
	margin-bottom: 12px;
}

.cricket-leaderboard-section__title {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: clamp( 26px, 3.4vw, 34px );
	font-weight: 800;
	color: var( --proace-ice );
	margin: 0 0 10px;
}

.cricket-leaderboard-section__sub {
	font-size: 14.5px;
	color: var( --proace-ice-muted );
	margin: 0;
}

.cricket-leaderboard-section__empty {
	position: relative;
	text-align: center;
	color: var( --proace-ice-muted );
	font-size: 14px;
	padding: 20px 0 6px;
}

.cricket-leaderboard-list-label {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 680px;
	margin: 8px auto 14px;
	font-family: var( --proace-mono );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --proace-ice-muted );
}

.cricket-leaderboard-list-label::before,
.cricket-leaderboard-list-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --proace-glass-border );
}

.cricket-leaderboard-list {
	position: relative;
	max-width: 680px;
	margin: 0 auto;
	background: rgba( 255, 255, 255, 0.025 );
	border: 1px solid var( --proace-glass-border );
	border-radius: 14px;
	overflow: hidden;
}

.cricket-leaderboard-list__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 20px;
	border-bottom: 1px solid var( --proace-glass-border );
}

.cricket-leaderboard-list__row:last-child {
	border-bottom: none;
}

.cricket-leaderboard-list__rank {
	flex: 0 0 26px;
	font-family: var( --proace-mono );
	font-weight: 700;
	color: var( --proace-ice-muted );
	font-size: 12px;
}

.cricket-leaderboard-list__avatar {
	flex: 0 0 auto;
	border: 2px solid var( --proace-glass-border );
}

.cricket-leaderboard-list__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: var( --proace-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-leaderboard-list__accuracy {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var( --proace-ice-muted );
}

.cricket-leaderboard-list__points {
	flex: 0 0 auto;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	color: var( --proace-accent );
	font-size: 13px;
}

.cricket-leaderboard-section__cta-wrap {
	position: relative;
	text-align: center;
	margin-top: 30px;
}

.cricket-leaderboard-section__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	/* Gold/coral gradient with dark text — the site's own established
	   primary-CTA treatment (see .cricket-hero__btn--primary). A blue
	   gradient here read as low-contrast against the dark navy section
	   background; gold pops clearly instead. */
	background: linear-gradient( 90deg, var( --proace-accent ), #ff6b6b );
	color: #1a1200;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: 0 12px 28px -6px rgba( 255, 140, 60, 0.5 );
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cricket-leaderboard-section__cta:hover,
.cricket-leaderboard-section__cta:focus-visible {
	color: #1a1200;
	transform: translateY( -2px );
	box-shadow: 0 16px 32px -6px rgba( 255, 140, 60, 0.6 );
}

.cricket-leaderboard-section__cta-sub {
	display: block;
	margin-top: 12px;
	font-family: var( --proace-mono );
	font-size: 11px;
	color: var( --proace-ice-muted );
}

@media ( max-width: 560px ) {
	.cricket-leaderboard-list__row {
		padding: 11px 14px;
		gap: 10px;
	}

	.cricket-leaderboard-list__accuracy {
		display: none;
	}
}

/* =========================================================================
 * Homepage — "This Week's Calls" feed (Open Now + Recent Results)
 * ======================================================================= */

/* Same reasoning and treatment as .cricket-leaderboard-section above —
   lighter tint + diagonal sheen + hairline edge, so it reads as glass
   rather than a dark-on-dark blur indistinguishable from opaque. */
.cricket-feed-section {
	position: relative;
	padding: 56px 0 10px;
	overflow: hidden;
	background:
		linear-gradient( 120deg, rgba( 255, 255, 255, 0.1 ) 0%, transparent 30% ),
		radial-gradient( 900px 460px at 14% -10%, rgba( 255, 176, 32, 0.18 ), transparent 55% ),
		radial-gradient( 820px 520px at 90% 8%, rgba( 58, 134, 224, 0.22 ), transparent 55% ),
		rgba( 8, 20, 40, 0.3 );
	backdrop-filter: blur( 32px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 32px ) saturate( 160% );
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}

.cricket-feed-section__fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.cricket-feed-section__arc {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.05 );
	pointer-events: none;
}

.cricket-feed-section__arc--a {
	width: 640px;
	height: 640px;
	top: -420px;
	right: -180px;
	border-color: rgba( 58, 134, 224, 0.08 );
}

.cricket-feed-section__arc--b {
	width: 460px;
	height: 460px;
	bottom: -320px;
	left: -160px;
}

.cricket-feed-section__grain {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	mix-blend-mode: overlay;
	background-image: var( --proace-grain );
}

.cricket-feed-section .container {
	position: relative;
	z-index: 1;
}

.cricket-feed-section__header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 30px;
}

.cricket-feed-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --proace-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --proace-accent );
	margin-bottom: 12px;
}

.cricket-feed-section__title {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: clamp( 24px, 3vw, 30px );
	color: var( --proace-ice );
	margin: 0 0 8px;
}

.cricket-feed-section__sub {
	font-size: 13.5px;
	color: var( --proace-ice-muted );
	margin: 0;
}

.cricket-feed {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 50px;
}

.cricket-feed-panel {
	/* Glossy glass: a diagonal light sheen baked into the background layer
	   (clips to border-radius automatically, no overflow needed) over a
	   translucent tint, blurred so the page's own gradients/arcs show
	   through — real frosted glass instead of a solid navy card. */
	background:
		linear-gradient( 120deg, rgba( 255, 255, 255, 0.16 ) 0%, transparent 32% ),
		linear-gradient( 165deg, rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.02 ) );
	backdrop-filter: blur( 18px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 160% );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 38px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 );
	display: flex;
	flex-direction: column;
}

/* "Open Now" panel — entrance rise + a soft pulsing ring to read as live. */
@keyframes cricketFeedRise {
	from {
		opacity: 0;
		translate: 0 16px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes cricketLivePulseRing {
	0% {
		box-shadow: 0 18px 38px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 ), 0 0 0 0 rgba( 255, 90, 90, 0.35 );
	}
	70% {
		box-shadow: 0 18px 38px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 ), 0 0 0 10px rgba( 255, 90, 90, 0 );
	}
	100% {
		box-shadow: 0 18px 38px -16px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 ), 0 0 0 0 rgba( 255, 90, 90, 0 );
	}
}

.cricket-feed-panel--live {
	animation: cricketFeedRise 0.6s cubic-bezier( 0.16, 1, 0.3, 1 ) both,
		cricketLivePulseRing 2.8s ease-out 0.6s infinite;
}

.cricket-feed-panel__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 15px 20px;
	border-bottom: 1px solid var( --proace-glass-border );
}

.cricket-feed-panel__head--live svg {
	color: var( --proace-wrong );
	animation: cricketBoltPulse 2.2s ease-in-out infinite;
}

@keyframes cricketBoltPulse {
	0%,
	100% {
		opacity: 1;
		filter: drop-shadow( 0 0 0 rgba( 255, 90, 90, 0 ) );
	}
	50% {
		opacity: 0.75;
		filter: drop-shadow( 0 0 4px rgba( 255, 90, 90, 0.6 ) );
	}
}

.cricket-feed-panel__head--past svg {
	color: var( --proace-correct );
}

.cricket-feed-panel__title {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 14.5px;
	color: var( --proace-ice );
}

.cricket-feed-panel__count {
	margin-left: auto;
	font-family: var( --proace-mono );
	font-size: 10px;
	font-weight: 700;
	color: var( --proace-ice-muted );
}

.cricket-feed-panel__head--live .cricket-feed-panel__count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cricket-feed-panel__head--live .cricket-feed-panel__count::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --proace-wrong );
	animation: cricketLiveDot 1.6s ease-in-out infinite;
}

@keyframes cricketLiveDot {
	0%,
	100% {
		opacity: 1;
		transform: scale( 1 );
	}
	50% {
		opacity: 0.35;
		transform: scale( 0.7 );
	}
}

.cricket-feed-panel__body {
	padding: 6px;
	flex: 1;
}

/* The real [proace_predictions] embed inside the Open Now panel — force a
   single column and strip the card's own outer margin so it sits flush
   inside the panel instead of like a standalone page section. */
.cricket-feed-panel__body .proace-predictions-grid {
	display: block;
}

.cricket-feed-panel__body .proace-prediction {
	margin: 8px;
}

.cricket-feed-panel__body .proace-prediction__surface {
	box-shadow: none;
}

.cricket-feed-panel__empty {
	padding: 26px 20px;
	text-align: center;
	color: var( --proace-ice-muted );
	font-size: 13.5px;
	margin: 0;
}

.cricket-feed-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 20px;
	border-bottom: 1px solid var( --proace-glass-border );
	text-decoration: none;
	transition: background 0.15s ease;
}

.cricket-feed-row:hover {
	background: rgba( 255, 255, 255, 0.02 );
}

.cricket-feed-row__ic {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cricket-feed-row__ic--win {
	background: rgba( 79, 209, 139, 0.12 );
	color: var( --proace-correct );
}

.cricket-feed-row__body {
	flex: 1;
	min-width: 0;
}

.cricket-feed-row__q {
	display: block;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	color: var( --proace-ice );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cricket-feed-row__meta {
	display: block;
	font-family: var( --proace-mono );
	font-size: 9.5px;
	color: var( --proace-ice-muted );
	text-transform: uppercase;
	margin-top: 2px;
}

.cricket-feed-row__result {
	flex: 0 0 auto;
	font-family: var( --proace-mono );
	font-size: 10px;
	font-weight: 700;
	color: var( --proace-correct );
	text-transform: uppercase;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cricket-feed-panel__foot {
	padding: 13px 20px;
	text-align: center;
	background: rgba( 255, 255, 255, 0.015 );
}

.cricket-feed-panel__foot a {
	font-family: var( --proace-mono );
	font-size: 10.5px;
	font-weight: 700;
	color: var( --proace-accent );
	text-transform: uppercase;
	text-decoration: none;
}

@media ( max-width: 860px ) {
	.cricket-feed {
		grid-template-columns: 1fr;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-leaderboard-section .cricket-podium__place,
	.cricket-feed-panel--live,
	.cricket-feed-panel__head--live svg,
	.cricket-feed-panel__head--live .cricket-feed-panel__count::before {
		animation: none;
	}

	.cricket-leaderboard-section .cricket-podium__place,
	.cricket-feed-panel--live {
		opacity: 1;
		translate: 0 0;
	}
}

/* =========================================================================
 * Dedicated Leaderboard page
 * ======================================================================= */

.cricket-leaderboard-page {
	position: relative;
	min-height: 60vh;
	padding: 64px 0 80px;
	overflow: hidden;
	background:
		radial-gradient( 1100px 520px at 20% -12%, rgba( 255, 176, 32, 0.1 ), transparent 55% ),
		radial-gradient( 1000px 620px at 86% 8%, rgba( 58, 134, 224, 0.13 ), transparent 55% ),
		linear-gradient( 180deg, #0a1a33 0%, #081327 32%, #050e1d 68%, #040a14 100% );
}

.cricket-leaderboard-page__fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.cricket-leaderboard-page__arc {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.05 );
	pointer-events: none;
}

.cricket-leaderboard-page__arc--a {
	width: 860px;
	height: 860px;
	top: -540px;
	left: -220px;
}

.cricket-leaderboard-page__arc--b {
	width: 600px;
	height: 600px;
	top: -120px;
	right: -260px;
	border-color: rgba( 255, 176, 32, 0.08 );
}

.cricket-leaderboard-page__grain {
	position: absolute;
	inset: 0;
	opacity: 0.45;
	mix-blend-mode: overlay;
	background-image: var( --proace-grain );
}

.cricket-leaderboard-page .container {
	position: relative;
	z-index: 1;
}

.cricket-leaderboard-page__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.cricket-leaderboard-page__crumb {
	font-size: 12.5px;
	color: var( --proace-ice-muted );
	margin-bottom: 18px;
}

.cricket-leaderboard-page__crumb a {
	color: var( --proace-ice-muted );
	text-decoration: none;
}

.cricket-leaderboard-page__crumb a:hover {
	color: var( --proace-accent );
}

.cricket-leaderboard-page__crumb span {
	color: var( --proace-accent );
}

.cricket-leaderboard-page__title {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: clamp( 30px, 4vw, 44px );
	font-weight: 900;
	color: var( --proace-ice );
	margin: 0 0 12px;
	letter-spacing: -0.01em;
	background-image: linear-gradient( 100deg, #ffe066, var( --proace-accent ) 45%, #ff8a5c );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow( 0 0 26px rgba( 255, 176, 32, 0.2 ) );
}

.cricket-leaderboard-page__sub {
	font-size: 15px;
	color: var( --proace-ice-muted );
	margin: 0;
}

.cricket-leaderboard-page__updated {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-family: var( --proace-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --proace-correct );
	background: rgba( 79, 209, 139, 0.1 );
	border: 1px solid rgba( 79, 209, 139, 0.3 );
	padding: 5px 12px;
	border-radius: 999px;
}

.cricket-leaderboard-page__updated::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --proace-correct );
}

.cricket-leaderboard-page__empty {
	position: relative;
	text-align: center;
	color: var( --proace-ice-muted );
	font-size: 16px;
	padding: 40px 0;
}

.cricket-leaderboard-toolbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 780px;
	margin: 48px auto 16px;
}

.cricket-leaderboard-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba( 255, 255, 255, 0.035 );
	border: 1px solid var( --proace-glass-border );
	border-radius: 11px;
	padding: 10px 15px;
}

.cricket-leaderboard-search svg {
	flex: 0 0 auto;
	color: var( --proace-ice-muted );
}

.cricket-leaderboard-search input {
	border: none;
	background: none;
	outline: none;
	color: var( --proace-ice );
	font-size: 13px;
	font-family: 'PT Sans', sans-serif;
	width: 100%;
}

.cricket-leaderboard-search input::placeholder {
	color: var( --proace-ice-muted );
}

.cricket-leaderboard-count {
	font-family: var( --proace-mono );
	font-size: 11px;
	color: var( --proace-ice-muted );
	white-space: nowrap;
}

.cricket-leaderboard-count b {
	color: var( --proace-accent );
}

.cricket-leaderboard-table-wrap {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	background: rgba( 255, 255, 255, 0.025 );
	border: 1px solid var( --proace-glass-border );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 34px -16px rgba( 0, 0, 0, 0.5 );
}

.cricket-leaderboard-table__no-results {
	text-align: center;
	padding: 24px 20px;
	color: var( --proace-ice-muted );
	font-size: 13.5px;
}

.cricket-leaderboard-table {
	width: 100%;
	border-collapse: collapse;
}

.cricket-leaderboard-table th,
.cricket-leaderboard-table td {
	padding: 13px 20px;
	text-align: left;
	border-bottom: 1px solid var( --proace-glass-border );
	font-size: 13.5px;
	color: var( --proace-ice );
}

.cricket-leaderboard-table tr:last-child td {
	border-bottom: none;
}

.cricket-leaderboard-table th {
	font-family: var( --proace-mono );
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --proace-ice-muted );
	background: rgba( 255, 255, 255, 0.02 );
}

.cricket-leaderboard-table__rank {
	font-family: var( --proace-mono );
	font-weight: 700;
	width: 60px;
}

.cricket-leaderboard-table__user {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
}

.cricket-leaderboard-table__user em {
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --proace-accent );
	background: rgba( 255, 176, 32, 0.14 );
	border: 1px solid rgba( 255, 176, 32, 0.3 );
	padding: 2px 7px;
	border-radius: 999px;
}

.cricket-leaderboard-table__points {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	color: var( --proace-accent );
}

.cricket-leaderboard-row--you {
	background: rgba( 255, 176, 32, 0.06 );
}

@media ( max-width: 640px ) {
	.cricket-leaderboard-table th:nth-child(3),
	.cricket-leaderboard-table td:nth-child(3),
	.cricket-leaderboard-table th:nth-child(4),
	.cricket-leaderboard-table td:nth-child(4) {
		display: none;
	}

	.cricket-leaderboard-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.cricket-leaderboard-count {
		text-align: right;
	}
}

/* =========================================================================
 * Predictions hub page
 * ======================================================================= */

.cricket-predictions-page {
	position: relative;
	padding: 64px 0 80px;
	overflow: hidden;
	background:
		radial-gradient( 1100px 520px at 82% -12%, rgba( 58, 134, 224, 0.14 ), transparent 55% ),
		radial-gradient( 900px 560px at 12% 6%, rgba( 255, 176, 32, 0.1 ), transparent 55% ),
		linear-gradient( 180deg, #0a1a33 0%, #081327 32%, #050e1d 68%, #040a14 100% );
}

.cricket-predictions-page__fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.cricket-predictions-page__arc {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.05 );
	pointer-events: none;
}

.cricket-predictions-page__arc--a {
	width: 780px;
	height: 780px;
	top: -500px;
	right: -180px;
	border-color: rgba( 58, 134, 224, 0.09 );
}

.cricket-predictions-page__arc--b {
	width: 540px;
	height: 540px;
	bottom: -360px;
	left: -170px;
}

.cricket-predictions-page__grain {
	position: absolute;
	inset: 0;
	opacity: 0.45;
	mix-blend-mode: overlay;
	background-image: var( --proace-grain );
}

.cricket-predictions-page .container {
	position: relative;
	z-index: 1;
}

.cricket-predictions-page__live-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 16px 6px 12px;
	border-radius: 999px;
	background: rgba( 255, 107, 107, 0.1 );
	border: 1px solid rgba( 255, 107, 107, 0.32 );
	font-family: var( --proace-mono );
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ff9d9d;
	margin-bottom: 20px;
}

.cricket-predictions-page__live-badge .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --proace-wrong );
	box-shadow: 0 0 8px rgba( 255, 107, 107, 0.7 );
}

.cricket-predictions-page__title {
	position: relative;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 900;
	font-size: clamp( 30px, 4vw, 44px );
	color: var( --proace-ice );
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.cricket-predictions-page__stats {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 26px 0 8px;
}

.cricket-predictions-page__stat {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.035 );
	border: 1px solid var( --proace-glass-border );
	box-shadow: 0 8px 20px -10px rgba( 0, 0, 0, 0.5 );
}

.cricket-predictions-page__stat svg {
	color: var( --proace-accent );
	flex: 0 0 auto;
}

.cricket-predictions-page__stat b {
	display: block;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: var( --proace-ice );
	line-height: 1.1;
}

.cricket-predictions-page__stat span {
	display: block;
	font-family: var( --proace-mono );
	font-size: 9.5px;
	color: var( --proace-ice-muted );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 1px;
}

@media ( max-width: 640px ) {
	.cricket-predictions-page__stats {
		gap: 8px;
	}

	.cricket-predictions-page__stat {
		padding: 9px 14px;
	}
}

.cricket-predictions-tabs {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 40px;
	flex-wrap: wrap;
}

.cricket-predictions-tab {
	padding: 9px 20px;
	border-radius: 9px;
	border: 1px solid var( --proace-glass-border );
	background: rgba( 255, 255, 255, 0.03 );
	color: var( --proace-ice-muted );
	font-family: var( --proace-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.cricket-predictions-tab:hover {
	color: var( --proace-ice );
	background: rgba( 255, 255, 255, 0.06 );
}

.cricket-predictions-tab.active {
	background: linear-gradient( 135deg, var( --proace-blue ), var( --proace-blue-light ) );
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 8px 20px -6px rgba( 30, 80, 135, 0.6 );
}

.cricket-predictions-tab .n {
	opacity: 0.75;
	font-weight: 600;
	margin-left: 4px;
}

.proace-predictions-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px;
	max-width: 980px;
	margin: 0 auto;
}

.proace-predictions-grid .proace-prediction {
	margin: 0;
}

.proace-predictions-grid__empty {
	position: relative;
	text-align: center;
	color: var( --proace-ice-muted );
	font-size: 15px;
	padding: 40px 0;
}

@media ( max-width: 860px ) {
	.proace-predictions-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* =========================================================================
 * Plugin 0.5.0: closing-time countdown, points at stake, cancelled and
 * auto-locked states on the prediction card
 * ======================================================================= */

.proace-prediction__status {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.proace-prediction__timer {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var( --proace-mono );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --proace-ice-muted );
	white-space: nowrap;
}

.proace-prediction__timer svg {
	flex: 0 0 auto;
}

.proace-prediction__timer--soon {
	color: #ff8a5c;
	animation: proaceTimerPulse 1.6s ease-in-out infinite;
}

.proace-prediction__timer--done {
	color: var( --proace-ice-muted );
	animation: none;
}

@keyframes proaceTimerPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.proace-prediction__badge--cancelled {
	color: var( --proace-ice-muted );
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid var( --proace-glass-border );
	text-decoration: line-through;
}

.proace-prediction__result-strip--void {
	background: rgba( 234, 244, 255, 0.05 );
	border-color: var( --proace-glass-border );
	color: var( --proace-ice-muted );
}

.proace-prediction__stake {
	margin-left: auto;
	font-family: var( --proace-mono );
	font-size: 10.5px;
	font-weight: 700;
	color: var( --proace-accent );
	background: rgba( 255, 176, 32, 0.1 );
	border: 1px solid rgba( 255, 176, 32, 0.28 );
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.proace-prediction--locked .proace-prediction__option:disabled {
	opacity: 0.55;
}

.proace-prediction--locked .proace-prediction__option--mine:disabled {
	opacity: 0.95;
}

/* =========================================================================
 * Leaderboard page: ranking-period tabs, "your standing" card, streaks
 * ======================================================================= */

.cricket-leaderboard-periods {
	margin: 28px 0 24px;
}

.cricket-leaderboard-you {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 780px;
	margin: 0 auto 36px;
	padding: 14px 18px;
	background: rgba( 255, 176, 32, 0.06 );
	border: 1px solid rgba( 255, 176, 32, 0.25 );
	border-radius: 14px;
	box-shadow: 0 16px 34px -18px rgba( 0, 0, 0, 0.5 );
}

.cricket-leaderboard-you__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cricket-leaderboard-you__label {
	font-family: var( --proace-mono );
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --proace-accent );
}

.cricket-leaderboard-you__name {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var( --proace-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-leaderboard-you__stats {
	margin-left: auto;
	display: flex;
	gap: 20px;
}

.cricket-leaderboard-you__stats span {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cricket-leaderboard-you__stats b {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.1;
	color: var( --proace-ice );
}

.cricket-leaderboard-you__stats small {
	font-family: var( --proace-mono );
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --proace-ice-muted );
}

.cricket-leaderboard-you__cta {
	margin-left: auto;
	padding: 9px 16px;
	border-radius: 9px;
	background: linear-gradient( 135deg, var( --proace-accent ), #ff8a5c );
	color: #1a1204;
	font-family: var( --proace-mono );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cricket-leaderboard-you__cta:hover {
	color: #1a1204;
	transform: translateY( -1px );
	box-shadow: 0 10px 22px -8px rgba( 255, 176, 32, 0.6 );
}

.cricket-streak {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var( --proace-mono );
	font-size: 12px;
	font-weight: 700;
	color: var( --proace-ice );
}

.cricket-streak--hot {
	color: #ff8a5c;
}

.cricket-streak--none {
	color: var( --proace-ice-muted );
}

@media ( max-width: 640px ) {
	.cricket-leaderboard-you {
		flex-wrap: wrap;
	}

	.cricket-leaderboard-you__stats {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}

	.cricket-leaderboard-you__cta {
		margin-left: 0;
	}

	.proace-prediction__top {
		flex-wrap: wrap;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.proace-prediction__timer--soon {
		animation: none;
	}
}

/* =========================================================================
 * Open prediction for logged-out visitors (2026-09-17, plugin 0.8.2)
 * The options stay bright and tappable. Tapping one previews it as "your
 * pick" and turns the panel below into "Log in to lock it in". Nothing is
 * submitted until the visitor logs in.
 * ======================================================================= */

.proace-prediction--guest .proace-prediction__option {
	cursor: pointer;
	color: var( --proace-ice );
}

.proace-prediction--guest .proace-prediction__option:hover,
.proace-prediction--guest .proace-prediction__option:focus-visible {
	border-color: rgba( 255, 176, 32, 0.55 );
	background: rgba( 255, 176, 32, 0.06 );
	box-shadow: 0 10px 24px -12px rgba( 255, 176, 32, 0.45 );
	transform: translateY( -2px );
}

.proace-prediction--guest .proace-prediction__option--vs:hover .proace-prediction__crest {
	transform: scale( 1.06 );
}

.proace-prediction__crest {
	transition: transform 0.25s ease;
}

.proace-prediction__option--preview {
	border-color: var( --proace-accent ) !important;
	background: linear-gradient( 180deg, rgba( 255, 176, 32, 0.16 ), rgba( 255, 176, 32, 0.04 ) ) !important;
	box-shadow: 0 0 0 1px rgba( 255, 176, 32, 0.35 ), 0 14px 30px -14px rgba( 255, 176, 32, 0.6 ) !important;
}

.proace-prediction__option--preview::after {
	content: "Your pick";
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var( --proace-mono );
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1a1200;
	background: var( --proace-accent );
	z-index: 2;
}

.proace-prediction__options .proace-prediction__option--preview::after {
	position: static;
	margin-left: 2px;
}

/* The login panel */
.proace-prediction__guest {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	margin: 16px 0 14px;
	padding: 14px;
	border-radius: 16px;
	background:
		radial-gradient( 120% 140% at 0% 0%, rgba( 255, 176, 32, 0.16 ), transparent 55% ),
		linear-gradient( 135deg, rgba( 58, 134, 224, 0.12 ), rgba( 10, 30, 56, 0.4 ) );
	border: 1px solid rgba( 255, 176, 32, 0.32 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
	overflow: hidden;
}

.proace-prediction__guest::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 105deg, transparent 35%, rgba( 255, 255, 255, 0.07 ) 50%, transparent 65% );
	background-size: 250% 100%;
	background-position: 150% 0;
	animation: proace-guest-sweep 5s ease-in-out infinite;
	pointer-events: none;
}

.proace-prediction__guest-icon {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #1a1200;
	background: linear-gradient( 135deg, #ffd36b, #ffb020 60%, #ff8a5c );
	box-shadow: 0 8px 20px -8px rgba( 255, 176, 32, 0.8 );
}

.proace-prediction__guest-text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 180px;
	min-width: 0;
}

.proace-prediction__guest-title {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	color: var( --proace-ice );
}

.proace-prediction__guest-text small {
	font-size: 12.5px;
	line-height: 1.4;
	color: var( --proace-ice-muted );
}

.proace-prediction__guest-actions {
	position: relative;
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

.proace-prediction__guest-btn,
.proace-prediction__guest-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: none !important;
	border: 0 !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.proace-prediction__guest-btn--login,
.proace-prediction__guest-btn--login:visited {
	color: #1a1200 !important;
	background: linear-gradient( 90deg, #ffb020, #ff8a5c );
	box-shadow: 0 8px 20px -8px rgba( 255, 140, 60, 0.8 );
}

.proace-prediction__guest-btn--join,
.proace-prediction__guest-btn--join:visited {
	color: var( --proace-ice ) !important;
	background: rgba( 255, 255, 255, 0.08 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.24 );
}

.proace-prediction__guest-btn:hover,
.proace-prediction__guest-btn:focus-visible {
	transform: translateY( -2px );
}

.proace-prediction__guest-btn--login:hover,
.proace-prediction__guest-btn--login:focus-visible {
	color: #1a1200 !important;
	box-shadow: 0 12px 26px -8px rgba( 255, 140, 60, 0.95 );
}

.proace-prediction__guest-btn--join:hover,
.proace-prediction__guest-btn--join:focus-visible {
	color: var( --proace-ice ) !important;
	background: rgba( 255, 255, 255, 0.16 );
}

.proace-prediction__guest-btn:focus-visible {
	outline: 2px solid var( --proace-ice );
	outline-offset: 2px;
}

/* After a pick: the panel pulses once and the lock shakes. */
.proace-prediction__guest.is-picked {
	border-color: var( --proace-accent );
	animation: proace-guest-pulse 0.9s ease-out;
}

.proace-prediction__guest.is-picked .proace-prediction__guest-icon {
	animation: proace-guest-shake 0.6s ease-in-out;
}

@keyframes proace-guest-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 255, 176, 32, 0.55 ); }
	100% { box-shadow: 0 0 0 14px rgba( 255, 176, 32, 0 ); }
}

@keyframes proace-guest-shake {
	0%, 100% { transform: rotate( 0 ); }
	25% { transform: rotate( -12deg ); }
	50% { transform: rotate( 10deg ); }
	75% { transform: rotate( -6deg ); }
}

@keyframes proace-guest-sweep {
	0%, 60% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* Narrow cards (sidebar, phones): buttons take a full row. */
@media ( max-width: 520px ) {
	.proace-prediction__guest-actions {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.proace-prediction__guest-btn {
		flex: 1;
	}
}

.cricket-sidebar-open--voting .proace-prediction__guest-actions,
.cricket-single-sidebar .proace-prediction__guest-actions {
	flex: 1 1 100%;
	margin-left: 0;
}

.cricket-sidebar-open--voting .proace-prediction__guest-btn,
.cricket-single-sidebar .proace-prediction__guest-btn {
	flex: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.proace-prediction__guest::before,
	.proace-prediction__guest.is-picked,
	.proace-prediction__guest.is-picked .proace-prediction__guest-icon {
		animation: none;
	}

	.proace-prediction--guest .proace-prediction__option:hover,
	.proace-prediction__guest-btn:hover {
		transform: none;
	}
}