/* ==========================================================================
   APP SHELL v2 — Next.js-feel. White + Navy + Red palette.
   Desktop = 3-column workspace, dense, data-forward.
   Mobile = single-column feed with bottom tab bar.
   ========================================================================== */

:root {
	/* palette — softer slate-blues, no near-black */
	--ink:       #1E293B;   /* main text — slate-800, warmer than near-black */
	--ink-2:     #334155;   /* slate-700 */
	--ink-3:     #64748B;   /* slate-500 */
	--ink-4:     #94A3B8;   /* slate-400 */

	--surf:      #FFFFFF;
	--surf-2:    #F8FAFC;
	--surf-3:    #F1F5F9;
	--line:      #E2E8F0;
	--line-2:    #CBD5E1;

	--red:       #DC2626;
	--red-2:     #B91C1C;
	--red-soft:  #FEF2F2;

	/* dark backgrounds — softer, only for app bar / footer / status / one bonus inset */
	--navy:      #243447;   /* warm slate-blue */
	--navy-2:    #1E2A3D;

	--mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

	--r-1: 4px;
	--r-2: 6px;
	--r-3: 8px;
	--r-4: 12px;

	/* Single source of truth for screen-edge gutter — every section uses this. */
	--gutter: 1.25rem;       /* 20px on desktop */
	--gutter-h: 1.25rem;     /* horizontal alias */
}

/* ==========================================================================
   v2.17.1 — PAGE H1 STRIP (sits between Top 5 and workspace, not at top)
   Replaces the prior sr-only H1. Acts as a section divider with the
   site's main keyword target.
   ========================================================================== */
.wcb-page-h1 {
	background: var(--surf);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 8px 0 0;
}
.wcb-page-h1-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px var(--gutter) 22px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.wcb-page-h1-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}
.wcb-page-h1-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.wcb-page-h1-h {
	margin: 4px 0 4px;
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
}
.wcb-page-h1-sub {
	margin: 0;
	font-size: 0.96rem;
	color: var(--ink-3);
	line-height: 1.5;
	max-width: 80ch;
}
@media (max-width: 720px) {
	.wcb-page-h1-inner { padding: 22px var(--gutter) 18px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.wcb-page-h1-h     { font-size: 1.35rem; }
	.wcb-page-h1-sub   { font-size: 0.86rem; }
}

/* ----- SOCIAL ROW (admin-controlled, used in H1 strip + footer) -------- */
.wcb-social-row {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.wcb-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--surf);
	border: 1px solid var(--line);
	color: var(--ink-3);
	text-decoration: none;
	transition: background 140ms, border-color 140ms, color 140ms, transform 140ms;
}
.wcb-social-icon:hover {
	transform: translateY(-1px);
}
/* Brand-coloured hover per platform — strict-mode contrast on icon */
.wcb-social-twitter_x:hover { background: #000000; border-color: #000000; color: #FFFFFF; }
.wcb-social-discord:hover   { background: #5865F2; border-color: #5865F2; color: #FFFFFF; }
.wcb-social-linkedin:hover  { background: #0A66C2; border-color: #0A66C2; color: #FFFFFF; }
.wcb-social-twitch:hover    { background: #9146FF; border-color: #9146FF; color: #FFFFFF; }
.wcb-social-instagram:hover {
	background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 100%);
	border-color: #DD2A7B;
	color: #FFFFFF;
}

/* H1-strip variant — top-aligned, sits at the top of the strip */
.wcb-social-row-h1strip {
	margin-top: 6px;
}

/* Footer variant — slightly larger touch area, white-on-dark colours */
.wcb-social-row-footer .wcb-social-icon {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
}
.wcb-social-row-footer .wcb-social-icon:hover { color: white; }

@media (max-width: 480px) {
	.wcb-social-icon { width: 34px; height: 34px; }
	.wcb-social-row { gap: 8px; }
}

/* ==========================================================================
   v2.12.0 — A11Y PRIMITIVES
   ========================================================================== */

/* Screen-reader only — visible to assistive tech, removed from the visual tree.
   Used for the SEO H1 on the homepage, table captions, and aria labels. */
.wcb-sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.wcb-sr-only:focus,
.screen-reader-text:focus { /* visible when focused via keyboard */
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 10000;
	width: auto !important;
	height: auto !important;
	padding: 10px 16px !important;
	margin: 0 !important;
	clip: auto !important;
	background: var(--ink);
	color: white !important;
	border-radius: var(--r-2);
	white-space: normal !important;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Keyboard-visible skip link */
.wcb-skip-link {
	position: absolute;
	top: -40px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--red);
	color: white;
	font-weight: 700;
	border-radius: 0 0 var(--r-2) var(--r-2);
	text-decoration: none;
	transition: top 120ms;
}
.wcb-skip-link:focus { top: 0; }
@media (max-width: 899px) {
	:root { --gutter: 0.875rem; --gutter-h: 0.875rem; } /* 14px tablet */
}
@media (max-width: 480px) {
	:root { --gutter: 0.75rem;  --gutter-h: 0.75rem;  } /* 12px phone */
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
body.wcb-app {
	font-family: var(--sans);
	color: var(--ink);
	background: var(--surf);
	-webkit-font-smoothing: antialiased;
	padding-top: 56px;
	font-feature-settings: 'ss01', 'cv11';
	letter-spacing: -0.005em;
}
body.wcb-app * { box-sizing: border-box; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.wcb-topbar { display: none !important; }
.wcb-header, .wcb-mobile-menu, .wcb-responsible-gambling, .wcb-footer { display: none !important; }

/* ==========================================================================
   APP BAR
   ========================================================================== */
.wcb-appbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--line);
	z-index: 1000;
}
.wcb-appbar-inner {
	max-width: 1440px;
	margin: 0 auto;
	height: 100%;
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: 1.25rem;
	padding: 0 1.25rem;
}
.wcb-appbar-logo {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: -0.015em;
	white-space: nowrap;
}
.wcb-appbar-logo em {
	font-style: normal;
	color: var(--red);
	font-weight: 700;
}
.wcb-appbar-mark { flex-shrink: 0; }

.wcb-appbar-nav {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}
.wcb-appbar-nav a {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--ink-3);
	text-decoration: none;
	border-radius: var(--r-2);
	letter-spacing: -0.005em;
}
.wcb-appbar-nav a:hover {
	background: var(--surf-2);
	color: var(--ink);
}

.wcb-appbar-search {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	color: var(--ink-4);
	width: 260px;
	max-width: 100%;
	justify-self: end;
	transition: border-color 120ms, background 120ms;
}
.wcb-appbar-search:hover { border-color: var(--line-2); background: var(--surf); }
.wcb-appbar-search:focus-within { border-color: var(--ink); background: var(--surf); color: var(--ink); }
.wcb-appbar-search input {
	flex: 1;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 0.82rem;
	color: var(--ink);
	font-family: inherit;
	min-width: 0;
}
.wcb-appbar-search input::placeholder { color: var(--ink-4); }
.wcb-appbar-search kbd {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--ink-4);
	padding: 0.1rem 0.35rem;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-1);
}

.wcb-appbar-actions { display: flex; align-items: center; gap: 0.4rem; }
.wcb-appbar-cta {
	padding: 0.45rem 0.8rem;
	background: var(--red);
	color: white;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: var(--r-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background 120ms;
	letter-spacing: -0.005em;
}
.wcb-appbar-cta:hover { background: var(--red-2); color: white; }

.wcb-appbar-more {
	display: none;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--r-2);
	color: var(--ink);
	cursor: pointer;
}
.wcb-appbar-more:hover { background: var(--surf-2); }

/* ==========================================================================
   LIVE STATUS TICKER
   ========================================================================== */
.wcb-status {
	position: sticky;
	top: 56px;
	z-index: 99;
	background: var(--navy);
	color: rgba(255, 255, 255, 0.78);
	height: 32px;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}
.wcb-status-inner {
	max-width: 1440px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0 1.25rem;
	font-size: 0.75rem;
	font-family: var(--sans);
	white-space: nowrap;
	overflow: hidden;
}
.wcb-status-live {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: white;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.68rem;
	text-transform: uppercase;
}
.wcb-status-pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
	animation: appPulse 1.8s ease-in-out infinite;
}
@keyframes appPulse {
	0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
	50% { opacity: 0.65; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.wcb-status-sep {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}
.wcb-status-item em {
	font-style: normal;
	color: white;
	font-family: var(--mono);
	font-weight: 600;
}
.wcb-status-item time { font-family: var(--mono); color: white; }
.wcb-status-ticker {
	display: inline-flex;
	gap: 1.1rem;
	flex: 1;
	overflow: hidden;
	font-family: var(--mono);
	font-size: 0.72rem;
}
.wcb-status-ticker span strong {
	color: white;
	font-weight: 700;
	margin-right: 0.3rem;
}

/* ==========================================================================
   MAIN
   ========================================================================== */
.wcb-app-main {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}

/* ==========================================================================
   SHARED ATOMS
   ========================================================================== */
.wcb-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.5rem;
	border-radius: var(--r-2);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wcb-tag-amber { background: var(--amber); color: white; }
.wcb-tag-navy  { background: var(--navy); color: white; }
.wcb-tag-muted { background: var(--surf-3); color: var(--ink-3); }

.wcb-dot-amber {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--amber);
	flex-shrink: 0;
}
.wcb-dot-live {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
	animation: appPulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}

/* Buttons — override base components.css */
.wcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.55rem 0.95rem;
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--r-2);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	letter-spacing: -0.005em;
	transition: background 120ms, border-color 120ms, color 120ms;
}
.wcb-btn-primary {
	background: var(--red);
	color: white;
	border-color: var(--red);
}
.wcb-btn-primary:hover { background: var(--red-2); border-color: var(--red-2); color: white; }
.wcb-btn-primary.wcb-btn-lg { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
.wcb-btn-primary.wcb-btn-block { width: 100%; }
.wcb-btn-primary::before { display: none; }

.wcb-btn-ghost {
	background: var(--surf);
	color: var(--ink);
	border-color: var(--line);
}
.wcb-btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--surf); }

.wcb-copy-btn {
	padding: 0.2rem 0.5rem;
	background: var(--surf);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--r-1);
	font-size: 0.68rem;
	font-weight: 600;
	font-family: var(--sans);
	cursor: pointer;
}
.wcb-copy-btn:hover { border-color: var(--ink); }

/* ==========================================================================
   PANELS — generic content module
   ========================================================================== */
.wcb-panel {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
}
.wcb-panel + .wcb-panel { margin-top: 12px; }
.wcb-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surf-2);
}
.wcb-panel-head h3 {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wcb-panel-head a, .wcb-panel-head span.mono {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ink-3);
	text-decoration: none;
}
.wcb-panel-head a:hover { color: var(--red); }
.wcb-panel-head-dark { background: var(--surf); border-bottom-color: var(--line); }
.wcb-panel-head-dark h3, .wcb-panel-head-dark span, .wcb-panel-head-dark a { color: var(--ink); }
.wcb-panel-head-dark .mono { color: var(--ink-3); }
.wcb-panel-head-dark a:hover { color: var(--red); }
.wcb-panel-dark { background: var(--surf); border-color: var(--line); color: var(--ink); }

.wcb-panel-link {
	display: block;
	padding: 10px 14px;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--red);
	text-decoration: none;
	border-top: 1px solid var(--line);
}
.wcb-panel-link:hover { background: var(--surf-2); }

.wcb-panel-promo {
	padding: 14px;
}
.wcb-panel-promo h4 {
	margin: 0 0 4px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink);
}
.wcb-panel-promo p {
	margin: 0 0 10px;
	font-size: 0.78rem;
	color: var(--ink-3);
	line-height: 1.45;
}

/* ==========================================================================
   HERO 3 — featured casino + side stack
   ========================================================================== */
.wcb-hero3 {
	padding: 32px 1.25rem 20px;
	border-bottom: 1px solid var(--line);
	background: var(--surf-2);
}
.wcb-hero3-inner {
	max-width: 1440px;
	margin: 0 auto;
}
.wcb-hero3-main {
	background: var(--surf);
	border: 1px solid var(--line);
	border-left: 4px solid var(--red);
	border-radius: var(--r-4);
	padding: 28px 32px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto auto;
	gap: 14px 28px;
	position: relative;
	align-items: center;
}
.wcb-hero3-main-head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.wcb-hero3-rated {
	font-size: 0.72rem;
	color: var(--ink-3);
	font-weight: 500;
}
.wcb-hero3-score {
	display: inline-flex;
	align-items: baseline;
	padding: 3px 9px;
	background: var(--green-soft);
	color: var(--green);
	border-radius: var(--r-1);
	font-family: var(--mono);
	font-weight: 700;
	font-size: 0.85rem;
	margin-left: auto;
}
.wcb-hero3-score span { font-size: 0.6rem; margin-left: 1px; opacity: 0.8; }

.wcb-hero3-title {
	grid-column: 1 / -1;
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	color: var(--ink);
}
.wcb-hero3-lede { display: none; } /* removed for cleaner hero */

.wcb-hero3-bonus {
	grid-column: 1 / -1;
	padding: 16px 20px;
	background: var(--red-soft);
	color: var(--ink);
	border-radius: var(--r-3);
	border: 1px solid #FECACA;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}
.wcb-hero3-bonus > div { flex: 1; min-width: 0; }
.wcb-hero3-bonus .wcb-btn { flex-shrink: 0; white-space: nowrap; }
.wcb-hero3-bonus-lbl {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 3px;
}
.wcb-hero3-bonus-val {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.wcb-hero3-meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.wcb-hero3-meta > div {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.78rem;
}
.wcb-hero3-meta span {
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wcb-hero3-meta strong {
	font-weight: 700;
	color: var(--ink);
}
.wcb-hero3-cta-row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.wcb-hero3-code {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 6px 10px;
	background: var(--surf-2);
	border: 1px dashed var(--line-2);
	border-radius: var(--r-2);
	font-size: 0.72rem;
	color: var(--ink-3);
}
.wcb-hero3-code strong {
	color: var(--ink);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.wcb-hero3-legal {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.68rem;
	color: var(--ink-4);
}

.wcb-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wcb-card-foot {
	padding-top: 8px;
	border-top: 1px solid var(--line);
	font-size: 0.7rem;
	color: var(--ink-3);
}

.wcb-hero3-countdown { background: var(--ink); border-color: var(--ink); color: white; }
.wcb-hero3-countdown .wcb-card-head { color: rgba(255, 255, 255, 0.55); }
.wcb-hero3-countdown .wcb-card-head span.mono { color: rgba(255, 255, 255, 0.75); }
.wcb-hero3-countdown .wcb-card-foot { color: rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.08); }

.wcb-cd {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.wcb-cd-u {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 4px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--r-2);
	line-height: 1;
}
.wcb-cd-u strong {
	font-size: 2rem;
	font-weight: 700;
	color: white;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.wcb-cd-u span {
	font-size: 0.55rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 4px;
}

.wcb-hero3-pick-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.wcb-pt {
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	gap: 2px;
	flex: 1;
}
.wcb-pt-flag { font-size: 1.5rem; line-height: 1; }
.wcb-pt-name { font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.wcb-pt-odd {
	font-weight: 700;
	color: var(--red);
	font-size: 0.95rem;
}
.wcb-hero3-pick-vs {
	font-family: var(--mono);
	font-size: 0.7rem;
	color: var(--ink-4);
	font-weight: 700;
	text-transform: uppercase;
}
.wcb-hero3-pick-tip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--red-soft);
	border-radius: var(--r-2);
	font-size: 0.8rem;
}
.wcb-hero3-pick-tip span:first-child {
	font-size: 0.62rem;
	color: var(--red-2);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.wcb-hero3-pick-tip strong { color: var(--ink); font-weight: 700; }
.wcb-hero3-pick-arrow { color: var(--red); font-weight: 700; }

/* ==========================================================================
   WORKSPACE — 3 column desktop / stack mobile
   ========================================================================== */
.wcb-ws {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 1.25rem;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}
.wcb-ws-left, .wcb-ws-right {
	position: sticky;
	top: 100px;        /* below appbar + status */
}

/* Filter chips (desktop version) */
.wcb-chips2 {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;
}
.wcb-chips2::-webkit-scrollbar { display: none; }
.wcb-chip2 {
	flex: 0 0 auto;
	padding: 5px 12px;
	background: var(--surf);
	color: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	letter-spacing: -0.005em;
	transition: background 120ms, color 120ms, border-color 120ms;
}
.wcb-chip2:hover { border-color: var(--line-2); color: var(--ink); }
.wcb-chip2.is-active { background: var(--ink); color: white; border-color: var(--ink); }

.wcb-feed2 { display: flex; flex-direction: column; gap: 12px; }
.wcb-feed2 > [data-hidden="true"] { display: none; }

/* ==========================================================================
   RANK LIST (left rail)
   ========================================================================== */
.wcb-rank-list {
	list-style: none;
	padding: 6px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wcb-rank {
	display: grid;
	grid-template-columns: 28px 1fr auto auto;
	align-items: center;
	gap: 8px;
	padding: 8px 8px;
	border-radius: var(--r-2);
	transition: background 120ms;
}
.wcb-rank:hover { background: var(--surf-2); }
.wcb-rank.is-top { background: var(--red-soft); }
.wcb-rank-num {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-4);
	text-align: center;
}
.wcb-rank.is-top .wcb-rank-num { color: var(--red); }
.wcb-rank-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.wcb-rank-name {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.005em;
}
.wcb-rank-name:hover { color: var(--red); }
.wcb-rank-bonus {
	font-size: 0.68rem;
	color: var(--ink-4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-rank-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 22px;
	padding: 0 6px;
	background: var(--green-soft);
	color: var(--green);
	border-radius: var(--r-1);
	font-size: 0.72rem;
	font-weight: 700;
}
.wcb-rank-btn {
	padding: 4px 10px;
	background: var(--red);
	color: white;
	border-radius: var(--r-1);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.wcb-rank-btn:hover { background: var(--red-2); color: white; }

.wcb-panel .wcb-btn-block {
	margin: 10px;
	width: calc(100% - 20px);
}

/* ==========================================================================
   MATCH OF THE DAY (feed)
   ========================================================================== */
.wcb-mod {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-4);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wcb-mod-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	color: var(--ink-3);
	font-weight: 600;
	flex-wrap: wrap;
}
.wcb-mod-stage { color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.wcb-mod-sep { width: 1px; height: 10px; background: var(--line); }
.wcb-mod-date { color: var(--ink-3); }

.wcb-mod-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 18px 10px;
	background: var(--surf-2);
	border-radius: var(--r-3);
}
.wcb-mod-team {
	display: grid;
	grid-template-rows: auto auto auto auto;
	gap: 4px;
	justify-items: center;
}
.wcb-mod-flag { font-size: 2.4rem; line-height: 1; }
.wcb-mod-name { font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }
.wcb-mod-odd { font-size: 1.75rem; font-weight: 800; color: var(--red); letter-spacing: -0.02em; }
.wcb-mod-lbl { font-size: 0.62rem; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.wcb-mod-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.wcb-mod-vs {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ink-4);
	letter-spacing: 0.08em;
}
.wcb-mod-draw {
	padding: 4px 10px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	font-size: 0.72rem;
	color: var(--ink-3);
	font-weight: 600;
}
.wcb-mod-venue {
	padding: 8px 0;
	border-top: 1px dashed var(--line);
	text-align: center;
	font-size: 0.72rem;
	color: var(--ink-4);
}
.wcb-mod-tip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	background: var(--red-soft);
	color: var(--ink);
	border: 1px solid #FECACA;
	border-radius: var(--r-3);
	flex-wrap: wrap;
	gap: 10px;
}
.wcb-mod-tip-lbl {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 2px;
}
.wcb-mod-tip-val {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* ==========================================================================
   INLINE CASINO CARDS (feed)
   ========================================================================== */
.wcb-cas-inline {
	background: var(--surf);
	color: var(--ink);
	border: 1px solid var(--line);
	border-left: 4px solid var(--red);
	border-radius: var(--r-4);
	padding: 16px 18px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 8px 16px;
	align-items: center;
	transition: border-color 120ms;
}
.wcb-cas-inline:hover { border-color: var(--ink-3); border-left-color: var(--red); }
.wcb-cas-inline-light { /* alias kept for back-compat */ }
.wcb-cas-inline-meta {
	grid-column: 1 / 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wcb-cas-inline-score {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--green);
}
.wcb-cas-inline .wcb-tag-muted { background: var(--surf-3); color: var(--ink-3); }

.wcb-cas-inline-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.wcb-cas-inline-h {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ink);
}
.wcb-cas-inline-pros {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.75rem;
}
.wcb-cas-inline-pros span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ink-3);
}
.wcb-cas-inline-pros svg { color: var(--green); }

/* ==========================================================================
   PICKS ROWS (feed, inside panel)
   ========================================================================== */
.wcb-picks { display: flex; flex-direction: column; }
.wcb-pick-row {
	display: grid;
	grid-template-columns: 100px 100px 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	font-size: 0.82rem;
	transition: background 120ms;
}
.wcb-pick-row:last-child { border-bottom: 0; }
.wcb-pick-row:hover { background: var(--surf-2); }
.wcb-pick-date { font-size: 0.72rem; color: var(--ink-3); }
.wcb-pick-stage {
	font-size: 0.68rem;
	color: var(--ink-4);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
}
.wcb-pick-match {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-pick-match strong { font-weight: 600; }
.wcb-pick-sep { color: var(--ink-4); font-size: 0.7rem; margin: 0 2px; }
.wcb-pick-tip {
	font-size: 0.75rem;
	color: var(--ink-3);
	font-weight: 500;
}
.wcb-pick-odd {
	padding: 3px 9px;
	background: var(--red-soft);
	color: var(--red);
	border-radius: var(--r-2);
	font-size: 0.82rem;
	font-weight: 700;
}

/* ==========================================================================
   NEWS PANEL (feed)
   ========================================================================== */
.wcb-news2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.wcb-news2-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	transition: background 120ms;
}
.wcb-news2-item:nth-child(2n) { border-right: 0; }
.wcb-news2-item:nth-last-child(-n+2) { border-bottom: 0; }
.wcb-news2-item:hover { background: var(--surf-2); }
.wcb-news2-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.wcb-news2-cat { color: var(--red); }
.wcb-news2-date { color: var(--ink-4); }
.wcb-news2-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.wcb-news2-ex {
	margin: 0;
	font-size: 0.78rem;
	color: var(--ink-3);
	line-height: 1.4;
}

/* ==========================================================================
   ODDS TABLE (right rail)
   ========================================================================== */
.wcb-odds-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}
.wcb-odds-table tr {
	border-bottom: 1px solid var(--line);
}
.wcb-odds-table tr:last-child { border-bottom: 0; }
.wcb-odds-table tr.is-fav { background: var(--red-soft); }
.wcb-odds-table td {
	padding: 8px 12px;
	color: var(--ink-2);
}
.wcb-odds-pos { color: var(--ink-4); width: 24px; font-size: 0.72rem; }
.wcb-odds-flag { width: 20px; font-size: 1rem; padding-left: 0; padding-right: 4px; }
.wcb-odds-team { font-weight: 600; color: var(--ink); }
.wcb-odds-imp {
	color: var(--ink-4);
	font-size: 0.7rem;
	text-align: right;
}
.wcb-odds-price {
	text-align: right;
	color: var(--ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.wcb-odds-table tr.is-fav .wcb-odds-price { color: var(--red); }
.wcb-odds-table tr.is-fav .wcb-odds-team { color: var(--red); }

/* Facts list */
.wcb-facts {
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	padding: 12px 14px;
}
.wcb-facts dt {
	font-size: 0.72rem;
	color: var(--ink-3);
	font-weight: 500;
}
.wcb-facts dd {
	margin: 0;
	font-size: 0.76rem;
	color: var(--ink);
	font-weight: 600;
	text-align: right;
}

/* ==========================================================================
   FULL-WIDTH SCHEDULE
   ========================================================================== */
/* ==========================================================================
   FULL-WIDTH OUTRIGHT BOARD (replaces sticky right-rail panel)
   ========================================================================== */
.wcb-outright-section {
	background: var(--surf);
	border-top: 1px solid var(--line);
	padding: 32px 0;
}
.wcb-outright-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wcb-outright-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.wcb-outright-head h2 {
	margin: 4px 0 4px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-outright-head p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--ink-3);
	max-width: 60ch;
}
.wcb-outright-head .wcb-sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0;
}
.wcb-outright-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
}
.wcb-outright-row {
	display: grid;
	grid-template-columns: 36px 28px 1fr auto auto auto;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: 0.88rem;
	transition: background 120ms;
}
.wcb-outright-row:hover { background: var(--surf-2); }
.wcb-outright-row.is-fav { background: var(--red-soft); }
.wcb-outright-row.is-fav:hover { background: var(--red-soft); }
.wcb-outright-grid > .wcb-outright-row:nth-child(3n) { border-right: 0; }
.wcb-outright-grid > .wcb-outright-row:nth-last-child(-n+3) { border-bottom: 0; }
.wcb-outright-pos { color: var(--ink-3); font-weight: 700; font-size: 0.78rem; }
.wcb-outright-flag { font-size: 1.2rem; line-height: 1; }
.wcb-outright-team { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wcb-outright-row.is-fav .wcb-outright-team { color: var(--red); }
.wcb-outright-tag {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 6px;
	background: var(--red-soft);
	border-radius: var(--r-1);
	white-space: nowrap;
}
.wcb-outright-imp {
	font-size: 0.72rem;
	color: var(--ink-4);
}
.wcb-outright-odds {
	font-weight: 800;
	color: var(--ink);
}
.wcb-outright-row.is-fav .wcb-outright-odds { color: var(--red); }
@media (max-width: 1199px) { .wcb-outright-grid { grid-template-columns: repeat(2, 1fr); }
	.wcb-outright-grid > .wcb-outright-row:nth-child(3n) { border-right: 1px solid var(--line); }
	.wcb-outright-grid > .wcb-outright-row:nth-child(2n) { border-right: 0; }
	.wcb-outright-grid > .wcb-outright-row:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
	.wcb-outright-grid > .wcb-outright-row:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 720px) { .wcb-outright-grid { grid-template-columns: 1fr; }
	.wcb-outright-grid > .wcb-outright-row { border-right: 0 !important; }
	.wcb-outright-grid > .wcb-outright-row:last-child { border-bottom: 0; }
}

.wcb-schedule {
	border-top: 1px solid var(--line);
	background: var(--surf-2);
	padding: 32px 0;
}
.wcb-schedule-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wcb-schedule-table-wrap {
	overflow-x: auto;
}

/* ==========================================================================
   AUTHOR BLOCK + E-E-A-T STRIP
   ========================================================================== */
.wcb-eeat-strip {
	margin: 28px 0 0;
	padding: 16px 18px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
}
.wcb-eeat-line {
	font-size: 0.82rem;
	color: var(--ink-3);
	margin-bottom: 12px;
}
.wcb-eeat-line span { color: var(--ink-4); }
.wcb-eeat-line strong { color: var(--ink); font-weight: 700; }
.wcb-eeat-line a { color: var(--ink); text-decoration: none; }
.wcb-eeat-line a:hover strong { color: var(--red); }
.wcb-eeat-line time { font-family: var(--mono); color: var(--ink-2); }

.wcb-author-block {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	align-items: start;
}
.wcb-author-mark {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ink);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--mono);
	font-size: 1rem;
	text-decoration: none;
}
.wcb-author-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wcb-author-body { min-width: 0; }
.wcb-author-name {
	font-size: 0.9rem;
	color: var(--ink);
	margin-bottom: 2px;
}
.wcb-author-name a { color: inherit; text-decoration: none; }
.wcb-author-name a:hover strong { color: var(--red); }
.wcb-author-meta {
	font-size: 0.78rem;
	color: var(--ink-3);
	margin-bottom: 6px;
}
.wcb-author-long {
	font-size: 0.85rem;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 6px 0 8px;
}
.wcb-author-social {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.wcb-author-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 28px;
	padding: 0 8px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.wcb-author-social a:hover { border-color: var(--ink); }

/* ==========================================================================
   AUTHOR ARCHIVE PAGE (author.php)
   ========================================================================== */
.wcb-author-hero {
	background: var(--surf);
	border-bottom: 1px solid var(--line);
	padding: 24px 1.25rem 32px;
}
.wcb-author-hero-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	align-items: center;
}
.wcb-author-hero-photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ink);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--mono);
	font-size: 2.5rem;
}
.wcb-author-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.wcb-author-hero-short {
	margin: 6px 0 14px;
	font-size: 1.05rem;
	color: var(--ink-3);
	line-height: 1.5;
	max-width: 56ch;
}
.wcb-author-hero-meta {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.wcb-author-hero-meta > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wcb-author-hero-meta span {
	font-size: 0.62rem;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.wcb-author-hero-meta strong { color: var(--ink); font-weight: 700; font-size: 0.92rem; }
.wcb-author-hero-social { display: flex; gap: 8px; flex-wrap: wrap; }
.wcb-author-hero-social a {
	padding: 6px 14px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
}
.wcb-author-hero-social a:hover { border-color: var(--ink); }

.wcb-author-about,
.wcb-author-posts,
.wcb-author-policy {
	margin-bottom: 28px;
}
.wcb-author-about p,
.wcb-author-policy p {
	font-size: 0.95rem;
	color: var(--ink-2);
	line-height: 1.65;
}

@media (max-width: 720px) {
	.wcb-author-hero-inner { grid-template-columns: 1fr; text-align: left; }
	.wcb-author-hero-photo { width: 96px; height: 96px; }
}

/* ==========================================================================
   AUTO TABLE OF CONTENTS + RELATED-CONTENT BLOCK
   ========================================================================== */
.wcb-toc {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--red);
	border-radius: var(--r-2);
}
.wcb-toc strong {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	margin-bottom: 8px;
}
.wcb-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}
.wcb-toc li {
	counter-increment: toc;
	padding: 4px 0 4px 30px;
	position: relative;
	font-size: 0.88rem;
	line-height: 1.4;
	border-top: 1px dashed var(--line);
	margin: 0;
}
.wcb-toc li:first-child { border-top: 0; }
.wcb-toc li::before {
	content: counter( toc, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 4px;
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--red);
	font-weight: 700;
}
.wcb-toc li.wcb-toc-sub { padding-left: 50px; font-size: 0.82rem; color: var(--ink-3); }
.wcb-toc li.wcb-toc-sub::before { left: 22px; opacity: 0.6; }
.wcb-toc a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.wcb-toc a:hover { color: var(--red); }
.wcb-toc-sub a { font-weight: 500; }

.wcb-related-block {
	margin: 36px 0 0;
	padding: 18px 22px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
}
.wcb-related-block h3 {
	margin: 0 0 12px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
}
.wcb-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.wcb-related-list li {
	border-top: 1px solid var(--line);
	padding: 0;
	margin: 0;
}
.wcb-related-list li:nth-child(2n) { border-left: 1px solid var(--line); }
.wcb-related-list li:nth-child(-n+2) { border-top: 0; }
.wcb-related-list a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	text-decoration: none;
	color: var(--ink);
	transition: background 120ms;
}
.wcb-related-list a:hover { background: var(--surf-2); }
.wcb-related-list strong { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.wcb-related-list span { font-size: 0.78rem; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 720px) {
	.wcb-related-list { grid-template-columns: 1fr; }
	.wcb-related-list li:nth-child(2n) { border-left: 0; }
	.wcb-related-list li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   NEWS SOURCES + FACT-CHECK BLOCK (E-E-A-T on single news)
   ========================================================================== */
.wcb-news-sources {
	margin: 24px 0 0;
	padding: 16px 20px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
}
.wcb-news-sources h3 {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
}
.wcb-news-sources ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.wcb-news-sources li {
	margin: 0;
	padding: 0;
	border-top: 1px dashed var(--line);
}
.wcb-news-sources li:first-child { border-top: 0; }
.wcb-news-sources a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.88rem;
	transition: color 120ms;
}
.wcb-news-sources a:hover {
	color: var(--red);
}
.wcb-news-source-label {
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}
.wcb-news-source-arrow {
	color: var(--red);
	font-weight: 700;
	flex-shrink: 0;
	transition: transform 120ms;
}
.wcb-news-sources a:hover .wcb-news-source-arrow { transform: translateX(2px); }

.wcb-news-fact-check {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: var(--green-soft);
	border: 1px solid rgba(22, 163, 74, 0.2);
	border-radius: var(--r-2);
	font-size: 0.82rem;
	color: var(--ink-2);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.wcb-news-fact-check a { color: var(--green); text-decoration: none; }
.wcb-news-fact-check time { font-family: var(--mono); }

/* ==========================================================================
   SEO LONGFORM BLOCKS (rendered via inc/seo-content.php)
   ========================================================================== */
.wcb-seo-block {
	margin: 36px 0 0;
	padding: 24px 28px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
}
.wcb-seo-block h2 {
	margin: 0 0 12px;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-seo-block h3 {
	margin: 24px 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.wcb-seo-block p {
	margin: 0 0 12px;
	font-size: 0.95rem;
	color: var(--ink-2);
	line-height: 1.65;
}
.wcb-seo-block strong { color: var(--ink); font-weight: 700; }
.wcb-seo-block a { color: var(--red); text-decoration: none; font-weight: 600; }
.wcb-seo-block a:hover { text-decoration: underline; }
.wcb-seo-block ul, .wcb-seo-block ol { padding-left: 22px; margin: 0 0 14px; }
.wcb-seo-block li { font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 6px; }

/* Tables inside SEO blocks */
.wcb-seo-block .wcb-seo-table,
.wcb-seo-table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0 18px;
	font-size: 0.85rem;
}
.wcb-seo-block .wcb-seo-table thead th,
.wcb-seo-table thead th {
	padding: 10px 12px;
	text-align: left;
	background: var(--surf-2);
	color: var(--ink-3);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--line);
}
.wcb-seo-block .wcb-seo-table tbody td,
.wcb-seo-table tbody td {
	padding: 10px 12px;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	vertical-align: top;
}
.wcb-seo-block .wcb-seo-table tbody td:first-child,
.wcb-seo-table tbody td:first-child {
	color: var(--ink);
	font-weight: 600;
}
.wcb-schedule-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.wcb-schedule-head h2 {
	margin: 0 0 2px;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.wcb-schedule-head p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--ink-3);
}
.wcb-schedule-tabs {
	display: inline-flex;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	padding: 2px;
}
.wcb-schedule-tabs button {
	padding: 5px 12px;
	background: transparent;
	border: 0;
	color: var(--ink-3);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	border-radius: var(--r-1);
	cursor: pointer;
}
.wcb-schedule-tabs button.is-active {
	background: var(--ink);
	color: white;
}

.wcb-schedule-table-wrap {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow-x: auto;
}
.wcb-schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}
.wcb-schedule-table thead th {
	padding: 10px 14px;
	text-align: left;
	background: var(--surf-2);
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.wcb-schedule-table thead th.ra,
.wcb-schedule-table tbody td.ra { text-align: right; }
.wcb-schedule-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	white-space: nowrap;
}
.wcb-schedule-table tbody tr:last-child td { border-bottom: 0; }
.wcb-schedule-table tbody tr:hover { background: var(--surf-2); }
.wcb-sched-stage {
	display: inline-block;
	padding: 2px 8px;
	background: var(--surf-3);
	color: var(--ink-3);
	border-radius: var(--r-1);
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.wcb-sched-match {
	font-weight: 600;
	color: var(--ink);
}
.wcb-sched-match strong { font-weight: 700; }
.wcb-sched-vs { color: var(--ink-4); font-weight: 400; margin: 0 4px; font-size: 0.82rem; }
.wcb-sched-venue { color: var(--ink-3); font-size: 0.8rem; }
.wcb-sched-more {
	color: var(--red);
	font-weight: 600;
	font-size: 0.8rem;
	text-decoration: none;
}
.wcb-sched-more:hover { text-decoration: underline; }

/* ==========================================================================
   ARTICLE ZONE (SEO + FAQ)
   ========================================================================== */
.wcb-article {
	padding: 40px 0 60px;
	border-top: 1px solid var(--line);
}
.wcb-article-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wcb-article-head {
	max-width: 720px;
	margin-bottom: 24px;
}
.wcb-article-eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}
.wcb-article-head h2 {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
}
.wcb-article-head p {
	margin: 0;
	font-size: 1rem;
	color: var(--ink-3);
	line-height: 1.5;
	max-width: 60ch;
}
.wcb-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	margin-top: 20px;
}
.wcb-article-main h3 {
	margin: 28px 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.015em;
}
.wcb-article-main h3:first-child { margin-top: 0; }
.wcb-article-main p {
	margin: 0 0 12px;
	font-size: 0.95rem;
	color: var(--ink-2);
	line-height: 1.6;
}
.wcb-article-main strong { color: var(--ink); font-weight: 700; }
.wcb-article-ol {
	counter-reset: art;
	list-style: none;
	padding: 0;
	margin: 12px 0 20px;
}
.wcb-article-ol li {
	counter-increment: art;
	position: relative;
	padding: 10px 0 10px 36px;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
	color: var(--ink-2);
	line-height: 1.5;
}
.wcb-article-ol li:last-child { border-bottom: 0; }
.wcb-article-ol li::before {
	content: counter(art, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 10px;
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--red);
	font-weight: 700;
}
.wcb-article-ol strong { color: var(--ink); }
.wcb-article-main a { color: var(--red); text-decoration: none; font-weight: 600; }
.wcb-article-main a:hover { text-decoration: underline; }

/* FAQ detail */
.wcb-article-faq {
	border-bottom: 1px solid var(--line);
}
.wcb-article-faq:last-child { border-bottom: 0; }
.wcb-article-faq summary {
	padding: 12px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
}
.wcb-article-faq summary::-webkit-details-marker { display: none; }
.wcb-article-faq summary span {
	color: var(--ink-4);
	font-weight: 400;
	font-size: 1rem;
	transition: transform 160ms;
}
.wcb-article-faq[open] summary span { transform: rotate(45deg); }
.wcb-article-faq > div {
	padding: 0 14px 14px;
	font-size: 0.82rem;
	color: var(--ink-3);
	line-height: 1.5;
}
.wcb-article-faq code {
	font-family: var(--mono);
	padding: 1px 5px;
	background: var(--amber-soft);
	color: var(--amber);
	border-radius: var(--r-1);
	font-size: 0.82em;
}

.wcb-article-author {
	margin-top: 32px;
	padding: 18px 20px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
}
.wcb-article-author-mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ink);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}
.wcb-article-author strong { color: var(--ink); font-weight: 700; }
.wcb-article-author p {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--ink-3);
	font-style: italic;
	line-height: 1.5;
}

.wcb-seo-table-wrap {
	margin: 16px 0;
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
}
.wcb-seo-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}
.wcb-seo-table thead th {
	padding: 10px 12px;
	background: var(--surf-2);
	text-align: left;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.wcb-seo-table tbody td {
	padding: 10px 12px;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
}
.wcb-seo-table tbody td:first-child {
	font-weight: 600;
	color: var(--ink);
}

/* ==========================================================================
   FOOTER (app-style)
   ========================================================================== */
.wcb-appfoot {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.7);
	padding: 32px 0 20px;
	font-size: 0.85rem;
}
.wcb-appfoot-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wcb-appfoot-about {
	margin-bottom: 24px;
	max-width: 500px;
}
.wcb-appfoot-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.wcb-appfoot-logo strong { color: white; font-size: 0.95rem; font-weight: 700; }
.wcb-appfoot-about p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}
.wcb-appfoot-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 24px;
}
.wcb-appfoot-links h5 {
	color: white;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 10px;
}
.wcb-appfoot-links ul { list-style: none; padding: 0; margin: 0; }
.wcb-appfoot-links li { margin-bottom: 0.4rem; }
.wcb-appfoot-links a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	font-size: 0.8rem;
}
.wcb-appfoot-links a:hover { color: white; }
.wcb-appfoot-bottom {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.4);
}
.wcb-appfoot-regs { font-family: var(--mono); }

/* ==========================================================================
   FLOATING CLAIM BAR (mobile only)
   ========================================================================== */
.wcb-claimbar {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 74px;
	z-index: 900;
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--navy);
	color: white;
	border-radius: var(--r-3);
	box-shadow: 0 10px 30px rgba(36, 52, 71, 0.25);
	transform: translateY(calc(100% + 80px));
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wcb-claimbar.is-visible { transform: translateY(0); }
.wcb-claimbar.is-dismissed { display: none !important; }
.wcb-claimbar-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}
.wcb-claimbar-info strong {
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-claimbar-info span {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-claimbar-btn { padding: 0.5rem 0.9rem !important; font-size: 0.78rem; }
.wcb-claimbar-close {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	color: white;
	font-size: 1rem;
	cursor: pointer;
	flex-shrink: 0;
}

/* ==========================================================================
   BOTTOM TAB BAR (mobile only)
   ========================================================================== */
.wcb-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	display: none;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-top: 1px solid var(--line);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	justify-content: space-around;
	align-items: center;
}
.wcb-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 4px;
	text-decoration: none;
	color: var(--ink-4);
	font-size: 0.6rem;
	font-weight: 600;
	border-radius: var(--r-2);
	min-height: 48px;
	justify-content: center;
}
.wcb-tab.is-active { color: var(--ink); }
.wcb-tab.is-active svg { color: var(--red); }
.wcb-tab-primary .wcb-tab-primary-inner {
	width: 42px;
	height: 42px;
	border-radius: var(--r-3);
	background: var(--red);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -4px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
	.wcb-ws { grid-template-columns: 260px 1fr; }
	.wcb-ws-right { display: none; }
	.wcb-appbar-search { width: 200px; }
	.wcb-appbar-nav a:nth-last-child(-n+2) { display: none; }
}

@media (max-width: 899px) {
	.wcb-appbar-inner { grid-template-columns: auto 1fr auto; }
	.wcb-appbar-nav { display: none; }
	.wcb-appbar-search { display: none; }
	.wcb-appbar-cta { display: none; }
	.wcb-appbar-more { display: flex; }

	.wcb-status { height: auto; padding: 6px 0; }
	.wcb-status-inner { flex-wrap: wrap; gap: 0.5rem; font-size: 0.68rem; }
	.wcb-status-ticker { display: none; }

	.wcb-hero3 { padding: 16px 12px; }
	.wcb-hero3-inner { grid-template-columns: 1fr; gap: 12px; }
	.wcb-hero3-main { padding: 18px 16px; }
	.wcb-hero3-title { font-size: 1.85rem; }
	.wcb-hero3-lede { font-size: 0.88rem; }
	.wcb-hero3-meta { grid-template-columns: 1fr 1fr; }
	.wcb-hero3-meta > div:nth-child(2n) { border-right: 0; }
	.wcb-hero3-meta > div:nth-child(n+3) { border-top: 1px solid var(--line); }
	.wcb-hero3-cta-row { flex-direction: column; align-items: stretch; gap: 8px; }
	.wcb-hero3-cta-row .wcb-btn { justify-content: center; }
	.wcb-hero3-code { justify-content: center; }

	.wcb-ws { grid-template-columns: 1fr; padding: 16px 12px; gap: 14px; }
	.wcb-ws-left, .wcb-ws-right { position: static; }

	.wcb-mod-grid { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 14px 6px; }
	.wcb-mod-flag { font-size: 1.9rem; }
	.wcb-mod-name { font-size: 0.85rem; }
	.wcb-mod-odd { font-size: 1.3rem; }

	.wcb-pick-row {
		grid-template-columns: 1fr auto;
		gap: 4px 12px;
		padding: 12px 14px;
	}
	.wcb-pick-row > * { grid-column: 1 / 2; }
	.wcb-pick-date { font-size: 0.68rem; order: 1; }
	.wcb-pick-stage { order: 2; }
	.wcb-pick-match { order: 3; font-size: 0.88rem; margin-top: 2px; }
	.wcb-pick-tip { order: 4; font-size: 0.72rem; }
	.wcb-pick-odd { grid-column: 2 / 3; grid-row: 1 / 5; align-self: center; }

	.wcb-cas-inline {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.wcb-cas-inline-meta { grid-column: 1 / 2; }
	.wcb-cas-inline-cta { grid-column: 1 / 2; }
	.wcb-cas-inline-cta .wcb-btn { width: 100%; justify-content: center; }
	.wcb-cas-inline-pros { gap: 6px; }

	.wcb-news2 { grid-template-columns: 1fr; }
	.wcb-news2-item { border-right: 0; }
	.wcb-news2-item:nth-last-child(-n+1) { border-bottom: 0; }
	.wcb-news2-item:last-child { border-bottom: 0; }

	.wcb-schedule { padding: 20px 0; }
	.wcb-schedule-table-wrap { overflow-x: auto; }
	.wcb-schedule-table { min-width: 900px; }

	.wcb-article { padding: 28px 0 40px; }
	.wcb-article-grid { grid-template-columns: 1fr; gap: 20px; }

	.wcb-appfoot-links { grid-template-columns: 1fr 1fr; gap: 20px; }

	.wcb-tabbar { display: flex; }
	body.wcb-app { padding-bottom: 76px; }
}

@media (max-width: 480px) {
	.wcb-hero3-title { font-size: 1.6rem; }
	.wcb-mod-team { gap: 2px; }
	.wcb-cd-u strong { font-size: 1.5rem; }
}

/* ==========================================================================
   COMPARE TOP 5 STRIP — directly under hero, conversion priority
   ========================================================================== */
.wcb-top5 {
	max-width: 1440px;
	margin: 16px auto 0;
	padding: 0 1.25rem;
}
.wcb-top5-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	padding: 0 2px;
}
.wcb-top5-head h2 {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.wcb-top5-head h2 strong { color: var(--ink); }
.wcb-top5-head a {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--red);
	text-decoration: none;
}
.wcb-top5-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
.wcb-top5-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 12px 10px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 120ms, transform 120ms;
	position: relative;
}
.wcb-top5-card:hover {
	border-color: var(--ink-3);
	transform: translateY(-1px);
}
.wcb-top5-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wcb-top5-rank {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-4);
}
.wcb-top5-card.is-top .wcb-top5-rank { color: var(--red); }
.wcb-top5-score {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--green);
	padding: 2px 7px;
	background: var(--green-soft);
	border-radius: var(--r-1);
}
.wcb-top5-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.015em;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-top5-bonus {
	font-size: 0.78rem;
	color: var(--ink-2);
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
.wcb-top5-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 7px 12px;
	background: var(--red);
	color: white;
	border-radius: var(--r-2);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background 120ms;
}
.wcb-top5-card:hover .wcb-top5-cta { background: var(--red-2); }

@media (max-width: 1199px) {
	.wcb-top5-grid { grid-template-columns: repeat(3, 1fr); }
	.wcb-top5-card:nth-child(n+4) { display: none; }
}
@media (max-width: 899px) {
	.wcb-top5 { padding: 0 12px; margin-top: 12px; }
	.wcb-top5-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.wcb-top5-card:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
	.wcb-top5-grid { grid-template-columns: 1fr; }
}

/* Hero responsive overrides for the new compact layout */
@media (max-width: 899px) {
	.wcb-hero3 { padding: 16px 12px; }
	.wcb-hero3-main { padding: 18px 16px; grid-template-columns: 1fr; }
	.wcb-hero3-bonus { flex-direction: column; align-items: stretch; gap: 8px; }
	.wcb-hero3-meta { gap: 12px; }
}

/* ==========================================================================
   NEWS SLIDER — top of page, 3 rotating cards
   ========================================================================== */
.wcb-news-hero {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 1.25rem 0;
}
.wcb-news-slider {
	position: relative;
	border-radius: var(--r-4);
	overflow: hidden;
	background: var(--surf-3);
	border: 1px solid var(--line);
}
.wcb-news-track {
	display: flex;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.wcb-news-slide {
	flex: 0 0 100%;
	min-width: 0;
	min-height: 360px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 32px 36px 36px;
	background-size: cover;
	background-position: center;
	background-color: var(--navy);
	text-decoration: none;
	color: white;
	overflow: hidden;
}
.wcb-news-slide-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.0) 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.92) 100%),
		linear-gradient(90deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0) 60%);
	z-index: 1;
}
.wcb-news-slide-body {
	position: relative;
	z-index: 2;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wcb-news-slide-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}
.wcb-news-slide-cat {
	display: inline-block;
	padding: 4px 10px;
	background: var(--red);
	color: white;
	border-radius: var(--r-1);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wcb-news-slide-date {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}
.wcb-news-slide-title {
	margin: 0;
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: white;
	max-width: 30ch;
}
.wcb-news-slide-ex {
	margin: 0;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.45;
	max-width: 60ch;
}
.wcb-news-slide-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	color: white;
}
.wcb-news-slide:hover .wcb-news-slide-arrow { gap: 10px; transition: gap 200ms; }

/* Demo color backgrounds when no image */
.wcb-news-slide-brazil { background-color: #009c3b; background-image: linear-gradient(135deg, #009c3b 0%, #002776 100%); }
.wcb-news-slide-usa    { background-color: #B22234; background-image: linear-gradient(135deg, #B22234 0%, #3C3B6E 100%); }
.wcb-news-slide-messi  { background-color: #75AADB; background-image: linear-gradient(135deg, #75AADB 0%, #002776 100%); }
.wcb-news-slide-france { background-color: #002654; background-image: linear-gradient(135deg, #002654 0%, #CE1126 100%); }
.wcb-news-slide-picks  { background-color: var(--ink); background-image: linear-gradient(135deg, var(--navy) 0%, var(--red-2) 100%); }
.wcb-news-slide-default { background-color: var(--ink); }

.wcb-news-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	background: rgba(15, 23, 42, 0.5);
	color: white;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms;
}
.wcb-news-nav:hover { background: rgba(15, 23, 42, 0.85); }
.wcb-news-nav-prev { left: 16px; }
.wcb-news-nav-next { right: 16px; }

.wcb-news-dots {
	position: absolute;
	bottom: 14px;
	right: 36px;
	display: flex;
	gap: 6px;
	z-index: 10;
}
.wcb-news-dots button {
	width: 26px;
	height: 3px;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	border-radius: 2px;
	padding: 0;
	transition: background 200ms, width 200ms;
}
.wcb-news-dots button.is-active { background: white; width: 36px; }

@media (max-width: 899px) {
	.wcb-news-hero { padding: 12px 12px 0; }
	.wcb-news-slide { min-height: 280px; padding: 22px 22px 28px; }
	.wcb-news-slide-title { font-size: 1.25rem; }
	.wcb-news-slide-ex { font-size: 0.85rem; }
	.wcb-news-nav { display: none; }
	.wcb-news-dots { right: 22px; bottom: 12px; }
}

/* ==========================================================================
   TOP 5 — extended with logo + claim + review
   ========================================================================== */
.wcb-top5-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	padding: 14px 12px 10px;
}
.wcb-top5-logo {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surf-2);
	border-radius: var(--r-2);
	border: 1px solid var(--line);
	overflow: hidden;
	margin: 2px 0;
}
.wcb-top5-logo img {
	max-width: 75%;
	max-height: 70%;
	object-fit: contain;
}
.wcb-top5-logo-mark {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--ink);
	letter-spacing: 0.04em;
}
.wcb-top5-card.is-top .wcb-top5-logo {
	background: var(--red-soft);
	border-color: #FECACA;
}
.wcb-top5-card.is-top .wcb-top5-logo-mark { color: var(--red); }

.wcb-top5-cta-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}
.wcb-top5-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 9px 12px;
	background: var(--red);
	color: white;
	border-radius: var(--r-2);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 120ms;
}
.wcb-top5-cta:hover { background: var(--red-2); color: white; }
.wcb-top5-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 7px 10px;
	background: var(--surf);
	color: var(--ink-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 120ms, color 120ms;
}
.wcb-top5-review:hover { border-color: var(--ink-3); color: var(--ink); }

/* ==========================================================================
   2-COLUMN WORKSPACE override (Top 10 sidebar removed)
   ========================================================================== */
/* Workspace is single-column on the homepage so the news/picks panels
   match the full width of the Fixture Schedule and Top 10 sections below. */
.wcb-ws-2col {
	grid-template-columns: 1fr;
}

/* ==========================================================================
   TOP 10 BOOKMAKERS — full-width section below schedule
   ========================================================================== */
.wcb-top10 {
	border-top: 1px solid var(--line);
	background: var(--surf);
	padding: 40px 0 32px;
}
.wcb-top10-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.wcb-top10-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.wcb-top10-eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 4px;
}
.wcb-top10-head h2 {
	margin: 0 0 4px;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.wcb-top10-head p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ink-3);
	max-width: 60ch;
	line-height: 1.5;
}

.wcb-top10-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wcb-top10-row {
	display: grid;
	grid-template-columns: 78px 130px minmax(0, 1fr) 90px 200px;
	gap: 18px;
	align-items: center;
	padding: 16px 18px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	transition: border-color 120ms, transform 120ms;
}
.wcb-top10-row:hover {
	border-color: var(--ink-3);
	transform: translateY(-1px);
}
.wcb-top10-row.is-top {
	border-left: 4px solid var(--red);
	padding-left: 14px;
}

.wcb-top10-rank {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wcb-top10-rank-num {
	font-family: var(--mono);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink-3);
}
.wcb-top10-row.is-top .wcb-top10-rank-num { color: var(--red); }
.wcb-top10-rank-label {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wcb-top10-logo {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surf-2);
	border-radius: var(--r-2);
	border: 1px solid var(--line);
	padding: 6px;
	overflow: hidden;
}
.wcb-top10-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.wcb-top10-logo-mark {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--ink);
	letter-spacing: 0.05em;
}

.wcb-top10-info { min-width: 0; }
.wcb-top10-name {
	margin: 0 0 2px;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.015em;
}
.wcb-top10-bonus {
	font-size: 0.88rem;
	color: var(--red);
	font-weight: 700;
	margin-bottom: 8px;
}
/* Payout / code line — sits below the bonus inside the info column so long
   payout strings (e.g. "Crypto: under 1 hour; e-wallet: 24h; bank: 1–3 days")
   wrap naturally without stealing horizontal space from the score column. */
.wcb-top10-info-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--ink-2);
	line-height: 1.4;
}
.wcb-top10-info-meta > span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	flex: 0 1 auto;
	min-width: 0;
}
.wcb-top10-info-meta-lbl {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wcb-top10-info-meta strong {
	color: var(--ink);
	font-weight: 700;
}
.wcb-top10-pros {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.84rem;
}
.wcb-top10-pros li {
	display: grid;
	grid-template-columns: 16px 1fr;
	column-gap: 8px;
	align-items: start;
	color: var(--ink-2);
	line-height: 1.45;
}
.wcb-top10-pros li > svg {
	color: var(--green);
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 4px; /* vertically nudge to align with the first text line */
}

.wcb-top10-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
}
.wcb-top10-score {
	display: inline-flex;
	align-items: baseline;
	padding: 4px 10px;
	background: var(--green-soft);
	color: var(--green);
	border-radius: var(--r-2);
	font-family: var(--mono);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
}
.wcb-top10-score span { font-size: 0.65rem; opacity: 0.8; margin-left: 1px; }
.wcb-top10-meta-rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.72rem;
}
.wcb-top10-meta-rows > div {
	display: flex;
	gap: 6px;
	align-items: baseline;
	justify-content: flex-end;
}
.wcb-top10-meta-rows span {
	color: var(--ink-4);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-size: 0.62rem;
}
.wcb-top10-meta-rows strong {
	color: var(--ink);
	font-weight: 600;
}

.wcb-top10-cta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 200px;
}
.wcb-top10-cta .wcb-btn-primary {
	padding: 10px 14px;
	font-size: 0.85rem;
}
.wcb-top10-review {
	text-align: center;
	font-size: 0.76rem;
	color: var(--ink-3);
	font-weight: 600;
	text-decoration: none;
	padding: 4px;
}
.wcb-top10-review:hover { color: var(--red); }

.wcb-top10-foot {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	font-size: 0.78rem;
	color: var(--ink-3);
	text-align: center;
}
.wcb-top10-foot a { color: var(--red); font-weight: 600; text-decoration: none; }
.wcb-top10-foot a:hover { text-decoration: underline; }

@media (max-width: 1199px) {
	.wcb-top10-row {
		grid-template-columns: 60px 100px minmax(0, 1fr) 180px;
		gap: 14px;
	}
	.wcb-top10-meta { display: none; }
}
@media (max-width: 899px) {
	.wcb-top10 { padding: 28px 0; }
	.wcb-top10-head h2 { font-size: 1.4rem; }
	.wcb-top10-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 14px;
	}
	.wcb-top10-rank {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
	.wcb-top10-rank-num { font-size: 1rem; }
	.wcb-top10-logo {
		height: 50px;
		max-width: 130px;
	}
	.wcb-top10-pros { gap: 5px; }
	.wcb-top10-cta { min-width: 0; }
}

/* ==========================================================================
   SUBPAGE LAYOUT — shared shell for all single/archive pages
   ========================================================================== */
.wcb-sp {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}

/* Subpage hero — small editorial header */
.wcb-sp-hero {
	background: var(--surf);
	border-bottom: 1px solid var(--line);
	padding: 24px 1.25rem 20px;
}
.wcb-sp-hero-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wcb-sp-bc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--ink-3);
	margin-bottom: 4px;
}
.wcb-sp-bc a {
	color: var(--ink-3);
	text-decoration: none;
	font-weight: 500;
}
.wcb-sp-bc a:hover { color: var(--red); }
.wcb-sp-bc-sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ink-4);
	margin: 0 2px;
}
.wcb-sp-bc > span:last-child {
	color: var(--ink);
	font-weight: 600;
}

.wcb-sp-eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.wcb-sp-title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
}
.wcb-sp-sub {
	margin: 0;
	font-size: 1rem;
	color: var(--ink-3);
	max-width: 70ch;
	line-height: 1.5;
}

/* Stats strip in subpage hero */
.wcb-sp-stats {
	display: flex;
	gap: 24px;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
}
.wcb-sp-stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wcb-sp-stats span {
	font-size: 0.62rem;
	color: var(--ink-4);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.wcb-sp-stats strong {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--ink);
}

/* Subpage body wrapper — 2-column with sidebar */
.wcb-sp-body {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 1.25rem 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}
.wcb-sp-body-narrow {
	grid-template-columns: minmax(0, 720px) 320px;
	justify-content: center;
}
.wcb-sp-body-full {
	grid-template-columns: 1fr;
}
.wcb-sp-aside {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Subpage main article styling */
.wcb-sp-main {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	padding: 28px 32px;
}
.wcb-sp-main h2 {
	margin: 28px 0 12px;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-sp-main h2:first-child { margin-top: 0; }
.wcb-sp-main h3 {
	margin: 24px 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.015em;
}
.wcb-sp-main p {
	margin: 0 0 14px;
	font-size: 0.95rem;
	color: var(--ink-2);
	line-height: 1.65;
}
.wcb-sp-main strong { color: var(--ink); font-weight: 700; }
.wcb-sp-main a { color: var(--red); text-decoration: none; font-weight: 600; }
.wcb-sp-main a:hover { text-decoration: underline; }
.wcb-sp-main ul, .wcb-sp-main ol { margin: 0 0 14px 18px; padding: 0; }
.wcb-sp-main li {
	margin-bottom: 6px;
	font-size: 0.95rem;
	color: var(--ink-2);
	line-height: 1.6;
}
.wcb-sp-main blockquote {
	margin: 18px 0;
	padding: 14px 18px;
	background: var(--surf-2);
	border-left: 3px solid var(--red);
	border-radius: 0 var(--r-2) var(--r-2) 0;
	color: var(--ink-2);
	font-size: 0.95rem;
	line-height: 1.55;
}
.wcb-sp-main img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-2);
	margin: 14px 0;
}

/* ==========================================================================
   SINGLE CASINO — review page
   ========================================================================== */
.wcb-sc-hero {
	background: var(--surf);
	border-bottom: 1px solid var(--line);
	padding: 28px 1.25rem 24px;
}
.wcb-sc-hero-inner {
	max-width: 1440px;
	margin: 0 auto;
}
.wcb-sc-card {
	background: var(--surf);
	border: 1px solid var(--line);
	border-left: 4px solid var(--red);
	border-radius: var(--r-4);
	padding: 24px 28px;
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 20px;
	align-items: center;
}
.wcb-sc-logo {
	width: 100px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surf-2);
	border-radius: var(--r-2);
	border: 1px solid var(--line);
	overflow: hidden;
	padding: 6px;
}
.wcb-sc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wcb-sc-logo-mark {
	font-family: var(--mono);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: 0.05em;
}
.wcb-sc-info { min-width: 0; }
.wcb-sc-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.wcb-sc-tags a {
	padding: 3px 9px;
	background: var(--surf-2);
	color: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: var(--r-1);
	font-size: 0.7rem;
	font-weight: 600;
	text-decoration: none;
}
.wcb-sc-tags a:hover { color: var(--red); border-color: var(--red); }
.wcb-sc-name {
	margin: 0 0 6px;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink);
	line-height: 1.05;
}
.wcb-sc-tagline {
	margin: 0 0 8px;
	font-size: 0.95rem;
	color: var(--ink-3);
	line-height: 1.4;
}
.wcb-sc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.78rem;
	color: var(--ink-3);
}
.wcb-sc-meta span strong { color: var(--ink); font-weight: 700; }
.wcb-sc-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 200px;
}
.wcb-sc-rating {
	display: inline-flex;
	align-items: baseline;
	padding: 4px 12px;
	background: var(--green-soft);
	color: var(--green);
	border-radius: var(--r-2);
	font-family: var(--mono);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1;
}
.wcb-sc-rating span { font-size: 0.65rem; opacity: 0.85; margin-left: 1px; }
.wcb-sc-bonus-mini {
	font-size: 0.78rem;
	color: var(--ink);
	font-weight: 700;
	text-align: right;
	max-width: 240px;
}

.wcb-sc-subnav {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	margin-bottom: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}
.wcb-sc-subnav::-webkit-scrollbar { display: none; }
.wcb-sc-subnav a {
	padding: 6px 12px;
	background: transparent;
	color: var(--ink-3);
	border-radius: var(--r-1);
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.wcb-sc-subnav a:hover { background: var(--surf); color: var(--ink); }
.wcb-sc-subnav a.active { background: var(--ink); color: white; }

.wcb-sc-section {
	scroll-margin-top: 100px;
	margin-bottom: 28px;
}

/* Pros & cons grid */
.wcb-pc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.wcb-pc-block {
	padding: 16px 18px;
	border-radius: var(--r-3);
	border: 1px solid var(--line);
}
.wcb-pc-block-pros { background: var(--green-soft); border-color: rgba(22, 163, 74, 0.2); }
.wcb-pc-block-cons { background: var(--red-soft); border-color: rgba(220, 38, 38, 0.2); }
.wcb-pc-block h4 {
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
}
.wcb-pc-block-pros h4 { color: var(--green); }
.wcb-pc-block-cons h4 { color: var(--red); }
.wcb-pc-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wcb-pc-block li {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	font-size: 0.85rem;
	color: var(--ink-2);
	line-height: 1.45;
	padding-left: 18px;
	position: relative;
}
.wcb-pc-block-pros li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--green);
	font-weight: 800;
}
.wcb-pc-block-cons li::before {
	content: '−';
	position: absolute;
	left: 0;
	color: var(--red);
	font-weight: 800;
	font-size: 1.1em;
	line-height: 1;
}

/* Detailed ratings bars */
.wcb-rt-grid {
	display: grid;
	gap: 8px;
}
.wcb-rt-row {
	display: grid;
	grid-template-columns: 130px 1fr 50px;
	gap: 14px;
	align-items: center;
}
.wcb-rt-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
}
.wcb-rt-bar {
	height: 6px;
	background: var(--surf-2);
	border-radius: 999px;
	overflow: hidden;
}
.wcb-rt-bar span {
	display: block;
	height: 100%;
	background: var(--red);
	border-radius: 999px;
	transition: width 800ms ease-out;
}
.wcb-rt-score {
	font-family: var(--mono);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
	text-align: right;
}

/* Bonus deep-dive box */
.wcb-bd {
	padding: 18px 20px;
	background: var(--red-soft);
	border: 1px solid #FECACA;
	border-radius: var(--r-3);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wcb-bd-h {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.wcb-bd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	padding: 10px;
	background: var(--surf);
	border-radius: var(--r-2);
}
.wcb-bd-grid > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}
.wcb-bd-grid span {
	font-size: 0.62rem;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.wcb-bd-grid strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
}
.wcb-bd-terms {
	font-size: 0.78rem;
	color: var(--ink-3);
	line-height: 1.5;
}

/* Verdict box */
.wcb-vd {
	margin-top: 28px;
	padding: 28px;
	background: var(--green-soft);
	border: 1px solid rgba(22, 163, 74, 0.2);
	border-radius: var(--r-3);
	text-align: center;
}
.wcb-vd-score {
	font-family: var(--mono);
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--green);
	line-height: 1;
	margin-bottom: 8px;
}
.wcb-vd-score span { font-size: 1.2rem; color: var(--ink-3); }
.wcb-vd p { font-size: 1rem; color: var(--ink); margin: 0 0 16px; line-height: 1.5; }

/* Sidebar list of similar casinos */
.wcb-sb-cas-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: background 120ms;
}
.wcb-sb-cas-row:hover { background: var(--surf-2); }
.wcb-sb-cas-row:last-child { border-bottom: 0; }
.wcb-sb-cas-logo {
	width: 36px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-1);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--ink);
}
.wcb-sb-cas-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wcb-sb-cas-name {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-sb-cas-bonus {
	font-size: 0.7rem;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-sb-cas-score {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--green);
	padding: 2px 6px;
	background: var(--green-soft);
	border-radius: var(--r-1);
}

/* Quick facts <dl> in sidebar */
.wcb-sb-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	padding: 12px 14px;
	margin: 0;
}
.wcb-sb-facts dt {
	font-size: 0.72rem;
	color: var(--ink-3);
	font-weight: 500;
}
.wcb-sb-facts dd {
	margin: 0;
	font-size: 0.78rem;
	color: var(--ink);
	font-weight: 600;
	text-align: right;
}

/* ==========================================================================
   PREDICTION HERO + SINGLE
   ========================================================================== */
.wcb-pred-hero {
	background: var(--surf);
	border-bottom: 1px solid var(--line);
	padding: 28px 1.25rem 28px;
}
.wcb-pred-hero-card {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	background: var(--navy);
	border: 1px solid var(--navy-2);
	border-radius: var(--r-4);
	padding: 26px 28px;
	color: #fff;
	box-shadow: 0 12px 32px -16px rgba(36, 52, 71, 0.45);
}
.wcb-pred-hero-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.wcb-pred-hero-stage {
	padding: 4px 11px;
	background: #fff;
	color: var(--navy);
	border-radius: 999px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.65rem;
}
.wcb-pred-hero-when {
	font-family: var(--mono);
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}
.wcb-pred-hero-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
}
.wcb-pred-hero-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.wcb-pred-hero-team-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: #fff;
	border-radius: 999px;
	font-size: 2.4rem;
	line-height: 1;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.wcb-pred-hero-team-name {
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}
.wcb-pred-hero-team-odd {
	font-family: var(--mono);
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
}
.wcb-pred-hero-team-lbl {
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.wcb-pred-hero-mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.wcb-pred-hero-vs {
	font-family: var(--mono);
	font-size: 1.1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.08em;
}
.wcb-pred-hero-draw {
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--r-2);
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.85);
}
.wcb-pred-hero-draw strong { font-family: var(--mono); color: #fff; }
.wcb-pred-hero-venue {
	margin-top: 14px;
	padding: 8px 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.2);
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* Pick block on prediction page (sits inside the navy hero card) */
.wcb-pred-pick {
	margin-top: 14px;
	padding: 18px 22px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-3);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	color: #fff;
}
.wcb-pred-pick-call { min-width: 0; }
.wcb-pred-pick-lbl {
	font-size: 0.65rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.wcb-pred-pick-val {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
	margin-top: 2px;
}
.wcb-pred-pick-conf {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 4px;
}
.wcb-pred-pick-conf strong { color: #fff; }

/* Right column: bookmaker logo pill + CTA button */
.wcb-pred-pick-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
}
.wcb-pred-pick-cta-tag {
	align-self: flex-start;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
}
.wcb-pred-pick-cta-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	min-height: 56px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
	transition: transform 120ms;
}
.wcb-pred-pick-cta-pill:hover { transform: translateY(-1px); }
.wcb-pred-pick-cta-pill img {
	max-height: 36px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.wcb-pred-pick-cta-name {
	color: var(--ink);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: -0.01em;
}
.wcb-pred-pick-cta-btn {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   NEWS SINGLE
   ========================================================================== */
.wcb-news-single { background: var(--surf); }
.wcb-news-single-head {
	background: var(--surf);
	border-bottom: 1px solid var(--line);
	padding: 28px 1.25rem 24px;
}
.wcb-news-single-head-inner {
	max-width: 1440px;
	margin: 0 auto;
}
.wcb-news-single-cat {
	display: inline-block;
	padding: 4px 10px;
	background: var(--red);
	color: white;
	border-radius: var(--r-1);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
	text-decoration: none;
}
.wcb-news-single-h {
	margin: 0 0 14px;
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
}
.wcb-news-single-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--ink-3);
}
.wcb-news-single-meta strong { color: var(--ink); font-weight: 700; }
.wcb-news-single-meta time { font-family: var(--mono); }

.wcb-news-single-img-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 1.25rem 0;
}
.wcb-news-single-img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--r-3);
	border: 1px solid var(--line);
}

.wcb-news-share {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 14px 16px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	font-size: 0.85rem;
}
.wcb-news-share strong { color: var(--ink); font-weight: 700; margin-right: 4px; }
.wcb-news-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
}
.wcb-news-share a:hover { background: var(--ink); color: white; border-color: var(--ink); }

.wcb-news-author {
	margin-top: 24px;
	padding: 18px 20px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
}
.wcb-news-author-mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ink);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--mono);
	font-size: 0.82rem;
}
.wcb-news-author strong { color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.wcb-news-author p {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--ink-3);
	line-height: 1.5;
}

/* News archive grid (asymmetric) */
.wcb-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.wcb-news-grid-item {
	display: flex;
	flex-direction: column;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 120ms, transform 120ms;
}
.wcb-news-grid-item:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.wcb-news-grid-img {
	aspect-ratio: 16 / 10;
	background: var(--ink);
	background-size: cover;
	background-position: center;
}
.wcb-news-grid-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wcb-news-grid-meta {
	display: flex;
	gap: 8px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wcb-news-grid-cat { color: var(--red); }
.wcb-news-grid-date { color: var(--ink-4); font-family: var(--mono); }
.wcb-news-grid-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.wcb-news-grid-ex {
	margin: 0;
	font-size: 0.82rem;
	color: var(--ink-3);
	line-height: 1.45;
	flex: 1;
}

@media (max-width: 1199px) {
	.wcb-news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.wcb-news-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.wcb-pagi {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 24px 0 8px;
}
.wcb-pagi .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	background: var(--surf);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--r-2);
	transition: all 120ms;
}
.wcb-pagi .page-numbers:hover { border-color: var(--ink); }
.wcb-pagi .page-numbers.current {
	background: var(--ink);
	color: white;
	border-color: var(--ink);
}

/* ==========================================================================
   404
   ========================================================================== */
.wcb-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: 80px 1.25rem;
	text-align: center;
}
.wcb-404-num {
	font-family: var(--mono);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: 800;
	color: var(--red);
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: 14px;
}
.wcb-404 h1 {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}
.wcb-404 p {
	color: var(--ink-3);
	margin: 0 0 24px;
	font-size: 1rem;
	line-height: 1.5;
}
.wcb-404-ctas {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.wcb-404 form {
	display: flex;
	max-width: 420px;
	margin: 24px auto 0;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	overflow: hidden;
}
.wcb-404 input {
	flex: 1;
	border: 0;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 0.88rem;
	outline: none;
}
.wcb-404 button {
	padding: 10px 16px;
	background: var(--red);
	color: white;
	border: 0;
	font-weight: 700;
	cursor: pointer;
	font-size: 0.85rem;
	font-family: inherit;
}

/* ==========================================================================
   SUBPAGE RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
	.wcb-sp-body { grid-template-columns: 1fr 280px; }
	.wcb-sp-body-narrow { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 899px) {
	.wcb-sp-body, .wcb-sp-body-narrow { grid-template-columns: 1fr; gap: 16px; }
	.wcb-sp-aside { position: static; }
	.wcb-sp-main { padding: 20px 18px; }
	.wcb-sc-card {
		grid-template-columns: 80px 1fr;
		gap: 14px;
	}
	.wcb-sc-cta { grid-column: 1 / -1; align-items: stretch; flex-direction: row; min-width: 0; }
	.wcb-sc-rating { align-self: flex-start; }
	.wcb-sc-bonus-mini { text-align: left; }
	.wcb-pred-hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.wcb-pred-hero-mid { grid-column: 1 / -1; order: 0; flex-direction: row; }
	.wcb-pc-grid { grid-template-columns: 1fr; }
	.wcb-rt-row { grid-template-columns: 100px 1fr 40px; gap: 8px; }
	.wcb-rt-label { font-size: 0.78rem; }
}

/* ==========================================================================
   v2.11 — GLOBAL MOBILE OVERFLOW GUARD + NEWS WIDGET + MORE MENU + MOBILE FIXES
   ========================================================================== */

/* --- Hard overflow guard: nothing may push past viewport on mobile ------ */
html, body { max-width: 100vw; overflow-x: hidden; }
body.wcb-app { width: 100%; max-width: 100vw; overflow-x: hidden; }
.wcb-app-main { max-width: 1440px; width: 100%; overflow-x: clip; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Tables → become horizontally scrollable on mobile (JS adds .wcb-table-scroll wrapper) */
.wcb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.wcb-table-scroll::-webkit-scrollbar { height: 6px; }
.wcb-table-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.wcb-sp-main pre, .wcb-article-main pre { overflow-x: auto; max-width: 100%; }

/* Long words / URLs in body text shouldn't push layout */
.wcb-sp-main, .wcb-article-main, .wcb-news-side-title, .wcb-news-w-title, .wcb-news-side-ex, .wcb-news-w-ex {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* ==========================================================================
   NEWS WIDGET — sidebar variant (compact list)
   ========================================================================== */
.wcb-news-widget-side { margin-top: 14px; }
.wcb-news-side-list {
	display: flex;
	flex-direction: column;
}
.wcb-news-side-item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 14px;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	transition: background 120ms;
}
.wcb-news-side-item:last-child { border-bottom: 0; }
.wcb-news-side-item:hover { background: var(--surf-2); }
.wcb-news-side-thumb {
	width: 76px;
	height: 56px;
	border-radius: var(--r-2);
	background: var(--surf-3) center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-4);
	flex-shrink: 0;
	overflow: hidden;
}
.wcb-news-side-thumb-fallback { color: var(--ink-4); }
.wcb-news-side-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.wcb-news-side-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 0.62rem;
}
.wcb-news-side-cat {
	color: var(--red);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wcb-news-side-date { color: var(--ink-4); font-weight: 500; }
.wcb-news-side-title {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcb-news-side-ex {
	margin: 0;
	font-size: 0.74rem;
	color: var(--ink-3);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   NEWS WIDGET — slider variant (below content, full width)
   ========================================================================== */
.wcb-news-w-wrap {
	max-width: 1440px;
	margin: 24px auto 8px;
	padding: 0 1.25rem;
}
.wcb-news-widget-slider {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	padding: 22px 22px 26px;
	margin-bottom: 24px;
}
.wcb-news-w-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.wcb-news-w-eyebrow {
	display: block;
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.wcb-news-w-h {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-news-w-controls {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.wcb-news-w-all {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--red);
	text-decoration: none;
	margin-right: 6px;
}
.wcb-news-w-all:hover { text-decoration: underline; }
.wcb-news-w-nav {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--surf);
	border: 1px solid var(--line);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}
.wcb-news-w-nav:hover { background: var(--surf-3); border-color: var(--ink-4); }
.wcb-news-w-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 1fr);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding: 4px 0 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
}
.wcb-news-w-rail::-webkit-scrollbar { height: 6px; }
.wcb-news-w-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.wcb-news-w-card {
	display: flex;
	flex-direction: column;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	scroll-snap-align: start;
	min-width: 0;
	transition: border-color 140ms, transform 140ms;
}
.wcb-news-w-card:hover {
	border-color: var(--ink-3);
	transform: translateY(-2px);
}
.wcb-news-w-img {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--surf-3) center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wcb-news-w-img-fallback { color: var(--ink-4); }
.wcb-news-w-img-cat {
	position: absolute;
	left: 10px;
	top: 10px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--red);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--r-1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.wcb-news-w-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
	flex: 1;
}
.wcb-news-w-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.wcb-news-w-date {
	font-size: 0.7rem;
	color: var(--ink-4);
	font-weight: 600;
}
.wcb-news-w-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.3;
	letter-spacing: -0.015em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcb-news-w-ex {
	margin: 0;
	font-size: 0.83rem;
	color: var(--ink-3);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcb-news-w-cta {
	margin-top: auto;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--red);
}
.wcb-news-w-card:hover .wcb-news-w-cta { text-decoration: underline; }

@media (max-width: 899px) {
	.wcb-news-widget-slider { padding: 18px 14px 22px; }
	.wcb-news-w-rail { grid-auto-columns: 78%; }
	.wcb-news-w-h { font-size: 1.1rem; }
	.wcb-news-w-controls .wcb-news-w-nav { display: none; }
	.wcb-news-w-wrap { padding: 0 0.75rem; margin-top: 18px; }
}

/* ==========================================================================
   MORE BUTTON OVERLAY (mobile)
   ========================================================================== */
.wcb-more-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(15, 23, 42, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 0s 220ms;
}
.wcb-more-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 220ms ease;
}
.wcb-more-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px calc(8px + env(safe-area-inset-top, 0px));
	color: white;
}
.wcb-more-title {
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.wcb-more-close {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 120ms;
}
.wcb-more-close:hover { background: rgba(255, 255, 255, 0.2); }
.wcb-more-body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 20px calc(40px + env(safe-area-inset-bottom));
}
.wcb-more-section { margin-bottom: 24px; }
.wcb-more-section h4 {
	margin: 0 0 10px;
	font-size: 0.66rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.wcb-more-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wcb-more-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-2);
	color: white;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 120ms, border-color 120ms;
}
.wcb-more-link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
}
.wcb-more-link-arrow { color: rgba(255, 255, 255, 0.6); }
.wcb-more-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	background: var(--red);
	border-radius: var(--r-3);
	color: white !important;
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	margin: 16px 0;
	box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}
.wcb-more-cta:hover { background: var(--red-2); }
.wcb-more-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-2);
	margin-bottom: 18px;
}
.wcb-more-search input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: none;
	color: white;
	font-family: inherit;
	font-size: 0.95rem;
}
.wcb-more-search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.wcb-more-search button {
	background: rgba(255, 255, 255, 0.2);
	border: 0;
	color: white;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.78rem;
	padding: 6px 12px;
	border-radius: var(--r-1);
	cursor: pointer;
}

/* Body lock when overlay open */
body.wcb-more-open { overflow: hidden; }

/* ==========================================================================
   MOBILE — OUTRIGHT ROW: collapse 6-col grid to 2 rows
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-outright-row {
		grid-template-columns: 32px 24px minmax(0, 1fr) auto;
		grid-template-areas:
			"pos flag team odds"
			"pos flag tag  imp";
		gap: 6px 10px;
		padding: 12px 14px;
		font-size: 0.86rem;
	}
	.wcb-outright-pos { grid-area: pos; }
	.wcb-outright-flag { grid-area: flag; }
	.wcb-outright-team {
		grid-area: team;
		font-size: 0.92rem;
	}
	.wcb-outright-odds {
		grid-area: odds;
		font-size: 1rem;
	}
	.wcb-outright-tag {
		grid-area: tag;
		justify-self: start;
		font-size: 0.55rem;
		padding: 1px 5px;
	}
	.wcb-outright-imp {
		grid-area: imp;
		justify-self: end;
		font-size: 0.7rem;
	}
	.wcb-outright-section { padding: 24px 0; }
	.wcb-outright-inner { padding: 0 0.75rem; }
	.wcb-outright-head h2 { font-size: 1.25rem; }
}

/* ==========================================================================
   MOBILE — TOP 10 ROW (cleaner stack with score visible)
   ========================================================================== */
@media (max-width: 899px) {
	.wcb-top10-row {
		grid-template-columns: 50px 70px minmax(0, 1fr);
		grid-template-areas:
			"rank logo info"
			"cta  cta  cta";
		gap: 10px 12px;
		padding: 12px 14px;
	}
	.wcb-top10-rank { grid-area: rank; flex-direction: column; align-items: flex-start; gap: 0; }
	.wcb-top10-rank-num { font-size: 1rem; }
	.wcb-top10-rank-label { font-size: 0.55rem; line-height: 1; margin-top: 2px; }
	.wcb-top10-logo { grid-area: logo; height: 50px; max-width: 100%; }
	.wcb-top10-info { grid-area: info; min-width: 0; }
	.wcb-top10-name { font-size: 0.95rem; }
	.wcb-top10-bonus { font-size: 0.78rem; margin-bottom: 6px; }
	.wcb-top10-pros { display: none; }
	.wcb-top10-meta { display: none; }
	.wcb-top10-cta { grid-area: cta; min-width: 0; flex-direction: row; align-items: center; gap: 10px; }
	.wcb-top10-cta .wcb-btn-primary { flex: 1; padding: 12px 14px; font-size: 0.85rem; }
	.wcb-top10-review { padding: 10px 6px; flex-shrink: 0; white-space: nowrap; }
	.wcb-top10-inner { padding: 0 0.75rem; }
	.wcb-top10-head { gap: 12px; padding: 0 0.25rem; }
	.wcb-top10-head h2 { font-size: 1.3rem; }
	.wcb-top10-head p { font-size: 0.82rem; }
}
@media (max-width: 480px) {
	.wcb-top10-row {
		grid-template-columns: 44px 60px minmax(0, 1fr);
		gap: 8px 10px;
		padding: 12px;
	}
	.wcb-top10-name { font-size: 0.9rem; }
	.wcb-top10-bonus { font-size: 0.74rem; }
	.wcb-top10-cta { gap: 6px; }
	.wcb-top10-review { font-size: 0.7rem; padding: 8px 4px; }
}

/* ==========================================================================
   MOBILE — TOP 5 (force single-column with horizontal-pack rows)
   ========================================================================== */
@media (max-width: 600px) {
	.wcb-top5 { padding: 0 0.75rem; }
	.wcb-top5-grid { grid-template-columns: 1fr; gap: 8px; }
	.wcb-top5-card {
		grid-template-rows: auto;
		grid-template-columns: 50px 1fr auto;
		grid-template-areas:
			"head head  head"
			"logo name  score"
			"logo bonus bonus"
			"cta  cta   cta";
		gap: 6px 10px;
		padding: 12px 14px;
	}
	.wcb-top5-card-head { grid-area: head; }
	.wcb-top5-logo { grid-area: logo; height: 44px; padding: 4px; }
	.wcb-top5-name { grid-area: name; font-size: 0.95rem; align-self: center; }
	.wcb-top5-score { grid-area: score; align-self: center; }
	.wcb-top5-bonus { grid-area: bonus; font-size: 0.78rem; }
	.wcb-top5-cta-row { grid-area: cta; }
	.wcb-top5-card:nth-child(n+5) { display: none; }
	.wcb-top5-head { flex-wrap: wrap; gap: 6px; }
	.wcb-top5-head h2 { font-size: 0.7rem; }
}

/* ==========================================================================
   MOBILE — MATCH OF DAY
   ========================================================================== */
@media (max-width: 600px) {
	.wcb-mod { padding: 14px 12px; }
	.wcb-mod-head { flex-wrap: wrap; gap: 6px; }
	.wcb-mod-head .wcb-mod-stage,
	.wcb-mod-head .wcb-mod-date { font-size: 0.62rem; }
	.wcb-mod-grid {
		grid-template-columns: 1fr auto 1fr;
		gap: 6px;
		padding: 12px 4px;
	}
	.wcb-mod-flag { font-size: 1.6rem; }
	.wcb-mod-name { font-size: 0.78rem; }
	.wcb-mod-odd { font-size: 1.1rem; }
	.wcb-mod-vs { font-size: 0.75rem; padding: 3px 7px; }
	.wcb-mod-draw { font-size: 0.66rem; }
	.wcb-mod-tip { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
	.wcb-mod-tip a.wcb-btn { width: 100%; justify-content: center; }
	.wcb-mod-tip-val { font-size: 0.95rem; }
}

/* ==========================================================================
   MOBILE — SCHEDULE TABLE (already wraps, ensure inner padding works)
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-schedule-inner { padding: 0 0.75rem; }
	.wcb-schedule-head { flex-wrap: wrap; gap: 10px; }
	.wcb-schedule-head h2 { font-size: 1.25rem; }
	.wcb-schedule-tabs { flex-wrap: wrap; }
	.wcb-schedule-tabs button { font-size: 0.72rem; padding: 4px 10px; }
}

/* ==========================================================================
   MOBILE — NEWS HERO SLIDER (homepage top)
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-news-hero-inner { padding: 0 0.5rem; }
	.wcb-news-slide { min-height: 360px; }
	.wcb-news-slide-title { font-size: 1.4rem; }
	.wcb-news-slide-ex { font-size: 0.88rem; }
	.wcb-news-nav { width: 36px; height: 36px; }
}

/* ==========================================================================
   MOBILE — APP BAR safety (logo never overflows)
   ========================================================================== */
@media (max-width: 480px) {
	.wcb-appbar-inner { padding: 0 0.75rem; gap: 0.5rem; }
	.wcb-appbar-logo { font-size: 0.82rem; }
	.wcb-appbar-name em { display: inline; }
}

/* ==========================================================================
   MOBILE — SUBPAGE HEROES (predictions hero + casino single hero)
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-sp-hero-inner { padding: 22px 0.75rem 18px; }
	.wcb-sp-title { font-size: 1.6rem; }
	.wcb-sp-sub { font-size: 0.9rem; }
	.wcb-sp-stats { grid-template-columns: 1fr 1fr; gap: 8px; }

	.wcb-pred-hero { padding: 0 0.75rem; }
	.wcb-pred-hero-card { padding: 14px; }
	.wcb-pred-hero-grid { gap: 8px; }
	.wcb-pred-hero-team-name { font-size: 0.86rem; }
	.wcb-pred-hero-team-odd { font-size: 1.1rem; }
	.wcb-pred-hero-vs { font-size: 0.7rem; }
	.wcb-pred-pick {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 14px 12px;
	}
	.wcb-pred-pick a.wcb-btn { width: 100%; justify-content: center; }

	.wcb-sc-hero { padding: 0 0.75rem; }
	.wcb-sc-hero-inner { padding: 0; }
	.wcb-sc-card { padding: 14px; }
	.wcb-sc-name { font-size: 1.2rem; }
	.wcb-sc-tagline { font-size: 0.8rem; }
	.wcb-sc-meta { font-size: 0.72rem; gap: 6px 14px; flex-wrap: wrap; }
	.wcb-sc-cta { flex-direction: column; align-items: stretch; gap: 8px; }
	.wcb-sc-cta .wcb-btn { width: 100%; justify-content: center; }
	.wcb-sc-rating { align-self: flex-start; }
	.wcb-sc-subnav { gap: 6px; flex-wrap: wrap; padding: 10px 12px; font-size: 0.78rem; }
	.wcb-sc-section { padding: 18px 0; }
	.wcb-sc-section h2 { font-size: 1.15rem; }
}

/* ==========================================================================
   MOBILE — ARCHIVE/CHIPS spacing
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-chips2 { padding: 0 0.25rem; }
	.wcb-chips2 .wcb-chip2 { font-size: 0.78rem; padding: 6px 10px; }
}

/* ==========================================================================
   MOBILE — PICK ROW in panels
   ========================================================================== */
@media (max-width: 480px) {
	.wcb-pick-row { padding: 10px 12px; gap: 4px 8px; }
	.wcb-pick-match { font-size: 0.84rem; }
	.wcb-pick-stage { font-size: 0.62rem; }
	.wcb-pick-tip { font-size: 0.7rem; }
}

/* ==========================================================================
   MOBILE — Article SEO tables (force horizontal scroll)
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-seo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
	.wcb-seo-table { min-width: 540px; }
	.wcb-article { padding: 24px 0 36px; }
	.wcb-article-inner { padding: 0 0.75rem; }
	.wcb-article-head h2 { font-size: 1.5rem; }
	.wcb-article-head p { font-size: 0.92rem; }
}

/* ==========================================================================
   MOBILE — Workspace + News Hero containers
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-ws { padding: 12px 0.5rem; }
	.wcb-ws-2col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE — Single-news article
   ========================================================================== */
@media (max-width: 720px) {
	.wcb-news-single-head-inner { padding: 22px 0.75rem; }
	.wcb-news-single-h { font-size: 1.6rem; }
	.wcb-news-single-meta { flex-wrap: wrap; gap: 4px 8px; font-size: 0.78rem; }
	.wcb-news-single-img-wrap { padding: 0 0.75rem; }
	.wcb-news-share { flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   MOBILE — Article author block + EEAT strip
   ========================================================================== */
@media (max-width: 600px) {
	.wcb-article-author { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
	.wcb-eeat-strip { padding: 12px 14px; }
}

/* ==========================================================================
   MOBILE — Comparison/Top5 head text wrap
   ========================================================================== */
@media (max-width: 480px) {
	.wcb-top5-head h2 { white-space: normal; }
}

/* ==========================================================================
   v2.11 — Author block at the BOTTOM of frontpage (after SEO content)
   ========================================================================== */
.wcb-article-author-bottom {
	margin-top: 48px;
	padding: 22px 24px;
	border-top: 3px solid var(--ink);
	border-radius: 0 0 var(--r-3) var(--r-3);
	background: var(--surf-2);
}
.wcb-article-author-bottom .wcb-article-author-mark {
	width: 52px;
	height: 52px;
	font-size: 0.95rem;
}
@media (max-width: 600px) {
	.wcb-article-author-bottom { margin-top: 32px; padding: 18px; }
}

/* ==========================================================================
   v2.11.1 — STRONGER MOBILE PASS: every container clamps to viewport
   ========================================================================== */

/* Every section container must respect viewport width */
.wcb-app-main > section,
.wcb-app-main > div,
.wcb-app-main > article {
	max-width: 100vw;
}

/* Tables inside content auto-scroll: JS wraps with .wcb-table-scroll */
.wcb-table-scroll {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	width: 100%;
	margin: 14px 0 18px;
	border-radius: var(--r-2);
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
}
.wcb-table-scroll::-webkit-scrollbar { height: 6px; }
.wcb-table-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.wcb-table-scroll > table {
	margin: 0 !important;
	min-width: 100%;
	width: max-content;
}

/* Final mobile pass: tighten all section padding + clamp grids */
@media (max-width: 720px) {
	/* Note: gutter handled by --gutter var (v2.11.3); keep grid clamps + content tweaks here. */

	.wcb-article-grid { grid-template-columns: 1fr !important; gap: 18px; }
	.wcb-article { padding: 24px 0 36px; }

	.wcb-seo-block {
		padding: 18px 14px;
		margin-top: 24px;
	}
	.wcb-seo-block h2 { font-size: 1.18rem; }
	.wcb-seo-block h3 { font-size: 1rem; margin-top: 18px; }
	.wcb-seo-block p, .wcb-seo-block li { font-size: 0.9rem; line-height: 1.6; }
	.wcb-seo-block .wcb-seo-table,
	.wcb-seo-table { min-width: 540px; font-size: 0.78rem; }
	.wcb-seo-block .wcb-seo-table thead th,
	.wcb-seo-table thead th { padding: 8px 10px; font-size: 0.62rem; }
	.wcb-seo-block .wcb-seo-table tbody td,
	.wcb-seo-table tbody td { padding: 8px 10px; }

	.wcb-article-main h3 { font-size: 1.05rem; margin-top: 22px; }
	.wcb-article-main p { font-size: 0.92rem; line-height: 1.6; }
	.wcb-article-ol { padding: 4px 14px; }
	.wcb-article-ol li { padding: 12px 0 12px 36px; font-size: 0.9rem; }

	.wcb-article-faq summary { font-size: 0.92rem; padding: 12px 14px; }
	.wcb-article-faq > div { padding: 0 14px 14px; font-size: 0.88rem; }

	.wcb-article-author { padding: 16px 14px; gap: 12px; }
	.wcb-article-author-bottom { padding: 18px 14px; margin-top: 28px; }

	.wcb-top10 { padding: 24px 0; }
	.wcb-top10-foot { font-size: 0.74rem; padding: 10px 12px; }

	.wcb-cas-inline { padding: 14px; }

	/* News grid (related news on news single, etc.) */
	.wcb-news-grid { grid-template-columns: 1fr !important; gap: 12px; }
	.wcb-news-grid-img { aspect-ratio: 16/9; }

	/* News widget cards: card per viewport */
	.wcb-news-w-rail { grid-auto-columns: 82%; gap: 10px; }
	.wcb-news-w-card { min-width: 0; }

	/* News slider hero overlay */
	.wcb-news-slide { padding: 22px 18px 28px; min-height: 320px; }

	/* Outright section reduce eyebrow line break */
	.wcb-outright-head { gap: 10px; }
	.wcb-outright-head h2 { font-size: 1.2rem; }
	.wcb-outright-head p { font-size: 0.82rem; }
	.wcb-outright-head .wcb-btn-ghost { font-size: 0.78rem; padding: 8px 12px; }

	/* Schedule head */
	.wcb-schedule-head h2 { font-size: 1.2rem; }
	.wcb-schedule { padding: 22px 0; }

	/* Top10 head */
	.wcb-top10-head { gap: 10px; }
	.wcb-top10-head h2 { font-size: 1.2rem; }
	.wcb-top10-head p { font-size: 0.82rem; }
	.wcb-top10-head .wcb-btn-ghost { font-size: 0.78rem; padding: 8px 12px; }

	/* Footer compact */
	.wcb-appfoot-links { gap: 16px; }
	.wcb-appfoot { padding: 24px 0 calc(80px + env(safe-area-inset-bottom)); }
	.wcb-appfoot-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

	/* Filter chips horizontal scroll */
	.wcb-chips2 {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wcb-chips2::-webkit-scrollbar { display: none; }
	.wcb-chips2 .wcb-chip2 { flex-shrink: 0; }

	/* News single */
	.wcb-news-single-img-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
	.wcb-news-single-img { border-radius: var(--r-3); }

	/* Sources block (news single) */
	.wcb-news-sources { padding: 14px; }
}

/* Smaller phones — final tuck-in */
@media (max-width: 480px) {
	.wcb-app-main { padding: 0 !important; }
	body.wcb-app { padding-top: 56px; }

	.wcb-sp-title { font-size: 1.4rem; line-height: 1.2; }
	.wcb-sp-sub { font-size: 0.86rem; }
	.wcb-sp-eyebrow { font-size: 0.62rem; }

	.wcb-article-head h2 { font-size: 1.4rem; }
	.wcb-article-head p { font-size: 0.88rem; }

	.wcb-news-w-rail { grid-auto-columns: 86%; }
	.wcb-news-w-h { font-size: 1rem; }

	/* Top10 super-tight */
	.wcb-top10-row {
		grid-template-columns: 40px 56px minmax(0, 1fr);
		gap: 8px;
		padding: 10px 12px;
	}
	.wcb-top10-name { font-size: 0.86rem; }
	.wcb-top10-bonus { font-size: 0.7rem; margin-bottom: 4px; }

	/* Top5 compact mode */
	.wcb-top5-card { padding: 10px 12px; gap: 4px 8px; }
	.wcb-top5-name { font-size: 0.88rem; }
	.wcb-top5-bonus { font-size: 0.72rem; }

	/* Pred hero compact */
	.wcb-pred-hero-team-name { font-size: 0.78rem; }
	.wcb-pred-hero-team-odd { font-size: 0.95rem; }
	.wcb-pred-hero-team-flag { font-size: 2rem; }

	/* Outright row super tight */
	.wcb-outright-row {
		grid-template-columns: 26px 22px minmax(0, 1fr) auto;
		gap: 4px 8px;
		padding: 10px 12px;
		font-size: 0.82rem;
	}
	.wcb-outright-team { font-size: 0.86rem; }
	.wcb-outright-odds { font-size: 0.92rem; }

	/* News widget thumbnails on sidebar variant */
	.wcb-news-side-item { grid-template-columns: 64px minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
	.wcb-news-side-thumb { width: 64px; height: 48px; }
	.wcb-news-side-title { font-size: 0.82rem; }
	.wcb-news-side-ex { font-size: 0.7rem; }
}

/* ==========================================================================
   v2.11.2 — Universal button contrast guard (no accent-on-accent text)
   ========================================================================== */
/* Force white text on red buttons no matter where they sit. */
.wcb-btn-primary,
.wcb-btn-primary:link,
.wcb-btn-primary:visited,
.wcb-btn-primary:hover,
.wcb-btn-primary:active,
.wcb-btn-primary:focus,
a.wcb-btn-primary,
button.wcb-btn-primary {
	color: #ffffff !important;
	background: var(--red) !important;
	border-color: var(--red) !important;
	-webkit-text-fill-color: #ffffff !important;
}
.wcb-btn-primary:hover,
.wcb-btn-primary:focus {
	background: var(--red-2) !important;
	border-color: var(--red-2) !important;
}
.wcb-btn-primary * { color: inherit !important; }

/* Bottom-tab primary inner stays white-on-red */
.wcb-tab-primary .wcb-tab-primary-inner svg { color: #ffffff !important; }

/* Top5 / Top10 CTA: enforce white text on red bg */
.wcb-top5-cta,
.wcb-top5-cta:link,
.wcb-top5-cta:visited,
.wcb-top5-cta:hover {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
.wcb-mod-tip a.wcb-btn-primary,
.wcb-pred-pick a.wcb-btn-primary,
.wcb-top10-cta a.wcb-btn-primary,
.wcb-sc-cta a.wcb-btn-primary,
.wcb-bd a.wcb-btn-primary,
.wcb-vd a.wcb-btn-primary,
.wcb-claimbar a.wcb-btn-primary,
.wcb-news-hero a.wcb-btn-primary,
.wcb-cas-inline-cta a.wcb-btn-primary,
.wcb-more-cta {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Legacy components.css emerald-button residue — neutralise. */
.wcb-btn-primary { background-image: none !important; }

/* ==========================================================================
   v2.11.2 — STACK + CENTER all casino cards on mobile (every variant)
   ========================================================================== */

/* (Cards-only main column padding is now handled by the unified v2.11.3
   gutter block above — single source of truth.) */

/* ----- TOP10 ROW (frontpage + archive-casino + taxonomy-casino_category) ----- */
@media (max-width: 720px) {
	.wcb-top10-row {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"rank"
			"logo"
			"info"
			"cta" !important;
		text-align: center;
		justify-items: center;
		align-items: center;
		gap: 10px !important;
		padding: 18px 14px !important;
		max-width: 100%;
	}
	.wcb-top10-row.is-top { border-left: 0; border-top: 4px solid var(--red); padding-left: 14px !important; padding-top: 14px !important; }
	.wcb-top10-rank {
		grid-area: rank;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	.wcb-top10-logo {
		grid-area: logo;
		height: 60px;
		width: auto;
		min-width: 110px;
		max-width: 160px;
		justify-self: center;
	}
	.wcb-top10-info {
		grid-area: info;
		text-align: center;
		width: 100%;
	}
	.wcb-top10-name { text-align: center; font-size: 1rem; }
	.wcb-top10-bonus { text-align: center; }
	.wcb-top10-info-meta { justify-content: center; gap: 4px 12px; font-size: 0.74rem; }
	.wcb-top10-pros {
		justify-content: flex-start;
		gap: 5px;
		margin-top: 6px;
		text-align: left;
	}
	.wcb-top10-pros li { font-size: 0.78rem; }
	.wcb-top10-meta { display: none !important; }
	.wcb-top10-cta {
		grid-area: cta;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		min-width: 0;
		gap: 6px !important;
	}
	.wcb-top10-cta .wcb-btn-primary {
		width: 100% !important;
		padding: 12px 14px;
		font-size: 0.88rem;
	}
	.wcb-top10-review { text-align: center; padding: 6px; font-size: 0.78rem; }
}

/* ----- TOP5 CARDS (frontpage compare-top-5) ----- */
@media (max-width: 720px) {
	.wcb-top5-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
	.wcb-top5-card {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto;
		grid-template-areas:
			"head"
			"logo"
			"name"
			"bonus"
			"cta" !important;
		text-align: center;
		justify-items: center;
		align-items: center;
		padding: 16px 14px !important;
		gap: 6px !important;
	}
	.wcb-top5-card-head { grid-area: head; width: 100%; }
	.wcb-top5-logo { grid-area: logo; justify-self: center; height: 56px; min-width: 110px; max-width: 160px; padding: 6px; }
	.wcb-top5-name { grid-area: name; text-align: center; font-size: 1rem; white-space: normal; }
	.wcb-top5-score { /* keep in head */ }
	.wcb-top5-bonus { grid-area: bonus; text-align: center; font-size: 0.82rem; }
	.wcb-top5-cta-row { grid-area: cta; width: 100%; flex-direction: column; gap: 6px; }
	.wcb-top5-cta { width: 100%; justify-content: center; padding: 12px 14px; }
	.wcb-top5-review { text-align: center; }
	.wcb-top5-card:nth-child(n+5) { display: none; }
}

/* ----- CASINO LIST ITEM (legacy templates/parts/casino-list-item.php) ----- */
@media (max-width: 720px) {
	.wcb-casino-row {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 18px 14px;
		background: var(--surf);
		border: 1px solid var(--line);
		border-radius: var(--r-3);
	}
	.wcb-casino-row > * {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
	.wcb-casino-row-logo img { max-height: 56px; width: auto; margin: 0 auto; }
	.wcb-casino-row-pros { justify-content: center; flex-wrap: wrap; padding: 0; margin: 0 auto; }
	.wcb-casino-row-cta { display: flex; flex-direction: column; gap: 6px; }
	.wcb-casino-row-cta .wcb-btn { width: 100%; justify-content: center; }
}

/* ----- SINGLE CASINO REVIEW HERO (.wcb-sc-card) ----- */
@media (max-width: 720px) {
	.wcb-sc-hero { padding: 18px 0.75rem 16px !important; }
	.wcb-sc-card {
		grid-template-columns: 1fr !important;
		text-align: center;
		justify-items: center;
		align-items: center;
		gap: 12px !important;
		padding: 18px 14px !important;
		border-left: 0;
		border-top: 4px solid var(--red);
	}
	.wcb-sc-logo { width: 96px; height: 72px; }
	.wcb-sc-info {
		text-align: center;
		width: 100%;
	}
	.wcb-sc-tags { justify-content: center; }
	.wcb-sc-name { text-align: center; font-size: 1.45rem; }
	.wcb-sc-tagline { text-align: center; font-size: 0.88rem; }
	.wcb-sc-meta {
		justify-content: center;
		text-align: center;
		gap: 6px 14px;
	}
	.wcb-sc-cta {
		grid-column: 1 / -1 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		min-width: 0 !important;
		gap: 8px !important;
	}
	.wcb-sc-rating { align-self: center !important; }
	.wcb-sc-bonus-mini {
		text-align: center !important;
		max-width: 100% !important;
		font-size: 0.86rem;
	}
	.wcb-sc-cta .wcb-btn {
		width: 100% !important;
		justify-content: center;
	}
}

/* ----- COMPARISON TABLE (templates/parts/comparison-table.php) ----- */
.wcb-comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 720px) {
	.wcb-comparison-table { min-width: 640px; }
}

/* ----- SIDEBAR CASINO ROW (.wcb-sb-cas-row) ----- */
@media (max-width: 720px) {
	.wcb-sb-cas-row {
		gap: 8px;
	}
}

/* ----- PREDICTION HERO (.wcb-pred-hero-card) — also stack the pick block ----- */
@media (max-width: 720px) {
	.wcb-pred-hero-card { text-align: center; }
	.wcb-pred-hero-top { justify-content: center; flex-wrap: wrap; }
	.wcb-pred-hero-grid {
		grid-template-columns: 1fr !important;
		justify-items: center !important;
		gap: 16px !important;
	}
	.wcb-pred-hero-team {
		align-items: center !important;
	}
	.wcb-pred-hero-mid {
		grid-column: auto !important;
		order: 1 !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		flex-wrap: wrap;
		gap: 8px 12px;
		width: 100%;
	}
	.wcb-pred-hero-vs {
		display: inline-flex;
		align-items: center;
	}
	.wcb-pred-pick {
		grid-template-columns: 1fr !important;
		text-align: center;
		gap: 14px !important;
	}
	.wcb-pred-pick-call { text-align: center; }
	.wcb-pred-pick-cta { align-items: stretch; }
	.wcb-pred-pick-cta-tag { align-self: center; }
	.wcb-pred-pick a.wcb-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   v2.11.2 — Casino logos that are tiny "PR" / "KI" initials: ensure consistent
   ========================================================================== */
.wcb-top10-logo-mark { font-size: 1.4rem; }
@media (max-width: 720px) {
	.wcb-top10-logo-mark { font-size: 1.3rem; }
	.wcb-top5-logo-mark { font-size: 1.2rem; }
}

/* ==========================================================================
   v2.11.3 — UNIFIED GUTTER SYSTEM
   Every section / inner / hero / panel uses the same `var(--gutter)` for its
   horizontal padding. On mobile the gutter shrinks to 14 → 12 px so every
   block aligns to the same screen-edge distance, end-to-end.
   ========================================================================== */

/* Outer wrappers (full-bleed bg, inner = 1440px constrained) */
.wcb-news-hero,
.wcb-top5,
.wcb-outright-section,
.wcb-schedule,
.wcb-top10,
.wcb-article,
.wcb-news-w-wrap,
.wcb-news-widget-slider {
	padding-left: 0;
	padding-right: 0;
}

/* Inner constrained containers — these get the gutter */
.wcb-news-hero-inner,
.wcb-top5,                       /* top5 has no inner — we use the outer */
.wcb-outright-inner,
.wcb-schedule-inner,
.wcb-top10-inner,
.wcb-article-inner,
.wcb-news-w-wrap,
.wcb-sp-hero-inner,
.wcb-sp-body,
.wcb-author-hero-inner,
.wcb-news-single-head-inner,
.wcb-news-single-img-wrap,
.wcb-pred-hero,
.wcb-sc-hero,
.wcb-appfoot-inner,
.wcb-appbar-inner {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
	box-sizing: border-box;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* Reset main "card panel" paddings on mobile so the panel aligns to the
   gutter and its inner cards aren't double-padded. */
@media (max-width: 899px) {
	.wcb-sp-main { padding: 16px 14px !important; }
	.wcb-sp-main-cards { padding: 14px !important; }
	.wcb-sp-main-cards .wcb-top10-list { gap: 8px; }
}
@media (max-width: 480px) {
	.wcb-sp-main { padding: 14px 12px !important; }
	.wcb-sp-main-cards { padding: 12px !important; }
}

/* Article content panel (.wcb-article-main / .wcb-article-side) inside
   .wcb-article-inner already gets the gutter from the inner. Don't pile on. */
@media (max-width: 899px) {
	.wcb-article-main, .wcb-article-side { padding-left: 0; padding-right: 0; }
}

/* SEO block: inset slightly on mobile but never overflow */
@media (max-width: 720px) {
	.wcb-seo-block {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Slider widget panel: tighten internal padding on mobile (the wrap holds the gutter) */
@media (max-width: 899px) {
	.wcb-news-widget-slider { padding: 16px 14px 18px; }
}
@media (max-width: 480px) {
	.wcb-news-widget-slider { padding: 14px 12px 16px; }
}

/* Outright section / Schedule / Top10 outer sections: no extra padding,
   the inner already has the gutter */
.wcb-outright-section,
.wcb-schedule,
.wcb-top10 { padding-top: 28px; padding-bottom: 28px; }

@media (max-width: 720px) {
	.wcb-outright-section,
	.wcb-schedule,
	.wcb-top10 { padding-top: 22px; padding-bottom: 22px; }
}

/* News hero outer: minimal vertical, full gutter horizontal */
.wcb-news-hero { padding: 12px 0 0 0; }

/* Workspace 2-col on frontpage uses gutter directly */
.wcb-ws,
.wcb-ws-2col {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Same for the article main grid container */
@media (max-width: 899px) {
	.wcb-ws, .wcb-ws-2col { grid-template-columns: 1fr !important; }
}

/* SP body grid: kill extra padding override added by older rule */
@media (max-width: 899px) {
	.wcb-sp-body { padding: 16px var(--gutter) 24px !important; gap: 14px; }
}

/* ==========================================================================
   v2.11.3 — UNIFIED COMPONENT BASELINE
   Every page shares: same panel, same sidebar, same hero, same news-widget,
   same vertical rhythm, same max-width, same gutter.
   ========================================================================== */

/* Hero strip — consistent top padding everywhere */
.wcb-sp-hero {
	padding-top: 24px !important;
	padding-bottom: 18px !important;
}
@media (max-width: 899px) {
	.wcb-sp-hero { padding-top: 18px !important; padding-bottom: 14px !important; }
}

/* Sidebar (.wcb-sp-aside): consistent panel gap on every page */
.wcb-sp-aside {
	gap: 14px !important;
}

/* Every panel uses the same shape, padding, border, radius */
.wcb-panel {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
}
.wcb-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--surf-2);
	border-bottom: 1px solid var(--line);
	gap: 8px;
}
.wcb-panel-head h3 {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wcb-panel-head a {
	color: var(--red);
	font-size: 0.74rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Section vertical rhythm — 28px between major full-bleed sections */
.wcb-news-hero,
.wcb-top5,
.wcb-outright-section,
.wcb-schedule,
.wcb-top10,
.wcb-article,
.wcb-news-w-wrap,
.wcb-news-widget-slider {
	margin-top: 0;
}
.wcb-top5,
.wcb-outright-section,
.wcb-schedule,
.wcb-top10,
.wcb-article {
	margin-top: 24px;
}
@media (max-width: 720px) {
	.wcb-top5,
	.wcb-outright-section,
	.wcb-schedule,
	.wcb-top10,
	.wcb-article { margin-top: 16px; }
}

/* Inline ad / sponsored card: consistent margin everywhere */
.wcb-cas-inline {
	margin: 0 0 12px;
}

/* Aside news widget panel uses same edge as other panels */
.wcb-news-widget-side .wcb-panel-head { border-bottom: 1px solid var(--line); }

/* News widget slider container (frontpage + below content): same outer
   wrapper margin so it lines up with other sections */
.wcb-news-w-wrap {
	margin-top: 24px;
	margin-bottom: 8px;
}
@media (max-width: 720px) {
	.wcb-news-w-wrap { margin-top: 16px; }
}

/* Page hero stats grid: same spacing on every archive */
.wcb-sp-stats {
	gap: 14px;
}

/* Filter chip rows: same spacing across archive-prediction, taxonomy-match-stage */
.wcb-chips2 {
	gap: 6px;
	margin-bottom: 14px;
}

/* Pagination — same look on every archive */
.wcb-pagi {
	margin-top: 18px;
	display: flex;
	justify-content: center;
}

/* Every "free-floating" 1440px-bounded wrapper that templates add inline */
.wcb-app-main > div[style*="max-width: 1440px"],
.wcb-app-main > section[style*="max-width: 1440px"] {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
	box-sizing: border-box;
}

/* ==========================================================================
   v2.11.2 — KILL legacy emerald/green palette: remap to RED
   This single block aliases every `--wcb-emerald*` CSS variable used by the
   older `sections.css`, `components.css`, `editorial.css` and
   `editorial-voice.css` files to our red accent. Result: every link hover,
   icon, border, focus ring etc. that used to be green is now red — without
   touching the older files.
   ========================================================================== */
:root {
	--wcb-emerald:        var(--red);
	--wcb-emerald-dark:   var(--red-2);
	--wcb-emerald-soft:   var(--red-soft);
	--wcb-emerald-darker: var(--red-2);
	--wcb-green:          var(--red);
	--wcb-success:        var(--red);
	/* Keep score-badge green as a separate token — declared explicitly */
}

/* Generic anchor-on-hover unification: any link inside main content fades
   to red rather than to the legacy emerald defined elsewhere. */
.wcb-app-main a:hover { color: var(--red); }

/* But: links INSIDE buttons inherit the button's color (white on red) */
.wcb-btn a, a.wcb-btn,
.wcb-btn:hover, a.wcb-btn:hover { color: inherit; }
.wcb-btn-primary,
.wcb-btn-primary:hover,
.wcb-btn-primary * { color: #ffffff !important; }

/* ==========================================================================
   v2.11.2 — Bottom-tab "Casinos" primary button: SVG must stay WHITE on red
   The existing `.wcb-tab.is-active svg { color: var(--red); }` rule was
   making the icon turn red-on-red (invisible) when Casinos was active.
   ========================================================================== */
.wcb-tab-primary .wcb-tab-primary-inner,
.wcb-tab-primary .wcb-tab-primary-inner svg,
.wcb-tab-primary.is-active .wcb-tab-primary-inner,
.wcb-tab-primary.is-active .wcb-tab-primary-inner svg {
	color: #ffffff !important;
}
/* The label below the icon stays the standard tab colour */
.wcb-tab-primary.is-active > span:not(.wcb-tab-primary-inner) { color: var(--ink); }

/* ==========================================================================
   v2.12.1 — FINAL CONSISTENCY GUARD
   This block sits at the END of the file and uses !important to defeat any
   older shorthand `padding: …` rules scattered throughout the stylesheet.
   The contract: every page-level container shares the SAME horizontal
   `var(--gutter)` distance from the screen edge — no exceptions.
   ========================================================================== */

/* === All page-level containers : single gutter, never overridden ========= */
.wcb-ws,
.wcb-ws-2col,
.wcb-news-hero-inner,
.wcb-top5,
.wcb-outright-inner,
.wcb-schedule-inner,
.wcb-top10-inner,
.wcb-article-inner,
.wcb-news-w-wrap,
.wcb-sp-hero-inner,
.wcb-sp-body,
.wcb-author-hero-inner,
.wcb-news-single-head-inner,
.wcb-news-single-img-wrap,
.wcb-pred-hero,
.wcb-sc-hero,
.wcb-appfoot-inner,
.wcb-appbar-inner {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
	max-width: 1440px;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* === Inline-style "max-width:1440px" wrappers some templates use ========= */
[style*="max-width: 1440px"],
[style*="max-width:1440px"] {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
	box-sizing: border-box;
}

/* === Filter chips align EXACTLY to the gutter (no extra inner padding) === */
.wcb-chips2 {
	padding-left: 0 !important;
	padding-right: 0 !important;
	scroll-padding-right: var(--gutter);
}
/* Trailing scroll buffer so the last chip ("Bonuses") has space at the right */
.wcb-chips2::after {
	content: '';
	flex: 0 0 var(--gutter);
}

/* === Workspace inner column never adds horizontal padding =============== */
.wcb-ws-center,
.wcb-ws-left,
.wcb-ws-right { padding-left: 0 !important; padding-right: 0 !important; }

/* === On mobile the .wcb-sp-main panel does NOT add another inset ======= */
@media (max-width: 899px) {
	.wcb-sp-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
	}
	.wcb-sp-main-cards {
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
	}

	/* Cards/panels inside main keep their OWN internal padding & border */
	.wcb-sp-main > .wcb-seo-block,
	.wcb-sp-main > .wcb-panel,
	.wcb-sp-main > .wcb-cas-inline,
	.wcb-sp-main > section,
	.wcb-sp-main > article {
		margin-left: 0;
		margin-right: 0;
	}

	/* SEO block tighter on mobile (own padding inside main, not double-pad) */
	.wcb-sp-main > .wcb-seo-block,
	.wcb-seo-block {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* Article inner uses the gutter — no per-rule overrides */
	.wcb-article-inner {
		padding-left: var(--gutter) !important;
		padding-right: var(--gutter) !important;
	}
	.wcb-article-main, .wcb-article-side {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Workspace */
	.wcb-ws,
	.wcb-ws-2col {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

/* === Outright/Top10 sections: vertical padding only on mobile =========== */
@media (max-width: 720px) {
	.wcb-outright-section,
	.wcb-top10,
	.wcb-schedule {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* The .wcb-*-inner inside provides the gutter */
}

/* === Tables inside SEO blocks: ALWAYS scroll horizontally ============== */
.wcb-seo-table-wrap,
.wcb-table-scroll {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
@media (max-width: 720px) {
	.wcb-seo-table,
	.wcb-seo-block table { min-width: 540px; }
}

/* === Hard overflow guard at the very root ============================== */
html, body, body.wcb-app {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}
/* .wcb-app-main keeps its 1440px constraint for centred sections, but
   allows full-bleed children (hero slider, navy stages) to escape via
   negative margin. body overflow-x:hidden prevents accidental horiz. scroll. */
.wcb-app-main {
	max-width: 1440px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow-x: visible !important;
	overflow: visible !important;
}

/* === No element may push past viewport ================================== */
img, svg, video, iframe, embed, object, picture, canvas {
	max-width: 100% !important;
	height: auto;
}
pre, code { max-width: 100%; overflow-x: auto; }

/* === Word-break for long URLs in body text ============================ */
.wcb-app-main p, .wcb-app-main li, .wcb-app-main td, .wcb-app-main th,
.wcb-app-main h1, .wcb-app-main h2, .wcb-app-main h3, .wcb-app-main h4 {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* === Stop !important overrides from earlier blocks shrinking the SEO   */
/*     block padding to 0 on phones (we want 14px inside the seo block)  */
@media (max-width: 480px) {
	.wcb-sp-main > .wcb-seo-block,
	.wcb-seo-block {
		padding: 16px 12px !important;
	}
}

/* === Frontpage feed (.wcb-feed2) sits in workspace, no extra padding == */
.wcb-feed2 { padding-left: 0; padding-right: 0; }
@media (max-width: 720px) {
	.wcb-feed2 { padding: 0 !important; }
	.wcb-mod { padding: 14px !important; }
	.wcb-mod-grid { padding-left: 0 !important; padding-right: 0 !important; }
}

/* === wcb-news2 (frontpage news cards inside feed) =====================  */
@media (max-width: 720px) {
	.wcb-news2 { padding: 0 !important; }
	.wcb-news2-item { padding: 14px !important; }
}

/* === The "Latest news" sidebar widget tightens on mobile ============== */
@media (max-width: 720px) {
	.wcb-news-side-list { padding: 0 !important; }
}

/* ==========================================================================
   v2.12.2 — Section headings ALL align to the same gutter
   The news-widget slider had its own 22 px panel padding, which pushed
   "From the newsroom" further in than "Compare top 5 bookmakers" /
   "Outright Winner" / "The best World Cup 2026 bookmakers".
   We zero that padding and let the wrap's gutter handle the inset, so every
   section title starts at exactly the same X coordinate.
   ========================================================================== */
.wcb-news-widget-slider {
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.wcb-news-w-head {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.wcb-news-w-rail {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Compare-top-5 head — make sure its h2 sits flush with the gutter */
.wcb-top5-head { padding-left: 0 !important; padding-right: 0 !important; }

/* Top10 head — same */
.wcb-top10-head { padding-left: 0 !important; padding-right: 0 !important; gap: 12px; }

/* Outright head — same */
.wcb-outright-head { padding-left: 0 !important; padding-right: 0 !important; }

/* Article head — same */
.wcb-article-head { padding-left: 0 !important; padding-right: 0 !important; }

/* Schedule head — same */
.wcb-schedule-head { padding-left: 0 !important; padding-right: 0 !important; }

/* Bottom-tab bar — full-viewport on mobile, fixed to bottom with iOS safe area */
.wcb-tabbar {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	max-width: 100vw !important;
	width: 100vw !important;
	transform: none !important;
	z-index: 950 !important;
	padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   v2.13.0 — FLOATING CLAIM BAR (rebuilt)
   Site-wide sticky bottom CTA. Bigger, brand-prominent on desktop. On mobile
   it sits above the tab bar with iOS safe-area math.
   ========================================================================== */
.wcb-claimbar {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 960 !important;
	display: none;
	background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
	color: white;
	border-top: 3px solid var(--red);
	box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.25);
	transform: translateY(110%);
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0;
	max-width: 100vw;
}
.wcb-claimbar.is-visible {
	display: block;
	transform: translateY(0);
}
.wcb-claimbar.is-dismissed {
	display: none !important;
	transform: translateY(110%);
}
.wcb-claimbar-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 14px var(--gutter);
	display: grid;
	grid-template-columns: auto auto 1fr auto auto auto;
	gap: 18px;
	align-items: center;
}

.wcb-claimbar-logo {
	width: 56px;
	height: 56px;
	border-radius: var(--r-2);
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	padding: 6px;
}
.wcb-claimbar-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wcb-claimbar-logo span {
	font-family: var(--mono);
	font-weight: 800;
	color: var(--ink);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}

.wcb-claimbar-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.wcb-claimbar-tag {
	font-size: 0.62rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.wcb-claimbar-name {
	font-size: 1.05rem;
	font-weight: 800;
	color: white;
	letter-spacing: -0.015em;
	line-height: 1.15;
}
.wcb-claimbar-bonus {
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.3;
}
.wcb-claimbar-bonus code {
	background: rgba(255, 255, 255, 0.15);
	color: white;
	padding: 1px 6px;
	border-radius: var(--r-1);
	font-size: 0.78rem;
	font-family: var(--mono);
	font-weight: 700;
}

.wcb-claimbar-rating {
	display: inline-flex;
	align-items: baseline;
	padding: 6px 12px;
	background: rgba(34, 197, 94, 0.18);
	color: #34D399;
	border-radius: var(--r-2);
	font-family: var(--mono);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	flex-shrink: 0;
}
.wcb-claimbar-rating strong { font-size: 1.05rem; }
.wcb-claimbar-rating span { font-size: 0.7rem; opacity: 0.85; margin-left: 1px; }

.wcb-claimbar-btn {
	padding: 14px 24px !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.5);
	white-space: nowrap;
}
.wcb-claimbar-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 38, 38, 0.65); }

.wcb-claimbar-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms;
	flex-shrink: 0;
}
.wcb-claimbar-close:hover { background: rgba(255, 255, 255, 0.18); color: white; }

/* Desktop: spacer at the bottom of the page so content isn't hidden behind the bar */
body.wcb-app:has(.wcb-claimbar.is-visible) { padding-bottom: 96px; }

/* Tablet — tighter rating + smaller button */
@media (max-width: 1100px) {
	.wcb-claimbar-inner { gap: 12px; padding: 12px var(--gutter); }
	.wcb-claimbar-name { font-size: 0.95rem; }
	.wcb-claimbar-bonus { font-size: 0.8rem; }
	.wcb-claimbar-btn { padding: 12px 18px !important; font-size: 0.86rem !important; }
}

/* Mobile — keep it slim. Sits above the bottom tab bar via safe-area math. */
@media (max-width: 720px) {
	.wcb-claimbar {
		bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
		border-top: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.3);
	}
	.wcb-claimbar-inner {
		grid-template-columns: 44px 1fr auto auto;
		gap: 10px;
		padding: 10px 12px;
	}
	.wcb-claimbar-logo { width: 44px; height: 44px; padding: 4px; }
	.wcb-claimbar-tag { display: none; }
	.wcb-claimbar-rating { display: none; }
	.wcb-claimbar-name { font-size: 0.85rem; }
	.wcb-claimbar-bonus { font-size: 0.7rem; }
	.wcb-claimbar-bonus code { display: none; }
	.wcb-claimbar-btn { padding: 9px 12px !important; font-size: 0.78rem !important; }
	.wcb-claimbar-close { width: 26px; height: 26px; }
	.wcb-claimbar-close svg { width: 12px; height: 12px; }
	body.wcb-app:has(.wcb-claimbar.is-visible) { padding-bottom: 0; }
}

/* Very small phones: hide the rating but keep the rest */
@media (max-width: 380px) {
	.wcb-claimbar-bonus { display: none; }
}

/* ==========================================================================
   v2.13.1 — DIVERSIFIED COMPONENT COLORING
   Paint the Top 5 cards in our brand navy with white fronts.
   Paint the Fixture Schedule with a subtle navy accent background.
   The result: stronger visual rhythm, clearer hierarchy on the homepage.
   ========================================================================== */

/* ----- TOP 5 CARDS — navy panels with white fronts ---------------------- */
.wcb-top5-card {
	background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: white !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	position: relative;
}
.wcb-top5-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	pointer-events: none;
}
.wcb-top5-card.is-top {
	background: linear-gradient(180deg, #2C3F55 0%, var(--navy-2) 100%) !important;
	border-color: var(--red) !important;
	box-shadow: 0 6px 22px rgba(220, 38, 38, 0.22);
}
.wcb-top5-card.is-top::before {
	background: var(--red);
	height: 3px;
}

/* Rank chip on navy */
.wcb-top5-rank {
	color: rgba(255, 255, 255, 0.55) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.wcb-top5-card.is-top .wcb-top5-rank {
	color: var(--red) !important;
}

/* Score chip — keep green for the rating signal but lift contrast on dark */
.wcb-top5-score {
	background: rgba(52, 211, 153, 0.18) !important;
	color: #6EE7B7 !important;
	border: 1px solid rgba(52, 211, 153, 0.25);
	font-weight: 800;
}

/* Logo well — white card on navy, never a dark logo on dark bg */
.wcb-top5-logo {
	background: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.wcb-top5-logo-mark {
	color: var(--ink) !important;
}
.wcb-top5-card.is-top .wcb-top5-logo {
	background: var(--red-soft) !important;
	border-color: rgba(220, 38, 38, 0.6) !important;
}
.wcb-top5-card.is-top .wcb-top5-logo-mark {
	color: var(--red) !important;
}

/* Casino name on navy → white, with letter-spacing tightened */
.wcb-top5-name {
	color: white !important;
	font-weight: 800 !important;
	letter-spacing: -0.018em;
}

/* Bonus copy on navy — softened white */
.wcb-top5-bonus {
	color: rgba(255, 255, 255, 0.78) !important;
	font-weight: 500;
}

/* Review link on navy — soft white, brightens to red on hover */
.wcb-top5-review {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: rgba(255, 255, 255, 0.85) !important;
}
.wcb-top5-review:hover {
	border-color: var(--red) !important;
	color: white !important;
	background: rgba(220, 38, 38, 0.15) !important;
}

/* Hover lift */
.wcb-top5-card:hover {
	border-color: rgba(255, 255, 255, 0.22) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.wcb-top5-card.is-top:hover {
	box-shadow: 0 12px 32px rgba(220, 38, 38, 0.32);
}

/* The Top 5 head heading itself — keep dark on light page bg */
/* (no change needed, .wcb-top5-head h2 uses --ink) */

/* ----- FIXTURE SCHEDULE — FULL-BLEED navy accent section ---------------- */
.wcb-schedule {
	background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%) !important;
	color: white;
	border-top: 0;
	position: relative;
	/* Extend the navy background to the full viewport width using the same
	   box-shadow + clip-path trick used by the Top 5 strip. */
	box-shadow: 0 0 0 100vmax var(--navy-2);
	clip-path: inset(0 -100vmax);
	max-width: 1440px !important;
}
.wcb-schedule::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* Schedule heading typography on navy */
.wcb-schedule-head h2 {
	color: white !important;
}
.wcb-schedule-head p {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Tabs — pill row on navy */
.wcb-schedule-tabs {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.wcb-schedule-tabs button {
	color: rgba(255, 255, 255, 0.65) !important;
}
.wcb-schedule-tabs button:hover {
	color: white !important;
	background: rgba(255, 255, 255, 0.06) !important;
}
.wcb-schedule-tabs button.is-active {
	background: var(--red) !important;
	color: white !important;
}

/* Table card — sits as a white-ish panel ON the navy bg, OR semi-transparent.
   Going semi-transparent here for a "data-on-dark" feel. */
.wcb-schedule-table-wrap {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.wcb-schedule-table thead th {
	background: rgba(255, 255, 255, 0.06) !important;
	color: rgba(255, 255, 255, 0.55) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.wcb-schedule-table tbody td {
	color: rgba(255, 255, 255, 0.92) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.wcb-schedule-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04) !important;
}
.wcb-sched-stage {
	background: rgba(255, 255, 255, 0.08) !important;
	color: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.wcb-sched-vs {
	color: rgba(255, 255, 255, 0.4) !important;
}
.wcb-sched-venue {
	color: rgba(255, 255, 255, 0.55) !important;
}
.wcb-sched-match strong {
	color: white !important;
}
.wcb-sched-more {
	color: var(--red) !important;
	font-weight: 700;
}
.wcb-sched-more:hover {
	color: white !important;
	text-decoration: underline;
}

/* Mobile: keep the navy schedule, just tighten table chrome */
@media (max-width: 720px) {
	.wcb-schedule-table-wrap { background: rgba(255, 255, 255, 0.05) !important; }
}

/* ----- MATCH OF THE DAY — red accent panel, white fronts ---------------- */
.wcb-mod {
	background: linear-gradient(135deg, var(--red) 0%, var(--red-2) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: white !important;
	box-shadow: 0 6px 22px rgba(220, 38, 38, 0.22);
	overflow: hidden;
	position: relative;
}
.wcb-mod::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	pointer-events: none;
}

/* Head row on red */
.wcb-mod-head {
	color: rgba(255, 255, 255, 0.78) !important;
}
.wcb-mod-head .wcb-tag-navy {
	background: rgba(0, 0, 0, 0.22) !important;
	color: white !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.wcb-mod-head .wcb-dot-amber {
	background: #FCD34D !important;
	box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.25);
}
.wcb-mod-stage {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 800;
}
.wcb-mod-sep {
	background: rgba(255, 255, 255, 0.25) !important;
}
.wcb-mod-date {
	color: rgba(255, 255, 255, 0.75) !important;
	font-weight: 600;
}

/* Inner team-grid: a translucent white card on the red bg */
.wcb-mod-grid {
	background: rgba(255, 255, 255, 0.97) !important;
	border-radius: var(--r-3) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
/* (team typography inside reverts to dark on the white inner card) */
.wcb-mod-team .wcb-mod-name {
	color: var(--ink) !important;
}
.wcb-mod-team .wcb-mod-odd {
	color: var(--red) !important;
}
.wcb-mod-team .wcb-mod-lbl {
	color: var(--ink-4) !important;
}
.wcb-mod-center .wcb-mod-vs {
	color: var(--ink-4) !important;
}
.wcb-mod-center .wcb-mod-draw {
	background: var(--surf-2) !important;
	color: var(--ink-3) !important;
	border-color: var(--line) !important;
}

/* Venue line on red */
.wcb-mod-venue {
	color: rgba(255, 255, 255, 0.7) !important;
	border-top: 1px dashed rgba(255, 255, 255, 0.22) !important;
}

/* Expert-call tip row: dark navy strip for contrast on red */
.wcb-mod-tip {
	background: rgba(0, 0, 0, 0.22) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--r-3);
}
.wcb-mod-tip-lbl {
	color: rgba(255, 255, 255, 0.65) !important;
	font-weight: 700;
}
.wcb-mod-tip-val {
	color: white !important;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* The "Full analysis →" CTA: invert it to a white pill on the red bg so it pops */
.wcb-mod-tip a.wcb-btn-primary {
	background: white !important;
	color: var(--red) !important;
	border-color: white !important;
	-webkit-text-fill-color: var(--red) !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.wcb-mod-tip a.wcb-btn-primary:hover {
	background: var(--red-soft) !important;
	color: var(--red-2) !important;
	-webkit-text-fill-color: var(--red-2) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.wcb-mod-tip a.wcb-btn-primary * { color: inherit !important; }

/* Mobile spacing on red MoD */
@media (max-width: 720px) {
	.wcb-mod-grid { padding: 14px 8px; }
	.wcb-mod-tip { padding: 12px; }
}

/* ==========================================================================
   v2.13.2 — FULL-HEIGHT ABOVE-THE-FOLD HERO (desktop)
   News hero + Top 5 strip together fill the desktop viewport (minus app bar
   56 px). Tight gap between them so they read as one stage.
   ========================================================================== */
@media (min-width: 900px) {

	/* News hero: ~58 vh tall, image-led */
	.wcb-news-hero { padding-top: 16px !important; padding-bottom: 0 !important; }
	.wcb-news-slider { border-radius: var(--r-4); height: calc(58vh - 28px); min-height: 380px; max-height: 620px; }
	.wcb-news-track { height: 100%; }
	.wcb-news-slide {
		min-height: 100%;
		height: 100%;
		padding: 56px 64px 72px;
	}
	.wcb-news-slide-overlay {
		background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.92) 100%);
	}
	.wcb-news-slide-body { max-width: 720px; }
	.wcb-news-slide-meta {
		display: inline-flex;
		gap: 10px;
		align-items: center;
		margin-bottom: 16px;
	}
	.wcb-news-slide-cat {
		background: var(--red);
		color: white;
		padding: 5px 11px;
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		border-radius: var(--r-1);
	}
	.wcb-news-slide-date {
		color: rgba(255,255,255,0.75);
		font-size: 0.78rem;
		font-weight: 600;
	}
	.wcb-news-slide-title {
		font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
		line-height: 1.05;
		font-weight: 800;
		letter-spacing: -0.025em;
		margin-bottom: 12px;
	}
	.wcb-news-slide-ex {
		font-size: 1.02rem !important;
		line-height: 1.5;
		color: rgba(255,255,255,0.85);
		max-width: 60ch;
		margin-bottom: 16px;
	}
	.wcb-news-slide-arrow {
		display: inline-flex;
		gap: 8px;
		font-size: 0.92rem;
		font-weight: 700;
		color: white;
		padding: 10px 16px;
		background: rgba(255,255,255,0.12);
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: var(--r-2);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transition: background 160ms, gap 200ms;
	}
	.wcb-news-slide-arrow:hover { gap: 12px; background: rgba(255,255,255,0.2); }

	/* Bigger nav arrows on desktop */
	.wcb-news-nav { width: 48px; height: 48px; }

	/* Top 5: ~32 vh tall, generous internal spacing */
	.wcb-top5 { margin-top: 16px !important; }
	.wcb-top5-grid {
		gap: 12px;
		min-height: calc(32vh - 56px);
	}
	.wcb-top5-card {
		min-height: calc(32vh - 56px);
		padding: 22px 20px 20px !important;
		gap: 12px !important;
		grid-template-rows: auto 1fr auto auto auto !important;
		justify-items: stretch;
	}
	.wcb-top5-logo {
		height: 80px;
		padding: 10px;
	}
	.wcb-top5-name {
		font-size: 1.15rem !important;
		text-align: center;
	}
	.wcb-top5-bonus {
		font-size: 0.92rem;
		min-height: 3.2em;
		text-align: center;
		line-height: 1.4;
	}
	.wcb-top5-cta-row { gap: 8px; margin-top: 6px; }
	.wcb-top5-cta {
		padding: 13px 16px !important;
		font-size: 0.92rem !important;
		font-weight: 800 !important;
	}
	.wcb-top5-review {
		padding: 9px 12px;
		font-size: 0.78rem;
	}

	/* Force the H2 headline to a tighter format above the cards */
	.wcb-top5-head {
		margin-bottom: 14px;
		padding: 0 4px;
	}
	.wcb-top5-head h2 {
		font-size: 0.82rem;
	}
}

/* Even taller on big screens */
@media (min-width: 1200px) {
	.wcb-news-slider { height: calc(62vh - 28px); }
	.wcb-top5-card { min-height: calc(34vh - 56px); }
}

/* Tablet: scale down a bit but keep the proportions */
@media (min-width: 720px) and (max-width: 899px) {
	.wcb-news-slider { min-height: 360px; }
	.wcb-news-slide { padding: 36px 36px 48px; }
	.wcb-news-slide-title { font-size: clamp(1.5rem, 3.4vw, 2rem) !important; }
}

/* ==========================================================================
   v2.13.3 — REVERT Match of the Day to a white panel
   The red treatment competed with the news hero + Top 5 navy stack above.
   Back to a clean white card with red accents only on the data points.
   ========================================================================== */
.wcb-mod {
	background: var(--surf) !important;
	border: 1px solid var(--line) !important;
	color: var(--ink) !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.wcb-mod::before { display: none; }

/* Head row reverts to muted ink */
.wcb-mod-head            { color: var(--ink-3) !important; }
.wcb-mod-head .wcb-tag-navy { background: var(--navy) !important; color: white !important; border: 0; }
.wcb-mod-head .wcb-dot-amber { background: var(--amber, #D97706) !important; box-shadow: none; }
.wcb-mod-stage           { color: var(--ink-3) !important; font-weight: 700; }
.wcb-mod-sep             { background: var(--line) !important; }
.wcb-mod-date            { color: var(--ink-3) !important; font-weight: 500; }

/* Inner team grid: light surface card, dark typography */
.wcb-mod-grid            { background: var(--surf-2) !important; box-shadow: none; }
.wcb-mod-team .wcb-mod-name { color: var(--ink) !important; }
.wcb-mod-team .wcb-mod-odd  { color: var(--red) !important; }
.wcb-mod-team .wcb-mod-lbl  { color: var(--ink-4) !important; }
.wcb-mod-center .wcb-mod-vs   { color: var(--ink-4) !important; }
.wcb-mod-center .wcb-mod-draw { background: var(--surf) !important; color: var(--ink-3) !important; border-color: var(--line) !important; }

/* Venue line on white */
.wcb-mod-venue { color: var(--ink-4) !important; border-top: 1px dashed var(--line) !important; }

/* Expert-call strip: soft red-tinted panel for emphasis on white */
.wcb-mod-tip {
	background: var(--red-soft) !important;
	border: 1px solid #FECACA !important;
	border-radius: var(--r-3);
}
.wcb-mod-tip-lbl { color: var(--ink-3) !important; font-weight: 700; }
.wcb-mod-tip-val { color: var(--ink) !important; font-weight: 800; letter-spacing: -0.01em; }

/* Reset the CTA back to standard red primary button */
.wcb-mod-tip a.wcb-btn-primary {
	background: var(--red) !important;
	color: white !important;
	border-color: var(--red) !important;
	-webkit-text-fill-color: white !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.wcb-mod-tip a.wcb-btn-primary:hover {
	background: var(--red-2) !important;
	color: white !important;
	-webkit-text-fill-color: white !important;
	transform: translateY(-1px);
}

/* ==========================================================================
   v2.13.4 — ABOVE-THE-FOLD CINEMATIC HERO (desktop)
   Hero slider goes EDGE-TO-EDGE full viewport.
   Top 5 sits on a full-viewport navy stage with white cards.
   Combined: news hero (50 vh) + top 5 (38 vh) ≈ 88 vh — both visible above
   the fold on every desktop screen.
   ========================================================================== */
@media (min-width: 900px) {

	/* ---- HERO SLIDER — full bleed ---- */
	.wcb-news-hero {
		max-width: 100vw !important;
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 0 !important;
	}
	.wcb-news-hero-inner {
		max-width: 100vw !important;
		width: 100vw !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.wcb-news-slider {
		border-radius: 0 !important;
		border: 0 !important;
		height: 50vh !important;
		min-height: 360px !important;
		max-height: 580px !important;
		width: 100vw !important;
	}
	.wcb-news-track { height: 100%; }

	/* Slide is full-bleed image; body sits inside a centred 1440 px content row */
	.wcb-news-slide {
		min-height: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: center !important;
		flex-direction: row !important;
	}
	.wcb-news-slide-body {
		max-width: 1440px !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding: 64px var(--gutter) 80px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	/* Individual content elements stay readable: 720 px max */
	.wcb-news-slide-meta,
	.wcb-news-slide-title,
	.wcb-news-slide-ex,
	.wcb-news-slide-arrow {
		max-width: 720px !important;
		text-align: left;
	}

	/* Nav arrows + dots pinned at content gutter, not screen edge */
	.wcb-news-nav-prev {
		left: max(var(--gutter), calc(50vw - 720px + var(--gutter))) !important;
	}
	.wcb-news-nav-next {
		right: max(var(--gutter), calc(50vw - 720px + var(--gutter))) !important;
	}
	.wcb-news-dots {
		right: max(calc(var(--gutter) + 22px), calc(50vw - 720px + var(--gutter) + 22px)) !important;
	}

	/* ---- TOP 5 — full-viewport NAVY STAGE with WHITE cards ---- */
	.wcb-top5 {
		background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%) !important;
		/* Trick to extend the navy bg full-viewport while keeping the
		   1440 px content centred via padding. */
		box-shadow: 0 0 0 100vmax var(--navy-2);
		clip-path: inset(0 -100vmax);
		padding-top: 38px !important;
		padding-bottom: 38px !important;
		margin-top: 0 !important;
		min-height: 36vh;
		max-width: 1440px !important;
	}

	/* Heading on navy */
	.wcb-top5-head h2 {
		color: white !important;
	}
	.wcb-top5-head h2 strong {
		color: white !important;
	}
	.wcb-top5-head a {
		color: rgba(255, 255, 255, 0.85) !important;
	}
	.wcb-top5-head a:hover { color: white !important; }

	/* Cards become WHITE panels floating on the navy stage */
	.wcb-top5-card {
		background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		color: var(--ink) !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}
	.wcb-top5-card::before { display: none; }
	.wcb-top5-card.is-top {
		background: #FFFFFF !important;
		border: 2px solid var(--red) !important;
		box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
	}
	.wcb-top5-card.is-top::before {
		content: '' !important;
		display: block !important;
		position: absolute;
		inset: -2px -2px auto -2px;
		height: 4px;
		background: var(--red);
		border-radius: var(--r-3) var(--r-3) 0 0;
	}

	/* Inside the white card: revert all colours back to dark-on-light */
	.wcb-top5-rank { color: var(--ink-4) !important; }
	.wcb-top5-card.is-top .wcb-top5-rank { color: var(--red) !important; }
	.wcb-top5-name { color: var(--ink) !important; }
	.wcb-top5-bonus { color: var(--ink-3) !important; }
	.wcb-top5-logo {
		background: var(--surf-2) !important;
		border: 1px solid var(--line) !important;
		box-shadow: none;
	}
	.wcb-top5-logo-mark { color: var(--ink) !important; }
	.wcb-top5-card.is-top .wcb-top5-logo {
		background: var(--red-soft) !important;
		border-color: rgba(220, 38, 38, 0.35) !important;
	}
	.wcb-top5-card.is-top .wcb-top5-logo-mark { color: var(--red) !important; }
	.wcb-top5-score {
		background: var(--red-soft) !important;
		color: var(--red) !important;
		border: 1px solid rgba(220, 38, 38, 0.18);
		font-weight: 800;
	}
	.wcb-top5-review {
		background: transparent !important;
		border: 1px solid var(--line) !important;
		color: var(--ink-3) !important;
	}
	.wcb-top5-review:hover {
		border-color: var(--red) !important;
		color: var(--red) !important;
		background: transparent !important;
	}

	/* Card heights: 5 cards in a row, each ~ 36 vh tall */
	.wcb-top5-grid {
		min-height: calc(36vh - 80px);
		max-height: 360px;
	}
	.wcb-top5-card {
		min-height: calc(36vh - 80px);
		max-height: 360px;
	}
}

/* Tighten on tablets so the 5 cards still fit */
@media (min-width: 900px) and (max-width: 1199px) {
	.wcb-top5-card { padding: 16px 12px 14px !important; }
	.wcb-top5-name { font-size: 1rem !important; }
	.wcb-top5-bonus { font-size: 0.82rem !important; min-height: 2.6em; }
	.wcb-top5-logo { height: 60px !important; }
}

/* ==========================================================================
   v2.13.7 — TOP 5 CARD INTERNAL SPACING FIX
   The grid had a `1fr` logo row which was eating all extra height and
   squeezing the casino-name row to nothing (clipped).
   Fix: all rows auto-height, distribute space with align-content,
   and let the casino name wrap naturally instead of nowrap-truncating.
   ========================================================================== */
.wcb-top5-name {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.2 !important;
	display: block !important;
	min-height: 2.4em;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
}

@media (min-width: 900px) {
	.wcb-top5-card {
		grid-template-rows: auto auto auto 1fr auto !important;
		/* head     logo  name  bonus  cta */
		align-content: stretch !important;
		padding: 20px 16px 18px !important;
		gap: 10px !important;
	}
	.wcb-top5-logo {
		height: 72px !important;
		flex-shrink: 0;
	}
	.wcb-top5-name {
		font-size: 1.1rem !important;
		text-align: center;
		min-height: 2.6em;
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden !important;
		padding: 2px 0;
	}
	.wcb-top5-bonus {
		font-size: 0.86rem !important;
		text-align: center;
		min-height: 2.4em;
		line-height: 1.4;
		align-self: start;
	}
	.wcb-top5-cta-row {
		margin-top: auto;
	}
}

/* Tablet (900-1199): tighter cards, name still readable */
@media (min-width: 900px) and (max-width: 1199px) {
	.wcb-top5-card { padding: 14px 10px 12px !important; gap: 8px !important; }
	.wcb-top5-name { font-size: 0.95rem !important; min-height: 2.4em; }
	.wcb-top5-bonus { font-size: 0.78rem !important; min-height: 2.2em; }
	.wcb-top5-logo { height: 56px !important; }
}

/* ==========================================================================
   v2.15.0 — LIVE ODDS BOARD + ODDS COMPARISON MODULE (BetBy Promo Feed)
   ========================================================================== */

/* ----- Live odds board (full table view) -------------------------------- */
.wcb-betby-board {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px var(--gutter);
	box-sizing: border-box;
}
.wcb-betby-empty {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px var(--gutter);
	text-align: center;
	color: var(--ink-3);
}
.wcb-betby-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.wcb-betby-h {
	margin: 4px 0 4px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.wcb-betby-sub {
	margin: 0;
	font-size: 0.92rem;
	color: var(--ink-3);
	max-width: 60ch;
	line-height: 1.5;
}
.wcb-betby-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: 0.82rem;
}
.wcb-betby-count strong {
	font-size: 1.4rem;
	color: var(--red);
	font-weight: 800;
	margin-right: 4px;
}
.wcb-betby-stamp {
	color: var(--ink-3);
	font-size: 0.78rem;
}

.wcb-betby-table-wrap {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wcb-betby-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	min-width: 880px;
}
.wcb-betby-table thead th {
	padding: 12px 14px;
	text-align: left;
	background: var(--surf-2);
	font-size: 0.66rem;
	font-weight: 800;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.wcb-betby-table thead th.ra,
.wcb-betby-table tbody td.ra { text-align: right; }
.wcb-betby-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	vertical-align: middle;
	white-space: nowrap;
}
.wcb-betby-table tbody tr:last-child td { border-bottom: 0; }
.wcb-betby-table tbody tr:hover { background: var(--surf-2); }

.wcb-betby-time { font-weight: 600; color: var(--ink-3); }
.wcb-betby-match {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 240px;
}
.wcb-betby-team strong { color: var(--ink); font-weight: 700; }
.wcb-betby-vs { color: var(--ink-4); font-size: 0.78rem; font-weight: 600; }
.wcb-betby-tournament {
	font-size: 0.78rem;
	color: var(--ink-4);
}
.wcb-betby-dnb { color: var(--ink-3); }

.wcb-betby-cta {
	display: inline-block;
	padding: 6px 12px;
	background: var(--red);
	color: white;
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	border-radius: var(--r-2);
	text-decoration: none;
	transition: background 120ms;
}
.wcb-betby-cta:hover { background: var(--red-2); }

@media (max-width: 720px) {
	.wcb-betby-board { padding: 18px 0; }
	.wcb-betby-head { padding: 0 var(--gutter); }
	.wcb-betby-table-wrap { border-radius: 0; border-left: 0; border-right: 0; }
	.wcb-betby-meta { align-items: flex-start; }
}


/* ----- Odds comparison module (multi-market block per match) ----------- */
.wcb-odds-cmp {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	padding: 14px 16px;
	margin: 14px 0 18px;
}
.wcb-odds-cmp-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--line);
}
.wcb-odds-cmp-stamp {
	color: var(--ink-4);
	font-size: 0.74rem;
}
.wcb-odds-cmp-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wcb-odds-cmp-row {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: 16px;
	align-items: center;
	padding: 8px 4px;
	border-bottom: 1px solid var(--surf-2);
}
.wcb-odds-cmp-row:last-child { border-bottom: 0; }
.wcb-odds-cmp-name {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wcb-odds-cmp-cells {
	display: grid;
	gap: 6px;
}
.wcb-odds-cmp-cells.is-three { grid-template-columns: 1fr 1fr 1fr; }
.wcb-odds-cmp-cells.is-two   { grid-template-columns: 1fr 1fr; }
.wcb-odds-cmp-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	transition: border-color 120ms, background 120ms;
}
.wcb-odds-cmp-cell:hover {
	background: var(--red-soft);
	border-color: var(--red);
}
.wcb-odds-cmp-cell small {
	font-size: 0.66rem;
	color: var(--ink-4);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wcb-odds-cmp-cell strong {
	font-size: 1rem;
	color: var(--ink);
	font-weight: 800;
	font-family: var(--mono);
}
.wcb-odds-cmp-cell:hover strong { color: var(--red); }

@media (max-width: 600px) {
	.wcb-odds-cmp-row { grid-template-columns: 1fr; gap: 6px; }
	.wcb-odds-cmp-cell { padding: 6px 10px; }
	.wcb-odds-cmp-cell strong { font-size: 0.9rem; }
}

/* ==========================================================================
   v2.14.0 — MAGAZINE × AFFILIATE LAYOUT (Props-style)
   Section module classes prefixed `.wcb-mag-*`
   Used by the rebuilt front-page.php homepage.
   ========================================================================== */

.wcb-mag {
	width: 100%;
	background: var(--surf);
}
.wcb-mag-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px var(--gutter);
	box-sizing: border-box;
}

/* Tag — used inside cards (red category label) */
.wcb-mag-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--r-1);
	white-space: nowrap;
}
.wcb-mag-tag-red   { background: var(--red);   color: white; }
.wcb-mag-tag-navy  { background: var(--navy);  color: white; }
.wcb-mag-tag-green { background: var(--green, #16A34A); color: white; }
.wcb-mag-tag-amber { background: var(--amber, #D97706); color: white; }


/* ==========================================================================
   1. SPLIT HERO — 2 large featured stories
   ========================================================================== */
.wcb-mag-splithero {
	background: var(--surf);
	padding: 28px 0 0;
}
.wcb-mag-splithero-grid {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 14px;
	box-sizing: border-box;
}
.wcb-mag-splithero-card {
	position: relative;
	display: block;
	min-height: 460px;
	border-radius: var(--r-3);
	overflow: hidden;
	color: white;
	text-decoration: none;
	background: var(--ink);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
	transition: transform 220ms;
}
.wcb-mag-splithero-card:hover { transform: translateY(-2px); }
.wcb-mag-splithero-card.is-primary {
	min-height: 460px;
}
.wcb-mag-splithero-img {
	position: absolute;
	inset: 0;
	background: var(--ink) center/cover no-repeat;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wcb-mag-splithero-card:hover .wcb-mag-splithero-img { transform: scale(1.04); }
.wcb-mag-splithero-img-fallback {
	background: linear-gradient(135deg, var(--navy) 0%, var(--red-2) 100%);
}
.wcb-mag-splithero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,0.6) 70%, rgba(15,23,42,0.95) 100%);
}
.wcb-mag-splithero-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: inherit;
	padding: 28px 28px 26px;
}
.wcb-mag-splithero-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
}
.wcb-mag-splithero-date {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}
.wcb-mag-splithero-title {
	margin: 0 0 8px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: white;
}
.wcb-mag-splithero-card.is-primary .wcb-mag-splithero-title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.wcb-mag-splithero-ex {
	margin: 4px 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.45;
	max-width: 60ch;
}
@media (max-width: 899px) {
	.wcb-mag-splithero-grid { grid-template-columns: 1fr; gap: 10px; }
	.wcb-mag-splithero-card { min-height: 320px !important; }
	.wcb-mag-splithero-body { padding: 22px 18px 20px; }
}


/* ==========================================================================
   2. TOP READS strip — 4 small cards
   ========================================================================== */
.wcb-mag-topreads {
	background: var(--surf-2);
	margin-top: 0;
}
.wcb-mag-topreads .wcb-mag-inner { padding: 20px var(--gutter); }
.wcb-mag-strip-head {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}
.wcb-mag-strip-h {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-left: 14px;
	border-left: 4px solid var(--red);
}
.wcb-mag-topreads-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.wcb-mag-topreads-card {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 140ms, transform 140ms;
}
.wcb-mag-topreads-card:hover {
	border-color: var(--ink-3);
	transform: translateY(-1px);
}
.wcb-mag-topreads-img {
	background: var(--surf-3) center/cover no-repeat;
	min-height: 100%;
}
.wcb-mag-topreads-body {
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wcb-mag-topreads-title {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcb-mag-strip-all {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 14px;
	background: var(--ink);
	color: white;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--r-2);
	transition: background 120ms;
}
.wcb-mag-strip-all:hover { background: var(--red); }

@media (max-width: 1199px) {
	.wcb-mag-topreads-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wcb-mag-topreads-grid { grid-template-columns: 1fr; }
	.wcb-mag-topreads-card { grid-template-columns: 90px minmax(0, 1fr); }
}


/* ==========================================================================
   3. BONUS OFFERS strip — 4 banner cards
   ========================================================================== */
.wcb-mag-offers {
	background: var(--surf);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.wcb-mag-offers .wcb-mag-inner {
	padding: 16px var(--gutter);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: center;
}
.wcb-mag-offers-eyebrow {
	font-size: 0.66rem;
	font-weight: 800;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
}
.wcb-mag-offers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.wcb-mag-offer-card {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--r-2);
	text-decoration: none;
	color: white;
	font-weight: 700;
	transition: transform 120ms, box-shadow 120ms;
}
.wcb-mag-offer-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.wcb-mag-offer-red    { background: linear-gradient(135deg, var(--red) 0%, var(--red-2) 100%); }
.wcb-mag-offer-navy   { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.wcb-mag-offer-green  { background: linear-gradient(135deg, #16A34A 0%, #15803D 100%); }
.wcb-mag-offer-amber  { background: linear-gradient(135deg, #D97706 0%, #B45309 100%); }
.wcb-mag-offer-logo {
	width: 60px;
	height: 36px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--r-1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 4px;
}
.wcb-mag-offer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wcb-mag-offer-logo-mark {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 0.85rem;
	color: var(--ink);
}
.wcb-mag-offer-name {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: white !important;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.wcb-mag-offer-bonus {
	display: none; /* short variant */
}
.wcb-mag-offer-cta {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: white;
	white-space: nowrap;
}
@media (max-width: 1199px) {
	.wcb-mag-offers .wcb-mag-inner { grid-template-columns: 1fr; }
	.wcb-mag-offers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wcb-mag-offers-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   4. CATEGORY NEWS — featured + sidebar list
   ========================================================================== */
.wcb-mag-cat .wcb-mag-inner { padding: 32px var(--gutter); }
.wcb-mag-cat-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--ink);
}
.wcb-mag-cat-flag {
	display: inline-block;
	padding: 6px 12px;
	background: var(--red);
	color: white;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.wcb-mag-cat-h {
	margin: 0;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	color: var(--ink);
	text-transform: uppercase;
}
.wcb-mag-cat-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 22px;
}
.wcb-mag-cat-feature {
	display: block;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 140ms, transform 140ms;
}
.wcb-mag-cat-feature:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.wcb-mag-cat-feature-img {
	aspect-ratio: 16/9;
	background: var(--surf-3) center/cover no-repeat;
}
.wcb-mag-cat-feature-body {
	padding: 18px 22px 22px;
}
.wcb-mag-cat-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}
.wcb-mag-cat-date {
	font-size: 0.74rem;
	color: var(--ink-4);
	font-weight: 600;
}
.wcb-mag-cat-feature-title {
	margin: 0 0 8px;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-mag-cat-feature-ex {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ink-3);
	line-height: 1.5;
}

.wcb-mag-cat-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wcb-mag-cat-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 14px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	min-height: 92px;
	transition: border-color 140ms, transform 140ms;
}
.wcb-mag-cat-item:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.wcb-mag-cat-item-img {
	background: var(--surf-3) center/cover no-repeat;
	min-height: 100%;
}
.wcb-mag-cat-item-body {
	padding: 12px 14px 12px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.wcb-mag-cat-item-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Prediction-flavour feature card */
.wcb-mag-cat-pred-img {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	aspect-ratio: 16/9;
}
.wcb-mag-cat-pred-vs {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	font-weight: 800;
}
.wcb-mag-cat-pred-flag { font-size: 4rem; line-height: 1; }
.wcb-mag-cat-pred-vs-x {
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.1em;
}
.wcb-mag-cat-pred-mini {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.6rem;
}

@media (max-width: 899px) {
	.wcb-mag-cat-grid { grid-template-columns: 1fr; gap: 16px; }
	.wcb-mag-cat-flag { padding: 4px 10px; font-size: 0.66rem; }
	.wcb-mag-cat-feature-body { padding: 14px 16px 18px; }
	.wcb-mag-cat-item { grid-template-columns: 96px minmax(0, 1fr); min-height: 76px; }
}


/* ==========================================================================
   5. PICKS — 3 large pick cards
   ========================================================================== */
.wcb-mag-picks { background: var(--surf-2); }
.wcb-mag-picks .wcb-mag-inner { padding: 32px var(--gutter); }
.wcb-mag-picks-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 18px;
}
.wcb-mag-picks-eyebrow {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-left: 14px;
	border-left: 4px solid var(--red);
}
.wcb-mag-picks-all {
	font-size: 0.74rem;
	font-weight: 800;
	color: var(--red);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.wcb-mag-picks-all:hover { text-decoration: underline; }

.wcb-mag-picks-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.wcb-mag-pick-card {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 140ms, transform 140ms;
}
.wcb-mag-pick-card:hover { border-color: var(--ink-3); transform: translateY(-1px); }

.wcb-mag-pick-img {
	height: 160px;
	background: var(--surf-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--line);
	padding: 16px;
}
.wcb-mag-pick-img img {
	max-width: 70%;
	max-height: 100%;
	object-fit: contain;
}
.wcb-mag-pick-img-mark {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 2rem;
	color: var(--ink);
	letter-spacing: 0.05em;
}
.wcb-mag-pick-pred {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
	color: white;
	gap: 18px;
}
.wcb-mag-pick-pred-flag { font-size: 3rem; line-height: 1; }
.wcb-mag-pick-pred-vs {
	font-size: 1rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.1em;
}

.wcb-mag-pick-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.wcb-mag-pick-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.wcb-mag-pick-rating {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-3);
}
.wcb-mag-pick-title {
	margin: 0 0 4px;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
}
.wcb-mag-pick-ex {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ink-3);
	line-height: 1.5;
	flex: 1;
}
.wcb-mag-pick-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}
.wcb-mag-pick-actions .wcb-btn-primary {
	width: 100%;
	justify-content: center;
}
.wcb-mag-pick-review {
	display: inline-block;
	text-align: center;
	font-size: 0.78rem;
	color: var(--ink-3);
	font-weight: 600;
	text-decoration: none;
	padding: 4px;
}
.wcb-mag-pick-review:hover { color: var(--red); }

@media (max-width: 899px) {
	.wcb-mag-picks-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   6. DARK HERO — full-width dark image hero with mini-cards
   ========================================================================== */
.wcb-mag-darkhero {
	position: relative;
	color: white;
	background: var(--ink);
	overflow: hidden;
	padding: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.wcb-mag-darkhero-bg {
	position: absolute;
	inset: 0;
	background: var(--ink) center/cover no-repeat;
	background-image: linear-gradient(135deg, var(--navy) 0%, var(--ink) 50%, var(--red-2) 100%);
}
.wcb-mag-darkhero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0.5) 0%, rgba(15,23,42,0.8) 100%);
}
.wcb-mag-darkhero-inner {
	position: relative;
	z-index: 2;
	padding: 60px var(--gutter) 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.wcb-mag-darkhero-head { max-width: 720px; margin-bottom: 32px; }
.wcb-mag-darkhero-eyebrow {
	display: block;
	font-size: 0.78rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 6px;
}
.wcb-mag-darkhero-h {
	margin: 0 0 16px;
	font-size: clamp(2.2rem, 5vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	color: white;
	text-transform: uppercase;
	background: linear-gradient(180deg, white 0%, rgba(255,255,255,0.85) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.wcb-mag-darkhero-p {
	margin: 0;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}

.wcb-mag-darkhero-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 28px;
}
.wcb-mag-darkhero-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--r-3);
	overflow: hidden;
	text-decoration: none;
	color: white;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 140ms, transform 140ms;
}
.wcb-mag-darkhero-card:hover {
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}
.wcb-mag-darkhero-card-img {
	aspect-ratio: 16/9;
	background: rgba(255, 255, 255, 0.05) center/cover no-repeat;
}
.wcb-mag-darkhero-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wcb-mag-darkhero-card-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: white;
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcb-mag-darkhero-cta {
	min-width: 220px;
	padding: 14px 28px !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	box-shadow: 0 8px 24px rgba(220, 38, 38, 0.5);
}

@media (max-width: 899px) {
	.wcb-mag-darkhero-inner { padding: 40px var(--gutter); }
	.wcb-mag-darkhero-cards { grid-template-columns: 1fr; }
}


/* ==========================================================================
   7. PROMO — admin-controlled sponsored CTA dark band
   ========================================================================== */
.wcb-mag-promo {
	position: relative;
	color: white;
	background: linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%);
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-top: 3px solid var(--red);
}
.wcb-mag-promo-bg {
	position: absolute;
	inset: 0;
	opacity: 0.18;
	background-image: radial-gradient(circle at 20% 30%, var(--red) 0%, transparent 50%),
	                  radial-gradient(circle at 80% 70%, var(--navy) 0%, transparent 50%);
	pointer-events: none;
}
.wcb-mag-promo-inner {
	position: relative;
	z-index: 2;
	padding: 36px var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
}
.wcb-mag-promo-text { max-width: 720px; }
.wcb-mag-promo-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 4px;
}
.wcb-mag-promo-h {
	margin: 0 0 8px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 900;
	color: white;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.wcb-mag-promo-p {
	margin: 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.85);
}
.wcb-mag-promo-cta {
	min-width: 200px;
	padding: 14px 22px !important;
	font-size: 0.92rem !important;
	font-weight: 800 !important;
	box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}
@media (max-width: 720px) {
	.wcb-mag-promo-inner { grid-template-columns: 1fr; padding: 28px var(--gutter); }
	.wcb-mag-promo-cta { width: 100%; justify-content: center; }
}


/* ==========================================================================
   14. NEWSLETTER signup — split text + image
   ========================================================================== */
.wcb-mag-newsletter {
	background: var(--surf);
	border-top: 1px solid var(--line);
}
.wcb-mag-newsletter .wcb-mag-inner { padding: 0; }
.wcb-mag-newsletter-inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	min-height: 380px;
}
.wcb-mag-newsletter-text {
	padding: 48px var(--gutter) 48px max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.wcb-mag-newsletter-eyebrow {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--red);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.wcb-mag-newsletter-h {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 900;
	color: var(--ink);
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}
.wcb-mag-newsletter-p {
	margin: 0;
	font-size: 1rem;
	color: var(--ink-3);
	line-height: 1.5;
}
.wcb-mag-newsletter-form {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	max-width: 520px;
}
.wcb-mag-newsletter-form input[type="email"] {
	flex: 1;
	padding: 14px 18px;
	background: var(--surf);
	border: 1px solid var(--line-2);
	border-radius: var(--r-2);
	font-family: inherit;
	font-size: 0.95rem;
	outline: none;
	transition: border-color 120ms;
}
.wcb-mag-newsletter-form input[type="email"]:focus { border-color: var(--red); }
.wcb-mag-newsletter-form .wcb-btn-primary {
	padding: 14px 22px !important;
	font-size: 0.92rem !important;
	font-weight: 800 !important;
	white-space: nowrap;
}
.wcb-mag-newsletter-fine {
	font-size: 0.78rem;
	color: var(--ink-4);
	margin-top: 6px;
}
.wcb-mag-newsletter-img {
	background: linear-gradient(135deg, var(--navy) 0%, var(--red-2) 100%) center/cover no-repeat;
	min-height: 100%;
	position: relative;
	overflow: hidden;
}
.wcb-mag-newsletter-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 50%),
	            radial-gradient(circle at 70% 70%, rgba(220, 38, 38, 0.18), transparent 50%);
	pointer-events: none;
}
@media (max-width: 899px) {
	.wcb-mag-newsletter-inner { grid-template-columns: 1fr; }
	.wcb-mag-newsletter-text { padding: 32px var(--gutter); }
	.wcb-mag-newsletter-img { min-height: 200px; }
	.wcb-mag-newsletter-form { flex-direction: column; }
	.wcb-mag-newsletter-form .wcb-btn-primary { width: 100%; justify-content: center; }
}

/* ==========================================================================
   WORKSPACE 3:1 — Match of the Day + Sharp plays | Casino categories
   ========================================================================== */
.wcb-ws-3-1 {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px var(--gutter);
}
.wcb-ws-3-1 .wcb-ws-main,
.wcb-ws-3-1 .wcb-ws-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.wcb-ws-3-1 .wcb-ws-aside { gap: 0; }

/* ---- Match of the Day panel (compact, 3 picks) ---- */
.wcb-mod-panel {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-4);
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wcb-mod-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
.wcb-mod-panel-head > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wcb-mod-panel-h {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.wcb-btn-sm {
	padding: 6px 12px;
	font-size: 0.78rem;
}

.wcb-mod-compact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.wcb-mod-compact {
	background: var(--surf-2);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.wcb-mod-compact:hover {
	border-color: var(--line-2);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.wcb-mod-compact.is-feature {
	border-color: var(--red-soft);
	background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), var(--surf-2));
}
.wcb-mod-compact-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-3);
}
.wcb-mod-compact-stage {
	background: var(--ink);
	color: white;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 0.6rem;
}
.wcb-mod-compact-date { color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.wcb-mod-compact-teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 6px;
}
.wcb-mod-compact-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
}
.wcb-mod-compact-flag { font-size: 1.6rem; line-height: 1; }
.wcb-mod-compact-name {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wcb-mod-compact-odd {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--red);
	letter-spacing: -0.01em;
}
.wcb-mod-compact-vs {
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--ink-4);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wcb-mod-compact-tip {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	padding: 7px 10px;
	display: flex;
	gap: 5px;
	align-items: baseline;
	font-size: 0.78rem;
}
.wcb-mod-compact-tip-lbl { color: var(--ink-3); }
.wcb-mod-compact-tip-val {
	color: var(--ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.wcb-mod-compact-link,
.wcb-mod-compact-link:link,
.wcb-mod-compact-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 7px 10px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-2);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	margin-top: auto;
	transition: background 120ms, color 120ms;
}
.wcb-mod-compact-link:hover,
.wcb-mod-compact-link:focus,
.wcb-mod-compact-link:active {
	background: var(--red) !important;
	color: #fff !important;
	text-decoration: none !important;
}
.wcb-mod-compact-link:hover * { color: #fff !important; }

/* ---- Casino category quick-link panel ---- */
.wcb-cat-panel {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	min-height: 100%;
}
.wcb-cat-panel-head {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--line);
	background: var(--surf-2);
}
.wcb-cat-panel-head h3 {
	margin: 0 0 2px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.wcb-cat-panel-sub {
	font-size: 0.7rem;
	color: var(--ink-4);
	font-weight: 500;
}
.wcb-cat-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.wcb-cat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	transition: background 120ms, color 120ms;
	flex: 1 1 0;
	min-height: 44px;
}
.wcb-cat-row:last-child { border-bottom: 0; }
.wcb-cat-row:hover {
	background: var(--surf-2);
	color: var(--red);
}
.wcb-cat-row.is-all {
	background: var(--surf-2);
	font-weight: 800;
}
.wcb-cat-row.is-all:hover { background: var(--red-soft); }
.wcb-cat-name { flex: 1; }
.wcb-cat-count {
	background: var(--ink);
	color: white;
	min-width: 26px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
}
.wcb-cat-row.is-all .wcb-cat-count { background: var(--red); }
.wcb-cat-row:hover .wcb-cat-count { background: var(--red); }

/* ---- Mobile: stack to single column ---- */
@media (max-width: 899px) {
	.wcb-ws-3-1 {
		grid-template-columns: 1fr !important;
		gap: 16px;
		padding: 16px var(--gutter);
	}
	.wcb-mod-panel { padding: 14px 14px 16px; }
	.wcb-mod-panel-h { font-size: 0.95rem; }
	.wcb-mod-compact-grid { grid-template-columns: 1fr; }
	.wcb-mod-compact-flag { font-size: 1.4rem; }
	.wcb-mod-compact-name { font-size: 0.85rem; }
	.wcb-mod-compact-odd { font-size: 1.1rem; }
	.wcb-cat-panel { min-height: 0; height: auto; }
}

@media (max-width: 600px) {
	.wcb-mod-panel-head { flex-direction: column; align-items: flex-start; }
	.wcb-btn-sm { align-self: stretch; text-align: center; }
}

/* ==========================================================================
   COMPARISON TABLES — front-page Best-of sections (SEO + rich-result hooks)
   ========================================================================== */
.wcb-comparisons {
	background: var(--surf-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 40px 0;
}
.wcb-comparisons-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.wcb-comparison {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-4);
	padding: 28px;
	scroll-margin-top: 100px;
}
.wcb-comparison-head { margin-bottom: 18px; }
.wcb-comparison-eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
	background: var(--red-soft);
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.wcb-comparison-h {
	margin: 0 0 8px;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-comparison-intro {
	margin: 0 0 12px;
	color: var(--ink-3);
	max-width: 80ch;
	line-height: 1.55;
}
.wcb-comparison-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--ink-4);
	padding-top: 8px;
	border-top: 1px dashed var(--line);
}
.wcb-comparison-meta strong { color: var(--ink-2); font-weight: 700; }
.wcb-comparison-meta a { color: var(--red); }

.wcb-comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}
.wcb-comparison-table thead th {
	background: var(--surf-2);
	color: var(--ink-3);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.wcb-comparison-table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	vertical-align: middle;
}
.wcb-comparison-table tbody tr:last-child td { border-bottom: 0; }
.wcb-comparison-table tbody tr:hover { background: var(--surf-2); }
.wcb-comparison-table tbody tr.is-top { background: linear-gradient(90deg, var(--red-soft), transparent 60%); }
.wcb-comparison-rank {
	font-family: var(--mono);
	font-weight: 800;
	color: var(--ink-3);
	width: 48px;
}
.wcb-comparison-table tr.is-top .wcb-comparison-rank { color: var(--red); }
.wcb-comparison-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}
.wcb-comparison-name img {
	width: 40px;
	height: 28px;
	object-fit: contain;
	background: var(--surf-2);
	border-radius: var(--r-1);
	padding: 2px;
}
.wcb-comparison-name a { color: var(--ink); text-decoration: none; }
.wcb-comparison-name a:hover { color: var(--red); }
.wcb-comparison-rating {
	display: inline-flex;
	align-items: baseline;
	background: var(--green-soft);
	color: var(--green);
	padding: 4px 9px;
	border-radius: var(--r-1);
	font-weight: 800;
	font-family: var(--mono);
}
.wcb-comparison-rating small {
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--ink-3);
	margin-left: 1px;
}

@media (max-width: 899px) {
	.wcb-comparison { padding: 18px; }
	.wcb-comparison-h { font-size: 1.25rem; }
	.wcb-comparison-table { min-width: 720px; }
}

/* ==========================================================================
   BEST-BY-COUNTRY GRID — 48 nations grouped by confederation
   ========================================================================== */
.wcb-by-country {
	background: var(--surf);
	padding: 48px 0;
}
.wcb-by-country-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.wcb-by-country-head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}
.wcb-by-country-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 8px;
}
.wcb-by-country-head h2 {
	margin: 0 0 10px;
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.wcb-by-country-head p {
	margin: 0;
	color: var(--ink-3);
	line-height: 1.55;
}
.wcb-by-country-group { margin-top: 28px; }
.wcb-by-country-group-h {
	margin: 0 0 14px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.wcb-by-country-group-count { color: var(--ink-4); font-weight: 600; }
.wcb-by-country-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.wcb-by-country-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.wcb-by-country-card:hover {
	border-color: var(--ink-4);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.18);
}
.wcb-by-country-card.is-priority {
	border-color: var(--red-soft);
	background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), var(--surf));
}
.wcb-by-country-card.is-priority:hover { border-color: var(--red); }
.wcb-by-country-card-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
}
.wcb-by-country-card-flag { font-size: 1.7rem; line-height: 1; }
.wcb-by-country-card-name {
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.wcb-by-country-card-star { color: var(--red); margin-left: 4px; font-size: 0.85rem; }
.wcb-by-country-card-count {
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--ink-4);
	background: var(--surf-2);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.wcb-by-country-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wcb-by-country-card-list li {
	display: flex;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--ink-2);
	font-weight: 600;
}
.wcb-by-country-card-rank {
	color: var(--ink-4);
	font-family: var(--mono);
	font-size: 0.72rem;
	min-width: 18px;
}
.wcb-by-country-card-cta {
	margin-top: auto;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--red);
	letter-spacing: -0.01em;
}

@media (max-width: 600px) {
	.wcb-by-country { padding: 32px 0; }
	.wcb-by-country-head h2 { font-size: 1.5rem; }
	.wcb-by-country-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.wcb-by-country-card { padding: 10px; }
	.wcb-by-country-card-list { display: none; } /* card stays compact on small screens */
}

/* ==========================================================================
   COUNTRY SEO BLOCK — rich content below the bookmaker list on /casinos-country/<slug>/
   ========================================================================== */
.wcb-country-seo {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--line);
}
.wcb-country-seo-head { margin-bottom: 20px; }
.wcb-country-seo-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
	background: var(--red-soft);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.wcb-country-seo h2,
.wcb-country-seo h3 {
	color: var(--ink);
	letter-spacing: -0.02em;
}
.wcb-country-seo h2 {
	font-size: 1.55rem;
	font-weight: 800;
	margin: 0 0 10px;
}
.wcb-country-seo h3 {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 28px 0 10px;
	scroll-margin-top: 100px;
}
.wcb-country-seo-deck {
	font-size: 1rem;
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 80ch;
}

/* Native-language terminology card */
.wcb-country-seo-native {
	background: linear-gradient(135deg, rgba(36, 52, 71, 0.04), rgba(220, 38, 38, 0.04));
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	padding: 18px 20px;
	margin: 20px 0 28px;
}
.wcb-country-seo-native h3 {
	margin: 0 0 4px;
	font-size: 1rem;
	color: var(--ink);
}
.wcb-country-seo-native-intro {
	font-size: 0.85rem;
	color: var(--ink-3);
	margin: 0 0 12px;
}
.wcb-country-seo-native-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 16px;
	margin: 0;
}
.wcb-country-seo-native-grid > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--line);
}
.wcb-country-seo-native-grid > div:last-child { border-bottom: 0; }
.wcb-country-seo-native-grid dt {
	font-size: 0.7rem;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.wcb-country-seo-native-grid dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.005em;
}

/* List blocks */
.wcb-country-seo-leagues,
.wcb-country-seo-payments {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 16px;
	list-style: none;
	margin: 12px 0 18px;
	padding: 0;
}
.wcb-country-seo-leagues li,
.wcb-country-seo-payments li {
	font-size: 0.92rem;
	color: var(--ink-2);
	padding: 6px 10px;
	background: var(--surf-2);
	border-radius: var(--r-1);
	font-weight: 600;
}

.wcb-country-seo p,
.wcb-country-seo ul {
	color: var(--ink-2);
	line-height: 1.65;
	max-width: 80ch;
}
.wcb-country-seo ul {
	padding-left: 1.4em;
}
.wcb-country-seo ul li {
	margin-bottom: 6px;
}
.wcb-country-seo strong { color: var(--ink); font-weight: 700; }
.wcb-country-seo a { color: var(--red); }

/* Country-specific FAQ accordion */
.wcb-country-seo-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.wcb-country-seo-faq details {
	background: var(--surf);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	overflow: hidden;
}
.wcb-country-seo-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}
.wcb-country-seo-faq summary::-webkit-details-marker { display: none; }
.wcb-country-seo-faq summary span {
	font-family: var(--mono);
	color: var(--ink-3);
	font-size: 1.2rem;
	font-weight: 800;
	transition: transform 200ms;
}
.wcb-country-seo-faq details[open] summary span { transform: rotate(45deg); }
.wcb-country-seo-faq details > div {
	padding: 0 14px 14px;
	font-size: 0.92rem;
	color: var(--ink-2);
	line-height: 1.6;
}
.wcb-country-seo-faq details > div p:first-child { margin-top: 0; }
.wcb-country-seo-faq details:hover { border-color: var(--ink-4); }

/* Footer of the SEO block */
.wcb-country-seo-foot {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px dashed var(--line);
	font-size: 0.85rem;
	color: var(--ink-3);
}
.wcb-country-seo-foot p { margin: 6px 0; }

@media (max-width: 600px) {
	.wcb-country-seo h2 { font-size: 1.25rem; }
	.wcb-country-seo h3 { font-size: 1.05rem; margin: 22px 0 8px; }
	.wcb-country-seo-native { padding: 14px; }
	.wcb-country-seo-native-grid { grid-template-columns: 1fr; }
	.wcb-country-seo-leagues,
	.wcb-country-seo-payments { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   /casinos/ sidebar — Filter by country (48 nations, grouped by confederation)
   ========================================================================== */
.wcb-sb-country .wcb-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wcb-sb-country-body {
	max-height: 480px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ink-4) transparent;
}
.wcb-sb-country-body::-webkit-scrollbar { width: 5px; }
.wcb-sb-country-body::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }
.wcb-sb-country-group { padding: 4px 0; }
.wcb-sb-country-group + .wcb-sb-country-group { border-top: 1px solid var(--line); }
.wcb-sb-country-group-h {
	padding: 6px 14px 4px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-4);
}
.wcb-sb-country-row {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.84rem;
	font-weight: 600;
	transition: background 120ms, color 120ms;
}
.wcb-sb-country-row:hover {
	background: var(--surf-2);
	color: var(--red);
}
.wcb-sb-country-row.is-active {
	background: var(--red-soft);
	color: var(--red);
	font-weight: 800;
}
.wcb-sb-country-flag {
	font-size: 1rem;
	line-height: 1;
	text-align: center;
}
.wcb-sb-country-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.wcb-sb-country-count {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ink-4);
	background: var(--surf-2);
	padding: 2px 7px;
	border-radius: 999px;
	min-width: 22px;
	text-align: center;
}
.wcb-sb-country-row.is-active .wcb-sb-country-count {
	background: var(--red);
	color: white;
}

/* ==========================================================================
   FOOTER — 48-country internal-link block (under main footer-nav, above bottom)
   ========================================================================== */
.wcb-appfoot-countries {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wcb-appfoot-countries-head {
	margin-bottom: 14px;
}
.wcb-appfoot-countries-head h5 {
	margin: 0 0 4px;
	font-size: 0.95rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: -0.01em;
}
.wcb-appfoot-countries-head span {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.55);
}
.wcb-appfoot-countries-group {
	padding: 10px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.wcb-appfoot-countries-group:last-child { border-bottom: 0; }
.wcb-appfoot-countries-group-h {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}
.wcb-appfoot-countries-group-h span { color: rgba(255, 255, 255, 0.35); font-weight: 500; }
.wcb-appfoot-countries-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 4px 16px;
}
.wcb-appfoot-countries-group ul li {
	font-size: 0.82rem;
}
.wcb-appfoot-countries-group ul li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	padding: 3px 0;
	transition: color 120ms;
}
.wcb-appfoot-countries-group ul li a:hover {
	color: white;
	text-decoration: none;
}
.wcb-appfoot-countries-group ul li span[aria-hidden] {
	font-size: 1rem;
	line-height: 1;
}

@media (max-width: 720px) {
	.wcb-appfoot-countries-group ul {
		grid-template-columns: 1fr 1fr;
		gap: 2px 12px;
	}
	.wcb-appfoot-countries-group ul li { font-size: 0.78rem; }
}

/* ==========================================================================
   v2.21.3 — UNIFIED LOGO-WELL: navy background, white mark text
   Every casino logo well across Top 5 (frontpage), Top 10 (/casinos +
   category + country archives), comparison tables, and the editor's-pick
   strip uses the same navy bg so logos with WHITE TEXT are readable.
   This block is final cascade — wins prior overrides via specificity + order.
   ========================================================================== */
.wcb-top5-logo,
.wcb-top10-logo,
.wcb-sc-logo,
.wcb-cas-inline .wcb-cas-inline-logo {
	background: var(--navy) !important;
	border: 1px solid var(--navy-2) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.wcb-top5-card.is-top .wcb-top5-logo {
	background: var(--navy) !important;
	border-color: var(--red) !important;
	box-shadow: 0 0 0 1px var(--red), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.wcb-top5-logo-mark,
.wcb-top10-logo-mark,
.wcb-sc-logo-mark {
	color: #ffffff !important;
}
.wcb-top5-card.is-top .wcb-top5-logo-mark { color: #ffffff !important; }

/* Comparison-table thumbnail wells (per-row casino name cell) */
.wcb-comparison-name img {
	background: var(--navy) !important;
	border: 1px solid var(--navy-2);
	padding: 3px;
}

/* ==========================================================================
   v2.21.3 — TOP 5 CARD: tight + consistent spacing, offer text CENTERED
   Defeats the @media(min-width:900px) navy-stage overrides at line 6318
   that forced grid-template-rows: auto 1fr auto auto auto + min-height 32vh,
   which was inflating the gap above the offer text. Cards now flex-column
   with a uniform 6px gap, equal margins on the bonus text, and the offer
   horizontally centered in a fixed two-line min-height so 1- and 2-line
   bonuses look identical across all 5 cards.
   ========================================================================== */
@media (min-width: 900px) {
	.wcb-top5-card {
		display: flex !important;
		flex-direction: column !important;
		grid-template-rows: none !important;
		gap: 6px !important;
		padding: 14px 14px 12px !important;
		min-height: 0 !important;
		justify-items: stretch !important;
	}
	.wcb-top5-logo {
		height: 56px !important;
		padding: 6px !important;
	}
	.wcb-top5-name {
		text-align: center !important;
		font-size: 1.05rem !important;
		margin: 4px 0 0 !important;
	}
	.wcb-top5-bonus {
		text-align: center !important;
		font-size: 0.82rem !important;
		line-height: 1.35 !important;
		color: var(--ink-3) !important;
		min-height: 2.7em !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 4px 0 !important;
		padding: 0 4px !important;
		-webkit-line-clamp: unset !important;
		overflow: hidden !important;
	}
	.wcb-top5-cta-row {
		gap: 6px !important;
		margin-top: 4px !important;
	}
	.wcb-top5-cta {
		padding: 11px 14px !important;
		font-size: 0.82rem !important;
		font-weight: 800 !important;
	}
	.wcb-top5-review {
		padding: 7px 12px !important;
		font-size: 0.74rem !important;
	}
}

/* ==========================================================================
   v2.21.7 — MOBILE HARDENING (rev 2 — actually working)
   The previous overflow-x: clip rules were not enough on iOS Safari because
   (1) full-bleed elements using `width: 100vw + margin: calc(50% - 50vw)`
       were still pushing past the viewport, and
   (2) iOS Safari ignores overflow:hidden when a child has touch-action enabled
       horizontal panning.
   This block kills both root causes.
   ========================================================================== */

/* ---- 1. Kill horizontal scroll at the root: clip + touch-action ---- */
html {
	overflow-x: clip !important;
	max-width: 100vw !important;
	width: 100% !important;
	touch-action: pan-y; /* disable horizontal swipe-pan at the document level */
	-webkit-text-size-adjust: 100%;
}
body, body.wcb-app {
	overflow-x: clip !important;
	max-width: 100vw !important;
	width: 100% !important;
	position: relative; /* establishes containing block for absolutely-positioned children */
}

/* ---- 2. Mobile: NO full-bleed breakouts. They're a desktop-only luxury. ---- */
@media (max-width: 899px) {
	.wcb-mag-darkhero,
	.wcb-mag-promo,
	.wcb-news-hero,
	.wcb-news-slider,
	.wcb-news-hero-inner,
	.wcb-news-track {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* News slider track stays clipped to slider, even if iOS gets confused */
	.wcb-news-slider {
		overflow: hidden !important;
		touch-action: pan-y !important;
	}
	/* Every direct child of the main wrapper must clip to its container */
	.wcb-app-main,
	.wcb-app-main > *,
	body.wcb-app > * {
		max-width: 100% !important;
		overflow-x: clip;
	}
	/* Every section the theme renders — defensive viewport clip */
	[class^="wcb-"],
	[class*=" wcb-"] {
		max-width: 100%;
	}
	/* Specific sections that have caused trouble historically */
	.wcb-top5-grid,
	.wcb-top10-list,
	.wcb-mod,
	.wcb-mod-panel,
	.wcb-cas-inline,
	.wcb-pred-hero-card,
	.wcb-by-country-grid,
	.wcb-comparisons,
	.wcb-comparison {
		max-width: 100% !important;
	}
	/* Catch-all for long unbreakable text (long URLs, payout strings, etc.) */
	.wcb-top10-info-meta,
	.wcb-top10-info-meta strong,
	.wcb-top10-info-meta .mono,
	.wcb-top10-bonus,
	.wcb-top10-name,
	.wcb-pred-hero-team-name {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	/* /casinos row at narrow viewports — make absolutely sure it fits */
	.wcb-top10-row {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ---- 2. /casinos rows + stats stay inside narrow phones ---- */
@media (max-width: 600px) {
	/* Page-h1 stats grid — collapse 4-up into 2-up so labels don't truncate */
	.wcb-page-h1-stats,
	.wcb-sp-stats {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px 16px !important;
	}
	/* Top 10 row already collapses to 1-col at 720; reinforce padding */
	.wcb-top10-row {
		padding: 14px 12px !important;
		gap: 8px !important;
	}
	.wcb-top10-name { font-size: 0.95rem !important; }
	.wcb-top10-bonus { font-size: 0.82rem !important; }
	.wcb-top10-info-meta { font-size: 0.72rem !important; gap: 3px 10px !important; }

	/* Comparison tables: scroll within the wrapper, never push page wider */
	.wcb-comparison-table-wrap { max-width: 100%; }
	.wcb-comparison-table { min-width: 560px; }

	/* Footer countries grid stays inside viewport */
	.wcb-appfoot-countries-group ul {
		grid-template-columns: 1fr 1fr !important;
		gap: 2px 10px !important;
	}
}

/* ---- 3. Bottom tab bar — iOS-style polish + body clearance ---- */
@media (max-width: 899px) {
	/* Reserve space at the bottom of every page so content clears the tab bar */
	body.wcb-app {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* The tab bar itself: solid backdrop with proper iOS dock feel */
	.wcb-tabbar {
		display: flex !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		z-index: 950 !important;
		background: rgba(255, 255, 255, 0.96) !important;
		-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
		backdrop-filter: saturate(180%) blur(20px) !important;
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06) !important;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.wcb-tab {
		min-height: 50px;
		gap: 3px;
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		color: var(--ink-3);
	}
	.wcb-tab svg {
		width: 22px;
		height: 22px;
	}
	.wcb-tab.is-active {
		color: var(--red);
	}
	.wcb-tab.is-active svg {
		color: var(--red);
	}
	/* Primary tab (Casinos) — iOS dock-style raised pill */
	.wcb-tab-primary .wcb-tab-primary-inner {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: var(--red);
		color: white;
		box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
		margin-top: -2px;
	}
	.wcb-tab-primary .wcb-tab-primary-inner svg {
		width: 22px;
		height: 22px;
		color: white;
	}
}