/* ── Liga.bg main stylesheet ──────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Skip to content ─────────────────────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 8px 16px;
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r-2);
    font-weight: 600;
}
.skip-to-content:focus { left: 16px; top: 16px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 { font-size: clamp(1.625rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 600; }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); font-weight: 600; }

p { color: var(--text-secondary); max-width: 65ch; }

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--brand-primary-hover); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.site {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .container { padding: 0 24px; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-1);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 24px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
}

.site-logo__mark {
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.primary-nav ul {
    list-style: none;
    display: flex;
    gap: 4px;
}

.primary-nav a {
    display: block;
    padding: 6px 12px;
    border-radius: var(--r-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    border: none;
    border-radius: var(--r-full);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-instant);
    white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: var(--sh-1);
}
.btn--primary:hover { background: var(--brand-primary-hover); box-shadow: var(--sh-2); color: #fff; }

.btn--secondary {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.btn--secondary:hover { background: var(--border-subtle); color: var(--text-primary); }

.btn--premium {
    background: var(--premium-accent);
    color: #1a1004;
    box-shadow: var(--sh-2);
}
.btn--premium:hover { opacity: 0.9; color: #1a1004; }

.btn--ghost {
    background: transparent;
    color: var(--brand-primary);
}
.btn--ghost:hover { background: var(--bg-subtle); color: var(--brand-primary); }

.btn--sm { height: 32px; padding: 0 14px; font-size: 0.875rem; }
.btn--lg { height: 48px; padding: 0 28px; font-size: 1rem; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-4);
    box-shadow: var(--sh-1);
    padding: 20px;
}

.card--interactive {
    cursor: pointer;
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.card--interactive:hover {
    box-shadow: var(--sh-3);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
}

/* (Score-card / team-crest styles live in the "Score card (matches Live now)"
 * block further down – kept there to ensure they win the cascade.) */

/* ── Probability bar ─────────────────────────────────────────────────────── */
.prob-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-radius: var(--r-full);
    overflow: hidden;
    height: 8px;
    gap: 2px;
}

.prob-bar__segment {
    border-radius: var(--r-full);
    transition: opacity var(--dur-fast);
}

.prob-bar__segment--home { background: var(--result-win); }
.prob-bar__segment--draw { background: var(--result-draw); }
.prob-bar__segment--away { background: var(--result-loss); }

.prob-bar--locked { filter: blur(4px); pointer-events: none; }

/* ── Live badge ──────────────────────────────────────────────────────────── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--live);
    color: #fff;
    padding: 3px 8px;
    border-radius: var(--r-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.live-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Form dots ───────────────────────────────────────────────────────────── */
.form-dots {
    display: flex;
    gap: 3px;
}

.form-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.form-dot--w { background: var(--result-win); }
.form-dot--d { background: var(--result-draw); }
.form-dot--l { background: var(--result-loss); }

/* ── Tier pill ───────────────────────────────────────────────────────────── */
.tier-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tier-pill--free     { background: var(--bg-subtle); color: var(--text-secondary); }
.tier-pill--starter  { background: #dbe7fe; color: #1d5cc4; }
.tier-pill--pro      { background: var(--brand-primary); color: #fff; }
.tier-pill--elite    { background: var(--premium-accent); color: #1a1004; }

/* ── Paywall overlay ─────────────────────────────────────────────────────── */
.paywall-overlay {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-3);
}

.paywall-overlay__blur {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.paywall-overlay__cta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    text-align: center;
    padding: 24px;
}

[data-theme="dark"] .paywall-overlay__cta {
    background: rgba(10, 14, 26, 0.85);
}

/* ── Standings – each league rendered as a boxed card ───────────────────── */
.simosports-app .standings-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px 20px 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.simosports-app .standings-wrap:last-child {
    margin-bottom: 0;
}

.simosports-app .standings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.simosports-app .standings-league-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.simosports-app .standings-league-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
}

@media (max-width: 600px) {
    .simosports-app .standings-wrap {
        padding: 14px 12px 4px;
        margin-bottom: 14px;
        border-radius: 10px;
    }
    .simosports-app .standings-league-name { font-size: 1rem; }
}

/* ── Standings table ─────────────────────────────────────────────────────── */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

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

.standings-table th {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.standings-table td:first-child,
.standings-table td:nth-child(2),
.standings-table th:first-child,
.standings-table th:nth-child(2) {
    text-align: left;
}

.standings-table tr:hover td { background: var(--bg-subtle); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    padding: 40px 0 24px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
    gap: 12px;
}

.sm-attribution {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ── Dark mode toggle ────────────────────────────────────────────────────── */
.dark-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
}
.dark-toggle:hover { background: var(--bg-subtle); }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.visually-hidden {
    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;
}

.text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Focus styles (WCAG 2.2 AA) ─────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Tab navigation ──────────────────────────────────────────────────────── */
.tab-nav {
    display: flex;
    flex-wrap: wrap;            /* show every tab — wrap to a 2nd row, never scroll */
    gap: 4px;
    padding: 5px;
    background: var(--bg-surface, #f1f3f5);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.tab-nav__btn { text-decoration: none; }

/* Wrapper carries the scroll affordance: gradient fades + chevron buttons +
   a thin scroll-progress bar. Without these the tab nav silently scrolls
   horizontally and users miss tabs hidden past the edges. The progress bar
   is the strongest universal cue ("there is more content") and works the
   same on desktop and touch; the chevrons + fades reinforce it. */
.tab-nav-wrap { position: relative; }

/* Reserve room at the edges so the first/last tab is never hidden under a
   chevron button when the strip is scrollable. */
.tab-nav-wrap--scrollable .tab-nav { padding-inline: 8px; }

.tab-nav-wrap--scrollable::before,
.tab-nav-wrap--scrollable::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}
/* Fades only appear on the side that actually has more content. */
.tab-nav-wrap--has-prev::before,
.tab-nav-wrap--has-next::after { opacity: 1; }
.tab-nav-wrap--scrollable::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-page, #fff) 35%, transparent);
}
.tab-nav-wrap--scrollable::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-page, #fff) 35%, transparent);
}
.tab-nav__scroll {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-subtle); border-radius: 50%;
    background: var(--bg-page, #fff);
    color: var(--brand-primary); font-size: 20px; font-weight: 700; line-height: 1;
    cursor: pointer; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tab-nav__scroll--prev { left: 2px; }
.tab-nav__scroll--next { right: 2px; }
.tab-nav__scroll[hidden] { display: none; }
.tab-nav__scroll:hover {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}
.tab-nav__scroll:active { transform: translateY(-50%) scale(0.96); }

/* Thin scroll-progress indicator sitting on the bottom border of the strip.
   The track spans the full width; the thumb width = visible/total ratio and
   slides as the user scrolls — an unmistakable "more tabs this way" signal. */
.tab-nav-scrollbar {
    position: relative;
    height: 3px;
    margin-top: -2px;          /* overlap the 2px bottom border of .tab-nav */
    border-radius: 999px;
    background: var(--border-subtle);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tab-nav-wrap--scrollable .tab-nav-scrollbar { opacity: 1; }
.tab-nav-scrollbar__thumb {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: var(--sm-thumb-w, 40%);
    transform: translateX(var(--sm-thumb-x, 0));
    background: var(--brand-primary);
    border-radius: 999px;
}

/* One-time hint nudge on first view: the strip eases right then back so the
   motion reveals that there is content off-screen. Suppressed if the user
   prefers reduced motion. */
@keyframes sm-tab-nudge {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-22px); }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}
.tab-nav-wrap--hint .tab-nav { animation: sm-tab-nudge 0.9s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
    .tab-nav-wrap--hint .tab-nav { animation: none; }
    .tab-nav__scroll { transition: none; }
}

/* Quick-jump chip strip directly under the hero. Surfaces the SEO sub-pages
   (predictions, h2h, lineups, …) so users on tall heroes see what's deeper
   on the page without having to scroll first. */
.fx-jump { margin: 16px auto 0; padding: 0 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-jump__label { font-size: 12px; font-weight: 600; color: var(--text-tertiary, #5e6678); text-transform: uppercase; letter-spacing: 0.06em; }
.fx-jump__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-jump__chip {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-page, #fff);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.fx-jump__chip:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); transform: translateY(-1px); }

/* Segmented-control buttons: each tab takes an equal share of the row
   (flex:1 1 0) so spacing is even, sits on its own rounded chip, and the
   active one is a filled brand pill — making it obvious the strip is a set of
   navigable items. min-width keeps long labels (e.g. "Форма и преки срещи")
   from clipping; tabs that don't fit wrap to the next row. */
.tab-nav__btn {
    flex: 1 1 0;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tab-nav__btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}
.tab-nav__btn--active,
.tab-nav__btn--active:hover {
    color: #fff;
    background: var(--brand-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* Icon inherits the button colour and tracks its state via currentColor.
   Slightly muted when inactive so the label stays the focal point. */
.tab-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.tab-nav__icon svg { display: block; }
.tab-nav__btn:hover .tab-nav__icon,
.tab-nav__btn--active .tab-nav__icon { opacity: 1; }

.tab-panel { padding: var(--sp-6) 0; }
.tab-panel[hidden] { display: none; }
.fx-panel-title {
    margin: 0 0 var(--sp-5);
    color: var(--text-primary);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* ── Fixture hero ────────────────────────────────────────────────────────── */
.fixture-hero {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-10) 0 var(--sp-8);
    text-align: center;
}
.fixture-hero__title {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    margin-bottom: var(--sp-6);
}
.fixture-hero__scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.fixture-hero__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    min-width: 100px;
}
.fixture-hero__team-name {
    font-size: var(--fs-base);
    font-weight: 600;
    text-align: center;
}
.fixture-hero__score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}
.fixture-hero__score {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}
.fixture-hero__status {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-secondary);
}
.fixture-hero__time {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* (.team-crest size modifiers live after the base rule below – moved so size
 * variants beat the 56px base width.) */

/* ── League crest ────────────────────────────────────────────────────────── */
.league-crest {
    width: 80px;
    height: 80px;
    border-radius: var(--r-2);
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

/* ── Timeline (match events) ─────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: var(--sp-3); }
.timeline__event {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-2);
    background: var(--bg-surface);
}
.timeline__min {
    min-width: 36px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.timeline__icon { font-size: 1.1rem; }
.timeline__player { font-size: 0.9375rem; }

/* ── Stat grid ───────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4);
    background: var(--bg-muted);
    border-radius: var(--r-2);
    text-align: center;
}
.stat-cell__val {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--brand-primary);
    line-height: 1;
}
.stat-cell__lbl {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--sp-1);
}

/* ── Info list (dl) ──────────────────────────────────────────────────────── */
.info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-4);
    align-items: baseline;
}
.info-list dt {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 600;
}
.info-list dd {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-3);
    padding: var(--sp-5);
}
.section-card h2 {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Predictions card ────────────────────────────────────────────────────── */
.predictions-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.predictions-card__title { font-size: var(--fs-base); font-weight: 600; }
.prob-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── Mini score card ─────────────────────────────────────────────────────── */
.score-card--mini {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-2);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--sp-2);
}
.score-card--mini .score-card__league {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--sp-1);
}
.score-card--mini .score-card__teams {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ── Team / league hero ──────────────────────────────────────────────────── */
.team-hero, .league-hero {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-10) 0 var(--sp-6);
}
.team-hero__identity, .league-hero__identity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    text-align: center;
}
.team-hero__name, .league-hero__name { margin: 0; }
.team-hero__meta, .league-hero__meta {
    font-size: 0.9375rem;
    margin-top: var(--sp-1);
}
.team-layout { gap: var(--sp-6); }

/* ── GDPR / account privacy page ────────────────────────────────────────── */
.section-card--danger {
    border-color: #fca5a5;
    background: #fff;
}
[data-theme="dark"] .section-card--danger {
    border-color: #7f1d1d;
    background: #1c0a0a;
}
.section-card--danger h2 { color: #b91c1c; }

.btn--danger {
    background: #dc2626;
    color: #fff;
    border: 2px solid transparent;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-2);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn--danger:hover { background: #b91c1c; }
.btn--danger:disabled { background: #fca5a5; cursor: not-allowed; }

/* ── Native dialog ───────────────────────────────────────────────────────── */
.sm-dialog {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-3);
    padding: var(--sp-6);
    max-width: 460px;
    width: 90%;
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.25));
}
.sm-dialog::backdrop {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}
.sm-dialog__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-3);
}
.sm-dialog__body {
    font-size: 0.9375rem;
    margin-bottom: var(--sp-4);
    color: var(--text-secondary);
}
.sm-dialog__input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2);
    font-size: 1rem;
    font-family: var(--font-mono);
    background: var(--bg-base);
    color: var(--text-primary);
    margin-bottom: var(--sp-5);
    letter-spacing: 0.1em;
}
.sm-dialog__input:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-color: transparent;
}
.sm-dialog__actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
}

/* ── Form feedback ───────────────────────────────────────────────────────── */
.sm-form-feedback {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-2);
    font-size: 0.9375rem;
}
.sm-form-feedback--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.sm-form-feedback--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
[data-theme="dark"] .sm-form-feedback--success { background: #064e3b; color: #a7f3d0; border-color: #059669; }
[data-theme="dark"] .sm-form-feedback--error   { background: #450a0a; color: #fca5a5; border-color: #dc2626; }

/* ── Site header (overrides) ─────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
    display: flex; align-items: center; gap: 20px;
    height: 64px; padding-inline: 24px;
    /* 9 nav items + logo + search + toggle + CTA naturally measure ~1400px;
       the previous 1280 cap let the rightmost CTA overflow past the viewport. */
    max-width: 1440px; margin: 0 auto;
    /* min-width: 0 lets the children shrink past their content size when the
       container becomes the constraint (otherwise the flex row keeps pushing
       the CTA past the right edge). */
    min-width: 0;
}
/* Lock the wordmark and the actions strip — only the nav should give up
   space when the header is tight. Without this, `flex: 1` on the nav still
   measures contributions from siblings and pushes the CTA off-screen. */
.site-wordmark        { flex-shrink: 0; }
.site-header__actions { flex-shrink: 0; }
/* The nav itself is allowed to shrink past its intrinsic width (which is what
   was forcing the overflow at 1280-1440px viewports). */
.site-nav             { min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.site-wordmark {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
    color: var(--text-primary); text-decoration: none; font-size: 20px;
}
.site-wordmark__mark { display: inline-flex; }
.site-wordmark__text { color: #0b1525; }
.site-wordmark__text-accent { color: #1F5BD8; }
[data-theme="dark"] .site-wordmark__text { color: #ffffff; }
[data-theme="dark"] .site-wordmark__text-accent { color: #4d8bff; }
.site-nav { display: flex; gap: 2px; margin-left: 8px; flex: 1; }
.site-nav__link {
    padding: 8px 14px; border-radius: var(--r-2);
    font-size: 13.5px; font-weight: 600;
    color: var(--text-secondary); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.site-nav__link:hover { color: var(--text-primary); background: var(--bg-subtle); }
.site-nav__link.is-active { color: var(--text-primary); background: var(--bg-subtle); }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.search-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 12px; height: 32px;
    background: var(--bg-subtle); border: 0;
    border-radius: var(--r-2); cursor: pointer;
    color: var(--text-tertiary); font-size: 13px;
    font-family: var(--font-body);
}
.search-trigger:hover { background: var(--border-subtle); color: var(--text-secondary); }
.search-trigger__hint { font-size: 13px; }
.search-trigger kbd {
    margin-left: 8px; padding: 2px 6px; border: 1px solid var(--border-strong);
    border-radius: 4px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-elevated);
    color: var(--text-tertiary);
}
/* Collapse the search trigger to icon-only well before the burger kicks in,
   so the desktop nav has room and the "Start free" CTA stays inside the
   inner. Hint + kbd take ~150px combined — losing them buys back most of
   what was overflowing on 1280-1440 viewports. */
@media (max-width: 1399px) {
    .search-trigger__hint, .search-trigger kbd { display: none; }
    .search-trigger { padding: 0 10px; }
}
@media (max-width: 1099px) {
    .site-nav { display: none !important; }
}

/* ── Pill ────────────────────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--r-full);
    font-size: 12px; font-weight: 600;
    background: var(--bg-subtle); color: var(--text-secondary);
}
.pill--brand {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 48px; }
.hero__inner {
    max-width: 1280px; margin: 0 auto; padding-inline: 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: center;
}
/* Below ~1180 px the right column starts crowding the headline – stack. */
@media (max-width: 1180px) {
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__demo  { max-width: 480px; margin: 0 auto; }
}
.hero__copy { min-width: 0; }
.hero__headline {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(40px, 6vw, 64px); line-height: 1.02;
    letter-spacing: -0.04em; margin: 16px 0 12px; color: var(--text-primary);
}
.hero__headline-accent {
    background: linear-gradient(110deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero__sub {
    font-size: 18px; line-height: 1.5; color: var(--text-secondary);
    margin: 0 0 24px; max-width: 480px;
}
.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__stats {
    display: flex; gap: 32px; margin-top: 32px;
    padding-top: 24px; border-top: 1px solid var(--border-subtle);
}
.hero__stat-num {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--text-primary);
}
.hero__stat-lbl {
    font-size: 11px; font-family: var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); margin-top: 2px;
}
.hero__demo { position: relative; }
.hero__demo-glow {
    position: absolute; top: -20px; right: -20px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(42,111,219,0.18), transparent 70%);
    border-radius: 50%; z-index: 0;
}
@media (max-width: 1000px) {
    .hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .hero__stats { gap: 24px; }
}

/* ── Match card (hero demo) ──────────────────────────────────────────────── */
.match-card {
    position: relative; z-index: 1;
    background: var(--bg-elevated); border-radius: var(--r-4);
    padding: 24px; box-shadow: var(--sh-3);
    border: 1px solid var(--border-subtle);
}
.match-card__top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px;
}
.match-card__league {
    font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.08em;
    color: var(--text-tertiary);
}
.match-card__teams {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px; margin-bottom: 20px;
}
.match-card__team { text-align: center; }
.match-card__team-name {
    font-weight: 700; margin-top: 8px; font-size: 14px; color: var(--text-primary);
}
.match-card__score {
    font-family: var(--font-display); font-size: 56px; font-weight: 700;
    letter-spacing: -0.04em; color: var(--text-primary);
}
.match-card__prob {
    padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.match-card__caption {
    font-size: 10px; font-weight: 700; color: var(--text-tertiary);
    letter-spacing: 0.1em; font-family: var(--font-mono); margin-bottom: 8px;
}
.match-card__stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.match-card__stat-num {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--text-primary);
}
.match-card__stat-lbl {
    font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
}

/* Crest "stand-ins" – circular tinted with team initials */
.team-crest {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
    color: #fff; letter-spacing: 0.04em; box-shadow: var(--sh-1);
}
.team-crest--lg { width: 80px; height: 80px; font-size: 24px; }
.team-crest--xl { width: 112px; height: 112px; font-size: 32px; }
.team-crest--mancity { background: linear-gradient(135deg, #6cabdd, #1d4d99); }
.team-crest--arsenal { background: linear-gradient(135deg, #ef0107, #9c0001); }
.team-crest--liverpool { background: linear-gradient(135deg, #c8102e, #7a0a1c); }
.team-crest--brighton { background: linear-gradient(135deg, #0057b8, #003570); }
.team-crest--realmadrid { background: linear-gradient(135deg, #00529f, #002d5a); }
.team-crest--sevilla { background: linear-gradient(135deg, #d2143b, #8c0d27); }
.team-crest--bayern { background: linear-gradient(135deg, #dc052d, #8a0319); }
.team-crest--dortmund { background: linear-gradient(135deg, #fde100, #c4a900); color: #1a1a1a; }

/* ── Prob bar (override segment widths via inline style) ─────────────────── */
.prob-bar {
    display: flex; height: 28px; border-radius: var(--r-1);
    overflow: hidden; gap: 2px;
}
.prob-bar__segment {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700; font-family: var(--font-mono);
    min-width: 0; transition: width var(--dur-base) var(--ease-emphasized);
}

/* ── Live badge ──────────────────────────────────────────────────────────── */
.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-1);
    background: var(--live); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    font-family: var(--font-mono);
}
.live-badge__dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% {opacity:1} 50% {opacity:0.35} }

/* ── Live ticker section ─────────────────────────────────────────────────── */
.ticker {
    padding: 32px 0; background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.ticker .container { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.ticker__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
}
.ticker__title {
    font-family: var(--font-display); font-size: 18px; font-weight: 600;
    margin: 0; letter-spacing: -0.01em; color: var(--text-primary);
}
.ticker__more {
    font-size: 13px; color: var(--brand-primary);
    font-weight: 600; text-decoration: none;
}
.ticker__more:hover { text-decoration: underline; }
.ticker__grid {
    /* Max 2 cards per row on desktop so team names + scores stay readable.
       Was repeat(3, 1fr) which made each card too narrow on a wide viewport. */
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    min-height: 110px;
}
.ticker__placeholder {
    grid-column: 1 / -1; padding: 32px;
    text-align: center; color: var(--text-tertiary);
    background: var(--bg-base); border-radius: var(--r-3);
    border: 1px dashed var(--border-subtle);
    font-size: 13px;
}
@media (max-width: 800px) {
    .ticker__grid { grid-template-columns: 1fr; }
}

/* ── Features section ────────────────────────────────────────────────────── */
.features {
    padding: 64px 24px; max-width: 1280px;
    margin: 0 auto;
}
.features__head { max-width: 720px; margin-bottom: 40px; }
.features__eyebrow {
    font-size: 11px; font-family: var(--font-mono);
    letter-spacing: 0.1em; color: var(--text-tertiary);
    text-transform: uppercase; margin-bottom: 8px;
}
.features__title {
    font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
    font-weight: 700; letter-spacing: -0.03em; margin: 0; line-height: 1.1;
    color: var(--text-primary);
}
.features__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.feature-card {
    padding: 24px; border-radius: var(--r-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.feature-card__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px; color: #fff;
}
.feature-card__icon--blue   { background: var(--brand-primary); }
.feature-card__icon--green  { background: var(--prob-high); }
.feature-card__icon--yellow { background: var(--brand-tertiary); color: #1a1004; }
.feature-card__icon--red    { background: #ef4444; }
.feature-card__icon--violet { background: #8b5cf6; }
.feature-card__icon--orange { background: #f97316; }
.feature-card__icon--teal   { background: #14b8a6; }
.feature-card__icon--pink   { background: #ec4899; }
.feature-card__title {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    margin: 0 0 6px; letter-spacing: -0.01em; color: var(--text-primary);
}
.feature-card__body {
    font-size: 14px; color: var(--text-secondary);
    margin: 0; line-height: 1.5; max-width: none;
}
@media (max-width: 800px) {
    .features__grid { grid-template-columns: 1fr; }
}

/* ── Fixtures-today section ──────────────────────────────────────────────── */
.fixtures-today { padding: 0 24px 64px; max-width: 1280px; margin: 0 auto; }
.fixtures-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-3); padding: 24px;
    min-height: 120px;
}
.fixtures-block__loading {
    text-align: center; color: var(--text-tertiary); padding: 32px;
    font-size: 13px;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

/* Pricing hero now uses the shared .page-hero block (see page-pricing.html);
   no bespoke .pricing-hero rules needed. The .pricing-table below breaks out
   of the constrained page layout so the 4-column card grid has room. */

.pricing-table {
    padding: 64px 24px 80px;
    background: var(--bg-elevated, #fff);
    border-top: 1px solid var(--border-subtle, #e4e7ec);
    /* Block themes constrain children of <main is-layout-constrained> to the
       narrow content width – escape that so the cards have full width. */
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}
.pricing-table .container { max-width: 1240px; margin: 0 auto; }
.pricing-table .section-title {
    font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
    text-align: center; margin: 0 0 8px; letter-spacing: -0.03em;
}
.pricing-annual-note {
    text-align: center;
    margin: 0 0 36px;
    font-size: 14px;
    color: var(--text-secondary, #667085);
}
.pricing-annual-note strong { color: var(--text-primary, #1a202c); }

.pricing-table__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    align-items: stretch;
}

/* Card */
.pricing-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 28px 24px;
    border-radius: 18px;
    background: var(--bg-base, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    transition: transform 0.2s var(--ease-standard, ease), box-shadow 0.2s var(--ease-standard, ease);
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);
}

.pricing-card--popular {
    border: 2px solid var(--brand-primary, #3b82f6);
    background:
        linear-gradient(180deg, rgba(59,130,246,0.04), transparent 35%),
        var(--bg-base, #fff);
    transform: translateY(-8px);
    box-shadow: 0 22px 56px rgba(59,130,246,0.18), 0 6px 16px rgba(59,130,246,0.10);
}
.pricing-card--popular:hover {
    transform: translateY(-12px);
    box-shadow: 0 26px 64px rgba(59,130,246,0.22), 0 8px 20px rgba(59,130,246,0.12);
}

.pricing-card__badge {
    position: absolute; top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--brand-primary, #3b82f6);
    color: #fff;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.10em; text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
    white-space: nowrap;
}

.pricing-card__header { margin-bottom: 18px; }
.pricing-card__header .tier-pill { display: inline-block; }
.pricing-card__price {
    display: flex; align-items: baseline; gap: 4px;
    margin: 14px 0 6px;
}
.pricing-card__amount {
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-primary, #1a202c);
    line-height: 1;
}
.pricing-card__period {
    font-size: 14px; font-weight: 600;
    color: var(--text-tertiary, #5e6678);
}
.pricing-card__tagline {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary, #667085);
    line-height: 1.45;
}

/* Features list – flex layout so the inline SVG sits cleanly to the left of
   the text. (We removed the old ::before so the checkmark doesn't double up.) */
.pricing-card__features {
    list-style: none; padding: 0; margin: 18px 0 0;
    display: flex; flex-direction: column; gap: 10px;
    flex-grow: 1;
}
.pricing-card__features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.45;
    color: var(--text-secondary, #667085);
}
.pricing-feat-icon {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 2px;
    color: var(--brand-secondary, #00d68f);
}
.pricing-card--popular .pricing-feat-icon { color: var(--brand-primary, #3b82f6); }

.pricing-card .btn {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    height: 48px;
    align-items: center;
}

/* Footer guarantee row */
.pricing-guarantee {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 40px 0 0;
    padding: 12px 18px;
    color: var(--text-secondary, #667085);
    font-size: 13px;
}
.pricing-guarantee svg {
    color: var(--brand-secondary, #00d68f);
}

/* ── Pricing FAQ ─────────────────────────────────────────────────────────── */
.pricing-faq { max-width: 760px; margin: 56px auto 8px; }
.pricing-faq .section-title { text-align: center; margin-bottom: 20px; }
.pricing-faq__list { display: flex; flex-direction: column; gap: 10px; }
.pricing-faq__item {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 12px;
    padding: 2px 18px;
}
.pricing-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 16px 28px 16px 0;
    position: relative;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #1a202c);
}
.pricing-faq__q::-webkit-details-marker { display: none; }
.pricing-faq__q::after {
    content: "+";
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 400; line-height: 1;
    color: var(--brand-primary, #3b82f6);
    transition: transform 0.15s ease;
}
.pricing-faq__item[open] .pricing-faq__q::after { content: "−"; }
.pricing-faq__a {
    padding: 0 0 18px;
    color: var(--text-secondary, #667085);
    font-size: 14px; line-height: 1.6;
}
.pricing-faq__a p { margin: 0; }

/* Premium tint on the Elite card (last) – subtle warm gradient frame */
.pricing-table__grid .pricing-card[data-tier="elite"] {
    border-color: rgba(255, 196, 88, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 196, 88, 0.06), transparent 35%),
        var(--bg-base, #fff);
}
.pricing-table__grid .pricing-card[data-tier="elite"] .pricing-feat-icon {
    color: #d39400;
}

/* Stray <p> wrappers introduced by wpautop sometimes orphan a closing </p>
   right after the tier pill. Hide them so the layout stays clean. */
.pricing-card > p:empty,
.pricing-card__header + p:empty { display: none; }

@media (max-width: 1100px) {
    .pricing-table__grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-card--popular { transform: none; }
    .pricing-card--popular:hover { transform: translateY(-4px); }
}
@media (max-width: 600px) {
    .pricing-table { padding: 40px 16px 56px; }
    .pricing-table__grid { grid-template-columns: 1fr; gap: 16px; }
    .pricing-card { padding: 24px 20px; }
    .pricing-card__amount { font-size: 36px; }
}

/* ── Hide WP-injected default WooCommerce header bits ────────────────────── */
.wp-block-woocommerce-customer-account { display: none !important; }
.wp-block-navigation .wp-block-pages-list { display: none !important; }


/* ── Fixture detail hero – themed to match the /live/ page-hero ─────────── */
.fx-hero {
    /* Same dark navy → emerald gradient + green halo as .page-hero */
    background: linear-gradient(135deg, #1a0a2e 0%, #0d1d40 50%, #0a2e1a 100%);
    color: #fff;
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Escape any constrained parent so the gradient runs edge-to-edge. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.fx-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 214, 143, 0.15) 0%, transparent 70%);
}
.fx-hero__inner {
    max-width: 960px; margin: 0 auto; padding-inline: 24px;
    position: relative; z-index: 1;
}

/* League/date eyebrow row – compact pill-style row above the title */
.fx-hero__league {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px; margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    flex-direction: row;
}
.fx-hero__league-name {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary, #4d8bff);
    font-family: var(--font-body, inherit);
}
/* The league chip links to the competition hub on every match page.
   gap:inherit takes .fx-hero__league's own computed gap at whatever
   breakpoint is in force, so crest-to-name spacing is identical to the
   pre-link layout at every width and cannot drift from the chip's own media
   query. The kick-off date deliberately stays OUTSIDE the anchor. */
.fx-hero__league-link {
    display: inline-flex; align-items: center;
    gap: inherit; min-width: 0;
    color: inherit; text-decoration: none;
    border-radius: 999px;
}
.fx-hero__league-link .fx-hero__league-logo { flex-shrink: 0; }
.fx-hero__league-link:hover .fx-hero__league-name,
.fx-hero__league-link:focus-visible .fx-hero__league-name { text-decoration: underline; }
.fx-hero__league-link:focus-visible { outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: 2px; }
.fx-hero__date {
    font-size: 12px; color: rgba(255, 255, 255, 0.7);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 10px;
}
.fx-hero__league-logo {
    background: #fff; border-radius: 50%; padding: 1px;
    width: 18px !important; height: 18px !important;
}

/* Title (Home vs Away) – same stylistic family as .page-hero__title */
.fx-hero__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 900; letter-spacing: -0.03em; line-height: 1;
    margin: 0 0 28px; color: #fff;
}
.fx-hero__title-vs {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    margin: 0 .35em;
}

/* The score board: large crests + score + crest, all on the dark theme */
.fx-hero__board {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: start; gap: 32px;
    max-width: 720px; margin: 0 auto;
}
.fx-hero__team {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center; min-width: 0;
}
.fx-hero__team-link {
    display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; min-width: 0; color: #fff; text-decoration: none;
    transition: transform 0.15s, opacity 0.15s;
}
.fx-hero__team-link:hover { transform: translateY(-2px); opacity: 0.92; }
.fx-hero__team-link:hover .fx-hero__team-name { color: var(--brand-primary, #4d8bff); }
.fx-hero__team-link:focus-visible {
    outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: 4px;
    border-radius: 8px;
}
.fx-hero__team-name {
    margin: 0; font-family: var(--font-display, inherit);
    font-size: clamp(15px, 2.4vw, 22px);
    font-weight: 700; letter-spacing: -0.02em;
    color: #fff; line-height: 1.2;
    min-height: 2.4em; max-width: 100%; overflow-wrap: anywhere;
    transition: color 0.15s;
}

/* Big team crests sit on a circular white plate so logos pop on dark bg */
.fx-hero__team .team-crest--lg,
.fx-hero__team .score-card__crest--img {
    width: 104px !important; height: 104px !important;
    background: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; padding: 11px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.fx-hero__team .team-crest--lg img,
.fx-hero__team .score-card__crest--img img {
    width: 100% !important; height: 100% !important;
    object-fit: contain;
}

.fx-hero__centre {
    text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center;
    min-width: 0; padding-top: 4px;
}
.fx-hero__score {
    font-family: var(--font-display, inherit);
    font-size: clamp(44px, 8vw, 76px);
    font-weight: 900; letter-spacing: -0.04em; color: #fff; line-height: 1;
    transition: transform 200ms ease-out, color 200ms ease-out;
}
.fx-hero__score--flash { transform: scale(1.08); color: #fde68a; }
.fx-hero__time, .fx-hero__status {
    font-size: 11px; font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.fx-hero__status {
    color: #ff7a7a;
    background: rgba(255, 56, 56, 0.12);
    border-color: rgba(255, 56, 56, 0.25);
    font-weight: 700;
}

.team-crest--lg { width: 96px; height: 96px; font-size: 26px; }
.team-crest--xl { width: 120px; height: 120px; font-size: 32px; }

@media (max-width: 640px) {
    .fx-hero { padding: 44px 0 36px; }
    .fx-hero__inner { padding-inline: 16px; }
    .fx-hero__title { font-size: clamp(22px, 7vw, 34px); margin-bottom: 20px; }
    .fx-hero__board { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
    .fx-hero__team .team-crest--lg,
    .fx-hero__team .score-card__crest--img {
        width: clamp(60px, 18vw, 72px) !important;
        height: clamp(60px, 18vw, 72px) !important;
        padding: 7px;
    }
    .fx-hero__team-name { font-size: 13px; }
    .fx-hero__score { font-size: clamp(36px, 11vw, 52px); }
    .fx-hero__time, .fx-hero__status {
        max-width: 126px; padding: 4px 6px; white-space: normal;
        font-size: 9px; line-height: 1.3; letter-spacing: 0.04em;
    }
    .fx-hero__league { gap: 8px; padding: 5px 12px; margin-bottom: 14px; }
    .fx-hero__date { font-size: 11px; padding-left: 8px; }
}

/* ── Team detail ─────────────────────────────────────────────────────────── */
.team-hero {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--blue-700) 100%);
    color: #fff; padding: 40px 0;
}
.team-hero__inner {
    max-width: 1280px; margin: 0 auto; padding-inline: 24px;
    display: flex; align-items: center; gap: 24px;
}
.team-hero__name {
    margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px);
    font-weight: 700; letter-spacing: -0.03em; color: #fff;
}
.team-hero__meta { font-size: 13px; opacity: 0.85; margin-top: 4px; }

/* ── Team info card (founded, type, league, overview, links) ─────────────── */
.team-info {
    max-width: 1280px; margin: 0 auto; padding: 32px 24px 16px;
    display: grid; gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}
.team-info__facts {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    align-content: start;
}
.team-info__fact {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px; padding: 12px 14px;
}
.team-info__fact-label {
    font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--text-tertiary, #5e6678);
    text-transform: uppercase; margin-bottom: 4px;
}
.team-info__fact-value {
    font-size: 16px; font-weight: 700; color: var(--text-primary, #111827);
    line-height: 1.2;
}
.team-info__about {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 12px; padding: 20px 22px;
}
.team-info__heading {
    font-family: var(--font-display, inherit);
    font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text-primary, #111827); margin: 0 0 10px;
}
.team-info__overview {
    font-size: 15px; line-height: 1.6;
    color: var(--text-secondary, #4b5563); margin: 0 0 16px;
}
.team-info__overview strong { color: var(--text-primary, #111827); font-weight: 600; }
.team-info__links { display: flex; flex-wrap: wrap; gap: 10px; }
.team-info__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--brand-primary, #3b82f6); text-decoration: none;
    padding: 6px 12px; border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--brand-primary, #3b82f6) 30%, transparent);
    background: color-mix(in srgb, var(--brand-primary, #3b82f6) 8%, transparent);
    transition: all .15s;
}
.team-info__link:hover {
    background: var(--brand-primary, #3b82f6); color: #fff;
}

@media (max-width: 720px) {
    .team-info {
        grid-template-columns: 1fr;
        padding: 24px 16px 8px;
    }
}

.team-fixtures, .league-fixtures { padding: 32px 24px; max-width: 1280px; margin: 0 auto; }
.team-fixtures .features__title, .league-fixtures .features__title { margin-bottom: 16px; }

/* ── League detail ───────────────────────────────────────────────────────── */
.league-hero {
    background: var(--bg-elevated); padding: 40px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.league-hero__inner { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.league-hero__name {
    margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
    font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary);
}
.league-hero__country {
    font-size: 14px; color: var(--text-secondary); margin-top: 6px;
}

/* ── Score card (matches "Live now" prototype) ──────────────────────────── */
/* Strip the WP default link styling first – every score-card is an <a>. */
.score-card,
.score-card:hover,
.score-card:focus,
.score-card:visited,
.score-card *,
.score-card *:visited {
    color: inherit;
    text-decoration: none;
}

.fixtures-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.score-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    min-height: 76px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-3);
    color: var(--text-primary);
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.score-card.card--interactive { cursor: pointer; }
.score-card.card--interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
    border-color: var(--border-strong);
}

/* Left rail: league pill (top) + minute badge (bottom) */
.score-card__rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.score-card__league {
    display: inline-block;
    padding: 3px 7px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border-radius: var(--r-1);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.score-card__minute {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--live);
    font-weight: 700;
}
.score-card__minute::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--live);
    animation: livePulse 1.6s ease-in-out infinite;
}
.score-card__time {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

/* Centre: stacked team rows */
.score-card__teams {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.score-card__team {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
}
.score-card__crest {
    width: 22px; height: 22px;
    border-radius: var(--r-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0;
    background: var(--n-300);
    flex-shrink: 0;
}
.score-card__team-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Right: score column (or kick-off time) */
.score-card__scores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    min-width: 28px;
}
.score-card__score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.score-card__score--draw { color: var(--text-secondary); }
.score-card__score--win  { color: var(--text-primary); }
.score-card__score--loss { color: var(--text-tertiary); }
.score-card__kickoff {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Crest tints – auto-generated based on data-crest attribute (limited palette) */
.score-card__crest[data-tint="red"]    { background: #d2143b; }
.score-card__crest[data-tint="blue"]   { background: #1d4d99; }
.score-card__crest[data-tint="green"]  { background: #1a7a3e; }
.score-card__crest[data-tint="yellow"] { background: #fde100; color: #1a1a1a; }
.score-card__crest[data-tint="orange"] { background: #ff7a00; }
.score-card__crest[data-tint="purple"] { background: #6e3aa6; }
.score-card__crest[data-tint="navy"]   { background: #0a2347; }
.score-card__crest[data-tint="lime"]   { background: #00d68f; color: #0a0e1a; }

.fixtures-empty, .fixtures-error {
    padding: 24px; text-align: center;
    color: var(--text-tertiary); font-size: 13px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-3);
}
.fixtures-error { color: var(--result-loss); border-color: var(--result-loss); }

/* Listing page wrapper */
.page-fixtures, .page-livescores, .page-predictions, .page-standings, .page-pricing,
.page-list-wrap {
    max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px;
}
.page-list-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-list-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0;
}
.page-list-eyebrow {
    font-size: 11px; font-family: var(--font-mono);
    letter-spacing: 0.1em; color: var(--text-tertiary);
    text-transform: uppercase; margin-bottom: 4px;
}
.page-list-sub {
    font-size: 14px; color: var(--text-secondary); max-width: 60ch;
}
.page-list-count {
    font-size: 13px; color: var(--text-secondary);
    font-family: var(--font-mono);
    padding: 4px 10px; background: var(--bg-subtle);
    border-radius: var(--r-full);
}

/* Pricing page wrap (the page itself, not just the table) */
.page-pricing { background: transparent; padding-top: 0; }
.page-pricing .pricing-table { margin-top: 0; padding-top: 32px; }

/* ── WordPress wpautop neutralisation in the_content() ───────────────────── */
/* When a block-level shortcode lives directly in post_content, wpautop wraps
   adjacent whitespace in <br/> tags. Hide stray <br/> tags that immediately
   precede or follow our top-level layout sections. */
.entry-content > br,
.wp-block-post-content > br,
.fixtures-list br,
.score-card br { display: none; }


/* Day-grouping heading inside fixtures lists */
.page-list-day {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.page-list-day:first-of-type { margin-top: 8px; }

/* Ticker grid on the homepage uses the same fixtures-list card */
.ticker__grid { gap: 12px; }
.ticker__grid .score-card { background: var(--bg-base); }

/* Make sure `.entry-content > p` empty paragraphs from autop don't add stray
   whitespace between our shortcode-rendered cards. */
.entry-content > p:empty,
.wp-block-post-content > p:empty { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   Desktop layout improvements – spacing, visual hierarchy, polish
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: more breathing room + ambient background treatment ────────────── */
.hero {
    padding: 96px 0 84px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 90% at 85% 45%, rgba(42,111,219,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 35% 50% at 15% 80%, rgba(0,214,143,0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero__inner { position: relative; z-index: 1; }

/* Larger headline on wide viewports */
.hero__headline { font-size: clamp(44px, 5.5vw, 72px); }

/* Sub-text slightly larger */
.hero__sub { font-size: 19px; max-width: 520px; }

/* Stat dividers */
.hero__stats { gap: 0; margin-top: 36px; padding-top: 28px; }
.hero__stat {
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid var(--border-strong);
}
.hero__stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.hero__stat-num { font-size: 26px; }

/* Demo glow: wider, softer blue-green blend */
.hero__demo-glow {
    width: 440px; height: 440px;
    top: -60px; right: -60px;
    background: radial-gradient(
        circle at center,
        rgba(42,111,219,0.18) 0%,
        rgba(0,214,143,0.08) 38%,
        transparent 65%
    );
}

/* Match card: deeper shadow + subtle perspective lift on desktop */
@media (min-width: 1000px) {
    .match-card {
        box-shadow: 0 24px 64px rgba(10,14,26,0.13), 0 4px 12px rgba(10,14,26,0.06);
        transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg);
        transition: transform 0.4s var(--ease-standard), box-shadow 0.4s var(--ease-standard);
    }
    .match-card:hover {
        transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
        box-shadow: 0 32px 80px rgba(10,14,26,0.16), 0 6px 16px rgba(10,14,26,0.08);
    }
    .match-card__score { font-size: 62px; }
}

/* ── Live ticker ──────────────────────────────────────────────────────────── */
.ticker { padding: 40px 0; }

/* ── Features: generous vertical padding ─────────────────────────────────── */
.features { padding: 92px 24px; }
.features__head { margin-bottom: 52px; }
.features__title { font-size: clamp(28px, 3.5vw, 44px); }

.feature-card { padding: 28px; }
.feature-card__icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.feature-card__title { font-size: 19px; margin-bottom: 8px; }
.feature-card__body { font-size: 15px; line-height: 1.55; }

/* ── Fixtures today section ───────────────────────────────────────────────── */
.fixtures-today { padding-bottom: 92px; }

/* (Pricing override block removed – all pricing styles now live in the
   consolidated Pricing section earlier in this file.) */

/* ── Footer: 4-column grid + populated nav columns ───────────────────────── */
.site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.site-footer__brand .site-wordmark {
    margin-bottom: 12px;
    display: inline-flex;
}

.site-footer__tagline {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    line-height: 1.55;
    max-width: 200px;
    margin: 8px 0 0;
    max-width: none;  /* inherit p's constraint */
}

.site-footer__col-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin: 0 0 14px;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav a {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast);
}
.footer-nav a:hover { color: var(--text-primary); }

/* ── Pricing hero (dedicated pricing page) ────────────────────────────────── */
.pricing-hero {
    padding: 72px 24px 0;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.pricing-hero__eyebrow {
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pricing-hero__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.pricing-hero__sub {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Responsive: collapse desktop-only enhancements ──────────────────────── */
@media (max-width: 1000px) {
    .hero { padding: 64px 0 56px; }
    .hero::before { display: none; }
    .match-card { transform: none !important; box-shadow: var(--sh-3) !important; }
    .features { padding: 64px 24px; }
    .pricing-table { padding: 64px 24px; }
    .pricing-card--popular { transform: none; box-shadow: var(--sh-3); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .hero { padding: 48px 0 40px; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .pricing-table__grid { gap: 12px; }
}

/* ── Image-based crests ──────────────────────────────────────────────────── */
.score-card__crest--img {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
}
.score-card__crest--img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.team-crest--lg.score-card__crest--img img,
.team-crest--xl.score-card__crest--img img { object-fit: contain; }

/* League logo in fixture hero */
.fx-hero__league-logo {
    width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 6px;
}

/* League detail hero – logo + title side by side */
.league-hero__inner {
    display: flex; align-items: center; gap: 20px;
}
.league-hero__logo {
    width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
}

/* Standings table team cell */
.standings-team {
    display: inline-flex; align-items: center; gap: 8px;
}
.standings-crest {
    width: 20px; height: 20px; object-fit: contain; flex-shrink: 0;
}
.standings-crest--init {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 3px;
    font-size: 9px; font-weight: 700; color: #fff;
    background: var(--n-300);
}

/* ── World Cup 2026 ──────────────────────────────────────────────────────── */
.wc-hero {
    background: linear-gradient(135deg, #1a0a2e 0%, #0d1d40 50%, #0a2e1a 100%);
    color: #fff; padding: 80px 0 64px; text-align: center; position: relative; overflow: hidden;
}
.wc-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,214,143,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.wc-hero__inner { max-width: 800px; margin: 0 auto; padding-inline: 24px; position: relative; }
.wc-hero__flag-strip { font-size: 32px; margin-bottom: 16px; display: flex; justify-content: center; gap: 12px; }
.wc-hero__eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brand-primary); margin: 0 0 8px;
}
.wc-hero__title {
    font-family: var(--font-display); font-size: clamp(44px, 8vw, 88px);
    font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; margin: 0 0 4px; color: #fff;
}
.wc-hero__year {
    display: block;
    background: linear-gradient(110deg, var(--brand-primary) 0%, #00aaff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.wc-hero__meta { font-size: 13px; color: rgba(255,255,255,0.55); margin: 12px 0 8px; letter-spacing: 0.04em; }
.wc-hero__sub { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto; line-height: 1.55; }

/* Hub tabs */
.wc-hub { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.wc-hub__tabs { margin-bottom: 24px; gap: 8px; padding-bottom: 0; }
.wc-hub__tabs .tab-nav__btn { padding: 10px 18px; font-weight: 600; }
.wc-hub__panel { min-height: 200px; }

/* Groups laid out in a responsive grid (was a single column) */
.wc-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}
@media (max-width: 700px) {
  .wc-groups-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Group tables grid */
.wc-group { margin-bottom: 0; }
.wc-group__name {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    letter-spacing: -0.02em; margin: 0 0 10px; color: var(--text-primary);
}

/* Stage headers in schedule */
.wc-stage__name {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--text-primary);
}
.wc-stage__name:first-child { margin-top: 0; }

/* Top scorers */
.wc-scorers__table td.wc-scorer__player,
.wc-scorers__table td.wc-scorer__team { min-width: 120px; }

/* Empty / loading states */
.wc-loading { padding: 40px; text-align: center; color: var(--text-tertiary); font-size: 14px; }
.wc-empty   { padding: 40px; text-align: center; color: var(--text-tertiary); font-size: 14px; }

@media (max-width: 860px) {
    .wc-hero { padding: 56px 0 48px; }
    .wc-hub  { padding: 24px 16px 48px; }
}

/* ── Generic page hero (listing/landing pages) ───────────────────────────── */
/* Matches the World Cup 2026 hero treatment: dark gradient bg, centered,    */
/* big display title with gradient-accent span, sub-headline, stat pills.    */

.page-hero {
    background: linear-gradient(135deg, #1a0a2e 0%, #0d1d40 50%, #0a2e1a 100%);
    color: #fff; padding: 80px 0 64px; text-align: center;
    position: relative; overflow: hidden;
    /* Escape any constrained parent (WP block layout / .container)             */
    /* so the gradient runs edge-to-edge of the viewport, like the WC hero.    */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.page-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 214, 143, 0.15) 0%, transparent 70%);
}
.page-hero__inner {
    max-width: 820px; margin: 0 auto; padding-inline: 24px;
    position: relative; z-index: 1;
}
.page-hero__eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brand-primary, #3b82f6);
    background: transparent;
    padding: 0; margin: 0 0 12px; border-radius: 0;
}
.page-hero__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(40px, 7vw, 76px);
    font-weight: 900; letter-spacing: -0.04em; line-height: 0.95;
    margin: 0 0 16px; color: #fff;
    max-width: none;
}
.page-hero__title-accent {
    display: inline-block;
    background: linear-gradient(110deg, var(--brand-primary, #3b82f6) 0%, #00aaff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.page-hero__sub {
    font-size: 17px; line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto 24px; max-width: 560px;
}
.page-hero__stats {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    padding: 0; margin: 24px 0 0;
    border-top: none;
}
.page-hero__stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1;
}
/* Rotating pill colours – first three match WC hero pill treatment */
.page-hero__stat:nth-child(3n+1) { background: #dbe7fe; color: #1d5cc4; }
.page-hero__stat:nth-child(3n+2) { background: var(--brand-primary, #3b82f6); color: #fff; }
.page-hero__stat:nth-child(3n+3) { background: #ff7a00; color: #fff; }
.page-hero__stat-num {
    font-weight: 900;
}
.page-hero__stat-lbl {
    font-weight: 700;
}

/* Notice band inside hero (e.g. paywall hint on /predictions/) */
.page-hero__notice {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; margin: 16px auto 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 13px; color: rgba(255, 255, 255, 0.8);
}
.page-hero__notice-link {
    color: var(--brand-primary, #3b82f6);
    text-decoration: none; font-weight: 600;
}
.page-hero__notice-link:hover { text-decoration: underline; }

/* Live dot indicator inside the hero eyebrow */
.page-hero__live-dot {
    display: inline-block; width: 8px; height: 8px;
    background: #ff3838; border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(255, 56, 56, 0.7);
    animation: page-hero-live-pulse 1.6s infinite;
    vertical-align: middle;
}
@keyframes page-hero-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 56, 56, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 56, 56, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 56, 56, 0); }
}

@media (max-width: 640px) {
    .page-hero { padding: 56px 0 48px; }
    .page-hero__sub { font-size: 15px; }
    .page-hero__stat { padding: 5px 11px; font-size: 0.72rem; }
    .page-hero__notice { font-size: 12px; padding: 6px 12px; }
}

/* Team / league detail hero – same gradient family as /live/, with the crest
   floated above the title so the page identity reads at a glance. */
.page-hero--team .page-hero__crest,
.page-hero--league .page-hero__crest {
    display: flex; justify-content: center;
    margin: 0 auto 18px;
}
.page-hero--team .page-hero__crest .team-crest,
.page-hero--league .page-hero__crest .team-crest {
    width: 160px; height: 160px;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
    border-radius: 28px;
    padding: 14px;
}
.page-hero--team .page-hero__crest .team-crest img,
.page-hero--league .page-hero__crest .team-crest img {
    width: 100%; height: 100%; object-fit: contain;
}
/* sm_crest_html() emits `team-crest--xl` WITHOUT the `.team-crest` base class,
   so the 160px rule above never matched — heroes rendered at the 120px
   utility size. Target the emitted class directly so team/league identity
   actually reads big. */
.page-hero--team .page-hero__crest .team-crest--xl,
.page-hero--league .page-hero__crest .team-crest--xl {
    width: 160px; height: 160px;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
    border-radius: 28px;
    padding: 14px;
}
.page-hero--team .page-hero__crest .team-crest--xl img,
.page-hero--league .page-hero__crest .team-crest--xl img {
    width: 100%; height: 100%; object-fit: contain;
}
@media (max-width: 560px) {
    .page-hero--team .page-hero__crest .team-crest--xl,
    .page-hero--league .page-hero__crest .team-crest--xl {
        width: 120px; height: 120px; border-radius: 20px; padding: 10px;
    }
}

/* sm_crest_html() emits `score-card__crest score-card__crest--img team-crest--xl`
 * (no `.team-crest` base class), and the helper hard-codes `width="28" height="28"`
 * on the <img>. The previous rules above didn't catch either, leaving the team
 * detail page rendering a tiny 28-pixel logo inside a giant 160px circle. */
.page-hero--team .page-hero__crest .score-card__crest,
.page-hero--league .page-hero__crest .score-card__crest {
    width: 200px !important;
    height: 200px !important;
    padding: 18px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-hero--team .page-hero__crest .score-card__crest img,
.page-hero--league .page-hero__crest .score-card__crest img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: none;
    max-height: none;
    display: block;
}
@media (max-width: 640px) {
    .page-hero--team .page-hero__crest .score-card__crest,
    .page-hero--league .page-hero__crest .score-card__crest {
        width: 140px !important;
        height: 140px !important;
        padding: 12px;
        border-radius: 24px;
    }
}
.page-hero--team .page-hero__title,
.page-hero--league .page-hero__title {
    font-size: clamp(36px, 6vw, 64px);
}
@media (max-width: 640px) {
    .page-hero--team .page-hero__crest .team-crest,
    .page-hero--league .page-hero__crest .team-crest {
        width: 120px; height: 120px; padding: 10px; border-radius: 22px;
    }
}

/* ── Player listing page ─────────────────────────────────────────────────── */

.players-wrap {
    max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px;
}

.players-controls {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px;
}

.players-search {
    flex: 1; min-width: 200px; padding: 8px 14px; font-size: 14px;
    border: 1px solid var(--border-primary, #e5e7eb); border-radius: 8px;
    background: var(--bg-primary, #fff); color: var(--text-primary, #111827);
    outline: none; font-family: inherit;
}
.players-search:focus {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 3px rgb(59 130 246 / .12);
}

.players-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-btn {
    padding: 6px 14px; font-size: 13px; font-weight: 600;
    border-radius: 6px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--border-primary, #e5e7eb);
    background: transparent; color: var(--text-secondary, #4b5563);
    transition: all .15s;
}
.filter-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
.filter-btn--active {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6); color: #fff;
}

.players-sort,
.players-league {
    padding: 6px 10px; font-size: 13px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-primary, #e5e7eb);
    background: var(--bg-primary, #fff); color: var(--text-primary, #111827);
    font-family: inherit;
}
.players-league { max-width: 220px; }

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    transition: opacity .2s;
}
.players-grid.is-loading { opacity: .45; pointer-events: none; }

.players-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}
.players-load-more {
    min-width: 280px;
    padding: 12px 24px;
}
.players-load-more[hidden] { display: none !important; }
.players-load-more:disabled { opacity: 0.6; cursor: progress; }

.players-empty {
    grid-column: 1 / -1; text-align: center;
    padding: 48px 24px; color: var(--text-tertiary, #5e6678); font-size: 15px;
}

/* ── Player card ─────────────────────────────────────────────────────────── */

.player-card {
    display: flex; gap: 12px; padding: 12px 14px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 12px; transition: box-shadow .15s, border-color .15s;
}
.player-card:hover {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 2px 12px rgb(59 130 246 / .12);
}

.player-card__photo-link { flex-shrink: 0; display: block; line-height: 0; }

.player-card__photo {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block;
}
.player-card__photo--initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    font-size: .875rem; font-weight: 700; color: #fff;
}
.player-card__photo--initials[data-tint="red"]    { background: #ef4444; }
.player-card__photo--initials[data-tint="blue"]   { background: #3b82f6; }
.player-card__photo--initials[data-tint="green"]  { background: #22c55e; }
.player-card__photo--initials[data-tint="yellow"] { background: #eab308; }
.player-card__photo--initials[data-tint="orange"] { background: #f97316; }
.player-card__photo--initials[data-tint="purple"] { background: #a855f7; }
.player-card__photo--initials[data-tint="navy"]   { background: #1e3a5f; }
.player-card__photo--initials[data-tint="lime"]   { background: #84cc16; }

.player-card__info {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}

.player-card__top {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}

.player-card__name {
    font-size: .875rem; font-weight: 600; color: var(--text-primary, #111827);
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.player-card__name:hover { color: var(--accent, #3b82f6); }

.player-card__pos {
    flex-shrink: 0; font-size: .65rem; font-weight: 700; letter-spacing: .04em;
    padding: 1px 5px; border-radius: 4px; color: #fff; text-transform: uppercase;
}
.player-card__pos--gk  { background: #f59e0b; }
.player-card__pos--def { background: #10b981; }
.player-card__pos--mid { background: #3b82f6; }
.player-card__pos--att { background: #ef4444; }
.player-card__pos--unk { background: #6b7280; }

.player-card__meta {
    font-size: .72rem; color: var(--text-tertiary, #5e6678);
}

.player-card__team {
    display: flex; align-items: center; gap: 5px; font-size: .75rem;
    color: var(--text-secondary, #4b5563); text-decoration: none;
}
.player-card__team:hover { color: var(--accent, #3b82f6); }
.player-card__team .score-card__crest {
    width: 16px; height: 16px; font-size: 7px; border-radius: 3px; flex-shrink: 0;
}
.player-card__team .score-card__crest--img img { width: 16px; height: 16px; }

.player-card__stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.pstat {
    font-size: .68rem; color: var(--text-secondary, #4b5563);
    background: var(--bg-subtle, #f3f4f6); border-radius: 4px;
    padding: 1px 6px; white-space: nowrap;
}
.pstat b { font-weight: 700; color: var(--text-primary, #111827); }

.pstat--rating {
    background: rgb(59 130 246 / .1); color: var(--accent, #3b82f6);
}
.pstat--rating b { color: var(--accent, #3b82f6); }

.pstat--rc { background: rgb(239 68 68 / .1); color: #ef4444; }
.pstat--rc b { color: #ef4444; }

@media (max-width: 640px) {
    .players-controls { flex-direction: column; align-items: stretch; }
    .players-search { min-width: 0; }
    .players-grid { grid-template-columns: 1fr; }
}

/* ── Single player profile ───────────────────────────────────────────────── */

.player-hero {
    background: var(--bg-subtle, #f9fafb);
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    padding: 48px 0;
}
.player-hero__inner {
    display: flex; align-items: center; gap: 28px;
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.player-hero__photo {
    width: 160px; height: 160px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    box-shadow: 0 4px 16px rgb(0 0 0 / .08);
}
.player-hero__photo--initials {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 48px; font-weight: 700; color: #fff;
    font-family: var(--font-display, inherit);
}
.player-hero__photo--initials[data-tint="red"]    { background: #ef4444; }
.player-hero__photo--initials[data-tint="blue"]   { background: #3b82f6; }
.player-hero__photo--initials[data-tint="green"]  { background: #22c55e; }
.player-hero__photo--initials[data-tint="yellow"] { background: #eab308; }
.player-hero__photo--initials[data-tint="orange"] { background: #f97316; }
.player-hero__photo--initials[data-tint="purple"] { background: #a855f7; }
.player-hero__photo--initials[data-tint="navy"]   { background: #1e3a5f; }
.player-hero__photo--initials[data-tint="lime"]   { background: #84cc16; }

.player-hero__body { flex: 1; min-width: 0; }

.player-hero__name {
    font-family: var(--font-display, inherit);
    font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 8px; color: var(--text-primary, #111827); line-height: 1.1;
}

.player-hero__meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 14px; color: var(--text-secondary, #4b5563); margin-bottom: 14px;
}

.player-hero__pos {
    background: var(--accent, #3b82f6); color: #fff;
    padding: 2px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.player-hero__jersey {
    font-weight: 700; color: var(--text-primary, #111827);
}

.player-hero__dob { color: var(--text-tertiary, #5e6678); }

.player-hero__team {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary, #4b5563); text-decoration: none;
    font-size: 14px; font-weight: 500;
}
a.player-hero__team:hover { color: var(--accent, #3b82f6); }
.player-hero__team .score-card__crest {
    width: 24px; height: 24px; font-size: 10px;
}
.player-hero__team .score-card__crest--img img { width: 24px; height: 24px; }

.player-stats {
    max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px;
}

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; margin-top: 16px;
}

.player-stat-cell {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 10px; padding: 16px;
    text-align: center;
}

.player-stat-cell__value {
    font-family: var(--font-display, inherit);
    font-size: 28px; font-weight: 700; line-height: 1;
    color: var(--text-primary, #111827); margin-bottom: 4px;
}

.player-stat-cell__label {
    font-size: 12px; color: var(--text-tertiary, #5e6678);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

@media (max-width: 640px) {
    .player-hero { padding: 32px 0; }
    .player-hero__inner { flex-direction: column; text-align: center; gap: 20px; }
    .player-hero__photo { width: 120px; height: 120px; }
    .player-hero__photo--initials { font-size: 36px; }
    .player-hero__name { font-size: 28px; }
    .player-hero__meta { justify-content: center; }
}

/* ── Live page (FlashScore-style) ──────────────────────────────────────── */
.live-page {
  padding: 0 0 48px;
}
.live-page .container {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 24px;
}

.live-page__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 12px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  flex-wrap: wrap;
}

.live-page__tabs {
  display: flex;
  gap: 24px;
}

.live-page__tab {
  display: inline-block;
  padding: 8px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.live-page__tab:hover { color: var(--text-primary, #1a202c); }
.live-page__tab--active {
  color: var(--brand-primary, #4f46e5);
  border-bottom-color: var(--brand-primary, #4f46e5);
}

.live-page__date {
  /* No wrapper box: the futball /live/ template renders an 8-day chip strip
     (matches-pivot) here, which doesn't belong in a pill. Keep this layer
     transparent and let the chips own their own spacing. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.live-page__date-btn,
.live-page__date-label {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.live-page__date-btn { padding: 6px 8px; color: var(--brand-primary, #4f46e5); }
.live-page__date-btn:hover,
.live-page__date-label:hover {
  background: color-mix(in srgb, var(--brand-primary, #4f46e5) 8%, transparent);
}
.live-page__date-label {
  min-width: 120px;
  color: var(--brand-primary, #4f46e5);
}

.live-page__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.live-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #667085);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.live-filter:hover {
  border-color: var(--brand-primary, #00d68f);
  color: var(--text-primary, #1a202c);
}
/* Brand-green active state: theme-independent (works on both light + dark). */
.live-filter--active,
.live-filter--active:hover {
  background: var(--brand-primary, #00d68f);
  color: #fff;
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 2px 8px rgba(0, 214, 143, 0.25);
}
.live-filter--active .live-filter__count { color: #fff; opacity: 1; }
/* Live pill – keep its red-tinted "in play" treatment, but only when NOT active.
   When the user filters TO live, fall back to the standard brand-green active. */
.live-filter--live:not(.live-filter--active) {
  color: #d92d20;
  border-color: #fecdca;
  background: #fef3f2;
}
/* Dark theme: keep the live-pill's red accent but on a dark surface instead of pink. */
[data-theme="dark"] .live-filter--live:not(.live-filter--active) {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, 0.35);
  background: rgba(217, 45, 32, 0.12);
}
[data-theme="dark"] .live-filter:not(.live-filter--active):hover {
  color: #fff;
}
.live-filter__count {
  font-weight: 700;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.live-filter__count:empty { display: none; }

/* ── League group ───────────────────────────────────────────────────────── */
.live-page__list { padding: 4px 0; }

.live-group {
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  margin-bottom: 12px;
  overflow: hidden;
}

.live-group__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-subtle, #f9fafb);
}

.live-group__crest {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
}
.live-group__crest--placeholder {
  background: #e4e7ec;
}

.live-group__title {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.live-group__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-group__country {
  font-size: 12.5px;
  color: var(--text-secondary, #667085);
  font-weight: 500;
}

.live-group__count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.live-group__count-live {
  color: #d92d20;
  font-weight: 700;
}
.live-group__count-sep {
  margin: 0 1px;
  color: var(--text-tertiary, #5e6678);
}

.live-group__toggle {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-secondary, #667085);
  cursor: pointer;
  transition: background 0.15s;
}
.live-group__toggle:hover { background: rgba(0,0,0,0.04); }
.live-group--collapsed .live-group__rows { display: none; }
.live-group--collapsed .live-group__toggle svg { transform: rotate(180deg); }

.live-group__rows {
  display: flex;
  flex-direction: column;
}

/* ── Live row (one match) ──────────────────────────────────────────────── */
.live-row {
  display: grid;
  grid-template-columns: 64px 1fr 56px 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  transition: background 0.12s;
}
.live-row:last-child { border-bottom: none; }
.live-row:hover { background: var(--bg-subtle, #f9fafb); }

.live-row__time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.live-row__time-main {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #667085);
  line-height: 1.2;
}
.live-row__time-sub {
  font-size: 11px;
  color: var(--text-tertiary, #5e6678);
  font-weight: 500;
  line-height: 1.2;
}
.live-row__time-sub--live {
  color: #d92d20;
  font-weight: 700;
}

.live-row__teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.live-row__team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.live-row__crest {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
}
.live-row__crest--init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--text-secondary, #667085);
  border-radius: 3px;
}

.live-row__team-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-row__team--win .live-row__team-name { font-weight: 700; }

.live-row__scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.live-row__score {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  line-height: 1.2;
  min-width: 18px;
  text-align: right;
}
.live-row__score--win  { font-weight: 700; }
.live-row__score--live { color: #d92d20; }

.live-row__star {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-tertiary, #5e6678);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.live-row__star:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary, #667085);
}
.live-row__star--on,
.live-row__star--on:hover {
  color: #f5b800;
}
.live-row__star--on svg {
  fill: #f5b800;
}

/* ── Skeleton + empty ──────────────────────────────────────────────────── */
.live-skeleton {
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  overflow: hidden;
}
.live-skeleton__row {
  height: 56px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
  background-size: 200% 100%;
  animation: live-skel 1.4s linear infinite;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.live-skeleton__row:last-child { border-bottom: none; }
@keyframes live-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.live-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--text-secondary, #667085);
  font-size: 14px;
  text-align: center;
  border: 1px dashed var(--border-subtle, #e4e7ec);
  border-radius: 12px;
}
.live-empty svg { opacity: 0.5; }

@media (max-width: 720px) {
  .live-page .container { padding-inline: 12px; }
  .live-page__topbar { gap: 8px; padding-top: 12px; }
  .live-page__tabs { gap: 16px; }
  .live-page__tab { font-size: 13px; }
  .live-page__date-label { min-width: 96px; padding: 6px 8px; font-size: 13px; }
  .live-page__filters { padding: 12px 0; gap: 6px; }
  .live-filter { padding: 6px 12px; font-size: 12px; }
  .live-row {
    grid-template-columns: 52px 1fr 44px 32px;
    gap: 8px;
    padding: 10px 12px;
  }
  .live-row__team-name { font-size: 13.5px; }
  .live-row__score { font-size: 14px; }
  .live-group__header { padding: 10px 12px; }
  .live-group__name { font-size: 13.5px; }
}

/* ── Legacy live-page-controls (kept for old templates) ─────────────────── */
.live-page-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 8px;
}

.live-page-controls__dates {
  flex: 1 1 auto;
  min-width: 0;
}

.live-page-controls__league {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.live-page-controls__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}

.live-page-controls__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 32px 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background-color: var(--bg-elevated, #fff);
  color: var(--text-primary, #1a202c);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}
.live-page-controls__select:hover,
.live-page-controls__select:focus {
  border-color: var(--brand-primary, #00d68f);
  outline: none;
}

/* ── Date nav (horizontal scroll of day buttons) ────────────────────────── */
.date-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 4px;
}
.date-nav::-webkit-scrollbar { display: none; }

.date-nav__btn {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 16px;
  min-width: 64px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #667085);
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  line-height: 1.2;
}
.date-nav__btn:hover {
  border-color: var(--brand-primary, #00d68f);
  color: var(--brand-primary, #00d68f);
}
.date-nav__btn--active {
  background: var(--brand-primary, #00d68f);
  color: #fff;
  border-color: var(--brand-primary, #00d68f);
}
.date-nav__day {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-top: 1px;
}

/* ── Live page empty state ──────────────────────────────────────────────── */
.live-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-secondary, #667085);
  font-size: 14px;
  text-align: center;
}
.live-empty svg { opacity: 0.6; }

@media (max-width: 600px) {
  .live-page-controls { padding: 16px 0 4px; gap: 12px; }
  .live-page-controls__league { width: 100%; justify-content: space-between; }
  .live-page-controls__select { flex: 1 1 auto; max-width: 240px; }
  .date-nav__btn { padding: 8px 12px; min-width: 56px; font-size: 12.5px; }
}

/* ── Mobile burger button + drawer ──────────────────────────────────────── */
.site-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 4px;     /* sit at the far right next to the actions */
  margin-right: 0;
  order: 99;            /* push to last in flex even if DOM order shifts */
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #1a202c);
  cursor: pointer;
  align-items: center;
  position: relative;
  z-index: 100;         /* sit above any overlapping page chrome */
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
[data-theme="dark"] .site-burger {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #f5f5f7;
}
.site-burger:hover  { border-color: var(--brand-primary, #00d68f); }
.site-burger:active { transform: scale(0.96); }
.site-burger__bar {
  display: block;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-burger[aria-expanded="true"] .site-burger__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-burger[aria-expanded="true"] .site-burger__bar:nth-child(2) {
  opacity: 0;
}
.site-burger[aria-expanded="true"] .site-burger__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.site-drawer[hidden] { display: none; }
.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: auto;
}
.site-drawer--open .site-drawer__backdrop { opacity: 1; }

.site-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--bg-elevated, #fff);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}
.site-drawer--open .site-drawer__panel { transform: translateX(0); }

/* Right-side drawer variant – slides in from the right to match the burger position */
.site-drawer--right .site-drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.site-drawer--right.site-drawer--open .site-drawer__panel { transform: translateX(0); }

.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.site-drawer__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}
.site-drawer__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-primary, #1a202c);
  cursor: pointer;
  border-radius: 8px;
}
.site-drawer__close:hover { background: var(--bg-subtle, #f4f6f8); }

.site-drawer__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  overflow-y: auto;
}
.site-drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--text-primary, #1a202c);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.site-drawer__link:hover { background: var(--bg-subtle, #f4f6f8); }
.site-drawer__link--live { color: var(--brand-primary, #00d68f); font-weight: 600; }

.site-drawer__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle, #e4e7ec);
}
.site-drawer__foot .btn { width: 100%; justify-content: center; }

/* ── Responsive: show burger, hide nav on mobile ────────────────────────── */
/* Use !important so any later .site-nav rule (e.g. shortcodes / display
   overrides) cannot resurrect the desktop nav on mobile. The icon-pill
   desktop nav needs ~1100px of horizontal space, so swap to drawer below. */
@media (max-width: 1099px) {
  .site-burger { display: inline-flex !important; }
  .site-nav { display: none !important; }
  .search-trigger__hint { display: none; }
  .search-trigger kbd { display: none; }
  .search-trigger { padding: 8px 10px; }
  .site-header__actions { gap: 6px; margin-left: auto; }
}

@media (max-width: 600px) {
  /* Tight phone layout: keep just wordmark + burger; hide CTA */
  .site-header__inner { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .site-header__cta   { display: none; }
  .site-wordmark__text { font-size: 16px; }
  .site-header__actions { gap: 4px; }
  .site-burger { width: 42px; height: 42px; }
}


/* ── Leagues popularity table ──────────────────────────────────────────── */
.leagues-table__hint {
  font-size: 13px;
  color: var(--text-secondary, #667085);
  margin: 0 0 16px;
}

.leagues-table-wrap {
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  /* overflow: hidden clipped the numeric columns on narrow screens with no
     scrollbar — users had no idea the Голове/Асистенции columns existed.
     Horizontal scroll (with touch momentum) is the safety net; the mobile
     media query below shrinks the layout so it normally fits outright. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}

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

.leagues-table thead {
  background: var(--bg-subtle, #f9fafb);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}

.leagues-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  letter-spacing: 0.02em;
  padding: 14px 16px;
  white-space: nowrap;
}
.leagues-table th.leagues-table__rank-col   { width: 64px;  text-align: center; }
.leagues-table th.leagues-table__live-col   { width: 110px; text-align: center; }
.leagues-table th.leagues-table__rating-col { width: 90px;  text-align: right;  }

.leagues-table__row {
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  transition: background 0.12s;
}
.leagues-table__row:last-child { border-bottom: none; }
.leagues-table__row:hover { background: var(--bg-subtle, #f9fafb); }

.leagues-table td {
  padding: 12px 16px;
  vertical-align: middle;
}
.leagues-table td.leagues-table__rank-col   { text-align: center; }
.leagues-table td.leagues-table__live-col   { text-align: center; }
.leagues-table td.leagues-table__rating-col {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.leagues-table__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.leagues-table__rank-badge--gold    { background: #f5b800; }
.leagues-table__rank-badge--silver  { background: #98a2b3; }
.leagues-table__rank-badge--bronze  { background: #b95717; }
.leagues-table__rank-badge--default { background: #12b76a; }

.leagues-table__league {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.leagues-table__crest {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 6px;
}
.leagues-table__crest--placeholder {
  background: #e4e7ec;
}

.leagues-table__league-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.leagues-table__league-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leagues-table__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.leagues-table__flag {
  width: 24px;
  height: 17px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.leagues-table__country-name {
  font-size: 13px;
  color: var(--text-secondary, #667085);
}

/* Generic horizontal-scroll shell used around wide tables (WC scorers,
   standings…). It had NO css at all, so wide tables overflowed the page
   body on phones with no hint that columns were cut off. */
.table-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.leagues-table__live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fee4e2;
  color: #d92d20;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 64px;
  border: 1px solid rgba(217, 45, 32, 0.18);
}
.leagues-table__live-badge:hover {
  background: #fecdca;
  border-color: rgba(217, 45, 32, 0.3);
}
.leagues-table__live-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d92d20;
  box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.5);
  animation: leagues-live-pulse 1.6s ease-in-out infinite;
}
@keyframes leagues-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.45); }
  50%      { opacity: 0.6; transform: scale(0.9); box-shadow: 0 0 0 6px rgba(217, 45, 32, 0); }
}
.leagues-table__live-empty {
  display: inline-block;
  color: var(--text-tertiary, #5e6678);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  min-width: 24px;
}
[data-theme="dark"] .leagues-table__live-badge {
  background: rgba(217, 45, 32, 0.18);
  color: #ff8a80;
  border-color: rgba(255, 138, 128, 0.3);
}
[data-theme="dark"] .leagues-table__live-badge:hover {
  background: rgba(217, 45, 32, 0.28);
}

@media (max-width: 720px) {
  .leagues-table th,
  .leagues-table td { padding: 10px 8px; }
  .leagues-table th.leagues-table__rank-col   { width: 48px; }
  .leagues-table th.leagues-table__live-col   { width: 80px; }
  .leagues-table th.leagues-table__rating-col { width: 64px; }
  .leagues-table__rank-badge { width: 26px; height: 26px; font-size: 12px; }
  .leagues-table__crest { width: 24px; height: 24px; }
  .leagues-table__league-name { font-size: 13.5px; }
  .leagues-table__country-name { display: none; }
  .leagues-table__live-badge { padding: 3px 8px; font-size: 11px; }
  .leagues-table td.leagues-table__rating-col { font-size: 13.5px; }
}

/* ── Venues grid (archive-sm_venue) ─────────────────────────────────────── */
.venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px 0 32px;
}
.venue-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.venue-card:hover {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 4px 20px rgba(0, 214, 143, 0.12);
  transform: translateY(-2px);
}
.venue-card__image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg-subtle, #f4f6f8);
  display: block;
}
.venue-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.venue-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary, #1a202c);
}
.venue-card__city {
  font-size: 13px;
  color: var(--text-secondary, #667085);
}
.venue-card__meta {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  margin-top: 4px;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .venues-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .venue-card__image { height: 110px; }
  .venue-card__body { padding: 10px 12px; }
  .venue-card__name { font-size: 14px; }
}

/* ── Drawer right-side variant ──────────────────────────────────────────── */
.site-drawer--right .site-drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.site-drawer--right.site-drawer--open .site-drawer__panel {
  transform: translateX(0);
}


/* ── Competitions panel (league filter on /live/) ─────────────────────── */
.live-comp-panel {
  display: none;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  margin-top: 16px;
  padding: 16px;
}
.live-comp-panel--open { display: block; }

.live-comp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.live-comp-panel__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}
.live-comp-panel__clear {
  background: none;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.live-comp-panel__clear:hover {
  border-color: #d92d20;
  color: #d92d20;
}

.live-comp-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.live-comp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 8px;
  background: var(--bg-elevated, #fff);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.live-comp-item:hover {
  background: var(--bg-subtle, #f9fafb);
}
.live-comp-item--on {
  border-color: var(--brand-primary, #4f46e5);
  background: color-mix(in srgb, var(--brand-primary, #4f46e5) 6%, var(--bg-elevated, #fff));
}

.live-comp-item__cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand-primary, #4f46e5);
}

.live-comp-item__logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
}
.live-comp-item__logo--placeholder { background: #e4e7ec; }

.live-comp-item__name {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-comp-item__count {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-tertiary, #5e6678);
  background: var(--bg-subtle, #f9fafb);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.live-page__tab-count {
  font-weight: 600;
  font-size: 12px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.live-page__tab-count:empty { display: none; }

@media (max-width: 600px) {
  .live-comp-panel { padding: 12px; margin-top: 12px; }
  .live-comp-panel__grid { grid-template-columns: 1fr; max-height: 320px; }
}

/* ── Teams archive: toolbar, search, A–Z jump-bar, blocks ──────────────── */
.teams-toolbar {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: var(--bg-base, #fff);
  padding: 16px 0 12px;
  margin: 8px 0 16px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.teams-toolbar__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.teams-search {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.teams-search:focus-within {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 0 0 3px rgba(0, 214, 143, 0.15);
}
.teams-search__icon {
  flex: 0 0 auto;
  color: var(--text-secondary, #667085);
  margin-right: 10px;
}
.teams-search__input {
  flex: 1 1 auto;
  height: 42px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-primary, #1a202c);
  padding: 0;
  min-width: 0;
}
.teams-search__input:focus { outline: none; }
.teams-search__input::placeholder { color: var(--text-tertiary, #5e6678); }
.teams-search__input::-webkit-search-cancel-button { display: none; }
.teams-search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #667085);
  cursor: pointer;
  margin-left: 6px;
}
.teams-search__clear:hover { background: var(--bg-subtle, #f4f6f8); color: var(--text-primary, #1a202c); }

.teams-search__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.teams-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  font-size: 14px;
}
.teams-suggest__item:hover,
.teams-suggest__item:focus {
  background: var(--bg-subtle, #f4f6f8);
  outline: none;
}
.teams-suggest__crest {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  border-radius: 4px;
  display: inline-block;
}
.teams-suggest__crest--placeholder {
  background: var(--bg-subtle, #f4f6f8);
}
.teams-suggest__name { flex: 1 1 auto; }

.teams-azbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.teams-azbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #667085);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.teams-azbar__btn:hover {
  background: var(--brand-primary, #00d68f);
  border-color: var(--brand-primary, #00d68f);
  color: #fff;
}

.teams-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
}
.teams-block {
  scroll-margin-top: 140px;
}
.teams-block__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  margin-bottom: 14px;
}
.teams-block__letter {
  font-family: var(--font-display, var(--font-body));
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a202c);
  line-height: 1;
}
.teams-block__count {
  font-size: 12px;
  color: var(--text-tertiary, #5e6678);
  font-weight: 600;
}
.teams-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary, #667085);
  font-size: 14px;
}

@media (max-width: 600px) {
  .teams-toolbar { top: 56px; padding: 12px 0 10px; }
  .teams-toolbar__row { gap: 10px; margin-bottom: 10px; }
  .teams-search__input { height: 38px; font-size: 14px; }
  .teams-block__letter { font-size: 22px; }
  .teams-azbar__btn { min-width: 24px; height: 24px; font-size: 11px; }
}

/* ── Teams grid + card (boxed) ─────────────────────────────────────────── */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px 0 8px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 12px 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  text-align: center;
  min-height: 120px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.team-card:hover {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 6px 20px rgba(0, 214, 143, 0.14);
  transform: translateY(-2px);
  color: var(--text-primary, #1a202c);
  text-decoration: none;
}
.team-card:focus-visible {
  outline: 2px solid var(--brand-primary, #00d68f);
  outline-offset: 2px;
}

/* Override generic anchor color inside teams-grid (was inheriting blue link). */
.teams-grid .team-card,
.teams-grid .team-card:visited {
  color: var(--text-primary, #1a202c);
}

.team-card__crest {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle, #f4f6f8);
  border-radius: 50%;
  font-size: 16px !important;
  font-weight: 700;
  overflow: hidden;
}
.team-card__crest img,
.team-card__crest.score-card__crest--img img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  background: transparent;
}

.team-card__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  word-break: break-word;
  letter-spacing: -0.005em;
}

@media (max-width: 600px) {
  .teams-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .team-card {
    padding: 14px 8px 12px;
    min-height: 104px;
  }
  .team-card__crest {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px;
  }
  .team-card__crest img,
  .team-card__crest.score-card__crest--img img {
    width: 34px !important;
    height: 34px !important;
  }
  .team-card__name { font-size: 12px; }
}

/* ── Homepage metrics strip ─────────────────────────────────────────────── */
.hp-metrics { padding: 32px 0; border-top: 1px solid var(--border-subtle, #e4e7ec); border-bottom: 1px solid var(--border-subtle, #e4e7ec); background: var(--bg-subtle, #f9fafb); }
.hp-metrics__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hp-metrics__tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: var(--bg-elevated, #fff); border: 1px solid var(--border-subtle, #e4e7ec); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.hp-metrics__tile:hover { border-color: var(--brand-primary, #4f46e5); transform: translateY(-2px); }
.hp-metrics__num { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text-primary, #1a202c); font-variant-numeric: tabular-nums; }
.hp-metrics__lbl { font-size: 12.5px; color: var(--text-secondary, #667085); font-weight: 600; }
.hp-metrics__tile--live .hp-metrics__num { color: #d92d20; }
@media (max-width: 800px) { .hp-metrics__inner { grid-template-columns: repeat(3, 1fr); } .hp-metrics__num { font-size: 22px; } }
@media (max-width: 480px) { .hp-metrics__inner { grid-template-columns: repeat(2, 1fr); } }

/* ── Homepage today matches ─────────────────────────────────────────────── */
.hp-today { padding: 56px 0; }
.hp-today .section-hdr { margin-bottom: 24px; }
.hp-today__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 800px) { .hp-today__list { grid-template-columns: 1fr; } }

.hp-today__group { border: 1px solid var(--border-subtle, #e4e7ec); border-radius: 12px; background: var(--bg-elevated, #fff); overflow: hidden; }
.hp-today__group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-subtle, #f9fafb); border-bottom: 1px solid var(--border-subtle, #e4e7ec); }
.hp-today__crest { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; border-radius: 4px; }
.hp-today__crest--placeholder { background: #e4e7ec; }
.hp-today__group-name { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary, #1a202c); }
.hp-today__group-count { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #667085); font-variant-numeric: tabular-nums; }

.hp-today__row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle, #e4e7ec); text-decoration: none; color: var(--text-primary, #1a202c); transition: background 0.12s; }
.hp-today__row:last-child { border-bottom: none; }
.hp-today__row:hover { background: var(--bg-subtle, #f9fafb); }
.hp-today__time { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; color: var(--text-secondary, #667085); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hp-today__time-sub { font-size: 11px; color: var(--text-tertiary, #5e6678); font-weight: 600; }
.hp-today__time-sub--live { color: #d92d20; font-weight: 700; }
.hp-today__teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-today__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hp-today__team-crest { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; border-radius: 3px; }
.hp-today__team-crest--ph { background: #e4e7ec; display: inline-block; }
.hp-today__team-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-today__right { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-today__score--live { color: #d92d20; }

/* ── Homepage top leagues grid ──────────────────────────────────────────── */
.hp-top-leagues { padding: 56px 0; background: var(--bg-subtle, #f9fafb); }
.hp-top-leagues__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
@media (max-width: 900px) { .hp-top-leagues__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hp-top-leagues__grid { grid-template-columns: 1fr; } }
.hp-top-leagues__card { display: grid; grid-template-columns: 32px 36px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg-elevated, #fff); border: 1px solid var(--border-subtle, #e4e7ec); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.hp-top-leagues__card:hover { border-color: var(--brand-primary, #4f46e5); transform: translateY(-2px); }
.hp-top-leagues__rank { font-size: 14px; font-weight: 700; color: var(--text-tertiary, #5e6678); font-variant-numeric: tabular-nums; }
.hp-top-leagues__crest { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }
.hp-top-leagues__crest--ph { background: #e4e7ec; display: inline-block; }
.hp-top-leagues__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-top-leagues__name { font-size: 14.5px; font-weight: 700; color: var(--text-primary, #1a202c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-top-leagues__country { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #667085); }
.hp-top-leagues__country img { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); }
.hp-top-leagues__rating { font-size: 16px; font-weight: 800; color: var(--brand-primary, #4f46e5); font-variant-numeric: tabular-nums; }

/* ── Homepage FAQ ──────────────────────────────────────────────────────── */
.hp-faq { padding: 56px 0; }
.hp-faq__list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; margin: 24px auto 0; }
.hp-faq__item { border: 1px solid var(--border-subtle, #e4e7ec); border-radius: 12px; background: var(--bg-elevated, #fff); padding: 0; }
.hp-faq__item[open] { border-color: var(--brand-primary, #4f46e5); }
.hp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary, #1a202c); list-style: none; }
.hp-faq__q::-webkit-details-marker { display: none; }
.hp-faq__chev { font-size: 22px; font-weight: 400; color: var(--text-tertiary, #5e6678); line-height: 1; transition: transform 0.15s; }
.hp-faq__item[open] .hp-faq__chev { transform: rotate(45deg); color: var(--brand-primary, #4f46e5); }
.hp-faq__a { padding: 0 20px 18px; color: var(--text-secondary, #667085); font-size: 14px; line-height: 1.6; }

/* ── Fixture detail: stat bars / lineups / timeline rows ────────────────── */
.fx-stats-wrap {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 8px 0 16px;
}
.fx-stat-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #667085);
}
.fx-stat-header .fx-stat-team       { text-align: left;  font-weight: 700; color: var(--text-primary, #1a202c); font-size: 14px; letter-spacing: 0; text-transform: none; }
.fx-stat-header .fx-stat-team--away { text-align: right; }
.fx-stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
}
.fx-stat-row + .fx-stat-row { border-top: 1px dashed var(--border-subtle, #e4e7ec); }
.fx-stat-val       { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary, #1a202c); }
.fx-stat-val--home { text-align: left; }
.fx-stat-val--away { text-align: right; }
.fx-stat-lbl       { text-align: center; color: var(--text-secondary, #667085); font-size: 13px; white-space: nowrap; }

.timeline__event {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  margin-bottom: 6px;
  font-size: 14px;
}
.timeline__event--away { grid-template-columns: 1fr auto 56px; text-align: right; }
.timeline__event--away .timeline__player { order: 1; }
.timeline__event--away .timeline__icon   { order: 2; }
.timeline__event--away .timeline__min    { order: 3; }
.timeline__min    { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary, #1a202c); font-size: 13px; }
.timeline__icon   { font-size: 18px; line-height: 1; }
.timeline__player { color: var(--text-primary, #1a202c); }

.lineups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0;
}
.lineup-side {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  padding: 14px 16px;
}
.lineup-side h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 10px; color: var(--text-primary, #1a202c); }
.lineup-list { list-style: none; padding: 0; margin: 0; }
.lineup-list__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}
.lineup-list__row + .lineup-list__row { border-top: 1px dashed var(--border-subtle, #e4e7ec); }
.lineup-list__no   { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary, #667085); text-align: center; }
.lineup-list__name { color: var(--text-primary, #1a202c); }
.lineup-list__pos  { font-size: 11px; color: var(--text-secondary, #667085); text-transform: uppercase; letter-spacing: 0.05em; }
.lineup-list__link { display: contents; color: inherit; text-decoration: none; }
.lineup-list__link:hover .lineup-list__name { color: var(--brand-primary, #3b82f6); text-decoration: underline; }

/* ── Lineups: pitch graphic ───────────────────────────────────────────── */
.lineup-pitch-wrap {
  margin: 12px 0 16px;
}
.lineup-pitch__header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elevated, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
.lineup-pitch__team { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.lineup-pitch__team--away { flex-direction: row-reverse; }
.lineup-pitch__crest { width: 20px; height: 20px; object-fit: contain; }
.lineup-pitch__formation {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(59,130,246,0.16); color: var(--brand-primary, #3b82f6);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
}
.lineup-pitch {
  position: relative;
  width: 100%;
  /* Tall pitch – keeps shirts roomy on mobile and portrait-orient on desktop. */
  aspect-ratio: 68 / 105;
  max-width: 720px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0 6%,
      rgba(255,255,255,0)    6% 12%
    ),
    linear-gradient(180deg, #0f6b3a 0%, #0d5d31 50%, #0f6b3a 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
.lineup-pitch__bg { position: absolute; inset: 0; pointer-events: none; }
.lineup-pitch__halfway {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(255,255,255,0.55);
}
.lineup-pitch__circle {
  position: absolute; left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
}
.lineup-pitch__box {
  position: absolute; left: 18%; right: 18%; height: 14%;
  border: 1px solid rgba(255,255,255,0.55);
}
.lineup-pitch__box--top    { top: 0;    border-top: 0; }
.lineup-pitch__box--bottom { bottom: 0; border-bottom: 0; }
.lineup-pitch__six {
  position: absolute; left: 32%; right: 32%; height: 6%;
  border: 1px solid rgba(255,255,255,0.55);
}
.lineup-pitch__six--top    { top: 0;    border-top: 0; }
.lineup-pitch__six--bottom { bottom: 0; border-bottom: 0; }

/* Player chip on the pitch */
.pitch-player-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14%;
  min-width: 56px; max-width: 86px;
  text-align: center;
  z-index: 1;
}
.pitch-player {
  display: block;
  text-decoration: none; color: #fff;
}
.pitch-player__shirt {
  width: 36px; height: 36px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.pitch-player__shirt--home { background: linear-gradient(160deg, #3b82f6, #1d4ed8); }
.pitch-player__shirt--away { background: linear-gradient(160deg, #ef4444, #b91c1c); }
.pitch-player__num { line-height: 1; }
.pitch-player__name {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pitch-player:hover .pitch-player__name { text-decoration: underline; }

/* Bench */
.lineup-bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.lineup-bench {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  padding: 12px 14px;
}
.lineup-bench__heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #667085);
}

@media (max-width: 520px) {
  .lineup-pitch { max-width: 100%; aspect-ratio: 68 / 110; }
  .pitch-player__shirt { width: 30px; height: 30px; font-size: 12px; }
  .pitch-player__name  { font-size: 10px; }
  .pitch-player-wrap   { width: 18%; min-width: 48px; }
}

/* fx-hero clickable-team + title styles moved into the main fx-hero block
   above (now themed to match the .page-hero on the /live/ page).
   Older duplicates removed – they were overriding the dark-theme colours
   with the previous light-theme look. */

/* ── Player card as link (squad grid) ─────────────────────────────────── */
a.player-card,
a.player-card--linked {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.player-card:hover .player-card__name,
a.player-card--linked:hover .player-card__name {
  color: var(--brand-primary, #4f46e5);
}
a.player-card:hover,
a.player-card--linked:hover {
  transform: translateY(-1px);
}

/* ── Venue card (clickable on /venues/) ──────────────────────────────── */
.venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px 0 32px;
}

a.venue-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.venue-card:hover {
  border-color: var(--brand-primary, #4f46e5);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12);
  transform: translateY(-2px);
}
.venue-card__image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg-subtle, #f4f6f8);
  display: block;
}
.venue-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.venue-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.venue-card__city {
  font-size: 13px;
  color: var(--text-secondary);
}
.venue-card__meta {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  margin-top: 4px;
}

/* ── Venue detail page ───────────────────────────────────────────────── */
.venue-hero {
  margin: 24px 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
}
.venue-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0;
}
.venue-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.venue-hero__copy {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.venue-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary, #4f46e5);
}
.venue-hero__name {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
}
.venue-hero__city {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.venue-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 12px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
}
.venue-hero__stat dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.venue-hero__stat dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.venue-section {
  margin: 32px 0;
}
.venue-section__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .venue-hero__inner { grid-template-columns: 1fr; }
  .venue-hero__media img { min-height: 200px; max-height: 260px; }
  .venue-hero__copy { padding: 20px 20px 24px; }
  .venues-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .venue-card__image { height: 110px; }
}

/* ── Live nav item (red + beeping dot) ──────────────────────────────────── */
.site-nav__link--live,
.site-drawer__link--live {
  color: var(--live, #ff3b3b) !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav__link--live:hover,
.site-drawer__link--live:hover {
  color: var(--live, #ff3b3b) !important;
  background: rgba(255, 59, 59, 0.08);
}

/* The beeping red dot – sits to the LEFT of the word "Live" */
.site-nav__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live, #ff3b3b);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: sm-live-beep 1.4s ease-out infinite;
}

@keyframes sm-live-beep {
  0%   { box-shadow: 0 0 0 0   rgba(255, 59, 59, 0.6); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0);   transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0   rgba(255, 59, 59, 0);   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__live-dot { animation: none; }
}

/* ── League detail enhancements ────────────────────────────────────────── */
.league-hero__copy { display: flex; flex-direction: column; gap: 6px; }
.league-hero__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-secondary, #667085); }
.league-hero__meta img { width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); }
.league-hero__country { font-weight: 500; }
.league-hero__rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary, #4f46e5) 8%, transparent); color: var(--brand-primary, #4f46e5); font-weight: 600; }
.league-hero__rating-num { font-weight: 800; font-variant-numeric: tabular-nums; }

.league-empty { padding: 48px 0; }
.league-empty__card { max-width: 540px; margin: 0 auto; padding: 40px 24px; text-align: center; border: 1px dashed var(--border-subtle, #e4e7ec); border-radius: 16px; background: var(--bg-elevated, #fff); }
.league-empty__card svg { color: var(--text-tertiary, #5e6678); margin-bottom: 12px; }
.league-empty__card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary, #1a202c); }
.league-empty__card p { color: var(--text-secondary, #667085); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.league-empty__links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.league-fixtures, .league-standings, .league-topscorers { padding: 32px 0; }
.league-fixtures .section-hdr, .league-standings .section-hdr, .league-topscorers .section-hdr { margin-bottom: 16px; }

/* ── Player detail: profile facts grid + stat cells + empty state ──────── */
.player-profile {
  margin-top: 28px;
  padding: 0 0 8px;
}
.player-profile__heading,
.player-stats__heading {
  font-family: var(--font-display, var(--font-body));
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a202c);
}
.player-profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.player-profile-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  min-height: 64px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.player-profile-card:hover {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 4px 14px rgba(0, 214, 143, 0.08);
}
.player-profile-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  line-height: 1;
}
.player-profile-card__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  line-height: 1.3;
  word-break: break-word;
  text-decoration: none;
}
a.player-profile-card__value:hover {
  color: var(--brand-primary, #00d68f);
  text-decoration: underline;
}

/* ── Player detail: season-stats grid ───────────────────────────────────── */
.player-stats {
  margin-top: 32px;
  padding: 0 0 16px;
}
.player-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.player-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.player-stat-cell:hover {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 6px 20px rgba(0, 214, 143, 0.1);
  transform: translateY(-2px);
}
.player-stat-cell__icon {
  font-size: 22px;
  line-height: 1;
  opacity: 0.9;
}
.player-stat-cell__val {
  font-family: var(--font-display, var(--font-body));
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  line-height: 1;
  letter-spacing: -0.02em;
}
.player-stat-cell__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}
.player-stat-cell--rating {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #00d68f) 12%, var(--bg-elevated, #fff)), var(--bg-elevated, #fff));
  border-color: var(--brand-primary, #00d68f);
}
.player-stat-cell--rating .player-stat-cell__val {
  color: var(--brand-primary, #00d68f);
}

/* ── Player detail: empty state ─────────────────────────────────────────── */
.player-stats__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  background: var(--bg-elevated, #fff);
  border: 1px dashed var(--border-subtle, #e4e7ec);
  border-radius: 12px;
}
.player-stats__empty .fixtures-empty {
  margin: 0;
  text-align: center;
  color: var(--text-secondary, #667085);
  font-size: 14px;
  max-width: 460px;
}
.player-stats__empty .btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .player-profile { margin-top: 20px; }
  .player-profile__heading,
  .player-stats__heading { font-size: 19px; }
  .player-profile__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .player-profile-card { padding: 12px 14px; }
  .player-profile-card__value { font-size: 14px; }
  .player-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .player-stat-cell { padding: 14px 10px; }
  .player-stat-cell__val { font-size: 24px; }
}

/* ── Standings: clickable team rows ────────────────────────────────────── */
.standings-team--link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
}
.standings-team--link:hover .standings-team__name {
  color: var(--brand-primary, #4f46e5);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.standings-team__name {
  transition: color 0.15s;
}

/* ── League top scorers: clickable player + team ────────────────────────── */
.topscorer-player,
.topscorer-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
  min-width: 0;
}
a.topscorer-player:hover .topscorer-player__name,
a.topscorer-team:hover .topscorer-team__name {
  color: var(--brand-primary, #4f46e5);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topscorer-player__name,
.topscorer-team__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.topscorer-player__name {
  font-size: 15px;
  font-weight: 600;
}
.topscorer-team__name {
  font-size: 14.5px;
}
.topscorer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
.topscorer-avatar--init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--text-secondary, #667085);
}
.topscorer-crest {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
}

/* Top-scorers table on narrow screens: shrink paddings and the rank/number
   columns, cap the name widths, and show the team as crest-only so the whole
   row (incl. Голове/Асистенции) fits a 360px viewport without scrolling. */
@media (max-width: 560px) {
  .leagues-table th,
  .leagues-table td { padding: 10px 8px; }
  .leagues-table th.leagues-table__rank-col   { width: 40px; }
  .leagues-table th.leagues-table__rating-col { width: 54px; }
  .leagues-table__rank-badge { width: 26px; height: 26px; font-size: 12px; }
  .topscorer-avatar { width: 36px; height: 36px; }
  .topscorer-avatar--init { font-size: 12px; }
  .topscorer-player__name { max-width: 38vw; font-size: 14px; }
  .topscorer-crest { width: 28px; height: 28px; }
  .topscorer-team__name { display: none; }
  /* /leagues/ list on phones: flag carries the country, crest slightly
     smaller, live column tighter — the row fits without clipping. */
  .leagues-table__country-name { display: none; }
  .leagues-table__crest { width: 32px; height: 32px; }
  .leagues-table__league-name { font-size: 15px; }
  .leagues-table th.leagues-table__live-col { width: 72px; }
}

/* ── Player detail page: section-level box treatment ─────────────────── */
.simosports-app .player-profile,
.simosports-app .player-stats,
.simosports-app .player-tracked {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin: 24px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.simosports-app .player-profile__heading,
.simosports-app .player-stats__heading,
.simosports-app .player-tracked__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.simosports-app .player-tracked__sub {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 13.5px;
}

.player-stats__empty {
  margin: 8px 0 0;
  padding: 24px;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  text-align: center;
}
.player-stats__empty .fixtures-empty { margin: 0 0 12px; }

/* ── Tracked-data preview cards ──────────────────────────────────────── */
.player-tracked__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tracked-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tracked-card:hover {
  border-color: var(--brand-primary, #00d68f);
  box-shadow: 0 6px 22px rgba(0, 214, 143, 0.10);
  transform: translateY(-1px);
}

.tracked-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.tracked-card__icon {
  font-size: 22px;
  line-height: 1;
}
.tracked-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  color: var(--text-primary);
}
.tracked-card__pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.tracked-card__pill--live {
  background: rgba(0, 214, 143, 0.14);
  color: #047857;
}
.tracked-card__pill--soon {
  background: rgba(99, 102, 241, 0.14);
  color: #4338ca;
}

.tracked-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tracked-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 4px 0;
}
.tracked-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tracked-card__item--on .tracked-card__dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.tracked-card__item--on .tracked-card__lbl {
  color: var(--text-primary);
  font-weight: 500;
}
.tracked-card__item--pending .tracked-card__dot {
  background: #cbd5e1;
}
.tracked-card__item--pending .tracked-card__lbl {
  color: var(--text-tertiary, #5e6678);
}

@media (max-width: 600px) {
  .simosports-app .player-profile,
  .simosports-app .player-stats,
  .simosports-app .player-tracked {
    padding: 18px 16px 16px;
    margin: 16px 0;
    border-radius: 12px;
  }
  .player-tracked__grid { gap: 12px; }
  .tracked-card { padding: 14px 14px 12px; }
}

/* Dark-mode tweaks */
[data-theme="dark"] .tracked-card__pill--live {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
[data-theme="dark"] .tracked-card__pill--soon {
  background: rgba(99, 102, 241, 0.20);
  color: #a5b4fc;
}
[data-theme="dark"] .player-stats__empty {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Player search controls polish ─────────────────────────────────────── */
.players-clear {
  margin-left: 4px;
  flex-shrink: 0;
}
.players-hint {
  font-size: 12px;
  color: var(--text-tertiary, #5e6678);
  margin: -4px 0 12px;
  letter-spacing: 0.01em;
}
.players-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #667085);
  vertical-align: 1px;
}
@media (max-width: 600px) { .players-hint { display: none; } }

/* Loading state: dim the grid + show a subtle spinner */
.players-grid.is-loading {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.players-grid.is-loading::after {
  content: '';
  position: absolute;
  top: 24px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px;
  border: 2px solid var(--border-subtle, #e4e7ec);
  border-top-color: var(--brand-primary, #4f46e5);
  border-radius: 50%;
  animation: sm-players-spin 0.7s linear infinite;
  z-index: 5;
}
@keyframes sm-players-spin { to { transform: translate(-50%, 0) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .players-grid.is-loading::after { animation: none; }
}

/* ── Sideline banner (active injury / suspension) ────────────────────── */
.simosports-app .sideline-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 18px 0 0;
  border-radius: 12px;
  border: 1px solid;
}
.sideline-banner__icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.sideline-banner__head { display: block; font-size: 15px; line-height: 1.3; }
.sideline-banner__sub { font-size: 13px; opacity: 0.85; }
.sideline-banner--injury {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
  color: #92400e;
}
.sideline-banner--suspension {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #991b1b;
}
[data-theme="dark"] .sideline-banner--injury { color: #fcd34d; }
[data-theme="dark"] .sideline-banner--suspension { color: #fca5a5; }

/* ── National team caps card ──────────────────────────────────────────── */
.simosports-app .caps-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 24px 18px;
  margin: 18px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.caps-card__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.caps-card__icon { font-size: 22px; }
.caps-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.caps-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  margin: 0;
}
.caps-card__stats > div {
  background: var(--bg-subtle, #f4f6f8);
  border-radius: 10px;
  padding: 10px 12px;
}
.caps-card__stats dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary); margin: 0 0 4px;
}
.caps-card__stats dd { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-primary); }

/* ── Recent form dots ────────────────────────────────────────────────── */
.simosports-app .player-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin: 18px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.player-form__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.player-form__icon { font-size: 22px; }
.player-form__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.player-form__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.form-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; color: #fff;
  letter-spacing: 0;
}
.form-dot--win  { background: #10b981; }
.form-dot--draw { background: #94a3b8; }
.form-dot--loss { background: #ef4444; }
.form-dot--na   { background: #cbd5e1; color: #475569; }

/* ── Trophy cabinet ──────────────────────────────────────────────────── */
.simosports-app .trophies {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px 26px 22px;
  margin: 20px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.trophies__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.trophies__icon { font-size: 24px; }
.trophies__title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.trophies__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.trophy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.20);
  border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.trophy-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.15);
}
.trophy-card__crest {
  width: 44px; height: 44px;
  object-fit: contain; flex-shrink: 0;
}
.trophy-card__crest--fallback {
  font-size: 28px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.trophy-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trophy-card__name {
  font-size: 13.5px; font-weight: 700; color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trophy-card__count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: #d97706;
}
.trophy-card__seasons {
  font-size: 11.5px; color: var(--text-tertiary, #5e6678);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Transfer history timeline ───────────────────────────────────────── */
.simosports-app .transfers {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px 26px 22px;
  margin: 20px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.transfers__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.transfers__icon { font-size: 22px; }
.transfers__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.transfers__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  border-left: 2px solid var(--border-subtle);
  padding-left: 18px;
}
.transfers__item {
  position: relative;
  padding: 10px 0 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.transfers__item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-primary, #4f46e5);
  box-shadow: 0 0 0 3px var(--bg-elevated);
}
.transfers__year {
  flex-shrink: 0;
  width: 52px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.transfers__detail { flex: 1; min-width: 0; }
.transfers__route {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.transfers__arrow {
  color: var(--text-tertiary, #5e6678);
  font-weight: 400;
}
.transfers__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.transfers__type {
  background: var(--bg-subtle, #f4f6f8);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.transfers__fee {
  font-weight: 700;
  color: var(--brand-primary, #4f46e5);
}

@media (max-width: 600px) {
  .simosports-app .caps-card,
  .simosports-app .player-form,
  .simosports-app .trophies,
  .simosports-app .transfers {
    padding: 18px 16px 14px;
    border-radius: 12px;
  }
  .trophies__grid { grid-template-columns: 1fr; }
  .transfers__year { width: 44px; font-size: 12px; }
}

/* ── Homepage hero: wider on desktop, cleaner wrap ──────────────────────── */
@media (min-width: 1100px) {
  .hero { padding: 80px 0 56px; }
  .hero__inner { max-width: 1440px; padding-inline: 40px; grid-template-columns: 1.05fr 520px; gap: 64px; }
  .hero__headline { font-size: clamp(48px, 5vw, 72px); }
  .hero__sub { font-size: 19px; max-width: 540px; }
}
@media (min-width: 1440px) {
  .hero__inner { max-width: 1560px; padding-inline: 56px; grid-template-columns: 1fr 560px; }
  .hero__headline { font-size: 76px; }
}

/* ── Most-watched leagues: cards must show the league name ─────────────── */
.hp-top-leagues__grid {
  /* Reflow to fewer columns on narrower viewports so cards have room
     to render the league name + country line. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
.hp-top-leagues__card {
  /* Card grid: rank · crest · body (flex 1, min-width 0 so it can shrink
     and ellipsis kicks in) · rating. */
  grid-template-columns: 28px 32px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden;
}
.hp-top-leagues__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-top-leagues__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}
.hp-top-leagues__country {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #667085);
  flex-wrap: nowrap;
  min-width: 0;
}
.hp-top-leagues__country span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hp-top-leagues__country img { flex-shrink: 0; }
.hp-top-leagues__rating {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-primary, #4f46e5);
}

/* ── Final CTA: full-width hero-style band ─────────────────────────────── */
.final-cta {
  position: relative;
  margin: 64px 0 0;
  padding: 96px 24px;
  background: linear-gradient(135deg, #0a0e1a 0%, #161a2e 50%, #0c2630 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  /* Break out of the constrained main column. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(0, 214, 143, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 75% 30%, rgba(42, 111, 219, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.final-cta .pill {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}
.final-cta__title {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
}
.final-cta__sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px;
  max-width: 640px;
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.final-cta__actions .btn--primary {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
.final-cta__actions .btn--secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.final-cta__actions .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 600px) {
  .final-cta { padding: 64px 20px; margin-top: 40px; }
}

/* ── Header search trigger: prevent placeholder text from wrapping ─────── */
.search-trigger {
  white-space: nowrap;
  height: 36px;
  padding: 0 12px;
  flex-shrink: 0;
  min-width: 240px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-trigger__hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
}
.search-trigger kbd {
  flex-shrink: 0;
}
@media (max-width: 1180px) {
  .search-trigger { min-width: 0; max-width: none; }
  .search-trigger__hint { display: none; }
}

/* ── Dark-mode toggle: ensure icon is visible in both themes ────────────── */
.dark-toggle { color: var(--text-primary); }
.dark-toggle svg { color: var(--text-primary); }
[data-theme="dark"] .dark-toggle { color: #f5f5f7; border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .dark-toggle:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dark-toggle svg { color: #f5f5f7; }

/* ── Featured top match card ───────────────────────────────────────────── */
.topmatch { padding: 40px 0; }
.topmatch__head { text-align: center; margin-bottom: 20px; }
.topmatch__head .features__eyebrow { letter-spacing: 0.12em; }

.topmatch__card {
  display: block;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 20px;
  background: var(--bg-elevated, #fff);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.topmatch__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  border-color: var(--brand-primary, #4f46e5);
}

.topmatch__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--bg-subtle, #f9fafb);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.topmatch__league-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.topmatch__league-name { flex: 1 1 auto; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary, #667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topmatch__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  color: var(--text-secondary, #667085);
  flex-shrink: 0;
}
/* #d92d20 on #fee4e2 = 4.01:1 (fails WCAG AA for this 11.5px text). #b42318
   hits 5.45:1 on the same pink badge. The dot stays the brighter #d92d20 —
   it's decorative, non-text, so the contrast minimum doesn't apply. */
.topmatch__badge--live { background: #fee4e2; color: #b42318; border-color: #fecdca; }
.topmatch__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #d92d20; animation: leagues-live-pulse 1.6s ease-in-out infinite; }

.topmatch__board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 36px 28px;
}
.topmatch__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  min-width: 0;
}
.topmatch__crest {
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-subtle, #f9fafb);
  overflow: hidden;
  flex-shrink: 0;
}
.topmatch__crest img { width: 64px; height: 64px; object-fit: contain; }
.topmatch__crest-init {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  background: var(--text-secondary, #667085);
}
.topmatch__team-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.topmatch__centre { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; }
.topmatch__score {
  font-family: var(--font-display, inherit);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary, #1a202c);
  font-variant-numeric: tabular-nums;
}
.topmatch__score--live  { color: #d92d20; }
.topmatch__score--upcoming { color: var(--text-primary, #1a202c); font-size: 44px; }
.topmatch__score-sep { color: var(--text-tertiary, #5e6678); font-weight: 400; margin: 0 4px; }
.topmatch__kickoff { font-size: 13px; color: var(--text-secondary, #667085); font-weight: 500; }

.topmatch__cta {
  text-align: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle, #e4e7ec);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-primary, #4f46e5);
  background: var(--bg-elevated, #fff);
}

@media (max-width: 600px) {
  .topmatch { padding: 28px 0; }
  .topmatch__board { gap: 12px; padding: 24px 16px; grid-template-columns: 1fr auto 1fr; }
  .topmatch__crest { width: 64px; height: 64px; }
  .topmatch__crest img { width: 44px; height: 44px; }
  .topmatch__crest-init { width: 44px; height: 44px; font-size: 16px; }
  .topmatch__team-name { font-size: 14px; }
  .topmatch__score { font-size: 36px; }
  .topmatch__score--upcoming { font-size: 28px; }
}

/* ── Mobile drawer redesign ────────────────────────────────────────────── */

/* Wider panel + scroll body */
.site-drawer__panel {
  width: min(92vw, 380px);
}
.site-drawer__panel { background: var(--bg-elevated, #fff); }

/* Brand header */
.site-drawer__head {
  padding: 16px 18px;
  align-items: center;
}
.site-drawer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
}
.site-drawer__brand-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Featured "LIVE NOW" hero card */
.site-drawer__hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 14px 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4444 0%, #d92d20 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(217, 45, 32, 0.24);
  transition: transform 0.15s, box-shadow 0.15s;
}
.site-drawer__hero:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(217, 45, 32, 0.32); }
.site-drawer__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
  flex-shrink: 0;
  color: #fff;
}
.site-drawer__hero-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-drawer__hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.92; }
.site-drawer__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.6); animation: drawer-live-pulse 1.6s ease-in-out infinite; }
@keyframes drawer-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.site-drawer__hero-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.site-drawer__hero-sub { font-size: 12.5px; opacity: 0.86; }
.site-drawer__hero-arrow { font-size: 22px; opacity: 0.85; flex-shrink: 0; }

/* Nav body */
.site-drawer__nav {
  padding: 4px 14px 16px;
  gap: 10px;
}

/* Section header label */
.site-drawer__section-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  margin: 14px 4px 8px;
}

/* Tile grid (2-cols) */
.site-drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.site-drawer__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 12px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-subtle, #e4e7ec);
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.site-drawer__tile:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary, #4f46e5);
  background: var(--bg-elevated, #fff);
}
.site-drawer__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  flex-shrink: 0;
}
.site-drawer__tile-icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.site-drawer__tile-icon--green  { background: linear-gradient(135deg, #10b981, #059669); }
.site-drawer__tile-icon--violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.site-drawer__tile-icon--yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.site-drawer__tile-icon--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.site-drawer__tile-icon--teal   { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.site-drawer__tile-icon--pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.site-drawer__tile-icon--slate  { background: linear-gradient(135deg, #64748b, #475569); }
.site-drawer__tile-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
}

/* List rows (Tournaments + Account) */
.site-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-drawer__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  background: transparent;
  transition: background 0.12s;
}
.site-drawer__row:hover { background: var(--bg-subtle, #f9fafb); }
.site-drawer__row-emoji {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
}
.site-drawer__row-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-drawer__row-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary, #1a202c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-drawer__row-sub { font-size: 12px; color: var(--text-secondary, #667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-drawer__row-arrow { font-size: 18px; color: var(--text-tertiary, #5e6678); flex-shrink: 0; }

/* Footer */
.site-drawer__foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
}
.site-drawer__cta {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 15px;
}
.site-drawer__legal {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary, #5e6678);
  text-align: center;
}

/* Dark mode polish */
[data-theme="dark"] .site-drawer__panel { background: #0f1117; }
[data-theme="dark"] .site-drawer__head,
[data-theme="dark"] .site-drawer__foot { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .site-drawer__foot { background: #0f1117; }
[data-theme="dark"] .site-drawer__brand-text,
[data-theme="dark"] .site-drawer__tile-label,
[data-theme="dark"] .site-drawer__row-name { color: #f5f5f7; }
[data-theme="dark"] .site-drawer__close,
[data-theme="dark"] .site-drawer__brand { color: #f5f5f7; }
[data-theme="dark"] .site-drawer__tile,
[data-theme="dark"] .site-drawer__row-emoji { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .site-drawer__tile:hover,
[data-theme="dark"] .site-drawer__row:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .site-drawer__close:hover { background: rgba(255,255,255,0.06); }

/* Larger panel keep readable padding on desktop preview */
@media (min-width: 600px) {
  .site-drawer__panel { width: 380px; }
}

/* ── Timeline event extras (sub-off, info chips, rescinded) ─────────────── */
.timeline__sub-off {
  font-size: 0.85em;
  color: var(--text-secondary, #667085);
  white-space: nowrap;
}
.timeline__detail {
  font-size: 0.8em;
  color: var(--text-secondary, #667085);
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.timeline__chip {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: 1px;
  letter-spacing: 0.04em;
}
.timeline__chip--injured {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.timeline__event--rescinded .timeline__player,
.timeline__event--rescinded .timeline__detail {
  text-decoration: line-through;
  opacity: 0.6;
}
.timeline__event--rescinded::after {
  content: 'rescinded';
  font-size: 0.7em;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
}

/* ── Mobile drawer fit + scroll fix ────────────────────────────────────── */
/* The panel already gets full height from top:0 / bottom:0 – DON'T override
   its height with 100% / 100dvh because in iOS Safari that resolves to 0
   when the parent (.site-drawer) hasn't laid out yet. We only need:
   1. drawer z-index above the WP admin bar (99999) so it's actually visible
      for logged-in users on mobile
   2. panel to clip overflow so the nav can scroll inside it
   3. nav to flex to fill remaining height + scroll its own overflow
   4. respect the admin bar's offset when present so the drawer doesn't sit
      under the toolbar */
/* Force the drawer to its own root-level stacking context, above everything.
   `!important` overrides the earlier `z-index: 1000`. `position: fixed` is
   forced because some FSE block ancestors (or the WP admin bar's
   transformed sub-toolbar) can otherwise contain it. `isolation: isolate`
   means no descendant of the drawer can paint above the drawer's wrapper. */
.site-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;   /* one below int-max */
  isolation: isolate;
}
.site-drawer__backdrop { z-index: 1; }
.site-drawer__panel    { z-index: 2; overflow: hidden; }
.admin-bar .site-drawer__panel { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-drawer__panel { top: 46px; }
}
.site-drawer__nav {
  flex: 1 1 auto;
  min-height: 0;          /* magic flex bug-fix that makes scroll work */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Slim down so all 8 tiles + 5 rows + foot fit above the fold on most phones */
.site-drawer__hero { padding: 12px 14px; gap: 10px; margin: 10px 14px 6px; }
.site-drawer__hero-icon { width: 36px; height: 36px; }
.site-drawer__hero-title { font-size: 15px; }
.site-drawer__hero-sub { font-size: 12px; }

.site-drawer__nav { padding: 2px 14px 12px; }
.site-drawer__section-title { margin: 12px 4px 6px; }

.site-drawer__grid { gap: 6px; }
.site-drawer__tile { padding: 10px 12px; gap: 8px; }
.site-drawer__tile-icon { width: 32px; height: 32px; border-radius: 8px; }
.site-drawer__tile-icon svg { width: 18px; height: 18px; }
.site-drawer__tile-label { font-size: 13.5px; }

.site-drawer__list { gap: 4px; }
.site-drawer__row { padding: 10px 12px; gap: 10px; }
.site-drawer__row-emoji { width: 32px; height: 32px; font-size: 16px; }
.site-drawer__row-name { font-size: 14px; }
.site-drawer__row-sub { font-size: 11.5px; }

.site-drawer__foot { padding: 12px 16px 14px; }
.site-drawer__cta { padding: 11px 14px; font-size: 14px; }
.site-drawer__legal { font-size: 11px; margin-top: 8px; }

/* Visible scrollbar cue so users know there's more below */
.site-drawer__nav::-webkit-scrollbar { width: 4px; }
.site-drawer__nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
[data-theme="dark"] .site-drawer__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }

/* ── Desktop nav with icons ────────────────────────────────────────────── */
.site-nav { gap: 4px; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.site-nav__link:hover {
  color: var(--text-primary, #1a202c);
  background: var(--bg-subtle, #f9fafb);
  border-color: var(--border-subtle, #e4e7ec);
  transform: translateY(-1px);
}
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
  color: var(--text-primary, #1a202c);
  background: var(--bg-subtle, #f9fafb);
  border-color: var(--border-subtle, #e4e7ec);
}

.site-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.site-nav__icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.site-nav__icon--green  { background: linear-gradient(135deg, #10b981, #059669); }
.site-nav__icon--violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.site-nav__icon--yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.site-nav__icon--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.site-nav__icon--teal   { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.site-nav__icon--pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.site-nav__icon--slate  { background: linear-gradient(135deg, #64748b, #475569); }
.site-nav__icon--gold   { background: linear-gradient(135deg, #fbbf24, #d97706); }
.site-nav__icon--live   { background: #fee4e2; box-shadow: 0 0 0 1px #fecdca, 0 0 0 4px rgba(217,45,32,0.08); }

/* Live: pulsing red dot */
.site-nav__icon--live .site-nav__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d92d20;
  display: inline-block;
  animation: site-nav-live-pulse 1.4s ease-in-out infinite;
}
@keyframes site-nav-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.site-nav__link--live { color: #d92d20; }
.site-nav__link--live:hover { color: #d92d20; background: #fee4e2; border-color: #fecdca; }

/* World Cup accent – gold border on hover */
.site-nav__link--accent .site-nav__icon { box-shadow: 0 0 0 1px rgba(251,191,36,0.4); }
.site-nav__link--accent:hover { border-color: #fbbf24; background: rgba(251,191,36,0.08); }

/* Badge inside the World Cup label */
.site-nav__badge {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.site-nav__label { line-height: 1; }

/* Slimmer at the breakpoint where the menu would otherwise wrap */
@media (max-width: 1280px) {
  .site-nav { gap: 2px; margin-left: 4px; }
  .site-nav__link { padding: 6px 10px 6px 6px; font-size: 12.5px; gap: 6px; }
  .site-nav__icon { width: 22px; height: 22px; border-radius: 6px; }
  .site-nav__icon svg { width: 12px; height: 12px; }
}
@media (max-width: 1100px) {
  .site-nav__label { /* keep visible but shrink padding only */ }
  .site-nav__link { padding: 6px 8px 6px 6px; }
}

/* Dark mode */
[data-theme="dark"] .site-nav__link { color: rgba(255,255,255,0.78); }
[data-theme="dark"] .site-nav__link:hover,
[data-theme="dark"] .site-nav__link.is-active {
  color: #f5f5f7;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .site-nav__badge { background: rgba(251,191,36,0.18); color: #fbbf24; }

/* ── Timeline player links + assist callout ────────────────────────────── */
.timeline__player-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s, border-color 0.12s;
}
.timeline__player-link:hover {
  color: var(--brand-primary, #4f46e5);
  border-bottom-color: currentColor;
}
.timeline__assist {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.8em;
  color: var(--text-secondary, #667085);
  letter-spacing: 0.01em;
}
.timeline__assist .timeline__player-link { color: var(--text-secondary, #667085); }
.timeline__assist .timeline__player-link:hover { color: var(--brand-primary, #4f46e5); }

/* ── World Cup 2026: group boxes (polished) ────────────────────────────── */
.wc-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .wc-groups-grid { grid-template-columns: 1fr; gap: 14px; }
}

.wc-group {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
}

.wc-group__name {
  margin: 0;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary, #4f46e5) 0%, color-mix(in srgb, var(--brand-primary, #4f46e5) 70%, #000 30%) 100%);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}

.wc-group__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.wc-group__table thead {
  background: var(--bg-subtle, #f8fafc);
}
.wc-group__table th {
  padding: 9px 6px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #5e6678);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.wc-group__table th:nth-child(2) { text-align: left; padding-left: 14px; }
.wc-group__table td {
  padding: 10px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  vertical-align: middle;
}
.wc-group__table tbody tr:last-child td { border-bottom: none; }
.wc-group__table tbody tr:hover { background: rgba(79, 70, 229, 0.03); }

/* Position cell with status dot for advance / play-off / out */
.wc-group__table .wc-pos {
  position: relative;
  width: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #475569);
}
.wc-group__table .wc-pos::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 3px;
}
.wc-group__table .wc-pos--advance::before { background: #10b981; } /* green = top 2 */
.wc-group__table .wc-pos--playoff::before { background: #f59e0b; } /* amber = 3rd */
.wc-group__table .wc-pos--out::before     { background: #cbd5e1; } /* grey = 4th */

.wc-group__table .wc-team {
  text-align: left;
  padding-left: 6px;
  min-width: 0;
}
.wc-group__table .standings-team {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-primary, #1a202c);
  text-decoration: none;
  font-weight: 600;
  max-width: 100%;
}
.wc-group__table a.standings-team:hover { color: var(--brand-primary, #4f46e5); }
.wc-group__table .standings-team__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.wc-group__table .standings-crest {
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-subtle, #e4e7ec);
  padding: 1px;
}

.wc-group__table .wc-pts {
  font-weight: 800;
  color: var(--text-primary, #1a202c);
}
.wc-group__table .wc-gd {
  color: var(--text-secondary, #667085);
}

/* Below-table legend (one line per group card, optional) */
.wc-group__legend {
  display: flex;
  gap: 14px;
  padding: 8px 14px 10px;
  font-size: 11px;
  color: var(--text-tertiary, #5e6678);
  letter-spacing: 0.02em;
}
.wc-group__legend span { display: inline-flex; align-items: center; gap: 5px; }
.wc-group__legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.wc-legend-advance { background: #10b981; }
.wc-legend-playoff { background: #f59e0b; }
.wc-legend-out     { background: #cbd5e1; }

@media (max-width: 480px) {
  .wc-group__table th, .wc-group__table td { padding: 8px 3px; }
  .wc-group__table .standings-team__name { max-width: 100px; font-size: 12.5px; }
  .wc-group__name { padding: 12px 14px; font-size: 12px; }
}

.wc-groups-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-secondary, #475569);
}
.wc-groups-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wc-groups-legend i {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
}
@media (max-width: 600px) { .wc-groups-legend { gap: 12px; font-size: 11.5px; } }

/* ── Players page filters – polished ───────────────────────────────────── */
.players-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.players-controls > * { min-width: 0; }

/* Search input – full row */
.players-search-wrap {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}
.players-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary, #5e6678);
  pointer-events: none;
}
.players-search {
  width: 100%;
  height: 42px;
  padding: 0 56px 0 40px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-subtle, #f9fafb);
  font: inherit;
  font-size: 14px;
  color: var(--text-primary, #1a202c);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.players-search:focus {
  outline: none;
  border-color: var(--brand-primary, #4f46e5);
  background: var(--bg-elevated, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4f46e5) 16%, transparent);
}
.players-search::placeholder { color: var(--text-tertiary, #5e6678); }
.players-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 5px;
  background: var(--bg-elevated, #fff);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #5e6678);
  pointer-events: none;
}

/* Position filter pills with colored dots */
.players-filters { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 999px;
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #667085);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.filter-btn:hover { color: var(--text-primary, #1a202c); border-color: var(--text-secondary, #667085); }
.filter-btn--active {
  background: var(--brand-primary, #4f46e5);
  color: #fff;
  border-color: var(--brand-primary, #4f46e5);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary, #4f46e5) 28%, transparent);
}
.filter-btn--active .filter-btn__dot { background: #fff; }
.filter-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary, #5e6678);
  flex-shrink: 0;
}
.filter-btn__dot--gk  { background: #f59e0b; }
.filter-btn__dot--def { background: #3b82f6; }
.filter-btn__dot--mid { background: #10b981; }
.filter-btn__dot--att { background: #ef4444; }

/* League dropdown – custom button */
.players-league-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.players-league-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 10px;
  min-width: 220px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #1a202c);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
}
.players-league-btn:hover { border-color: var(--text-secondary, #667085); }
.players-league-wrap.is-open .players-league-btn,
.players-league-wrap.has-value .players-league-btn {
  border-color: var(--brand-primary, #4f46e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4f46e5) 14%, transparent);
}
.players-league-btn__crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-subtle, #e4e7ec);
  color: var(--brand-primary, #4f46e5);
  flex-shrink: 0;
  overflow: hidden;
}
.players-league-btn__crest img { width: 20px; height: 20px; object-fit: contain; }
.players-league-btn__label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.players-league-btn__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-subtle, #f9fafb);
  color: var(--text-secondary, #667085);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.players-league-btn__chev { color: var(--text-tertiary, #5e6678); transition: transform 0.18s; flex-shrink: 0; }
.players-league-wrap.is-open .players-league-btn__chev { transform: rotate(180deg); }

/* League dropdown – menu.
   IMPORTANT: the [hidden] override below must come *after* the display
   rule so [hidden] wins. Otherwise the menu's `display: flex` overrides
   `display: none` from the hidden attribute and the menu is always open. */
.players-league-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 50;
  width: max-content;
  min-width: 100%;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.players-league-menu[hidden] { display: none !important; }
.players-league-menu__search-wrap {
  position: relative;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.players-league-menu__search-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-46%);
  color: var(--text-tertiary, #5e6678);
  pointer-events: none;
}
.players-league-menu__search {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 8px;
  background: var(--bg-subtle, #f9fafb);
  font: inherit;
  font-size: 13px;
  color: var(--text-primary, #1a202c);
}
.players-league-menu__search:focus {
  outline: none;
  border-color: var(--brand-primary, #4f46e5);
  background: var(--bg-elevated, #fff);
}
.players-league-menu__list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
}
.players-league-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary, #1a202c);
  transition: background 0.12s;
}
.players-league-opt:hover { background: var(--bg-subtle, #f9fafb); }
.players-league-opt--active {
  background: color-mix(in srgb, var(--brand-primary, #4f46e5) 8%, transparent);
  color: var(--brand-primary, #4f46e5);
  font-weight: 600;
}
.players-league-opt__crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
  overflow: hidden;
  color: var(--text-tertiary, #5e6678);
}
.players-league-opt__crest img { width: 22px; height: 22px; object-fit: contain; }
.players-league-opt__name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players-league-opt__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-subtle, #f9fafb);
  color: var(--text-secondary, #667085);
  font-size: 11px;
  font-weight: 700;
}

/* Hide the form-mode select; JS keeps it in sync */
.players-league-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
  opacity: 0;
}

/* Sort select styled like the league button */
.players-sort-wrap { position: relative; display: inline-flex; }
.players-sort-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary, #5e6678);
  pointer-events: none;
}
.players-sort {
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  padding: 0 36px 0 36px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}
.players-sort:hover { border-color: var(--text-secondary, #667085); }
.players-sort:focus { outline: none; border-color: var(--brand-primary, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4f46e5) 14%, transparent); }

/* Count + clear filters area */
.players-count-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 13px;
  color: var(--text-secondary, #667085);
}
.players-count b { color: var(--text-primary, #1a202c); font-weight: 700; }
.players-clear { white-space: nowrap; }

.players-hint {
  margin: 8px 4px 20px;
  font-size: 12.5px;
  color: var(--text-tertiary, #5e6678);
}
.players-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 4px;
  background: var(--bg-subtle, #f9fafb);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-secondary, #667085);
}

/* Responsive (flex-wrap container) */
@media (max-width: 900px) {
  .players-controls { padding: 12px; }
  .players-league-wrap,
  .players-sort-wrap { flex: 1 1 100%; }
  .players-league-btn,
  .players-sort { width: 100%; }
  .players-count-wrap { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
}

/* Dark mode */
[data-theme="dark"] .players-controls { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .players-search,
[data-theme="dark"] .players-league-btn,
[data-theme="dark"] .players-sort,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .players-league-menu,
[data-theme="dark"] .players-league-menu__search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #f5f5f7; }
[data-theme="dark"] .players-league-btn__crest,
[data-theme="dark"] .players-league-opt__crest,
[data-theme="dark"] .players-league-btn__count,
[data-theme="dark"] .players-league-opt__count,
[data-theme="dark"] .players-search-kbd,
[data-theme="dark"] .players-hint kbd { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); }
[data-theme="dark"] .players-league-opt:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .players-search-icon,
[data-theme="dark"] .players-sort-icon { color: rgba(255,255,255,0.56); }

/* ── League website link (hero + table column) ─────────────────────────── */
.league-hero__website,
.leagues-table__website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px solid var(--border-subtle, #e4e7ec);
  color: var(--text-secondary, #667085);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.league-hero__website:hover,
.leagues-table__website:hover {
  border-color: var(--brand-primary, #00d68f);
  color: var(--brand-primary, #00d68f);
  background: color-mix(in srgb, var(--brand-primary, #00d68f) 8%, var(--bg-elevated, #fff));
  text-decoration: none;
}
.league-hero__website svg,
.leagues-table__website svg { flex: 0 0 14px; opacity: 0.8; }
.leagues-table__website-col { white-space: nowrap; text-align: left; }
[data-theme="dark"] .league-hero__website,
[data-theme="dark"] .leagues-table__website {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.72);
}
[data-theme="dark"] .league-hero__website:hover,
[data-theme="dark"] .leagues-table__website:hover {
  border-color: var(--brand-primary, #00d68f);
  color: var(--brand-primary, #00d68f);
  background: rgba(0, 214, 143, 0.12);
}
@media (max-width: 680px) {
  .leagues-table__website-col { display: none; }
}

/* ── Site search overlay (⌘K / search-trigger) ─────────────────────────── */
.site-search { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.site-search[hidden] { display: none; }
.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 27, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: auto;
}
.site-search--open .site-search__backdrop { opacity: 1; }
.site-search__panel {
  position: absolute;
  /* Sit clearly below the site-header (~64-72px tall). Old value `top: 8vh`
     on a tall window landed inside the header strip and visually
     overlapped the desktop nav items. */
  top: 96px;
  left: 50%;
  transform: translate(-50%, -8px);
  /* Narrower on desktop so the open panel never feels like it spans the
     menu. Mobile keeps the near-full-viewport width minus side padding. */
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  pointer-events: auto;
}
/* Push the panel further down when the WP admin bar (32px desktop / 46px
   mobile) is showing, so it always clears the nav. */
.admin-bar .site-search__panel { top: 128px; }
.site-search--open .site-search__panel { opacity: 1; transform: translate(-50%, 0); }
.site-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.site-search__icon { flex: 0 0 18px; color: var(--text-secondary, #667085); }
.site-search__input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary, #1a202c);
  height: 28px;
  min-width: 0;
}
.site-search__input:focus { outline: none; }
.site-search__input::placeholder { color: var(--text-tertiary, #5e6678); }
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__kbd {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary, #5e6678);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-subtle, #f4f6f8);
}
.site-search__results { overflow-y: auto; padding: 8px 6px 16px; flex: 1 1 auto; }
.site-search__hint {
  margin: 0;
  padding: 28px 18px;
  text-align: center;
  color: var(--text-secondary, #667085);
  font-size: 13.5px;
}
.site-search__group { padding: 8px 6px 4px; }
.site-search__group-title {
  margin: 0 0 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.site-search__list { list-style: none; margin: 0; padding: 0; }
.site-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary, #1a202c);
  font-size: 14px;
  line-height: 1.3;
}
.site-search__item:hover,
.site-search__item:focus-visible {
  background: color-mix(in srgb, var(--brand-primary, #00d68f) 8%, var(--bg-elevated, #fff));
  color: var(--text-primary, #1a202c);
  outline: none;
  text-decoration: none;
}
.site-search__crest {
  width: 22px; height: 22px; flex: 0 0 22px;
  object-fit: contain; border-radius: 4px; display: inline-block;
}
.site-search__crest--ph { background: var(--bg-subtle, #f4f6f8); }
.site-search__name { flex: 1 1 auto; font-weight: 600; }
.site-search__sub {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-tertiary, #5e6678);
  font-weight: 500;
}
[data-theme="dark"] .site-search__panel {
  background: #111623;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
[data-theme="dark"] .site-search__field { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .site-search__kbd {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}
[data-theme="dark"] .site-search__item:hover,
[data-theme="dark"] .site-search__item:focus-visible {
  background: rgba(0, 214, 143, 0.12);
  color: #fff;
}
@media (max-width: 600px) {
  .site-search__panel { top: 4vh; max-height: 92vh; }
  .site-search__field { padding: 12px 14px; }
  .site-search__input { font-size: 15px; }
}

/* ── Match-detail extras: commentary, info cards, xG strip ─────────────── */

.commentary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  overflow: hidden;
}
.commentary-table thead {
  background: var(--bg-subtle, #f8fafc);
}
.commentary-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.commentary-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  vertical-align: top;
}
.commentary-table tbody tr:last-child td { border-bottom: none; }
.commentary-table .commentary__min {
  width: 56px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap;
}
.commentary-table .commentary__text {
  color: var(--text-secondary, #475569);
  line-height: 1.55;
}
.commentary__row--goal td {
  background: rgba(16, 185, 129, 0.06);
}
.commentary__row--goal .commentary__text {
  color: var(--text-primary, #1a202c);
  font-weight: 600;
}
.commentary__row--important .commentary__text {
  color: var(--text-primary, #1a202c);
}

/* xG strip on Stats tab */
.fx-xg-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  margin: 8px 0 16px;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d1d40 50%, #0a2e1a 100%);
  color: #fff;
  border-radius: 12px;
}
.fx-xg-strip__side {
  display: flex; align-items: center; gap: 14px;
}
.fx-xg-strip__side:last-child { justify-content: flex-end; }
.fx-xg-strip__num {
  font-family: var(--font-display, inherit);
  font-size: 32px; font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}
.fx-xg-strip__lbl {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.fx-xg-strip__lbl-mid {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-primary, #4d8bff);
  text-align: center;
}

/* Match Info panel (cards grid) */
.fx-info-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.fx-info-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  padding: 18px 20px;
}
.fx-info-card__title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}

.fx-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fx-info-grid > div {
  display: flex; flex-direction: column; gap: 2px;
}
.fx-info-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #5e6678);
  font-weight: 600;
}
.fx-info-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
}
.fx-info-val--mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* Weather card */
.fx-info-weather {
  display: flex; align-items: center; gap: 16px;
}
.fx-info-weather__icon {
  width: 48px; height: 48px; flex-shrink: 0;
}
.fx-info-weather__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  flex: 1;
}
.fx-info-weather__grid > div {
  display: flex; flex-direction: column; gap: 2px;
}

/* xG inside info card */
.fx-info-xg {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.fx-info-xg__side {
  display: flex; align-items: center; gap: 12px;
}
.fx-info-xg__side:last-child { justify-content: flex-end; }
.fx-info-xg__team {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
}
.fx-info-xg__num {
  font-family: var(--font-display, inherit);
  font-size: 28px;
  font-weight: 900;
  color: var(--text-primary, #1a202c);
}
.fx-info-xg__sep {
  font-size: 11px;
  color: var(--text-tertiary, #5e6678);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Generic info table (referees, sidelined) */
.fx-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fx-info-table th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.fx-info-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.fx-info-table tbody tr:last-child td { border-bottom: none; }
.fx-info-table__role {
  width: 130px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.fx-info-table__name {
  font-weight: 600;
  color: var(--text-primary, #1a202c);
}
.fx-info-table__country {
  font-size: 13px;
  width: 100px;
}

/* Pills for sidelined categories */
.fx-info-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fx-info-pill--injury,
.fx-info-pill--injured { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.fx-info-pill--suspension,
.fx-info-pill--suspended { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.fx-info-pill--international { background: rgba(79, 70, 229, 0.12); color: #4f46e5; }
.fx-info-pill { background: rgba(100, 116, 139, 0.12); color: #475569; }

/* Sidelined: separate sub-blocks per team */
.fx-info-side { margin-bottom: 14px; }
.fx-info-side:last-child { margin-bottom: 0; }
.fx-info-side__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
}

/* Lineup formation pill */
.lineup-side__formation {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--bg-subtle, #f1f5f9);
  color: var(--brand-primary, #4d8bff);
  vertical-align: middle;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .commentary-table th, .commentary-table td { padding: 8px 10px; font-size: 13px; }
  .commentary-table .commentary__min { width: 48px; }
  .fx-xg-strip { padding: 14px; gap: 12px; }
  .fx-xg-strip__num { font-size: 26px; }
  .fx-info-grid-wrap { grid-template-columns: 1fr; }
  .fx-info-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ── Player hero – detailed-position role line ───────────────────────── */
.player-hero__role {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary, #4f46e5);
}

/* ── Career teams (Clubs + National teams timeline) ──────────────────── */
.simosports-app .career-teams {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px 26px 22px;
  margin: 20px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.career-teams__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.career-teams__icon { font-size: 22px; }
.career-teams__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }

.career-teams__list { list-style: none; margin: 0; padding: 0; }
.career-teams__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.career-teams__item:last-child { border-bottom: 0; padding-bottom: 0; }
.career-teams__crest {
  width: 40px; height: 40px;
  object-fit: contain; flex-shrink: 0;
  background: var(--bg-subtle, #f4f6f8);
  border-radius: 6px; padding: 4px;
}
.career-teams__crest--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
.career-teams__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.career-teams__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--text-primary);
}
.career-teams__name { color: inherit; text-decoration: none; }
.career-teams__name:hover { color: var(--brand-primary, #4f46e5); }
.career-teams__pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.career-teams__pill--national {
  background: rgba(79, 70, 229, 0.14); color: #4338ca;
}
.career-teams__pill--captain {
  background: rgba(245, 158, 11, 0.18); color: #92400e;
}
.career-teams__meta {
  display: flex; gap: 12px;
  font-size: 12.5px; color: var(--text-secondary);
}
.career-teams__jersey {
  font-weight: 700; font-feature-settings: "tnum";
  color: var(--text-tertiary, #6b7280);
}

[data-theme="dark"] .career-teams__pill--national { background: rgba(99, 102, 241, 0.20); color: #a5b4fc; }
[data-theme="dark"] .career-teams__pill--captain  { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }

@media (max-width: 600px) {
  .simosports-app .career-teams { padding: 16px 14px 14px; border-radius: 12px; }
  .career-teams__crest { width: 32px; height: 32px; }
}

/* ── Timezone badge (visible on /live/ + match-detail pages) ───────────── */
.sm-tz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.18);
  color: var(--text-secondary, #475569);
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: help;
  vertical-align: middle;
}
.sm-tz-badge svg { color: var(--brand-primary, #4f46e5); flex-shrink: 0; }
.sm-tz-badge strong { color: var(--text-primary, #1a202c); font-weight: 700; }

/* On the .fx-tabs container the badge sits above the tab nav, neatly */
.fx-tabs .sm-tz-badge { margin-bottom: 8px; }

@media (max-width: 600px) {
  .sm-tz-badge { font-size: 11px; padding: 3px 9px; }
}

/* ── Potential outcome strip (above the fixture tabs) ───────────────────── */
.fx-prediction-strip { margin: 18px auto 6px; }
.potential {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(16,185,129,0.04));
  border: 1px solid rgba(79,70,229,0.18);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.potential__row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.potential__lead {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
.potential__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted, #64748b);
}
.potential__pick {
  font-weight: 700; font-size: 16px;
  color: var(--text-primary, #0f172a);
}
.potential__pick--home { color: #2563eb; }
.potential__pick--draw { color: #6b7280; }
.potential__pick--away { color: #ea580c; }
.potential__conf {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.01em;
}
.potential__conf--low  { background: #f3f4f6; color: #4b5563; }
.potential__conf--med  { background: #dbeafe; color: #1e40af; }
.potential__conf--high { background: #dcfce7; color: #166534; }
.potential__score {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}
.potential__score-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted, #64748b); font-weight: 700;
}
.potential__score-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px; font-weight: 700; color: var(--text-primary, #0f172a);
}
.potential__verdict {
  font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px;
}
.potential__verdict--hit  { background: #dcfce7; color: #166534; }
.potential__verdict--miss { background: #fee2e2; color: #991b1b; }
.potential__signals {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.potential__signal {
  font-size: 13px; color: var(--text-secondary, #475569);
  background: rgba(255,255,255,0.6);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .potential,
.dark .potential {
  background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(16,185,129,0.08));
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .potential__pick,
.dark .potential__pick { color: #f1f5f9; }
[data-theme="dark"] .potential__score,
.dark .potential__score { background: rgba(15,23,42,0.55); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .potential__score-val,
.dark .potential__score-val { color: #f1f5f9; }
[data-theme="dark"] .potential__signal,
.dark .potential__signal { background: rgba(15,23,42,0.5); color: #cbd5e1; border-color: rgba(255,255,255,0.06); }

@media (max-width: 600px) {
  .potential { padding: 12px 14px; }
  .potential__pick { font-size: 15px; }
  .potential__score-val { font-size: 16px; }
}

/* ── Predictions tab – fixture detail page ──────────────────────────── */
.pred {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 24px;
}
.pred-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pred-hero__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-elevated, #fff), color-mix(in srgb, var(--brand-primary, #00d68f) 4%, var(--bg-elevated, #fff)));
  border: 1px solid var(--border-subtle, #e4e7ec);
  text-align: center;
}
.pred-hero__cell--home  { border-color: rgba(34, 197, 94, 0.4); background: linear-gradient(135deg, var(--bg-elevated, #fff), rgba(34, 197, 94, 0.08)); }
.pred-hero__cell--draw  { border-color: rgba(234, 179, 8, 0.4);  background: linear-gradient(135deg, var(--bg-elevated, #fff), rgba(234, 179, 8, 0.08)); }
.pred-hero__cell--away  { border-color: rgba(239, 68, 68, 0.4);  background: linear-gradient(135deg, var(--bg-elevated, #fff), rgba(239, 68, 68, 0.08)); }
.pred-hero__cell--score { border-color: rgba(0, 214, 143, 0.4);  background: linear-gradient(135deg, var(--bg-elevated, #fff), rgba(0, 214, 143, 0.08)); }
.pred-hero__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  line-height: 1;
}
.pred-hero__val {
  font-family: var(--font-display, var(--font-body));
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pred-hero__val--score {
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--brand-primary, #00d68f);
}
.pred-hero__pct {
  font-family: var(--font-display, var(--font-body));
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
}
.pred-hero__cell--home  .pred-hero__pct { color: #22c55e; }
.pred-hero__cell--draw  .pred-hero__pct { color: #eab308; }
.pred-hero__cell--away  .pred-hero__pct { color: #ef4444; }

.pred-block {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  padding: 18px 20px;
}
.pred-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
}
.pred-block__head h3 {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.pred-block__hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}

.pred-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-subtle, #f4f6f8);
  margin-bottom: 12px;
}
.pred-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: width 0.4s ease;
  position: relative;
}
.pred-bar__seg--home { background: linear-gradient(135deg, #16a34a, #22c55e); }
.pred-bar__seg--draw { background: linear-gradient(135deg, #ca8a04, #eab308); color: #1a202c; }
.pred-bar__seg--away { background: linear-gradient(135deg, #dc2626, #ef4444); }
.pred-bar__pct {
  padding: 0 6px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.pred-bar__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary, #667085);
  font-weight: 600;
}
.pred-bar__leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pred-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.pred-bar__leg--home .pred-bar__dot { background: #22c55e; }
.pred-bar__leg--draw .pred-bar__dot { background: #eab308; }
.pred-bar__leg--away .pred-bar__dot { background: #ef4444; }

.pred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pred-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 16px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
}
.pred-mini__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  letter-spacing: -0.005em;
}

.pred-donut {
  --p: 50;
  --size: 110px;
  --thickness: 12px;
  --c: #22c55e;
  --c-track: var(--bg-subtle, #f4f6f8);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--c-track) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  font-family: var(--font-display, var(--font-body));
}
.pred-donut::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  background: var(--bg-elevated, #fff);
  border-radius: 50%;
}
.pred-donut__num {
  position: relative;
  font-size: 26px;
  font-weight: 800;
  color: var(--c);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pred-donut__lbl {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, #5e6678);
  margin-top: 2px;
}
.pred-donut--alt { --c: #3b82f6; }

.pred-mini__split {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary, #667085);
}
.pred-mini__yes strong,
.pred-mini__no  strong { color: var(--text-primary, #1a202c); }

.pred-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-subtle, #f4f6f8);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-secondary, #667085);
}
.pred-footer svg { flex: 0 0 14px; opacity: 0.6; }

/* Potential outcome – top-of-tab one-glance verdict.
   Tinted left border keys to the favoured side (home/draw/away). */
.pred-potential {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-left: 3px solid var(--text-tertiary, #5e6678);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), var(--bg-subtle, #f4f6f8));
}
.pred-potential--home { border-left-color: #22c55e; }
.pred-potential--draw { border-left-color: #eab308; }
.pred-potential--away { border-left-color: #ef4444; }

.pred-potential__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pred-potential__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.pred-potential__pick {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
}
.pred-potential__conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-primary, #1a202c);
}
.pred-potential__conf--med  { background: rgba(234, 179, 8, 0.18); color: #92400e; }
.pred-potential__conf--high { background: rgba(34, 197, 94, 0.18); color: #166534; }

.pred-potential__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pred-potential__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--bg-base, #ffffff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  color: var(--text-secondary, #667085);
  font-variant-numeric: tabular-nums;
}
.pred-potential__chip strong { color: var(--text-primary, #1a202c); font-weight: 700; }
.pred-potential__chip--score { border-color: rgba(34, 197, 94, 0.4); }

[data-theme="dark"] .pred-potential {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .pred-potential__chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pred-potential__conf--med  { color: #fbbf24; background: rgba(234, 179, 8, 0.15); }
[data-theme="dark"] .pred-potential__conf--high { color: #4ade80; background: rgba(34, 197, 94, 0.15); }

.pred-accuracy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
}
.pred-accuracy__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pred-accuracy__title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary, #667085);
}
.pred-accuracy__sample {
  font-size: 12px;
  color: var(--text-tertiary, #5e6678);
  font-variant-numeric: tabular-nums;
}
.pred-accuracy__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pred-accuracy__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--bg-base, #ffffff);
  border-radius: 8px;
}
.pred-accuracy__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #5e6678);
}
.pred-accuracy__val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .pred-accuracy { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pred-accuracy__cell { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 600px) {
  .pred-accuracy__row { grid-template-columns: 1fr; }
}

.pred-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  border: 1px dashed var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  text-align: center;
  color: var(--text-secondary, #667085);
}
.pred-empty svg     { color: var(--text-tertiary, #5e6678); }
.pred-empty p       { margin: 0; font-size: 14px; }
.pred-empty__sub    { color: var(--text-tertiary, #5e6678); max-width: 420px; }

/* Detailed empty state – used when we know *why* (far-future kick-off,
   missing history, paid-only). Friendlier than the bare placeholder. */
.pred-empty--detailed {
  padding: 36px 28px;
  gap: 14px;
  border-style: solid;
  background: linear-gradient(180deg, var(--bg-base, #ffffff) 0%, var(--bg-subtle, #f4f6f8) 100%);
}
.pred-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  margin-bottom: 4px;
}
.pred-empty__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a202c);
}
.pred-empty__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pred-empty__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pred-empty__badge--time {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.pred-empty__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent, #00a86b);
  color: #ffffff;
  text-decoration: none;
}
.pred-empty__cta:hover { filter: brightness(1.08); }
.pred-empty__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 18px;
  margin: 4px 0 0;
  padding: 14px 18px;
  background: var(--bg-base, #ffffff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  text-align: left;
}
.pred-empty__meta > div { display: flex; flex-direction: column; gap: 2px; }
.pred-empty__meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #5e6678);
  margin: 0;
  font-weight: 600;
}
.pred-empty__meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  font-variant-numeric: tabular-nums;
}
.pred-empty__tag {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.pred-empty__tag strong { color: var(--text-secondary, #667085); }

[data-theme="dark"] .pred-empty--detailed {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .pred-empty__icon { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .pred-empty__meta { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .pred-empty__badge--time { background: rgba(34,197,94,0.18); color: #4ade80; }

[data-theme="dark"] .pred-block,
[data-theme="dark"] .pred-mini,
[data-theme="dark"] .pred-hero__cell { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pred-bar { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .pred-footer { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .pred-donut::before { background: var(--bg-base, #0a0e1a); }
[data-theme="dark"] .pred-hero__cell--home  { background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(34, 197, 94, 0.12)); }
[data-theme="dark"] .pred-hero__cell--draw  { background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(234, 179, 8, 0.12)); }
[data-theme="dark"] .pred-hero__cell--away  { background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(239, 68, 68, 0.12)); }
[data-theme="dark"] .pred-hero__cell--score { background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0, 214, 143, 0.12)); }

@media (max-width: 600px) {
  .pred-hero { grid-template-columns: 1fr; }
  .pred-grid { grid-template-columns: 1fr; }
  .pred-hero__val { font-size: 19px; }
  .pred-hero__val--score { font-size: 36px; }
  .pred-hero__pct { font-size: 28px; }
  .pred-bar { height: 32px; }
  .pred-bar__pct { font-size: 12px; }
  .pred-donut { --size: 96px; --thickness: 10px; }
  .pred-donut__num { font-size: 22px; }
}

/* ── Form & H2H tab ─────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 20px;
}
.form-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  padding: 14px 16px;
}
.form-card__head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px;
  color: var(--text-primary, #1a202c);
  margin-bottom: 10px;
}
.form-card__crest { width: 22px; height: 22px; object-fit: contain; }
.form-card__pills {
  display: flex; gap: 6px; margin: 6px 0 12px;
}
.form-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff;
}
.form-pill--W { background: #00b86b; }
.form-pill--D { background: #94a3b8; }
.form-pill--L { background: #ef4444; }
.form-rows {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 78px 22px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-top: 1px dashed var(--border-subtle, #e4e7ec);
}
.form-row:first-child { border-top: 0; }
.form-row__date  { color: var(--text-tertiary, #5e6678); font-size: 12px; }
.form-row__venue { color: var(--text-secondary, #667085); font-weight: 700; text-align: center; }
.form-row__opp   { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.form-row__opp-name { color: var(--text-primary, #1a202c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-row__crest { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.form-row__score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary, #1a202c); }
.form-row__result { width: 24px; height: 22px; min-width: 24px; }

/* H2H block */
.h2h-block { margin-top: 8px; }
.form-section__heading {
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800;
  margin: 0 0 12px;
  color: var(--text-primary, #1a202c);
}
.h2h-tally {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 12px;
}
.h2h-tally__cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px;
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
.h2h-tally__num {
  font-family: var(--font-display, inherit);
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
}
.h2h-tally__lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678); text-align: center;
}
.h2h-tally__cell--home { border-color: rgba(59,130,246,0.4); }
.h2h-tally__cell--home .h2h-tally__num { color: var(--brand-primary, #3b82f6); }
.h2h-tally__cell--draw { border-color: rgba(148,163,184,0.5); }
.h2h-tally__cell--away { border-color: rgba(239,68,68,0.4); }
.h2h-tally__cell--away .h2h-tally__num { color: #ef4444; }

.h2h-bar {
  display: flex; height: 10px;
  border-radius: 999px; overflow: hidden;
  background: var(--bg-subtle, #f1f5f9);
  margin-bottom: 16px;
}
.h2h-bar__seg { display: block; height: 100%; transition: width 0.3s ease; }
.h2h-bar__seg--home { background: var(--brand-primary, #3b82f6); }
.h2h-bar__seg--draw { background: #94a3b8; }
.h2h-bar__seg--away { background: #ef4444; }

.h2h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.h2h-table th, .h2h-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.h2h-table th {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary, #5e6678);
}
.h2h-table__date    { color: var(--text-tertiary, #5e6678); font-size: 12px; white-space: nowrap; }
.h2h-table__home    { text-align: right; }
.h2h-table__home img,
.h2h-table__away img { vertical-align: middle; }
.h2h-table__score   { text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.h2h-table__league  { color: var(--text-tertiary, #5e6678); font-size: 12px; }

@media (max-width: 600px) {
  .form-row { grid-template-columns: 64px 18px 1fr auto auto; gap: 6px; font-size: 12px; }
  .h2h-tally__num { font-size: 22px; }
  .h2h-table__league { display: none; }
}

/* ── Per-match stat bars (Stats tab) ────────────────────────────────────── */
.fx-stats-wrap { margin-top: 12px; }
.fx-stat-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  padding: 10px 4px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.fx-stat-header .fx-stat-team { color: var(--text-primary, #1a202c); font-size: 14px; letter-spacing: -0.01em; text-transform: none; font-weight: 700; }
.fx-stat-header .fx-stat-team--away { text-align: right; }
.fx-stat-group {
  margin: 16px 0 4px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--brand-primary, #3b82f6);
}
.fx-stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--border-subtle, #e4e7ec);
  position: relative;
}
.fx-stat-row:first-of-type,
.fx-stat-group + .fx-stat-row { border-top: 0; }
.fx-stat-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 15px;
  color: var(--text-primary, #1a202c);
}
.fx-stat-val--home { text-align: left; }
.fx-stat-val--away { text-align: right; }
.fx-stat-lbl {
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary, #667085);
  text-align: center;
}
.fx-stat-bars {
  grid-column: 1 / -1;
  display: flex; align-items: stretch;
  height: 6px;
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.fx-stat-bars__home,
.fx-stat-bars__away {
  display: block;
  height: 100%;
  transition: width 0.35s ease;
}
.fx-stat-bars__home {
  background: var(--brand-primary, #3b82f6);
  border-radius: 999px 0 0 999px;
}
.fx-stat-bars__away {
  background: #ef4444;
  border-radius: 0 999px 999px 0;
  margin-left: auto;
}

/* ── Venue card in Match Info ───────────────────────────────────────────── */
.fx-venue-card { padding-bottom: 16px; }
.fx-venue__photo {
  display: block; width: 100%; height: auto; max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 12px;
}
.fx-venue__name {
  font-family: var(--font-display, inherit);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
  margin-bottom: 10px;
}
.fx-venue__photo-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fx-venue__photo-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.fx-venue__name-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.2s ease;
}
.fx-venue__name-link:hover,
.fx-venue__name-link:focus-visible { background-size: 100% 1px; }

/* ── Predictions: outcome verdicts (finished matches) ───────────────────── */
.pred-result {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-elevated, #fff);
}
.pred-result--win  { border-color: rgba(0,184,107,0.45); background: linear-gradient(180deg, rgba(0,184,107,0.07), transparent); }
.pred-result--loss { border-color: rgba(239,68,68,0.45); background: linear-gradient(180deg, rgba(239,68,68,0.07), transparent); }

.pred-result__head { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pred-result__lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.pred-result__score {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
}
.pred-result__outcome {
  font-size: 14px; font-weight: 700;
  color: var(--text-secondary, #667085);
}
.pred-result__verdict { font-size: 13px; }

.pred-verdict {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em;
}
.pred-verdict--win  { background: #00b86b; color: #fff; }
.pred-verdict--loss { background: #ef4444; color: #fff; }

.pred-hero__verdict { margin-top: 6px; }
.pred-hero__cell--win  { box-shadow: inset 0 0 0 2px rgba(0,184,107,0.45); }
.pred-hero__cell--loss { box-shadow: inset 0 0 0 2px rgba(239,68,68,0.45); }

.pred-mini--win  { box-shadow: inset 0 0 0 2px rgba(0,184,107,0.35); }
.pred-mini--loss { box-shadow: inset 0 0 0 2px rgba(239,68,68,0.35); }
.pred-mini__head { display: flex; align-items: center; gap: 8px; }
.pred-mini__actual {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary, #5e6678);
}
.pred-mini__actual strong { color: var(--text-primary, #1a202c); font-weight: 700; }

/* ── Standings tab inside fixture detail ───────────────────────────────── */
.fx-stand__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 14px;
  font-size: 13px;
}
.fx-stand__logo { width: 20px; height: 20px; object-fit: contain; }
.fx-stand__league { font-weight: 800; color: var(--text-primary, #1a202c); }
.fx-stand__hint   { color: var(--text-tertiary, #5e6678); font-size: 12px; }

.fx-stand__group-head {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-primary, #3b82f6);
  margin: 14px 0 6px;
}

.fx-stand {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fx-stand th, .fx-stand td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.fx-stand th {
  text-align: left;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary, #5e6678);
  background: var(--bg-subtle, #f8fafc);
}
.fx-stand__pos  { width: 32px; text-align: center; color: var(--text-tertiary, #5e6678); font-weight: 700; }
.fx-stand__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-stand__crest { flex-shrink: 0; }
.fx-stand__team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary, #1a202c); }
.fx-stand__num  { text-align: center; font-variant-numeric: tabular-nums; }
.fx-stand__num--pts { font-weight: 800; color: var(--text-primary, #1a202c); }
.fx-stand__form { white-space: nowrap; }
.fx-stand__form .form-pill { width: 18px; height: 18px; min-width: 18px; padding: 0; font-size: 10px; margin-right: 2px; border-radius: 4px; }

.fx-stand__row--home td { background: rgba(59, 130, 246, 0.08); }
.fx-stand__row--home td:first-child { box-shadow: inset 3px 0 0 var(--brand-primary, #3b82f6); }
.fx-stand__row--away td { background: rgba(239, 68, 68, 0.08); }
.fx-stand__row--away td:first-child { box-shadow: inset 3px 0 0 #ef4444; }

@media (max-width: 720px) {
  .fx-stand__num--hide-md { display: none; }
}
@media (max-width: 520px) {
  .fx-stand__num--hide-sm { display: none; }
  .fx-stand th, .fx-stand td { padding: 7px 6px; }
}

/* ── Homepage hero CTAs (live INSIDE the page-hero gradient panel) ─── */
.page-hero--home .page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 28px 0 0;
}
.page-hero--home .page-hero__ctas .btn--primary {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.page-hero--home .page-hero__ctas .btn--secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.page-hero--home .page-hero__ctas .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 600px) {
  .page-hero--home .page-hero__ctas { gap: 10px; padding: 0 16px; }
  .page-hero--home .page-hero__ctas .btn { flex: 1 1 auto; min-width: 140px; }
}

/* ── Top Scorers table ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  background: var(--bg-elevated, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  margin: 16px 0 32px;
}
/* ── Top-scorers league quick-pick ───────────────────────────────────────── */
/* A wrapping bar of league chips above the scorers table. Lets visitors pick a
   competition (links to /topscorers/?league=ID). Mirrors the match-page tab
   styling: rounded chips, brand-filled active state, even wrapping. */
.ts-leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.ts-leagues__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-page, #fff);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ts-leagues__logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}
.ts-leagues__chip:hover {
  background: var(--bg-surface, rgba(0,0,0,0.05));
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.ts-leagues__chip--active,
.ts-leagues__chip--active:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}
/* On the active (brand-filled) chip, give the crest a white plate so league
   logos with dark/transparent edges stay legible. */
.ts-leagues__chip--active .ts-leagues__logo {
  background: #fff;
  padding: 2px;
}
[data-theme="dark"] .ts-leagues__chip {
  background: transparent;
  color: rgba(255,255,255,0.92);
}

.scorers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  background: var(--bg-elevated, #fff);
}
.scorers-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-subtle, #f9fafb);
  white-space: nowrap;
}
.scorers-table thead th.scorers-table__num,
.scorers-table thead th.scorers-table__rank { text-align: center; }

.scorers-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  vertical-align: middle;
  font-size: 14px;
  color: var(--text-primary, #1a202c);
}
.scorers-table tbody tr:last-child td { border-bottom: none; }
.scorers-table__row { transition: background 0.15s; }
.scorers-table__row:hover { background: color-mix(in srgb, var(--brand-primary, #00d68f) 5%, var(--bg-elevated, #fff)); }

/* Rank column with medal-style badges for top 3. */
.scorers-table__rank { width: 56px; text-align: center; }
.scorers-table__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle, #f4f6f8);
  color: var(--text-secondary, #667085);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.scorers-table__rank-badge--gold   { background: linear-gradient(135deg, #ffd700, #f0a500); color: #fff; box-shadow: 0 1px 4px rgba(240, 165, 0, 0.4); }
.scorers-table__rank-badge--silver { background: linear-gradient(135deg, #d6d6d6, #9ca3af); color: #fff; box-shadow: 0 1px 4px rgba(156, 163, 175, 0.4); }
.scorers-table__rank-badge--bronze { background: linear-gradient(135deg, #d68a48, #a05a2c); color: #fff; box-shadow: 0 1px 4px rgba(160, 90, 44, 0.4); }

/* Player + team cells: full-row clickable links. */
.scorers-table__player { min-width: 220px; }
.scorers-table__player-link,
.scorers-table__team-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: color 0.15s;
}
.scorers-table__player-link:hover .scorers-table__player-name { color: var(--brand-primary, #00d68f); }
.scorers-table__team-link:hover span:last-child { color: var(--brand-primary, #00d68f); }
.scorers-table__player-link--inert,
.scorers-table__team-link--inert { cursor: default; }

.scorers-table__photo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
.scorers-table__photo--init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #fff;
}
.scorers-table__photo--init[data-tint="red"]    { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.scorers-table__photo--init[data-tint="blue"]   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.scorers-table__photo--init[data-tint="green"]  { background: linear-gradient(135deg, #22c55e, #15803d); }
.scorers-table__photo--init[data-tint="yellow"] { background: linear-gradient(135deg, #eab308, #a16207); color: #1a1a1a; }
.scorers-table__photo--init[data-tint="orange"] { background: linear-gradient(135deg, #f97316, #c2410c); }
.scorers-table__photo--init[data-tint="purple"] { background: linear-gradient(135deg, #a855f7, #7c2d92); }
.scorers-table__photo--init[data-tint="navy"]   { background: linear-gradient(135deg, #1e3a5f, #0f172a); }
.scorers-table__photo--init[data-tint="lime"]   { background: linear-gradient(135deg, #84cc16, #4d7c0f); }

.scorers-table__player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scorers-table__player-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text-primary, #1a202c);
  transition: color 0.15s;
}
.scorers-table__nat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #5e6678);
  text-transform: uppercase;
}

/* Team cell. */
.scorers-table__team { min-width: 160px; }
.scorers-table__team-link span:last-child {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary, #667085);
  transition: color 0.15s;
}
.scorers-table__team-link .score-card__crest {
  flex: 0 0 26px;
  width: 26px !important;
  height: 26px !important;
}
.scorers-table__team-link .score-card__crest img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
}

/* Numeric stat columns. */
.scorers-table__num {
  width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
}
.scorers-table__goals {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-primary, #00d68f);
}

/* Dark theme. */
[data-theme="dark"] .table-wrap {
  background: #0f1421;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
[data-theme="dark"] .scorers-table,
[data-theme="dark"] .scorers-table tbody td { background: transparent; color: rgba(255,255,255,0.92); }
[data-theme="dark"] .scorers-table thead th {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .scorers-table tbody td { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .scorers-table__row:hover { background: rgba(0, 214, 143, 0.08); }
[data-theme="dark"] .scorers-table__rank-badge { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
[data-theme="dark"] .scorers-table__photo { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }

@media (max-width: 720px) {
  .scorers-table thead th,
  .scorers-table tbody td { padding: 10px 10px; font-size: 13px; }
  .scorers-table__rank { width: 40px; }
  .scorers-table__rank-badge { width: 24px; height: 24px; font-size: 11px; }
  .scorers-table__player { min-width: 0; }
  .scorers-table__photo,
  .scorers-table__photo--init { width: 32px; height: 32px; flex-basis: 32px; }
  .scorers-table__nat { display: none; }
  .scorers-table__team-link span:last-child { display: none; }
  .scorers-table__num { width: 44px; font-size: 13px; }
  .scorers-table__goals { font-size: 15px; }
}

/* ── Match Info: Coaches card ──────────────────────────────────────────── */
.fx-coaches {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-top: 4px;
}
.fx-coach-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  text-align: center;
}
.fx-coach-cell__lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.fx-coach-cell__img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle, #e4e7ec);
}
.fx-coach-cell__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary, #3b82f6);
  color: #fff; font-weight: 800; font-size: 22px;
}
.fx-coach-cell__name {
  font-weight: 700; font-size: 14px;
  color: var(--text-primary, #1a202c);
}
.fx-coach-cell__country {
  font-size: 12px; color: var(--text-tertiary, #5e6678);
}
.fx-coach-cell--empty { justify-content: center; min-height: 120px; }

/* ── Lineup pitch: per-player rating chip ──────────────────────────────── */
.pitch-player__rating {
  position: absolute;
  right: -6px; top: -6px;
  min-width: 22px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: #94a3b8; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
.pitch-player__rating--gold  { background: #f59e0b; }
.pitch-player__rating--green { background: #00b86b; }
.pitch-player__rating--mid   { background: #94a3b8; }
.pitch-player__rating--low   { background: #ef4444; }
.pitch-player__shirt { position: relative; }

/* ── xG shot map ────────────────────────────────────────────────────────── */
.fx-shotmap { margin-top: 22px; }
.fx-shotmap__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elevated, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
.fx-shotmap__head h3 {
  margin: 0; font-size: 14px; font-weight: 800;
  color: var(--text-primary, #1a202c);
}
.fx-shotmap__legend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-secondary, #667085);
}
.xg-key {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  margin: 0 4px;
}
.xg-key--home { background: #3b82f6; }
.xg-key--away { background: #ef4444; }
.xg-key--goal { background: transparent; border: 2px solid #facc15; }
.fx-shotmap__pitch { border-radius: 0 0 12px 12px; }
.xg-shot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.xg-shot:hover { transform: translate(-50%, -50%) scale(1.4); z-index: 5; }
.xg-shot--home { background: rgba(59,130,246,0.55); }
.xg-shot--away { background: rgba(239,68,68,0.55); }
.xg-shot--goal { box-shadow: 0 0 0 3px #facc15, 0 2px 6px rgba(0,0,0,0.4); }
.fx-shotmap__foot {
  font-size: 12px; color: var(--text-tertiary, #5e6678);
  text-align: center;
  padding: 8px 14px;
}

/* ── /coaches/ archive grid ─────────────────────────────────────────────── */
.coaches-grid { padding: 32px 24px 64px; max-width: 1280px; margin: 0 auto; }
.coaches-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.coach-card {
  display: flex; gap: 12px; align-items: center;
  padding: 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.coach-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}
.coach-card__photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
}
.coach-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary, #3b82f6);
  color: #fff; font-weight: 800; font-size: 22px;
}
.coach-card__body { min-width: 0; flex: 1; }
.coach-card__name {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coach-card__nat {
  font-size: 12px; color: var(--text-tertiary, #5e6678);
  margin-bottom: 4px;
}
.coach-card__photo-link { display: block; flex: 0 0 auto; line-height: 0; border-radius: 50%; }
.coach-card__photo-link:focus-visible { outline: 2px solid var(--brand-primary, #3b82f6); outline-offset: 2px; }
.coach-card__name-link { color: inherit; text-decoration: none; }
.coach-card__name-link:hover { color: var(--brand-primary, #3b82f6); }
.coach-card:hover .coach-card__name-link { color: var(--brand-primary, #3b82f6); }
.coach-card__team {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary, #667085);
}
.coach-card__team a { color: inherit; text-decoration: none; font-weight: 600; }
.coach-card__team a:hover { color: var(--brand-primary, #3b82f6); }

/* ── Fixture: Coaches tab ──────────────────────────────────────────────── */
.fx-coach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 8px 0 4px;
}
.fx-coach-card {
  display: block;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fx-coach-card--linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  border-color: var(--brand-primary, #3b82f6);
}
.fx-coach-card__team {
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  margin-bottom: 14px;
}
.fx-coach-card__body { display: flex; align-items: center; gap: 14px; }
.fx-coach-card__photo {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
}
.fx-coach-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff; font-weight: 800; font-size: 26px;
  letter-spacing: 0.04em;
}
.fx-coach-card__role {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-primary, #3b82f6);
  margin-bottom: 4px;
}
.fx-coach-card__name {
  font-family: var(--font-display, inherit);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
  line-height: 1.15;
}
.fx-coach-card--linked:hover .fx-coach-card__name { color: var(--brand-primary, #3b82f6); }
.fx-coach-card__country {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary, #667085);
}
.fx-coach-card--empty .fx-coach-card__name { color: var(--text-tertiary, #5e6678); font-size: 16px; }
@media (max-width: 600px) {
  .fx-coach-grid { grid-template-columns: 1fr; }
  .fx-coach-card__photo { width: 64px; height: 64px; }
  .fx-coach-card__name  { font-size: 18px; }
}

/* ── /coach/{slug}/ detail page ─────────────────────────────────────────── */
.coach-detail { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }
.coach-detail__hero {
  display: flex; align-items: center; gap: 22px;
  padding: 24px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 16px;
}
.coach-detail__photo {
  width: 128px; height: 128px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
}
.coach-detail__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff; font-weight: 800; font-size: 38px;
  letter-spacing: 0.04em;
}
.coach-detail__name {
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900; letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.coach-detail__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--text-secondary, #667085); }
.coach-detail__meta span strong { color: var(--text-primary, #1a202c); }
.coach-detail__section { margin-top: 28px; }
.coach-detail__section h2 {
  font-family: var(--font-display, inherit);
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 14px;
}
@media (max-width: 600px) {
  .coach-detail__hero { flex-direction: column; text-align: center; }
}

/* ── Team season-form strip (sm_team_detail) ───────────────────────────── */
.team-season-form { margin: 24px auto; }
.team-season-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.team-season-form__tile {
  background: linear-gradient(180deg, #1c2331 0%, #131826 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.team-season-form__num {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.team-season-form__lbl {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Team of the Week pitch ────────────────────────────────────────────── */
.team-of-the-week { margin: 32px auto; }
.team-of-the-week .lineup-pitch-wrap { max-width: 720px; margin: 0 auto; }

/* ── H2H rivalry pill ──────────────────────────────────────────────────── */
.h2h-rivalry {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #c0152a 0%, #1a1a1a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(192,21,42,.25);
}

/* ── Team page: form pills strip (W/D/L last 5) ────────────────────────── */
.team-form-strip {
  margin-top: -32px; margin-bottom: 24px;
  position: relative; z-index: 2;
}
.team-form-strip__inner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.10);
  max-width: 560px;
  margin: 0 auto;
}
.team-form-strip__lbl {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  flex-shrink: 0;
}
.team-form-strip__pills { display: inline-flex; gap: 6px; flex: 1; }
.team-form-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff;
}
.team-form-pill--W { background: #00b86b; }
.team-form-pill--D { background: #94a3b8; }
.team-form-pill--L { background: #ef4444; }
.team-form-pill__wrap { text-decoration: none; }
.team-form-pill__wrap:hover .team-form-pill { transform: translateY(-1px); transition: transform 0.15s; }
.team-form-strip__tally {
  display: inline-flex; gap: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  flex-shrink: 0;
}
.team-form-strip__tally strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  font-weight: 800;
}
.team-form-strip__tally-w { background: rgba(0,184,107,0.14); color: #00874f; }
.team-form-strip__tally-d { background: rgba(148,163,184,0.20); color: #475569; }
.team-form-strip__tally-l { background: rgba(239,68,68,0.14); color: #b91c1c; }
@media (max-width: 600px) {
  .team-form-strip { margin-top: -16px; }
  .team-form-strip__inner { gap: 10px; padding: 10px 14px; }
  .team-form-strip__lbl, .team-form-strip__tally { font-size: 11px; }
  .team-form-pill { width: 24px; height: 24px; font-size: 11px; }
}

/* ── Coach page: career stats grid + bar ───────────────────────────────── */
.coach-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.coach-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
}
.coach-stat__num {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary, #1a202c);
  font-variant-numeric: tabular-nums;
}
.coach-stat__lbl {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
  text-align: center;
}
.coach-stat--win  { border-color: rgba(0,184,107,0.40); }
.coach-stat--win  .coach-stat__num { color: #00874f; }
.coach-stat--draw { border-color: rgba(148,163,184,0.50); }
.coach-stat--loss { border-color: rgba(239,68,68,0.40); }
.coach-stat--loss .coach-stat__num { color: #b91c1c; }
.coach-stats__bar {
  display: flex; height: 10px;
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 999px; overflow: hidden;
}
.coach-stats__bar-seg { display: block; height: 100%; }
.coach-stats__bar-seg--win  { background: #00b86b; }
.coach-stats__bar-seg--draw { background: #94a3b8; }
.coach-stats__bar-seg--loss { background: #ef4444; }

.coach-detail__intro {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--bg-elevated, #fff);
  border-left: 4px solid var(--brand-primary, #3b82f6);
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #667085);
}
.coach-detail__intro p { margin: 0; }
.coach-detail__intro strong { color: var(--text-primary, #1a202c); }
.coach-detail__intro a { color: var(--brand-primary, #3b82f6); text-decoration: none; }
.coach-detail__intro a:hover { text-decoration: underline; }

/* ── Coach page: coaching career timeline ──────────────────────────────── */
.coach-career { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.coach-career__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
}
.coach-career__item--active { border-color: var(--brand-primary, #3b82f6); box-shadow: 0 4px 14px rgba(59,130,246,0.10); }
.coach-career__logo {
  width: 34px; height: 34px; flex-shrink: 0;
  object-fit: contain; border-radius: 8px;
}
.coach-career__logo--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle, #f1f5f9);
  color: var(--text-secondary, #667085);
  font-weight: 800; font-size: 14px;
}
.coach-career__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-career__club {
  font-family: var(--font-display, inherit);
  font-size: 15px; font-weight: 700;
  color: var(--text-primary, #1a202c);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.coach-career__club a { color: inherit; text-decoration: none; }
.coach-career__club a:hover { color: var(--brand-primary, #3b82f6); }
.coach-career__badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--brand-primary, #3b82f6);
  padding: 2px 8px; border-radius: 999px;
}
.coach-career__period { font-size: 13px; color: var(--text-secondary, #667085); }

/* ── Coach page: prev / next navigation ────────────────────────────────── */
.coach-nav { max-width: 960px; margin: 32px auto 56px; padding: 0 24px; }
.coach-nav__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.coach-nav__card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 72px;
}
.coach-nav__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15,23,42,0.10);
  border-color: var(--brand-primary, #3b82f6);
}
.coach-nav__card--next { justify-content: flex-end; text-align: right; }
.coach-nav__card--empty {
  flex-direction: column; align-items: flex-start;
  background: var(--bg-subtle, #f8fafc);
  border-style: dashed;
  color: var(--text-tertiary, #5e6678);
  pointer-events: none;
  cursor: default;
  gap: 4px;
  justify-content: center;
}
.coach-nav__card--empty.coach-nav__card--next { align-items: flex-end; text-align: right; }

.coach-nav__photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-subtle, #e4e7ec);
  flex-shrink: 0;
}
.coach-nav__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff; font-weight: 800; font-size: 18px;
}

.coach-nav__body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.coach-nav__card--next .coach-nav__body { align-items: flex-end; }

.coach-nav__direction {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary, #5e6678);
}
.coach-nav__name {
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800;
  color: var(--text-primary, #1a202c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.coach-nav__card:hover .coach-nav__name { color: var(--brand-primary, #3b82f6); }

.coach-nav__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle, #f1f5f9);
  font-size: 16px; font-weight: 800;
  color: var(--brand-primary, #3b82f6);
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.coach-nav__card:hover .coach-nav__arrow {
  background: var(--brand-primary, #3b82f6);
  color: #fff;
  transform: scale(1.1);
}

.coach-nav__empty {
  font-size: 13px; font-style: italic;
  color: var(--text-tertiary, #5e6678);
}

.coach-nav__hub-row {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.coach-nav__hub {
  color: var(--text-secondary, #667085);
  text-decoration: none;
  font-weight: 600;
}
.coach-nav__hub:hover { color: var(--brand-primary, #3b82f6); }
.coach-nav__sep { color: var(--text-tertiary, #5e6678); }

@media (max-width: 600px) {
  .coach-nav__row { grid-template-columns: 1fr; }
  .coach-nav__card { padding: 12px 14px; }
  .coach-nav__name { font-size: 14px; }
}

/* ── Registration page ──────────────────────────────────────────────────── */
.register-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}
.register-grid {
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .register-grid { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 72px; }
}

/* LEFT — pitch */
.register-pitch__eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.register-pitch__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.register-pitch__title-accent {
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.register-pitch__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 28px;
}
.register-pitch__bullets {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
}
.register-pitch__bullets li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--text-primary);
}
.register-pitch__check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: #dcfce7; color: #15803d;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.register-pitch__proof {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: 12px;
  max-width: 420px;
}
.register-pitch__avatars { display: inline-flex; }
.register-pitch__avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  margin-left: -8px;
  border: 2px solid var(--bg-elevated);
}
.register-pitch__avatar:first-child { margin-left: 0; }
.register-pitch__proof-text {
  font-size: 14px; color: var(--text-secondary);
}
.register-pitch__proof-text strong {
  color: var(--text-primary); font-weight: 700;
}

/* RIGHT — card */
.register-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.register-card__title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.register-card__sub {
  font-size: 14px; color: var(--text-secondary);
  margin: 0 0 24px;
}
.register-card__google {
  display: flex; justify-content: center;
  margin: 0 0 18px;
  min-height: 44px;
}
.register-card__google.is-busy { opacity: 0.5; pointer-events: none; }
.register-card__google-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.register-card__google-hint {
  font-size: 12px; color: var(--text-tertiary);
  margin: 8px 0 16px;
  text-align: center;
}
.register-card__google-hint code {
  background: var(--bg-subtle);
  padding: 1px 6px; border-radius: 4px;
  font-size: 11.5px;
}
.register-card__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: var(--text-tertiary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.register-card__divider::before,
.register-card__divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-subtle);
}
.register-form { display: grid; gap: 14px; margin: 0 0 18px; }
.register-form__field { display: grid; gap: 6px; }
.register-form__lbl {
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.register-form__field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.register-form__field input:focus {
  outline: none;
  border-color: var(--brand-primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
.register-form__submit { width: 100%; }
.register-card__signin {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 22px;
}
.register-card__signin a {
  color: var(--brand-primary, #4f46e5);
  font-weight: 600;
  text-decoration: none;
}
.register-card__signin a:hover { text-decoration: underline; }
.register-card__trust {
  list-style: none; padding: 16px 0 0; margin: 0;
  border-top: 1px dashed var(--border-subtle);
  display: grid; gap: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Dark mode */
[data-theme="dark"] .register-pitch__eyebrow,
.dark .register-pitch__eyebrow { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
[data-theme="dark"] .register-pitch__check,
.dark .register-pitch__check { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
[data-theme="dark"] .register-card,
.dark .register-card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .register-shell { padding: 32px 16px 48px; }
  .register-card { padding: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   How it works
   Three numbered cards on the homepage. Designed to feel like product
   marketing without leaning on stock illustrations: oversized gradient
   step number anchors each card, a small SVG icon doubles as a visual
   beat, and a connector dot-rail runs between cards on desktop only.
   ────────────────────────────────────────────────────────────────────── */
.how-it-works {
  position: relative;
  padding: 72px 0 88px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 168, 107, 0.08), transparent 45%),
    radial-gradient(circle at 88% 100%, rgba(99, 102, 241, 0.06), transparent 45%),
    var(--bg-base, #ffffff);
  overflow: hidden;
}

.hiw-hdr {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.hiw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 168, 107, 0.10);
  color: var(--accent, #00a86b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hiw-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.18);
  animation: hiw-pulse 2s ease-in-out infinite;
}
@keyframes hiw-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 168, 107, 0.05); }
}
.hiw-title {
  margin: 18px 0 14px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary, #0a0e1a);
}
.hiw-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary, #667085);
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hiw;
  position: relative;
}

/* Connector rail behind the cards on desktop only. Sits at the vertical
   midline of the icon row so the dotted line visually threads each card. */
.hiw-grid::before {
  content: "";
  position: absolute;
  top: 76px;
  left: 12%;
  right: 12%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--border-subtle, #e4e7ec) 50%, transparent 50%);
  background-size: 12px 2px;
  z-index: 0;
  pointer-events: none;
}

.hiw-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 26px;
  background: var(--bg-base, #ffffff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hiw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 168, 107, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.hiw-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hiw-card__num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #00a86b 0%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hiw-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 168, 107, 0.10);
  color: var(--accent, #00a86b);
}

.hiw-card__title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0a0e1a);
}
.hiw-card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #667085);
  flex: 1;
}
.hiw-card__body a {
  /* Darker green than the brand accent (#00a86b → 3.08:1 on white, fails WCAG
     AA). #008055 hits 4.98:1 on the light card. Dark theme keeps the brighter
     accent below (it already clears AA on the dark background). */
  color: #008055;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
[data-theme="dark"] .hiw-card__body a {
  color: var(--accent, #00a86b);
}

.hiw-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0a0e1a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: gap 0.2s ease, color 0.2s ease;
}
.hiw-card__cta svg { transition: transform 0.2s ease; }
.hiw-card__cta:hover {
  color: var(--accent, #00a86b);
  gap: 10px;
}
.hiw-card__cta:hover svg { transform: translateX(2px); }

/* Dark theme */
[data-theme="dark"] .how-it-works {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 168, 107, 0.10), transparent 45%),
    radial-gradient(circle at 88% 100%, rgba(99, 102, 241, 0.10), transparent 45%),
    var(--bg-base, #0a0e1a);
}
[data-theme="dark"] .hiw-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
[data-theme="dark"] .hiw-card:hover {
  border-color: rgba(0, 168, 107, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .hiw-card__icon  { background: rgba(0, 168, 107, 0.18); }
[data-theme="dark"] .hiw-card__cta   { color: var(--text-primary, #f9fafb); }
[data-theme="dark"] .hiw-grid::before {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.10) 50%, transparent 50%);
}

/* Responsive */
@media (max-width: 960px) {
  .hiw-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 520px;
    margin: 0 auto;
  }
  .hiw-grid::before { display: none; }
  .hiw-card { padding: 24px; }
  .hiw-card__num { font-size: 44px; }
}
@media (max-width: 600px) {
  .how-it-works { padding: 56px 0 64px; }
  .hiw-hdr { margin-bottom: 36px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Header CTA: swap between "Start free" (guests) and "My account" (signed
   in). WordPress auto-adds `logged-in` to <body> for authenticated users,
   so we toggle the two anchors purely with CSS, server-rendered, with no
   flash of the wrong button on first paint.
   ────────────────────────────────────────────────────────────────────── */
.site-header__cta--user,
.site-drawer__cta--user   { display: none; }
body.logged-in .site-header__cta--guest,
body.logged-in .site-drawer__cta--guest { display: none; }
body.logged-in .site-header__cta--user,
body.logged-in .site-drawer__cta--user  { display: inline-flex; align-items: center; gap: 6px; }

/* Statistical-insight panel inside the Predictions tab. Surfaced under the
   pick-consistent hero when the global most-likely scoreline differs from
   it. Frames the Poisson-grid quirk as a fun fact rather than a contradiction. */
.pred-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-top: -4px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #667085);
}
.pred-insight__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}
.pred-insight__body { flex: 1; }
.pred-insight__body strong { color: var(--text-primary, #1a202c); }
.pred-insight__score {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(99, 102, 241, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}
[data-theme="dark"] .pred-insight {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(99, 102, 241, 0.28);
}
[data-theme="dark"] .pred-insight__icon { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; }
[data-theme="dark"] .pred-insight__score { background: rgba(99, 102, 241, 0.20); }


/* =====================================================================
   Predictions methodology page
   ===================================================================== */
.methodology { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; line-height: 1.65; }
.methodology__toc {
  position: sticky; top: 80px;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px; margin-bottom: 32px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  font-size: 13px;
  box-shadow: var(--sh-1, 0 1px 2px rgba(0,0,0,0.06));
  z-index: 5;
}
.methodology__toc a {
  color: var(--text-secondary); text-decoration: none;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  white-space: nowrap;
}
.methodology__toc a:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.methodology__section { margin: 0 0 40px; scroll-margin-top: 90px; }
.methodology__section h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-subtle);
}
.methodology__section h3 { font-size: 18px; font-weight: 700; margin: 20px 0 8px; }
.methodology__section p, .methodology__section ul { margin: 0 0 14px; color: var(--text-primary); }
.methodology__section ul { padding-left: 22px; }
.methodology__section li { margin-bottom: 6px; }
.methodology__section code {
  font-family: var(--font-mono, monospace); font-size: 0.92em;
  background: var(--bg-muted); padding: 1px 6px; border-radius: 4px;
}

/* Track-record table */
.methodology-track { margin: 12px 0 8px; }
.methodology-track__meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--text-tertiary);
  margin-bottom: 12px;
}
.methodology-track__sample strong { color: var(--brand-primary); font-size: 18px; }
.methodology-track__table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle); border-radius: 10px;
  overflow: hidden;
}
.methodology-track__table th, .methodology-track__table td {
  padding: 10px 12px; text-align: right;
  border-bottom: 1px solid var(--border-subtle);
}
.methodology-track__table thead th { background: var(--bg-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.methodology-track__table tbody th[scope="row"] { text-align: left; font-weight: 600; }
.methodology-track__table tbody tr:last-child th, .methodology-track__table tbody tr:last-child td { border-bottom: 0; }
.methodology-track__details { margin: 18px 0; padding: 14px 16px; background: var(--bg-muted); border-radius: 10px; }
.methodology-track__details summary { cursor: pointer; font-weight: 600; color: var(--brand-primary); }
.methodology-track__details ul { margin: 12px 0 0; }

/* Disclaimer block */
.methodology__section--disclaimer {
  padding: 20px 22px;
  background: var(--bg-muted);
  border-left: 4px solid var(--amber-500, #f59e0b);
  border-radius: 8px;
}
.methodology__section--disclaimer h2 { border-bottom: 0; padding-bottom: 0; }
.methodology__author { padding: 16px 18px; background: var(--bg-muted); border-radius: 10px; }
.methodology__author-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 12px; }
.methodology__source { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

/* CTA card on /predictions/ pointing to methodology */
.predictions-methodology-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin: 12px 0 20px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  font-size: 14px;
}
.predictions-methodology-cta strong { color: var(--text-primary); }
.predictions-methodology-cta a { color: var(--brand-primary); text-decoration: none; font-weight: 600; }
.predictions-methodology-cta a:hover { text-decoration: underline; }

/* Inline ticker on /match/ pages — tighter spacing than the homepage rail
   because it sits between the hero and the tab nav. */
.ticker--inline { margin: 8px 0 18px; padding: 14px 0 6px; }
.ticker--inline .ticker__head { margin-bottom: 10px; }
.ticker--inline .ticker__title { font-size: 14px; }
.ticker--inline .ticker__grid { gap: 10px; }

/* Variant of the inline ticker rendered AFTER the fx-tabs block. Needs more
   top spacing so it visually separates from the last tab panel, and a faint
   border-top so it reads as a distinct section rather than tab overflow. */
.ticker--after-tabs {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────
   Predictions hub (/predictions/)
   Date-grouped grid of pick-led prediction cards. Each card is a single
   anchor so the entire row is clickable, with a hover-lift micro-interaction
   and a tinted left rail keyed to the favoured 1X2 bucket.
   ────────────────────────────────────────────────────────────────────── */
.predictions-hub { display: flex; flex-direction: column; gap: 36px; }
.predictions-hub__loading,
.predictions-hub__empty,
.predictions-hub__error {
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  color: var(--text-secondary, #667085);
  font-size: 14px;
}

.predictions-hub__day { display: flex; flex-direction: column; gap: 14px; }
.predictions-hub__day-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.predictions-hub__day-title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0a0e1a);
}
.predictions-hub__day-count {
  font-size: 12px;
  color: var(--text-tertiary, #98a2b3);
  font-variant-numeric: tabular-nums;
}

.predictions-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.pred-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-base, #ffffff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-left: 3px solid var(--text-tertiary, #98a2b3);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pred-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.pred-row--home { border-left-color: #22c55e; }
.pred-row--draw { border-left-color: #eab308; }
.pred-row--away { border-left-color: #ef4444; }

.pred-row__head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-tertiary, #98a2b3);
}
.pred-row__league { display: inline-flex; align-items: center; gap: 6px; }
.pred-row__league img { border-radius: 3px; }
.pred-row__kick { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary, #667085); }

.pred-row__teams {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #0a0e1a);
}
.pred-row__tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-row__tname--away { text-align: right; }
.pred-row__vs {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #98a2b3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pred-row__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.pred-row__pick-label { font-weight: 700; color: var(--text-primary, #0a0e1a); }
.pred-row__conf {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-primary, #0a0e1a);
}
.pred-row__conf--med  { background: rgba(234, 179, 8, 0.18); color: #92400e; }
.pred-row__conf--high { background: rgba(34, 197, 94, 0.18); color: #166534; }

.pred-row__bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-subtle, #f4f6f8);
}
.pred-row__bar-seg--home { background: #22c55e; }
.pred-row__bar-seg--draw { background: #eab308; }
.pred-row__bar-seg--away { background: #ef4444; }

.pred-row__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pred-row__chip {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  background: var(--bg-subtle, #f4f6f8);
  color: var(--text-secondary, #667085);
  font-variant-numeric: tabular-nums;
}
.pred-row__chip strong { color: var(--text-primary, #0a0e1a); font-weight: 700; }
.pred-row__chip--score { background: rgba(34, 197, 94, 0.10); color: #166534; }

[data-theme="dark"] .pred-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .pred-row:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .pred-row__bar  { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pred-row__chip { background: rgba(255, 255, 255, 0.05); color: #d1d5db; }
[data-theme="dark"] .pred-row__chip strong { color: #f9fafb; }
[data-theme="dark"] .pred-row__chip--score { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
[data-theme="dark"] .predictions-hub__day-hdr { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .pred-row__conf--med  { background: rgba(234, 179, 8, 0.18); color: #fbbf24; }
[data-theme="dark"] .pred-row__conf--high { background: rgba(34, 197, 94, 0.18); color: #4ade80; }

@media (max-width: 600px) {
  .predictions-hub__grid { grid-template-columns: 1fr; }
  .pred-row__teams       { font-size: 13px; }
}

/* ── Fixtures page: SEO upgrades (intro, pivot, FAQ, league anchors) ────── */
.page-list-intro {
  margin: 12px 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #667085);
  max-width: 760px;
}

.fixtures-pivot {
  display: flex; gap: 8px;
  margin: 0 0 22px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.fixtures-pivot__day {
  flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  text-decoration: none;
  color: inherit;
  min-width: 76px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.fixtures-pivot__day:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary, #3b82f6);
  box-shadow: 0 4px 12px rgba(59,130,246,0.10);
}
.fixtures-pivot__day-top {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #667085);
}
.fixtures-pivot__day-btm {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary, #1a202c);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fixtures-pivot__day--active {
  background: var(--brand-primary, #3b82f6);
  border-color: var(--brand-primary, #3b82f6);
}
.fixtures-pivot__day--active .fixtures-pivot__day-top,
.fixtures-pivot__day--active .fixtures-pivot__day-btm { color: #fff; }

/* Score-card: now an <article> with sub-links. Inner anchors need their own
   reset since we no longer wrap the whole card in a single <a>. */
article.score-card { cursor: default; }
article.score-card .score-card__team,
article.score-card .score-card__league,
article.score-card .score-card__match-link {
  color: inherit;
  text-decoration: none;
}
article.score-card a.score-card__team {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
article.score-card a.score-card__team:hover {
  background: rgba(59,130,246,0.06);
  color: var(--brand-primary, #3b82f6);
}
article.score-card a.score-card__league {
  cursor: pointer;
  transition: color 0.12s ease;
}
article.score-card a.score-card__league:hover {
  color: var(--brand-primary, #3b82f6);
}
article.score-card a.score-card__match-link {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease;
}
article.score-card a.score-card__match-link:hover {
  background: rgba(59,130,246,0.06);
}
article.score-card:hover {
  border-color: rgba(59,130,246,0.30);
}

/* Postponed / cancelled status label */
.score-card__status--off,
.score-card__time--off {
  color: #b91c1c;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Browse by competition grid */
.fixtures-leagues {
  margin: 36px 0 24px;
  padding: 24px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
}
.fixtures-leagues__title {
  font-family: var(--font-display, inherit);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.fixtures-leagues__sub {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-secondary, #667085);
}
.fixtures-leagues__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.fixtures-leagues__grid a,
.fixtures-leagues__grid span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  transition: background 0.12s ease, border-color 0.12s ease;
  width: 100%;
}
.fixtures-leagues__grid a:hover {
  background: rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.30);
}
.fixtures-leagues__grid img {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.fixtures-leagues__name {
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fixtures-leagues__country {
  font-size: 12px;
  color: var(--text-tertiary, #98a2b3);
  margin-left: auto;
  flex-shrink: 0;
}

/* FAQ block */
.fixtures-faq {
  margin: 36px 0 8px;
  padding: 24px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
}
.fixtures-faq__title {
  font-family: var(--font-display, inherit);
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.fixtures-faq__list { margin: 0; padding: 0; }
.fixtures-faq__list dt {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary, #1a202c);
  margin: 14px 0 4px;
}
.fixtures-faq__list dt:first-child { margin-top: 0; }
.fixtures-faq__list dd {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, #667085);
}

@media (max-width: 600px) {
  .fixtures-leagues__grid { grid-template-columns: 1fr; }
  .fixtures-pivot__day { min-width: 64px; padding: 8px 12px; }
  .fixtures-pivot__day-btm { font-size: 12px; }
}

/* ── Shot map (horizontal pitch SVG) ───────────────────────────────────── */
.shot-map-wrap { margin: 0 0 20px; }
.shot-map-wrap .fx-section-h { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.shot-map {
  position: relative; width: 100%; aspect-ratio: 105 / 68;
  background: linear-gradient(180deg, #0f6b3a 0%, #0d5d31 50%, #0f6b3a 100%);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0) 50%, rgba(255,255,255,0.04) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 10%, rgba(255,255,255,0.04) 10% 20%),
    linear-gradient(180deg, #0f6b3a 0%, #0d5d31 50%, #0f6b3a 100%);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
.shot-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot-map__line { stroke: rgba(255,255,255,0.75); stroke-width: 0.35; fill: none; vector-effect: non-scaling-stroke; }
.shot-map__outline { stroke-width: 0.5; }
.shot-map__shot { transition: r 0.2s, opacity 0.2s; cursor: pointer; vector-effect: non-scaling-stroke; }
.shot-map__shot:hover { stroke-width: 1.2; opacity: 1 !important; }
.shot-map__legend {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 8px; padding: 0 8px; font-size: 13px; flex-wrap: wrap;
}
.shot-map__legend img.shot-map__crest { vertical-align: middle; }
.shot-map__key {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px;
}
.shot-map__key--home { background: #3b82f6; }
.shot-map__key--away { background: #ef4444; }
.shot-map__count { color: var(--muted, #94a3b8); font-size: 12px; }

/* ── Where to watch (fx-tv-card) ───────────────────────────────────────── */
.fx-tv-card .fx-tv__group { margin: 6px 0 12px; }
.fx-tv-card .fx-tv__group--local { padding: 6px 10px; border-radius: 8px; background: rgba(59,130,246,0.08); }
.fx-tv-card .fx-tv__country { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted, #94a3b8); }
.fx-tv__grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fx-tv__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: inherit; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.fx-tv__item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.fx-tv__item img { width: 18px; height: 18px; border-radius: 3px; }

/* ── Match facts / storylines ──────────────────────────────────────────── */
.fx-facts-card .fx-facts-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fx-fact {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  font-size: 13px; line-height: 1.4;
}
.fx-fact__dot {
  flex: 0 0 8px; height: 8px; margin-top: 6px;
  border-radius: 50%; background: var(--accent, #3b82f6);
}
.fx-fact--streak_loss .fx-fact__dot { background: #ef4444; }
.fx-fact--clean_sheets .fx-fact__dot { background: #10b981; }
.fx-fact--unbeaten .fx-fact__dot,
.fx-fact--streak_win .fx-fact__dot { background: #f59e0b; }

/* ── Team top scorers (on /team/{slug}/) ───────────────────────────────── */
.team-topscorers { margin: 24px auto; }

/* Footer partners column. Slimmer than the link nav columns, with a short
   secondary line so the relationship reads as endorsement, not a loose
   outbound link. */
.site-footer__partners .footer-nav a { font-weight: 600; }
.site-footer__partners-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary, #98a2b3);
}

/* ── JS-rendered fixture cards: league logo + image crests ────────────────── */
.score-card__league {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.score-card__league-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
.score-card__crest--img {
    background: var(--bg-elevated, #fff);
    padding: 2px;
}
.score-card__crest--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ===========================================================================
   TIPSTER — dense table-row layout. Each fixture is a single horizontal row
   with rank badge, teams stacked vertically with league/time meta, pick,
   confidence bar, and BTTS/Over 2.5 chips.
   =========================================================================== */
.tipster-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
    max-width: 1080px;
    margin: 0 auto;
}
/* Five aligned columns (match · pick · odds · confidence · markets) so the
   card list reads as a real table under the .tipster-cols header strip. */
.tipster-card {
    display: grid;
    grid-template-columns:
        minmax(200px, 2.1fr)
        minmax(130px, 1.1fr)
        minmax(96px, 0.8fr)
        minmax(160px, 1.2fr)
        minmax(150px, max-content);
    grid-template-areas: "head pick odds conf chips";
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.tipster-card:nth-child(odd) { background: var(--bg-elevated, #fff); }
.tipster-card:nth-child(even) { background: color-mix(in srgb, var(--bg-elevated, #fff) 97%, var(--brand-primary, #4f46e5) 3%); }
.tipster-card:hover {
    transform: translateY(-1px);
    border-color: var(--brand-primary, #4f46e5);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
}
.tipster-card__head     { grid-area: head; }
.tipster-card__pick-row { grid-area: pick; }
.tipster-card__odds-row { grid-area: odds; }
.tipster-card__conf-row { grid-area: conf; }
.tipster-card__chips    { grid-area: chips; }

/* Column legend — turns the list into a legible table on desktop. */
.tipster-cols {
    display: grid;
    grid-template-columns:
        minmax(200px, 2.1fr)
        minmax(130px, 1.1fr)
        minmax(96px, 0.8fr)
        minmax(160px, 1.2fr)
        minmax(150px, max-content);
    gap: 14px;
    padding: 4px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-tertiary, #94a3b8);
}
.tipster-cols__c--end { text-align: right; }
@media (max-width: 1024px) {
    .tipster-cols { display: none; }
}

.tipster-card__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tipster-card__teams {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 15px; line-height: 1.3;
}
.tipster-card__team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tipster-card__team img,
.tipster-card__team .tipster-card__crest-ph {
    width: 28px; height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-elevated, #fff);
    flex-shrink: 0;
}
.tipster-card__crest-ph {
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-subtle, #e4e7ec);
}
.tipster-card__team-name {
    font-weight: 700; color: var(--text-primary, #0f172a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tipster-card__vs {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary, #94a3b8);
    padding: 0 4px;
}
.tipster-card__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-tertiary, #64748b); }
.tipster-card__league {
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 220px;
}
.tipster-card__time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-subtle, #f1f5f9);
}

.tipster-card__pick-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tipster-card__pick-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}
.tipster-card__pick-text {
    display: inline-block;
    font-weight: 700; font-size: 14.5px;
    color: var(--brand-primary, #4f46e5);
    background: color-mix(in srgb, var(--brand-primary, #4f46e5) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary, #4f46e5) 22%, transparent);
    border-radius: 8px;
    padding: 4px 10px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tipster-card__conf-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tipster-card__conf-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}
.tipster-conf { display: flex; align-items: center; gap: 8px; }
.tipster-conf__bar {
    flex: 1; min-width: 90px;
    height: 10px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.tipster-conf__fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.tipster-conf.is-high .tipster-conf__fill { background: linear-gradient(90deg, #10b981, #059669); }
.tipster-conf.is-mid  .tipster-conf__fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.tipster-conf.is-low  .tipster-conf__fill { background: linear-gradient(90deg, #94a3b8, #64748b); }
.tipster-conf__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px; font-weight: 800;
    color: var(--text-primary, #0f172a);
    min-width: 54px;
    text-align: right;
}
.tipster-conf.is-high .tipster-conf__num { color: #047857; }
.tipster-conf.is-mid  .tipster-conf__num { color: #b45309; }

.tipster-card__chips {
    display: flex; flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.tipster-card__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    font-size: 11px;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}
.tipster-card__chip-label {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tipster-mini {
    font-weight: 700;
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 2px 7px;
    border-radius: 6px;
}
.tipster-mini.is-yes { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.tipster-mini.is-no  { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

.tipster-table-head { max-width: 1080px; margin: 0 auto 14px; padding: 0 16px; }
.tipster-table-head__title { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.tipster-table-head__sub   { color: var(--text-secondary, #475569); font-size: 14px; margin: 0 0 4px; }
.tipster-table-head__meta  { font-size: 12px; color: var(--text-tertiary, #94a3b8); margin: 0; }
.tipster-table-foot { text-align: center; padding: 14px 16px; }
.tipster-table-wrap { padding: 0 0 28px; }

/* Day toggle */
.tipster-day-tabs-wrap { padding: 16px 16px 8px; max-width: 1080px; margin: 0 auto; text-align: center; }
.tipster-day-tabs {
    display: inline-flex; gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-subtle, #e2e8f0);
}
.tipster-day-tab {
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary, #475569);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tipster-day-tab:hover { color: var(--text-primary, #0f172a); }
.tipster-day-tab.is-active {
    background: var(--brand-primary, #4f46e5);
    color: #fff;
}

/* Responsive */
@media (min-width: 1025px) {
    /* The .tipster-cols legend strip is the table header — per-cell
       mini-labels would duplicate it. */
    .tipster-card__pick-label,
    .tipster-card__conf-label,
    .tipster-card__odds-label { display: none; }
}
@media (max-width: 1024px) {
    .tipster-card {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "head head"
            "pick odds"
            "conf chips";
        row-gap: 10px;
    }
}
@media (max-width: 560px) {
    .tipster-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "head head"
            "pick odds"
            "conf conf"
            "chips chips";
        padding: 12px 14px;
        gap: 10px;
    }
    .tipster-card__chips { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
}

/* ===========================================================================
   PRO AI PREDICTION TABLE (.sm-pro-pred) — outer card on /match/ predictions
   tab. Includes verdict header, 1X2 probability bars (table rows), markets
   (BTTS + Over 2.5), "why" explainer, result banner, trust footer.
   =========================================================================== */

.sm-pro-pred {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 14px;
    padding: 20px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}

/* Header: AI pill + model version */
.sm-pro-pred__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.sm-pro-pred__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5, #6d28d9);
    color: #fff;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sm-pro-pred__pill br { display: none; }
.sm-pro-pred__pill-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.4s ease-in-out infinite;
}
.sm-pro-pred__model {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
}

/* Verdict block: big pick + confidence + strength chip */
.sm-pro-pred__verdict {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--bg-subtle, #f8fafc);
    border-radius: 12px;
    border-left: 4px solid var(--brand-primary, #4f46e5);
}
.sm-pro-pred__pick-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}
.sm-pro-pred__pick {
    font-size: 22px; font-weight: 800;
    color: var(--text-primary, #0f172a);
    line-height: 1.2;
}
.sm-pro-pred__confidence {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.sm-pro-pred__conf-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 28px; font-weight: 800;
    color: var(--brand-primary, #4f46e5);
    line-height: 1;
}
.sm-pro-pred__strength {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #475569);
}
.sm-pro-pred__strength--high  { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.sm-pro-pred__strength--mid   { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.sm-pro-pred__strength--low   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* Result banner (shown when fixture finished) */
.sm-pro-pred__result {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e4e7ec);
}
.sm-pro-pred__result.is-correct {
    background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
    border-color: rgba(16,185,129,0.4);
}
.sm-pro-pred__result.is-wrong {
    background: linear-gradient(90deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
    border-color: rgba(239,68,68,0.4);
}
.sm-pro-pred__result-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--text-tertiary, #94a3b8);
    color: #fff;
    font-size: 16px; font-weight: 800;
}
.sm-pro-pred__result.is-correct .sm-pro-pred__result-icon { background: #10b981; }
.sm-pro-pred__result.is-wrong   .sm-pro-pred__result-icon { background: #ef4444; }
.sm-pro-pred__result-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}
.sm-pro-pred__result-score {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 20px; font-weight: 800;
    color: var(--text-primary, #0f172a);
    justify-self: end;
}
.sm-pro-pred__result-verdict {
    grid-column: 1 / -1;
    font-size: 12px; font-weight: 700;
    color: var(--text-secondary, #475569);
}
.sm-pro-pred__result.is-correct .sm-pro-pred__result-verdict { color: #047857; }
.sm-pro-pred__result.is-wrong   .sm-pro-pred__result-verdict { color: #b91c1c; }

/* 1X2 probability bars — table-like rows */
.sm-pro-pred__bars {
    display: flex; flex-direction: column;
    gap: 8px;
}
.sm-pro-pred__bar {
    display: grid;
    grid-template-columns: minmax(110px, 1.2fr) minmax(0, 3fr) 56px;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-subtle, #f8fafc);
    transition: background 0.15s;
}
.sm-pro-pred__bar.is-pick {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--brand-primary, #4f46e5);
    box-shadow: 0 1px 6px rgba(79, 70, 229, 0.12);
}
.sm-pro-pred__bar-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-pro-pred__bar-track {
    height: 8px;
    background: var(--border-subtle, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.sm-pro-pred__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #94a3b8, #64748b);
    border-radius: 999px;
    transition: width 0.35s ease;
}
.sm-pro-pred__bar.is-pick .sm-pro-pred__bar-fill {
    background: linear-gradient(90deg, #4f46e5, #6366f1);
}
.sm-pro-pred__bar-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px; font-weight: 800;
    color: var(--text-primary, #0f172a);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Markets row: BTTS + Over 2.5 side by side */
.sm-pro-pred__markets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 560px) { .sm-pro-pred__markets { grid-template-columns: 1fr; } }
.sm-pro-pred__market {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e4e7ec);
}
.sm-pro-pred__market-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}
.sm-pro-pred__market-pct {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 16px; font-weight: 800;
    color: var(--text-primary, #0f172a);
}
.sm-pro-pred__market-verdict {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-elevated, #fff);
    font-size: 11px; font-weight: 800;
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-subtle, #e4e7ec);
}

/* Why-this-pick explainer */
.sm-pro-pred__why {
    padding: 14px;
    border-radius: 10px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e4e7ec);
}
.sm-pro-pred__why-title {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
    margin-bottom: 10px;
}
.sm-pro-pred__why-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
@media (max-width: 560px) { .sm-pro-pred__why-list { grid-template-columns: 1fr; } }
.sm-pro-pred__why-item {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border-subtle, #e4e7ec);
    font-size: 13px;
}
.sm-pro-pred__why-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sm-pro-pred__why-label {
    color: var(--text-secondary, #475569);
}
.sm-pro-pred__why-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}

/* Footer: model trust + updated time */
.sm-pro-pred__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, #e4e7ec);
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
}
.sm-pro-pred__trust {
    display: inline-flex; align-items: baseline; gap: 6px;
    color: var(--text-secondary, #475569);
}
.sm-pro-pred__trust br { display: none; }
.sm-pro-pred__trust strong {
    color: var(--brand-primary, #4f46e5);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
}
.sm-pro-pred__trust-meta { color: var(--text-tertiary, #94a3b8); }

/* Free (alternative) prediction card — same look, less data */
.sm-free-pred {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 14px;
    padding: 18px;
    margin: 16px 0;
}
.sm-free-pred__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sm-free-pred__pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-secondary, #475569);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sm-free-pred__pill br { display: none; }
.sm-free-pred__pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-primary, #4f46e5);
}
.sm-free-pred__model {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
}

/* ===========================================================================
   /live/ and /fixtures/ date chip strip (matches-pivot)
   Clean text-tab style with stacked weekday + date, no bordered "buttons",
   no surrounding white box. Active chip uses the brand pill.
   =========================================================================== */
.matches-pivot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.matches-pivot__day {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 12px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--text-secondary, #475569);
    text-decoration: none;
    min-width: 56px;
    line-height: 1.15;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.matches-pivot__day:hover {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-primary, #0f172a);
}
.matches-pivot__day-top {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #94a3b8);
}
.matches-pivot__day-btm {
    display: block;
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}
.matches-pivot__day--active {
    background: var(--brand-primary, #4f46e5);
    color: #fff;
}
.matches-pivot__day--active .matches-pivot__day-top,
.matches-pivot__day--active .matches-pivot__day-btm {
    color: #fff;
}
.matches-pivot__day--active:hover {
    background: var(--brand-primary, #4f46e5);
}
.live-page__pivot { margin: 6px 0 16px; }

/* Mobile: shrink padding so a 7-day strip still fits on small screens */
@media (max-width: 560px) {
    .matches-pivot { gap: 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .matches-pivot::-webkit-scrollbar { display: none; }
    .matches-pivot__day { padding: 6px 8px; min-width: 48px; }
    .matches-pivot__day-top { font-size: 9px; }
    .matches-pivot__day-btm { font-size: 12px; }
}

/* ===========================================================================
   TV "Where to watch" block (fx-tv) — was rendering as a bulleted list.
   Restyle as a clean two-column table: channel logo + name on the left,
   alternating row tint, monospace "брандираното за БГ" badge on the right.
   =========================================================================== */
.fx-tv {
    margin: 18px 0;
    padding: 18px;
    border-radius: 14px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
}
.fx-tv__head { margin-bottom: 12px; }
.fx-tv__title {
    margin: 0 0 4px;
    font-size: 18px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-primary, #0f172a);
}
.fx-tv__icon { font-size: 20px; }
.fx-tv__sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #475569);
    display: inline-flex; align-items: center; gap: 6px;
}
.fx-tv__flag { font-size: 14px; }

/* Strip the <ul>/<li> bullets, render as table rows */
.fx-tv__channels {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-elevated, #fff);
}
.fx-tv__channels--flat { /* same — keep selector for back-compat */ }
.fx-tv__channel {
    list-style: none;
    margin: 0;
    border-top: 1px solid var(--border-subtle, #e4e7ec);
    padding: 0;
}
.fx-tv__channel:first-child { border-top: 0; }
.fx-tv__channel:nth-child(even) { background: var(--bg-subtle, #f8fafc); }
.fx-tv__channel-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
    transition: background 0.12s;
}
.fx-tv__channel-link:hover { background: rgba(79, 70, 229, 0.06); }
.fx-tv__channel-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 6px;
    padding: 2px;
}
.fx-tv__channel-logo--placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    color: var(--text-secondary, #475569);
    background: var(--bg-subtle, #f1f5f9);
}
.fx-tv__channel-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-tv__channel-link::after {
    content: "→";
    margin-left: auto;
    color: var(--text-tertiary, #94a3b8);
    font-size: 16px;
    transition: transform 0.15s, color 0.15s;
}
.fx-tv__channel-link:hover::after {
    color: var(--brand-primary, #4f46e5);
    transform: translateX(2px);
}
.fx-tv__footnote {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, #e4e7ec);
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
    line-height: 1.5;
}

/* ===========================================================================
   /predictions/ day toggle — clean text-link tabs, not pill buttons.
   The earlier styling made them look like big pill buttons; the user wants
   subtle text links with icon + active underline.
   =========================================================================== */
.predictions-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-subtle, #e2e8f0);
    margin: 16px 0 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.predictions-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
    white-space: nowrap;
}
.predictions-tab:hover {
    background: var(--bg-elevated, #fff);
    color: var(--text-primary, #0f172a);
}
.predictions-tab.is-active,
.predictions-tab[aria-selected="true"] {
    background: var(--brand-primary, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
    transform: translateY(-1px);
}
.predictions-tab.is-active .predictions-tab__icon,
.predictions-tab[aria-selected="true"] .predictions-tab__icon {
    color: #fff;
}
@media (max-width: 560px) {
    .predictions-tabs { display: flex; width: 100%; gap: 4px; padding: 4px; }
    .predictions-tab { flex: 1; justify-content: center; padding: 10px 12px; font-size: 13px; }
}
.predictions-tab__icon {
    display: inline-flex;
    align-items: center;
    color: var(--brand-primary, #4f46e5);
}
.predictions-tab__icon svg { width: 16px; height: 16px; }

/* ===========================================================================
   /predictions/ — visually rich fixture card
   Header row: [crest] HOME   срещу   AWAY [crest]
   Meta row:   [time] · [Tuesday, 19 May] · League
   Verdict:    Pro AI prediction with confidence bar (when present)
   =========================================================================== */

.pred-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.pred-fixture {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary, #0f172a);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pred-fixture:hover {
    transform: translateY(-2px);
    border-color: var(--brand-primary, #4f46e5);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Matchup row: home block (crest + name) · vs · away block (name + crest) */
.pred-fixture__matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.pred-fixture__team {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.pred-fixture__team--home { justify-self: end; }
.pred-fixture__team--away { justify-self: start; }
.pred-fixture__team-name {
    font-size: clamp(0.95rem, 2vw, 1.125rem);
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.2;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pred-fixture__team--away .pred-fixture__team-name { text-align: left; }
.pred-fixture__crest {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.pred-fixture__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pred-fixture__vs {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Meta row: status pill + date + league */
.pred-fixture__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary, #475569);
}
.pred-fixture__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--brand-primary, #4f46e5);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.pred-fixture__status--live {
    background: #fee2e2;
    color: #b91c1c;
    animation: none;
}
.pred-fixture__status--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.4s ease-in-out infinite;
}
.pred-fixture__status--final {
    background: var(--text-primary, #0f172a);
    /* Token, not #fff: --text-primary flips near-white in dark mode, so the
       text must flip too (light theme: white on dark pill; dark: dark on light). */
    color: var(--bg-elevated, #fff);
}
.pred-fixture__status--final small {
    font-weight: 600;
    opacity: 0.75;
    margin-left: 4px;
}
.pred-fixture__date {
    color: var(--text-secondary, #475569);
    text-transform: capitalize;
}
.pred-fixture__league {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 600;
    font-size: 12px;
}
.pred-fixture__league::before {
    content: "·";
    margin-right: 8px;
    color: var(--text-tertiary, #cbd5e1);
}

/* AI verdict block */
.pred-fixture__verdict {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.06), rgba(79, 70, 229, 0.02));
    border: 1px solid rgba(79, 70, 229, 0.18);
}
.pred-fixture__verdict.is-high { background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02)); border-color: rgba(16, 185, 129, 0.22); }
.pred-fixture__verdict.is-mid  { background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)); border-color: rgba(245, 158, 11, 0.22); }
.pred-fixture__verdict.is-low  { background: linear-gradient(90deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.02)); border-color: rgba(148, 163, 184, 0.22); }

.pred-fixture__verdict-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
    white-space: nowrap;
}
.pred-fixture__verdict-text {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pred-fixture__verdict-text strong {
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}
.pred-fixture__verdict-bar {
    display: block;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    overflow: hidden;
    grid-column: 1 / -1;
}
.pred-fixture__verdict-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.pred-fixture__verdict.is-high .pred-fixture__verdict-fill { background: linear-gradient(90deg, #10b981, #059669); }
.pred-fixture__verdict.is-mid  .pred-fixture__verdict-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.pred-fixture__verdict.is-low  .pred-fixture__verdict-fill { background: linear-gradient(90deg, #94a3b8, #64748b); }

/* Mobile: stack home + vs + away vertically when room is tight */
@media (max-width: 560px) {
    .pred-fixture { padding: 14px 14px; }
    .pred-fixture__matchup {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
    }
    .pred-fixture__team {
        justify-self: stretch;
        justify-content: center;
        flex-direction: row;
    }
    .pred-fixture__team-name { text-align: center; white-space: normal; }
    .pred-fixture__vs {
        padding: 2px 10px;
        border-radius: 999px;
        background: var(--bg-subtle, #f1f5f9);
        color: var(--text-secondary, #475569);
    }
    .pred-fixture__crest { width: 32px; height: 32px; }
    .pred-fixture__meta { gap: 8px; font-size: 12px; }
}

/* /my-account/account-privacy/ footer link — only show when logged in. The
   PHP template_redirect guard already bounces logged-out visitors to the
   login page, but hiding the entry point prevents the dead click. */
body:not(.logged-in) .footer-link--user { display: none !important; }

/* ===========================================================================
   League singular page — descriptive intro block under the hero.
   "Lede" paragraph explains what the page covers + 4 anchor chips that
   jump down to the programme / results / standings / topscorers sections.
   =========================================================================== */
.league-intro {
    max-width: 1080px;
    margin: 18px auto 26px;
    padding: 0 16px;
}
.league-intro__lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary, #475569);
    margin: 0 0 18px;
    max-width: 760px;
}
.league-intro__lede strong { color: var(--text-primary, #0f172a); font-weight: 700; }
.league-intro__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px) { .league-intro__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .league-intro__grid { grid-template-columns: 1fr; } }
.league-intro__chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    text-decoration: none;
    color: var(--text-primary, #0f172a);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.league-intro__chip:hover {
    transform: translateY(-1px);
    border-color: var(--brand-primary, #4f46e5);
    box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}
.league-intro__chip-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-subtle, #f1f5f9);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.league-intro__chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.league-intro__chip-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary, #0f172a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.league-intro__chip-sub {
    font-size: 12px;
    color: var(--text-tertiary, #64748b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* /leagues/ archive table: dropped website + rating columns. Make sure the
   remaining 4-column layout breathes correctly and doesn't render leftover
   empty cells. */
.leagues-table th.leagues-table__website-col,
.leagues-table th.leagues-table__rating-col,
.leagues-table td.leagues-table__website-col,
.leagues-table td.leagues-table__rating-col { display: none; }
/* topscorers table on a league page still uses .leagues-table__rating-col for
   goals/assists — only hide the col on the leagues archive (which has the
   .page-list-wrap wrapper). */
.league-topscorers .leagues-table th.leagues-table__rating-col,
.league-topscorers .leagues-table td.leagues-table__rating-col { display: table-cell !important; }

/* Better readable name column */
.leagues-table th.leagues-table__name-col,
.leagues-table td.leagues-table__name-col { min-width: 220px; }
.leagues-table th.leagues-table__country-col,
.leagues-table td.leagues-table__country-col { min-width: 140px; }
.leagues-table th.leagues-table__live-col,
.leagues-table td.leagues-table__live-col { width: 100px; text-align: center; }

/* ── /live/ page bottom SEO block ───────────────────────────────────────── */
.live-seo {
    margin: 48px auto 24px;
    padding: 0 16px;
}
.live-seo .container { max-width: 1100px; margin: 0 auto; }
.live-seo__intro { margin-bottom: 28px; }
.live-seo__title {
    font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.live-seo__lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary, #475569);
    margin: 0;
}
.live-seo__lede a {
    color: var(--brand-primary, #0b1525);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.live-seo__lede a:hover { color: var(--brand-accent, #1d4ed8); }
.live-seo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.live-seo__card {
    padding: 18px 20px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
}
.live-seo__card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.live-seo__card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: var(--text-secondary, #475569);
}
.live-seo__card a {
    color: var(--brand-primary, #0b1525);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.live-seo__card a:hover { color: var(--brand-accent, #1d4ed8); }
.live-seo__cta {
    margin: 24px 0 0;
    padding: 14px 20px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
    color: var(--text-primary);
}
.live-seo__cta a {
    color: var(--brand-primary, #0b1525);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===========================================================================
   Team page — Upcoming + Recent matches grid
   Two-column on desktop, single-column on mobile. Each column has its own
   header with icon, count badge, and an explanatory sub-paragraph so the
   visitor knows what they're looking at and what each card links to.
   =========================================================================== */
.team-matches-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    width: 100%;
}
/* Match list inside each section breathes: multiple cards per row on wide
   screens, single column on mobile. Eliminates the "A..." / "G..." truncation. */
.team-matches-col .matches-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}
@media (max-width: 720px) {
    .team-matches-col .matches-list { grid-template-columns: 1fr; }
}
.team-matches-col {
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 14px;
    padding: 18px 18px 14px;
    min-width: 0;
}
.team-matches-col__head {
    display: flex; flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.team-matches-col__title {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em;
}
.team-matches-col__icon { font-size: 19px; }
.team-matches-col__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-secondary, #475569);
    font-size: 11px;
    font-weight: 800;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    margin-left: 2px;
}
.team-matches-col--upcoming .team-matches-col__count {
    background: rgba(79, 70, 229, 0.10);
    color: var(--brand-primary, #4f46e5);
}
.team-matches-col--recent .team-matches-col__count {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-secondary, #475569);
}
.team-matches-col__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}
.team-matches-col__sub strong {
    color: var(--text-primary, #0f172a);
    font-weight: 700;
}
.team-matches-col__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.team-matches-col__empty {
    padding: 16px 12px;
    margin: 0;
    background: var(--bg-subtle, #f8fafc);
    border-radius: 10px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}

/* ===========================================================================
   Team page — DESKTOP-ONLY polish for the matches grid (≥820 px). Mobile
   keeps the default score-card layout untouched.
   =========================================================================== */
@media (min-width: 820px) {
    .team-matches-col__list .score-card {
        grid-template-columns: 96px 1fr auto;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid var(--border-subtle, #e4e7ec);
        background: var(--bg-elevated, #fff);
        position: relative;
        overflow: hidden;
    }
    .team-matches-col__list .score-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--border-subtle, #e2e8f0);
        transition: background 0.15s;
    }
    .team-matches-col__list .score-card:hover { transform: translateY(-1px); border-color: var(--brand-primary, #4f46e5); box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
    .team-matches-col__list .score-card:hover::before { background: var(--brand-primary, #4f46e5); }

    .team-matches-col__list .score-card__rail {
        display: flex; flex-direction: column;
        gap: 4px;
        min-width: 0;
        align-items: flex-start;
        padding-right: 4px;
        border-right: 1px solid var(--border-subtle, #f1f5f9);
    }
    .team-matches-col__list .score-card__league {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-tertiary, #64748b);
        line-height: 1.2;
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .team-matches-col__list .score-card__time {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-secondary, #475569);
        text-transform: uppercase;
    }
    .team-matches-col__list .score-card__kickoff {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 18px;
        font-weight: 800;
        color: var(--brand-primary, #4f46e5);
        line-height: 1;
    }
    .team-matches-col__list .score-card__minute { align-self: flex-start; }

    .team-matches-col__list .score-card__teams { gap: 8px; }
    .team-matches-col__list .score-card__team { gap: 12px; }
    .team-matches-col__list .score-card__crest { width: 32px; height: 32px; border-radius: 8px; }
    .team-matches-col__list .score-card__crest img { width: 100%; height: 100%; object-fit: contain; }
    .team-matches-col__list .score-card__team-name { font-size: 15px; font-weight: 700; color: var(--text-primary, #0f172a); }

    .team-matches-col__list .score-card__scores {
        min-width: 64px;
        padding: 4px 10px;
        border-radius: 8px;
        background: var(--bg-subtle, #f8fafc);
        gap: 6px;
        line-height: 1.05;
    }
    .team-matches-col__list .score-card__score {
        font-size: 22px;
        font-weight: 800;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        text-align: center;
    }
    .team-matches-col__list .score-card__score--win  { color: #047857; }
    .team-matches-col__list .score-card__score--loss { color: #b91c1c; }
    .team-matches-col__list .score-card__score--draw { color: var(--text-secondary, #475569); }

    .team-matches-col--recent .score-card:has(.score-card__score--win:first-of-type)::before  { background: #10b981; }
    .team-matches-col--recent .score-card:has(.score-card__score--loss:first-of-type)::before { background: #ef4444; }
    .team-matches-col--recent .score-card:has(.score-card__score--draw:first-of-type)::before { background: #f59e0b; }
    .team-matches-col--upcoming .score-card::before { background: var(--brand-primary, #4f46e5); opacity: 0.55; }
}

/* ── Hub-page SEO section (prose + cards + FAQ) ─────────────────────────── */
.hub-seo {
    margin: 48px auto 24px;
    padding: 0 16px;
}
.hub-seo .container { max-width: 1100px; margin: 0 auto; }
.hub-seo__intro { margin-bottom: 28px; }
.hub-seo__title {
    font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.hub-seo__lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary, #475569);
    margin: 0;
}
.hub-seo__lede a, .hub-seo__card a {
    color: var(--brand-primary, #0b1525);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hub-seo__lede a:hover, .hub-seo__card a:hover { color: var(--brand-accent, #1d4ed8); }
.hub-seo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.hub-seo__card {
    padding: 18px 20px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
}
.hub-seo__card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.hub-seo__card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: var(--text-secondary, #475569);
}
.hub-seo__faq {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.hub-seo__faq-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-primary);
}
.hub-seo__faq-item {
    margin: 8px 0;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    overflow: hidden;
}
.hub-seo__faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hub-seo__faq-item summary::-webkit-details-marker { display: none; }
.hub-seo__faq-item summary::after {
    content: "+";
    color: var(--text-tertiary, #94a3b8);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}
.hub-seo__faq-item[open] summary::after { content: "−"; }
.hub-seo__faq-item summary h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.hub-seo__faq-item p {
    padding: 0 18px 16px;
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 14px;
    line-height: 1.65;
}

/* ── Venue page Bulgarian SEO augment block ─────────────────────────────── */
.venue-seo {
    max-width: 1100px;
    margin: 32px auto 24px;
    padding: 0 16px;
}
.venue-seo__intro { margin-bottom: 24px; }
.venue-seo__title {
    font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.venue-seo__lede {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary, #475569);
    margin: 0;
}
.venue-seo__lede a, .venue-seo__cta a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.venue-seo__facts {
    margin: 18px 0;
    padding: 16px 18px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 24px;
}
.venue-seo__fact { display: contents; }
.venue-seo__fact dt {
    grid-column: 1;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.venue-seo__fact dd {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
@media (min-width: 720px) {
    .venue-seo__facts {
        grid-template-columns: repeat(5, 1fr);
    }
    .venue-seo__fact {
        display: block;
        padding-right: 16px;
    }
    .venue-seo__fact dd {
        margin-top: 4px;
        font-size: 15px;
    }
}
.venue-seo__upcoming {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.venue-seo__upcoming h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
}
.venue-seo__upcoming-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.venue-seo__upcoming-link {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.venue-seo__upcoming-link:hover {
    border-color: var(--brand-primary);
    background: var(--bg-base);
}
.venue-seo__upcoming-when {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}
.venue-seo__upcoming-match {
    font-size: 14px;
    font-weight: 600;
}
.venue-seo__upcoming-vs {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 400;
    margin: 0 4px;
}
.venue-seo__upcoming-league {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    .venue-seo__upcoming-link {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
.venue-seo__cta {
    margin: 20px 0 0;
    padding: 14px 18px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Team page H1 alias subtitle (English / acronym below Cyrillic name) ── */
.page-hero__title-alias {
    margin: 6px 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Venue page: map CTA + FAQ accordion ────────────────────────────────── */
.venue-seo__map-cta {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-secondary, #475569);
}
.venue-seo__map-cta a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.venue-seo__map-cta code {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}
.venue-seo__faq {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.venue-seo__faq-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text-primary);
}
.venue-seo__faq-item {
    margin: 8px 0;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    overflow: hidden;
}
.venue-seo__faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.venue-seo__faq-item summary::-webkit-details-marker { display: none; }
.venue-seo__faq-item summary::after {
    content: "+";
    color: var(--text-tertiary, #94a3b8);
    font-size: 20px;
    line-height: 1;
}
.venue-seo__faq-item[open] summary::after { content: "−"; }
.venue-seo__faq-item summary h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.venue-seo__faq-item p {
    padding: 0 18px 16px;
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 14px;
    line-height: 1.65;
}

/* ── Venue cross-link / nearby block ────────────────────────────────────── */
.venue-seo__nearby {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.venue-seo__nearby h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.venue-seo__nearby-lede {
    font-size: 14px;
    color: var(--text-secondary, #475569);
    margin: 0 0 12px;
}
.venue-seo__nearby-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.venue-seo__nearby-link {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 10px 14px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.venue-seo__nearby-link:hover {
    border-color: var(--brand-primary);
    background: var(--bg-base);
}
.venue-seo__nearby-name {
    grid-column: 1;
    font-weight: 600;
    font-size: 14px;
}
.venue-seo__nearby-city {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}
.venue-seo__nearby-cap {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}

.venue-seo__location {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.venue-seo__location h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary);
}
.venue-seo__location-lede {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    color: var(--text-secondary, #475569);
}
.venue-seo__location-lede code {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    background: var(--bg-subtle, #f1f5f9);
    padding: 1px 6px;
    border-radius: 4px;
}
.venue-seo__location-lede a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Team page: prominent "View squad" CTA below matches ─────────────────── */
.team-squad-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin: 24px 0 0;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(79,70,229,0.02));
    border: 1px solid rgba(79,70,229,0.18);
    border-radius: 14px;
}
.team-squad-cta__icon {
    font-size: 36px;
    line-height: 1;
}
.team-squad-cta__body { min-width: 0; }
.team-squad-cta__title {
    font-family: var(--font-display);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-primary, #0f172a);
}
.team-squad-cta__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}
.team-squad-cta__btn {
    background: var(--brand-primary, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}
.team-squad-cta__btn:hover { background: #3730a3; transform: translateY(-1px); }
@media (max-width: 640px) {
    .team-squad-cta {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .team-squad-cta__icon { font-size: 30px; }
    .team-squad-cta__btn { width: 100%; }
}

/* =========================================================================
   Score card — simplified 2-row layout
   ----------------------------------------------------------------------
   Row 1: [crest] Team1   vs   [crest] Team2     (wraps freely, no truncation)
   Row 2: score "X – Y"  or  "Сря, 21 май · 19:00"   (centered)
   ========================================================================= */
.score-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;          /* override the old 3-col layout */
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 16px 18px;
    min-height: 92px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
    color: var(--text-primary);
    align-items: center;
}
.score-card.card--interactive { cursor: pointer; }
.score-card.card--interactive:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
    border-color: var(--border-strong, #cbd5e1);
}
.score-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Row 1 — teams row: home / vs / away. Pure flex (not grid) so the team-name
   can naturally expand to fill the side without `flex-basis: 0` collapsing
   it to invisible. Each side `flex: 1 1 0` equally divides the row width;
   inside each side, the team-name takes its natural width (with ellipsis
   only when the card is too narrow to fit). */
.score-card__teams-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.score-card__team-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;     /* equal-width sides */
    min-width: 0;
    overflow: hidden; /* clip ellipsis */
}
.score-card__team-side:first-child {
    /* Home: visually name then crest, hugging the right of the side. */
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: right;
}
.score-card__team-side:last-child {
    justify-content: flex-start;
    text-align: left;
}
.score-card__team-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    color: var(--text-primary);
    /* nowrap + ellipsis is the livescore standard; min-width: 0 lets the
       text shrink in narrow cards without breaking char-by-char. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* No explicit `flex` value — `flex: 0 1 auto` default lets the name
       size to its natural width and only shrink when the side is narrower. */
}
.score-card__vs {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    text-transform: lowercase;
    font-weight: 600;
    flex-shrink: 0;
}
.score-card .score-card__crest:not([data-tint]) {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-300, #cbd5e1);
    flex-shrink: 0;
    overflow: hidden;
}
.score-card .score-card__crest img {
    width: 100%; height: 100%; object-fit: contain;
}

/* Row 2 — centered status: score / live minute / off-status / kickoff time+date */
.score-card__status-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
    border-top: 1px dashed var(--border-subtle, #e2e8f0);
    margin-top: 2px;
}
.score-card__score-line {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.score-card__score {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.score-card__score--draw { color: var(--text-secondary); }
.score-card__score--win  { color: var(--text-primary); }
.score-card__score--loss { color: var(--text-tertiary); }
.score-card__separator {
    color: var(--text-tertiary);
    font-size: 18px;
    font-weight: 600;
}
.score-card__live-min {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    color: var(--live, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.score-card__live-min::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--live, #dc2626);
    animation: livePulse 1.6s ease-in-out infinite;
}
.score-card__ft-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #94a3b8);
    letter-spacing: 0.04em;
}
.score-card__when-date {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}
.score-card__when-time {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.score-card__when-sep {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 400;
}
.score-card__status--off {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--warn, #b45309);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .score-card { padding: 14px 14px; min-height: 80px; }
    .score-card__teams-row { gap: 8px; }
    .score-card__team-name { font-size: 13px; }
    .score-card .score-card__crest { width: 24px; height: 24px; }
    .score-card__score { font-size: 19px; }
    .score-card__when-time { font-size: 15px; }
}

/* =========================================================================
   Score card — BULLETPROOF override
   Ensures the simplified 2-row layout wins regardless of legacy rules.
   ========================================================================= */
article.score-card.card--interactive,
.matches-list article.score-card,
.team-matches-col__list article.score-card,
.fixtures-list article.score-card {
    display: block !important;
    padding: 16px 18px !important;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0) !important;
    border-radius: 12px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    position: relative;
}
article.score-card .score-card__teams-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    width: 100%;
    min-width: 0;
}
article.score-card .score-card__team-side {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
article.score-card .score-card__team-side:first-child {
    flex-direction: row-reverse !important;
    justify-content: right;
    text-align: right !important;
}
article.score-card .score-card__team-side:last-child {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
article.score-card .score-card__team-name {
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--text-primary, #0f172a) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
}
article.score-card .score-card__crest {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
}
article.score-card .score-card__vs {
    flex: 0 0 auto !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 12px !important;
    color: var(--text-tertiary, #94a3b8) !important;
    padding: 0 4px !important;
}
article.score-card .score-card__status-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--border-subtle, #e2e8f0) !important;
}

/* Matches list inside team columns — grid of cards, NOT stacked column */
.team-matches-col .matches-list,
.team-matches-col .team-matches-col__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    grid-auto-rows: auto;
    gap: 10px !important;
    flex-direction: unset !important;
}
@media (max-width: 720px) {
    .team-matches-col .matches-list,
    .team-matches-col .team-matches-col__list {
        grid-template-columns: 1fr !important;
    }
}

/* ── Search trigger: icon-only variant (matches .dark-toggle dimensions) ──
   The base `.search-trigger` rule sets min-width: 240px so it can show
   text + a ⌘K kbd hint. When the trigger has no label (just an SVG icon),
   it was rendering as a giant empty 240px-wide rectangle next to the
   nav. The `--icon` modifier resets sizing to a clean 36×36 square so
   it sits flush with the dark-toggle and "Моят профил" pill. */
.search-trigger.search-trigger--icon,
button.search-trigger--icon {
    width: 36px;
    height: 36px;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0;
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: var(--r-2, 8px);
    background: none;
    color: var(--text-primary, #0f172a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}
.search-trigger--icon:hover {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--brand-primary, #4f46e5);
}
.search-trigger--icon svg {
    width: 18px;
    height: 18px;
}
.search-trigger--icon .search-trigger__hint,
.search-trigger--icon kbd {
    display: none !important;
}
[data-theme="dark"] .search-trigger--icon {
    color: #f5f5f7;
    border-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .search-trigger--icon:hover {
    background: rgba(255,255,255,0.06);
}

/* =========================================================================
   /leagues/ table — improved readability + horizontal scroll
   ========================================================================= */
.leagues-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-subtle, #e4e7ec);
    border-radius: 12px;
    background: var(--bg-elevated, #fff);
    margin-bottom: 32px;
}
.leagues-table {
    width: 100%;
    min-width: 760px;       /* triggers horizontal scroll on narrow screens */
    border-collapse: collapse;
    font-size: 15px;
}
.leagues-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #475569);
    padding: 14px 16px;
    white-space: nowrap;
    background: var(--bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}
.leagues-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle, #e4e7ec);
    vertical-align: middle;
}
.leagues-table tbody tr:last-child td { border-bottom: 0; }
.leagues-table tbody tr {
    transition: background 0.12s;
}
.leagues-table tbody tr:hover { background: var(--bg-subtle, #f8fafc); }

/* Column widths — desktop */
.leagues-table th.leagues-table__rank-col,
.leagues-table td.leagues-table__rank-col   { width: 70px;  text-align: center; }
.leagues-table th.leagues-table__name-col,
.leagues-table td.leagues-table__name-col   { min-width: 220px; }
.leagues-table th.leagues-table__country-col,
.leagues-table td.leagues-table__country-col{ width: 180px; }
.leagues-table th.leagues-table__rating-col,
.leagues-table td.leagues-table__rating-col { width: 180px; }
.leagues-table th.leagues-table__live-col,
.leagues-table td.leagues-table__live-col   { width: 110px; text-align: center; }

/* League cell — bigger crest + league name */
.leagues-table__league {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.leagues-table__league:hover .leagues-table__league-name {
    color: var(--brand-primary, #4f46e5);
}
.leagues-table__crest {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--bg-subtle);
    object-fit: contain;
    flex-shrink: 0;
}
.leagues-table__crest--placeholder {
    display: inline-block;
    background: linear-gradient(135deg, var(--bg-subtle), var(--border-subtle));
}
.leagues-table__league-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Country cell */
.leagues-table__country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.leagues-table__country-name {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Rating bar — visual + numeric */
.leagues-table__rating-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.leagues-table__rating-bar {
    flex: 1 1 auto;
    height: 6px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
    max-width: 140px;
}
.leagues-table__rating-fill {
    height: 100%;
    background: linear-gradient(90deg, #1d4ed8, #4f46e5);
    border-radius: 999px;
}
.leagues-table__rating-value {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

/* Live cell */
.leagues-table__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(220, 38, 38, 0.08);
    color: var(--live, #dc2626);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}
.leagues-table__live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--live, #dc2626);
    animation: livePulse 1.6s ease-in-out infinite;
}
.leagues-table__live-empty {
    color: var(--text-tertiary, #94a3b8);
    font-size: 14px;
}

/* Rank badge */
.leagues-table__rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
}

/* Mobile — hide less-critical columns at narrow widths, keep horizontal
   scroll for the rest so all data stays reachable. */
@media (max-width: 720px) {
    .leagues-table { font-size: 14px; min-width: 600px; }
    .leagues-table th,
    .leagues-table td { padding: 12px 12px; }
    .leagues-table th.leagues-table__country-col,
    .leagues-table td.leagues-table__country-col { display: none; }
    .leagues-table__league-name { max-width: 180px; }
}
@media (max-width: 480px) {
    .leagues-table { min-width: 460px; }
    .leagues-table th.leagues-table__rating-col,
    .leagues-table td.leagues-table__rating-col { display: none; }
}

/* Subtle scroll hint on the wrapper — gradient on the right edge */
.leagues-table-wrap::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
    pointer-events: none;
}

/* ── Match page: 40-60w Bulgarian intro under the hero ─────────────────── */
.fx-intro {
    margin: 18px auto 0;
    padding: 0 16px;
}
.fx-intro__lede {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary, #475569);
    margin: 0;
    max-width: 880px;
}
.fx-intro__lede a {
    color: var(--brand-primary, #4f46e5);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Match hero alias subtitle */
.fx-hero__title-alias {
    margin: 4px 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    letter-spacing: 0.02em;
}

/* ── League page: follow-up + updated stamp + FAQ accordion ───────────── */
.league-intro__lede-followup {
    margin-top: 8px;
    color: var(--text-secondary, #475569);
}
.league-intro__lede-followup strong { color: var(--text-primary); }
.league-intro__lede-followup a {
    color: var(--brand-primary, #4f46e5);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.league-intro__updated {
    margin: 6px 0 0;
    color: var(--text-tertiary, #94a3b8);
}
.league-intro__updated small { font-size: 12px; }

.league-faq {
    margin: 40px auto 24px;
    padding: 0 16px;
    max-width: 1100px;
}
.league-faq__title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-primary);
}
.league-faq__item {
    margin: 8px 0;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    overflow: hidden;
}
.league-faq__item summary {
    cursor: pointer;
    padding: 14px 18px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.league-faq__item summary::-webkit-details-marker { display: none; }
.league-faq__item summary::after {
    content: "+";
    color: var(--text-tertiary, #94a3b8);
    font-size: 20px;
    line-height: 1;
}
.league-faq__item[open] summary::after { content: "−"; }
.league-faq__item summary h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.league-faq__item p {
    padding: 0 18px 16px;
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 14px;
    line-height: 1.65;
}

/* ───────────────────────────────────────────────────────────────────────────
   /my-account/ — dashboard, gate, favorite cards, FAB heart button.
   All classes are server-rendered by inc/my-account.php +
   sm_render_favorite_fab(). JS handlers live in assets/js/my-account.js.
   ─────────────────────────────────────────────────────────────────────── */

/* Guest gate (logged-out state) ─────────────────────────────────────────── */
.sm-account-gate {
	max-width: 520px;
	margin: 48px auto;
	padding: 0 16px;
}
.sm-account-gate__card {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-4, 16px);
	box-shadow: 0 8px 28px rgba(10, 14, 26, .06);
	padding: 36px 28px 32px;
	text-align: center;
}
.sm-account-gate__icon {
	width: 64px; height: 64px;
	margin: 0 auto 16px;
	display: grid; place-items: center;
	font-size: 32px;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-primary, #1F5BD8) 0%, #6d28d9 100%);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(31, 91, 216, .35);
}
.sm-account-gate__h {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var(--text-primary);
}
.sm-account-gate__sub {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 22px;
}
.sm-account-gate__cta { margin: 0 0 16px; }
.sm-account-gate__alt {
	font-size: 13px;
	color: var(--text-tertiary);
	margin: 0;
}
.sm-account-gate__alt a {
	color: var(--brand-primary);
	font-weight: 600;
	text-decoration: none;
}
.sm-account-gate__alt a:hover { text-decoration: underline; }


/* Dashboard wrapper ─────────────────────────────────────────────────────── */
.sm-account {
	max-width: 1080px;
	margin: 24px auto 64px;
	padding: 0 16px;
}

/* Hero (avatar + identity) ──────────────────────────────────────────────── */
.sm-account__hero {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: center;
	padding: 22px 24px;
	background: linear-gradient(135deg, var(--bg-elevated, #fff) 0%, var(--bg-surface, #fafbfd) 100%);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-4, 16px);
	box-shadow: 0 4px 16px rgba(10, 14, 26, .04);
	margin-bottom: 20px;
}
.sm-account__avatar-wrap {
	position: relative;
	width: 96px; height: 96px;
}
.sm-account__avatar {
	width: 96px; height: 96px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--bg-muted, #e8ecf3);
	border: 3px solid var(--bg-elevated, #fff);
	box-shadow: 0 4px 14px rgba(10, 14, 26, .12);
	display: block;
}
.sm-account__avatar-edit {
	position: absolute;
	right: -4px; bottom: -4px;
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--brand-primary, #1F5BD8);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(31, 91, 216, .35);
	transition: transform .15s ease, background .15s;
}
.sm-account__avatar-edit:hover {
	background: var(--brand-primary-hover, #1849b3);
	transform: scale(1.08);
}
.sm-account__avatar-edit-icon { font-size: 14px; line-height: 1; }
.sm-account__avatar-msg {
	position: absolute;
	bottom: -28px; left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--text-tertiary);
	white-space: nowrap;
}
.sm-account__identity { min-width: 0; }
.sm-account__name {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 4px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
}
.sm-account__email {
	color: var(--text-secondary);
	margin: 0 0 4px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sm-account__meta {
	color: var(--text-tertiary);
	margin: 0 0 10px;
	font-size: 12px;
}
.sm-account__logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	background: var(--bg-muted, #e8ecf3);
	color: var(--text-secondary);
	text-decoration: none;
	transition: background .15s, color .15s;
}
.sm-account__logout:hover {
	background: var(--red-500, #ef4444);
	color: #fff;
}

/* Tabs ──────────────────────────────────────────────────────────────────── */
.sm-account__tabs {
	display: flex;
	gap: 4px;
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-3, 12px);
	padding: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: 16px;
}
.sm-account__tabs::-webkit-scrollbar { display: none; }
.sm-account__tab {
	flex: 1 1 auto;
	min-width: max-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--r-2, 8px);
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.sm-account__tab:hover { background: var(--bg-muted, #e8ecf3); color: var(--text-primary); }
.sm-account__tab.is-active {
	background: var(--brand-primary, #1F5BD8);
	color: #fff;
	box-shadow: 0 4px 12px rgba(31, 91, 216, .28);
}
.sm-account__tab-icon { font-size: 16px; line-height: 1; }
.sm-account__tab-count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--bg-muted, #e8ecf3);
	color: var(--text-secondary);
}
.sm-account__tab.is-active .sm-account__tab-count {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

/* Panels ────────────────────────────────────────────────────────────────── */
.sm-account__panel { display: none; }
.sm-account__panel.is-active { display: block; }

/* Favorites grid + cards ────────────────────────────────────────────────── */
.sm-fav-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sm-fav-grid--matches { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sm-fav-card {
	position: relative;
	display: flex;
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-3, 12px);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.sm-fav-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 14, 26, .08);
	border-color: var(--border-strong, #d3d9e4);
}
.sm-fav-card__main {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 44px 12px 12px;
	text-decoration: none;
	color: var(--text-primary);
	min-width: 0;
}
.sm-fav-card__media {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	background: var(--bg-muted, #e8ecf3);
	border-radius: 10px;
	overflow: hidden;
}
.sm-fav-card__media--round { border-radius: 999px; }
.sm-fav-card__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 4px;
}
.sm-fav-card__media--round img { padding: 0; object-fit: cover; }
.sm-fav-card__placeholder {
	font-weight: 700;
	font-size: 16px;
	color: var(--text-secondary);
	text-transform: uppercase;
}
.sm-fav-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sm-fav-card__name {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sm-fav-card__sub {
	font-size: 12px;
	color: var(--text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sm-fav-card__remove {
	position: absolute;
	top: 8px; right: 8px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-tertiary);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	transition: background .15s, color .15s, transform .15s;
	opacity: 0;
}
.sm-fav-card:hover .sm-fav-card__remove,
.sm-fav-card__remove:focus-visible { opacity: 1; }
.sm-fav-card__remove:hover {
	background: var(--red-500, #ef4444);
	color: #fff;
	transform: scale(1.06);
}

/* Match card variant — full-width, two-line layout ────────────────────── */
.sm-fav-card--match .sm-fav-card__main {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 14px 44px 12px 14px;
}
.sm-fav-card__match-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 10px;
	align-items: center;
}
.sm-fav-card__match-team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 600;
	font-size: 14px;
}
.sm-fav-card__match-team span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sm-fav-card__match-team img {
	width: 24px; height: 24px;
	object-fit: contain;
	flex: 0 0 auto;
}
.sm-fav-card__match-team--right {
	justify-content: flex-end;
	text-align: right;
}
.sm-fav-card__match-score {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 16px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--bg-muted, #e8ecf3);
	color: var(--text-primary);
	white-space: nowrap;
}
.sm-fav-card__match-vs {
	font-size: 11px;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}
.sm-fav-card__match-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--text-tertiary);
}
.sm-fav-card__match-meta span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Empty state ──────────────────────────────────────────────────────────── */
.sm-fav-empty {
	text-align: center;
	padding: 48px 20px;
	background: var(--bg-elevated, #fff);
	border: 1px dashed var(--border-strong, #d3d9e4);
	border-radius: var(--r-3, 12px);
}
.sm-fav-empty__icon {
	font-size: 40px;
	margin-bottom: 12px;
	color: var(--brand-primary, #1F5BD8);
}
.sm-fav-empty__msg {
	color: var(--text-secondary);
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
}
.sm-fav-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: var(--brand-primary, #1F5BD8);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	border-radius: 999px;
	transition: background .15s, transform .15s;
}
.sm-fav-empty__cta:hover {
	background: var(--brand-primary-hover, #1849b3);
	transform: translateY(-1px);
}

/* Favorite FAB (heart button, auto-injected on entity pages) ───────────── */
.sm-fav-fab {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0));
	width: 56px; height: 56px;
	border: 0;
	border-radius: 999px;
	background: var(--bg-elevated, #fff);
	color: var(--text-secondary);
	cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(10, 14, 26, .18), 0 0 0 1px var(--border-subtle, #e8ecf3) inset;
	z-index: 90;
	transition: transform .18s ease, background .18s, color .18s;
}
.sm-fav-fab:hover { transform: scale(1.05); }
.sm-fav-fab:active { transform: scale(.95); }
.sm-fav-fab.is-on {
	background: linear-gradient(135deg, #ff3b6b 0%, #d6336c 100%);
	color: #fff;
	box-shadow: 0 10px 28px rgba(214, 51, 108, .45);
}
.sm-fav-fab__icon svg { width: 26px; height: 26px; display: block; }
.sm-fav-fab__pulse,
.sm-fav-fab__ring { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; }
.sm-fav-fab__pulse {
	border: 2px solid #ff3b6b;
	opacity: 0;
}
.sm-fav-fab.just-added .sm-fav-fab__pulse {
	animation: sm-fav-pulse .6s ease-out;
}
@keyframes sm-fav-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	100% { transform: scale(1.6); opacity: 0;  }
}
.sm-fav-fab__tooltip {
	position: absolute;
	right: 64px;
	top: 50%;
	transform: translateY(-50%);
	padding: 6px 10px;
	background: var(--n-900, #0a0e1a);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.sm-fav-fab:hover .sm-fav-fab__tooltip,
.sm-fav-fab:focus-visible .sm-fav-fab__tooltip { opacity: 1; }
@media (max-width: 640px) {
	.sm-fav-fab__tooltip { display: none; }
}

/* Dark mode overrides ──────────────────────────────────────────────────── */
html[data-theme="dark"] .sm-account-gate__card,
html[data-theme="dark"] .sm-account__hero,
html[data-theme="dark"] .sm-account__tabs,
html[data-theme="dark"] .sm-fav-card,
html[data-theme="dark"] .sm-fav-empty,
html[data-theme="dark"] .sm-fav-fab {
	background: var(--bg-elevated, #181c26);
	border-color: var(--border-subtle, #292f3c);
}
html[data-theme="dark"] .sm-account__hero {
	background: linear-gradient(135deg, #181c26 0%, #0a0e1a 100%);
}
html[data-theme="dark"] .sm-fav-card__match-score,
html[data-theme="dark"] .sm-account__tab-count,
html[data-theme="dark"] .sm-account__logout,
html[data-theme="dark"] .sm-fav-card__media {
	background: var(--n-700, #292f3c);
}
html[data-theme="dark"] .sm-fav-fab {
	background: var(--n-800, #181c26);
	color: var(--text-secondary);
}

/* Mobile responsive tuning ─────────────────────────────────────────────── */
@media (max-width: 640px) {
	.sm-account__hero {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 24px 16px 16px;
	}
	.sm-account__avatar-wrap { margin: 0 auto; }
	.sm-account__name { font-size: 22px; }
	.sm-account__tab { padding: 10px 12px; font-size: 13px; }
	.sm-account__tab-icon { display: none; }
	.sm-fav-grid { grid-template-columns: 1fr; }
	.sm-fav-card__remove { opacity: 1; }
	.sm-fav-fab { width: 50px; height: 50px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0)); }
	.sm-fav-fab__icon svg { width: 22px; height: 22px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Favourite FAB v2 — improved heart icon for mobile + desktop.
   Overrides the earlier .sm-fav-fab rules (loaded later in the cascade).
   ─────────────────────────────────────────────────────────────────────── */

/* Base state — "Add to favourites" (not yet added) */
.sm-fav-fab {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0));
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background:
		linear-gradient(135deg, #fff 0%, #fafbfd 100%);
	color: #e11d48;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 90;
	box-shadow:
		0 12px 28px rgba(225, 29, 72, .18),
		0 4px 10px rgba(10, 14, 26, .08),
		inset 0 0 0 1px rgba(225, 29, 72, .15);
	transition:
		transform .22s cubic-bezier(.34, 1.56, .64, 1),
		box-shadow .22s ease,
		background .22s ease,
		color .22s ease;
}
.sm-fav-fab::before {
	/* outer gradient ring that "lights up" on hover */
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff3b6b 0%, #d6336c 50%, #8b5cf6 100%);
	opacity: 0;
	z-index: -1;
	transition: opacity .22s;
	filter: blur(8px);
}
.sm-fav-fab:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow:
		0 18px 34px rgba(225, 29, 72, .28),
		0 6px 14px rgba(10, 14, 26, .1),
		inset 0 0 0 1px rgba(225, 29, 72, .25);
}
.sm-fav-fab:hover::before { opacity: .55; }
.sm-fav-fab:active { transform: scale(.94); }
.sm-fav-fab:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 6px #ff3b6b,
		0 12px 28px rgba(225, 29, 72, .25);
}

/* Active state — "In favourites" */
.sm-fav-fab.is-on {
	background: linear-gradient(135deg, #ff3b6b 0%, #d6336c 60%, #8b5cf6 100%);
	color: #fff;
	box-shadow:
		0 14px 36px rgba(214, 51, 108, .50),
		0 6px 14px rgba(139, 92, 246, .22),
		inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.sm-fav-fab.is-on:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow:
		0 18px 42px rgba(214, 51, 108, .55),
		0 8px 16px rgba(139, 92, 246, .28),
		inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Heart icon */
.sm-fav-fab__icon {
	display: grid;
	place-items: center;
	transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.sm-fav-fab__icon svg {
	width: 28px;
	height: 28px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill .22s ease, stroke-width .22s ease, transform .22s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08));
}
.sm-fav-fab.is-on .sm-fav-fab__icon svg {
	fill: currentColor;
	stroke-width: 0;
}
.sm-fav-fab:hover .sm-fav-fab__icon { transform: scale(1.08); }
.sm-fav-fab.is-on .sm-fav-fab__icon { animation: sm-fab-heartbeat 1.8s ease-in-out infinite; }

@keyframes sm-fab-heartbeat {
	0%, 70%, 100% { transform: scale(1); }
	14%           { transform: scale(1.16); }
	28%           { transform: scale(1); }
	42%           { transform: scale(1.12); }
	56%           { transform: scale(1); }
}

/* Pulse + ring overlays — used for the toggle animation */
.sm-fav-fab__pulse,
.sm-fav-fab__ring {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	pointer-events: none;
}
.sm-fav-fab__pulse {
	border: 2px solid #ff3b6b;
	opacity: 0;
	transform-origin: center;
}
.sm-fav-fab.just-added .sm-fav-fab__pulse {
	animation: sm-fav-pulse-1 .8s ease-out;
}
.sm-fav-fab.just-added::after {
	/* second wave for a "ripple" feel */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid #d6336c;
	pointer-events: none;
	animation: sm-fav-pulse-2 .9s .15s ease-out;
}
@keyframes sm-fav-pulse-1 {
	0%   { transform: scale(1);    opacity: .85; }
	100% { transform: scale(1.85); opacity: 0;   }
}
@keyframes sm-fav-pulse-2 {
	0%   { transform: scale(1);    opacity: .65; }
	100% { transform: scale(2.1);  opacity: 0;   }
}

/* Tooltip — lift it on a small pill */
.sm-fav-fab__tooltip {
	position: absolute;
	right: 68px;
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	padding: 7px 12px;
	background: rgba(10, 14, 26, .92);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(10, 14, 26, .25);
	transition: opacity .15s ease, transform .15s ease;
}
.sm-fav-fab__tooltip::after {
	/* speech-bubble arrow */
	content: "";
	position: absolute;
	right: -4px;
	top: 50%;
	width: 8px;
	height: 8px;
	background: rgba(10, 14, 26, .92);
	transform: translateY(-50%) rotate(45deg);
}
.sm-fav-fab:hover .sm-fav-fab__tooltip,
.sm-fav-fab:focus-visible .sm-fav-fab__tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Dark mode */
html[data-theme="dark"] .sm-fav-fab {
	background: linear-gradient(135deg, #181c26 0%, #0f1320 100%);
	color: #ff6b9d;
	box-shadow:
		0 12px 28px rgba(0, 0, 0, .55),
		0 4px 10px rgba(0, 0, 0, .35),
		inset 0 0 0 1px rgba(255, 107, 157, .25);
}
html[data-theme="dark"] .sm-fav-fab.is-on {
	color: #fff;
	background: linear-gradient(135deg, #ff3b6b 0%, #d6336c 60%, #8b5cf6 100%);
}

/* Tablet + mobile */
@media (max-width: 768px) {
	.sm-fav-fab {
		width: 54px;
		height: 54px;
		right: 16px;
		/* Lift above WP admin bar/bottom nav on mobile */
		bottom: calc(18px + env(safe-area-inset-bottom, 0));
	}
	.sm-fav-fab__icon svg { width: 25px; height: 25px; }
	.sm-fav-fab__tooltip { display: none; }
}

/* When sm-bottom-nav (mobile bottom tab bar) is present, hover the FAB above it */
@media (max-width: 768px) {
	body:has(.sm-bottom-nav) .sm-fav-fab,
	body:has(.bottom-nav)    .sm-fav-fab {
		bottom: calc(78px + env(safe-area-inset-bottom, 0));
	}
}

/* Tiny screens — keep it compact but still tappable (44px is iOS guideline) */
@media (max-width: 380px) {
	.sm-fav-fab { width: 50px; height: 50px; right: 14px; }
	.sm-fav-fab__icon svg { width: 23px; height: 23px; }
}

/* Reduced motion — disable heartbeat + transforms */
@media (prefers-reduced-motion: reduce) {
	.sm-fav-fab,
	.sm-fav-fab__icon,
	.sm-fav-fab__icon svg,
	.sm-fav-fab__tooltip { transition: none; }
	.sm-fav-fab.is-on .sm-fav-fab__icon { animation: none; }
	.sm-fav-fab.just-added .sm-fav-fab__pulse,
	.sm-fav-fab.just-added::after { animation: none; }
}

/* Homepage entity-defining About block — see sm_homepage_hero shortcode */
.hp-about{padding:32px 0;background:var(--bg-surface,#fafbfd);border-top:1px solid var(--border-subtle,#e8ecf3);border-bottom:1px solid var(--border-subtle,#e8ecf3)}
.hp-about__inner{max-width:920px;margin:0 auto;padding:0 16px}
.hp-about__h{font-family:var(--font-display);font-size:22px;margin:0 0 12px;color:var(--text-primary)}
.hp-about__p{font-size:15px;line-height:1.6;color:var(--text-secondary);margin:0 0 10px}
.hp-about__p:last-child{margin-bottom:0}
html[data-theme="dark"] .hp-about{background:var(--bg-elevated,#181c26);border-color:var(--border-subtle,#292f3c)}

/* ─────────────────────────────────────────────────────────────────────────
   /predictions/ — long-form SEO + GEO/AIO content block.
   Rendered by [sm_predictions_seo] BELOW the fixtures list, ABOVE the footer.
   ───────────────────────────────────────────────────────────────────────── */
.pred-seo {
	padding: 56px 0 64px;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 91, 216, .08) 0%, transparent 60%),
		var(--bg-surface, #fafbfd);
	border-top: 1px solid var(--border-subtle, #e8ecf3);
	margin-top: 48px;
}
.pred-seo__inner { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Header */
.pred-seo__head { text-align: center; margin-bottom: 36px; }
.pred-seo__eyebrow {
	display: inline-block;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand-primary, #1F5BD8);
	background: rgba(31, 91, 216, .08);
	border-radius: 999px;
	margin: 0 0 16px;
}
.pred-seo__h {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--text-primary);
	letter-spacing: -.01em;
}
.pred-seo__lede {
	max-width: 720px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-secondary);
}
.pred-seo__h2 {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--text-primary);
}
.pred-seo__h2-sub {
	color: var(--text-tertiary);
	margin: 0 0 20px;
	font-size: 14px;
}

/* ─── Value-prop cards ───────────────────────────── */
.pred-seo__grid {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pred-seo__card {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-4, 16px);
	padding: 24px 22px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
	position: relative;
	overflow: hidden;
}
.pred-seo__card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand-primary, #1F5BD8) 0%, #8b5cf6 100%);
	opacity: 0;
	transition: opacity .2s ease;
}
.pred-seo__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(10, 14, 26, .08);
	border-color: var(--border-strong, #d3d9e4);
}
.pred-seo__card:hover::before { opacity: 1; }
.pred-seo__card-icon {
	display: inline-block;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 14px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08));
}
.pred-seo__card-h {
	font-family: var(--font-display);
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--text-primary);
}
.pred-seo__card-p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-secondary);
	margin: 0;
}

/* ─── How it works steps ─────────────────────────── */
.pred-seo__howto {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-4, 16px);
	padding: 32px;
	margin-bottom: 48px;
}
.pred-seo__steps {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 22px;
	counter-reset: stepc;
}
.pred-seo__steps > li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: start;
}
.pred-seo__step-num {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-primary, #1F5BD8) 0%, #6d28d9 100%);
	box-shadow: 0 4px 12px rgba(31, 91, 216, .25);
}
.pred-seo__steps h3 {
	font-family: var(--font-display);
	font-size: 16px;
	margin: 0 0 4px;
	color: var(--text-primary);
}
.pred-seo__steps p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: var(--text-secondary);
}
.pred-seo__steps a {
	color: var(--brand-primary, #1F5BD8);
	font-weight: 600;
	text-decoration: none;
}
.pred-seo__steps a:hover { text-decoration: underline; }

/* ─── Glossary (definition list) ─────────────────── */
.pred-seo__glossary {
	margin-bottom: 48px;
}
.pred-seo__terms {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pred-seo__term {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-left: 4px solid var(--brand-primary, #1F5BD8);
	border-radius: 0 var(--r-3, 12px) var(--r-3, 12px) 0;
	padding: 16px 18px;
	transition: border-left-color .2s;
}
.pred-seo__term:nth-child(2n) { border-left-color: #8b5cf6; }
.pred-seo__term:nth-child(3n) { border-left-color: var(--brand-secondary, #00d68f); }
.pred-seo__term:nth-child(4n) { border-left-color: var(--premium-solid, #ffb020); }
.pred-seo__term dt {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-primary);
	margin-bottom: 4px;
}
.pred-seo__term dd {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-secondary);
}

/* ─── Methodology CTA banner ─────────────────────── */
.pred-seo__cta {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 0 48px;
	padding: 28px 32px;
	background: linear-gradient(135deg, #1F5BD8 0%, #6d28d9 60%, #8b5cf6 100%);
	color: #fff;
	border-radius: var(--r-4, 16px);
	text-decoration: none;
	box-shadow: 0 14px 36px rgba(31, 91, 216, .22);
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}
.pred-seo__cta::after {
	content: '';
	position: absolute;
	right: -40px;
	top: -40px;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 70%);
	pointer-events: none;
}
.pred-seo__cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px rgba(31, 91, 216, .35);
}
.pred-seo__cta-body { flex: 1; }
.pred-seo__cta-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
	margin: 0 0 6px;
}
.pred-seo__cta-h {
	font-family: var(--font-display);
	font-size: 20px;
	margin: 0 0 6px;
	color: #fff;
}
.pred-seo__cta-p {
	font-size: 14px;
	line-height: 1.55;
	opacity: .92;
	margin: 0;
	max-width: 580px;
}
.pred-seo__cta-arrow {
	font-size: 32px;
	line-height: 1;
	flex: 0 0 auto;
	transition: transform .25s ease;
}
.pred-seo__cta:hover .pred-seo__cta-arrow { transform: translateX(6px); }

/* ─── FAQ accordion ──────────────────────────────── */
.pred-seo__faq { margin-top: 8px; }
.pred-seo__faq-item {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-3, 12px);
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.pred-seo__faq-item[open] {
	border-color: var(--brand-primary, #1F5BD8);
	box-shadow: 0 4px 16px rgba(31, 91, 216, .08);
}
.pred-seo__faq-item summary {
	cursor: pointer;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
}
.pred-seo__faq-item summary::-webkit-details-marker { display: none; }
.pred-seo__faq-item summary h3 {
	font-family: var(--font-display);
	font-size: 16px;
	margin: 0;
	color: var(--text-primary);
	flex: 1;
}
.pred-seo__faq-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	position: relative;
	border-radius: 999px;
	background: var(--bg-muted, #e8ecf3);
	transition: background .2s, transform .25s ease;
}
.pred-seo__faq-icon::before,
.pred-seo__faq-icon::after {
	content: '';
	position: absolute;
	background: var(--text-primary, #0a0e1a);
	border-radius: 1px;
}
.pred-seo__faq-icon::before { left: 5px; right: 5px; top: 50%; height: 2px; transform: translateY(-50%); }
.pred-seo__faq-icon::after  { top: 5px; bottom: 5px; left: 50%; width: 2px; transform: translateX(-50%); transition: transform .25s ease, opacity .2s; }
.pred-seo__faq-item[open] .pred-seo__faq-icon {
	background: var(--brand-primary, #1F5BD8);
	transform: rotate(180deg);
}
.pred-seo__faq-item[open] .pred-seo__faq-icon::before,
.pred-seo__faq-item[open] .pred-seo__faq-icon::after { background: #fff; }
.pred-seo__faq-item[open] .pred-seo__faq-icon::after { opacity: 0; }
.pred-seo__faq-body {
	padding: 0 20px 18px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-secondary);
}
.pred-seo__faq-body p { margin: 0; }

/* ─── Dark mode ──────────────────────────────────── */
html[data-theme="dark"] .pred-seo {
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 91, 216, .15) 0%, transparent 60%),
		var(--bg-base, #0a0e1a);
	border-top-color: var(--border-subtle, #292f3c);
}
html[data-theme="dark"] .pred-seo__card,
html[data-theme="dark"] .pred-seo__howto,
html[data-theme="dark"] .pred-seo__term,
html[data-theme="dark"] .pred-seo__faq-item {
	background: var(--bg-elevated, #181c26);
	border-color: var(--border-subtle, #292f3c);
}
html[data-theme="dark"] .pred-seo__faq-icon { background: var(--n-700, #292f3c); }
html[data-theme="dark"] .pred-seo__faq-icon::before,
html[data-theme="dark"] .pred-seo__faq-icon::after { background: var(--text-primary, #fff); }

/* ─── Mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
	.pred-seo { padding: 40px 0 48px; }
	.pred-seo__howto { padding: 24px 18px; }
	.pred-seo__cta { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 22px; }
	.pred-seo__cta-arrow { align-self: flex-end; }
	.pred-seo__steps > li { grid-template-columns: 36px 1fr; gap: 12px; }
	.pred-seo__step-num { width: 36px; height: 36px; font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   /predictions/ contrast pass — overrides the original .pred-seo CTA + step
   styles so every word is readable on the purple gradient. The original
   used opacity: .85/.92 on white text, which against the blue→violet→pink
   gradient produced near-illegible mid-tones. Replaced opacity with solid
   color + text-shadow so contrast is guaranteed at every stop of the
   gradient.
   ───────────────────────────────────────────────────────────────────────── */

/* CTA banner — pure white text, no opacity drop, drop shadow for legibility */
.pred-seo__cta {
	/* Slightly darker gradient — better contrast with white text everywhere.
	   The original ended in #8b5cf6 (light violet) which paired with .92-
	   opacity white was washed out. New gradient stays in the mid-tone
	   range so contrast is constant. */
	background:
		linear-gradient(135deg, #1849b3 0%, #5b21b6 55%, #7c3aed 100%) !important;
}
.pred-seo__cta-eyebrow {
	color: #ffd84d !important;            /* whistle-yellow brand accent — pops */
	opacity: 1 !important;
	text-shadow: 0 1px 2px rgba(10, 14, 26, .35);
}
.pred-seo__cta-h {
	color: #ffffff !important;
	opacity: 1 !important;
	text-shadow: 0 1px 3px rgba(10, 14, 26, .35);
	font-size: 22px;
	font-weight: 700;
}
.pred-seo__cta-p {
	color: #ffffff !important;
	opacity: 1 !important;
	text-shadow: 0 1px 2px rgba(10, 14, 26, .30);
	font-size: 15px;
	line-height: 1.6;
}
.pred-seo__cta-arrow {
	color: #ffffff !important;
	background: rgba(255, 255, 255, .18);
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	font-size: 22px;
	flex: 0 0 auto;
	transition: transform .25s ease, background .2s ease;
}
.pred-seo__cta:hover .pred-seo__cta-arrow {
	background: rgba(255, 255, 255, .30);
	transform: translateX(6px);
}

/* Number step circles — make sure they remain solid against any bg */
.pred-seo__step-num {
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(10, 14, 26, .25);
}

/* Defensive: force white solid card bg + dark text so no parent gradient
   from cache / Breeze post-processing can bleed in and wash out content */
.pred-seo__card,
.pred-seo__howto,
.pred-seo__term,
.pred-seo__faq-item {
	background-color: #ffffff;
}
.pred-seo__card-h,
.pred-seo__howto h2,
.pred-seo__howto h3,
.pred-seo__term dt,
.pred-seo__faq-item summary h3 {
	color: #0a0e1a !important;
}
.pred-seo__card-p,
.pred-seo__steps p,
.pred-seo__term dd,
.pred-seo__faq-body,
.pred-seo__faq-body p {
	color: #404756 !important;
}

/* Dark mode — explicit dark-elevated bg + light text on cards/howto/terms */
html[data-theme="dark"] .pred-seo__card,
html[data-theme="dark"] .pred-seo__howto,
html[data-theme="dark"] .pred-seo__term,
html[data-theme="dark"] .pred-seo__faq-item {
	background-color: #181c26 !important;
	border-color: #292f3c !important;
}
html[data-theme="dark"] .pred-seo__card-h,
html[data-theme="dark"] .pred-seo__howto h2,
html[data-theme="dark"] .pred-seo__howto h3,
html[data-theme="dark"] .pred-seo__term dt,
html[data-theme="dark"] .pred-seo__faq-item summary h3 {
	color: #ffffff !important;
}
html[data-theme="dark"] .pred-seo__card-p,
html[data-theme="dark"] .pred-seo__steps p,
html[data-theme="dark"] .pred-seo__term dd,
html[data-theme="dark"] .pred-seo__faq-body,
html[data-theme="dark"] .pred-seo__faq-body p {
	color: #b1bacb !important;
}
html[data-theme="dark"] .pred-seo__h,
html[data-theme="dark"] .pred-seo__h2,
html[data-theme="dark"] .pred-seo__lede,
html[data-theme="dark"] .pred-seo__h2-sub {
	color: #ffffff !important;
}
html[data-theme="dark"] .pred-seo__lede,
html[data-theme="dark"] .pred-seo__h2-sub {
	color: #d3d9e4 !important;
}

/* Mobile — stack CTA cleanly */
@media (max-width: 640px) {
	.pred-seo__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 22px 20px;
	}
	.pred-seo__cta-arrow {
		align-self: flex-end;
		margin-top: -52px;
	}
	.pred-seo__cta-h { font-size: 19px; }
	.pred-seo__cta-p { font-size: 14.5px; }
}

/* /shortcodes/ — admin shortcode directory (sm-shortcodes-dir) */
.sm-shortcodes-dir { max-width: 980px; margin: 32px auto 64px; padding: 0 16px; }
.sm-shortcodes-dir__head { margin-bottom: 24px; }
.sm-shortcodes-dir__pill {
	display: inline-block;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
	border-radius: 999px;
	margin: 0 0 14px;
}
.sm-shortcodes-dir__h {
	font-family: var(--font-display);
	font-size: 28px;
	margin: 0 0 8px;
	color: var(--text-primary);
}
.sm-shortcodes-dir__lede {
	color: var(--text-secondary);
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
}
.sm-shortcodes-dir__filter input {
	width: 100%;
	max-width: 380px;
	padding: 10px 14px;
	border: 1px solid var(--border-strong, #d3d9e4);
	border-radius: var(--r-2, 8px);
	font-size: 14px;
	background: #fff;
	color: var(--text-primary);
}
.sm-shortcodes-dir__filter input:focus {
	outline: 2px solid var(--brand-primary, #1F5BD8);
	outline-offset: 1px;
}
.sm-shortcodes-dir__group {
	background: #fff;
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-3, 12px);
	margin-bottom: 14px;
	overflow: hidden;
}
.sm-shortcodes-dir__group summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 18px;
	background: var(--bg-surface, #fafbfd);
	border-bottom: 1px solid var(--border-subtle, #e8ecf3);
}
.sm-shortcodes-dir__group summary::-webkit-details-marker { display: none; }
.sm-shortcodes-dir__group summary h3 {
	display: inline-block;
	margin: 0;
	font-size: 15px;
	color: var(--text-primary);
}
.sm-shortcodes-dir__count { color: var(--text-tertiary); font-weight: 500; }
.sm-shortcodes-dir__list { list-style: none; padding: 0; margin: 0; }
.sm-shortcodes-dir__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border-subtle, #e8ecf3);
}
.sm-shortcodes-dir__item:last-child { border-bottom: 0; }
.sm-shortcodes-dir__item:hover { background: var(--bg-surface, #fafbfd); }
.sm-shortcodes-dir__item-main { flex: 1; min-width: 0; }
.sm-shortcodes-dir__tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 13px;
	padding: 3px 8px;
	background: var(--n-100, #e8ecf3);
	color: var(--brand-primary, #1F5BD8);
	border-radius: 6px;
	margin: 0 0 4px;
}
.sm-shortcodes-dir__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary);
}
.sm-shortcodes-dir__copy {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--brand-primary, #1F5BD8);
	background: #fff;
	color: var(--brand-primary, #1F5BD8);
	border-radius: var(--r-2, 8px);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s, color .15s;
}
.sm-shortcodes-dir__copy:hover { background: var(--brand-primary, #1F5BD8); color: #fff; }
.sm-shortcodes-dir__copy.is-copied {
	background: var(--green-500, #10b981);
	border-color: var(--green-500, #10b981);
	color: #fff;
}
html[data-theme="dark"] .sm-shortcodes-dir__group,
html[data-theme="dark"] .sm-shortcodes-dir__filter input {
	background: var(--bg-elevated, #181c26);
	border-color: var(--border-subtle, #292f3c);
	color: var(--text-primary, #fff);
}
html[data-theme="dark"] .sm-shortcodes-dir__group summary { background: #0f1320; }
html[data-theme="dark"] .sm-shortcodes-dir__item:hover { background: #0f1320; }
html[data-theme="dark"] .sm-shortcodes-dir__tag { background: #292f3c; color: #7aa6fc; }

@media (max-width: 640px) {
	.sm-shortcodes-dir__item { flex-direction: column; align-items: stretch; gap: 10px; }
	.sm-shortcodes-dir__copy { align-self: flex-start; }
}

/* World Cup 2026 — Стадиони tab */
.wc-venues__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px;
	background: linear-gradient(135deg, var(--brand-primary, #1F5BD8) 0%, #6d28d9 100%);
	border-radius: var(--r-3, 12px);
	color: #fff;
	box-shadow: 0 10px 28px rgba(31, 91, 216, .22);
}
.wc-venues__summary > div {
	text-align: center;
	padding: 8px 4px;
}
.wc-venues__big {
	display: block;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.wc-venues__lbl {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
	margin-top: 4px;
}
.wc-venues__country {
	margin-bottom: 24px;
}
.wc-venues__country-h {
	font-family: var(--font-display);
	font-size: 18px;
	margin: 0 0 12px;
	color: var(--text-primary);
}
.wc-venues__country-count {
	color: var(--text-tertiary);
	font-weight: 500;
	font-size: 14px;
}
.wc-venues__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.wc-venue {
	background: var(--bg-elevated, #fff);
	border: 1px solid var(--border-subtle, #e8ecf3);
	border-radius: var(--r-3, 12px);
	padding: 16px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.wc-venue:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(10, 14, 26, .08);
	border-color: var(--border-strong, #d3d9e4);
}
.wc-venue__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.wc-venue__name {
	font-family: var(--font-display);
	font-size: 15px;
	margin: 0;
	color: var(--text-primary);
	line-height: 1.3;
}
.wc-venue__matches {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(31, 91, 216, .1);
	color: var(--brand-primary, #1F5BD8);
	white-space: nowrap;
}
.wc-venue__meta,
.wc-venue__cap {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
	margin: 4px 0 0;
}
.wc-venue__meta svg,
.wc-venue__cap svg {
	flex: 0 0 auto;
	color: var(--brand-primary, #1F5BD8);
}
html[data-theme="dark"] .wc-venue {
	background: var(--bg-elevated, #181c26);
	border-color: var(--border-subtle, #292f3c);
}
html[data-theme="dark"] .wc-venue__matches {
	background: rgba(122, 166, 252, .12);
	color: #7aa6fc;
}

/* ── World Cup 2026: intro, live/upcoming matches, FAQ, tipster ─────────── */
.wc-intro { margin: 8px 0 4px; }
.wc-intro__inner { max-width: 860px; }
.wc-intro__inner p { color: var(--text-secondary, #475467); line-height: 1.7; margin: 0 0 12px; font-size: 16px; }
.wc-intro__inner a { color: var(--brand-primary, #3b82f6); font-weight: 600; }

.wc-matches { margin: 28px 0; }
.wc-matches__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wc-matches__title { font-size: 20px; font-weight: 800; margin: 0; }
.wc-matches__more { font-size: 13px; font-weight: 600; color: var(--brand-primary, #3b82f6); text-decoration: none; white-space: nowrap; }
.wc-matches__more:hover { text-decoration: underline; }
.wc-matches__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wc-matches__link {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec); border-radius: 12px;
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wc-matches__link:hover { border-color: var(--brand-primary, #3b82f6); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.wc-matches__row--live .wc-matches__link { border-color: rgba(217,45,32,.35); }
.wc-matches__status { font-size: 12px; font-weight: 700; color: var(--text-secondary, #667085); text-align: center; }
.wc-matches__live { display: inline-flex; align-items: center; gap: 5px; color: #b42318; }
.wc-matches__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #d92d20; animation: leagues-live-pulse 1.6s ease-in-out infinite; }
.wc-matches__teams { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wc-matches__team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.wc-matches__team--away { flex-direction: row-reverse; text-align: right; }
.wc-matches__crest { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.wc-matches__crest--ph { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-subtle, #f1f5f9); font-weight: 800; font-size: 12px; color: var(--text-secondary, #667085); }
.wc-matches__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-matches__score { font-weight: 800; font-size: 14px; color: var(--text-primary, #1a202c); padding: 0 6px; white-space: nowrap; }
.wc-matches__pick { font-size: 12px; color: var(--text-secondary, #667085); text-align: right; white-space: nowrap; }
.wc-matches__pick-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
@media (max-width: 600px) {
  .wc-matches__link { grid-template-columns: 56px 1fr; }
  .wc-matches__pick { grid-column: 2; text-align: left; margin-top: 2px; }
  .wc-matches__name { font-size: 13px; }
}

/* WC + tipster FAQ (shares the pricing-faq look) */
.wc-faq { max-width: 860px; margin: 40px auto 8px; }
.wc-faq__title { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 18px; }
.wc-faq__list { display: flex; flex-direction: column; gap: 10px; }
.wc-faq__item { background: var(--bg-elevated, #fff); border: 1px solid var(--border-subtle, #e4e7ec); border-radius: 12px; padding: 2px 18px; }
.wc-faq__q { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; font-weight: 700; font-size: 15px; color: var(--text-primary, #1a202c); }
.wc-faq__q::-webkit-details-marker { display: none; }
.wc-faq__q::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--brand-primary, #3b82f6); }
.wc-faq__item[open] .wc-faq__q::after { content: "−"; }
.wc-faq__a { padding: 0 0 18px; color: var(--text-secondary, #667085); font-size: 14px; line-height: 1.65; }
.wc-faq__a p { margin: 0; }

/* WC tipster page body */
.wc-tipster__intro p { font-size: 16px; line-height: 1.7; color: var(--text-secondary, #475467); }
.wc-tipster__intro a, .wc-tipster__body a { color: var(--brand-primary, #3b82f6); font-weight: 600; }
.wc-tipster__body { max-width: 860px; }
.wc-tipster__body h2 { font-size: 20px; font-weight: 800; margin: 28px 0 10px; }
.wc-tipster__body p { line-height: 1.7; color: var(--text-secondary, #475467); margin: 0 0 12px; }
.wc-tipster__body ul { margin: 0 0 14px; padding-left: 20px; color: var(--text-secondary, #475467); line-height: 1.7; }
.wc-tipster__body li { margin: 4px 0; }

/* ── Sports brand: after-hero promo + review hero ──────────────────────── */
.brand-promo { margin: 28px 0; background: linear-gradient(135deg, #0b1525 0%, #16233b 100%); }
@media (max-width: 768px) { .brand-promo { margin: 20px 0; } }
.brand-promo__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 24px; }
.brand-promo__eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8aa0c6; flex-basis: 100%; }
.brand-promo__media { flex-shrink: 0; display: inline-flex; align-items: center; }
.brand-promo__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.brand-promo__logo--text { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.brand-promo__body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1; min-width: 0; }
.brand-promo__headline { color: #fff; font-weight: 700; font-size: 16px; margin: 0; flex: 1; min-width: 180px; }
.brand-promo__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand-promo__cta { white-space: nowrap; }
.brand-promo__review { color: #cdd9ee; font-weight: 600; font-size: 14px; text-decoration: underline; white-space: nowrap; }
.brand-promo__review:hover { color: #fff; }
.brand-promo__note { flex-basis: 100%; margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: #7e93b8; }
@media (max-width: 640px) { .brand-promo__headline { min-width: 100%; } }

.brand-hero { background: linear-gradient(135deg, #0b1525 0%, #16233b 100%); text-align: center; }
.brand-hero__inner { padding: 40px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.brand-hero__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8aa0c6; }
.brand-hero__logo { max-width: 240px; height: auto; }
.brand-hero__logo--text { color: #fff; font-weight: 800; font-size: 34px; }
.brand-hero__title { color: #fff; font-size: 30px; font-weight: 800; margin: 4px 0 0; }
.brand-hero__license { color: #9fb2d4; font-size: 14px; margin: 0; }
.brand-hero__actions { margin-top: 6px; }
.brand-hero__disclosure { max-width: 720px; margin: 10px auto 0; font-size: 12px; line-height: 1.6; color: #7e93b8; }

.brand-review__body { max-width: 820px; margin: 0 auto; padding: 28px 24px; }
.brand-review__body h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.brand-review__body h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
.brand-review__body p { line-height: 1.75; color: var(--text-secondary, #475467); margin: 0 0 14px; }
.brand-review__body ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary, #475467); line-height: 1.7; }
.brand-review__body li { margin: 5px 0; }
.brand-review__body strong { color: var(--text-primary, #1a202c); }
.brand-faq { max-width: 820px; }

/* Affiliate disclosure note (about/contact/inline) */
.sm-affiliate-disclosure { font-size: 13px; line-height: 1.65; color: var(--text-secondary, #667085); background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border-subtle, #e4e7ec); border-left: 3px solid var(--brand-primary, #3b82f6); border-radius: 8px; padding: 14px 16px; margin: 18px 0; }
.sm-affiliate-disclosure p { margin: 0; }

/* ── SportMonks market predictions (Пазарни вероятности) ─────────────────
   Uses theme tokens (tokens.css) so light AND dark render correctly. */
.sm-mkt{margin:24px 0;padding:20px;border:1px solid var(--border-subtle,#e5e7eb);border-radius:14px;background:var(--bg-elevated,#fff)}
.sm-mkt__title{margin:0 0 6px;font-size:1.15rem;color:var(--text-primary,#111)}
.sm-mkt__intro{margin:0 0 18px;font-size:.88rem;color:var(--text-secondary,#6b7280);line-height:1.55}
.sm-mkt__group{margin:0 0 16px}
.sm-mkt__group-h{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary,#6b7280)}
.sm-mkt__row{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:8px 16px;align-items:center;padding:9px 0;border-top:1px solid var(--border-subtle,#eef0f3)}
.sm-mkt__label{font-weight:600;font-size:.9rem;color:var(--text-primary,#111)}
.sm-mkt__bars{display:flex;flex-direction:column;gap:6px}
.sm-mkt__bar{display:grid;grid-template-columns:minmax(96px,auto) 1fr 50px;gap:8px;align-items:center;font-size:.82rem;color:var(--text-secondary,#374151)}
.sm-mkt__bar-track{height:8px;border-radius:6px;background:var(--border-subtle,#eef0f3);overflow:hidden}
.sm-mkt__bar-fill{display:block;height:100%;border-radius:6px;background:#16a34a}
[data-theme="dark"] .sm-mkt__bar-fill{background:#22c55e}
.sm-mkt__bar-pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary,#111)}
@media(max-width:560px){.sm-mkt__row{grid-template-columns:1fr;gap:4px}}

/* ── WC sub-pages: full schedule (/програма/) + scorers (/голмайстори/) ── */
.wcsd{display:flex;flex-direction:column;gap:26px;margin:8px 0 32px}
.wcsd-day__h{font-size:1.05rem;margin:0 0 12px;color:var(--text-primary)}
.wcsd-day__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wcsd-match{display:block;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-elevated);text-decoration:none;color:var(--text-primary);transition:border-color .15s,box-shadow .15s}
.wcsd-match:hover{border-color:var(--brand-primary);box-shadow:var(--sh-1);color:var(--text-primary)}
.wcsd-match__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.75rem}
.wcsd-match__badge{font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}
.wcsd-match__state{color:var(--text-secondary);font-variant-numeric:tabular-nums}
.wcsd-match__state--live{color:#ef4444;font-weight:700}
.wcsd-team{display:flex;align-items:center;gap:10px;padding:4px 0}
.wcsd-team__crest{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.wcsd-team__crest--ph{display:inline-block;background:var(--bg-subtle);border-radius:50%}
.wcsd-team__name{flex:1;min-width:0;font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcsd-team__score{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--text-secondary)}
.wcsd-team--win .wcsd-team__score,.wcsd-team--win .wcsd-team__name{color:var(--text-primary)}
.wcsd-team--win .wcsd-team__score{font-weight:800}
.wcts{width:100%;border-collapse:collapse;margin:8px 0 32px}
.wcts th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-strong)}
.wcts td{padding:10px 12px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);vertical-align:middle}
.wcts__pos{width:36px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.wcts__num{text-align:right;font-variant-numeric:tabular-nums}
.wcts__num--goals{font-weight:800}
.wcts__player{display:flex;align-items:center;gap:12px;font-weight:600}
.wcts__player-link{color:var(--text-primary);text-decoration:none}
.wcts__player-link:hover{color:var(--brand-primary)}
.wcts__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--bg-subtle);flex-shrink:0}
.wcts__photo--ph{display:inline-block}
.wcts__team{display:flex;align-items:center;gap:8px}
.wcts__crest{width:22px;height:22px;object-fit:contain}
@media(max-width:560px){.wcts__photo{width:40px;height:40px}.wcts th:nth-child(5),.wcts td:nth-child(5),.wcts th:nth-child(6),.wcts td:nth-child(6){display:none}}

/* ── Bookmaker odds (match pages + tipster cards) ─────────────────────── */
.fx-odds {
  margin-top: 24px;
  padding: 20px 20px 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
}
.fx-odds__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary, #101828);
  margin: 0 0 14px;
}
.fx-odds__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fx-odds__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-odds__table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  white-space: nowrap;
}
.fx-odds__table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
  vertical-align: middle;
}
.fx-odds__table tbody tr:last-child td { border-bottom: none; }
.fx-odds__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-odds__bm { display: block; font-size: 11.5px; color: var(--text-secondary, #667085); }
.fx-odds__model { font-weight: 700; color: var(--brand-primary, #4f46e5); }
.fx-odds__foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary, #667085);
}
@media (max-width: 560px) {
  .fx-odds { padding: 14px 12px 10px; }
  .fx-odds__table { font-size: 13px; }
  .fx-odds__table th, .fx-odds__table td { padding: 7px 6px; }
}

.tipster-card__odds-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tipster-card__odds-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}
.tipster-card__odds-val { font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tipster-card__odds-val strong {
    font-size: 17px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #047857;
}
.tipster-card__odds-val--na { color: var(--text-tertiary, #94a3b8); font-size: 15px; }
.tipster-card__odds-bm {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 110px;
}

/* Dark-mode counterparts for the tipster table UI elements. */
[data-theme="dark"] .tipster-mini.is-yes { color: #a7f3d0; background: rgba(4, 120, 87, 0.20); border-color: rgba(16, 185, 129, 0.35); }
[data-theme="dark"] .tipster-mini.is-no  { color: #fca5a5; background: rgba(185, 28, 28, 0.18); border-color: rgba(239, 68, 68, 0.35); }
[data-theme="dark"] .tipster-card__odds-val strong { color: #34d399; }
[data-theme="dark"] .tipster-conf.is-high .tipster-conf__num { color: #34d399; }
[data-theme="dark"] .tipster-conf.is-mid  .tipster-conf__num { color: #fbbf24; }
[data-theme="dark"] .tipster-card:nth-child(even) { background: color-mix(in srgb, var(--bg-elevated, #111827) 94%, #6366f1 6%); }
[data-theme="dark"] .tipster-card__pick-text { background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.4); color: #a5b4fc; }

/* ═══════════════════════════════════════════════════════════════════════
   Team-page UI pass (2026-08-19): topscorers list styling (was completely
   unstyled), wpautop artifact guards, hero alias contrast, season-form
   theming, squad mobile compaction, section rhythm.
   ═══════════════════════════════════════════════════════════════════════ */

/* Team "Голмайстори този сезон" — was a bare default <ol>. */
.topscorers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--bg-elevated, #fff); border: 1px solid var(--border-subtle, #e4e7ec); border-radius: 12px; overflow: hidden; }
.topscorers-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle, #e4e7ec); }
.topscorers-row:last-child { border-bottom: 0; }
.topscorers-row:nth-child(even) { background: var(--bg-subtle, #f8fafc); }
.topscorers-row:hover { background: color-mix(in srgb, var(--brand-primary, #1F5BD8) 6%, transparent); }
.ts-pos { flex: 0 0 24px; text-align: center; font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700; color: var(--text-tertiary, #5e6678); font-variant-numeric: tabular-nums; }
.ts-avatar, .ts-avatar--ph { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-subtle, #f4f6fa); border: 1px solid var(--border-subtle, #e4e7ec); }
.ts-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-primary, #111827); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-name:hover { color: var(--brand-primary, #1F5BD8); }
.ts-stats { flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-secondary, #475569); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-stats strong { font-size: 15px; color: var(--text-primary, #111827); }
@media (max-width: 560px) {
  .topscorers-row { padding: 8px 10px; gap: 10px; }
  .ts-avatar, .ts-avatar--ph { flex-basis: 40px; width: 40px; height: 40px; }
}

/* Section header rhythm on team pages. */
.team-season-form .section-hdr,
.team-topscorers .section-hdr { margin-bottom: 16px; }

/* wpautop artifact guards (stray <br>/<p> injected between inline emits). */
.tab-nav br, .team-form-strip__tally br, .team-squad-cta br { display: none; }
.team-squad-cta > p:empty, .team-info__about > p:empty { display: none; }

/* Hero alias readable on the always-dark hero gradient (was ~2.9:1). */
.page-hero .page-hero__title-alias { color: rgba(255, 255, 255, 0.68); }

/* Season-form tiles: follow the theme instead of a hard-coded dark gradient. */
.team-season-form__tile { background: var(--bg-elevated, #fff); border: 1px solid var(--border-subtle, #e4e7ec); }
.team-season-form__tile .team-season-form__num { color: var(--text-primary, #111827); }
.team-season-form__tile .team-season-form__lbl { color: var(--text-tertiary, #5e6678); }
[data-theme="dark"] .team-season-form__tile { background: linear-gradient(180deg, #1c2331, #131826); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .team-season-form__tile .team-season-form__num { color: #fff; }
[data-theme="dark"] .team-season-form__tile .team-season-form__lbl { color: rgba(255,255,255,0.6); }

/* Squad grid on phones: two readable columns. */
@media (max-width: 560px) {
  .squad-section__cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .player-card { padding: 10px; gap: 8px; }
}

/* ── /odds/ + /bookmakers/ hub pages ─────────────────────────────────── */
.odds-hub__table td, .bookmakers-hub__table td { vertical-align: middle; }
.odds-hub__avg { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.odds-hub__best {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary, #667085);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The label lives in CSS, not HTML: the number is data-no-translation (MT
   once turned „до 19.00" into "until 7.00 pm"), and ::before text bypasses
   the translator, so each language declares its own prefix here. */
.odds-hub__best::before { content: "до "; }
html[lang^="en"] .odds-hub__best::before { content: "best "; }
.odds-hub .fx-section-h { margin-top: 26px; }
.bookmakers-hub__table td:nth-child(2) { white-space: nowrap; }
@media (max-width: 560px) {
  .odds-hub__table td, .odds-hub__table th { padding: 7px 4px; font-size: 12.5px; }
  /* Double-digit odds ("best 19.00") are the one case that can't fit three
     abreast at 375px — let the label wrap above the number there only. */
  .odds-hub__table .odds-hub__best { white-space: normal; }

  /* The match-page mobile rules (.fx-odds__table col-2 hide + 110px
     first-col floor) must NOT sweep the hub tables: here column 2 IS the
     match / bookmaker name — the load-bearing column. Restore it, drop the
     decorative league column instead, release the time/# column floor. */
  .fx-odds__table.odds-hub__table th:nth-child(2),
  .fx-odds__table.odds-hub__table td:nth-child(2) { display: table-cell; }
  .fx-odds__table.odds-hub__table th:nth-child(3),
  .fx-odds__table.odds-hub__table td:nth-child(3) { display: none; }
  .fx-odds__table.odds-hub__table th:first-child,
  .fx-odds__table.odds-hub__table td:first-child { min-width: 0; white-space: normal; }
  .odds-hub__table td:nth-child(2) {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Near edge-to-edge rail: the reclaimed 32px is what lets match names
     and 1X2 coexist at 375px. */
  .odds-hub .fx-odds__scroll,
  .bookmakers-hub .fx-odds__scroll {
    width: calc(100vw - 16px);
    max-width: none;
    margin-left: calc(50% - (100vw - 16px) / 2);
    margin-right: calc(50% - (100vw - 16px) / 2);
  }

  /* /bookmakers/: same sweep hid the bookmaker-name column and blew the
     rank column to 110px. Restore the name, cap it, and shorten the long
     numeric headers that forced 87px of silent scroll. */
  .fx-odds__table.bookmakers-hub__table th:nth-child(2),
  .fx-odds__table.bookmakers-hub__table td:nth-child(2) { display: table-cell; }
  .fx-odds__table.bookmakers-hub__table th,
  .fx-odds__table.bookmakers-hub__table td { padding: 7px 4px; font-size: 12.5px; }
  .fx-odds__table.bookmakers-hub__table th:first-child,
  .fx-odds__table.bookmakers-hub__table td:first-child { min-width: 0; width: 22px; white-space: nowrap; }
  .bookmakers-hub__table td:nth-child(2) {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bookmakers-hub__table th.fx-odds__num { font-size: 0; }
  .bookmakers-hub__table th.fx-odds__num::after { font-size: 11px; }
  .bookmakers-hub__table th:nth-child(3)::after { content: "Мачове"; }
  .bookmakers-hub__table th:nth-child(4)::after { content: "Марж"; }
  .bookmakers-hub__table th:nth-child(5)::after { content: "Изпл."; }
  .bookmakers-hub__table th:nth-child(6)::after { content: "Топ %"; }
  /* ligatoday.com serves the same CSS; ::after text never passes through
     the translator, so English labels must ship here, keyed off <html lang>. */
  html[lang^="en"] .bookmakers-hub__table th:nth-child(3)::after { content: "Matches"; }
  html[lang^="en"] .bookmakers-hub__table th:nth-child(4)::after { content: "Margin"; }
  html[lang^="en"] .bookmakers-hub__table th:nth-child(5)::after { content: "Payout"; }
  html[lang^="en"] .bookmakers-hub__table th:nth-child(6)::after { content: "Best %"; }
}

/* ═══ /leagues/ popularity column polish + wpautop guard (2026-08-19) ═══ */
.leagues-table__rating-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.leagues-table__rating-cell > p { display: contents; }  /* wpautop wraps the value in a stray <p> */
.leagues-table__rating-bar {
  width: 88px; height: 10px; border-radius: 999px;
  background: var(--bg-subtle, #eef1f6); overflow: hidden; flex: 0 0 auto;
}
.leagues-table__rating-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary, #1F5BD8), #12b76a);
}
.leagues-table__rating-value {
  font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700;
  color: var(--text-primary, #111827); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}
.leagues-table__live-empty { color: var(--text-tertiary, #98a2b3); }
@media (max-width: 560px) {
  .leagues-table__rating-bar { display: none; }   /* number carries the info on phones */
}

/* Non-linked top-scorer name (player page not published yet). */
span.ts-name { color: var(--text-primary, #111827); }

/* ═══ /leagues/ table rebuild (filter, sticky head, zebra, tiers) ═══ */
.leagues-filter {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 10px; padding: 10px 14px;
  max-width: 420px;
}
.leagues-filter__icon { color: var(--text-tertiary, #98a2b3); flex: 0 0 auto; }
.leagues-filter__input {
  border: 0; outline: 0; background: transparent; flex: 1 1 auto; min-width: 0;
  font-size: 15px; color: var(--text-primary, #111827);
}
.leagues-filter__input::placeholder { color: var(--text-tertiary, #98a2b3); }
.leagues-filter__count { font-size: 13px; color: var(--text-tertiary, #98a2b3); white-space: nowrap; }

.leagues-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-subtle, #f8fafc);
}
.leagues-table__row:nth-child(even) { background: color-mix(in srgb, var(--bg-subtle, #f8fafc) 55%, transparent); }
.leagues-table__row[data-href] { cursor: pointer; }
.leagues-table__row:hover { background: color-mix(in srgb, var(--brand-primary, #1F5BD8) 6%, transparent); }

.leagues-table__rating-fill--hot  { background: linear-gradient(90deg, #12b76a, #039855); }
.leagues-table__rating-fill--cool { background: linear-gradient(90deg, #98a2b3, #667085); }

.leagues-table__empty {
  margin: 14px 2px; font-size: 15px;
  color: var(--text-secondary, #475569);
}

/* ── /tipster/ layout repair (2026-08-20) ────────────────────────────────
   Root cause of "elements go out of the box": the tipster section lives in
   the FSE prose column (.entry-content, max-width 720px) while its desktop
   card grid has minmax() floors summing to ~820px+ — the tracks cannot
   shrink, the card has overflow:visible, so the ПАЗАРИ chips render outside
   the card border on EVERY desktop viewport. Fix in three parts:
   (1) break the tipster section out of the 720px column to a real 1112px
   rail (centered against the viewport with the margin-calc technique);
   (2) soften the desktop grid floors so the row also survives narrow
   containers instead of overflowing; (3) lift hovered cards above their
   siblings — the :hover shadow/border used to paint UNDER the next card. */
.entry-content .tipster-day-tabs-wrap,
.entry-content .tipster-table-wrap {
  width: min(1112px, calc(100vw - 32px));
  max-width: none;
  margin-left: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
  margin-right: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
}
@media (min-width: 1025px) {
  .tipster-card {
    grid-template-columns:
      minmax(170px, 2.1fr) minmax(105px, 1.1fr) minmax(70px, 0.8fr)
      minmax(120px, 1.2fr) minmax(135px, max-content);
  }
}

/* =========================================================================
   Fixture-page crest resilience + compact live-match preview
   ========================================================================= */
.score-card__crest--img.score-card__crest--failed {
  background: linear-gradient(135deg, #365fcf, #263b86) !important;
  color: #fff !important;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.score-card__crest--img.score-card__crest--failed img {
  display: none !important;
}
.score-card__crest--img.score-card__crest--failed::after {
  content: attr(data-crest-fallback);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The match page shows a short preview; the dedicated /live/ page owns the
   complete live inventory. These rules target the JS-rendered anchor cards
   and deliberately do not change the server-rendered fixture cards. */
.ticker--after-tabs .ticker__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.ticker--after-tabs a.score-card--ticker {
  min-height: 104px;
  padding: 14px 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}
.ticker--after-tabs .score-card__teams-row {
  width: 100%;
  gap: 10px;
}
.ticker--after-tabs .score-card__team-side {
  gap: 8px;
}
.ticker--after-tabs .score-card__team-side:first-child {
  justify-content: flex-start;
}
.ticker--after-tabs .score-card .score-card__crest {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  padding: 2px;
  border-radius: 8px;
}
.ticker--after-tabs .score-card .score-card__crest--img {
  background-color: #fff;
  border: 1px solid var(--border-subtle, #e2e8f0);
}
.ticker--after-tabs .score-card__status-row {
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 28px;
}

@media (max-width: 800px) {
  .ticker--after-tabs .ticker__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ticker--after-tabs a.score-card--ticker {
    min-height: 98px;
  }
}

@media (max-width: 480px) {
  .ticker--after-tabs .ticker__head {
    align-items: center;
    gap: 12px;
  }
  .ticker--after-tabs .ticker__title {
    font-size: 15px;
    line-height: 1.25;
  }
  .ticker--after-tabs .ticker__more {
    flex: 0 0 auto;
    font-size: 12px;
  }
  .ticker--after-tabs a.score-card--ticker {
    padding: 13px 12px;
  }
  .ticker--after-tabs .score-card .score-card__crest,
  .ticker--after-tabs a.score-card .score-card__crest--img {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .ticker--after-tabs .score-card__team-name {
    font-size: 13px;
  }
}
.tipster-card { position: relative; }
.tipster-card:hover { z-index: 2; }
.tipster-card__chips { min-width: 0; }

/* ── List-page tables escape the 720px prose column (2026-08-20) ─────────
   Same root cause as the tipster: .page-list-wrap sections (/leagues/,
   /coaches/, list hubs, shortcode docs) render inside .entry-content
   (max-width 720px). The leagues table alone needs ~760px, so columns were
   crushed to 0px (Популярност was fully invisible) and "На живо" hid behind
   an unannounced horizontal scroll. Break all list wraps out to a real rail. */
.entry-content .page-list-wrap {
  width: min(1112px, calc(100vw - 32px));
  max-width: none;
  margin-left: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
  margin-right: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
}

/* Column-collapse protection: auto table layout may crush flexible cells to
   0px when space is tight — give the load-bearing ones hard floors and let
   the wrapper scroll instead (it already has overflow-x:auto). */
.leagues-table { min-width: 560px; }
#lg-table td.leagues-table__rating-col { min-width: 118px; }
.leagues-table__rating-bar { min-width: 56px; flex: 1 1 56px; }
.leagues-table__rating-value { flex: 0 0 auto; }
.leagues-table__league-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.leagues-table__league { min-width: 0; max-width: 100%; }

/* Compact phones: flag stands in for the country name, tighter paddings —
   the five columns then fit ~375px with no horizontal scroll. */
@media (max-width: 560px) {
  .leagues-table { min-width: 0; }
  .leagues-table th, .leagues-table td { padding: 9px 6px; }
  .leagues-table th.leagues-table__rank-col { width: 38px; }
  .leagues-table__rank-badge { width: 26px; height: 26px; font-size: 12px; }
  .leagues-table__crest { width: 30px; height: 30px; }
  .leagues-table__league-name { max-width: 34vw; font-size: 14px; }
  .leagues-table__country-name { display: none; }
  .leagues-table th.leagues-table__country-col { font-size: 0; width: 40px; }
  #lg-table td.leagues-table__rating-col { min-width: 96px; }
  #lg-table th.leagues-table__rating-col { width: 96px; }
  .leagues-table th.leagues-table__live-col { width: 64px; }
}

/* Correction: /leagues/ (and every CPT archive list) has NO .entry-content —
   the 720px squeeze there comes from the FSE constrained group capping the
   section. Apply the breakout to .page-list-wrap itself; the margin-calc
   centers against the viewport under any parent width. */
.page-list-wrap {
  width: min(1112px, calc(100vw - 32px));
  max-width: none;
  margin-left: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
  margin-right: calc(50% - min(1112px, calc(100vw - 32px)) / 2);
}

/* The Популярност column collapsed to 0px on the live rebuild — pin its
   width at header level (fixed table layouts size columns from the first
   row) with id-level specificity so no earlier rule can zero it again. */
#lg-table th.leagues-table__rating-col,
#lg-table td.leagues-table__rating-col {
  width: 128px;
  min-width: 128px;
}
@media (max-width: 560px) {
  #lg-table th.leagues-table__rating-col,
  #lg-table td.leagues-table__rating-col {
    width: 96px;
    min-width: 96px;
  }
}

/* Un-hide Популярност: an old rule that removed the "website" column
   also swept the rating column into display:none at ALL widths — the bar and
   value have been invisible everywhere. Id-level override restores them,
   including on phones (compact 96px width set above). */
#lg-table th.leagues-table__rating-col,
#lg-table td.leagues-table__rating-col {
  display: table-cell;
}

/* Phone compression pass: fit all visible columns in ~375px with zero
   horizontal scroll (country column is flag/hidden there by design). */
@media (max-width: 560px) {
  #lg-table th { font-size: 11px; letter-spacing: 0; padding: 8px 4px; }
  #lg-table td { padding: 8px 4px; }
  #lg-table .leagues-table__league { gap: 6px; }
  #lg-table .leagues-table__crest { width: 26px; height: 26px; }
  #lg-table .leagues-table__league-name { max-width: 30vw; font-size: 13.5px; }
  #lg-table th.leagues-table__live-col { width: 58px; white-space: normal; }
  #lg-table .leagues-table__live-badge, #lg-table .leagues-table__live-empty { font-size: 12px; }
}
@media (max-width: 480px) {
  #lg-table th.leagues-table__rating-col,
  #lg-table td.leagues-table__rating-col { width: 62px; min-width: 62px; }
  #lg-table .leagues-table__rating-bar { display: none; }
}

/* Final phone pass for #lg-table: the long header words themselves force
   column widths ("Популярност" @11px ≈ 90px), and a legacy min-width:220px
   on the name column defeated shrinking. Shorten labels via ::after and
   release the floors — everything fits 375px with no horizontal scroll. */
@media (max-width: 560px) {
  #lg-table th.leagues-table__name-col,
  #lg-table td.leagues-table__name-col { min-width: 0; }
  #lg-table th.leagues-table__country-col,
  #lg-table td.leagues-table__country-col { display: none; }
  #lg-table th.leagues-table__rating-col,
  #lg-table td.leagues-table__rating-col { width: 64px; min-width: 64px; }
  #lg-table th.leagues-table__rating-col { font-size: 0; }
  #lg-table th.leagues-table__rating-col::after { content: "Попул."; font-size: 11px; }
  #lg-table th.leagues-table__live-col { font-size: 0; width: 52px; }
  #lg-table th.leagues-table__live-col::after { content: "Живо"; font-size: 11px; }
  #lg-table .leagues-table__league-name {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #lg-table .leagues-table__live-badge { padding: 2px 6px; font-size: 11.5px; }
}

/* Last 51px on phones: tighten name/live/rank cells to reach zero scroll. */
@media (max-width: 560px) {
  #lg-table .leagues-table__league-name { max-width: 28vw; }
  #lg-table td.leagues-table__live-col, #lg-table th.leagues-table__live-col { padding-left: 2px; padding-right: 6px; }
  #lg-table .leagues-table__live-badge { padding: 1px 5px; font-size: 11px; gap: 4px; }
  #lg-table .leagues-table__live-dot { width: 6px; height: 6px; }
  #lg-table .leagues-table__rank-badge { width: 24px; height: 24px; font-size: 11.5px; }
  #lg-table td.leagues-table__rank-col, #lg-table th.leagues-table__rank-col { padding-left: 4px; padding-right: 2px; width: 30px; }
}

/* Phones: give list tables a near edge-to-edge rail (8px gutters) — clears
   the final residual scroll without shrinking content further. */
@media (max-width: 560px) {
  .page-list-wrap {
    width: calc(100vw - 16px);
    margin-left: calc(50% - (100vw - 16px) / 2);
    margin-right: calc(50% - (100vw - 16px) / 2);
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ═══ Match/event page polish layer (2026-08-20) ═════════════════════════
   Consistent tokens per the ui-visibility-audit skill:
   cards 16px · controls 10px · pills 999px · 8px spacing grid ·
   layered-soft shadows · ≥40px touch targets · visible focus rings. */

/* Card surfaces: soften + gentle elevation (Google-card style). */
.fx-odds,
.odds-hub .fx-odds__scroll,
.bookmakers-hub .fx-odds__scroll,
.wc-faq__item {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
}
.fx-odds { padding: 22px 22px 16px; }

/* Quick-jump pills: comfortable touch targets + breathing room. */
.fx-jump__chips { gap: 10px; }
.fx-jump__chip {
  padding: 9px 18px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Tab strip: slightly airier, uniform control radius. */
.tab-nav { gap: 6px; border-radius: 14px; }
.tab-nav__btn { padding: 9px 14px; border-radius: 10px; }

/* Keyboard/assistive focus visibility on all interactive pills. */
.fx-jump__chip:focus-visible,
.tab-nav__btn:focus-visible,
.tipster-day-tab:focus-visible,
.leagues-table__league:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Odds table on phones: FIT, don't hide 78px behind a silent scroll —
   drop the average column (best price + probabilities carry the value),
   let market labels wrap two lines. */
@media (max-width: 560px) {
  .fx-odds { padding: 16px 12px 12px; }
  .fx-odds__table th:nth-child(2),
  .fx-odds__table td:nth-child(2) { display: none; }
  .fx-odds__table td:first-child,
  .fx-odds__table th:first-child { white-space: normal; min-width: 110px; }
  .fx-odds__table th, .fx-odds__table td { padding: 8px 6px; }
}

/* League-page top-scorers table on phones: the long numeric headers
   (Асистенции ≈ 100px) forced 113px of silent scroll. Shorten labels,
   cap the player-name column, compress paddings — fits 375px, no scroll. */
@media (max-width: 560px) {
  .league-topscorers .leagues-table th,
  .league-topscorers .leagues-table td { padding: 8px 5px; }
  .league-topscorers .leagues-table th.leagues-table__rank-col { width: 34px; }
  .league-topscorers .topscorer-avatar { width: 34px; height: 34px; }
  .league-topscorers .topscorer-player__name { max-width: 27vw; font-size: 13.5px; }
  .league-topscorers .leagues-table th.leagues-table__rating-col {
    font-size: 0;
    width: 48px;
    min-width: 48px;
  }
  .league-topscorers .leagues-table th.leagues-table__rating-col:nth-child(4)::after {
    content: "Гол.";
    font-size: 11px;
  }
  .league-topscorers .leagues-table th.leagues-table__rating-col:nth-child(5)::after {
    content: "Ас.";
    font-size: 11px;
  }
  .league-topscorers .leagues-table td.leagues-table__rating-col {
    font-size: 14px;
    font-weight: 700;
  }
}

@media (max-width: 560px) {
  /* Release the legacy 220px name-column floor here too. */
  .league-topscorers .leagues-table th.leagues-table__name-col,
  .league-topscorers .leagues-table td.leagues-table__name-col { min-width: 0; }

  /* English variants of the CSS-injected short headers for ligatoday.com
     (::after text bypasses the translator). */
  html[lang^="en"] .league-topscorers .leagues-table th.leagues-table__rating-col:nth-child(4)::after { content: "Gls"; }
  html[lang^="en"] .league-topscorers .leagues-table th.leagues-table__rating-col:nth-child(5)::after { content: "Ast"; }
  html[lang^="en"] #lg-table th.leagues-table__rating-col::after { content: "Pop."; }
  html[lang^="en"] #lg-table th.leagues-table__live-col::after { content: "Live"; }
}

@media (max-width: 560px) {
  /* Long bookmaker names (William Hill) forced the last 12px of scroll. */
  .fx-odds__bm {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-odds__table th, .fx-odds__table td { padding: 8px 5px; }
}

@media (max-width: 560px) {
  .fx-odds__table th { font-size: 11px; }
}

/* ═══ Hero unification (2026-08-20): league & player pages get the same
   full-width dark-gradient hero identity as /tipster/ (.page-hero), while
   keeping their richer content (league logo/country/website, player photo/
   jersey/position). Pure CSS — markup untouched. ═══ */
.league-hero,
.player-hero {
  background: linear-gradient(135deg, #1a0a2e 0%, #0d1d40 50%, #0a2e1a 100%);
  color: #fff;
  border-bottom: none;
  padding: 56px 0 46px;
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.league-hero::before,
.player-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 214, 143, 0.15) 0%, transparent 70%);
}
.league-hero__inner,
.player-hero__inner { position: relative; z-index: 1; }
.league-hero__name,
.player-hero__name {
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.league-hero__country,
.league-hero__meta,
.league-hero__meta * ,
.player-hero__bio,
.player-hero__bio * { color: rgba(255, 255, 255, 0.82); }
.player-hero__name { color: #fff; }
/* Badges/pills inside the dark band keep their own backgrounds readable. */
.player-hero__position { color: #fff; }
.league-hero__website { color: rgba(255, 255, 255, 0.7); }
.league-hero__website:hover { color: #fff; }
/* League crest on a white chip so dark logos stay visible on the gradient. */
.league-hero__logo {
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.player-hero__photo {
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
@media (max-width: 560px) {
  .league-hero, .player-hero { padding: 40px 0 32px; }
}

/* ═══ League hero: center + full page-hero height + visible website chip
   (2026-08-20, follows the /tipster/ hero identity) ═══ */
.league-hero { padding: 80px 0 64px; text-align: center; }
.league-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.league-hero__copy { display: flex; flex-direction: column; align-items: center; }
.league-hero__logo { width: 88px; height: 88px; }
.league-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.league-hero__country { font-size: 15px; }
/* Official-site chip: readable pill on the dark gradient. */
.league-hero__website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.league-hero__website:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
@media (max-width: 560px) {
  .league-hero { padding: 52px 0 40px; }
  .league-hero__logo { width: 68px; height: 68px; }
}

/* Internal-link strip under the league hero. */
.league-xlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 16px 16px 0;
  font-size: 13px;
}
.league-xlinks__label { color: var(--text-secondary, #667085); font-weight: 600; }
.league-xlinks a { color: var(--brand-primary, #4f46e5); text-decoration: none; }
.league-xlinks a:hover { text-decoration: underline; }

/* ═══ Standings table on phones (2026-08-20) ═══════════════════════════════
   The league standings table needed 645px against a 359px rail — 297px of
   the row sat behind a silent horizontal scroll, so Form, Points and goal
   difference were unreachable on a phone. Fit instead of scroll: keep the
   five columns every mobile standings table shows (position, team, played,
   goal difference, points) and drop W/D/L plus the 196px form-dots column,
   which are the widest and least load-bearing. Everything returns above
   560px. Scoped to .standings-table so no other table inherits this. */
@media (max-width: 560px) {
  .standings-table th:nth-child(4),
  .standings-table td:nth-child(4),
  .standings-table th:nth-child(5),
  .standings-table td:nth-child(5),
  .standings-table th:nth-child(6),
  .standings-table td:nth-child(6),
  .standings-table th.standings-table__form,
  .standings-table td.standings-table__form { display: none; }
  .standings-table th,
  .standings-table td { padding: 8px 5px; }
  .standings-table th.standings-table__pos,
  .standings-table td.standings-table__pos { width: 30px; }
  .standings-table td.standings-table__team {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══ World Cup top-scorers table on phones (2026-08-20) ═══════════════════
   Assists/matches were already dropped ≤560px, but the four remaining
   columns still needed 437px against a 343px rail — 94px of every row,
   including the goal tally the page exists for, sat behind a silent scroll.
   Fit instead: smaller avatar, tighter rank/padding, and below 430px the
   country shows as its crest alone (the flag identifies the team, and the
   img keeps its alt text for screen readers) so the player name — the
   primary content — stays complete. Measured on a 375px phone: 0px hidden,
   only names over ~30 characters ellipsize. */
@media (max-width: 560px) {
  .wcts th, .wcts td { padding: 8px 4px; }
  .wcts th { font-size: 10px; }
  .wcts__photo { width: 30px; height: 30px; }
  .wcts__player { gap: 7px; min-width: 0; }
  .wcts th.wcts__pos, .wcts td.wcts__pos { width: 24px; }
  .wcts__player-link,
  .wcts__player > span {
    display: block;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wcts__team {
    display: block;
    max-width: 28vw;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wcts__crest { vertical-align: middle; margin-right: 4px; }
}
@media (min-width: 431px) and (max-width: 560px) {
  /* Larger phones keep the country name, so the player column gives back
     the few pixels that name needs — measured 0px hidden at 480px. */
  .wcts__player-link,
  .wcts__player > span { max-width: 40vw; }
}
@media (max-width: 430px) {
  .wcts__team { font-size: 0; max-width: none; }
  .wcts__crest { margin-right: 0; }
}

/* ═══ Coach search on /coaches/ (2026-08-21) ═══════════════════════════════
   Controls follow the shared tokens: 12px control radius, ≥44px touch
   target, visible focus ring, 8px spacing grid. */
.coach-search { margin: 0 0 18px; }
.coach-search__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #667085);
  margin-bottom: 6px;
}
.coach-search__row { position: relative; display: flex; align-items: center; }
.coach-search__icon {
  position: absolute;
  left: 13px;
  color: var(--text-tertiary, #98a2b3);
  pointer-events: none;
}
.coach-search__input {
  width: 100%;
  min-height: 46px;
  padding: 11px 44px 11px 40px;
  font-size: 15px;
  color: var(--text-primary, #111827);
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  -webkit-appearance: none;
  appearance: none;
}
.coach-search__input::-webkit-search-cancel-button { display: none; }
.coach-search__input:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 2px;
  border-color: transparent;
}
.coach-search__clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bg-subtle, #f2f4f7);
  color: var(--text-secondary, #667085);
  cursor: pointer;
}
.coach-search__clear:hover { background: var(--border-subtle, #e4e7ec); }
.coach-search__clear:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 2px;
}
.coach-search__clear-x { font-size: 20px; line-height: 1; }
.coach-search__sr,
.coach-search__strings {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.coach-search__hint,
.coach-search__status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-secondary, #667085);
}
.coach-search__status:empty { display: none; }
[data-theme="dark"] .coach-search__input {
  background: #131826;
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
[data-theme="dark"] .coach-search__clear {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 560px) {
  .coach-search__input { font-size: 16px; } /* ≥16px stops iOS zooming on focus */
  .coach-search__label { font-size: 12.5px; }
}

/* The grid is display:grid and the cards display:flex, and a class rule beats
   the [hidden] attribute's UA display:none — so hiding filtered-out cards from
   JavaScript silently did nothing until this. */
.coaches-grid__list[hidden],
.coach-card[hidden] { display: none !important; }

/* ═══ Homepage full-bleed sections (2026-08-21) ════════════════════════════
   WordPress's constrained layout caps every direct child of .site-main at
   --wp--style--global--content-size (720px) and pins the margins with
   `margin-inline: auto !important`. But these sections are built full-bleed —
   each already carries its own inner .container — so on a 1440px screen the
   cap crushed the whole page below the hero into a 720px column: the three
   "how it works" cards rendered 205px wide. .final-cta's own 100vw breakout
   was silently overridden by that !important margin, which is why it failed
   too. Release the cap and let the inner containers set the reading width. */
.site-main > .hp-about,
.site-main > .topmatch,
.site-main > .hp-metrics,
.site-main > .hp-today,
.site-main > .hp-top-leagues,
.site-main > .how-it-works,
.site-main > .hp-faq,
.site-main > .final-cta {
  width: 100%;
  max-width: none;
}
/* 100vw overflows by the scrollbar's width and creates a horizontal scroll;
   100% with the auto margins WordPress forces is exactly the viewport. */
.site-main > .final-cta {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── "How it works" polish ─────────────────────────────────────────────── */
/* Card radius/shadow aligned to the shared tokens (cards 16px, layered-soft
   elevation), and the hover lift needs a stacking context or it paints under
   the next card. */
.hiw-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.hiw-card:hover { z-index: 2; }

/* The connector rail is meant to sit on the icon row's midline. That row is
   as tall as the 56px numeral, so its centre is padding-top (28px) + 28px —
   not the 76px it was set to, which floated it into the gap below. */
.hiw-grid::before { top: 56px; }

/* Comfortable, keyboard-visible step links. */
.hiw-card__cta {
  min-height: 44px;
  padding: 10px 0;
  border-radius: 8px;
}
.hiw-card__cta:focus-visible,
.hiw-card__body a:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Wide screens: let the three steps breathe instead of stretching text.
   The roomier padding moves the icon row down, so the rail follows it. */
@media (min-width: 1100px) {
  .hiw-grid { gap: 32px; }
  .hiw-card { padding: 32px 32px 28px; }
  .hiw-grid::before { top: 60px; }
}

/* Most-watched leagues: the 120px name column was sized for the old 720px
   column and ellipsised real league names ("Примера дивисион"). With the
   section at full width there is room to show them in full. */
@media (min-width: 900px) {
  .hp-top-leagues__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
}

/* ── Final CTA polish ──────────────────────────────────────────────────── */
.final-cta__inner { max-width: 920px; }
.final-cta__actions { gap: 16px; }
.final-cta__actions .btn--lg {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.final-cta__actions .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}
.final-cta__actions .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (min-width: 1100px) {
  .final-cta { padding: 104px 24px; }
}

/* ── Top-scorers table repair layer (2026-08-21) ─────────────────────────────
   Measured with getBoundingClientRect, not guessed.

   Desktop bug: the league page wraps every section in .simosports-app, which
   caps content at 720px — a prose width. This table needs 771px, so 53px sat
   hidden behind overflow:auto even on a 1280px screen, with ~560px of unused
   viewport either side. Fix is a breakout rail on the two DATA sections only,
   so the prose above stays at its readable 720px.

   The rail is desktop-only on purpose: on a phone min(880px, 100vw - 32px)
   resolves to 343px and would make the table NARROWER than it is today.

   Phone bug: the numeric columns held width they did not need while the
   player name was capped at 27vw (101px), ellipsising 8 of 10 names. Shrinking
   the rank/number columns to their content hands that width to Player/Team,
   and a viewport-bounded cap spends it. The cap stays bounded deliberately —
   removing it lets the longest nowrap name blow the table 109px past the
   screen edge (measured).

   Verified after deploy: hidden 0 at 375 / 560 / 768 / 1280; clipped names
   8 -> 4 at 375. The remaining 4 are 196-252px legal names ("Vinícius José
   Paixão de Oliveira Júnior") that cannot fit any phone — ellipsis is correct. */

@media (min-width: 768px) {
  .league-topscorers,
  .league-standings {
    width: min(880px, calc(100vw - 32px)) !important;
    max-width: none !important;
    margin-left: calc(50% - min(880px, calc(100vw - 32px)) / 2) !important;
    margin-right: calc(50% - min(880px, calc(100vw - 32px)) / 2) !important;
  }
}

.league-topscorers .leagues-table th.leagues-table__rank-col,
.league-topscorers .leagues-table td.leagues-table__rank-col {
  width: 1% !important;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 2px;
}

.league-topscorers .leagues-table th.leagues-table__rating-col,
.league-topscorers .leagues-table td.leagues-table__rating-col {
  width: 1% !important;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 560px) {
  /* Team column degrades to its crest here (the label is already display:none
     below 560px), so it only needs crest width. */
  .league-topscorers .leagues-table th:nth-child(3),
  .league-topscorers .leagues-table td:nth-child(3) { width: 1% !important; }

  .league-topscorers .topscorer-player__name {
    max-width: calc(100vw - 232px) !important;
  }
}

/* ── Post-match model review + odds-hub AI model column ───────────────── */
.fx-verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.fx-verdict.is-hit  { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.fx-verdict.is-miss { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
[data-theme="dark"] .fx-verdict.is-hit  { color: #a7f3d0; background: rgba(4,120,87,.20);  border-color: rgba(16,185,129,.35); }
[data-theme="dark"] .fx-verdict.is-miss { color: #fca5a5; background: rgba(185,28,28,.18); border-color: rgba(239,68,68,.35); }
/* The final-score row closes the table — give it a little weight. */
.fx-review .fx-odds__table tbody tr:last-child td {
  border-top: 2px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-subtle, #f9fafb);
}
[data-theme="dark"] .fx-review .fx-odds__table tbody tr:last-child td {
  background: color-mix(in srgb, var(--bg-elevated, #111827) 92%, #6366f1 8%);
}
.odds-hub__model {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--brand-primary, #4f46e5);
  white-space: nowrap;
}
.odds-hub__model strong {
  display: inline-block;
  min-width: 15px;
  margin-right: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-primary, #4f46e5) 12%, transparent);
}
.odds-hub__model--na { color: var(--text-tertiary, #94a3b8); }
[data-theme="dark"] .odds-hub__model { color: #a5b4fc; }
@media (max-width: 560px) {
  .odds-hub__model { font-size: 12px; }
  .fx-verdict { font-size: 11px; padding: 2px 6px; }
}

/* ── /login/ card (shares the register-card system) ───────────────────── */
.register-shell--login { display: flex; justify-content: center; }
.register-shell--login .register-card { max-width: 440px; width: 100%; }
.register-form__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-secondary, #475569);
  margin: 2px 0 4px; cursor: pointer;
}
.register-form__remember input { accent-color: var(--brand-primary, #4f46e5); }
.register-form__error {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  font-size: 14px;
}
[data-theme="dark"] .register-form__error {
  background: rgba(185, 28, 28, 0.18); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5;
}
#sm-login-card.is-busy .register-form__submit { opacity: 0.6; pointer-events: none; }

/* ── "Browse by competition" league chips ────────────────────────────────
   The markup (inc/shortcodes.php ~2368) shipped with BEM classes but NO
   stylesheet ever defined them, so the block fell back to a default bulleted
   <ul>: 20px-tall inline links (below the 40px touch minimum) with 22px
   logos. Measured before/after at 1280 and 375. Mirrors the .fx-jump__chip
   pill language so the two chip families stay visually consistent. */
.matches-leagues__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.matches-leagues__sub   { font-size: 13px; color: var(--text-tertiary, #6b7689); margin: 0 0 14px; }

.matches-leagues__grid {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.matches-leagues__grid li { margin: 0; padding: 0; }
.matches-leagues__grid li::marker { content: ""; }

.matches-leagues__grid li a {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 10px;
    min-height: 44px;                    /* touch target (was 20px) */
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-page, #fff);
    color: var(--text-primary);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    position: relative;                  /* so :hover can out-stack siblings */
    transition: background var(--dur-fast, .15s) var(--ease-standard, ease),
                color var(--dur-fast, .15s) var(--ease-standard, ease),
                border-color var(--dur-fast, .15s) var(--ease-standard, ease),
                transform var(--dur-fast, .15s) var(--ease-standard, ease);
}
.matches-leagues__grid li a:hover {
    background: var(--brand-primary); color: #fff;
    border-color: var(--brand-primary);
    transform: translateY(-1px);
    z-index: 2;
}
.matches-leagues__grid li a:focus-visible {
    outline: 2px solid var(--brand-primary); outline-offset: 2px;
}

/* White plate keeps dark-on-dark league marks legible in dark theme and on
   the blue hover fill. */
.matches-leagues__grid img {
    width: 26px; height: 26px;
    object-fit: contain; flex: 0 0 auto;
    border-radius: 5px; background: #fff;
    padding: 2px; box-sizing: border-box;
}

/* Bounded cap — never let one long competition name blow out the chip. */
.matches-leagues__name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: min(230px, 60vw);
}

/* Denser phones band: 7 chips in 4 rows instead of 6 (395px -> 281px), with
   escapees and clipped labels both still measured at 0. A 2-column grid hit
   the same height but produced 8 escapees, so it was rejected. */
@media (max-width: 560px) {
    .matches-leagues__grid { gap: 8px; }
    .matches-leagues__grid li a { padding: 8px 12px 8px 8px; font-size: 12px; gap: 8px; }
    .matches-leagues__grid img { width: 22px; height: 22px; }
    .matches-leagues__name { max-width: min(190px, 58vw); }
}

/* ── /players/ hub pagination (server-rendered, crawlable) ─────────────── */
.players-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin: 24px 0 8px;
}
.players-pagination__num, .players-pagination__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 8px 14px;
    border: 1px solid var(--border-subtle); border-radius: 999px;
    background: var(--bg-page, #fff); color: var(--text-primary);
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background var(--dur-fast, .15s), color var(--dur-fast, .15s), border-color var(--dur-fast, .15s);
}
.players-pagination__num:hover, .players-pagination__btn:hover {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}
.players-pagination__num--current {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}
.players-pagination__gap { color: var(--text-tertiary, #6b7689); padding: 0 2px; }

/* ═══ Day pivot (matches-pivot) redesign — /fixtures/ + /live/ (2026-09-03)
   Measured before: desktop tiles ragged (63–90px) and 39px tall in a 1064px
   rail, reading as loose text; phones crushed 8 tiles to 48px each behind a
   hidden scrollbar (71px silently cut, "YESTERDAY" clipped to "ESTERDAY",
   dates wrapping to two lines, 9px labels). Segmented-control treatment on
   desktop; on phones a visible, snap-scrolling rail with an edge fade so the
   cut-off tiles announce themselves. Tokens: 12px control radius, ≥44px
   touch targets, 8px grid, focus rings. */
.matches-pivot {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg-subtle, #f1f5f9);
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.matches-pivot::-webkit-scrollbar { display: none; }
.matches-pivot__day {
  flex: 1 1 0;
  min-width: 64px;
  max-width: 132px;
  min-height: 52px;
  padding: 7px 10px;
  gap: 2px;
  border-radius: 10px;
  scroll-snap-align: start;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.matches-pivot__day-top {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.matches-pivot__day-btm {
  font-size: 14px;
  white-space: nowrap;
}
.matches-pivot__day:hover {
  background: var(--bg-elevated, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.matches-pivot__day--active,
.matches-pivot__day--active:hover {
  background: var(--brand-primary, #4f46e5);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
.matches-pivot__day--active .matches-pivot__day-top { color: rgba(255, 255, 255, 0.78); }
.matches-pivot__day:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 2px;
}
[data-theme="dark"] .matches-pivot {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .matches-pivot__day:hover { background: rgba(255, 255, 255, 0.08); box-shadow: none; }

/* Phones: 8 readable tiles cannot fit 359px (each needs ~64px to keep
   "TOMORROW" on one line), so scroll — but visibly. The rail goes near
   edge-to-edge, tiles snap, and a right-edge fade shows there is more. */
@media (max-width: 560px) {
  .matches-pivot {
    width: calc(100vw - 16px);
    max-width: none;
    margin-left: calc(50% - (100vw - 16px) / 2);
    margin-right: calc(50% - (100vw - 16px) / 2);
    gap: 3px;
    padding: 4px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent);
  }
  .matches-pivot__day {
    flex: 0 0 auto;
    min-width: 60px;   /* SAT/SUN/MON need less than TOMORROW; measured: 5 tiles fit 359px */
    max-width: none;
    min-height: 50px;
    padding: 6px 7px;
  }
  .matches-pivot__day-top { font-size: 10px; }
  .matches-pivot__day-btm { font-size: 13.5px; }
}

/* ==========================================================================
   Team detail — match-card crests
   Give real club marks a clear, consistent plate without changing the shared
   score-card treatment used by league, fixture, coach, and live-score pages.
   ========================================================================== */
.team-detail .team-matches-col__list article.score-card .score-card__crest {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  box-sizing: border-box;
}

.team-detail .team-matches-col__list article.score-card .score-card__crest--img {
  padding: 2px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
  overflow: hidden !important;
}

.team-detail .team-matches-col__list article.score-card .score-card__crest--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.team-detail .team-matches-col__list article.score-card .score-card__crest:not(.score-card__crest--img) {
  background: #172554 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 12px;
}

@media (max-width: 720px) {
  .team-detail .team-matches-col .team-matches-col__list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-detail .team-matches-col__list article.score-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .team-detail .team-matches-col__list article.score-card {
    padding: 14px 12px !important;
  }

  .team-detail .team-matches-col__list article.score-card .score-card__teams-row {
    gap: 6px !important;
  }

  .team-detail .team-matches-col__list article.score-card .score-card__team-side {
    gap: 6px !important;
  }

  .team-detail .team-matches-col__list article.score-card .score-card__team-name {
    font-size: 13px !important;
  }

  .team-detail .team-matches-col__list article.score-card .score-card__crest {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .team-detail .team-matches-col__list article.score-card .score-card__vs {
    padding: 0 1px !important;
  }
}

/* ==========================================================================
   Site-wide team-crest system — match browsing surfaces
   Real badges use a neutral white plate in both themes, so transparent, white,
   and dark artwork stays legible. Sizes are intentionally tiered: large on
   match cards, compact in live/odds tables, and unchanged in page heroes.
   ========================================================================== */

/* Shared SSR cards: fixtures, league, coach and team pages. */
article.score-card .score-card__crest {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  box-sizing: border-box;
}
article.score-card .score-card__crest--img {
  padding: 2px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
  overflow: hidden !important;
}
article.score-card .score-card__crest--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
article.score-card .score-card__crest:not(.score-card__crest--img) {
  background: #172554 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 12px;
}

/* Dense live rows. */
.live-row__crest {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  box-sizing: border-box;
}
img.live-row__crest {
  padding: 1px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 6px;
}

/* Predictions cards — both renderers used by the current app. */
.pred-fixture__crest {
  width: 44px;
  height: 44px;
  padding: 2px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.pred-fixture__crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pred-row .score-card__crest--md {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  box-sizing: border-box;
}
.pred-row .score-card__crest--img {
  padding: 1px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 7px;
}

/* Tipster and homepage match lists. */
.tipster-card__team img {
  width: 32px;
  height: 32px;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
}
img.hp-today__team-crest {
  width: 24px;
  height: 24px;
  padding: 1px;
  box-sizing: border-box;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 6px;
}
.topmatch__crest {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Compact identity surfaces: keep their dense layouts, but give every real
   badge the same contrast plate and a modestly larger readable footprint. */
a.score-card .score-card__crest--img {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  padding: 2px !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
a.score-card .score-card__crest--img img,
.player-card__team .score-card__crest--img img,
.player-hero__team .score-card__crest--img img,
.scorers-table__team-link .score-card__crest--img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.player-card__team .score-card__crest {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.player-card__team .score-card__crest--img {
  padding: 1px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 5px;
}
.player-hero__team .score-card__crest {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
.player-hero__team .score-card__crest--img {
  padding: 1px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 7px;
}
.scorers-table__team-link .score-card__crest {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px;
}
.scorers-table__team-link .score-card__crest--img {
  padding: 1px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 7px;
}
img.form-card__crest,
img.form-row__crest,
.h2h-table__home img,
.h2h-table__away img,
img.fx-stand__crest,
img.lineup-pitch__crest,
img.shot-map__crest,
.sm-fav-card__match-team img,
img.wc-matches__crest,
img.wcsd-team__crest,
img.wcts__crest {
  padding: 1px;
  box-sizing: border-box;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 6px;
}
img.form-card__crest { width: 28px; height: 28px; }
img.form-row__crest { width: 22px; height: 22px; }
.h2h-table__home img,
.h2h-table__away img { width: 22px; height: 22px; }
img.fx-stand__crest { width: 22px; height: 22px; }
img.lineup-pitch__crest { width: 24px; height: 24px; }
img.shot-map__crest { width: 20px; height: 20px; }
.sm-fav-card__match-team img { width: 28px; height: 28px; }
img.wc-matches__crest { width: 32px; height: 32px; }
img.wcsd-team__crest { width: 28px; height: 28px; }
img.wcts__crest { width: 24px; height: 24px; }

/* /odds/: two readable team lines instead of one logo-free text string. */
.odds-hub__match-cell { min-width: 0; }
.odds-hub__match {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
a.odds-hub__match:hover .odds-hub__team-name { color: var(--brand-primary, #4f46e5); }
.odds-hub__team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.odds-hub__team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odds-hub__crest {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  box-sizing: border-box;
  font-size: 8px;
}
.odds-hub__crest.score-card__crest--img {
  padding: 1px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 6px !important;
  overflow: hidden;
}
.odds-hub__crest.score-card__crest--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fifty links are valuable but too tall to scan in one uninterrupted block. */
.matches-leagues__country {
  padding-left: 8px;
  border-left: 1px solid var(--border-subtle, #e4e7ec);
  color: var(--text-tertiary, #6b7689);
  font-size: 11px;
  white-space: nowrap;
}
.matches-leagues__grid li a:hover .matches-leagues__country {
  border-left-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.84);
}
.matches-leagues__more { margin-top: 14px; }
.matches-leagues__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--brand-primary, #4f46e5);
  border-radius: 999px;
  color: var(--brand-primary, #4f46e5);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.matches-leagues__toggle::-webkit-details-marker { display: none; }
.matches-leagues__toggle:hover {
  color: #fff;
  background: var(--brand-primary, #4f46e5);
}
.matches-leagues__toggle:focus-visible {
  outline: 2px solid var(--brand-primary, #4f46e5);
  outline-offset: 2px;
}
.matches-leagues__toggle-close { display: none; }
.matches-leagues__more[open] .matches-leagues__toggle-open { display: none; }
.matches-leagues__more[open] .matches-leagues__toggle-close { display: inline; }
.matches-leagues__grid--more { margin-top: 12px; }

@media (max-width: 600px) {
  .pred-row .score-card__crest--md {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
}

@media (max-width: 560px) {
  .pred-fixture__crest { width: 40px; height: 40px; }
  .tipster-card__team img { width: 28px; height: 28px; }

  .predictions-tabs { max-width: 100%; }
  .predictions-tab {
    min-width: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  /* The shared full-bleed date rail assumes a normal-width parent. On /live/
     it sits inside an inline-flex wrapper that collapses to 0px, shifting the
     rail 175px off-screen. Give that wrapper its own full toolbar row. */
  .live-page__date {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .live-page__date .matches-pivot {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .odds-hub__table td:nth-child(2) {
    max-width: 32vw;
    overflow: hidden;
    white-space: normal;
  }
  .odds-hub__match { max-width: 32vw; }

  .matches-leagues__country { display: none; }
  .matches-leagues__toggle { width: 100%; }
}

@media (max-width: 480px) {
  article.score-card.card--interactive,
  .matches-list article.score-card,
  .team-matches-col__list article.score-card,
  .fixtures-list article.score-card {
    padding: 14px 12px !important;
  }
  article.score-card .score-card__teams-row { gap: 8px !important; }
  article.score-card .score-card__team-side { gap: 6px !important; }
  article.score-card .score-card__team-name { font-size: 13px !important; }
  article.score-card .score-card__crest {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  article.score-card .score-card__vs { padding: 0 1px !important; }

  a.score-card .score-card__crest--img {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
}

/* ═══ Standings hub — focused split-pane league navigator (2026-09-04) ═══
   The server keeps the first table, eight featured canonical links and the
   browse-all route useful without JavaScript. JS progressively builds a
   bounded finder from catalogue JSON and switches the table in place.
   Everything stays scoped to .standings-hub so fixture, league-detail and
   World Cup standings retain their own layouts. */
.standings-hub {
  --standings-hub-sidebar: clamp(280px, 27.25vw, 405px);
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: var(--standings-hub-sidebar) minmax(0, 1fr);
  align-items: stretch;
  background: var(--bg-base, #f7f8fb);
  border-block: 1px solid var(--border-subtle, #e5e7eb);
  color: var(--text-primary, #111827);
  isolation: isolate;
}

/* Keep the standings introduction compact so the competition navigator is
   visible without a long preamble, matching the selected split-pane layout. */
.page-id-232 .page-hero {
  padding-top: 20px;
  padding-bottom: 16px;
}

.page-id-232 .page-hero__title {
  margin-bottom: 10px;
  font-size: clamp(2rem, 3.4vw, 2.25rem);
  line-height: 1.05;
}

.page-id-232 .page-hero__sub {
  max-width: 640px;
  margin-bottom: 0;
  font-size: .9375rem;
  line-height: 1.4;
}

.page-id-232 .page-hero__eyebrow { margin-bottom: 8px; }

.standings-hub__sidebar {
  min-width: 0;
  padding: 24px 28px 28px;
  background: color-mix(in srgb, var(--bg-base, #f7f8fb) 92%, var(--bg-elevated, #fff));
  border-right: 1px solid var(--border-subtle, #e5e7eb);
}

@media (min-width: 861px) {
  .standings-hub__sidebar-inner {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong, #9ca3af) transparent;
  }
}

.standings-hub__sidebar-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary, #111827);
}

.standings-hub__finder {
  position: relative;
  z-index: 5;
  display: none;
  margin-bottom: 22px;
}

.standings-hub.is-enhanced .standings-hub__finder { display: block; }

.standings-hub__finder > label,
.standings-hub__finder-control > label {
  display: block;
  margin: 0 0 7px;
  color: var(--text-secondary, #4b5563);
  font-size: .75rem;
  font-weight: 650;
}

.standings-hub__finder-control {
  position: relative;
  display: flex;
  align-items: center;
}

.standings-hub__search {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 9px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #111827);
  font: 500 0.875rem/1 var(--font-body);
  outline: none;
  box-shadow: none;
  transition: border-color var(--dur-fast, 150ms), box-shadow var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
}

.standings-hub__search::placeholder { color: var(--text-tertiary, #6b7280); opacity: 1; }
.standings-hub__search:hover { border-color: color-mix(in srgb, var(--brand-primary, #4d8bff) 45%, var(--border-strong, #d1d5db)); }
.standings-hub__search:focus-visible {
  border-color: var(--brand-primary, #4d8bff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4d8bff) 20%, transparent);
}

.standings-hub__results {
  margin: 8px 0 0;
  padding: 7px;
  list-style: none;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  box-shadow: var(--sh-4, 0 18px 40px rgba(15, 23, 42, .16));
}

.standings-hub__results-status {
  margin: 7px 2px 0;
  color: var(--text-tertiary, #6b7280);
  font-size: .6875rem;
  line-height: 1.35;
}

.standings-hub.is-enhanced .standings-hub__results {
  position: absolute;
  inset: 100% 0 auto;
  display: none;
  max-height: min(420px, calc(100vh - 180px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.standings-hub.is-enhanced .standings-hub__finder.is-open .standings-hub__results:not([hidden]) { display: block; }
.standings-hub__results[hidden] { display: none !important; }

.standings-hub__result,
.standings-hub__results [data-league-id] {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--text-primary, #111827);
  text-decoration: none;
}

.standings-hub__result:hover,
.standings-hub__result:focus-visible,
.standings-hub__results [data-league-id]:hover,
.standings-hub__results [data-league-id]:focus-visible,
.standings-hub__results [data-league-id].is-active {
  background: color-mix(in srgb, var(--brand-primary, #4d8bff) 12%, transparent);
  color: var(--text-primary, #111827);
  outline: none;
}

.standings-hub__result img,
.standings-hub__results [data-league-id] img {
  width: 28px;
  height: 28px;
  padding: 2px;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #e5e7eb) 80%, transparent);
  border-radius: 7px;
  background: #fff;
}

.standings-hub__result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.standings-hub__result-country { color: var(--text-tertiary, #6b7280); font-size: .75rem; white-space: nowrap; }
.standings-hub__result--no-logo { grid-template-columns: minmax(0, 1fr) auto; padding-left: 49px; }
.standings-hub__results-empty { margin: 0; padding: 18px 12px; text-align: center; color: var(--text-secondary, #4b5563); font-size: .875rem; }

.standings-hub__eyebrow {
  margin: 0 0 7px;
  color: var(--text-tertiary, #6b7280);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.standings-hub__tabs {
  display: grid;
  gap: 3px;
  margin: 0 0 18px;
}

.standings-hub__tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 47px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary, #111827);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.standings-hub__tab:hover,
.standings-hub__tab:focus-visible {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--text-primary, #111827);
  outline: none;
}

.standings-hub__tab:focus-visible { box-shadow: 0 0 0 2px var(--brand-primary, #4d8bff); }
.standings-hub__tab.is-active,
.standings-hub__tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--brand-primary, #4d8bff) 22%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #4d8bff) 22%, transparent);
  color: var(--text-primary, #111827);
}

.standings-hub__tab img {
  width: 30px;
  height: 30px;
  padding: 2px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
}

.standings-hub__tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.standings-hub__country-controls {
  display: grid;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.standings-hub__country-controls > button[data-country] {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary, #4b5563);
  font: 600 .8125rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}

.standings-hub__country-controls > button[data-country]:hover,
.standings-hub__country-controls > button[data-country]:focus-visible {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--text-primary, #111827);
  outline: none;
}

.standings-hub__country-controls > button[data-country]:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-primary, #4d8bff);
}

.standings-hub__country-controls > button[data-country].is-active,
.standings-hub__country-controls > button[data-country][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--brand-primary, #4d8bff) 22%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #4d8bff) 12%, transparent);
  color: var(--text-primary, #111827);
}

.standings-hub__country-list { display: grid; margin: 0; padding: 0; list-style: none; }
.standings-hub__country-row { border-bottom: 1px solid var(--border-subtle, #e5e7eb); }

.standings-hub__country-toggle {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: var(--text-primary, #111827);
  font: 600 .9rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}

.standings-hub__country-mark {
  width: 8px;
  height: 8px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--brand-primary, #4d8bff);
}
.standings-hub__country-toggle:hover { color: var(--brand-primary, #4d8bff); }
.standings-hub__country-toggle:focus-visible { outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: -2px; border-radius: 5px; }
.standings-hub__country-toggle.is-active,
.standings-hub__country-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand-primary, #4d8bff) 12%, transparent);
  color: var(--text-primary, #111827);
}
.standings-hub__country-toggle img { width: 26px; height: 18px; object-fit: cover; border-radius: 2px; }
.standings-hub__country-count { color: var(--text-tertiary, #6b7280); font: 500 .75rem/1 var(--font-mono); }
.standings-hub__country-panel { display: grid; gap: 2px; padding: 0 0 8px 36px; }
.standings-hub__country-panel[hidden] { display: none; }
.standings-hub__country-panel a { padding: 6px 4px; color: var(--text-secondary, #4b5563); font-size: .8125rem; }
.standings-hub__country-panel a:hover { color: var(--brand-primary, #4d8bff); }

.standings-hub__country-row[data-country-extra] { display: none; }
.standings-hub__country-controls.show-all-countries .standings-hub__country-row[data-country-extra] { display: block; }

.standings-hub__countries-more,
.standings-hub__browse-all {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary, #4d8bff);
  font: 600 .8125rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}

.standings-hub__browse-all {
  margin-top: 19px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  color: var(--text-primary, #111827);
  font-size: .9rem;
}

.standings-hub__content {
  min-width: 0;
  padding: 30px clamp(24px, 3vw, 44px) 64px;
  background: var(--bg-base, #f7f8fb);
}

.standings-hub__header {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.standings-hub__league-logo {
  width: 64px;
  height: 64px;
  padding: 4px;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #e5e7eb) 85%, transparent);
  border-radius: 12px;
  background: #fff;
}

.standings-hub__heading { min-width: 0; }
.standings-hub__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 15px; }
.standings-hub__league-name { margin: 0; font-size: clamp(1.45rem, 2.1vw, 1.8rem); font-weight: 750; letter-spacing: -.025em; }
.standings-hub__country { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary, #4b5563); font-size: .9375rem; }
.standings-hub__country img { width: 23px; height: 16px; object-fit: cover; border-radius: 2px; }

.standings-hub__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 15px;
  margin-top: 8px;
  color: var(--text-secondary, #4b5563);
  font-size: .8125rem;
}

.standings-hub__season {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 7px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #111827);
  font-weight: 600;
}

select.standings-hub__season { appearance: auto; font: inherit; }
.standings-hub__status { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.standings-hub__status-label { min-width: 0; overflow-wrap: anywhere; }
.standings-hub__status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--result-win, #4caf50);
}

.standings-hub__status[data-status-tone="delayed"] .standings-hub__status-dot,
.standings-hub[data-status-tone="delayed"] .standings-hub__status-dot { background: #f59e0b; }
.standings-hub__status[data-status-tone="archived"] .standings-hub__status-dot,
.standings-hub[data-status-tone="archived"] .standings-hub__status-dot { background: var(--text-tertiary, #6b7280); }

.standings-hub__full-link {
  justify-self: end;
  color: var(--brand-primary, #4d8bff);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.standings-hub__full-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.standings-hub__full-link:focus-visible { outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: 4px; border-radius: 2px; }
.standings-hub__full-link-slot {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
}

.standings-hub__section-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  min-width: 0;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--border-strong, #d1d5db);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.standings-hub__section-nav::-webkit-scrollbar { display: none; }
.standings-hub__section-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 2px;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary, #4b5563);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.standings-hub__section-nav a:hover,
.standings-hub__section-nav a:focus-visible { color: var(--text-primary, #111827); outline: none; }
.standings-hub__section-nav a.is-active,
.standings-hub__section-nav a[aria-current="page"] {
  border-bottom-color: var(--brand-primary, #4d8bff);
  color: var(--text-primary, #111827);
}
.standings-hub__section-nav svg,
.standings-hub__section-nav img { width: 19px; height: 19px; flex: 0 0 19px; }

.standings-hub__answer {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #4d8bff) 20%, var(--border-subtle, #e5e7eb));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary, #4d8bff) 7%, var(--bg-elevated, #fff));
  color: var(--text-secondary, #4b5563);
  font-size: .875rem;
  line-height: 1.5;
  max-width: none;
}

.standings-hub__answer h3 {
  margin: 0 0 3px;
  color: var(--text-primary, #111827);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.standings-hub__answer-text { margin: 0; }

.standings-hub__table-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
}

.standings-hub__table-shell .table-scroll-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.standings-hub__table-shell .standings-wrap,
.standings-hub__table-shell .simosports-app .standings-wrap {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.standings-hub__table-shell .standings-header { display: none; }
.standings-hub__table-shell .standings-table { min-width: 660px; font-size: .8125rem; }
.standings-hub__table-shell .standings-table th,
.standings-hub__table-shell .standings-table td { height: 49px; padding: 9px 14px; }
.standings-hub__table-shell .standings-table thead th {
  background: color-mix(in srgb, var(--bg-elevated, #fff) 90%, var(--bg-subtle, #f1f5f9));
  color: var(--text-tertiary, #6b7280);
  font-size: .6875rem;
  letter-spacing: .045em;
}
.standings-hub__table-shell .standings-table thead th abbr { color: inherit; text-decoration: none; cursor: help; }
.standings-hub__table-shell .standings-table tbody th {
  color: var(--text-primary, #111827);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.standings-hub__table-shell .standings-table tbody tr:last-child > * { border-bottom: 0; }
.standings-hub__table-shell .standings-table tbody > tr > * { background: color-mix(in srgb, var(--bg-elevated, #fff) 96%, var(--bg-subtle, #f1f5f9)); }
.standings-hub__table-shell .standings-table tbody tr:hover > * { background: var(--bg-subtle, #f1f5f9); }
.standings-hub__table-shell .standings-table__pos { width: 48px; }
.standings-hub__table-shell .standings-table__team { width: 40%; min-width: 230px; }
.standings-hub__table-shell .standings-team { gap: 10px; font-weight: 600; }
.standings-hub__table-shell .standings-crest {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 2px;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #e5e7eb) 80%, transparent);
  border-radius: 7px;
  background: #fff;
}
.standings-hub__table-shell .standings-pos { display: inline-flex; min-width: 20px; justify-content: center; }
.standings-hub__table-shell .standings-row--ucl td:first-child { box-shadow: inset 3px 0 var(--brand-primary, #4d8bff); }
.standings-hub__table-shell .standings-row--uel td:first-child { box-shadow: inset 3px 0 #f59e0b; }
.standings-hub__table-shell .standings-row--conference td:first-child { box-shadow: inset 3px 0 #65c84b; }
.standings-hub__table-shell .standings-row--rel td:first-child { box-shadow: inset 3px 0 #ef5350; }
.standings-hub__table-shell .form-dots { justify-content: flex-start; gap: 6px; white-space: nowrap; }
.standings-hub__table-shell .form-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font: 700 .6875rem/1 var(--font-mono);
}

.standings-hub__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 17px 0 0;
  color: var(--text-secondary, #4b5563);
  font-size: .75rem;
}
.standings-hub__legend-item { display: inline-flex; align-items: center; gap: 7px; }
.standings-hub__legend-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--text-tertiary, #6b7280); }
.standings-hub__legend-item--ucl .standings-hub__legend-swatch { background: var(--brand-primary, #4d8bff); }
.standings-hub__legend-item--uel .standings-hub__legend-swatch { background: #f59e0b; }
.standings-hub__legend-item--conference .standings-hub__legend-swatch { background: #65c84b; }
.standings-hub__legend-item--rel .standings-hub__legend-swatch { background: #ef5350; }

.standings-hub__state {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  color: var(--text-secondary, #4b5563);
  text-align: center;
}
.standings-hub__loader { display: none; }
.standings-hub__state--error { flex-direction: column; }
.standings-hub__retry {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--brand-primary, #4d8bff);
  border-radius: 7px;
  background: transparent;
  color: var(--brand-primary, #4d8bff);
  font: 700 .8125rem/1 var(--font-body);
  cursor: pointer;
}
.standings-hub__retry:hover { background: var(--brand-primary, #4d8bff); color: #fff; }
.standings-hub__retry:focus-visible { outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: 3px; }

.standings-hub__how {
  margin-top: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-elevated, #fff) 92%, transparent);
}
.standings-hub__how summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 13px 18px;
  color: var(--text-primary, #111827);
  font-weight: 650;
  cursor: pointer;
}
.standings-hub__how summary:focus-visible { outline: 2px solid var(--brand-primary, #4d8bff); outline-offset: -2px; border-radius: 8px; }
.standings-hub__how-body { padding: 0 18px 18px; color: var(--text-secondary, #4b5563); font-size: .875rem; }

[data-theme="dark"] .standings-hub {
  background: #0d1424;
  border-color: rgba(148, 163, 184, .18);
}
[data-theme="dark"] .standings-hub__sidebar { background: #0b1220; border-color: rgba(148, 163, 184, .22); }
[data-theme="dark"] .standings-hub__content { background: #0d1424; }
[data-theme="dark"] .standings-hub__search,
[data-theme="dark"] .standings-hub__season,
[data-theme="dark"] .standings-hub__results,
[data-theme="dark"] .standings-hub__table-shell { background: #101827; border-color: rgba(148, 163, 184, .22); }
[data-theme="dark"] .standings-hub__tab.is-active,
[data-theme="dark"] .standings-hub__tab[aria-selected="true"] { background: rgba(55, 111, 220, .28); border-color: rgba(77, 139, 255, .22); }
[data-theme="dark"] .standings-hub__table-shell .standings-table thead th { background: #0d1524; }
[data-theme="dark"] .standings-hub__table-shell .standings-table tbody > tr > * { background: #111927; border-color: rgba(148, 163, 184, .16); }
[data-theme="dark"] .standings-hub__table-shell .standings-table tbody tr:nth-child(even) > * { background: #0f1725; }
[data-theme="dark"] .standings-hub__table-shell .standings-table tbody tr:hover > * { background: #172237; }
[data-theme="dark"] .standings-hub__answer { background: rgba(55, 111, 220, .09); border-color: rgba(77, 139, 255, .2); }
[data-theme="dark"] .standings-hub__how { background: rgba(15, 23, 42, .45); border-color: rgba(148, 163, 184, .22); }

@media (max-width: 860px) {
  .standings-hub {
    width: 100%;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    border-inline: 0;
  }
  .standings-hub__sidebar {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  }
  .standings-hub__sidebar-inner { min-width: 0; }
  .standings-hub__sidebar-title { margin-bottom: 9px; font-size: .9375rem; }
  .standings-hub__finder { margin-bottom: 12px; }
  .standings-hub__search { height: 44px; }
  .standings-hub__eyebrow { margin-bottom: 7px; }
  .standings-hub__tabs {
    display: flex;
    gap: 8px;
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .standings-hub__tabs::-webkit-scrollbar { display: none; }
  .standings-hub__tab {
    flex: 0 0 auto;
    grid-template-columns: 26px auto;
    min-height: 42px;
    padding: 5px 11px;
    border-color: var(--border-subtle, #e5e7eb);
    background: var(--bg-elevated, #fff);
    scroll-snap-align: start;
    font-size: .8125rem;
  }
  .standings-hub__tab img { width: 24px; height: 24px; border-radius: 6px; }
  .standings-hub__country-controls { display: none; }
  .standings-hub__browse-all {
    min-height: 40px;
    margin: 11px 0 0;
    padding: 11px 0 0;
    font-size: .78rem;
  }
  .standings-hub__content { padding: 20px 16px 44px; }
  .standings-hub__header {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  .standings-hub__league-logo { width: 50px; height: 50px; border-radius: 10px; }
  .standings-hub__league-name { font-size: 1.35rem; }
  .standings-hub__full-link { grid-column: 1 / -1; justify-self: start; margin-top: 0; white-space: normal; }
  .standings-hub__section-nav { gap: 26px; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; }
  .standings-hub__section-nav a { min-height: 44px; font-size: .8125rem; }
  .standings-hub__answer { margin-bottom: 12px; }
  .standings-hub__table-shell { border-radius: 8px; }
  .standings-hub__how { margin-top: 18px; }
}

@media (max-width: 560px) {
  .page-id-232 .page-hero {
    padding-top: 22px;
    padding-bottom: 20px;
  }
  .page-id-232 .page-hero__title { font-size: 1.75rem; }
  .page-id-232 .page-hero__sub { font-size: .875rem; }
  .standings-hub__sidebar { padding-top: 13px; padding-bottom: 13px; }
  .standings-hub__sidebar-title { display: none; }
  .standings-hub__finder { margin-bottom: 10px; }
  .standings-hub__search { height: 42px; font-size: .8125rem; }
  .standings-hub__eyebrow { font-size: .625rem; }
  .standings-hub__content { padding: 16px 12px 36px; }
  .standings-hub__header { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; margin-bottom: 13px; }
  .standings-hub__league-logo { width: 44px; height: 44px; padding: 3px; align-self: start; }
  .standings-hub__league-name { font-size: 1.2rem; }
  .standings-hub__title-row { gap: 4px 9px; }
  .standings-hub__country { font-size: .78rem; }
  .standings-hub__meta { gap: 7px 10px; margin-top: 6px; font-size: .72rem; }
  .standings-hub__season { min-height: 27px; padding: 3px 8px; }
  .standings-hub__full-link { font-size: .78rem; }
  .standings-hub__section-nav { width: calc(100% + 24px); margin-inline: -12px; padding-inline: 12px; gap: 22px; }
  .standings-hub__section-nav a { gap: 6px; font-size: .75rem; }
  .standings-hub__section-nav svg,
  .standings-hub__section-nav img { width: 17px; height: 17px; flex-basis: 17px; }
  .standings-hub__answer { padding: 9px 10px; font-size: .76rem; }
  .standings-hub__table-shell .standings-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: .75rem;
  }
  .standings-hub__table-shell .standings-table th:nth-child(4),
  .standings-hub__table-shell .standings-table td:nth-child(4),
  .standings-hub__table-shell .standings-table th:nth-child(5),
  .standings-hub__table-shell .standings-table td:nth-child(5),
  .standings-hub__table-shell .standings-table th:nth-child(6),
  .standings-hub__table-shell .standings-table td:nth-child(6),
  .standings-hub__table-shell .standings-table th.standings-table__form,
  .standings-hub__table-shell .standings-table td.standings-table__form { display: none; }
  .standings-hub__table-shell .standings-table th,
  .standings-hub__table-shell .standings-table td { height: 44px; padding: 7px 5px; }
  .standings-hub__table-shell .standings-table__pos { width: 30px; }
  .standings-hub__table-shell .standings-table__team { width: auto; min-width: 0; }
  .standings-hub__table-shell .standings-table th:nth-child(3),
  .standings-hub__table-shell .standings-table td:nth-child(3) { width: 34px; }
  .standings-hub__table-shell .standings-table th:nth-child(7),
  .standings-hub__table-shell .standings-table td:nth-child(7) { width: 42px; }
  .standings-hub__table-shell .standings-table th.standings-table__pts,
  .standings-hub__table-shell .standings-table td.standings-table__pts { width: 38px; }
  .standings-hub__table-shell .standings-team { width: 100%; gap: 7px; min-width: 0; }
  .standings-hub__table-shell .standings-crest { width: 25px; height: 25px; flex-basis: 25px; border-radius: 6px; }
  .standings-hub__table-shell .standings-team__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .standings-hub__legend { gap: 8px 14px; font-size: .6875rem; }
  .standings-hub__state { min-height: 220px; padding: 24px 18px; }
  .standings-hub.is-enhanced .standings-hub__results { max-height: min(360px, calc(100vh - 130px)); }
}

/* Standings progressive-enhancement and compact-row compatibility. */
.standings-table tr:hover > * { background: var(--bg-subtle); }
.standings-team__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.standings-team__mobile-meta { display: none; }

/* Country filters are buttons, so they only become visible after their
   behavior has initialized. Featured competition links remain the no-JS nav. */
.standings-hub__country-controls { display: none; }
@media (min-width: 901px) {
  .standings-hub.is-enhanced .standings-hub__country-controls { display: grid; }
}

@media (max-width: 560px) {
	.standings-team__mobile-meta {
    display: block;
    overflow: hidden;
    color: var(--text-tertiary, #6b7280);
    font-size: .625rem;
    font-weight: 550;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
}

@media (max-width: 900px) {
  .standings-hub__full-link-slot {
    grid-column: 1 / span 2;
    justify-self: stretch;
    min-width: 0;
  }
  .standings-hub__full-link {
    display: block;
    width: auto;
    max-width: 100%;
    justify-self: stretch;
    text-align: left;
  }
}

/* ========================================================================
   Homepage matchday brief — 2026-09-04
   Homepage-only overrides for the selected compact, match-first direction.
   ===================================================================== */
.home .site-main {
  max-width: none;
  padding: 0;
}

.home .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.home .hp-matchday-brief {
  --hp-hero-border: rgba(255, 255, 255, 0.13);
  --hp-hero-muted: rgba(255, 255, 255, 0.72);
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(310px, 0.82fr);
  grid-template-areas:
    "intro intro"
    "feature rail";
  gap: 14px 28px;
  width: 100vw;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 30px max(24px, calc((100vw - 1280px) / 2)) 32px;
  color: #fff;
  background:
    radial-gradient(circle at 45% 20%, rgba(29, 95, 202, 0.22), transparent 38%),
    linear-gradient(118deg, #06152d 0%, #082348 58%, #061a35 100%);
  overflow: hidden;
}

.home .hp-matchday-brief > .wp-block-group {
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
}

.home .hp-matchday-brief__intro { grid-area: intro; }
.home .hp-matchday-brief__feature { grid-area: feature; }
.home .hp-matchday-brief__rail { grid-area: rail; min-width: 0; }

.home .hp-matchday-brief .page-hero {
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}

.home .hp-matchday-brief .page-hero::before { display: none; }
.home .hp-matchday-brief .page-hero__inner {
  max-width: 940px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.home .hp-matchday-brief .page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--hp-hero-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .page-hero__eyebrow-state { color: #ff636b; }
.home .hp-matchday-brief .page-hero__title {
  max-width: 940px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 3.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.home .hp-matchday-brief .page-hero__sub {
  max-width: 790px;
  margin: 9px 0 0;
  color: var(--hp-hero-muted);
  font-size: 16px;
  line-height: 1.45;
}

.home .hp-brief__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12.5px;
}

.home .hp-brief__meta span { display: inline-flex; align-items: center; gap: 8px; }
.home .hp-brief__meta a { color: #8ebcff; font-weight: 700; text-decoration: none; }
.home .hp-brief__meta a:hover { text-decoration: underline; }
.home .hp-matchday-brief .page-hero__live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43d18b;
  box-shadow: 0 0 0 4px rgba(67, 209, 139, 0.12);
}

.home .hp-matchday-brief .page-hero__ctas {
  justify-content: flex-start;
  margin-top: 22px;
}

.home .hp-matchday-brief .page-hero__ctas .btn--secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}

.home .hp-matchday-brief .topmatch { padding: 0; }
.home .hp-matchday-brief .topmatch .container,
.home .hp-matchday-brief .ticker .container {
  max-width: none;
  padding: 0;
}

.home .hp-matchday-brief .topmatch__head {
  display: none;
}

.home .hp-matchday-brief .topmatch__head .features__eyebrow { color: #87b6ff; }
.home .hp-matchday-brief .topmatch__head .features__title {
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.home .hp-matchday-brief .topmatch__card {
  max-width: none;
  margin: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--hp-hero-border);
  border-radius: 12px;
  box-shadow: none;
}

.home .hp-matchday-brief .topmatch__card:hover {
  transform: translateY(-2px);
  border-color: rgba(115, 164, 255, 0.75);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

/* The league logos are dark artwork on transparency - measured mean luminance
   is 0.064 (Premier League) and 0.125 (Champions League), i.e. essentially
   black. On the old rgba(0,0,0,0.12) strip over the dark hero the Premier
   League crest scored 1.0:1 against its own background and was invisible
   (owner report 2026-09-06). A white strip takes it to 9.2:1. This is also
   what the component already does everywhere off the homepage, where the
   base rule paints --bg-subtle. Text/badge colours below are re-set because
   the originals were tuned for the dark strip. */
.home .hp-matchday-brief .topmatch__top {
  padding: 9px 14px;
  background: #fff;
  border-color: rgba(16, 24, 40, 0.10);
}

.home .hp-matchday-brief .topmatch__league-name { color: #344054; }
/* Keeps the pill readable as a shape on white. The --live rule below is
   load-bearing: this selector is (0,3,0) and beats the base
   .topmatch__badge--live (0,1,0), which would turn live badges grey. It is
   written (0,4,0) so it wins on SPECIFICITY rather than source order, and a
   minifier reordering the file cannot break it. */
.home .hp-matchday-brief .topmatch__badge { background: #f2f4f7; border-color: #d0d5dd; color: #344054; }
.home .hp-matchday-brief .topmatch__badge.topmatch__badge--live { background: #fee4e2; border-color: #fecdca; color: #b42318; }
.home .hp-matchday-brief .topmatch__board { gap: 14px; padding: 15px 18px; }
.home .hp-matchday-brief .topmatch__crest {
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.38);
}

.home .hp-matchday-brief .topmatch__crest img { width: 54px; height: 54px; }
.home .hp-matchday-brief .topmatch__team-name,
.home .hp-matchday-brief .topmatch__score { color: #fff; }
.home .hp-matchday-brief .topmatch__score--live { color: #ff636b; }
.home .hp-matchday-brief .topmatch__score--upcoming { color: #fff; }
.home .hp-matchday-brief .topmatch__kickoff { color: var(--hp-hero-muted); }
.home .hp-matchday-brief .topmatch__cta {
  display: inline-flex;
  width: auto;
  margin: 0 0 14px 18px;
  padding: 10px 16px;
  border-radius: 6px;
  color: #fff;
  background: #1769e8;
  border-color: transparent;
  text-align: left;
}

.home .hp-matchday-brief .ticker {
  height: 100%;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
}

.home .hp-matchday-brief .ticker__head {
  display: none;
}

.home .hp-matchday-brief .ticker__title { color: #fff; font-size: 16px; }
.home .hp-matchday-brief .ticker__more { color: #8ebcff; }
.home .hp-matchday-brief .ticker__grid {
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
}

.home .hp-matchday-brief .ticker__grid > :nth-child(n+4) { display: none; }
.home .hp-matchday-brief .score-card--ticker {
  min-width: 0;
  padding: 10px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--hp-hero-border);
  box-shadow: none;
}

.home .hp-matchday-brief .score-card--ticker:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(115, 164, 255, 0.6);
}

.home .hp-matchday-brief .score-card__team-name,
.home .hp-matchday-brief .score-card__score,
.home .hp-matchday-brief .score-card__minute { color: #fff; }
.home .hp-matchday-brief .score-card__team-side:first-child {
  /* row-reverse keeps the home crest beside the separator; flex-start in the
     reversed axis pulls the whole home side toward the central “v”. */
  justify-content: flex-start;
}
.home .hp-matchday-brief .score-card__status-row {
  border-top: 0;
}
.home .hp-matchday-brief .score-card__league,
.home .hp-matchday-brief .score-card__status { color: var(--hp-hero-muted); }
/* White plate only behind logo images. The initials medallion (no image,
   data-tint) keeps its tint - a white plate under white initials made every
   club without a crest render as an empty white box (found 2026-09-05). */
.home .hp-matchday-brief .score-card__crest--img { background: #fff; }
.home .hp-matchday-brief .ticker__placeholder {
  min-height: 210px;
  color: var(--hp-hero-muted);
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--hp-hero-border);
}

.home .hp-today {
  width: 100%;
  padding: 40px 24px 38px;
  background: var(--bg-base, #fff);
}

.home .hp-today > .container { max-width: 1280px; }
.home .hp-today .section-hdr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 24px;
  margin-bottom: 13px;
}

.home .hp-today .section-hdr .features__eyebrow { grid-column: 1 / -1; }
.home .hp-today .features__title { font-size: clamp(27px, 3vw, 38px); }
.home .hp-today__quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 13px;
}

.home .hp-today__quick-links a {
  padding: 7px 12px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 999px;
  color: var(--text-secondary, #667085);
  background: var(--bg-elevated, #fff);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.home .hp-today__quick-links a:hover,
.home .hp-today__quick-links a[aria-current="page"] {
  color: var(--brand-primary, #2563eb);
  border-color: color-mix(in srgb, var(--brand-primary, #2563eb) 45%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #2563eb) 8%, var(--bg-elevated, #fff));
}

.home .hp-today__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: start;
  gap: 20px;
}

.home .hp-today__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home .hp-today__group { border-radius: 10px; }
.home .hp-today__group-head { padding: 10px 13px; }
.home .hp-today__row { grid-template-columns: 66px minmax(0, 1fr) auto; padding: 8px 12px; }
.home .hp-today__time { white-space: nowrap; }
.home .hp-today__insight {
  position: sticky;
  top: 88px;
  padding: 20px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.home .hp-today__insight h3 {
  margin: 6px 0 10px;
  color: var(--text-primary, #111827);
  font-size: 22px;
  line-height: 1.12;
}

.home .hp-today__insight p {
  margin: 0 0 14px;
  color: var(--text-secondary, #667085);
  font-size: 14px;
  line-height: 1.58;
}

.home .hp-today__insight-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.home .hp-today__insight-crest {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.home .hp-today__insight-fixture strong { color: var(--text-primary, #111827); }
.home .hp-today__insight-fixture span { font-size: 12.5px; }
.home .hp-today__confidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 17px 0 7px;
  color: var(--text-secondary, #667085);
  font-size: 12.5px;
}
.home .hp-today__confidence strong { color: #078b57; }
.home .hp-today__meter {
  width: 100%;
  height: 9px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 999px;
  background: #e7edf5;
}
.home .hp-today__meter::-webkit-meter-bar { border: 0; border-radius: 999px; background: #e7edf5; }
.home .hp-today__meter::-webkit-meter-optimum-value { border-radius: 999px; background: linear-gradient(90deg, #1769e8, #19b36b); }
.home .hp-today__meter::-moz-meter-bar { border-radius: 999px; background: linear-gradient(90deg, #1769e8, #19b36b); }
.home .hp-today__disclaimer { font-size: 12.5px !important; line-height: 1.45 !important; }

.home .hp-today__insight .btn { width: 100%; justify-content: center; }
.home .hp-today__method {
  display: inline-block;
  margin-top: 14px;
  color: var(--brand-primary, #2563eb);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.home .hp-today__method:hover { text-decoration: underline; }
.home .hp-today__all { margin: 18px 0 0; }
.home .hp-today__all a { color: var(--brand-primary, #2563eb); font-weight: 750; text-decoration: none; }
.home .hp-today__all a:hover { text-decoration: underline; }

.home .hp-about-band {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.4fr);
  gap: 28px;
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 28px 0 30px;
  border-top: 1px solid var(--border-subtle, #e4e7ec);
  border-bottom: 1px solid var(--border-subtle, #e4e7ec);
}

.home .hp-about-band .hp-about,
.home .hp-about-band .hp-metrics { padding: 0; border: 0; background: transparent; }
.home .hp-about-band .hp-about__inner,
.home .hp-about-band .hp-metrics__inner { max-width: none; padding: 0; }
.home .hp-about-band .hp-about__h {
  margin: 5px 0 12px;
  color: var(--text-primary, #111827);
  font-size: 25px;
  line-height: 1.15;
}

.home .hp-about-band .hp-about__p {
  margin: 0 0 12px;
  color: var(--text-secondary, #667085);
  font-size: 13.5px;
  line-height: 1.62;
}

.home .hp-about-band .hp-about__p a,
.home .hp-about__links a { color: var(--brand-primary, #2563eb); font-weight: 650; }
.home .hp-about__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; font-size: 13px; }
.home .hp-about-band .hp-metrics__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.home .hp-about-band .hp-metrics__tile {
  min-height: 78px;
  justify-content: center;
  padding: 14px 18px;
  border: 0;
  border-left: 1px solid var(--border-subtle, #e4e7ec);
  border-radius: 0;
  background: transparent;
}

.home .hp-about-band .hp-metrics__tile:hover { transform: none; background: var(--bg-subtle, #f8fafc); }
.home .hp-about-band .hp-metrics__num { font-size: 23px; }

.home .features { padding-block: 42px; }
.home .features__head { margin-bottom: 20px; }
.home .features__title { font-size: clamp(27px, 3vw, 38px); }
.home .features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home .feature-card { padding: 17px; border-radius: 10px; }
.home .feature-card__icon { width: 34px; height: 34px; margin-bottom: 9px; }
.home .feature-card__title { font-size: 16px; }
.home .feature-card__title a { color: inherit; text-decoration: none; }
.home .feature-card__title a:hover { color: var(--brand-primary, #2563eb); text-decoration: underline; }
.home .feature-card__body { font-size: 12.5px; line-height: 1.45; }

.home .hp-top-leagues { padding: 38px 24px; }
.home .hp-top-leagues .container { max-width: 1280px; }
.home .hp-top-leagues__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.home .hp-top-leagues__grid { margin-top: 18px; gap: 9px; }
.home .hp-top-leagues__card { padding: 10px 12px; border-radius: 10px; }

.home .how-it-works { padding: 34px 24px 36px; background: var(--bg-base, #fff); }
.home .how-it-works .container { max-width: 1280px; }
.home .hiw-hdr { margin: 0 0 16px; text-align: left; }
.home .hiw-title { margin-top: 10px; font-size: clamp(27px, 3vw, 38px); }
.home .hiw-lede { display: none; }
.home .hiw-grid { gap: 0; }
.home .hiw-grid::before { display: none; }
.home .hiw-card {
  min-height: 165px;
  padding: 14px 22px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}
.home .hiw-card:first-child { border-left: 0; }
.home .hiw-card:hover { transform: none; box-shadow: none; background: var(--bg-subtle, #f8fafc); }
.home .hiw-card__num { color: var(--brand-primary, #2563eb); background: none; font-size: 38px; }
.home .hiw-card__icon { display: none; }
.home .hiw-card__body { font-size: 13.5px; line-height: 1.5; }
.home .hiw-card__cta { min-height: 36px; padding-block: 6px; }

.home .homepage-faq,
.home .hp-faq { padding-block: 34px; }
.home .hp-faq__list { margin-top: 15px; gap: 5px; }
.home .hp-faq__q { padding: 11px 16px; font-size: 14px; }
.home .hp-faq__a { padding: 0 16px 12px; font-size: 13px; line-height: 1.45; }
.home .final-cta {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto 34px;
  padding: 22px 24px;
  border-radius: 12px;
}
.home .final-cta__title { font-size: clamp(28px, 3.2vw, 36px); }
.home .final-cta__sub { font-size: 15px; }
.home .final-cta .pill { margin-bottom: 12px !important; }
.home .final-cta__actions { margin-top: 16px; }

.home + .site-footer,
.home .site-footer { padding-top: 30px; }

.home .site-footer { padding: 24px 0 16px; }
.home .site-footer__grid { gap: 20px; margin-bottom: 18px; }
.home .site-footer__brand .site-wordmark { margin-bottom: 6px; }
.home .site-footer__tagline { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.home .site-footer__col-title { margin-bottom: 9px; }
.home .footer-nav { gap: 4px; }
.home .footer-nav a { font-size: 12.5px; }
.home .site-footer__bottom { padding-top: 13px; font-size: 11.5px; }

/* Focused desktop navigation from the selected homepage direction. */
.site-nav { gap: 8px; margin-left: 24px; }
.site-nav__link {
  gap: 5px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text-primary, #111827);
  font-size: 14px;
  font-weight: 700;
}
.site-nav__link:hover,
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] { border: 0; transform: none; }
.site-nav__chevron { color: var(--text-tertiary, #667085); font-size: 15px; line-height: 1; }
@media (min-width: 1181px) {
  .site-header .search-trigger { width: 240px; min-width: 240px; max-width: 240px; }
  .site-header .search-trigger__hint { display: block !important; }
}

@media (max-width: 1050px) {
  .home .hp-matchday-brief {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: 20px;
  }
  .home .hp-matchday-brief .topmatch__board { gap: 10px; padding-inline: 14px; }
  .home .hp-matchday-brief .topmatch__crest { width: 66px; height: 66px; }
  .home .hp-matchday-brief .topmatch__crest img { width: 50px; height: 50px; }
  .home .hp-matchday-brief .topmatch__team-name { font-size: 14px; }
  .home .hp-matchday-brief .topmatch__score { font-size: 42px; }
  .home .hp-today__list { grid-template-columns: 1fr; }
  .home .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .hp-top-leagues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 821px) {
  .home .hp-matchday-brief { padding-bottom: 26px; }
  .home .hp-matchday-brief__rail {
    padding-left: 26px;
    border-left: 1px solid var(--hp-hero-border);
  }
  .home .hp-matchday-brief .ticker__grid { gap: 0; }
  .home .hp-matchday-brief .score-card--ticker {
    padding: 13px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hp-hero-border);
    border-radius: 0;
  }
  .home .hp-matchday-brief .score-card--ticker:first-child { padding-top: 3px; }
  .home .hp-matchday-brief .score-card--ticker:last-child { border-bottom: 0; }
}

@media (min-width: 1060px) {
  .home .hp-matchday-brief .topmatch__crest { width: 90px; height: 90px; }
  .home .hp-matchday-brief .topmatch__crest img { width: 74px; height: 74px; }
  .home .hp-top-leagues__grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .home .hp-top-leagues__card {
    grid-template-columns: 1fr !important;
    align-content: start;
    align-items: start;
    justify-items: start;
    gap: 6px !important;
    min-height: 112px;
  }
  .home .hp-top-leagues__rank,
  .home .hp-top-leagues__rating { display: none; }
  .home .hp-top-leagues__crest { width: 34px; height: 34px; }
  .home .hp-top-leagues__name { overflow-wrap: anywhere; white-space: normal; font-size: 13.5px; line-height: 1.2; }
}

@media (max-width: 820px) {
  .home .hp-matchday-brief {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "feature" "rail";
    padding-top: 28px;
  }
  .home .hp-matchday-brief .ticker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .hp-matchday-brief .ticker__grid > :nth-child(n+3) { display: none; }
  .home .hp-today__layout { grid-template-columns: 1fr; }
  .home .hp-today__insight { position: static; }
  .home .hp-about-band { grid-template-columns: 1fr; gap: 28px; }
  .home .how-it-works { padding-inline: 24px; }
  .home .hiw-grid { grid-template-columns: 1fr; }
  .home .hiw-card { min-height: 0; border-width: 1px 0 0; }
  .home .hiw-card:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  .home .hp-matchday-brief {
    gap: 20px;
    padding: 24px 16px 28px;
  }
  .home .hp-matchday-brief .page-hero__title { font-size: 36px; line-height: 1.06; }
  .home .hp-matchday-brief .page-hero__sub { font-size: 15px; }
  .home .hp-brief__meta { flex-direction: column; }
  .home .hp-matchday-brief .page-hero__ctas { display: grid; grid-template-columns: 1fr; }
  .home .hp-matchday-brief .page-hero__ctas .btn { width: 100%; justify-content: center; }
  .home .hp-matchday-brief .topmatch__board { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 20px 10px; }
  .home .hp-matchday-brief .topmatch__crest { width: 58px; height: 58px; }
  .home .hp-matchday-brief .topmatch__crest img { width: 44px; height: 44px; }
  .home .hp-matchday-brief .topmatch__team { gap: 9px; }
  .home .hp-matchday-brief .topmatch__centre { padding: 0 4px; }
  .home .hp-matchday-brief .topmatch__score { font-size: 32px; }
  .home .hp-matchday-brief .topmatch__score--upcoming { font-size: 24px; }
  .home .hp-matchday-brief .topmatch__team-name { width: 100%; font-size: 12px; }
  .home .hp-matchday-brief .ticker__grid { grid-template-columns: 1fr; }
  .home .hp-matchday-brief .ticker__grid > :nth-child(n+3) { display: none; }
  .home .hp-today { padding: 36px 16px; }
  .home .hp-today .section-hdr { grid-template-columns: 1fr; }
  .home .hp-today .section-hdr__more { justify-self: start; }
  .home .hp-today__quick-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .home .hp-today__quick-links a { flex: 0 0 auto; }
  .home .hp-today__row { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 7px; padding-inline: 10px; }
  .home .hp-today__team-name { font-size: 12.5px; }
  .home .hp-today__insight { padding: 20px; }
  .home .hp-about-band { width: calc(100% - 32px); padding-block: 32px; }
  .home .hp-about-band .hp-metrics__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .hp-about-band .hp-metrics__tile { border-top: 1px solid var(--border-subtle, #e4e7ec); }
  .home .features { padding: 38px 16px; }
  .home .features__grid { grid-template-columns: 1fr; }
  .home .hp-top-leagues { padding: 36px 16px; }
  .home .hp-top-leagues__grid { grid-template-columns: 1fr !important; }
  .home .how-it-works { padding: 36px 16px; }
  .home .hiw-card { padding: 17px 8px; }
  .home .homepage-faq { padding-inline: 16px; }
  .home .final-cta { width: calc(100% - 32px); margin-bottom: 28px; padding: 32px 18px; }
  .home .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .home .site-footer__brand { grid-column: 1 / -1; }
}

/* ── Links inside running text must not rely on colour alone ─────────────
 * The global `a { text-decoration: none }` is right for nav, cards and
 * buttons, but a link sitting inside a sentence then differs from the words
 * around it by colour only (brand blue on secondary grey is a 1.3-1.6:1
 * contrast), which fails WCAG 1.4.1 and Lighthouse's link-in-text-block
 * audit. Restore the underline in the prose contexts only. Scoped, so nothing
 * outside these blocks changes. */
.fx-odds__foot a,
.lt-footer__note a,
.sm-pro-pred__foot a,
.fx-shotmap__foot a,
.fx-tv__footnote a,
.team-faq__a a,
.about-transparency a,
.brand-promo__note a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.fx-odds__foot a:hover,
.lt-footer__note a:hover,
.sm-pro-pred__foot a:hover,
.fx-shotmap__foot a:hover,
.fx-tv__footnote a:hover,
.team-faq__a a:hover,
.about-transparency a:hover,
.brand-promo__note a:hover {
  text-decoration-thickness: 2px;
}