:root {
	/* Typography */
	--font-heading: 'Space Grotesk', sans-serif;
	--font-body: 'Figtree', sans-serif;

	--bg-dark: #0d0d14;
	--bg-light: #f4f4f8;
	--bg-white: #ffffff;

	--text-dark: #0a0a0f;
	--text-white: #ffffff;
	--text-soft: #6b7280;
	--text-muted: #9ca3b8;

	--gold: #f5c518;
	--gold-soft: #fff9e6;
	--silver: #9ca3af;
	--bronze: #cd7f32;

	--green: #22c55e;
	--red: #ef4444;

	--border-light: #e5e7eb;
	--border-dark: #1e1e2a;

	--radius: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--max-width: 1200px;
	--nav-height: 64px;

	--shadow-sm: 0 1px 2px rgba(10, 10, 15, 0.04);
	--shadow: 0 4px 12px rgba(10, 10, 15, 0.06);
	--shadow-lg: 0 12px 32px rgba(10, 10, 15, 0.1);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Design V2 (Figma rebuild) — dark + red Kolos palette. */
	--color-red: #ba2b31;
	--color-dark: #1c1c1c;
	--color-dark-card: #2a2a2a;
	--color-dark-border: #3a3a3a;
	--color-text-dark: #434244;
	--color-text-muted: #888;
	--color-text-light: #ccc;
	--color-bg-light: #f7f7f8;
	--color-border: #e8e8e8;
}

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

html {
	font-size: 62.5%;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ! ─── BODY ───────────────────────────────────────────────── */
body {
	margin: 0;
	padding: 0;
	background: var(--bg-light);
	color: var(--text-dark);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

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

button {
	font-family: inherit;
	cursor: pointer;
}

main {
	animation: page-fade-in 0.3s var(--ease);
}

:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #9ca3b8 #f4f4f8;
}

*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-track {
	background: #f4f4f8;
}

*::-webkit-scrollbar-thumb {
	background-color: #9ca3b8;
	border-radius: 999px;
}

@keyframes page-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---- Layout (.container, .layout-wrapper) ---- */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.container_1620 {
	max-width: 1620px;
}

.cnt_wp {
	display: flex;
}

.date-section .container {
	/* Sticky child needs a non-clipping ancestor — keep .container
       free of overflow. The sticky scope is the .date-section, so
       each day's header sticks only while that day is in view. */
	padding-top: 0;
	padding-bottom: 0;
}

/* ---- Typography ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

.section-title,
.match-score,
.btn,
.tag,
.standings-group-title {
	font-family: var(--font-heading);
}

h1 {
	font-size: clamp(36px, 5vw, 64px);
}
h2 {
	font-size: clamp(28px, 3.5vw, 44px);
}
h3 {
	font-size: clamp(20px, 2.2vw, 28px);
}
h4 {
	font-size: 18px;
}

p {
	margin: 0 0 1em;
}

code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: rgba(13, 13, 20, 0.06);
	padding: 2px 6px;
	border-radius: 6px;
}

/* ---- Utilities (.tag, .flash, .copy-btn, .text-center, .muted, .section) ---- */
.muted {
	color: var(--text-soft);
}

.flash-wrap {
	right: 0;
	background: var(--bg-light);
	padding: 16px 0 0;
	position: fixed;
	bottom: 0;
	z-index: 1;
}

.flash {
	border-radius: var(--radius);
	padding: 14px 18px;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid;
}

.flash-success {
	background: #ecfdf5;
	color: #065f46;
	border-color: #a7f3d0;
}

.flash-error {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fecaca;
}

.flash-info {
	background: #eff6ff;
	color: #1e40af;
	border-color: #bfdbfe;
}

.flash-warning {
	background: #fffbeb;
	color: #92400e;
	border-color: #fde68a;
}

.section {
	padding: 96px 0;
}

.section-dark {
	background: var(--bg-dark);
	color: var(--text-white);
}

.section-light {
	background: var(--bg-light);
	color: var(--text-dark);
}

.section-white {
	background: var(--bg-white);
	color: var(--text-dark);
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.section-title {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(28px, 3.5vw, 44px);
	letter-spacing: -0.01em;
	margin: 0;
	text-transform: uppercase;
}

.section-link {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.18s var(--ease);
}

.section-link:hover {
	border-bottom-color: var(--gold);
	color: var(--gold);
}

.tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--bg-light);
	color: var(--text-dark);
	border: 1px solid var(--border-light);
}

.tag-round {
	background: #1a0533;
	color: #fff;
	font-weight: 700;
	border-color: #1a0533;
	letter-spacing: 0.06em;
}

.tag-round--final {
	background: var(--gold);
	color: #000;
	border-color: var(--gold);
}

.tag-round--semi {
	background: #7c3aed;
	color: #fff;
	border-color: #7c3aed;
}

.tag-round--quarter {
	background: #4b5563;
	color: #fff;
	border-color: #4b5563;
}

.tag-group {
	background: var(--bg-light);
	color: var(--text-dark);
}

.tag-saved {
	background: var(--gold-soft);
	color: #92660a;
	border-color: #fde68a;
}

.tag-finished {
	background: #ecfdf5;
	color: #065f46;
	border-color: #a7f3d0;
}

.tag-locked {
	background: #f3f4f6;
	color: var(--text-soft);
	border-color: var(--border-light);
}

.tag-tbd {
	background: #f3f4f6;
	color: #6b7280;
	border-color: #d1d5db;
}

.tag-live {
	background: var(--red);
	color: var(--text-white);
	border-color: var(--red);
}

.tag-live::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--text-white);
	border-radius: 50%;
	margin-right: 6px;
	animation: live-pulse 1.4s ease-in-out infinite;
}

.predict-tags .tag {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
	border-color: var(--border-dark);
}

.predict-tags .tag-finished {
	background: #064e3b;
	color: #a7f3d0;
	border-color: #065f46;
}

.tag-pen {
	background: #fef3c7;
	color: #92400e;
}

.tag-og {
	background: #fee2e2;
	color: #991b1b;
}

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

.tag-upcoming {
	background: var(--bg-light);
	color: var(--text-soft);
	border-color: var(--border-light);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.copy-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border-light);
	border-radius: 6px;
	color: var(--text-soft);
	cursor: pointer;
	transition:
		background 0.18s var(--ease),
		border-color 0.18s var(--ease),
		color 0.18s var(--ease);
	font-family: inherit;
}

.copy-btn:hover {
	background: var(--bg-light);
	border-color: var(--text-dark);
	color: var(--text-dark);
}

.copy-btn:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.copy-btn__text {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.copy-btn--large {
	width: auto;
	height: 36px;
	padding: 0 14px;
}

.copy-btn--on-pill {
	border-color: rgba(13, 13, 20, 0.25);
	color: rgba(13, 13, 20, 0.7);
}

.copy-btn--on-pill:hover {
	background: rgba(13, 13, 20, 0.1);
	border-color: var(--text-dark);
	color: var(--text-dark);
}

.copy-btn--on-dark {
	border-color: rgba(13, 13, 20, 0.3);
	color: rgba(13, 13, 20, 0.75);
}

.copy-btn--on-dark:hover {
	background: rgba(13, 13, 20, 0.1);
	border-color: var(--text-dark);
	color: var(--text-dark);
}

.copy-btn::after {
	content: 'Copied!';
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--text-dark);
	color: var(--text-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.18s var(--ease),
		transform 0.18s var(--ease);
}

.copy-btn::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--text-dark);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s var(--ease);
}

.copy-btn.is-copied::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.copy-btn.is-copied::before {
	opacity: 1;
}

/* ---- Navigation (.nav-v2) ---- */
.nav-v2 {
	width: 100%;
	background: transparent;
	color: #fff;
	position: fixed;
	top: 0;
	z-index: 100;
	/* border-bottom: 1px solid #000; */
	padding: 30px 0 0 0;
}

.nav-v2.is-scrolled {
	display: none;
}

.nav-v2__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 78px;
	gap: 24px;
}

.nav-v2__brand {
	display: flex;
	align-items: center;
	color: #fff;
	flex-shrink: 0;
	width: 172px;
}

.nav-v2__brand:hover {
	color: #fff;
}

.nav-v2__logo {
	height: 42px;
	width: auto;
	object-fit: contain;
}

.nav-v2__toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-v2__toggle-bar {
	display: block;
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
	transition:
		background 0.18s var(--ease),
		transform 0.18s var(--ease);
}

.nav-v2__toggle-bar::before,
.nav-v2__toggle-bar::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #fff;
	transition:
		transform 0.18s var(--ease),
		top 0.18s var(--ease),
		opacity 0.18s var(--ease);
}

.nav-v2__toggle-bar::before {
	top: -7px;
}

.nav-v2__toggle-bar::after {
	top: 7px;
}

.nav-v2__toggle[aria-expanded='true'] .nav-v2__toggle-bar {
	background: transparent;
}

.nav-v2__toggle[aria-expanded='true'] .nav-v2__toggle-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-v2__toggle[aria-expanded='true'] .nav-v2__toggle-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.nav-v2__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 32px;
}

.nav-v2__center,
.nav-v2__right {
	display: flex;
	align-items: center;
	gap: 28px;
}

.nav-v2__center {
	margin-left: auto;
	margin-right: auto;
}

.nav-v2__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1.78px;
	text-transform: uppercase;
	color: #fff;
	transition: color 0.18s var(--ease);
}

.nav-v2__link:hover {
	color: var(--color-red);
}

.nav-v2__link.is-active {
	color: var(--color-red);
}

.nav-v2__link--login {
	color: #fff;
}

.nav-v2__user {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
	padding: 6px 14px;
	border: 1px solid var(--color-dark-border);
	border-radius: 999px;
	background: var(--color-dark-card);
}

.nav-v2__user:hover {
	color: #fff;
	border-color: var(--color-red);
}

.nav-v2__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 11px 22px;
	border-radius: 12px;
	border: 0;
	cursor: pointer;
	transition:
		background 0.18s var(--ease),
		transform 0.05s var(--ease),
		color 0.18s var(--ease);
	text-decoration: none;
	width: 115px;
}

.nav-v2__btn--primary {
	background: var(--color-red);
	color: #fff;
}

.nav-v2__btn--primary:hover {
	background: #a02428;
	color: #fff;
}

.nav-v2__btn--primary:active {
	transform: translateY(1px);
}

.nav-v2__logout-form {
	margin: 0;
}

/* ---- Hero (.hv2-hero, .hv2-countdown) ---- */
.hv2-hero {
	position: relative;
	background: var(--color-dark);
	color: #fff;
	height: 100vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: 5rem;
}

.hv2-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hv2-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.hv2-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		-90deg,
		rgba(28, 28, 28, 0) 31%,
		rgba(28, 28, 28, 1) 80%
	);
}

.hv2-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	/* padding-top: 80px;
	padding-bottom: 80px; */
}

.hv2-hero__copy {
	max-width: 720px;
	width: 40%;
	min-width: 320px;
}

.hv2-hero__eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 2.9px;
	text-transform: uppercase;
	color: var(--color-red);
	margin: 0 0 24px;
}

.hv2-hero__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12rem;
	line-height: 1;
	letter-spacing: -2px;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 28px;
}

.hv2-hero__sub {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-text-light);
	max-width: 650px;
	margin: 0 0 40px;
}

.hv2-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 64px;
}

.hv2-countdown {
	max-width: 540px;
}

.hv2-countdown__label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	color: #c9c9c9;
	margin: 0 0 16px;
}

.hv2-countdown__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.hv2-countdown__box {
	background: var(--color-dark-card);
	border: 1px solid var(--color-dark-border);
	border-radius: 5px;
	height: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.hv2-countdown__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: #fff;
}

.hv2-countdown__cap {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #c9c9c9;
}

.hv2-countdown__live {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	margin: 0;
}

/* ---- Sections (.hv2-section, .hv2-head, .hv2-eyebrow) ---- */
.hv2-section {
	padding: 96px 0;
}

.hv2-section-left {
	width: 70%;
}

.hv2-section-right {
	margin-left: auto;
	width: 25%;
}

.hv2-section--white {
	background: #fff;
}

.hv2-section--grey {
	background: var(--color-bg-light);
}

.hv2-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.hv2-head--centred {
	justify-content: center;
	text-align: center;
}

.hv2-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--color-red);
	margin: 0 0 10px;
}

.hv2-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	color: var(--color-text-dark);
	margin: 0;
}

.hv2-link {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	color: var(--color-red);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hv2-link:hover {
	color: #a02428;
}

.hv2-empty {
	text-align: center;
	padding: 40px;
	color: var(--color-text-muted);
	font-size: 16px;
}

/* ---- Upcoming Matches (.hv2-matches) ---- */
.hv2-matches {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv2-match {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 15px;
	padding: 27px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	transition:
		transform 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.hv2-match:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(28, 28, 28, 0.06);
}

.hv2-match__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hv2-match__group {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hv2-match__date {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-text-dark);
}

.hv2-match__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.hv2-match__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.hv2-match__team .flag,
.hv2-match__team img {
	font-size: 36px;
	line-height: 1;
}

.hv2-match__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--color-text-dark);
	line-height: 1.2;
}

.hv2-match__centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hv2-match__vs {
	display: inline-block;
	background: var(--color-dark);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	padding: 5px 12px;
	border-radius: 999px;
}

.hv2-match__time {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.hv2-match__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--color-border);
	padding-top: 18px;
}

.hv2-match__venue {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-text-muted);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Leaderboard home (.hv2-lb) ---- */
.hv2-lb-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 15px;
	padding: 28px;
}

.hv2-lb__header,
.hv2-lb__row {
	display: grid;
	grid-template-columns: 50px minmax(180px, 1.4fr) 2fr 80px;
	gap: 20px;
	align-items: center;
}

.hv2-lb__header {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding: 0 0 16px;
	border-bottom: 1px solid var(--color-border);
}

.hv2-lb__col-pts {
	text-align: right;
}

.hv2-lb__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hv2-lb__row {
	padding: 18px 0;
	border-bottom: 1px solid var(--color-border);
}

.hv2-lb__row:last-child {
	border-bottom: none;
}

.hv2-lb__row.is-me {
	background: rgba(186, 43, 49, 0.04);
	border-radius: 10px;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0 -12px;
}

.hv2-lb__rank {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.hv2-lb__rank.is-gold {
	color: var(--color-red);
}

.hv2-lb__rank.is-silver {
	color: #c0c0c0;
}

.hv2-lb__rank.is-bronze {
	color: #cd7f32;
}

.hv2-lb__player {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.hv2-lb__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	background: #e6e6e6;
	color: #555;
	flex-shrink: 0;
}

.hv2-lb__avatar.is-gold {
	background: var(--color-red);
	color: #fff;
}

.hv2-lb__name {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text-dark);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hv2-lb__you {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-red);
	padding: 3px 8px;
	border-radius: 4px;
}

.hv2-lb__progress {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: #ececec;
	overflow: hidden;
}

.hv2-lb__bar {
	display: block;
	height: 100%;
	background: var(--color-red);
	transition: width 0.6s var(--ease);
}

.hv2-lb__pts {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--color-text-dark);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hv2-lb__cta {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.hv2-lb__cta p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-text-dark);
}

/* ---- Leaderboard page (.lb-*, .podium-*) ---- */
.lb-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.lb-table thead th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-soft);
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-light);
}

.lb-table .num,
.lb-table th.num {
	text-align: right;
}

.lb-table tbody tr {
	transition: background 0.15s var(--ease);
}

.lb-table tbody tr:nth-child(even) {
	background: var(--bg-light);
}

.lb-table tbody tr:hover {
	background: #efeff4;
}

.lb-table tbody tr.is-me {
	background: var(--gold-soft);
}

.lb-table tbody tr.is-me:hover {
	background: #fff3cc;
}

.lb-table td {
	padding: 16px;
	border-bottom: 1px solid var(--border-light);
	font-size: 15px;
}

.lb-rank {
	width: 64px;
	font-weight: 900;
	font-size: 18px;
	color: var(--text-soft);
}

.lb-rank-1 {
	color: var(--gold);
}

.lb-rank-2 {
	color: var(--silver);
}

.lb-rank-3 {
	color: var(--bronze);
}

.lb-medal {
	font-size: 22px;
	line-height: 1;
	margin-right: 4px;
}

.lb-player {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lb-player-name {
	font-weight: 700;
	color: var(--text-dark);
	font-size: 15px;
}

.lb-player-id {
	font-size: 12px;
	color: var(--text-soft);
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
}

.lb-points {
	font-weight: 900;
	font-size: 18px;
	color: var(--text-dark);
}

.lb-progress-cell {
	width: 200px;
	min-width: 140px;
}

.lb-progress {
	height: 8px;
	background: var(--border-light);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.lb-progress-fill {
	height: 100%;
	background: var(--gold);
	border-radius: var(--radius-pill);
	transition: width 0.4s var(--ease);
}

.lb-you-tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	margin-left: 8px;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--text-dark);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lb-empty-cta {
	margin-top: 24px;
	padding: 24px;
	background: var(--bg-light);
	border-radius: var(--radius);
	text-align: center;
}

.podium {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: 16px;
	align-items: end;
	max-width: 880px;
	margin: 0 auto;
}

.podium-card {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 32px 20px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	border-top: 4px solid var(--silver);
	transition:
		transform 0.2s var(--ease),
		box-shadow 0.2s var(--ease);
}

.podium-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.podium-1 {
	border-top-color: var(--gold);
	padding: 48px 20px;
}

.podium-2 {
	border-top-color: var(--silver);
}

.podium-3 {
	border-top-color: var(--bronze);
}

.podium-medal {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 12px;
}

.podium-name {
	font-weight: 900;
	font-size: 18px;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.podium-id {
	font-size: 12px;
	color: var(--text-soft);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	margin-bottom: 16px;
}

.podium-points {
	font-size: 36px;
	font-weight: 900;
	color: var(--gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.podium-points-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-top: 4px;
}

.lb-progress-fill {
	width: 0;
}

.lb-progress-fill--w0 {
	width: 0;
}

.lb-progress-fill--w1 {
	width: 1%;
}

.lb-progress-fill--w2 {
	width: 2%;
}

.lb-progress-fill--w3 {
	width: 3%;
}

.lb-progress-fill--w4 {
	width: 4%;
}

.lb-progress-fill--w5 {
	width: 5%;
}

.lb-progress-fill--w6 {
	width: 6%;
}

.lb-progress-fill--w7 {
	width: 7%;
}

.lb-progress-fill--w8 {
	width: 8%;
}

.lb-progress-fill--w9 {
	width: 9%;
}

.lb-progress-fill--w10 {
	width: 10%;
}

.lb-progress-fill--w11 {
	width: 11%;
}

.lb-progress-fill--w12 {
	width: 12%;
}

.lb-progress-fill--w13 {
	width: 13%;
}

.lb-progress-fill--w14 {
	width: 14%;
}

.lb-progress-fill--w15 {
	width: 15%;
}

.lb-progress-fill--w16 {
	width: 16%;
}

.lb-progress-fill--w17 {
	width: 17%;
}

.lb-progress-fill--w18 {
	width: 18%;
}

.lb-progress-fill--w19 {
	width: 19%;
}

.lb-progress-fill--w20 {
	width: 20%;
}

.lb-progress-fill--w21 {
	width: 21%;
}

.lb-progress-fill--w22 {
	width: 22%;
}

.lb-progress-fill--w23 {
	width: 23%;
}

.lb-progress-fill--w24 {
	width: 24%;
}

.lb-progress-fill--w25 {
	width: 25%;
}

.lb-progress-fill--w26 {
	width: 26%;
}

.lb-progress-fill--w27 {
	width: 27%;
}

.lb-progress-fill--w28 {
	width: 28%;
}

.lb-progress-fill--w29 {
	width: 29%;
}

.lb-progress-fill--w30 {
	width: 30%;
}

.lb-progress-fill--w31 {
	width: 31%;
}

.lb-progress-fill--w32 {
	width: 32%;
}

.lb-progress-fill--w33 {
	width: 33%;
}

.lb-progress-fill--w34 {
	width: 34%;
}

.lb-progress-fill--w35 {
	width: 35%;
}

.lb-progress-fill--w36 {
	width: 36%;
}

.lb-progress-fill--w37 {
	width: 37%;
}

.lb-progress-fill--w38 {
	width: 38%;
}

.lb-progress-fill--w39 {
	width: 39%;
}

.lb-progress-fill--w40 {
	width: 40%;
}

.lb-progress-fill--w41 {
	width: 41%;
}

.lb-progress-fill--w42 {
	width: 42%;
}

.lb-progress-fill--w43 {
	width: 43%;
}

.lb-progress-fill--w44 {
	width: 44%;
}

.lb-progress-fill--w45 {
	width: 45%;
}

.lb-progress-fill--w46 {
	width: 46%;
}

.lb-progress-fill--w47 {
	width: 47%;
}

.lb-progress-fill--w48 {
	width: 48%;
}

.lb-progress-fill--w49 {
	width: 49%;
}

.lb-progress-fill--w50 {
	width: 50%;
}

.lb-progress-fill--w51 {
	width: 51%;
}

.lb-progress-fill--w52 {
	width: 52%;
}

.lb-progress-fill--w53 {
	width: 53%;
}

.lb-progress-fill--w54 {
	width: 54%;
}

.lb-progress-fill--w55 {
	width: 55%;
}

.lb-progress-fill--w56 {
	width: 56%;
}

.lb-progress-fill--w57 {
	width: 57%;
}

.lb-progress-fill--w58 {
	width: 58%;
}

.lb-progress-fill--w59 {
	width: 59%;
}

.lb-progress-fill--w60 {
	width: 60%;
}

.lb-progress-fill--w61 {
	width: 61%;
}

.lb-progress-fill--w62 {
	width: 62%;
}

.lb-progress-fill--w63 {
	width: 63%;
}

.lb-progress-fill--w64 {
	width: 64%;
}

.lb-progress-fill--w65 {
	width: 65%;
}

.lb-progress-fill--w66 {
	width: 66%;
}

.lb-progress-fill--w67 {
	width: 67%;
}

.lb-progress-fill--w68 {
	width: 68%;
}

.lb-progress-fill--w69 {
	width: 69%;
}

.lb-progress-fill--w70 {
	width: 70%;
}

.lb-progress-fill--w71 {
	width: 71%;
}

.lb-progress-fill--w72 {
	width: 72%;
}

.lb-progress-fill--w73 {
	width: 73%;
}

.lb-progress-fill--w74 {
	width: 74%;
}

.lb-progress-fill--w75 {
	width: 75%;
}

.lb-progress-fill--w76 {
	width: 76%;
}

.lb-progress-fill--w77 {
	width: 77%;
}

.lb-progress-fill--w78 {
	width: 78%;
}

.lb-progress-fill--w79 {
	width: 79%;
}

.lb-progress-fill--w80 {
	width: 80%;
}

.lb-progress-fill--w81 {
	width: 81%;
}

.lb-progress-fill--w82 {
	width: 82%;
}

.lb-progress-fill--w83 {
	width: 83%;
}

.lb-progress-fill--w84 {
	width: 84%;
}

.lb-progress-fill--w85 {
	width: 85%;
}

.lb-progress-fill--w86 {
	width: 86%;
}

.lb-progress-fill--w87 {
	width: 87%;
}

.lb-progress-fill--w88 {
	width: 88%;
}

.lb-progress-fill--w89 {
	width: 89%;
}

.lb-progress-fill--w90 {
	width: 90%;
}

.lb-progress-fill--w91 {
	width: 91%;
}

.lb-progress-fill--w92 {
	width: 92%;
}

.lb-progress-fill--w93 {
	width: 93%;
}

.lb-progress-fill--w94 {
	width: 94%;
}

.lb-progress-fill--w95 {
	width: 95%;
}

.lb-progress-fill--w96 {
	width: 96%;
}

.lb-progress-fill--w97 {
	width: 97%;
}

.lb-progress-fill--w98 {
	width: 98%;
}

.lb-progress-fill--w99 {
	width: 99%;
}

.lb-progress-fill--w100 {
	width: 100%;
}

.lb-your-position-section {
	padding: 24px 0 0;
	background: var(--bg-light);
}

.lb-your-position {
	background: linear-gradient(135deg, #ffe57f 0%, var(--gold) 100%);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	box-shadow: var(--shadow);
	color: var(--text-dark);
}

.lb-your-position__label {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #6b4a05;
	margin-bottom: 12px;
}

.lb-your-position__body {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 24px;
}

.lb-your-position__rank {
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 900;
	line-height: 1;
	color: var(--text-dark);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	min-width: 64px;
}

.lb-your-position__player {
	min-width: 0;
}

.lb-your-position__name {
	font-size: 18px;
	font-weight: 900;
	color: var(--text-dark);
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}

.lb-your-position__id {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6b4a05;
}

.lb-your-position__id code {
	background: rgba(13, 13, 20, 0.1);
	color: var(--text-dark);
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
}

.lb-your-position__stat-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b4a05;
}

.lb-your-position__stat-value {
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
	color: var(--text-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	margin-top: 4px;
}

.lb-search {
	margin: 0 0 24px;
}

.lb-search__label {
	display: none;
}

.lb-search__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.lb-search__input {
	flex: 1 1 320px;
	height: 44px;
	border: 1px solid var(--border-light);
	background: var(--bg-white);
	border-radius: 8px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text-dark);
	transition:
		border-color 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.lb-search__input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

.lb-search__submit {
	white-space: nowrap;
}

.lb-clear-search {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.lb-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 0;
}

.lb-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lb-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	background: var(--bg-white);
	color: var(--text-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	transition:
		background 0.18s var(--ease),
		border-color 0.18s var(--ease),
		color 0.18s var(--ease);
}

.lb-page:hover {
	border-color: var(--text-dark);
	background: var(--bg-light);
	color: var(--text-dark);
}

.lb-page.is-current {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--text-dark);
	cursor: default;
}

.lb-page--gap {
	border: 0;
	background: transparent;
	color: var(--text-soft);
	cursor: default;
}

.lb-page--nav {
	padding: 0 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
}

.lb-page.is-disabled {
	color: var(--text-muted);
	background: var(--bg-light);
	cursor: not-allowed;
	pointer-events: none;
}

.lb-empty-cta__line {
	margin: 0 0 12px;
	font-weight: 700;
}

/* ---- Stadium divider (.hv2-stadium) ---- */
.hv2-stadium {
	width: 100%;
	height: 920px;
	overflow: hidden;
}

.hv2-stadium img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Scoring (.hv2-points) ---- */
.hv2-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hv2-point {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 15px;
	padding: 32px;
	text-align: left;
	transition:
		transform 0.18s var(--ease),
		border-color 0.18s var(--ease);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hv2-point:hover {
	transform: translateY(-2px);
	border-color: var(--color-red);
}

.hv2-point__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 70px;
	line-height: 1;
	color: var(--color-red);
	margin-bottom: 16px;
}

.hv2-point__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-text-dark);
	margin: 0 0 8px;
}

.hv2-point__desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin: 0;
}

/* ---- How It Works (.hv2-steps) ---- */
.hv2-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.hv2-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hv2-step__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: var(--color-red);
	padding-bottom: 16px;
	border-bottom: 2px solid #ccc;
}

.hv2-step__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--color-text-dark);
	margin: 0;
}

.hv2-step__desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	color: #777;
	margin: 0;
}

/* ---- Prize (.hv2-prize) ---- */
.hv2-prize {
	position: relative;
	padding: 96px 0;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.hv2-prize__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hv2-prize__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv2-prize__overlay {
	position: absolute;
	inset: 0;
	background: rgba(186, 43, 49, 0.9);
}

.hv2-prize__inner {
	position: relative;
	z-index: 1;
}

.hv2-prize__trophy {
	font-size: 80px;
	line-height: 1;
	margin-bottom: 16px;
}

.hv2-prize__eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.9;
	margin: 0 0 14px;
}

.hv2-prize__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 80px;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.hv2-prize__desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: #fff;
	max-width: 720px;
	margin: 0 auto 32px;
}

/* ---- FAQ (.hv2-faq) ---- */
.hv2-faq {
	max-width: 976px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hv2-faq__item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
}

.hv2-faq__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 20px;
	color: var(--color-text-dark);
}

.hv2-faq__summary::-webkit-details-marker {
	display: none;
}

.hv2-faq__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	position: relative;
	transition: transform 0.2s var(--ease);
}

.hv2-faq__icon::before,
.hv2-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--color-red);
	transition: opacity 0.2s var(--ease);
}

.hv2-faq__icon::before {
	left: 50%;
	top: 2px;
	bottom: 2px;
	width: 2px;
	transform: translateX(-50%);
}

.hv2-faq__icon::after {
	top: 50%;
	left: 2px;
	right: 2px;
	height: 2px;
	transform: translateY(-50%);
}

.hv2-faq__item[open] .hv2-faq__icon::before {
	opacity: 0;
}

.hv2-faq__answer {
	padding: 0 24px 22px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.faq-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 14px;
}
.faq-table th {
	text-align: left;
	padding: 10px 12px;
	background: var(--color-bg-light);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-bottom: 2px solid var(--color-border);
}
.faq-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-dark);
	line-height: 1.5;
}
.faq-table tr:last-child td {
	border-bottom: none;
}
@media (max-width: 640px) {
	.faq-table {
		font-size: 12px;
	}
	.faq-table th,
	.faq-table td {
		padding: 8px;
	}
}

/* ---- Footer (.footer-v2) ---- */
.footer-v2 {
	background: var(--color-dark);
	color: #fff;
	padding: 32px 0;
}

.footer-v2__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.footer-v2__brand {
	display: inline-flex;
	align-items: center;
	width: 12rem;
}

.footer-v2__logo {
	height: 36px;
	width: auto;
	object-fit: contain;
}

.footer-v2__links {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: #fff;
}

.footer-v2__links a {
	color: #fff;
	transition: color 0.18s var(--ease);
}

.footer-v2__links a:hover {
	color: var(--color-red);
}

.footer-v2__sep {
	color: var(--color-text-muted);
}

.footer-v2__copy {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	color: var(--color-text-light);
	margin-top: 1rem;
}

/* ---- Buttons (.btn, .hv2-btn, .nav-v2__btn) ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-dark);
	line-height: 1;
	min-height: 44px;
	cursor: pointer;
	transition:
		transform 0.18s var(--ease),
		box-shadow 0.18s var(--ease),
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		border-color 0.18s var(--ease);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	color: var(--text-dark);
}

.btn-primary {
	background: var(--gold);
	color: var(--text-dark);
	border-color: var(--gold);
}

.btn-primary:hover {
	background: #ffd133;
	border-color: #ffd133;
	color: var(--text-dark);
}

.btn-ghost {
	background: transparent;
	color: var(--text-dark);
	border-color: var(--border-light);
}

.btn-ghost:hover {
	border-color: var(--text-dark);
	color: var(--text-dark);
}

.btn-ghost-light,
.btn-ghost-on-dark {
	background: transparent;
	color: var(--text-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn-ghost-light:hover,
.btn-ghost-on-dark:hover {
	border-color: var(--text-white);
	color: var(--text-white);
}

.btn-sm {
	padding: 8px 16px;
	font-size: 12px;
	min-height: 36px;
}

.btn-lg {
	padding: 16px 28px;
	font-size: 15px;
	min-height: 52px;
}

.btn-block {
	display: flex;
	width: 100%;
}

.hv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.5px;
	padding: 15px 36px;
	border-radius: 12px;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		transform 0.05s var(--ease);
	text-decoration: none;
	white-space: nowrap;
}

.hv2-btn:active {
	transform: translateY(1px);
}

.hv2-btn--red {
	background: var(--color-red);
	color: #fff;
	border-color: var(--color-red);
}

.hv2-btn--red:hover {
	background: #a02428;
	color: #fff;
}

.hv2-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: var(--color-red);
}

.hv2-btn--ghost:hover {
	background: var(--color-red);
	color: #fff;
}

.hv2-btn--outline-red {
	background: transparent;
	color: var(--color-red);
	border-color: var(--color-red);
	font-size: 15px;
	padding: 12px 24px;
}

.hv2-btn--outline-red:hover {
	background: var(--color-red);
	color: #fff;
}

.hv2-btn--outline-white {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.hv2-btn--outline-white:hover {
	background: #fff;
	color: var(--color-red);
}

.hv2-btn--sm {
	font-size: 13px;
	padding: 10px 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ---- Forms (.auth-*, .form-*, .field) ---- */
.auth-page {
	background: var(--bg-dark);
	min-height: calc(100vh - 10rem);
	padding: 17rem 0 0 0;
}

.auth-card {
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	padding: 48px;
	max-width: 480px;
	margin: 0 auto;
	box-shadow: var(--shadow);
}

.auth-card h1 {
	font-size: 32px;
	font-weight: 900;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.auth-card .form-intro {
	color: var(--text-soft);
	font-size: 15px;
	margin: 0 0 28px;
}

.auth-card-wide {
	max-width: 640px;
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 6px;
}

.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='tel'],
.form-group input[type='date'],
.form-group input[type='password'],
.form-group input[type='number'],
.form-group select,
.form-group textarea {
	width: 100%;
	height: 48px;
	border: 1px solid var(--border-light);
	background: var(--bg-white);
	border-radius: 8px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text-dark);
	transition:
		border-color 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.form-group textarea {
	padding: 12px 14px;
	height: auto;
	min-height: 96px;
	resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.checkbox-row {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--text-dark) !important;
	line-height: 1.5;
}

.checkbox-row input[type='checkbox'] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	accent-color: var(--gold);
	flex-shrink: 0;
}

.field-error {
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
	margin: 6px 0 0;
}

.field-hint {
	color: var(--text-soft);
	font-size: 13px;
	margin: 6px 0 0;
}

.form-actions {
	margin-top: 24px;
}

.form-foot {
	margin-top: 20px;
	text-align: center;
	color: var(--text-soft);
	font-size: 14px;
}

.form-foot a {
	color: var(--gold);
	font-weight: 700;
}

.form-divider {
	text-align: center;
	margin: 20px 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text-soft);
	position: relative;
}

.form-divider::before,
.form-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	width: calc(50% - 80px);
	height: 1px;
	background: var(--border-light);
}

.form-divider::before {
	left: 0;
}

.form-divider::after {
	right: 0;
}

.form-divider span {
	background: var(--bg-white);
	padding: 0 12px;
}

.hp-field {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	height: 1px;
	width: 1px;
}

/* ---- Matches page (.match-row, .date-section, .match-filter-*, .match-card legacy) ---- */
.match-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.match-card {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition:
		transform 0.2s var(--ease),
		box-shadow 0.2s var(--ease);
}

.match-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.match-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.match-meta-tags {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.match-date {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}

.match-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 8px 0;
}

.match-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.match-flag {
	font-size: 44px;
	line-height: 1;
}

.match-team-name {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--text-dark);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.match-vs {
	font-weight: 900;
	color: var(--text-soft);
	font-size: 14px;
	letter-spacing: 0.1em;
}

.match-score {
	color: var(--text-dark);
	font-size: 22px;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.match-kickoff {
	font-size: 14px;
	color: var(--text-soft);
	text-align: center;
	border-top: 1px solid var(--border-light);
	padding-top: 14px;
	font-variant-numeric: tabular-nums;
}

.match-venue {
	font-size: 12px;
	color: var(--text-soft);
	margin-top: 4px;
}

.match-cta {
	margin-top: auto;
	color: var(--gold);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: right;
}

.match-cta:hover {
	color: var(--gold);
}

.match-result,
.my-result {
	text-align: center;
	padding: 16px 0 24px;
}

.result-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 12px;
}

.match-filter-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.match-filter-tabs {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
	background: rgba(255, 255, 255, 0.08);
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	max-width: 100%;
}

.match-filter-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		border-color 0.18s var(--ease);
	user-select: none;
	white-space: nowrap;
}

.match-filter-tab:hover {
	color: var(--gold);
	border-color: rgba(245, 197, 24, 0.4);
}

.match-filter-radio:focus-visible + .match-filter-tab,
.match-filter-tab:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

#filter-today:checked ~ .date-section:not([data-today='1']) {
	display: none;
}

#filter-upcoming:checked ~ .date-section:not([data-statuses~='upcoming']) {
	display: none;
}

#filter-finished:checked ~ .date-section:not([data-statuses~='finished']) {
	display: none;
}

#filter-group:checked ~ .date-section:not([data-stages~='group']) {
	display: none;
}

#filter-knockout:checked ~ .date-section:not([data-stages~='knockout']) {
	display: none;
}

#filter-upcoming:checked
	~ .date-section
	.match-row:not([data-status='upcoming']) {
	display: none;
}

#filter-finished:checked
	~ .date-section
	.match-row:not([data-status='finished']) {
	display: none;
}

#filter-group:checked ~ .date-section .match-row:not([data-stage='group']) {
	display: none;
}

#filter-knockout:checked
	~ .date-section
	.match-row:not([data-stage='knockout']) {
	display: none;
}

.date-section {
	background: var(--bg-white);
	padding: 0;
}

.date-header {
	position: sticky;
	top: var(--nav-height);
	z-index: 5;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 18px 0 12px;
	background: var(--bg-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-dark);
	border-top: 1px solid var(--border-light);
	border-bottom: 0;
}

.date-header__label {
	color: var(--text-dark);
	font-weight: 700;
}

.date-header__sep {
	color: var(--text-muted);
	font-weight: 400;
}

.date-header__count {
	color: var(--text-soft);
	font-weight: 500;
	letter-spacing: 0;
}

.matches-empty {
	background: var(--bg-light);
	padding: 64px 0;
}

.match-list {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	margin: 0 0 24px;
	overflow: visible;
}

.match-row {
	display: block;
	padding: 12px 16px;
	background: transparent;
	border-bottom: 1px solid var(--border-light);
	transition: background 0.18s var(--ease);
}

.match-row:last-child {
	border-bottom: 0;
}

.match-row:hover {
	background: var(--bg-light);
}

.match-row__main {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 56px;
}

.match-row__home,
.match-row__away {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.match-row__home {
	justify-content: flex-start;
}

.match-row__away {
	justify-content: flex-end;
}

.match-row__logo {
	flex-shrink: 0;
	line-height: 1;
	display: inline-flex;
}

.match-row__logo .team-logo,
.match-row__logo .team-logo--sm {
	width: 32px;
	height: 32px;
}

.match-row__flag {
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
}

.match-row__team-name {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.match-row__center {
	min-width: 110px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.match-row__score {
	font-size: 22px;
	font-weight: 900;
	color: var(--text-dark);
	letter-spacing: -0.01em;
	line-height: 1;
	display: inline-block;
}

.match-row__time {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.1;
}

.match-row__time-mut {
	font-size: 15px;
	font-weight: 800;
	color: var(--text-dark);
	letter-spacing: 0.04em;
}

.match-row__time-utc {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-soft);
	letter-spacing: 0.04em;
}

.match-row__vs {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-soft);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.match-row__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 3px;
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}

.match-row__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #10b981;
	animation: live-pulse 1.4s ease-in-out infinite;
}

.match-row__sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	min-height: 22px;
}

.match-row__sub-left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.match-row__sub-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.match-row__dot {
	color: var(--text-muted);
	font-weight: 400;
}

.match-row__venue-text {
	color: var(--text-soft);
	font-size: 12.5px;
}

.match-row__round-text {
	color: var(--text-dark);
	font-size: 12.5px;
	font-weight: 700;
}

.match-row__cta {
	color: var(--gold);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.match-row__cta:hover {
	color: var(--gold);
	text-decoration: underline;
}

.match-row__cta--edit {
	background: transparent;
	border: 1.5px solid var(--gold);
	color: var(--gold);
	padding: 3px 10px;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 11px;
}

.match-row__cta--edit:hover {
	background: var(--gold);
	color: var(--bg-dark);
	text-decoration: none;
}

.match-row--tbd .match-row__team-name,
.match-row__team-name--placeholder {
	color: var(--text-soft);
	font-style: italic;
	font-weight: 500;
}

.match-row__hint {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-style: italic;
	color: var(--text-soft);
	text-align: center;
}

/* ---- Predict form (.predict-*, .player-picker, .scorer-*, .tp-*, .point-pill) ---- */
.tournament-progress {
	margin-top: 16px;
}

.tp-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.tp-label strong {
	color: var(--text-white);
	font-weight: 700;
}

.tp-bar {
	height: 6px;
	background: var(--border-dark);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.tp-fill {
	height: 100%;
	background: var(--gold);
	border-radius: var(--radius-pill);
}

.predict-fixture {
	background: var(--bg-dark);
	color: var(--text-white);
	padding: 64px 0 56px;
}

.predict-fixture-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.predict-tags {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.predict-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 32px;
	align-items: center;
	width: 100%;
	max-width: 720px;
	margin: 16px 0 8px;
}

.predict-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.predict-flag {
	font-size: 88px;
	line-height: 1;
}

.predict-team-name {
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: 900;
	margin: 0;
	color: var(--text-white);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.predict-vs {
	font-size: 22px;
	font-weight: 900;
	color: var(--text-muted);
	letter-spacing: 0.1em;
}

.predict-meta {
	font-size: 14px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.predict-meta time {
	color: var(--text-white);
	font-weight: 700;
}

.predict-body {
	background: var(--bg-light);
	padding: 64px 0;
}

.predict-card {
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 48px;
	/* max-width: 720px; */
	margin: 0 auto;
}

.predict-form-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 24px;
	text-align: center;
}

.score-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}

.score-side {
	background: var(--bg-light);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
}

.score-side-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-dark);
	margin-bottom: 12px;
}

.score-select {
	width: 100%;
	height: 64px;
	text-align: center;
	text-align-last: center;
	-webkit-appearance: none;
	appearance: none;
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 32px;
	color: var(--text-dark);
	padding: 0 12px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition:
		border-color 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.score-select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

.scorer-divider {
	border: 0;
	border-top: 1px solid var(--border-light);
	margin: 32px 0 24px;
}

.scorer-hint {
	font-size: 13px;
	color: var(--text-soft);
	margin-bottom: 16px;
	text-align: center;
}

.scorer-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.scorer-side .scorer-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scorer-side select,
.scorer-side input[type='text'] {
	width: 100%;
	height: 44px;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	background: var(--bg-white);
}

.player-picker {
	display: block;
}

.player-picker__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.3;
}

.player-picker__team {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.player-picker__team .team-logo,
.player-picker__team .team-flag {
	width: 24px;
	height: 24px;
	font-size: 22px;
}

.player-picker__team-name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-dark);
}

.player-picker__hint {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-soft);
	margin-left: 4px;
}

.player-picker__tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--border-light);
	/* Horizontal scroll on narrow viewports so the tab strip never
       wraps awkwardly; the scrollbar is hidden on desktop because
       the strip fits inside the card width. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.player-picker__tabs::-webkit-scrollbar {
	display: none;
}

.picker-tab {
	flex: 0 0 auto;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 8px 14px;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-soft);
	cursor: pointer;
	border-radius: 6px 6px 0 0;
	border-bottom: 2px solid transparent;
	transition:
		color 120ms ease,
		border-color 120ms ease,
		background-color 120ms ease;
	white-space: nowrap;
}

.picker-tab:hover {
	color: var(--text-dark);
}

.picker-tab.is-active {
	color: var(--gold);
	font-weight: 700;
	border-bottom-color: var(--gold);
}

.picker-tab:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.player-picker__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 10px;
	/* Each picker scrolls independently if its squad is long — the
       tabs and summary above/below stay anchored. ~60vh leaves room
       for the rest of the form without trapping the user. */
	max-height: 60vh;
	overflow-y: auto;
	transition: opacity 120ms ease;
}

.player-picker__grid.is-fading {
	opacity: 0;
}

.player-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px;
	max-width: 80px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--bg-white);
	cursor: pointer;
	transition:
		border-color 120ms ease,
		background-color 120ms ease,
		transform 80ms ease;
	text-align: center;
	user-select: none;
}

.player-card:hover {
	border-color: var(--gold);
	background: var(--gold-soft);
}

.player-card:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.player-card.is-selected {
	border-color: var(--gold);
	background: var(--gold-soft);
}

.player-card.is-selected::after {
	content: '✓';
	position: absolute;
	top: 2px;
	right: 4px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 11px;
	font-weight: 900;
	color: var(--text-dark);
	background: var(--gold);
	border-radius: 50%;
}

.player-card.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.player-card__photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.player-card__number {
	font-size: 11px;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.player-card__name {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.picker-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 14px;
	background: var(--bg-light);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	font-size: 13px;
	transition:
		background-color 150ms ease,
		border-color 150ms ease;
}

.picker-summary:has(.picker-selected-chip) {
	background: var(--gold-soft);
	border-color: var(--gold);
}

.picker-summary__label {
	font-weight: 700;
	color: var(--text-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
}

.picker-selected-names {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.picker-selected-chip {
	display: inline-block;
	color: var(--text-dark);
	font-weight: 700;
}

.picker-selected-empty {
	color: var(--text-soft);
	font-style: italic;
}

/* ---- Goal slots + inline picker panel (slot-based scorer picker) ---- */

.goal-slots {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.goal-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 12px;
	border: 2px solid var(--border-light);
	border-radius: 10px;
	background: var(--bg-white);
	transition:
		border-color 150ms ease,
		background-color 150ms ease,
		box-shadow 150ms ease;
}

.goal-slot.is-empty {
	border-style: dashed;
	background: var(--bg-light);
}

.goal-slot.is-filled {
	border-color: var(--gold);
	background: var(--gold-soft);
}

.goal-slot.is-active {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px var(--gold-soft);
}

.goal-slot__label {
	flex: 0 0 auto;
	min-width: 56px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.goal-slot.is-filled .goal-slot__label {
	color: var(--text-dark);
}

.goal-slot__placeholder {
	flex: 1 1 auto;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-soft);
	cursor: pointer;
	text-align: left;
	transition: color 120ms ease;
}

.goal-slot__placeholder:hover,
.goal-slot__placeholder:focus-visible {
	color: var(--text-dark);
	outline: none;
}

.goal-slot__card {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
	min-width: 0;
}

.goal-slot__card:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 6px;
}

.goal-slot__photo {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-white);
}

.goal-slot__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.goal-slot__number {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}

.goal-slot__clear {
	flex: 0 0 28px;
	appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	color: var(--text-soft);
	cursor: pointer;
	transition:
		background-color 120ms ease,
		color 120ms ease;
}

.goal-slot__clear:hover,
.goal-slot__clear:focus-visible {
	background: var(--red);
	color: var(--text-white);
	outline: none;
}

.player-picker-panel {
	margin-top: 14px;
	padding: 14px;
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(13, 13, 20, 0.06);
}

.player-picker-panel__title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

.player-picker-empty {
	margin: 14px 0 0;
	padding: 14px;
	background: var(--bg-light);
	border: 1px dashed var(--border-light);
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-soft);
}

/* ---- V2 Kolos scorer picker (BEM redesign — overrides above) ---- */

.scorer-section {
	display: block;
}

.scorer-section__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.scorer-section__header .team-logo,
.scorer-section__header .team-flag {
	width: 20px;
	height: 20px;
	font-size: 18px;
}

.scorer-section__team-name {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-dark);
}

.scorer-section__count {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: #888;
}

.scorer-section--empty {
	margin: 0;
	padding: 16px;
	background: #f7f7f8;
	border: 0;
	border-radius: 10px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 13px;
	font-style: italic;
	color: var(--text-soft);
}

/* Slot rows — base reset + modifier states */
.goal-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	transition:
		border-color 150ms ease,
		background-color 150ms ease,
		box-shadow 150ms ease;
}

.goal-slot--empty {
	background: #f7f7f8;
	border: 1.5px dashed #e8e8e8;
}

.goal-slot--empty:hover,
.goal-slot--empty:focus-within {
	background: var(--bg-white);
	border-style: solid;
	border-color: #ba2b31;
}

.goal-slot--filled {
	background: var(--bg-white);
	border: 2px solid var(--gold);
}

.goal-slot--active {
	box-shadow: 0 0 0 3px var(--gold-soft);
}

.goal-slot__label {
	flex: 0 0 auto;
	min-width: 48px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #888;
}

.goal-slot--filled .goal-slot__label {
	color: var(--text-dark);
	font-weight: 600;
}

.goal-slot__pick-cta {
	margin-left: auto;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: #ba2b31;
	cursor: pointer;
	transition: opacity 120ms ease;
}

.goal-slot__pick-cta:hover,
.goal-slot__pick-cta:focus-visible {
	opacity: 0.85;
	outline: none;
}

.goal-slot__player {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
	min-width: 0;
}

.goal-slot__player:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 6px;
}

.goal-slot__photo {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-light);
}

.goal-slot__name {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.goal-slot__number {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}

.goal-slot__clear {
	flex: 0 0 20px;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--text-soft);
	cursor: pointer;
	transition:
		background-color 120ms ease,
		color 120ms ease;
}

.goal-slot__clear:hover,
.goal-slot__clear:focus-visible {
	background: #ba2b31;
	color: var(--text-white);
	outline: none;
}

/* Inline picker panel — hidden by default, relocated by JS to sit
   immediately after the clicked goal-slot (inside .goal-slots) so the
   picker appears between slots. Closing returns it to its home position
   after the slots list. */
.goal-picker-panel {
	display: none;
	margin: 8px 0;
	padding: 16px;
	background: var(--bg-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.goal-picker-panel--open {
	display: block;
	animation: picker-slide-in 0.2s ease;
}

@keyframes picker-slide-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.goal-picker-panel__header {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #ba2b31;
}

.real-score,
.my-score {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: 24px;
	font-weight: 900;
	color: var(--text-dark);
	font-variant-numeric: tabular-nums;
}

.real-score strong,
.my-score strong {
	font-size: 40px;
	color: var(--gold);
	letter-spacing: -0.02em;
}

.real-scorers ul,
.my-scorers ul {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}

.real-scorers li,
.my-scorers li {
	padding: 4px 0;
	font-size: 14px;
}

.points-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 16px 0;
}

.point-pill {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--bg-light);
	border: 1px solid var(--border-light);
	font-size: 13px;
	color: var(--text-soft);
}

.point-pill strong {
	color: var(--text-dark);
	margin: 0 4px;
}

.point-pill-total {
	background: var(--gold-soft);
	border-color: #fde68a;
	color: #92660a;
}

.point-pill-total strong {
	color: #6b4a05;
}

.pick-correct {
	color: var(--green);
}

.pick-correct .pick-mark {
	font-weight: 900;
}

.pick-wrong {
	color: var(--red);
}

.pick-mark {
	margin-left: 6px;
	font-weight: 900;
}

.scorer-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
	background: var(--bg-light);
	color: var(--text-soft);
}

.my-scorers-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 12px;
	text-align: left;
}

.predict-back {
	text-align: center;
	margin: 32px 0 0;
	font-weight: 700;
	font-size: 14px;
}

.predict-back a {
	color: var(--text-soft);
}

.predict-back a:hover {
	color: var(--gold);
}

.score-block {
	background: var(--bg-light);
	border-radius: var(--radius);
	padding: 16px;
	text-align: center;
}

.score-block-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 6px;
}

.score-block-value {
	font-size: 22px;
	font-weight: 900;
	color: var(--text-dark);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.score-block-points {
	background: var(--gold-soft);
}

.score-block-points .score-block-value strong {
	color: var(--gold);
	font-size: 32px;
}

.score-block-sub {
	display: block;
	font-size: 11px;
	color: var(--text-soft);
	margin-top: 2px;
}

.scorer-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--border-light);
}

.scorer-compare-side h4 {
	font-size: 14px;
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.scorer-compare-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	font-size: 14px;
}

.scorer-compare-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-soft);
	margin: 0 0 6px;
	font-weight: 700;
}

.scorer-compare ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.scorer-compare li {
	padding: 3px 0;
}

.player-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.player-meta-grid .label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 4px;
}

.player-meta-grid .value {
	font-size: 15px;
	color: var(--text-dark);
	font-weight: 700;
}

/* ---- My Predictions (.my-pred-*, .pending-pred-*, .all-caught-up) ---- */
.all-caught-up {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-left: 4px solid #10b981;
	border-radius: var(--radius);
	padding: 20px 24px;
	color: #065f46;
}

.all-caught-up__emoji {
	font-size: 36px;
	line-height: 1;
	flex-shrink: 0;
}

.all-caught-up__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 900;
	color: #065f46;
	letter-spacing: -0.01em;
}

.all-caught-up__sub {
	margin: 0;
	font-size: 14px;
	color: #047857;
}

.pending-pred-section {
	padding-top: 0;
}

.pending-pred-list {
	background: var(--bg-white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.pending-pred-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 20px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border-light);
	transition: background 0.15s var(--ease);
}

.pending-pred-row:last-child {
	border-bottom: 0;
}

.pending-pred-row:hover {
	background: var(--bg-light);
}

.pending-pred-row__match {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--text-dark);
}

.pending-pred-row__flag {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.pending-pred-row__team {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.pending-pred-row__score {
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	color: var(--gold);
	font-size: 16px;
	padding: 0 6px;
}

.pending-pred-row__meta {
	color: var(--text-soft);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pending-pred-row__pick-label {
	color: var(--text-dark);
	font-weight: 700;
}

.pending-pred-row__sep {
	margin: 0 4px;
	color: var(--text-muted);
}

.pending-pred-row__edit {
	flex-shrink: 0;
}

.my-pred-stats {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.my-pred-stat {
	background: transparent;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	padding: 16px 20px;
}

.my-pred-stat__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.my-pred-stat__value {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	color: var(--text-white);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.my-pred-stat__sub {
	font-size: 0.55em;
	font-weight: 700;
	color: var(--text-muted);
	margin-left: 4px;
}

.my-pred-tabs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-white);
	padding: 6px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-pill);
	margin: 0 0 32px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.my-pred-tabs::-webkit-scrollbar {
	display: none;
}

.my-pred-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 18px;
	border-radius: var(--radius-pill);
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-dark);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		border-color 0.18s var(--ease);
}

.my-pred-tab:hover {
	background: var(--bg-light);
	color: var(--text-dark);
}

.my-pred-tab.is-active {
	background: var(--gold);
	color: var(--text-dark);
	border-color: var(--gold);
	cursor: default;
}

.my-pred-group {
	margin-bottom: 32px;
}

.my-pred-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 12px;
	border-bottom: 2px solid var(--text-dark);
	margin-bottom: 12px;
}

.my-pred-group__title {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dark);
	margin: 0;
}

.my-pred-group__count {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}

.my-pred-rows {
	background: var(--bg-white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.my-pred-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: center;
	gap: 20px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border-light);
	border-left: 4px solid transparent;
	transition: background 0.15s var(--ease);
}

.my-pred-row:last-child {
	border-bottom: 0;
}

.my-pred-row:hover {
	background: var(--bg-light);
}

.my-pred-row--correct {
	border-left-color: #10b981;
}

.my-pred-row--wrong {
	border-left-color: var(--red);
}

.my-pred-row--pending {
	border-left-color: var(--border-light);
}

.my-pred-row__icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.my-pred-row__match {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--text-dark);
}

.my-pred-row__flag {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.my-pred-row__team {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.my-pred-row__score {
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	color: var(--text-dark);
	font-size: 16px;
	padding: 0 6px;
	letter-spacing: -0.01em;
}

.my-pred-row__vs {
	color: var(--text-soft);
	font-weight: 700;
	font-size: 13px;
	text-transform: lowercase;
	padding: 0 6px;
}

.my-pred-row__pick {
	color: var(--text-soft);
	font-size: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.my-pred-row__pick strong {
	color: var(--text-dark);
	font-size: 15px;
	margin-left: 4px;
}

.my-pred-row__points {
	text-align: right;
	min-width: 72px;
}

.my-pred-row__points-value {
	font-weight: 900;
	font-size: 15px;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.my-pred-row__points-value.is-positive {
	color: var(--gold);
}

.my-pred-row__points-value.is-zero {
	color: var(--text-soft);
}

.my-pred-row__points-value.is-pending {
	color: var(--text-muted);
}

.my-pred-row__verdict {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 88px;
	justify-content: flex-end;
	flex-shrink: 0;
}

.my-pred-row__verdict-label {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid;
}

.my-pred-row__verdict-label--exact {
	background: var(--gold-soft);
	color: #6b4a05;
	border-color: #fde68a;
}

.my-pred-row__verdict-label--correct {
	background: #ecfdf5;
	color: #065f46;
	border-color: #a7f3d0;
}

.my-pred-row__verdict-label--wrong {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fecaca;
}

.my-pred-row__date {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.my-pred-row__edit {
	color: var(--gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.my-pred-row__edit:hover {
	color: var(--gold);
	text-decoration: underline;
}

.my-pred-empty-cta {
	margin: 16px 0 0;
}

/* ---- Dashboard (.dash-*, .stat-*) ---- */
.dash-hero {
	background: var(--bg-dark);
	color: var(--text-white);
	padding: 20rem 0 5rem;
}

.dash-greeting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 36px;
}

.dash-eyebrow {
	color: var(--gold);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
}

.dash-title {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 900;
	color: var(--text-white);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1;
}

.dash-id-pill {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--text-dark);
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.stat-card {
	background: transparent;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	padding: 20px;
}

.stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.stat-value {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 900;
	line-height: 1;
	color: var(--text-white);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.dash-id-pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 6px 0 12px;
	gap: 8px;
}

.dash-id-pill__text {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* ---- Profile (.profile-*) ---- */
.profile-readonly {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 32px;
	margin-bottom: 32px;
	box-shadow: var(--shadow-sm);
}

.profile-form {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 32px;
	margin-bottom: 24px;
	box-shadow: var(--shadow-sm);
}

.profile-form h2 {
	font-size: 22px;
	margin: 0 0 8px;
}

.profile-player-id {
	background: var(--bg-white);
	border-radius: var(--radius);
	padding: 24px 32px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-sm);
	border-left: 4px solid var(--gold);
}

.profile-player-id__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 12px;
}

.profile-player-id__row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.profile-player-id__code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 700;
	color: var(--text-dark);
	background: var(--bg-light);
	padding: 8px 16px;
	border-radius: 8px;
	letter-spacing: 0.04em;
}

.profile-player-id__hint {
	margin: 12px 0 0;
	color: var(--text-soft);
	font-size: 13px;
}

.profile-form__lede {
	margin: 0 0 16px;
}

/* ---- Standings (.standings-*, .home-standings, .knockout-*) ---- */
.standings-tab-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.standings-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.standings-tab {
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	user-select: none;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.standings-tab:hover {
	background: rgba(255, 255, 255, 0.18);
}

.standings-tab-radio:focus-visible
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	+ *
	.standings-tab,
.standings-tab-radio:focus-visible ~ .page-header-strip .standings-tab {
	/* Keyboard focus ring on the tab label is wired through to the
	   hidden radio so power users see where focus lives. */
}

.standings-section {
	display: none;
}

#standings-tab-A:checked ~ .standings-section[data-group='A'],
#standings-tab-B:checked ~ .standings-section[data-group='B'],
#standings-tab-C:checked ~ .standings-section[data-group='C'],
#standings-tab-D:checked ~ .standings-section[data-group='D'],
#standings-tab-E:checked ~ .standings-section[data-group='E'],
#standings-tab-F:checked ~ .standings-section[data-group='F'],
#standings-tab-G:checked ~ .standings-section[data-group='G'],
#standings-tab-H:checked ~ .standings-section[data-group='H'],
#standings-tab-I:checked ~ .standings-section[data-group='I'],
#standings-tab-J:checked ~ .standings-section[data-group='J'],
#standings-tab-K:checked ~ .standings-section[data-group='K'],
#standings-tab-L:checked ~ .standings-section[data-group='L'],
#standings-tab-TP:checked ~ .standings-section[data-group='TP'] {
	display: block;
}

#standings-tab-A:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-A'],
#standings-tab-B:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-B'],
#standings-tab-C:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-C'],
#standings-tab-D:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-D'],
#standings-tab-E:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-E'],
#standings-tab-F:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-F'],
#standings-tab-G:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-G'],
#standings-tab-H:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-H'],
#standings-tab-I:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-I'],
#standings-tab-J:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-J'],
#standings-tab-K:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-K'],
#standings-tab-L:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-L'],
#standings-tab-TP:checked
	~ .page-header-strip
	.standings-tab[for='standings-tab-TP'] {
	background: var(--gold);
	color: #000;
}

.standings-page .standings-section {
	padding: 32px 0;
}

.standings-group-title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.standings-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	background: #fff;
}

.standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 640px;
}

.standings-table thead {
	background: var(--bg-light);
}

.standings-table th,
.standings-table td {
	padding: 12px 10px;
	text-align: left;
	border-bottom: 1px solid var(--border-light);
}

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

.standings-table tbody tr:last-child td {
	border-bottom: 0;
}

.standings-row {
	border-left: 4px solid transparent;
}

.standings-row--qualify {
	border-left-color: #10b981;
	background: rgba(16, 185, 129, 0.05);
}

.standings-row--maybe {
	border-left-color: #f59e0b;
	background: rgba(245, 158, 11, 0.05);
}

.standings-team {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.standings-team__logo {
	width: 24px;
	height: 24px;
	object-fit: contain;
	flex-shrink: 0;
}

.standings-team__name {
	font-weight: 600;
}

.standings-form-col {
	white-space: nowrap;
}

.standings-form-chip {
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--text-soft);
	margin-right: 2px;
}

.standings-form-chip--w {
	background: #10b981;
}

.standings-form-chip--d {
	background: #6b7280;
}

.standings-form-chip--l {
	background: #dc2626;
}

.standings-legend {
	margin: 14px 0 0;
	color: var(--text-soft);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.standings-legend__dot {
	display: inline-block;
	width: 12px;
	height: 4px;
	border-radius: 2px;
}

.standings-legend__dot--qualify {
	background: #10b981;
}

.standings-legend__dot--maybe {
	background: #f59e0b;
}

.standings-third-place-card {
	background: #fff;
	border: 1px solid var(--border);
	border-left: 4px solid #f59e0b;
	border-radius: 10px;
	padding: 28px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	text-align: center;
}

.standings-third-place-card__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
	color: var(--text);
}

.standings-third-place-card p {
	margin: 6px 0;
	color: var(--text-soft);
	font-size: 15px;
	line-height: 1.5;
}

.knockout-stage-section {
	padding: 16px 0 48px;
}

.knockout-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.knockout-card__title {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.knockout-card__rounds {
	display: flex;
	flex-direction: column;
}

.knockout-row {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 2fr;
	gap: 12px;
	align-items: center;
	padding: 12px 4px;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}

.knockout-row:last-child {
	border-bottom: none;
}

.knockout-row__round {
	font-weight: 700;
	color: var(--text);
}

.knockout-row__dates {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.knockout-row__status {
	color: var(--text-soft);
	font-size: 13px;
}

.knockout-card__footnote {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	color: var(--text-soft);
	font-size: 13px;
	text-align: center;
}

.standings-table--mini {
	min-width: 360px;
}

.standings-table-wrap--mini {
	margin-top: 8px;
}

.home-standings-caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	max-width: 400px;
	margin: 0 0 10px auto; /* right-align with the card */
	gap: 12px;
}

.home-standings-caption__label {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.home-standings-caption__link {
	font-size: 12px;
	font-weight: 700;
	color: var(--gold);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.home-standings-caption__link:hover {
	text-decoration: underline;
}

.home-standings {
	position: relative;
	background: var(--bg-light);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	padding: 16px;
	max-width: 400px;
	margin-left: auto;
	height: 39rem;
}

.home-standings__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.home-standings__eyebrow {
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.home-standings__nav-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.home-standings__nav {
	width: 28px;
	height: 28px;
	border: 1px solid var(--border-light);
	border-radius: 50%;
	background: transparent;
	color: var(--text-soft);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.home-standings__nav:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: #000;
}

.home-standings__nav:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.home-standings__group-title {
	min-width: 64px;
	text-align: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-dark);
	font-variant-numeric: tabular-nums;
}

.home-standings__col-header {
	display: grid;
	grid-template-columns: 14px 1fr repeat(4, 22px) 28px;
	align-items: center;
	gap: 6px;
	padding: 6px 4px;
	border-bottom: 1px solid var(--border-light);
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.home-standings__col {
	white-space: nowrap;
}

.home-standings__col--team {
	grid-column: 1 / span 2;
	padding-left: 4px;
}

.home-standings__col--num {
	text-align: center;
}

.home-standings__col--pts {
	text-align: right;
}

.home-standings__viewport {
	overflow: hidden;
	height: 245px;
}

.home-standings__track {
	display: flex;
	transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	touch-action: pan-y;
}

.home-standings__slide {
	flex: 0 0 100%;
	min-width: 0;
	box-sizing: border-box;
}

.home-standings__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.home-standings__row {
	display: grid;
	grid-template-columns: 14px 1fr repeat(4, 22px) 28px;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 4px;
	border-bottom: 1px solid var(--border-light);
	font-variant-numeric: tabular-nums;
}

/* .home-standings__row span {
	color: #fff;
} */

.home-standings__row:last-child {
	border-bottom: 0;
}

.home-standings__rank {
	font-weight: 700;
	font-size: 12px;
	color: var(--text-soft);
	text-align: center;
}

.home-standings__team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding-left: 4px;
}

.home-standings__logo {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-light);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.home-standings__logo--placeholder {
	font-size: 13px;
	line-height: 1;
}

.home-standings__name {
	font-weight: 600;
	font-size: 13px;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.home-standings__num {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
}

.home-standings__pts {
	text-align: right;
	font-weight: 800;
}

.home-standings__footnote {
	margin: 10px 0 0;
	font-size: 11px;
	font-style: italic;
	color: var(--text-soft);
	text-align: center;
	letter-spacing: 0.02em;
}

.home-standings__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
}

.home-standings__dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--border-light);
	padding: 0;
	cursor: pointer;
	transition:
		background 0.15s ease,
		transform 0.15s ease;
}

.home-standings__dot:hover {
	background: var(--text-soft);
}

.home-standings__dot:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.home-standings__dot.is-active {
	background: var(--gold);
	transform: scale(1.25);
}

/* ---- Misc (.page-header-strip, .pw-banner, .error-*, .empty-*, .sticky-cta) ---- */
.nav-link.is-active {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.page-header-strip {
	background: var(--bg-dark);
	color: var(--text-white);
	padding: 20rem 0 5rem;
}

.page-header-title {
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 900;
	color: var(--text-white);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

.page-header-subtitle {
	color: var(--text-muted);
	font-size: 16px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.error-page {
	text-align: center;
	padding: 96px 0;
}

.error-code {
	font-size: clamp(80px, 14vw, 160px);
	font-weight: 900;
	color: var(--gold);
	line-height: 1;
	margin: 0 0 16px;
	letter-spacing: -0.04em;
}

.empty-state {
	background: var(--bg-white);
	border: 1px dashed var(--border-light);
	border-radius: var(--radius);
	padding: 48px 24px;
	text-align: center;
	color: var(--text-soft);
}

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

#filter-all:checked ~ section label[for='filter-all'],
#filter-today:checked ~ section label[for='filter-today'],
#filter-upcoming:checked ~ section label[for='filter-upcoming'],
#filter-finished:checked ~ section label[for='filter-finished'],
#filter-group:checked ~ section label[for='filter-group'],
#filter-knockout:checked ~ section label[for='filter-knockout'] {
	background: var(--gold);
	color: var(--bg-dark);
	border-color: var(--gold);
}

.empty-today {
	display: none;
}

#filter-today:checked ~ .empty-today {
	display: block;
	padding: 48px 0;
}

[hidden] {
	display: none !important;
}

.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: var(--bg-dark);
	color: var(--text-white);
	border-top: 1px solid var(--border-dark);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
	padding: 12px 16px;
	animation: sticky-cta-rise 0.35s var(--ease);
}

.sticky-cta__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sticky-cta__msg {
	flex: 1 1 auto;
	margin: 0;
	color: var(--text-white);
	font-weight: 700;
	font-size: 15px;
}

.sticky-cta__msg-icon {
	color: var(--gold);
	margin-right: 8px;
}

.sticky-cta__actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sticky-cta__close {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	font-family: inherit;
	transition:
		background 0.18s var(--ease),
		color 0.18s var(--ease),
		border-color 0.18s var(--ease);
}

.sticky-cta__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-white);
	border-color: var(--text-white);
}

.sticky-cta__close:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

body:has(.sticky-cta) {
	padding-bottom: 80px;
}

.pw-banner {
	background: linear-gradient(90deg, #fff8e1 0%, #fff3c4 100%);
	border-bottom: 2px solid #f59e0b;
	color: #1a0533;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.pw-banner[hidden] {
	display: none !important;
}

.pw-banner__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	flex-wrap: wrap;
}

.pw-banner__icon {
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
}

.pw-banner__copy {
	flex: 1 1 280px;
	min-width: 0;
}

.pw-banner__title {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.pw-banner__sub {
	margin: 2px 0 0;
	font-size: 13px;
	color: #4a3a18;
}

.pw-banner__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

/* ---- Team logos (.team-logo, .team-flag, .countdown-*) ---- */
.countdown-box {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	padding: 16px 8px;
	text-align: center;
	transition:
		background 0.18s var(--ease),
		border-color 0.18s var(--ease);
}

.countdown-box:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(245, 197, 24, 0.3);
}

.countdown-value {
	font-family: var(--font-heading);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 900;
	color: var(--text-white);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.countdown-label {
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-top: 8px;
}

.team-logo {
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
}

.team-logo--sm {
	width: 24px;
	height: 24px;
}

.team-logo--md {
	width: 40px;
	height: 40px;
}

.team-logo--lg {
	width: 64px;
	height: 64px;
}

.team-logo--xl {
	width: 80px;
	height: 80px;
}

.team-flag--fallback {
	font-size: 1.6em;
	line-height: 1;
	vertical-align: middle;
}

/* ---- Keyframes ---- */
@keyframes live-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

@keyframes sticky-cta-rise {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.container {
		padding: 0 16px;
	}
}

@media (max-width: 768px) {
	.lb-progress-cell {
		display: none;
	}

	.lb-table td {
		padding: 14px 10px;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.dash-hero {
		padding: 48px 0 40px;
	}

	.cnt_wp {
		flex-direction: column;
	}

	.hv2-section-left {
		width: 100%;
	}

	.hv2-section-right {
		width: 100%;
		margin-top: 3rem;
	}
}

@media (max-width: 768px) {
	.predict-teams {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.predict-vs {
		font-size: 16px;
	}

	.predict-flag {
		font-size: 64px;
	}
}

@media (max-width: 768px) {
	.predict-body {
		padding: 40px 0;
	}

	.predict-card {
		padding: 32px 24px;
		border-radius: var(--radius);
	}
}

@media (max-width: 640px) {
	.score-row,
	.scorer-row {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 641px) {
	.scorer-row .scorer-side + .scorer-side {
		border-left: 1px solid var(--border-light);
		padding-left: 24px;
	}
}

@media (max-width: 640px) {
	.scorer-row .scorer-side + .scorer-side {
		border-top: 1px solid var(--border-light);
		padding-top: 20px;
	}

	.player-picker__grid {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
		gap: 8px;
		/* Phones: let the picker grow naturally instead of nesting a
	           second scroll area inside the page scroll. */
		max-height: none;
		overflow-y: visible;
	}

	.player-card {
		max-width: 72px;
		padding: 6px;
	}

	.player-card__photo {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 640px) {
	.my-scorers-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.auth-card {
		padding: 32px 24px;
	}
}

@media (max-width: 640px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.scorer-compare {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.player-meta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.player-meta-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.match-row {
		padding: 12px;
	}

	.match-row__main {
		gap: 10px;
		min-height: 48px;
	}

	.match-row__team-name {
		font-size: 13.5px;
		letter-spacing: 0;
	}

	.match-row__logo .team-logo,
	.match-row__logo .team-logo--sm {
		width: 28px;
		height: 28px;
	}

	.match-row__center {
		min-width: 84px;
	}

	.match-row__score {
		font-size: 19px;
	}

	.match-row__time-mut {
		font-size: 13px;
	}

	.match-row__time-utc {
		font-size: 10px;
	}

	.match-row__sub {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.match-row__venue-text,
	.match-row__round-text {
		font-size: 11.5px;
	}
}

@media (max-width: 768px) {
	.match-filter-tabs {
		width: 100%;
		justify-content: center;
	}

	.match-filter-tab {
		flex: 1 1 auto;
		padding: 0 10px;
		min-height: 36px;
	}

	.date-header {
		font-size: 12px;
		padding: 16px 0 12px;
	}

	.match-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 12px 16px;
		min-height: 0;
	}

	.match-row__teams {
		grid-template-columns: 1fr auto 1fr;
		gap: 12px;
	}

	.match-row__flag {
		font-size: 24px;
	}

	.match-row__team-name {
		font-size: 14px;
	}

	.match-row__score {
		font-size: 20px;
	}

	.match-row__meta {
		justify-content: center;
		gap: 8px;
	}
}

@media (max-width: 768px) {
	.lb-your-position-section {
		padding: 16px 0 0;
	}
}

@media (max-width: 768px) {
	.lb-your-position {
		padding: 16px;
	}

	.lb-your-position__body {
		grid-template-columns: auto 1fr;
		gap: 16px;
	}

	.lb-your-position__stat {
		text-align: left;
	}

	.lb-your-position__stat-value {
		font-size: 22px;
	}
}

@media (max-width: 640px) {
	.lb-pagination {
		gap: 8px;
	}

	.lb-page--nav {
		padding: 0 12px;
		font-size: 12px;
	}

	.lb-page {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
	}
}

@media (max-width: 640px) {
	.profile-player-id {
		padding: 20px 20px;
	}
}

@media (max-width: 640px) {
	.countdown-box {
		padding: 12px 4px;
	}

	.countdown-value {
		font-size: clamp(22px, 7vw, 30px);
	}

	.countdown-label {
		font-size: 9px;
		letter-spacing: 0.14em;
	}
}

@media (max-width: 640px) {
	.sticky-cta {
		padding: 12px;
	}

	.sticky-cta__inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.sticky-cta__msg {
		width: 100%;
		text-align: center;
		font-size: 14px;
	}

	.sticky-cta__actions {
		width: 100%;
		justify-content: space-between;
	}

	.sticky-cta__actions .btn {
		flex: 1 1 auto;
	}

	body:has(.sticky-cta) {
		padding-bottom: 128px;
	}
}

@media (max-width: 640px) {
	.pending-pred-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 12px 16px;
	}

	.pending-pred-row__match {
		flex-wrap: wrap;
	}

	.pending-pred-row__edit {
		justify-self: stretch;
	}

	.pending-pred-row__edit.btn {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.my-pred-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.my-pred-stat {
		padding: 14px 16px;
	}
}

@media (max-width: 640px) {
	.my-pred-tabs {
		width: 100%;
	}

	.my-pred-tab {
		padding: 0 14px;
		font-size: 12px;
	}
}

@media (max-width: 768px) {
	.my-pred-row {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			'icon match    verdict'
			'icon pick     points';
		column-gap: 12px;
		row-gap: 6px;
		padding: 12px 14px;
	}

	.my-pred-row__icon {
		grid-area: icon;
	}

	.my-pred-row__match {
		grid-area: match;
		font-size: 14px;
	}

	.my-pred-row__pick {
		grid-area: pick;
		font-size: 13px;
	}

	.my-pred-row__points {
		grid-area: points;
		min-width: 0;
	}

	.my-pred-row__verdict {
		grid-area: verdict;
		min-width: 0;
	}

	.my-pred-row__flag {
		font-size: 18px;
	}

	.my-pred-row__score {
		font-size: 14px;
		padding: 0 4px;
	}

	.my-pred-row__pick strong {
		font-size: 14px;
	}

	.my-pred-group__head {
		padding: 12px 0 10px;
	}

	.my-pred-group__title {
		font-size: 12px;
	}
}

@media (max-width: 640px) {
	.pw-banner__inner {
		gap: 10px;
	}

	.pw-banner__actions {
		width: 100%;
	}

	.pw-banner__actions .btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 640px) {
	.knockout-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 4px;
	}

	.knockout-row__status {
		font-size: 12px;
	}
}

@media (max-width: 640px) {
	.home-standings-caption,
	.home-standings {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.home-standings {
		padding: 14px;
	}

	.home-standings__name {
		font-size: 12px;
	}
}

@media (max-width: 1100px) {
	.hv2-hero__title {
		font-size: 96px;
	}

	.hv2-hero__copy {
		width: 55%;
	}
}

@media (max-width: 900px) {
	.nav-v2__toggle {
		display: block;
	}

	.nav-v2__panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--color-dark);
		border-top: 1px solid var(--color-dark-border);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 24px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s var(--ease);
	}

	.nav-v2[data-nav-open='true'] .nav-v2__panel,
	.nav-v2 .nav-v2__panel.is-open {
		max-height: 80vh;
	}

	.nav-v2__toggle[aria-expanded='true'] ~ .nav-v2__panel {
		max-height: 80vh;
	}

	.nav-v2__center,
	.nav-v2__right {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		margin: 0;
		width: 100%;
	}

	.nav-v2__center {
		padding: 16px 0;
		border-bottom: 1px solid var(--color-dark-border);
	}

	.nav-v2__right {
		padding-top: 16px;
		gap: 12px;
	}

	.nav-v2__link {
		padding: 12px 4px;
	}

	.nav-v2__btn {
		width: 100%;
	}

	.nav-v2__user {
		width: 100%;
		text-align: center;
	}

	.nav-v2__logout-form {
		width: 100%;
	}

	.hv2-hero {
		min-height: 0;
		padding: 60px 0 80px;
	}

	.hv2-hero__bg img {
		object-position: center right;
		opacity: 0.35;
	}

	.hv2-hero__gradient {
		background: linear-gradient(
			180deg,
			rgba(28, 28, 28, 0.6) 0%,
			rgba(28, 28, 28, 0.95) 60%
		);
	}

	.hv2-hero__copy {
		width: 100%;
		max-width: none;
	}

	.hv2-hero__title {
		font-size: 64px;
	}

	.hv2-hero__sub {
		font-size: 17px;
	}

	.hv2-countdown__num {
		font-size: 30px;
	}

	.hv2-countdown__box {
		height: 78px;
	}

	.hv2-section {
		padding: 64px 0;
	}

	.hv2-title {
		font-size: 32px;
	}

	.hv2-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.hv2-head--centred {
		align-items: center;
	}

	.hv2-matches,
	.hv2-points,
	.hv2-steps {
		grid-template-columns: 1fr;
	}

	.hv2-lb__header {
		display: none;
	}

	.hv2-lb__row {
		grid-template-columns: 40px 1fr 60px;
		grid-template-areas:
			'rank player pts'
			'progress progress progress';
		gap: 12px;
	}

	.hv2-lb__rank {
		grid-area: rank;
		font-size: 18px;
	}

	.hv2-lb__player {
		grid-area: player;
	}

	.hv2-lb__pts {
		grid-area: pts;
		font-size: 18px;
	}

	.hv2-lb__progress {
		grid-area: progress;
	}

	.hv2-lb__name {
		font-size: 15px;
	}

	.hv2-lb__avatar {
		width: 38px;
		height: 38px;
		font-size: 13px;
	}

	.hv2-stadium {
		height: 360px;
	}

	.hv2-prize {
		padding: 64px 0;
	}

	.hv2-prize__title {
		font-size: 48px;
	}

	.hv2-prize__trophy {
		font-size: 56px;
	}

	.footer-v2__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.footer-v2__brand {
		justify-content: center;
		margin: 0 auto;
	}

	.footer-v2__links {
		justify-content: center;
		flex-wrap: wrap;
	}

	.footer-v2__copy {
		text-align: center;
	}
}

@media (max-width: 520px) {
	.hv2-hero__title {
		font-size: 48px;
	}

	.hv2-countdown__grid {
		gap: 8px;
	}

	.hv2-countdown__box {
		height: 70px;
	}

	.hv2-countdown__num {
		font-size: 24px;
	}

	.hv2-countdown__cap {
		font-size: 10px;
		letter-spacing: 1.2px;
	}

	.hv2-match {
		padding: 20px;
	}

	.hv2-match__teams {
		gap: 8px;
	}

	.hv2-point__num {
		font-size: 54px;
	}

	.hv2-prize__title {
		font-size: 36px;
	}

	.hv2-faq__summary {
		font-size: 16px;
		padding: 16px 18px;
	}
}

/* ============================================================
   Dashboard — pending scorer line + result-card list
   Added for: dashboard pending row scorer preview and the
   detailed recent-results card layout. Reuses --gold / --green
   / --red / --text-soft / --font-body / --font-heading tokens
   defined at the top of this file.
   ============================================================ */

/* --- Pending row — scorer line (spans full row width via grid) --- */
.pending-pred-row__scorers {
	grid-column: 1 / -1;
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-soft);
	line-height: 1.4;
}

.pending-pred-row__scorers-icon {
	margin-right: 4px;
}

.pending-pred-row__scorers-team {
	font-weight: 700;
	color: var(--text-dark);
	margin-right: 4px;
}

.pending-pred-row__scorers-team:not(:first-of-type) {
	margin-left: 4px;
}

.pending-pred-row__scorers-sep {
	margin: 0 6px;
	color: var(--text-muted);
}

/* --- Result card list --- */
.result-card-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.result-card {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	padding: 18px 20px;
}

.result-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.result-card__match {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-dark);
	min-width: 0;
	flex-wrap: wrap;
}

.result-card__flag {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.result-card__team {
	white-space: nowrap;
}

.result-card__final-score {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--gold);
	font-size: 18px;
	padding: 0 6px;
	font-variant-numeric: tabular-nums;
}

.result-card__badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--bg-light);
	color: var(--text-soft);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}

.result-card__predicted {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-soft);
}

.result-card__predicted strong {
	font-family: var(--font-heading);
	color: var(--text-dark);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

.result-card__breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: var(--bg-light);
	border-radius: 8px;
}

.result-card__line {
	display: grid;
	grid-template-columns: 78px 1fr auto;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-dark);
}

.result-card__line-label {
	font-weight: 700;
	color: var(--text-soft);
	font-size: 13px;
}

.result-card__line-body {
	min-width: 0;
}

.result-card__line-body--scorers {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: baseline;
}

.result-card__line-pts {
	font-family: var(--font-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	white-space: nowrap;
}

.result-card__line-pts.is-positive {
	color: var(--gold);
}

.result-card__line-pts.is-zero {
	color: var(--text-soft);
}

.result-card__scorer {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.result-card__scorer-sep {
	color: var(--text-muted);
	margin: 0 2px;
}

.result-card__scorer-pts {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--gold);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.result-card__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--border-light);
}

.result-card__total-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-soft);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.result-card__total-value {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--gold);
	font-size: 18px;
	font-variant-numeric: tabular-nums;
}

.result-card__match-scorers {
	margin: 12px 0 0;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 13px;
	color: var(--text-soft);
	line-height: 1.4;
}

.result-card__match-scorer {
	font-variant-numeric: tabular-nums;
}

/* --- Emoji status colors --- */
.rc-ok {
	color: var(--green);
}
.rc-bad {
	color: var(--red);
}
.rc-exact {
	color: var(--gold);
}

@media (max-width: 640px) {
	.result-card {
		padding: 16px;
	}

	.result-card__line {
		grid-template-columns: 70px 1fr auto;
		font-size: 13px;
	}

	.result-card__final-score {
		font-size: 16px;
	}

	.result-card__total-value {
		font-size: 16px;
	}
}

/* ============================================================
   Result card — status modifiers + pending/live variants
   Used by pages/my-predictions.php to render finished, pending,
   and live predictions with a status-coloured left border. Also
   adds the small variant-specific elements (vs separator, badge
   colours, pick line, kickoff/edit footer, live dot).
   ============================================================ */

/* Left-border status modifiers. The base .result-card already has
   a 1px all-around border; we replace the left edge with a 4px
   coloured strip per status so a glance tells you the outcome. */
.result-card--exact {
	border-left: 4px solid var(--gold);
}
.result-card--correct {
	border-left: 4px solid var(--green);
}
.result-card--wrong {
	border-left: 4px solid var(--red);
}
.result-card--pending {
	border-left: 4px solid var(--gold);
}
.result-card--live {
	border-left: 4px solid var(--green);
	animation: result-card-live-pulse 2s ease-in-out infinite;
}

@keyframes result-card-live-pulse {
	0%,
	100% {
		box-shadow: var(--shadow-sm);
	}
	50% {
		box-shadow:
			0 0 0 3px rgba(34, 197, 94, 0.18),
			var(--shadow-sm);
	}
}

/* Badge variants — colour differs by status, layout reuses
   .result-card__badge. */
.result-card__badge--finished {
	background: var(--bg-light);
	color: var(--text-soft);
}

.result-card__badge--upcoming {
	background: var(--gold-soft);
	color: #8a6d00;
}

.result-card__badge--live {
	background: var(--red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.result-card__live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	animation: result-card-live-dot 1.2s ease-in-out infinite;
}

@keyframes result-card-live-dot {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.7);
	}
}

/* "vs" separator for pending matches (replaces .result-card__final-score). */
.result-card__vs {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-soft);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 6px;
}

/* Pending / live body — "Your pick" line + scorers summary + footer. */
.result-card__pick-line {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-dark);
}

.result-card__pick-line strong {
	font-family: var(--font-heading);
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	margin-left: 2px;
}

.result-card__scorers-line {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-soft);
	line-height: 1.4;
}

.result-card__scorers-label {
	font-weight: 700;
	color: var(--text-dark);
	margin-right: 4px;
}

.result-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-light);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-soft);
	flex-wrap: wrap;
}

.result-card__kickoff {
	font-variant-numeric: tabular-nums;
}

.result-card__edit {
	flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE FIXES
   Consolidated mobile/tablet overrides. Desktop (>1100px)
   behavior is unchanged. Earlier @media blocks in this file
   are kept as-is; rules below override them where the user spec
   requires different values, and add fixes for gaps not covered.

   Breakpoints (declared at root):
     --bp-laptop:    max-width: 1100px
     --bp-tablet:    max-width:  900px
     --bp-mobile-lg: max-width:  640px
     --bp-mobile:    max-width:  480px
   ============================================================ */

/* ---- GLOBAL: viewport overflow + tap targets + base font ---- */
@media (max-width: 900px) {
	html,
	body {
		overflow-x: hidden;
	}

	body {
		-webkit-text-size-adjust: 100%;
	}

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

	.btn,
	.hv2-btn,
	.nav-v2__btn {
		min-height: 44px;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 15px;
		line-height: 1.5;
	}

	/* Prevent iOS auto-zoom on focus by guaranteeing >=16px inputs. */
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* ---- LAPTOP (max-width: 1100px) ---- */
@media (max-width: 1100px) {
	.home-standings,
	.home-standings-caption {
		max-width: 100%;
	}
}

/* ---- TABLET (max-width: 900px) ---- */
@media (max-width: 900px) {
	/* Fix 2 — Mobile navbar: solid dark, fixed, compact height */
	.nav-v2 {
		background: var(--color-dark);
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.nav-v2__inner {
		height: 60px;
		padding: 0 16px;
		gap: 12px;
	}

	.nav-v2__brand img,
	.nav-v2__brand svg {
		max-height: 28px;
		width: auto;
	}

	.nav-v2__brand {
		width: auto;
	}

	/* Show hamburger */
	.nav-v2__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Fix 3 — Slide-down panel: fixed below navbar */
	.nav-v2__panel {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		background: var(--color-dark);
		border-top: 1px solid var(--color-dark-border);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		transition:
			max-height 0.3s var(--ease),
			padding 0.3s var(--ease);
		z-index: 99;
	}

	.nav-v2__panel.is-open {
		max-height: 80vh;
		padding: 16px 20px 24px;
		overflow-y: auto;
	}

	.nav-v2__center {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--color-dark-border);
		margin: 0;
		width: 100%;
	}

	.nav-v2__right {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-top: 16px;
		margin: 0;
		width: 100%;
	}

	.nav-v2__link {
		padding: 12px 0;
		min-height: 48px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		font-size: 16px;
	}

	.nav-v2__btn {
		width: 100%;
		text-align: center;
		min-height: 48px;
		font-size: 15px;
		justify-content: center;
	}

	.nav-v2__user {
		width: 100%;
		text-align: center;
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-v2__logout-form {
		width: 100%;
	}

	/* Fix 5 — Hero content not hidden behind fixed navbar */
	.hv2-hero {
		padding-top: 60px;
	}

	/* Hero — override existing 64px → user spec 72px on tablet */
	.hv2-hero__title {
		font-size: 72px;
	}

	.hv2-hero__cta {
		flex-wrap: wrap;
	}

	/* Points: user wants 2 cols on tablet (existing forces 1fr) */
	.hv2-points {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Standings widget arrows: 44px tap target */
	.home-standings__nav {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Match filter tabs: horizontal scroll, no wrap (overrides line ~6062) */
	.match-filter-tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.match-filter-tabs::-webkit-scrollbar {
		display: none;
	}

	.match-filter-tab {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 44px;
		padding: 0 14px;
	}

	/* my-predictions filter tabs: horizontal scroll */
	.my-pred-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.my-pred-tabs::-webkit-scrollbar {
		display: none;
	}

	.my-pred-tab {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 44px;
	}

	/* Standings group tabs: wrap/scroll horizontally */
	.standings-tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.standings-tabs::-webkit-scrollbar {
		display: none;
	}

	.standings-tab {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 44px;
	}

	/* Standings table: horizontal scroll if it overflows */
	.standings-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.standings-table {
		min-width: 520px;
	}

	/* Knockout schedule: stacks rows cleanly */
	.knockout-card__rounds {
		gap: 4px;
	}

	/* Predict team header wraps */
	.predict-teams {
		flex-wrap: wrap;
	}

	.predict-team {
		flex-wrap: wrap;
		min-width: 0;
	}

	.predict-team-name {
		word-break: break-word;
		min-width: 0;
	}

	/* Player picker: smaller cards already partially handled,
	   ensure picker tabs are tap-friendly */
	.player-picker__tabs {
		flex-wrap: wrap;
	}

	.picker-tab {
		min-height: 44px;
	}
}

/* ---- MOBILE-LG (max-width: 640px) ---- */
@media (max-width: 640px) {
	/* Home Leaderboard widget: hide progress column, name truncates.
	   Overrides 900px rule (which kept progress as a separate row). */
	.hv2-lb__row {
		grid-template-columns: 50px 1fr 60px;
		grid-template-areas: 'rank player pts';
	}

	.hv2-lb__progress,
	.hv2-lb__bar,
	.hv2-lb__col-progress {
		display: none;
	}

	.hv2-lb__name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.hv2-lb__player {
		min-width: 0;
	}

	/* Hero CTA: stack vertically, full width */
	.hv2-hero__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.hv2-hero__cta .hv2-btn {
		width: 100%;
		justify-content: center;
	}

	/* Upcoming matches: cards full width */
	.hv2-match {
		width: 100%;
	}

	/* Prize button full width on mobile */
	.hv2-prize .hv2-btn,
	.hv2-prize__inner .hv2-btn {
		width: 100%;
		justify-content: center;
	}

	/* FAQ: padding correct + tap-height summary + text wraps */
	.hv2-faq {
		padding-left: 0;
		padding-right: 0;
	}

	.hv2-faq__summary {
		min-height: 48px;
		white-space: normal;
		word-break: break-word;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.hv2-faq__answer {
		padding: 0 18px 16px;
	}

	/* Standings dots visible (nav buttons + pagination dots) */
	.home-standings__dots {
		display: flex;
	}

	.home-standings__nav-group {
		justify-content: space-between;
		width: 100%;
	}

	/* matches.php: logos 24px, team names truncate, hide venue */
	.match-row__logo .team-logo,
	.match-row__logo .team-logo--sm,
	.match-row__logo img {
		width: 24px;
		height: 24px;
	}

	.match-row__team-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.match-row__team {
		min-width: 0;
	}

	.match-row__venue,
	.match-row__venue-text,
	.match-row__venue-sep {
		display: none;
	}

	.date-header {
		font-size: 11px;
	}

	/* predict.php: score selectors side-by-side, identical width/height
	   (overrides line 5999 which forced 1fr) */
	.score-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		align-items: center;
	}

	.score-side {
		width: 100%;
		padding: 16px 12px;
		text-align: center;
	}

	.score-select {
		width: 100%;
		height: 72px;
		font-size: 36px;
		text-align: center;
		text-align-last: center;
	}

	.score-side-label {
		font-size: 11px;
		letter-spacing: 0.06em;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.score-side-label img.team-logo {
		width: 20px;
		height: 20px;
	}

	.score-side-label span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 80px;
		display: inline-block;
	}

	/* Goal slots: full width */
	.goal-slot {
		width: 100%;
		min-height: 56px;
	}

	.goal-slots {
		gap: 8px;
	}

	.goal-slot__pick-cta {
		min-height: 44px;
	}

	/* Player picker grid: smaller cards on mobile (reinforce + tap) */
	.player-picker__grid {
		grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
		gap: 8px;
	}

	.player-card {
		min-height: 44px;
	}

	.scorer-section__header {
		flex-wrap: wrap;
		gap: 6px;
	}

	/* leaderboard.php: search full width, table horizontal scroll */
	.lb-search,
	.lb-search__row {
		width: 100%;
	}

	.lb-search__row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.lb-search__input {
		width: 100%;
		min-height: 44px;
	}

	.lb-search__submit,
	.lb-clear-search {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}

	.lb-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.lb-table thead,
	.lb-table tbody {
		display: table;
		width: 100%;
		min-width: 480px;
	}

	/* my-predictions: cards full width, breakdown lines stack */
	.result-card {
		width: 100%;
	}

	.result-card__breakdown {
		gap: 8px;
	}

	.result-card__line {
		grid-template-columns: 1fr;
		grid-template-areas:
			'label'
			'body'
			'pts';
		gap: 4px;
	}

	.result-card__line-label {
		grid-area: label;
	}

	.result-card__line-body {
		grid-area: body;
	}

	.result-card__line-pts {
		grid-area: pts;
		justify-self: end;
	}

	/* dashboard: pending row + cards already handled; reinforce stat-grid
	   (existing 768px rule provides 2 cols — we ensure it persists). */
	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Standings: cleaner scroll padding + force horizontal scroll table */
	.standings-table {
		min-width: 480px;
	}

	/* Points: user spec — 1 col on mobile (override tablet 2 cols) */
	.hv2-points {
		grid-template-columns: 1fr;
	}

	/* How It Works: 1 col on mobile (existing rule already does this
	   at 900px; reinforce for safety) */
	.hv2-steps {
		grid-template-columns: 1fr;
	}

	.hv2-matches {
		grid-template-columns: 1fr;
	}

	/* login.php / profile.php: card + inputs + buttons full width */
	.auth-card,
	.profile-form {
		width: 100%;
		max-width: 100%;
	}

	.auth-card input,
	.auth-card select,
	.auth-card button,
	.profile-form input,
	.profile-form select,
	.profile-form button,
	.form-group input,
	.form-group select,
	.form-group textarea {
		width: 100%;
	}

	.form-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.form-actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Result-card list: ensure full width */
	.result-card-list {
		width: 100%;
	}

	/* Stat cards: padding stays comfortable, tap target preserved */
	.stat-card {
		min-height: 88px;
	}

	/* Pending pred row CTA: tap-friendly */
	.pending-pred-row__edit {
		min-height: 44px;
	}

	/* Buttons baseline tap target on mobile */
	.btn,
	.hv2-btn,
	.nav-v2__btn,
	.picker-tab,
	.standings-tab,
	.my-pred-tab,
	.match-filter-tab {
		min-height: 44px;
	}
}

/* ---- MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {
	/* Hero title: user spec 44px (overrides 520px rule 48px) */
	.hv2-hero__title {
		font-size: 44px;
	}

	/* Prize title scales down further */
	.hv2-prize__title {
		font-size: 30px;
	}

	.hv2-prize__trophy {
		font-size: 44px;
	}

	/* Tighter section padding */
	.hv2-section {
		padding: 48px 0;
	}

	/* Countdown keeps 4-in-a-row by shrinking aggressively */
	.hv2-countdown__grid {
		gap: 6px;
	}

	.hv2-countdown__box {
		height: 62px;
	}

	.hv2-countdown__num {
		font-size: 20px;
	}

	.hv2-countdown__cap {
		font-size: 9px;
		letter-spacing: 1px;
	}

	/* Standings legend wraps */
	.standings-legend {
		flex-wrap: wrap;
	}
}

/* ─────────────────────────────────────────────────────────────── */
/* LAPTOP — 1184px to 1399px                                       */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1184px) and (max-width: 1399px) {
	.hv2-hero__copy {
		max-width: 800px;
		width: 100%;
		min-width: 320px;
	}

	.hv2-hero__sub {
		max-width: 88%;
	}

	.hv2-btn {
		font-size: 16px;
		padding: 10px 20px;
	}
	.hv2-countdown__grid {
		gap: 12px;
		width: 80%;
	}

	.hv2-countdown__box {
		height: 65px;
		gap: 0px;
	}

	.hv2-countdown__num {
		font-size: 26px;
	}

	.hv2-countdown__label {
		font-size: 12px;
		margin: 0px 0 5px;
	}

	.hv2-hero__cta {
		gap: 16px;
		margin-bottom: 24px;
	}

	.hv2-hero__title {
		font-size: 6rem;
		margin: 0 0 21px;
	}

	.hv2-hero__eyebrow {
		font-size: 14px;
		margin: 0 0 15px;
	}

	.nav-v2__brand {
		width: 150px;
	}

	.nav-v2 {
		padding: 10px 0 0 0;
	}
}

/* ─────────────────────────────────────────────────────────────── */
/* DESKTOP SM — 1400px to 1529px                                   */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1400px) and (max-width: 1700px) {
	.hv2-hero__copy {
		max-width: 800px;
		width: 100%;
		min-width: 320px;
	}

	.hv2-hero__sub {
		max-width: 88%;
	}

	.hv2-btn {
		font-size: 16px;
		padding: 10px 20px;
	}
	.hv2-countdown__grid {
		gap: 12px;
		width: 80%;
	}

	.hv2-countdown__box {
		height: 65px;
		gap: 0px;
	}

	.hv2-countdown__num {
		font-size: 26px;
	}

	.hv2-countdown__label {
		font-size: 12px;
		margin: 0px 0 5px;
	}

	.hv2-hero__cta {
		gap: 16px;
		margin-bottom: 24px;
	}

	.hv2-hero__title {
		font-size: 6rem;
		margin: 0 0 21px;
	}

	.hv2-hero__eyebrow {
		font-size: 14px;
		margin: 0 0 15px;
	}

	.nav-v2__brand {
		width: 150px;
	}

	.nav-v2 {
		padding: 10px 0 0 0;
	}
}

/* ─────────────────────────────────────────────────────────────── */
/* DESKTOP MD — 1530px to 1599px                                   */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1530px) and (max-width: 1599px) {
}

/* ─────────────────────────────────────────────────────────────── */
/* DESKTOP LG — 1600px to 1719px                                   */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1600px) and (max-width: 1719px) {
}

/* ─────────────────────────────────────────────────────────────── */
/* DESKTOP XL — 1720px to 2000px                                   */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1720px) and (max-width: 2000px) {
}

/* ─────────────────────────────────────────────────────────────── */
/* WIDE — 2400px to 2700px                                         */
/* ─────────────────────────────────────────────────────────────── */
@media screen and (min-width: 2400px) and (max-width: 2700px) {
}