/*
Theme Name: XScore
Theme URI: https://xscore.co.ke
Author: XScore
Description: A clean, credible dashboard-style design for XScore: neutral charcoal surface, one confident blue accent, disciplined type system (Sora for headings, Inter for body, IBM Plex Mono for every number), and generous, consistent spacing. Wired directly into your XScore plugins.
Version: 11.0.0
Text Domain: xscore
*/

:root{
	/* PITCH & GOLD — a deliberate move away from the blue-accent dark
	   dashboard look, which by now is the default for practically
	   every SaaS product. This grounds the palette in something
	   actually specific to football: a deep pitch-at-dusk green
	   instead of neutral gray-black, and a warm trophy gold as the
	   one accent instead of another confident blue. Win/live stay
	   their own distinct hues so they're never confused with "the
	   brand color" doing double duty. */
	--bg:#0C1310;
	--surface:#141D18;
	--surface-2:#1D2921;
	--line:rgba(232,240,235,.09);
	--line-strong:rgba(232,240,235,.17);
	--text:#EEF3F0;
	--text-dim:#8FA096;
	--accent:#EFAA3C;
	--accent-2:#D6912A;
	--win:#35CE84;
	--live:#FF5D6C;
	--accent-ink:#1A1305;
	/* A second accent reserved for editorial content — the blog listing
	   cards, article pages, and everything around them. Gold stays the
	   betting product's color (predictions, results, CTAs); a cooler
	   violet-blue marks "you're reading" rather than "you're betting",
	   and gives long-form article text a calmer color for links than
	   a high-chroma gold would be over a full page of reading. */
	--accent-blog:#8B7FFF;
	--accent-blog-2:#6F5FE0;
	--radius:12px;
	--shadow:0 8px 20px rgba(0,0,0,.32);
	--shadow-lg:0 18px 40px rgba(0,0,0,.4);
	--space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:36px; --space-6:52px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; color-scheme:dark; }
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	line-height:1.68;
	overflow-x:hidden;
	width:100%;
	-webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
a, button, .btn, input[type=submit], .card, .stat-card{ touch-action:manipulation; }
img{ max-width:100%; height:auto; display:block; }
iframe, video, embed, object{ max-width:100%; }
table{ max-width:100%; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

input, select, textarea{ font-size:16px; }

.container{ width:min(1180px,calc(100% - 32px)); margin-inline:auto; }

h1, h2, h3, .brand, .btn, .stat-card .n, .footer-heading{ font-family:'Sora',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; }
.mono, .card-meta, .article-meta, .result-card-date, .result-card-pick strong, .result-card-odds{ font-family:'IBM Plex Mono',monospace; font-weight:500; }

.hero h1, .section-head h2, .article h1, .card h3, .footer-cta-text strong{ text-wrap:balance; }

/* Skip link */
.skip-link{
	position:fixed; top:-60px; left:14px; z-index:200;
	background:var(--accent); color:var(--accent-ink);
	padding:11px 18px; border-radius:8px; font-weight:700; font-size:.85rem;
	font-family:'Inter',sans-serif; transition:top .2s ease;
}
.skip-link:focus{ top:14px; }

@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.3s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
.brand{ view-transition-name:xs-brand; }
@media(prefers-reduced-motion:reduce){
	::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

@media(prefers-contrast:more){
	:root{ --line:rgba(230,237,243,.4); --text-dim:#B7C0C8; }
	.card, .widget, .result-card, .stat-card, .btn, .stats-grid{ border-width:1.5px; }
}
@media(forced-colors:active){
	.site-nav, .xs-bottom-nav, .xs-welcome-toast, .xs-install-prompt, .nav-search-form{ forced-color-adjust:none; border:1px solid CanvasText; }
	.btn, .card, .widget, .result-card{ border-color:CanvasText; }
}
@media(prefers-reduced-transparency:reduce){
	/* Header and bottom nav already use solid backgrounds by default now
	   (see the perf note above .site-header) — only the transient
	   glass popovers still need a fallback here. */
	.site-nav ul ul, .nav-search-form, .xs-welcome-toast, .xs-install-prompt{
		backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface);
	}
}
.content-layout{ container-type:inline-size; container-name:xs-content; }
@container xs-content (max-width:640px){
	.grid{ grid-template-columns:1fr; }
	.results-grid{ grid-template-columns:1fr; }
}

/* HEADER — a solid background, not glass. It's sticky and repaints
   on every scroll frame, so backdrop-filter here has a real ongoing
   cost (especially on the budget Android GPUs common among this
   audience) for a frosted-glass effect nobody notices while scrolling
   past it. A near-opaque solid color reads almost identically and
   costs nothing per frame. */
.site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(13,17,23,.97);
	border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; letter-spacing:-.02em; font-size:1.5rem; color:var(--text); }
.brand::before{ content:""; width:9px; height:9px; border-radius:3px; background:var(--accent); }

/* MENU — a plain, confident underline indicator. No glow, no pill —
   just a clear color change and a solid underline on the active or
   hovered item, the way a serious dashboard nav behaves. */
.site-nav ul{ display:flex; gap:4px; list-style:none; padding:0; margin:0; align-items:center; }
.site-nav li{ position:relative; }
.site-nav a{
	position:relative; display:block; padding:10px 15px; color:var(--text-dim); font-weight:600;
	font-size:.9rem; white-space:nowrap; transition:color .15s ease, background .15s ease; border-radius:8px;
}
.site-nav a::after{
	content:""; position:absolute; left:15px; right:15px; bottom:1px; height:2px;
	background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:center;
	transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.site-nav a:hover{ color:var(--text); background:rgba(230,237,243,.05); }
.site-nav a:hover::after{ transform:scaleX(1); }
.site-nav li.current-menu-item > a{ color:var(--text); }
.site-nav li.current-menu-item > a::after{ transform:scaleX(1); }

.site-nav li.menu-item-has-children > a::after{ content:none; }
.site-nav li.menu-item-has-children > a{ padding-right:22px; }
.site-nav li.menu-item-has-children > a::before{
	content:"⌄"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:.85em; opacity:.6;
}

.site-nav ul ul{
	display:block; visibility:hidden; opacity:0; pointer-events:none;
	position:absolute; top:calc(100% + 10px); left:0; min-width:210px;
	background:var(--surface-2);
	border:1px solid var(--line); border-radius:10px;
	padding:6px; gap:2px; box-shadow:var(--shadow-lg);
	transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
	z-index:70;
}
.site-nav li:hover > ul{ visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); }
.site-nav ul ul li{ width:100%; }
.site-nav ul ul a{ display:block; padding:10px 12px; border-radius:8px; font-size:.85rem; font-weight:500; white-space:nowrap; }
.site-nav ul ul a::after{ content:none; }
.site-nav ul ul a:hover{ background:rgba(239,170,60,.12); color:var(--accent); }

.nav-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-app-btn{
	display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px;
	border:1px solid var(--line-strong); color:var(--text); font-weight:600; font-size:.84rem;
	white-space:nowrap; transition:border-color .15s ease, background .15s ease;
}
.nav-app-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.nav-app-btn:hover{ border-color:var(--accent); background:rgba(239,170,60,.08); color:var(--accent); }
.xs-standalone .nav-app-btn{ display:none; }
.nav-login-btn{
	display:inline-flex; align-items:center; padding:9px 18px; border-radius:8px;
	background:var(--accent); color:var(--accent-ink) !important;
	font-weight:700; font-size:.84rem; white-space:nowrap; transition:background .15s ease; flex-shrink:0;
	font-family:'Inter',sans-serif;
}
.nav-login-btn:hover{ background:var(--accent-2); }

/* HEADER SEARCH */
.nav-search{ position:relative; flex-shrink:0; }
.nav-search summary{
	list-style:none; cursor:pointer; width:38px; height:38px; border-radius:8px;
	display:flex; align-items:center; justify-content:center; font-size:1rem;
	border:1px solid var(--line-strong); background:transparent; color:var(--text-dim); transition:border-color .15s ease, color .15s ease;
}
.nav-search summary::-webkit-details-marker{ display:none; }
.nav-search summary:hover{ border-color:var(--accent); color:var(--accent); }
.nav-search[open] summary{ border-color:var(--accent); color:var(--accent); }
.nav-search-form{
	position:absolute; top:calc(100% + 8px); right:0; z-index:60;
	display:flex; gap:6px;
	background:var(--surface-2);
	border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:var(--shadow-lg); width:min(280px,80vw);
}
.nav-search-form input{
	flex:1; min-width:0; padding:9px 11px; border-radius:6px; border:1px solid var(--line);
	background:var(--bg); color:var(--text); font-size:.9rem;
}
.nav-search-form button{
	border:none; border-radius:6px; background:var(--accent); color:var(--accent-ink);
	padding:0 14px; font-weight:700; font-size:.82rem; cursor:pointer; font-family:'Inter',sans-serif;
}

/* TICKER */
.xs-ticker{ background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; position:relative; }
.xs-ticker::before, .xs-ticker::after{ content:""; position:absolute; top:0; bottom:0; width:30px; z-index:2; pointer-events:none; }
.xs-ticker::before{ left:0; background:linear-gradient(90deg,var(--surface),transparent); }
.xs-ticker::after{ right:0; background:linear-gradient(270deg,var(--surface),transparent); }
.xs-ticker-track{ display:flex; width:max-content; animation:xs-scroll 32s linear infinite; }
.xs-ticker-item{ display:flex; align-items:center; gap:8px; padding:10px 22px; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--text-dim); border-right:1px solid var(--line); font-family:'IBM Plex Mono',monospace; }
.xs-ticker-item b{ color:var(--accent); font-weight:600; }
@keyframes xs-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .xs-ticker-track{ animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } }

/* PULL-QUOTE */
.article blockquote{
	margin:30px 0; padding:8px 0 8px 24px; border-left:3px solid var(--accent-blog);
	font-family:'Sora',sans-serif; font-weight:600;
	font-size:clamp(1.15rem,3vw,1.4rem); line-height:1.4; color:var(--text);
	position:relative;
}
.article blockquote p{ margin:0; font-size:inherit; font-family:inherit; color:inherit; }
.article blockquote cite{
	display:block; margin-top:10px; font-family:'Inter',sans-serif; font-style:normal;
	font-size:.8rem; font-weight:600; color:var(--text-dim);
}

/* DROP CAP */
.article > p:first-of-type::first-letter{
	font-family:'Sora',sans-serif; font-weight:700; float:left;
	font-size:3.2em; line-height:.85; padding:4px 10px 0 0; color:var(--accent-blog);
}

/* FIGURE / CAPTION */
.article figure{ margin:22px 0; }
.article figure img{ margin:0; border-radius:10px; }
.article figcaption{
	margin-top:8px; font-size:.8rem; color:var(--text-dim); text-align:center;
	font-family:'Inter',sans-serif; font-style:italic;
}

/* HERO */
.hero{ padding:64px 0 48px; }
.hero-panel{
	position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(32px,5vw,64px); text-align:left;
	background:var(--surface);
	box-shadow:var(--shadow-lg);
}
/* A quiet touch of depth — a soft accent-tinted glow low in the
   corner, not a spotlight. Restrained enough to read as polish
   rather than decoration. */
.hero-panel::before{
	content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px;
	background:radial-gradient(circle, rgba(239,170,60,.16), transparent 70%);
	pointer-events:none; z-index:0;
}
.hero-panel > *{ position:relative; z-index:1; }
/* Blog listing pages get the violet glow instead of gold — same
   panel, different mood, signalling "editorial" before you've even
   started reading. */
.hero-panel--blog::before{ background:radial-gradient(circle, rgba(139,127,255,.16), transparent 70%); }

.verified-stamp{
	position:absolute; top:26px; right:26px; z-index:2;
	display:flex; align-items:center; gap:7px;
	padding:7px 14px; border-radius:999px;
	background:rgba(53,206,132,.1); border:1px solid rgba(53,206,132,.3);
	color:var(--win);
	font-family:'Inter',sans-serif; font-weight:600;
	font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; line-height:1.2;
	pointer-events:none;
}
.verified-stamp span{ display:block; }
.verified-stamp br{ display:none; }
.verified-stamp .stamp-check{ font-size:.95rem; margin:0; }
@media(max-width:560px){ .verified-stamp{ top:16px; right:16px; font-size:.62rem; padding:6px 11px; } }

.eyebrow{
	display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong);
	background:var(--surface-2); color:var(--text-dim); padding:7px 14px; border-radius:999px;
	font-size:.75rem; font-weight:600; font-family:'Inter',sans-serif;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--live); flex-shrink:0; }
/* Blog listing pages aren't "live" in any sense — a static violet dot
   instead of the pulsing red one used for genuinely live content. */
.eyebrow--blog::before{ background:var(--accent-blog); animation:none; }

.hero h1{
	max-width:760px; margin:26px 0 16px; font-size:clamp(2.2rem,5.4vw,3.6rem); line-height:1.08; letter-spacing:-.02em;
	color:var(--text);
}
.verified-badge{
	display:inline-flex; align-items:center; justify-content:center;
	width:.5em; height:.5em; border-radius:50%;
	background:var(--win); color:var(--bg); -webkit-text-fill-color:var(--bg);
	font-size:.46em; vertical-align:middle; margin-left:4px;
}
.hero-tagline{
	font-family:'Sora',sans-serif; font-weight:600;
	color:var(--accent); font-size:1rem; letter-spacing:0; margin:0 0 0 !important;
}
.hero p{ max-width:560px; margin:14px 0 32px; color:var(--text-dim); font-size:clamp(1rem,2vw,1.1rem); line-height:1.7; font-family:'Inter',sans-serif; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; min-height:50px; padding:0 26px; border-radius:9px; font-weight:700; letter-spacing:0; border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; font-size:.92rem; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
/* A gradient here rather than a flat fill — the one deliberately
   "designed" moment on the page, reinforcing the gold as something
   earned/premium rather than just another flat UI color. */
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); font-weight:800; box-shadow:var(--shadow); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--accent-2), var(--accent-2)); }
.btn-secondary{ border-color:var(--line-strong); background:transparent; color:var(--text); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-icon{ font-size:.95em; }
.btn-live-dot{
	width:8px; height:8px; border-radius:50%; background:var(--live); display:inline-block;
	box-shadow:0 0 0 3px rgba(255,93,108,.18); animation:xs-live-pulse 1.6s ease-in-out infinite;
}
@keyframes xs-live-pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
@media(prefers-reduced-motion:reduce){ .btn-live-dot{ animation:none; } }

/* STATS */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.stat-card{
	padding:22px 10px; text-align:center;
	position:relative; border-right:1px solid var(--line);
	transition:background .15s ease;
}
.stat-card:last-child{ border-right:none; }
.stat-card:hover{ background:rgba(230,237,243,.03); }
.stat-card:nth-child(1) .n{ color:var(--accent); }
.stat-card:nth-child(2) .n{ color:var(--text); }
.stat-card:nth-child(3) .n{ color:var(--text); }

.win-gauge{ position:relative; width:56px; height:56px; margin:2px auto 6px; }
.win-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.win-gauge-track{ fill:none; stroke:rgba(230,237,243,.09); stroke-width:6; }
.win-gauge-fill{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.win-gauge-label{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:.82rem; font-weight:600; font-family:'IBM Plex Mono',monospace; color:var(--accent); letter-spacing:0;
}
@media(prefers-reduced-motion:reduce){ .win-gauge-fill{ transition:none; } }

.stat-icon{ display:block; font-size:1rem; margin:4px 0 4px; opacity:.9; color:var(--text-dim); }
.stat-card .n{ display:block; font-size:1.4rem; letter-spacing:0; font-family:'IBM Plex Mono',monospace; font-weight:600; }
.stat-card .l{ display:block; font-size:.66rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:6px; font-family:'Inter',sans-serif; }

/* SECTIONS */
.section{ padding:40px 0 30px; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.section-head h1, .section-head h2{ font-size:clamp(1.5rem,3vw,1.9rem); margin:0; letter-spacing:-.01em; color:var(--text); }

/* SEARCH FORM — shared by search.php and 404.php, was previously two
   copies of the same inline styles. */
.xs-search-form{ display:flex; gap:8px; max-width:480px; margin-bottom:26px; }
.xs-search-form input{ flex:1; padding:11px 15px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--text); font-size:.95rem; }
.xs-search-form .btn{ min-height:auto; padding:0 18px; }
.xs-search-form--hero{ max-width:420px; margin:22px auto 26px; }
.section-head p{ margin:0; color:var(--text-dim); font-size:.86rem; font-family:'Inter',sans-serif; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* LIVE INDICATOR — genuinely tied to the auto-refresh poll below, not
   a decorative badge. Text and dot color both reflect real state:
   green pulse while polling normally, briefly flashes accent when
   fresh numbers actually land, dims to "Offline" if a poll fails. */
.xs-live-indicator{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:var(--text-dim); }
.xs-live-indicator .dot{ width:6px; height:6px; border-radius:50%; background:var(--win); flex-shrink:0; animation:xs-live-dot-pulse 2s ease-in-out infinite; }
.xs-live-indicator.is-updated .dot{ background:var(--accent); }
.xs-live-indicator.is-offline .dot{ background:var(--text-dim); animation:none; }
@keyframes xs-live-dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media(prefers-reduced-motion:reduce){ .xs-live-indicator .dot{ animation:none; } }

/* Numbers that just changed get one quiet flash — accent color, then
   settle — instead of silently jumping to a new value. */
.xs-stat-flash{ animation:xs-stat-flash-kf 1.1s ease; }
@keyframes xs-stat-flash-kf{
	0%{ color:var(--accent); }
	100%{ color:inherit; }
}
@media(prefers-reduced-motion:reduce){ .xs-stat-flash{ animation:none; } }

/* Ticker content swap — a brief crossfade instead of an instant,
   jarring content replacement when new picks arrive. */
.xs-ticker-track{ transition:opacity .25s ease; }
.xs-ticker-track.is-swapping{ opacity:0; }

/* CARD GRID (articles) */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* CARD GRID — used exclusively for blog/article listings (predictions
   and results have their own components below), so this is where the
   editorial accent lives instead of the betting-product gold. */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; position:relative; }
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-blog); opacity:.8; z-index:1; }
.card:hover{ transform:translateY(-3px); border-color:rgba(139,127,255,.35); }
.card-body{ padding:20px 22px 22px; }
.card h3{ margin:0 0 10px; font-size:1.06rem; line-height:1.4; letter-spacing:-.005em; font-family:'Sora',sans-serif; font-weight:600; color:var(--text); }
.card p{ margin:0; color:var(--text-dim); font-size:.88rem; line-height:1.6; font-family:'Inter',sans-serif; }
.card-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; color:var(--text-dim); font-size:.72rem; font-weight:600; }
.card-meta span + span::before{ content:"·"; margin-right:5px; opacity:.6; }
.post-thumb{ aspect-ratio:16/9; object-fit:cover; background:var(--surface-2); width:100%; }
.thumb-fallback{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:24px; background:var(--surface-2); }

/* VERIFIED RESULTS */
.results-summary{ display:flex; align-items:baseline; gap:10px; margin:-6px 0 18px; flex-wrap:wrap; }
.results-summary-score{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.3rem; color:var(--accent); }
.results-summary-label{ font-size:.85rem; color:var(--text-dim); font-weight:500; font-family:'Inter',sans-serif; }

.results-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.result-card{
	position:relative; overflow:hidden;
	background:var(--surface);
	border:1px solid var(--line); border-radius:12px; padding:16px 18px;
	transition:border-color .15s ease;
}
.result-card:hover{ border-color:var(--line-strong); }
.result-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.result-card-won::before{ background:var(--win); }
.result-card-lost::before{ background:var(--live); }
.result-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.result-card-match{ font-weight:600; font-size:.92rem; font-family:'Sora',sans-serif; color:var(--text); }
.result-team-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; box-shadow:0 0 0 1px rgba(230,237,243,.15); }
.result-vs{ margin:0 5px; font-size:.66rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; vertical-align:middle; }
.result-card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.result-card-date{ font-size:.74rem; color:var(--text-dim); }
.result-card-pick{ font-size:.8rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.result-card-pick strong{ color:var(--text); }
.result-card-odds{ margin-left:5px; color:var(--accent); font-weight:600; }

.status{ display:inline-flex; padding:4px 11px; border-radius:999px; font-size:.7rem; font-weight:700; font-family:'Inter',sans-serif; }
.status-won{ background:rgba(53,206,132,.1); color:var(--win); border:1px solid rgba(53,206,132,.3); }
.status-lost{ background:rgba(255,93,108,.08); color:var(--live); border:1px solid rgba(255,93,108,.26); }

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

/* BREADCRUMB — visible trail on articles, both for orientation and
   because it's a genuine SEO signal (Google surfaces this as the
   result's URL path in search when BreadcrumbList schema matches). */
.xs-breadcrumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.8rem; color:var(--text-dim); margin-bottom:18px; font-family:'Inter',sans-serif; }
.xs-breadcrumb a{ color:var(--text-dim); font-weight:500; }
.xs-breadcrumb a:hover{ color:var(--accent-blog); }
.xs-breadcrumb .sep{ opacity:.5; }
.xs-breadcrumb .current{ color:var(--text); font-weight:600; }

/* TIP TABLE / RESULTS */
.tip-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.tip-table{ width:100%; border-collapse:collapse; min-width:560px; }
.tip-table th{ padding:14px 16px; text-align:left; background:var(--surface-2); color:var(--text); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-family:'Inter',sans-serif; font-weight:600; }
.tip-table td{ padding:14px 16px; border-top:1px solid var(--line); color:var(--text); font-size:.9rem; font-family:'Inter',sans-serif; }
.tip-table tbody tr:nth-child(even) td{ background:rgba(230,237,243,.012); }
.tip-table tr:hover td{ background:rgba(239,170,60,.05); }
.date-relative{ display:block; font-size:.72rem; color:var(--text-dim); font-weight:500; margin-top:2px; }

@media(max-width:580px){
	.tip-table-wrap{ overflow:visible; border:none; background:none; box-shadow:none; }
	.tip-table{ min-width:0; }
	.tip-table thead{ display:none; }
	.tip-table, .tip-table tbody, .tip-table tr, .tip-table td{ display:block; width:100%; }
	.tip-table tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 4px; margin-bottom:10px; }
	.tip-table td{ display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-top:none; font-size:.88rem; }
	.tip-table td::before{ content:attr(data-label); font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; color:var(--accent); margin-right:12px; font-family:'Inter',sans-serif; }
}

/* CONTENT TABLES */
.xs-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); margin:26px 0; position:relative; }
.xs-table-wrap table{ display:table; width:100%; border-collapse:collapse; min-width:480px; margin:0; }
.xs-table-wrap th{ padding:14px 16px; text-align:left; background:var(--surface-2); color:var(--text); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-family:'Inter',sans-serif; font-weight:600; white-space:nowrap; }
.xs-table-wrap td{ padding:13px 16px; border-top:1px solid var(--line); color:var(--text); font-size:.9rem; font-family:'Inter',sans-serif; }
.xs-table-wrap tbody tr:nth-child(even) td{ background:rgba(230,237,243,.012); }
.xs-table-wrap tr:hover td{ background:rgba(239,170,60,.05); }
.xs-table-wrap caption{ caption-side:top; padding:12px 16px 0; text-align:left; font-size:.8rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.xs-table-wrap.xs-scrollable::after{ content:""; position:absolute; top:2px; right:2px; bottom:2px; width:28px; background:linear-gradient(90deg, transparent, var(--surface) 88%); pointer-events:none; border-radius:0 12px 12px 0; }

@media(max-width:580px){
	.xs-table-wrap{ border:none; background:none; box-shadow:none; overflow:visible; }
	.xs-table-wrap.xs-scrollable::after{ display:none; }
	.xs-table-wrap table{ min-width:0; }
	.xs-table-wrap thead{ display:none; }
	.xs-table-wrap table, .xs-table-wrap tbody, .xs-table-wrap tr, .xs-table-wrap td{ display:block; width:100%; }
	.xs-table-wrap tr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px 4px; margin-bottom:10px; }
	.xs-table-wrap td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-top:none; font-size:.88rem; text-align:right; }
	.xs-table-wrap td::before{ content:attr(data-label); font-weight:700; font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; color:var(--accent); margin-right:auto; text-align:left; font-family:'Inter',sans-serif; }
	.xs-table-wrap td:not([data-label]){ justify-content:flex-start; }
}

/* SINGLE POST LAYOUT */
.content-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; padding:40px 0 60px; }
.article{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,44px); overflow-wrap:break-word; }
.article h1{ font-family:'Sora',sans-serif; font-weight:700; font-size:clamp(1.9rem,4.2vw,2.7rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 16px; color:var(--text); }
.article h2, .article h3{ line-height:1.35; letter-spacing:-.01em; font-family:'Sora',sans-serif; font-weight:600; color:var(--text); margin-top:1.7em; }
.article p, .article li{ color:var(--text); font-size:1.05rem; line-height:1.8; font-family:'Inter',sans-serif; }
.article-meta{ color:var(--text-dim); font-size:.85rem; margin-bottom:24px; font-weight:500; }
.article img{ border-radius:10px; margin:20px 0; border:1px solid var(--line); }
.article a{ color:var(--accent-blog); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; font-weight:500; }

/* SHARE BUTTONS */
.share-buttons{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.share-label{ font-size:.82rem; font-weight:600; color:var(--text-dim); margin-right:4px; font-family:'Inter',sans-serif; }
.share-btn{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:8px; font-size:.82rem; font-weight:600; border:1px solid var(--line-strong); cursor:pointer; font-family:'Inter',sans-serif; transition:border-color .15s ease; }
.share-btn:hover{ border-color:var(--accent-blog); }
.share-whatsapp{ background:#25D366; color:#04140b; border-color:#25D366; }
.share-facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
.share-twitter{ background:var(--text); color:var(--bg); border-color:var(--text); }
.share-copy{ background:transparent; color:var(--text); }

/* NEXT / PREVIOUS POST NAVIGATION */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.post-nav-link{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; transition:border-color .15s ease; }
.post-nav-link:hover{ border-color:var(--line-strong); }
.post-nav-next{ text-align:right; grid-column:2; }
.post-nav-prev{ grid-column:1; }
.post-nav-label{ display:block; font-size:.72rem; font-weight:700; color:var(--accent-blog); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; font-family:'Inter',sans-serif; }
.post-nav-title{ display:block; font-size:.86rem; font-weight:500; color:var(--text); line-height:1.4; font-family:'Inter',sans-serif; }

@media(max-width:560px){
	.post-nav{ grid-template-columns:1fr; }
	.post-nav-next{ grid-column:1; text-align:left; }
	.share-buttons{ gap:6px; }
	.share-btn{ padding:7px 13px; font-size:.78rem; }
}

.sidebar{ display:grid; gap:18px; align-content:start; }
.widget{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; }
.widget-title{ margin:0 0 14px; color:var(--accent-blog); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:'Inter',sans-serif; }
.widget-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.widget-list li a{ font-size:.88rem; font-weight:500; color:var(--text); display:block; line-height:1.45; font-family:'Inter',sans-serif; }
.widget-list li a:hover{ color:var(--accent-blog); }
.widget-list .meta{ display:block; font-size:.72rem; color:var(--text-dim); margin-top:3px; font-weight:500; }

/* PAGE (no sidebar) */
.page-layout{ padding:40px 0 60px; }

/* NOTICE */
.xs-notice{ background:var(--surface); border:1px dashed var(--line-strong); color:var(--text-dim); border-radius:12px; padding:16px 20px; font-size:.85rem; font-weight:500; margin-top:28px; font-family:'Inter',sans-serif; }

/* PAGINATION */
.pagination, .navigation.pagination{ display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.page-numbers{ padding:10px 14px; border-radius:8px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:.85rem; font-family:'Inter',sans-serif; }
.page-numbers.current{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* FOOTER */
.site-footer{ border-top:1px solid var(--line); padding:0; background:var(--surface); color:var(--text-dim); position:relative; overflow:hidden; }

.footer-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:26px 0; margin-top:0; border-bottom:1px solid var(--line); }
.footer-cta-text{ display:flex; flex-direction:column; gap:3px; }
.footer-cta-text strong{ color:var(--text); font-size:1rem; font-family:'Sora',sans-serif; font-weight:600; }
.footer-cta-text span{ font-size:.85rem; color:var(--text-dim); font-family:'Inter',sans-serif; }
.footer-cta-btn{ min-height:auto; padding:12px 24px; font-size:.85rem; flex-shrink:0; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding:44px 0 40px; border-bottom:1px solid var(--line); }
.footer-col{ display:flex; flex-direction:column; gap:12px; padding-left:26px; border-left:1px solid var(--line); position:relative; }
.footer-col.footer-brand-col{ padding-left:0; border-left:none; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:1.15rem; color:var(--text); margin-bottom:6px; }
.footer-brand::before{ content:""; width:8px; height:8px; border-radius:3px; background:var(--accent); }
.footer-blurb{ font-size:.86rem; line-height:1.65; color:var(--text-dim); margin:0; max-width:290px; font-family:'Inter',sans-serif; }
.footer-whatsapp{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#25D366 !important; font-weight:600; font-size:.85rem; width:fit-content; font-family:'Inter',sans-serif; }
.footer-heading{ font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; position:relative; padding-bottom:11px; color:var(--text); }
.footer-heading::after{ content:""; position:absolute; left:0; bottom:0; width:22px; height:2px; border-radius:2px; background:var(--accent); }

.footer-col a{ font-size:.87rem; font-weight:400; color:var(--text-dim); transition:color .15s ease; position:relative; width:fit-content; font-family:'Inter',sans-serif; }
.footer-col a:hover{ color:var(--accent); }
.footer-staff-link{ opacity:.55; }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 26px; }
.footer-copy{ font-size:.8rem; margin:0; font-family:'Inter',sans-serif; }
.footer-disclaimer{ font-size:.78rem; margin:0; color:var(--text-dim); font-family:'Inter',sans-serif; }
.footer-disclaimer strong{ color:var(--text); }
.footer-top-link{ font-size:.8rem; font-weight:600; color:var(--text-dim); transition:color .15s ease; font-family:'Inter',sans-serif; }
.footer-top-link:hover{ color:var(--accent); }

@media(max-width:820px){
	.footer-grid{ grid-template-columns:1fr 1fr; row-gap:26px; }
	.footer-brand-col{ grid-column:1 / -1; padding-left:0; border-left:none; }
	.footer-blurb{ max-width:100%; }
	.footer-col:nth-child(2), .footer-col:nth-child(4){ padding-left:0; border-left:none; }
}
@media(max-width:600px){
	.footer-cta{ flex-direction:column; align-items:flex-start; }
	.footer-cta-btn{ width:100%; text-align:center; }
	.footer-grid{ grid-template-columns:1fr; gap:24px; padding-bottom:28px; }
	.footer-col{ padding-left:0; border-left:none; padding-top:20px; border-top:1px solid var(--line); }
	.footer-col.footer-brand-col{ padding-top:0; border-top:none; }
	.footer-bottom{ flex-direction:column; align-items:flex-start; padding-bottom:110px; }
	.site-footer{ padding-top:40px; }
}

/* WELCOME TOAST */
.xs-welcome-toast{
	display:flex; align-items:center; gap:12px;
	position:fixed; left:14px; right:14px; z-index:80;
	top:calc(14px + env(safe-area-inset-top));
	background:var(--surface-2);
	backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
	border:1px solid var(--line-strong); border-radius:14px; padding:14px 14px;
	box-shadow:var(--shadow-lg);
	opacity:0; transform:translateY(-16px);
	transition:opacity .3s ease, transform .3s ease;
	max-width:500px; margin:0 auto;
}
.xs-welcome-toast.show{ opacity:1; transform:translateY(0); }
.xs-welcome-icon{ width:36px; height:36px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(239,170,60,.12); border:1px solid rgba(239,170,60,.3); color:var(--accent); }
.xs-welcome-icon svg{ width:18px; height:18px; }
.xs-welcome-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; font-family:'Inter',sans-serif; }
.xs-welcome-text strong{ font-size:.86rem; color:var(--text); }
.xs-welcome-text span{ font-size:.74rem; color:var(--text-dim); }
.xs-welcome-btn{ background:var(--accent); color:var(--accent-ink); padding:9px 15px; border-radius:8px; font-weight:700; font-size:.78rem; flex-shrink:0; white-space:nowrap; font-family:'Inter',sans-serif; transition:background .15s ease; }
.xs-welcome-btn:hover{ background:var(--accent-2); }
.xs-welcome-close{ background:none; border:none; color:var(--text-dim); font-size:1.2rem; line-height:1; padding:2px 4px; cursor:pointer; flex-shrink:0; }

/* INSTALL APP PROMPT */
.xs-install-prompt{
	display:none; align-items:center; gap:14px;
	position:fixed; left:14px; right:14px; bottom:14px; z-index:65;
	background:var(--surface-2);
	backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
	border:1px solid var(--line-strong); border-radius:16px; padding:16px 16px;
	box-shadow:var(--shadow-lg);
}
.xs-install-prompt.show{ display:flex; }
.xs-install-icon{ width:40px; height:40px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(239,170,60,.12); border:1px solid rgba(239,170,60,.3); color:var(--accent); }
.xs-install-icon svg{ width:20px; height:20px; }
.xs-install-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; font-family:'Inter',sans-serif; }
.xs-install-text strong{ font-size:.9rem; color:var(--text); }
.xs-install-text span{ font-size:.76rem; color:var(--text-dim); line-height:1.35; }
.xs-install-btn{ background:var(--accent); color:var(--accent-ink); border:none; padding:10px 18px; border-radius:8px; font-weight:700; font-size:.83rem; flex-shrink:0; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s ease; }
.xs-install-btn:hover{ background:var(--accent-2); }
.xs-install-close{ background:none; border:none; color:var(--text-dim); font-size:1.3rem; line-height:1; padding:4px 6px; cursor:pointer; flex-shrink:0; }

@media(max-width:900px){
	.xs-install-prompt.show{ bottom:calc(78px + env(safe-area-inset-bottom)); }
}

/* BOTTOM NAV */
.xs-bottom-nav{
	display:none; position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:60;
	background:rgba(19,24,31,.98);
	border:1px solid var(--line-strong); border-radius:18px;
	padding:8px 10px;
	box-shadow:var(--shadow-lg);
}
.xs-bottom-nav-inner{ display:flex; justify-content:space-between; align-items:center; max-width:520px; margin:0 auto; }
.xs-bn-item{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-dim); padding:4px 3px; text-decoration:none; flex:1; font-family:'Inter',sans-serif; }
.xs-bn-circle{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.xs-bn-circle svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; }
.xs-bn-label{ font-size:8.8px; font-weight:600; transition:color .2s ease; white-space:nowrap; }

.xs-bn-item:hover .xs-bn-circle, .xs-bn-item.active .xs-bn-circle{ background:rgba(239,170,60,.14); border-color:var(--accent); color:var(--accent); }
.xs-bn-item:hover, .xs-bn-item.active{ color:var(--accent); }
.xs-bn-item.active .xs-bn-label{ color:var(--accent); }

.site-nav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav ul{ flex-wrap:nowrap; }

@media(min-width:901px) and (max-width:1240px){
	.header-inner{ gap:10px; }
	.brand{ font-size:1.2rem; gap:8px; }
	.site-nav a{ padding:8px 10px; font-size:.8rem; }
	.nav-login-btn{ padding:8px 14px; font-size:.8rem; }
	.nav-app-btn span{ display:none; }
	.nav-app-btn{ padding:9px; }
}

@media(max-width:900px){
	.site-nav{ display:none; }
	.xs-bottom-nav{ display:block; }
	.grid{ grid-template-columns:1fr 1fr; }
	.content-layout{ grid-template-columns:1fr; }
	.nav-app-btn span{ display:none; }
	.nav-app-btn{ padding:9px; }
}

@media(max-width:620px){
	.hero{ padding-top:28px; }
	.hero-panel{ border-radius:14px; }
	.grid{ grid-template-columns:1fr; }
	.section-head{ align-items:flex-start; flex-direction:column; }
	.header-inner{ min-height:68px; }
	.site-footer{ padding-bottom:100px; }
	.stats-grid{ grid-template-columns:repeat(2,1fr); }
	.stat-card{ padding:16px 6px; border-bottom:1px solid var(--line); }
	.stat-card:nth-child(odd){ border-right:1px solid var(--line); }
	.stat-card .n{ font-size:1.15rem; }
}

@media(max-width:400px){
	.container{ width:calc(100% - 20px); }
	.header-inner{ gap:8px; padding:12px 0; }
	.brand{ font-size:1.05rem; gap:8px; }
	.nav-login-btn{ padding:11px 14px; font-size:.76rem; }

	.hero-panel{ padding:24px 18px; border-radius:12px; }
	.hero h1{ font-size:1.65rem; }
	.hero p{ font-size:.9rem; }
	.btn{ padding:0 18px; min-height:44px; font-size:.85rem; }

	.stat-card{ padding:12px 4px; }
	.stat-card .n{ font-size:1rem; }
	.stat-card .l{ font-size:.6rem; }

	.section-head h2{ font-size:1.2rem; }
	.card-body{ padding:14px 16px; }
	.card h3{ font-size:.95rem; }

	.article{ padding:18px 16px; border-radius:12px; }
	.article h1{ font-size:1.55rem; }
	.article p, .article li{ font-size:1rem; line-height:1.75; }
	.article-meta{ font-size:.8rem; }

	.widget{ padding:16px; border-radius:12px; }

	.xs-bn-circle{ width:30px; height:30px; }
	.xs-bn-circle svg{ width:15px; height:15px; }
	.xs-bn-label{ font-size:7.8px; }
	.xs-bn-item{ padding:3px 1px; }
	.xs-bottom-nav{ left:6px; right:6px; padding:6px 4px; border-radius:16px; }

	.share-buttons{ gap:5px; }
	.share-label{ width:100%; margin-bottom:4px; }
	.share-btn{ padding:6px 11px; font-size:.74rem; }
}

/* SCROLL REVEAL */
.xs-reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.xs-reveal.xs-revealed{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){ .xs-reveal{ opacity:1; transform:none; transition:none; } }

/* READING PROGRESS BAR */
.xs-progress-bar{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:100; background:var(--accent); transition:width .1s linear; }

/* AD MANAGER — a fixed min-height on every slot prevents layout shift
   (CLS) once the ad script actually loads, which matters both for
   Core Web Vitals and for AdSense's own policy on stable layouts. */
.xs-ad-slot{ display:flex; align-items:center; justify-content:center; width:100%; min-height:60px; overflow:hidden; margin:24px 0; }
.xs-ad-slot:empty{ display:none; margin:0; }
.xs-ad-slot::before{ content:"Advertisement"; display:block; width:100%; text-align:center; font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); opacity:.6; margin-bottom:6px; position:absolute; margin-top:-20px; }
.xs-ad-slot{ position:relative; padding-top:18px; }
.card + .xs-ad-slot, .result-card + .xs-ad-slot{ grid-column:1 / -1; }

.xs-sticky-ad{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:59; background:var(--surface); border-top:1px solid var(--line); padding:8px 34px 8px 8px; box-shadow:0 -8px 24px rgba(0,0,0,.35); }
.xs-sticky-ad-close{ position:absolute; top:6px; right:8px; width:22px; height:22px; line-height:20px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:16px; cursor:pointer; padding:0; }
@media(max-width:900px){
	.xs-sticky-ad{ display:block; bottom:calc(78px + env(safe-area-inset-bottom)); }
	.xs-sticky-ad .xs-ad-slot{ margin:0; min-height:50px; }
	.xs-sticky-ad .xs-ad-slot::before{ display:none; }
}
\n\n/* ==========================================================================\n   XSCORE 11 — PUNTER-FIRST SPORTSBOOK-STYLE HOME EXPERIENCE\n   ========================================================================== */\n:root{\n\t--bg:#07110c;\n\t--surface:#0d1912;\n\t--surface-2:#12251a;\n\t--surface-3:#183222;\n\t--line:rgba(255,255,255,.08);\n\t--line-strong:rgba(255,255,255,.15);\n\t--accent:#ffc400;\n\t--accent-2:#e9a900;\n\t--win:#23d18b;\n\t--live:#ff5b62;\n\t--text:#f5f8f6;\n\t--text-dim:#91a59a;\n\t--accent-ink:#171200;\n}\nbody{background:radial-gradient(circle at 50% -200px,rgba(35,209,139,.09),transparent 460px),var(--bg);}\n.site-header{background:rgba(7,17,12,.98);border-bottom-color:rgba(255,196,0,.14);}\n.brand{font-size:1.55rem;letter-spacing:-.045em;}\n.brand::before{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,196,0,.10);}\n.nav-login-btn{background:var(--accent);box-shadow:0 6px 18px rgba(255,196,0,.14);}\n.xs-ticker{background:#09160f;border-bottom:1px solid rgba(255,196,0,.12);}\n.xs-ticker-item{gap:10px;}\n.xs-ticker-match{color:var(--text-dim);}\n.xs-ticker-pick{display:inline-flex;padding:4px 8px;border-radius:6px;background:rgba(255,196,0,.10);color:var(--accent);font-size:.72rem;letter-spacing:.02em;}\n\n.hero{padding:38px 0 24px;}\n.hero-panel{\n\tbackground:linear-gradient(120deg,#0d1d14 0%,#10271a 56%,#0d1912 100%);\n\tborder-color:rgba(255,196,0,.15);\n\tborder-radius:18px;\n\tpadding:clamp(28px,5vw,58px);\n}\n.hero-panel::before{top:-230px;right:-80px;width:580px;height:580px;background:radial-gradient(circle,rgba(255,196,0,.18),transparent 67%);}\n.hero-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,#000,transparent 78%);}\n.hero-kicker{display:inline-flex;align-items:center;gap:8px;color:#c7d5cd;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}\n.hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--win);box-shadow:0 0 0 4px rgba(35,209,139,.10);}\n.hero h1{max-width:820px;margin:14px 0 16px;font-size:clamp(2.35rem,5.8vw,4.35rem);line-height:1.01;letter-spacing:-.045em;}\n.hero h1 span{color:var(--accent);}\n.hero-copy{max-width:700px!important;font-size:clamp(.97rem,1.6vw,1.08rem)!important;margin:0 0 25px!important;color:#b3c3ba!important;}\n.hero-actions{gap:9px;}\n.btn{border-radius:8px;min-height:48px;padding:0 21px;}\n.btn-primary{box-shadow:0 10px 28px rgba(255,196,0,.16);}\n.btn-ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10);color:#dfe8e2;}\n.btn-ghost:hover{border-color:rgba(255,255,255,.22);color:#fff;}\n.hero-trust-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;color:var(--text-dim);font-size:.76rem;font-weight:600;}\n.hero-trust-row span{display:inline-flex;align-items:center;gap:7px;}\n.hero-trust-row i{width:6px;height:6px;border-radius:50%;background:var(--win);}\n.verified-stamp{background:rgba(35,209,139,.08);border-color:rgba(35,209,139,.20);}\n\n.stats-grid{margin-top:30px;border-color:rgba(255,255,255,.08);background:rgba(5,13,9,.46);backdrop-filter:blur(4px);}\n.stat-card{padding:18px 10px;}\n.stat-card .n{font-size:1.32rem;}\n.stat-card .l{color:#82988c;}\n\n.punter-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0 2px;}\n.punter-nav a{display:flex;min-width:0;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:.16s ease;}\n.punter-nav a:hover,.punter-nav a.active{border-color:rgba(255,196,0,.38);background:#112319;transform:translateY(-1px);}\n.punter-nav span{font-family:'Sora',sans-serif;font-size:.84rem;font-weight:700;color:var(--text);}\n.punter-nav a.active span{color:var(--accent);}\n.punter-nav small{font-size:.68rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n\n.section{padding-top:34px;}\n.section-head{margin-bottom:18px;padding-bottom:13px;}\n.section-head>div{min-width:0;}\n.section-kicker{display:block;margin-bottom:4px;color:var(--accent);font-size:.63rem;font-weight:800;letter-spacing:.12em;}\n.section-kicker-blog{color:var(--accent-blog);}\n.section-head h2{font-size:clamp(1.35rem,2.7vw,1.75rem);}\n\n.tip-table-wrap{border-radius:10px;border-color:rgba(255,255,255,.09);box-shadow:none;}\n.tip-table th{background:#102419;color:#9caf9f;padding:11px 14px;font-size:.64rem;}\n.tip-table td{padding:13px 14px;}\n.tip-table tbody tr:hover td{background:rgba(255,196,0,.045);}\n.tip-table td:last-child{font-family:'IBM Plex Mono',monospace;font-weight:700;}\n\n.results-summary{display:inline-flex;padding:7px 11px;border-radius:8px;background:#102419;border:1px solid rgba(35,209,139,.14);margin:-3px 0 15px;}\n.results-summary-score{font-size:1rem;color:var(--win);}\n.results-summary-label{font-size:.76rem;}\n.results-grid{gap:10px;}\n.result-card{background:#0d1912;border-radius:10px;padding:14px 16px;box-shadow:none;}\n.result-card-match{font-size:.86rem;}\n.status{border-radius:6px;padding:4px 8px;}\n.result-card-odds{display:inline-flex;padding:2px 6px;border-radius:5px;background:rgba(255,196,0,.09);}\n\n.card{box-shadow:none;border-radius:10px;background:#0d1912;}\n.card:hover{transform:translateY(-2px);}\n.post-thumb,.thumb-fallback{aspect-ratio:1.72/1;}\n.card-body{padding:16px 17px 18px;}\n.card h3{font-size:.98rem;}\n.xs-notice{border-left:3px solid var(--accent);background:#0d1912;}\n\n@media(max-width:900px){\n\t.punter-nav{grid-template-columns:repeat(3,1fr);}\n}\n@media(max-width:620px){\n\t.hero{padding-top:18px;}\n\t.hero-panel{padding:58px 18px 22px;}\n\t.hero h1{font-size:2.18rem;line-height:1.04;}\n\t.hero-copy{font-size:.92rem!important;line-height:1.58!important;}\n\t.hero-actions{display:grid;grid-template-columns:1fr 1fr;}\n\t.hero-actions .btn:first-child{grid-column:1/-1;}\n\t.btn{width:100%;padding:0 11px;font-size:.79rem;min-height:45px;}\n\t.hero-trust-row{gap:10px 15px;font-size:.68rem;}\n\t.punter-nav{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:5px;margin-left:-2px;margin-right:-2px;scrollbar-width:none;}\n\t.punter-nav::-webkit-scrollbar{display:none;}\n\t.punter-nav a{min-width:108px;scroll-snap-align:start;padding:11px 12px;}\n\t.section{padding-top:28px;}\n\t.section-head{gap:8px;}\n\t.section-head p{font-size:.75rem;}\n\t.tip-table tr{border-radius:9px;padding:5px 3px;background:#0d1912;}\n\t.result-card{padding:13px 14px;}\n}\n@media(max-width:400px){\n\t.hero-panel{padding-top:56px;}\n\t.hero h1{font-size:1.9rem;}\n\t.verified-stamp{max-width:170px;}\n}\n