/* ============================================================================
GAMTING SCORES — REDESIGN 2026 (single revertable theme layer)
----------------------------------------------------------------------------
Loaded LAST, after all existing stylesheets. Restyles the whole site.
TO REVERT: remove the single line from the
page . The original CSS is untouched.
Identity: bold dark sports UI. Signature = ELECTRIC GREEN (live/energy),
deep blue-black canvas, big Barlow Condensed numerals, glowing live cards.
Font loaded via in each page head.
============================================================================ */
:root {
/* canvas — deep, cold, near-black with blue undertone */
--gs-bg: #05070d;
--gs-bg-2: #0a0e1a;
--gs-surface: #0f1626;
--gs-surface-2: #16203a;
--gs-line: rgba(255,255,255,.08);
--gs-line-2: rgba(255,255,255,.16);
/* text */
--gs-text: #f3f6fc;
--gs-text-2: #9aa6bf;
--gs-text-3: #5e6985;
/* SIGNATURE accent — electric green */
--gs-acc: #00e676;
--gs-acc-dim: #0a8f4d;
--gs-acc-glow: rgba(0,230,118,.45);
/* support accents */
--gs-blue: #3b82f6;
--gs-amber: #ffb020;
--gs-red: #ff4d4d;
--gs-r-sm: 8px; --gs-r: 12px; --gs-r-lg: 18px;
}
/* ── Base canvas ────────────────────────────────────────────────────────── */
html, body {
background: var(--gs-bg) !important;
color: var(--gs-text) !important;
font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
-webkit-font-smoothing: antialiased;
}
body { letter-spacing: .1px; }
/* atmospheric depth — visible, not subtle */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(1300px 720px at 50% -14%, rgba(0,230,118,.16), transparent 60%),
radial-gradient(1000px 620px at 100% 5%, rgba(59,130,246,.14), transparent 58%),
radial-gradient(900px 600px at 0% 35%, rgba(255,176,32,.06), transparent 55%);
}
/* faint grid texture for a "data" feel */
body::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 75%);
mask-image: radial-gradient(circle at 50% 0%, #000 35%, transparent 75%);
}
h1, h2, h3, .stage-title, .tournament-title {
font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
letter-spacing: .4px; font-weight: 700 !important;
}
a { color: var(--gs-acc); }
/* tabular figures for all data */
.score-column, .match-time, .table-row span, .standings-table td,
.dc-set, .dc-tot, .pt-set, .pt-scores, .score, .agg, .table-row {
font-variant-numeric: tabular-nums !important;
}
/* ── Header — distinct, branded ────────────────────────────────────────── */
header, .header-row {
background: linear-gradient(180deg, #0a0f1c 0%, var(--gs-bg) 100%) !important;
border-bottom: 1px solid var(--gs-line) !important;
box-shadow: 0 1px 0 var(--gs-acc-glow);
}
.logo span {
background: linear-gradient(92deg, #fff 20%, var(--gs-acc) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
font-weight: 700 !important; letter-spacing: 1px !important;
}
/* sports strip — compact horizontal chips (icon + label inline, not stacked) */
.sports-strip {
background: var(--gs-bg-2) !important;
border-top: 1px solid var(--gs-line) !important;
border-bottom: 1px solid var(--gs-line) !important;
}
.sports-strip-inner { background: transparent !important; gap: 8px !important; padding: 8px 20px !important; }
.sport-pill {
min-width: 0 !important;
flex-direction: row !important; /* icon + text side by side */
gap: 7px !important;
align-items: center !important;
padding: 6px 14px 6px 8px !important;
border-radius: 999px !important;
border: 1px solid var(--gs-line) !important;
background: var(--gs-surface) !important;
color: var(--gs-text-2) !important;
font-family: 'Barlow','sans-serif' !important;
font-weight: 600 !important;
font-size: 13px !important;
white-space: nowrap !important;
transition: all .18s ease !important;
}
.sport-pill .sport-icon {
width: 22px !important; height: 22px !important;
font-size: 11px !important; flex-shrink: 0 !important;
color: var(--gs-text-2) !important;
}
.sport-pill .sport-icon svg { width: 15px !important; height: 15px !important; }
.sport-pill:hover {
background: var(--gs-surface-2) !important; color: var(--gs-text) !important;
border-color: var(--gs-line-2) !important; transform: none !important;
}
.sport-pill.active {
background: var(--gs-acc) !important; color: #02160c !important;
border-color: var(--gs-acc) !important;
box-shadow: 0 0 16px -3px var(--gs-acc-glow) !important;
}
.sport-pill.active .sport-icon { color: #02160c !important; }
/* ── Mode tabs (Date / Live / Finished) — segmented, glowing ───────────── */
.toolbar { background: transparent !important; }
.mode-tabs {
display: inline-flex !important; gap: 4px !important;
background: var(--gs-bg-2) !important;
padding: 5px !important; border-radius: 999px !important;
border: 1px solid var(--gs-line) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.mode-tab {
border: none !important; background: transparent !important;
color: var(--gs-text-2) !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
font-weight: 600 !important; font-size: 14px !important;
text-transform: uppercase; letter-spacing: .6px;
padding: 8px 18px !important; border-radius: 999px !important;
cursor: pointer !important; transition: all .18s ease !important;
}
.mode-tab:hover { color: var(--gs-text) !important; }
.mode-tab.active {
background: var(--gs-acc) !important; color: #02160c !important;
box-shadow: 0 0 18px -2px var(--gs-acc-glow) !important;
}
.mode-tab[data-mode="live"]::before {
content: ""; display: inline-block; width: 8px; height: 8px;
border-radius: 50%; background: var(--gs-red); margin-right: 7px;
vertical-align: middle; animation: gs-pulse 1.6s infinite;
}
.mode-tab[data-mode="live"].active::before { background: #02160c; }
.mode-tab[data-mode="finished"].active {
background: var(--gs-blue) !important; color: #fff !important;
box-shadow: 0 0 18px -2px rgba(59,130,246,.5) !important;
}
@keyframes gs-pulse {
0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)} 70%{box-shadow:0 0 0 7px rgba(255,77,77,0)} 100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}
}
/* search controls */
.search-tabs { border-color: var(--gs-line) !important; }
.search-area, .search-box, .search-dropdown {
background: var(--gs-surface) !important;
border: 1px solid var(--gs-line) !important; border-radius: var(--gs-r) !important;
}
.date-controls input, .search-box input, input[type="date"], input[type="search"] {
background: var(--gs-bg-2) !important; border: 1px solid var(--gs-line-2) !important;
color: var(--gs-text) !important; border-radius: var(--gs-r-sm) !important;
}
.date-controls button, #prevDate, #nextDate {
background: var(--gs-surface) !important; border: 1px solid var(--gs-line-2) !important;
color: var(--gs-text) !important; border-radius: var(--gs-r-sm) !important;
}
/* ── Stage headers (competition group) — compact slim label ───────────── */
.content { background: transparent !important; }
.stage-header, .tournament-hero {
background: linear-gradient(135deg, var(--gs-surface) 0%, var(--gs-bg-2) 100%) !important;
border: 1px solid var(--gs-line) !important;
border-left: 3px solid var(--gs-acc) !important;
border-radius: var(--gs-r) !important;
box-shadow: 0 8px 24px -16px #000;
}
/* slim it down: tighter padding + smaller badge so it doesn't dwarf match rows */
.stage-header { padding: 6px 12px !important; }
.stage-header-logo { width: 30px !important; height: 30px !important; }
.stage-header-logo img { width: 30px !important; height: 30px !important; }
.stage-header-text, .stage-header-main { gap: 0 !important; }
.stage-header-text > *:first-child, .stage-title {
color: var(--gs-text) !important; font-weight: 700 !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
font-size: 14px !important; line-height: 1.25 !important; letter-spacing: .3px !important;
}
.stage-header-text > *:last-child { font-size: 11px !important; line-height: 1.2 !important; }
.stage-header-right, .stage-header-top { color: var(--gs-text-2) !important; font-size: 12px !important; }
/* ── Match rows — the hero component ───────────────────────────────────── */
.match-row, .tournament-row {
background: linear-gradient(180deg, var(--gs-surface) 0%, #0c1322 100%) !important;
border: 1px solid var(--gs-line) !important;
border-radius: var(--gs-r) !important;
margin-bottom: 8px !important;
transition: transform .14s ease, border-color .18s, box-shadow .18s, background .18s !important;
cursor: pointer; position: relative; overflow: hidden;
}
.match-row::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: transparent; transition: background .18s;
}
.match-row:hover, .tournament-row:hover {
border-color: var(--gs-line-2) !important;
transform: translateY(-2px) !important;
box-shadow: 0 14px 30px -16px #000, 0 0 0 1px var(--gs-acc-glow) inset !important;
}
.match-row:hover::before { background: var(--gs-acc); }
/* live match — green energy */
.match-row.is-live {
border-color: rgba(0,230,118,.35) !important;
background: linear-gradient(180deg, rgba(0,230,118,.08) 0%, var(--gs-surface) 100%) !important;
}
.match-row.is-live::before { background: var(--gs-acc); box-shadow: 0 0 14px 1px var(--gs-acc-glow); }
.meta-col { color: var(--gs-text-2) !important; }
.match-time {
color: var(--gs-text) !important; font-weight: 700 !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important; font-size: 16px !important;
}
.team-name { color: var(--gs-text) !important; font-weight: 500 !important; font-size: 15px !important; }
.team-name.team-winner { color: #fff !important; font-weight: 700 !important; }
.team-name.team-loser { color: var(--gs-text-3) !important; }
/* score — big condensed numerals */
.score-column {
color: #fff !important; font-weight: 700 !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
font-size: 20px !important; letter-spacing: .5px !important;
}
.match-row.is-live .score-column { color: var(--gs-acc) !important; text-shadow: 0 0 12px var(--gs-acc-glow); }
/* status chip */
.status {
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
font-weight: 600 !important; letter-spacing: .06em !important;
text-transform: uppercase; font-size: 12px !important;
}
.status.finished, .status.ft { color: var(--gs-text-2) !important; }
.status.live, .status.inprogress { color: var(--gs-acc) !important; }
.status.upcoming, .status.scheduled { color: var(--gs-text-2) !important; }
/* ── Tables / standings ────────────────────────────────────────────────── */
.table-row, .standings-row {
background: var(--gs-surface) !important;
border-bottom: 1px solid var(--gs-line) !important;
}
.table-header, .standings-head {
color: var(--gs-text-2) !important; text-transform: uppercase;
letter-spacing: .06em; font-size: 11px !important; font-weight: 700 !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
}
.table-row:hover { background: var(--gs-surface-2) !important; }
/* ── Tournament / event tabs ───────────────────────────────────────────── */
.tournament-tabs, .tabs, .event-tabs { border-bottom: 1px solid var(--gs-line) !important; }
.tournament-tab, .tab, .event-tab {
color: var(--gs-text-2) !important; font-weight: 600 !important;
font-family: 'Barlow Condensed','Barlow',sans-serif !important;
text-transform: uppercase; letter-spacing: .4px;
transition: color .18s !important;
}
.tournament-tab:hover, .tab:hover { color: var(--gs-text) !important; }
.tournament-tab.active, .tab.active, .event-tab.active {
color: var(--gs-acc) !important;
border-bottom: 2px solid var(--gs-acc) !important;
}
/* ── Buttons / pagination ──────────────────────────────────────────────── */
.pagination button, .btn, button.load-more {
background: var(--gs-surface) !important; border: 1px solid var(--gs-line-2) !important;
color: var(--gs-text) !important; border-radius: var(--gs-r-sm) !important;
transition: all .18s !important;
}
.pagination button:hover, .btn:hover {
background: var(--gs-surface-2) !important; border-color: var(--gs-acc) !important;
}
.btn-back-nav, .back-link { color: var(--gs-text-2) !important; }
.btn-back-nav:hover { color: var(--gs-acc) !important; }
/* empty / loading */
.empty, .panel-empty, .panel-loading, .no-data { color: var(--gs-text-3) !important; }
/* ── SEO footer ────────────────────────────────────────────────────────── */
.seo-footer {
background: linear-gradient(180deg, var(--gs-bg-2), var(--gs-bg)) !important;
border-top: 1px solid var(--gs-line) !important; color: var(--gs-text-2) !important;
}
.seo-footer h1, .seo-footer h3 { color: var(--gs-text) !important; font-family: 'Barlow Condensed','Barlow',sans-serif !important; }
.seo-footer a { color: var(--gs-text-2) !important; }
.seo-footer a:hover { color: var(--gs-acc) !important; }
/* a11y + motion */
a:focus-visible, button:focus-visible, input:focus-visible,
.mode-tab:focus-visible, .match-row:focus-visible {
outline: 2px solid var(--gs-acc) !important; outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}