/* =================================================================
   Cricketerstales V2 — main stylesheet
   =================================================================
   Design language: ADVANCED SPORTS PORTAL (green / red / white).
     - Deep green sticky header, white cards on cool-grey ground
     - Red reserved for LIVE, trending and urgency
     - Poppins (bold geometric) headlines, Inter body/UI
     - Chips, badges, team medallions, probability bars
   Reference points: CricTracker's colour confidence, Cricbuzz's
   density, CREX's card polish.
   ================================================================= */


/* =================================================================
   1. DESIGN TOKENS
   ================================================================= */

:root {
    /* Black chrome (variable names kept from earlier eras so all
       existing references keep working — values are now near-black) */
    --ct-green-950:       #09090b;
    --ct-green-900:       #101014;
    --ct-green-800:       #1a1a21;

    /* Accents.
       --ct-brand      vivid green — links, CTAs, active states on LIGHT surfaces
       --ct-volt       bright green — accents on BLACK chrome (logo, active nav)
       --ct-pink       hot pink    — secondary accent: team B, predictions, picks */
    --ct-brand:           #12a150;
    --ct-brand-bright:    #22c55e;
    --ct-brand-dark:      var(--ct-green-900);
    --ct-brand-tint:      #e8f8ee;
    --ct-brand-tint-2:    #cdefda;
    --ct-volt:            #3ddc84;
    --ct-volt-dim:        #2fb86a;
    --ct-pink:            #ff2e88;
    --ct-pink-dark:       #d6136b;
    --ct-pink-tint:       #ffe4f1;

    /* Reds — LIVE + urgency only */
    --ct-red:             #ff3355;
    --ct-red-dark:        #d91e42;
    --ct-red-tint:        #ffebef;
    --ct-live:            #ff3355;

    /* Surfaces — neutral near-black-tinted greys, white cards */
    --ct-bg:              #f5f5f6;
    --ct-surface:         #ffffff;
    --ct-surface-2:       #efeff1;
    --ct-border:          #e5e5e9;
    --ct-border-strong:   #ccccd4;

    /* Text */
    --ct-text:            #121216;
    --ct-text-muted:      #5d5d68;
    --ct-text-dim:        #8e8e99;

    /* Status */
    --ct-win:             #12a150;
    --ct-loss:            #ff3355;
    --ct-tie:             #b07820;
    --ct-fav:             #c89d2c;
    --ct-prob-track:      #e5e5e9;

    /* Typography */
    --ct-font-display:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ct-font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ct-font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --ct-fs-xxs:          11px;
    --ct-fs-xs:           12px;
    --ct-fs-sm:           13.5px;
    --ct-fs-base:         15.5px;
    --ct-fs-md:           17px;
    --ct-fs-lg:           19px;
    --ct-fs-xl:           22px;
    --ct-fs-2xl:          26px;
    --ct-fs-3xl:          32px;
    --ct-fs-4xl:          40px;

    --ct-lh-tight:        1.12;
    --ct-lh-snug:         1.3;
    --ct-lh-normal:       1.55;
    --ct-lh-loose:        1.75;

    --ct-space-1:         4px;
    --ct-space-2:         8px;
    --ct-space-3:         12px;
    --ct-space-4:         16px;
    --ct-space-5:         20px;
    --ct-space-6:         24px;
    --ct-space-8:         32px;
    --ct-space-10:        40px;
    --ct-space-12:        48px;
    --ct-space-16:        64px;
    --ct-space-20:        80px;

    --ct-container:       1240px;
    --ct-container-narrow: 760px;
    --ct-radius-sm:       6px;
    --ct-radius:          10px;
    --ct-radius-lg:       14px;
    --ct-radius-xl:       18px;

    --ct-shadow-sm:       0 1px 3px rgba(10, 10, 16, 0.07);
    --ct-shadow:          0 4px 14px rgba(10, 10, 16, 0.09);
    --ct-shadow-lg:       0 14px 34px rgba(10, 10, 16, 0.14);

    --ct-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ct-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ct-dur-fast:        150ms;
    --ct-dur:             250ms;

    --ct-z-header:        100;
    --ct-z-drawer:        150;
    --ct-z-mobile-nav:    200;
}


/* =================================================================
   2. RESET + BASE
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: var(--ct-font-body);
    font-size: var(--ct-fs-base);
    line-height: var(--ct-lh-normal);
}

h1, h2, h3, h4, h5 {
    font-family: var(--ct-font-display);
    color: var(--ct-text);
    margin: 0 0 var(--ct-space-3);
    line-height: var(--ct-lh-snug);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--ct-fs-3xl); font-weight: 800; line-height: var(--ct-lh-tight); }
h2 { font-size: var(--ct-fs-2xl); }
h3 { font-size: var(--ct-fs-xl); }
h4 { font-size: var(--ct-fs-lg); }
h5 { font-size: var(--ct-fs-md); }
h6 {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ct-text-muted);
    margin: 0 0 var(--ct-space-3);
}

p { margin: 0 0 var(--ct-space-4); }
p:last-child { margin-bottom: 0; }

.ct-num, .ct-score, table td, table th, .ct-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

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

ul, ol { margin: 0 0 var(--ct-space-4); padding-left: var(--ct-space-6); }
li { margin-bottom: var(--ct-space-1); }

img { max-width: 100%; height: auto; display: block; }

code, pre, kbd, samp { font-family: var(--ct-font-mono); font-size: 0.9em; }
code {
    background: var(--ct-surface-2);
    padding: 0.1em 0.35em;
    border-radius: var(--ct-radius-sm);
}
pre {
    background: var(--ct-surface-2);
    padding: var(--ct-space-4);
    border-radius: var(--ct-radius);
    overflow-x: auto;
    margin: var(--ct-space-4) 0;
}

blockquote {
    margin: var(--ct-space-6) 0;
    padding: var(--ct-space-4) var(--ct-space-5);
    background: var(--ct-brand-tint);
    border-left: 4px solid var(--ct-brand);
    border-radius: 0 var(--ct-radius) var(--ct-radius) 0;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-lg);
    font-weight: 500;
    line-height: var(--ct-lh-snug);
}

hr { border: none; border-top: 1px solid var(--ct-border); margin: var(--ct-space-8) 0; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ct-space-4) 0;
    font-size: var(--ct-fs-sm);
}
th, td {
    padding: var(--ct-space-3);
    text-align: left;
    border-bottom: 1px solid var(--ct-border);
}
th {
    font-weight: 700;
    color: var(--ct-text-muted);
    text-transform: uppercase;
    font-size: var(--ct-fs-xxs);
    letter-spacing: 0.06em;
    background: var(--ct-surface-2);
}

input, textarea, select, button { font: inherit; color: inherit; }

::selection { background: var(--ct-brand-tint-2); }

:focus-visible {
    outline: 2px solid var(--ct-brand);
    outline-offset: 2px;
}

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


/* =================================================================
   3. UTILITIES
   ================================================================= */

.ct-container {
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 0 var(--ct-space-4);
}
@media (min-width: 900px) {
    .ct-container { padding: 0 var(--ct-space-6); }
}

.ct-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ct-sr-only:focus {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 999;
    width: auto; height: auto;
    padding: 10px 16px;
    background: var(--ct-surface);
    border: 2px solid var(--ct-brand);
    border-radius: var(--ct-radius-sm);
    clip: auto;
}

.ct-no-scroll { overflow: hidden; }

.ct-empty {
    color: var(--ct-text-dim);
    font-size: var(--ct-fs-sm);
    padding: var(--ct-space-4) 0;
}

/* Section link — "All predictions →" */
.ct-section-link {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-brand);
    white-space: nowrap;
}
.ct-section-link::after { content: " →"; }
.ct-section-link:hover { color: var(--ct-green-900); }

/* Live dot */
.ct-live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ct-live);
    box-shadow: 0 0 0 0 rgba(255, 51, 85, 0.45);
    animation: ct-live-pulse 1.8s ease-out infinite;
}
@keyframes ct-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 51, 85, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(255, 51, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 51, 85, 0); }
}

/* Chips */
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.ct-chip-green { background: var(--ct-brand); color: #fff; }
.ct-chip-red   { background: var(--ct-red); color: #fff; }
.ct-chip-ghost { background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(4px); }
/* Ghost chip on light surfaces (hero body is white now) */
.ct-hero-body .ct-chip-ghost {
    background: var(--ct-surface-2);
    color: var(--ct-text-muted);
    backdrop-filter: none;
}

/* Buttons */
.ct-btn {
    display: inline-block;
    padding: 12px 26px;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border: 0;
    border-radius: var(--ct-radius-sm);
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(18, 161, 80, 0.32);
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease),
                filter var(--ct-dur-fast) var(--ct-ease);
}
.ct-btn:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(18, 161, 80, 0.4);
}
.ct-btn-light {
    background: #fff;
    color: var(--ct-green-900);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.ct-btn-light:hover { color: var(--ct-green-900); }

/* Title accent bar */
.ct-title-bar {
    display: inline-block;
    width: 5px;
    height: 1em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 10px;
    vertical-align: -0.12em;
}

/* Duotone placeholder for imageless posts */
.ct-placeholder {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: flex;
    align-items: flex-end;
    border-radius: inherit;
}
.ct-placeholder-inner {
    padding: var(--ct-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ct-placeholder-label {
    font-family: var(--ct-font-display);
    font-weight: 600;
    font-size: var(--ct-fs-sm);
    color: rgba(255, 255, 255, 0.92);
}
.ct-placeholder-mark {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.55);
}

/* Ad containers */
.ct-ad {
    margin: var(--ct-space-5) auto;
    text-align: center;
}
.ct-ad-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ct-text-dim);
    margin-bottom: 4px;
}
.ct-ad-frame { margin: 0 auto; border: 0; display: block; }
.ct-ad-pair-top { margin: var(--ct-space-4) 0; }


/* =================================================================
   4. HEADER — utility strip + sticky green mainbar
   ================================================================= */

.ct-header {
    position: sticky;
    top: 0;
    z-index: var(--ct-z-header);
    box-shadow: 0 2px 12px rgba(5, 5, 8, 0.35);
}


/* --- Utility strip --- */


/* --- Mainbar --- */
.ct-mainbar {
    background: linear-gradient(105deg, var(--ct-green-900) 0%, var(--ct-green-800) 70%, #22222b 100%);
}
.ct-mainbar-inner {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
    height: 58px;
}
@media (min-width: 900px) {
    .ct-mainbar-inner { height: 64px; gap: var(--ct-space-6); }
}

.ct-brand { display: flex; align-items: center; min-width: 0; }
.ct-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ct-font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    white-space: nowrap;
}
.ct-logo:hover { color: #fff; }
.ct-logo-icon {
    display: inline-flex;
    color: var(--ct-volt);
}
.ct-logo-dot { color: var(--ct-volt); }
.ct-brand .custom-logo { max-height: 42px; width: auto; }
.ct-brand-tagline { display: none; }

@media (min-width: 900px) {
    .ct-logo { font-size: 24px; }
}

.ct-nav {
    display: none;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    height: 100%;
}
@media (min-width: 900px) {
    .ct-nav { display: flex; }
}
.ct-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 13px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    transition: color var(--ct-dur-fast) var(--ct-ease), background var(--ct-dur-fast) var(--ct-ease);
}
.ct-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}
.ct-nav-link.is-active { color: #fff; }
.ct-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ct-volt);
}

.ct-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    margin-left: auto;
}
@media (min-width: 900px) {
    .ct-search-btn { margin-left: 0; }
}
.ct-search-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Burger — mobile only */
.ct-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 9px;
    background: none;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.ct-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--ct-dur) var(--ct-ease), opacity var(--ct-dur) var(--ct-ease);
}
.ct-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ct-burger.is-open span:nth-child(2) { opacity: 0; }
.ct-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) {
    .ct-burger { display: none; }
}

/* --- Mobile drawer --- */
.ct-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--ct-z-drawer);
    background: linear-gradient(160deg, var(--ct-green-950), var(--ct-green-900));
    padding: 92px var(--ct-space-6) var(--ct-space-10);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--ct-dur) var(--ct-ease),
                transform var(--ct-dur) var(--ct-ease-out),
                visibility 0s linear var(--ct-dur);
    overflow-y: auto;
}
.ct-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--ct-dur) var(--ct-ease),
                transform var(--ct-dur) var(--ct-ease-out);
}
.ct-drawer-link {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xl);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: var(--ct-space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-drawer-link:hover { color: #fff; }
.ct-drawer-link.is-active { color: var(--ct-volt); }
/* Keep the header (and burger) above the drawer */
.ct-header { z-index: calc(var(--ct-z-drawer) + 1); }


/* =================================================================
   5. TRENDING STRIP
   ================================================================= */

.ct-trending {
    background: var(--ct-surface);
    border-bottom: 1px solid var(--ct-border);
}
.ct-trending-inner {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
    height: 40px;
    overflow: hidden;
}
.ct-trending-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ff5570, var(--ct-red));
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 51, 85, 0.3);
}
.ct-trending-track-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ct-trending-track {
    display: inline-flex;
    align-items: center;
    animation: ct-marquee 45s linear infinite;
}
.ct-trending-track-wrap:hover .ct-trending-track { animation-play-state: paused; }
@keyframes ct-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ct-trending-item {
    font-size: var(--ct-fs-sm);
    font-weight: 500;
    color: var(--ct-text);
    padding-right: var(--ct-space-8);
    position: relative;
}
.ct-trending-item::after {
    content: "•";
    position: absolute;
    right: 13px;
    color: var(--ct-red);
}
.ct-trending-item:hover { color: var(--ct-brand); }
@media (prefers-reduced-motion: reduce) {
    .ct-trending-track { animation: none; }
}


/* =================================================================
   6. BAND / SECTION FURNITURE
   ================================================================= */

.ct-band { padding: var(--ct-space-10) 0; }

.ct-band-head { margin-bottom: var(--ct-space-6); }
.ct-band-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ct-red);
    margin: 0 0 var(--ct-space-1);
}
.ct-band-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-2) var(--ct-space-4);
}
.ct-band-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    margin: 0;
}
.ct-band-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 0.95em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 12px;
    vertical-align: -0.12em;
}

/* Sidebar section furniture — white cards */
.ct-side-section {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-5);
    margin-bottom: var(--ct-space-6);
}
.ct-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
    margin-bottom: var(--ct-space-4);
}
.ct-side-title {
    font-size: var(--ct-fs-md);
    font-weight: 700;
    margin: 0;
}
.ct-side-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 0.95em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 9px;
    vertical-align: -0.1em;
}

/* Generic section head (h2h + ported templates) */
.ct-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-2) var(--ct-space-4);
    margin-bottom: var(--ct-space-5);
}
.ct-section-title { font-size: var(--ct-fs-xl); font-weight: 700; margin: 0; }
.ct-section-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 0.95em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 10px;
    vertical-align: -0.1em;
}

/* Legacy eyebrow spans (hero used to use these) */
.ct-eyebrow-tag {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ct-brand);
}
.ct-eyebrow-meta {
    font-size: var(--ct-fs-xxs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-text-dim);
}


/* =================================================================
   7. HOME — LIVE BAND
   ================================================================= */

.ct-live-band {
    background: var(--ct-surface);
    border-bottom: 1px solid var(--ct-border);
    padding: var(--ct-space-3) 0 var(--ct-space-4);
}
.ct-live-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ct-space-2);
}
.ct-live-band-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ct-text);
}
.ct-live-ticker-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* =================================================================
   8. HOME — LEAD BAND (overlay hero + top stories card)
   ================================================================= */

.ct-lead-band { padding: var(--ct-space-6) 0 var(--ct-space-4); }
.ct-lead-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
}
@media (min-width: 900px) {
    .ct-lead-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
        gap: var(--ct-space-6);
        align-items: stretch;
    }
}

/* Hero — SPLIT CARD. Image sits on top, text lives on its own panel
   below it. Nothing is ever laid over the photograph. */
.ct-hero { position: relative; }
.ct-hero-link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
    box-shadow: var(--ct-shadow);
    transition: transform var(--ct-dur) var(--ct-ease-out),
                box-shadow var(--ct-dur) var(--ct-ease-out);
}
.ct-hero-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow-lg);
}
.ct-hero-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ct-surface-2);
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .ct-hero-visual { aspect-ratio: 16 / 8; }
}
.ct-hero-visual .ct-placeholder { position: absolute; inset: 0; min-height: 100%; }
.ct-hero-visual .ct-placeholder-inner { display: none; }
.ct-hero-img, .ct-hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ct-ease-out);
}
.ct-hero-link:hover .ct-hero-img,
.ct-hero-link:hover .ct-hero-visual img { transform: scale(1.04); }
/* Overlay retired — kept invisible so existing markup stays valid */
.ct-hero-overlay { display: none; }
.ct-hero-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--ct-space-5);
    border-top: 3px solid var(--ct-volt);
}
@media (min-width: 900px) {
    .ct-hero-body { padding: var(--ct-space-5) var(--ct-space-6) var(--ct-space-6); }
}
.ct-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
    margin: 0 0 var(--ct-space-3);
}
.ct-hero-title {
    font-size: clamp(21px, 3vw, 30px);
    font-weight: 800;
    line-height: var(--ct-lh-tight);
    color: var(--ct-text);
    margin-bottom: var(--ct-space-2);
    transition: color var(--ct-dur-fast) var(--ct-ease);
}
.ct-hero-link:hover .ct-hero-title { color: var(--ct-brand); }
.ct-hero-deck {
    font-size: var(--ct-fs-sm);
    line-height: var(--ct-lh-normal);
    color: var(--ct-text-muted);
    max-width: 62ch;
    margin-bottom: var(--ct-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-hero-meta {
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-dim);
    margin: 0;
    margin-top: auto;
}

/* Top stories — white card with thumbed rows */
.ct-topstories {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-5);
    display: flex;
    flex-direction: column;
}
.ct-topstories-title {
    font-size: var(--ct-fs-md);
    font-weight: 700;
    margin: 0 0 var(--ct-space-2);
}
.ct-topstories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ct-topstory { margin: 0; }
.ct-topstory-link {
    display: flex;
    gap: var(--ct-space-3);
    align-items: center;
    padding: var(--ct-space-3) 0;
    border-bottom: 1px solid var(--ct-border);
}
.ct-topstory:last-child .ct-topstory-link { border-bottom: 0; padding-bottom: 0; }
.ct-topstory-visual {
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: var(--ct-radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, var(--ct-green-800), var(--ct-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-topstory-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ct-topstory-num {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xl);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
}
.ct-topstory-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-topstory-headline {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    line-height: var(--ct-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--ct-dur-fast) var(--ct-ease);
}
.ct-topstory-link:hover .ct-topstory-headline { color: var(--ct-brand); }
.ct-topstory-meta {
    font-size: var(--ct-fs-xxs);
    color: var(--ct-text-dim);
    display: flex;
    gap: var(--ct-space-2);
    align-items: baseline;
}
.ct-topstory-cat {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-red);
}


/* =================================================================
   9. HOME — PREDICTIONS DESK
   ================================================================= */

.ct-band-predictions {
    background: var(--ct-surface);
    padding: var(--ct-space-10) 0;
    margin-top: var(--ct-space-6);
    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
}

.ct-predictions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
}
@media (min-width: 640px) {
    .ct-predictions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .ct-predictions-grid { grid-template-columns: repeat(3, 1fr); }
}

.ct-prediction-card {
    position: relative;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease),
                border-color var(--ct-dur-fast) var(--ct-ease);
}
.ct-prediction-card::before {
    /* top accent strip */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ct-brand-bright), var(--ct-brand) 55%, var(--ct-red));
}
.ct-prediction-card:hover {
    transform: translateY(-3px);
    border-color: var(--ct-brand-tint-2);
    box-shadow: var(--ct-shadow-lg);
}
.ct-prediction-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ct-space-5);
    padding-top: calc(var(--ct-space-5) + 4px);
}

.ct-prediction-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
    margin-bottom: var(--ct-space-5);
}
.ct-prediction-tournament {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-prediction-when {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    color: var(--ct-text-muted);
    white-space: nowrap;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ct-surface-2);
}
.ct-prediction-card.is-today .ct-prediction-when {
    background: linear-gradient(180deg, #ff5570, var(--ct-red));
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 51, 85, 0.3);
}
.ct-prediction-card.is-tomorrow .ct-prediction-when {
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
}
.ct-prediction-card.is-past .ct-prediction-when { color: var(--ct-text-dim); }

/* Face: team A | VS | team B */
/* Team rows — horizontal, badge + name + pct, favourite highlighted */
.ct-prediction-rows {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-2);
    margin-bottom: var(--ct-space-3);
}
.ct-prediction-row {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    min-width: 0;
    padding: 7px 10px;
    border-radius: var(--ct-radius);
    background: var(--ct-surface-2);
    border: 1px solid transparent;
}
.ct-prediction-row.is-pick {
    background: var(--ct-brand-tint);
    border-color: var(--ct-brand-tint-2);
}
.ct-team-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--ct-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}
.ct-team-badge-a {
    background: linear-gradient(145deg, var(--ct-brand-bright), var(--ct-green-800));
    box-shadow: 0 2px 8px rgba(18, 161, 80, 0.3);
}
.ct-team-badge-b {
    background: linear-gradient(145deg, #ff5fa8, var(--ct-pink-dark));
    box-shadow: 0 2px 8px rgba(255, 46, 136, 0.25);
}
.ct-prediction-team-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-prediction-row.is-pick .ct-prediction-team-name { color: var(--ct-green-900); font-weight: 700; }
.ct-prediction-pct {
    margin-left: auto;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-md);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ct-prediction-pct span { font-size: 0.65em; font-weight: 700; }
.ct-prediction-pct.is-a { color: var(--ct-brand); }
.ct-prediction-pct.is-b { color: var(--ct-pink-dark); }

.ct-prediction-title-fallback {
    font-size: var(--ct-fs-lg);
    margin-bottom: var(--ct-space-3);
}

/* Win probability bar — green vs red */
.ct-prob-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff5570, var(--ct-red));
    overflow: hidden;
    margin-bottom: var(--ct-space-4);
}
.ct-prob-a {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 999px 0 0 999px;
    transition: width 900ms var(--ct-ease-out);
}
.ct-prob-a.ct-prob-pending { width: 0 !important; }
.ct-prob-bar::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
}

.ct-prediction-venue {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-muted);
    margin: var(--ct-space-3) 0 0;
    min-width: 0;
}
.ct-prediction-venue > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-venue-pin { color: var(--ct-red); flex-shrink: 0; }
.ct-prediction-venue-city { color: var(--ct-text-dim); }

/* Footer strip: pick chip left, text link right */
.ct-prediction-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
    margin-top: auto;
    padding-top: var(--ct-space-3);
    border-top: 1px solid var(--ct-border);
    margin-top: var(--ct-space-4);
}
.ct-prediction-pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-prediction-pick-chip svg { color: var(--ct-brand); flex-shrink: 0; }
.ct-prediction-cta {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: var(--ct-brand);
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--ct-dur-fast) var(--ct-ease);
}
.ct-prediction-link:hover .ct-prediction-cta { transform: translateX(2px); }


/* =================================================================
   10. HOME — NEWS BAND + ASIDE
   ================================================================= */

.ct-band-news { padding: var(--ct-space-10) 0; }

.ct-home-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-8);
}
@media (min-width: 1000px) {
    .ct-home-layout {
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: var(--ct-space-8);
    }
}

/* News list — white card rows */
.ct-news-list {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-3);
}
.ct-news-row {
    background: var(--ct-surface);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-news-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow);
}
.ct-news-link {
    display: flex;
    gap: var(--ct-space-4);
    padding: var(--ct-space-3);
    align-items: center;
}
.ct-news-visual {
    flex-shrink: 0;
    width: 104px;
    aspect-ratio: 1;
    border-radius: var(--ct-radius-sm);
    overflow: hidden;
    background: var(--ct-surface-2);
}
.ct-news-thumb, .ct-news-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ct-news-visual .ct-placeholder { min-height: 100%; }
.ct-news-body { min-width: 0; padding-right: var(--ct-space-2); }
.ct-news-eyebrow {
    display: flex;
    gap: var(--ct-space-2);
    align-items: center;
    margin-bottom: 6px;
}
.ct-news-cat {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-news-meta-tour {
    font-size: var(--ct-fs-xxs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-text-dim);
}
.ct-news-title {
    font-size: var(--ct-fs-md);
    font-weight: 600;
    line-height: var(--ct-lh-snug);
    margin-bottom: 5px;
    transition: color var(--ct-dur-fast) var(--ct-ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-news-link:hover .ct-news-title { color: var(--ct-brand); }
.ct-news-meta { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }

@media (min-width: 640px) {
    .ct-news-visual { width: 128px; }
}

/* Sidebar tiles */
.ct-sidebar-tiles { display: flex; flex-direction: column; gap: var(--ct-space-2); }
.ct-st-item {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    padding: var(--ct-space-3) var(--ct-space-4);
    background: var(--ct-surface-2);
    border-radius: var(--ct-radius-sm);
    transition: background var(--ct-dur-fast) var(--ct-ease);
}
.ct-st-item:hover { background: var(--ct-brand-tint); }
.ct-st-icon { font-size: var(--ct-fs-md); line-height: 1; }
.ct-st-title {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    flex: 1;
}
.ct-st-arrow { color: var(--ct-brand); font-weight: 700; }
.ct-st-block { margin-bottom: var(--ct-space-3); }
.ct-st-block-title {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--ct-space-2);
}
.ct-st-block-body { font-size: var(--ct-fs-sm); }

/* Mobile strip variant */
.ct-st-mobile-only {
    display: none;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--ct-space-2);
    padding-bottom: var(--ct-space-2);
    margin-bottom: var(--ct-space-5);
}
.ct-st-mobile-only .ct-st-item {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--ct-surface);
    box-shadow: var(--ct-shadow-sm);
}
.ct-st-desktop-only { display: flex; }
@media (max-width: 767px) {
    .ct-st-mobile-only { display: flex; }
    .ct-st-desktop-only { display: none; }
}

/* Tournament carousel (aside) */
.ct-tour-carousel-wrap { position: relative; }
.ct-tour-carousel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ct-space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ct-tour-carousel::-webkit-scrollbar { display: none; }
.ct-tour-card { flex: 0 0 118px; margin: 0; }
.ct-tour-card-link { display: block; }
.ct-tour-card-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--ct-surface-2);
    border-radius: var(--ct-radius);
    overflow: hidden;
    margin-bottom: var(--ct-space-2);
    transition: box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-tour-card-link:hover .ct-tour-card-cover { box-shadow: inset 0 0 0 2px var(--ct-brand); }
.ct-tour-card-cover img {
    max-width: 72%;
    max-height: 72%;
    object-fit: contain;
}
.ct-tour-card-fallback {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-lg);
    font-weight: 800;
    color: var(--ct-text-dim);
}
.ct-tour-card-badge {
    position: absolute;
    top: 6px; left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
}
.ct-tour-card-badge.is-live { background: var(--ct-red); color: #fff; }
.ct-tour-card-badge.is-live .ct-live-dot,
.ct-tour-card-badge .ct-tour-live-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    animation: none;
    box-shadow: none;
}
.ct-tour-card-badge.is-upcoming { background: var(--ct-brand-tint); color: var(--ct-green-900); }
.ct-tour-card-name {
    display: block;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    line-height: 1.3;
}
.ct-tour-nav {
    position: absolute;
    top: 38px;
    z-index: 2;
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--ct-text);
    box-shadow: var(--ct-shadow);
}
.ct-tour-nav:hover { background: var(--ct-brand); border-color: var(--ct-brand); color: #fff; }
.ct-tour-nav-prev { left: -12px; }
.ct-tour-nav-next { right: -12px; }

/* Tournament list (single sidebar) */
.ct-tour-list { list-style: none; margin: 0; padding: 0; }
.ct-tour-item { margin: 0; border-bottom: 1px solid var(--ct-border); }
.ct-tour-item:last-child { border-bottom: 0; }
.ct-tour-link {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    padding: var(--ct-space-3) 0;
}
.ct-tour-logo {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-surface-2);
    border-radius: var(--ct-radius-sm);
    overflow: hidden;
}
.ct-tour-logo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.ct-tour-logo-fallback {
    font-family: var(--ct-font-display);
    font-weight: 800;
    color: var(--ct-text-dim);
}
.ct-tour-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ct-tour-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-tour-meta { display: flex; gap: var(--ct-space-2); align-items: center; }
.ct-tour-status {
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ct-tour-status.is-live { color: var(--ct-red); }
.ct-tour-status.is-upcoming { color: var(--ct-brand); }
.ct-tour-fmt { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-tour-chevron { color: var(--ct-text-dim); }
.ct-tour-link:hover .ct-tour-name { color: var(--ct-brand); }

/* Fixtures list */
.ct-fix-list { list-style: none; margin: 0; padding: 0; }
.ct-fix-item { margin: 0; border-bottom: 1px solid var(--ct-border); }
.ct-fix-item:last-child { border-bottom: 0; }
.ct-fix-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--ct-space-3) 0;
}
.ct-fix-when {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-red);
}
.ct-fix-teams {
    display: flex;
    align-items: baseline;
    gap: var(--ct-space-2);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
}
.ct-fix-vs {
    font-size: 10px;
    font-weight: 700;
    color: var(--ct-text-dim);
    text-transform: uppercase;
}
.ct-fix-title {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
}
.ct-fix-link:hover .ct-fix-teams,
.ct-fix-link:hover .ct-fix-title { color: var(--ct-brand); }
.ct-fix-tour { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }

/* Stadium spotlight card */
.ct-stadium-card {
    border-radius: var(--ct-radius);
    overflow: hidden;
    background: var(--ct-surface-2);
}
.ct-stadium-link { display: block; }
.ct-stadium-visual {
    aspect-ratio: 16 / 9;
    background: var(--ct-surface-2);
    overflow: hidden;
}
.ct-stadium-thumb, .ct-stadium-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ct-stadium-visual .ct-placeholder { min-height: 100%; }
.ct-stadium-body { padding: var(--ct-space-4); }
.ct-stadium-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-red);
    margin-bottom: 4px;
}
.ct-stadium-title { font-size: var(--ct-fs-md); margin: 0; }
.ct-stadium-link:hover .ct-stadium-title { color: var(--ct-brand); }
.ct-stadium-excerpt {
    font-size: var(--ct-fs-sm);
    color: var(--ct-text-muted);
    margin-top: var(--ct-space-2);
}


/* =================================================================
   11. HOME — WATCH (dark green video band)
   ================================================================= */

.ct-band-videos {
    background: linear-gradient(160deg, var(--ct-green-950) 0%, var(--ct-green-900) 100%);
    padding: var(--ct-space-10) 0;
}
.ct-band-videos .ct-band-eyebrow { color: #ff8fa0; }
.ct-band-videos .ct-band-title { color: #fff; }
.ct-band-videos .ct-section-link { color: var(--ct-volt); }
.ct-band-videos .ct-section-link:hover { color: #a8f0c4; }

.ct-video-tabs {
    display: flex;
    gap: var(--ct-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--ct-space-5);
    scrollbar-width: none;
}
.ct-video-tabs::-webkit-scrollbar { display: none; }
.ct-video-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 999px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ct-dur-fast) var(--ct-ease), color var(--ct-dur-fast) var(--ct-ease);
}
.ct-video-tab:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ct-video-tab.is-active {
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    color: #fff;
    box-shadow: 0 3px 10px rgba(18, 161, 80, 0.35);
}
.ct-video-tab-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ff8fa0;
}
.ct-video-tab.is-active .ct-video-tab-live { color: #ffd2d2; }

.ct-video-panel { display: none; }
.ct-video-panel.is-active { display: block; }

.ct-video-livebar {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
    padding: var(--ct-space-3) var(--ct-space-4);
    background: rgba(255, 51, 85, 0.16);
    border: 1px solid rgba(255, 51, 85, 0.4);
    border-radius: var(--ct-radius);
    margin-bottom: var(--ct-space-4);
}
.ct-video-livebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ff8fa0;
    white-space: nowrap;
}
.ct-video-livebar-text {
    flex: 1;
    min-width: 0;
    font-size: var(--ct-fs-sm);
    color: rgba(255, 255, 255, 0.9);
}
.ct-video-livebar-title {
    display: block;
    font-size: var(--ct-fs-xs);
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-video-livebar-cta {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: #fff;
    background: var(--ct-red);
    padding: 7px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.ct-videos-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--ct-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--ct-space-2);
    scroll-snap-type: x mandatory;
}
@media (min-width: 640px) {
    .ct-videos-rail { grid-auto-columns: 38%; }
}
@media (min-width: 1000px) {
    .ct-videos-rail { grid-auto-columns: 24%; }
}
.ct-video-card { scroll-snap-align: start; }
.ct-video-trigger { display: block; }
.ct-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--ct-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: var(--ct-space-3);
}
.ct-video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ct-ease-out);
}
.ct-video-trigger:hover .ct-video-thumb img { transform: scale(1.04); }
.ct-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-video-play svg {
    width: 46px; height: 46px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    transition: transform var(--ct-dur-fast) var(--ct-ease);
}
.ct-video-trigger:hover .ct-video-play svg { transform: scale(1.1); }
.ct-video-channel {
    position: absolute;
    bottom: 6px; left: 6px;
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(8, 8, 12, 0.82);
    padding: 3px 8px;
    border-radius: 999px;
}
.ct-video-body { display: block; }
.ct-video-title {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    line-height: var(--ct-lh-snug);
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-video-trigger:hover .ct-video-title { color: var(--ct-volt); }
.ct-video-meta { font-size: var(--ct-fs-xxs); color: rgba(255, 255, 255, 0.5); }
.ct-video-empty { color: rgba(255, 255, 255, 0.6); font-size: var(--ct-fs-sm); }


/* =================================================================
   12. AROUND THE WEB
   ================================================================= */

.ct-band-aroundweb { padding: var(--ct-space-10) 0; }
.ct-aroundweb-head { display: flex; align-items: baseline; gap: var(--ct-space-3); }
.ct-aroundweb-source {
    font-family: var(--ct-font-body);
    font-size: var(--ct-fs-xxs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-text-dim);
}

.ct-aroundweb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
}
@media (min-width: 640px) {
    .ct-aroundweb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .ct-aroundweb-grid { grid-template-columns: repeat(3, 1fr); }
}

.ct-aroundweb-card {
    background: var(--ct-surface);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-aroundweb-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow);
}
.ct-aroundweb-link {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-2);
    padding: var(--ct-space-5);
    height: 100%;
}
.ct-aroundweb-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
}
.ct-aroundweb-source-pill {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ct-red-tint);
    color: var(--ct-red-dark);
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ct-aroundweb-date { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-aroundweb-title {
    font-size: var(--ct-fs-md);
    font-weight: 600;
    line-height: var(--ct-lh-snug);
    margin: 0;
    transition: color var(--ct-dur-fast) var(--ct-ease);
}
.ct-aroundweb-link:hover .ct-aroundweb-title { color: var(--ct-brand); }
.ct-aroundweb-desc {
    font-size: var(--ct-fs-sm);
    color: var(--ct-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-aroundweb-cta {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-brand);
    margin-top: auto;
}
.ct-aroundweb-disclaimer {
    font-size: var(--ct-fs-xxs);
    color: var(--ct-text-dim);
    margin-top: var(--ct-space-4);
}


/* =================================================================
   13. STATS CENTRE TEASER
   ================================================================= */

.ct-band-stats { padding: 0 0 var(--ct-space-12); }
.ct-stats-teaser {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-8);
    background: linear-gradient(115deg, var(--ct-green-950) 0%, var(--ct-green-800) 75%, var(--ct-brand) 130%);
    border-radius: var(--ct-radius-xl);
    padding: var(--ct-space-10) var(--ct-space-8);
    overflow: hidden;
    box-shadow: var(--ct-shadow-lg);
}
.ct-stats-teaser::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 6px; height: 100%;
    background: linear-gradient(180deg, var(--ct-red), transparent);
    opacity: 0.7;
}
.ct-stats-teaser-body { position: relative; z-index: 1; max-width: 560px; }
.ct-stats-teaser-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ct-volt);
    margin-bottom: var(--ct-space-2);
}
.ct-stats-teaser-title {
    color: #fff;
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    margin-bottom: var(--ct-space-3);
}
.ct-stats-teaser-desc {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--ct-fs-base);
    margin-bottom: var(--ct-space-5);
}
.ct-stats-teaser-art {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    opacity: 0.9;
}
@media (max-width: 639px) {
    .ct-stats-teaser { padding: var(--ct-space-8) var(--ct-space-5); }
    .ct-stats-teaser-art { display: none; }
}


/* =================================================================
   14. SINGLE POST
   ================================================================= */

.ct-single { padding: var(--ct-space-8) 0 var(--ct-space-12); }

.ct-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-8);
}
@media (min-width: 1000px) {
    .ct-single-grid {
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: var(--ct-space-8);
    }
}

.ct-post {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-6);
}
@media (min-width: 900px) {
    .ct-post { padding: var(--ct-space-8); }
}

.ct-post-header { margin-bottom: var(--ct-space-5); }
.ct-post-eyebrow {
    display: inline-flex;
    margin-bottom: var(--ct-space-3);
}
.ct-post-eyebrow a {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-post-eyebrow a:hover { background: var(--ct-brand-tint-2); }
.ct-post-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    line-height: var(--ct-lh-tight);
    margin-bottom: var(--ct-space-3);
}
.ct-post-deck {
    font-size: var(--ct-fs-lg);
    line-height: var(--ct-lh-normal);
    color: var(--ct-text-muted);
    margin-bottom: var(--ct-space-4);
}
.ct-post-byline {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
    padding: var(--ct-space-3) 0;
}
.ct-post-byline-avatar { border-radius: 50%; }
.ct-post-byline-text { display: flex; flex-direction: column; gap: 1px; }
.ct-post-byline-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
}
.ct-post-byline-name:hover { color: var(--ct-brand); }
.ct-post-byline-date { font-size: var(--ct-fs-xs); color: var(--ct-text-dim); }

.ct-main-poll { margin-bottom: var(--ct-space-5); }

.ct-post-featured { margin: 0 0 var(--ct-space-6); }
.ct-post-featured img {
    width: 100%;
    border-radius: var(--ct-radius);
}
.ct-post-featured figcaption {
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-dim);
    padding-top: var(--ct-space-2);
}

.ct-post-content {
    max-width: var(--ct-container-narrow);
    font-size: var(--ct-fs-md);
    line-height: var(--ct-lh-loose);
}
.ct-post-content > p:first-of-type { font-size: var(--ct-fs-lg); }
.ct-post-content h2, .ct-post-content h3 { margin-top: var(--ct-space-8); }
.ct-post-content img { border-radius: var(--ct-radius); }
.ct-post-content a {
    color: var(--ct-brand);
    text-decoration: underline;
    text-decoration-color: var(--ct-brand-tint-2);
    text-underline-offset: 3px;
}
.ct-post-content a:hover { text-decoration-color: var(--ct-brand); }

/* Author card */
.ct-author-card {
    display: flex;
    gap: var(--ct-space-5);
    background: var(--ct-surface-2);
    border-radius: var(--ct-radius-lg);
    padding: var(--ct-space-6);
    margin-top: var(--ct-space-8);
}
.ct-author-avatar { border-radius: 50%; }
.ct-author-body { flex: 1; min-width: 0; }
.ct-author-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ct-red);
    margin-bottom: var(--ct-space-1);
}
.ct-author-name { font-size: var(--ct-fs-xl); margin-bottom: var(--ct-space-1); }
.ct-author-name a:hover { color: var(--ct-brand); }
.ct-author-tagline {
    display: flex;
    gap: var(--ct-space-2);
    font-size: var(--ct-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ct-text-muted);
    margin-bottom: var(--ct-space-3);
}
.ct-author-bio {
    font-size: var(--ct-fs-sm);
    color: var(--ct-text-muted);
    margin-bottom: var(--ct-space-3);
}
.ct-author-meta {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
    font-size: var(--ct-fs-sm);
    color: var(--ct-text-muted);
    margin-bottom: var(--ct-space-3);
}
.ct-author-social { font-size: var(--ct-fs-md); }
.ct-author-cta {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: var(--ct-brand);
}
@media (max-width: 639px) {
    .ct-author-card { flex-direction: column; }
}

/* Tags */
.ct-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-2);
    margin-top: var(--ct-space-6);
}
.ct-post-tag {
    display: inline-flex;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    color: var(--ct-text-muted);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    transition: background var(--ct-dur-fast) var(--ct-ease), color var(--ct-dur-fast) var(--ct-ease);
}
.ct-post-tag:hover { background: var(--ct-brand-tint); color: var(--ct-green-900); }

/* Share row */
.ct-share-row {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
    margin-top: var(--ct-space-5);
    padding-top: var(--ct-space-5);
    border-top: 1px solid var(--ct-border);
}
.ct-share-label {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-text-muted);
    margin-right: var(--ct-space-2);
}
.ct-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: #fff;
    transition: transform var(--ct-dur-fast) var(--ct-ease), filter var(--ct-dur-fast) var(--ct-ease);
}
.ct-share-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.ct-share-wa { background: #25d366; }
.ct-share-x  { background: #16181c; }
.ct-share-fb { background: #1877f2; }
.ct-share-tg { background: #229ed9; }

/* Match-preview eyebrow variant (H2H related previews) */
.ct-top-eyebrow-mark.is-pred { background: var(--ct-pink-tint); color: var(--ct-pink-dark); }

/* Comments */
.comments-area { margin-top: var(--ct-space-8); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--ct-space-6); }
.comment-list .children { list-style: none; padding-left: var(--ct-space-6); }
.comment-list .comment {
    border-bottom: 1px solid var(--ct-border);
    padding: var(--ct-space-4) 0;
}
.comment-list .comment .avatar {
    border-radius: 50%;
    float: left;
    margin-right: var(--ct-space-3);
}
.comment-author .fn { font-family: var(--ct-font-display); font-weight: 600; font-style: normal; }
.comment-metadata { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.comment-content { clear: both; padding-top: var(--ct-space-2); font-size: var(--ct-fs-sm); }
.comment-reply-link {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-brand);
}
.comment-reply-title, .comments-title {
    font-size: var(--ct-fs-xl);
    margin-top: var(--ct-space-8);
}
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ct-border-strong);
    border-radius: var(--ct-radius-sm);
    background: var(--ct-surface);
}
.comment-form input[type="submit"] {
    padding: 12px 26px;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border: 0;
    border-radius: var(--ct-radius-sm);
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

/* Static pages */
.ct-page { padding: var(--ct-space-8) 0 var(--ct-space-12); }
.ct-page .ct-post { max-width: 900px; margin: 0 auto; }


/* =================================================================
   15. ARCHIVES + SEARCH + 404 + AUTHOR
   ================================================================= */

.ct-archive-header { padding: var(--ct-space-8) 0 var(--ct-space-6); }
.ct-archive-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ct-red);
    margin-bottom: var(--ct-space-2);
}
.ct-archive-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin: 0;
}
.ct-archive-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 0.9em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 14px;
    vertical-align: -0.08em;
}
.ct-archive-desc {
    color: var(--ct-text-muted);
    margin-top: var(--ct-space-3);
    max-width: 68ch;
}
.ct-archive-sidebar-block { margin: var(--ct-space-8) 0; }

/* Post cards */
.ct-post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
    padding-bottom: var(--ct-space-8);
}
@media (min-width: 640px) {
    .ct-post-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .ct-post-list { grid-template-columns: repeat(3, 1fr); }
}
.ct-post-card {
    display: flex;
    flex-direction: column;
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow);
}
.ct-post-card-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ct-surface-2);
}
.ct-post-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ct-ease-out);
}
.ct-post-card:hover .ct-post-card-thumb img { transform: scale(1.04); }
.ct-post-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--ct-space-4) var(--ct-space-5) var(--ct-space-5);
}
.ct-post-card-cat { margin-bottom: var(--ct-space-2); }
.ct-post-card-cat a {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-post-card-title {
    font-size: var(--ct-fs-md);
    font-weight: 700;
    line-height: var(--ct-lh-snug);
    margin-bottom: var(--ct-space-2);
}
.ct-post-card-title a:hover { color: var(--ct-brand); }
.ct-post-card-excerpt {
    font-size: var(--ct-fs-sm);
    color: var(--ct-text-muted);
    margin-bottom: var(--ct-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-post-card-meta {
    font-size: var(--ct-fs-xxs);
    color: var(--ct-text-dim);
    margin-top: auto;
}

/* Pagination */
.ct-pagination {
    padding: var(--ct-space-6) 0 var(--ct-space-10);
    text-align: center;
}
.ct-pagination .nav-links {
    display: inline-flex;
    gap: var(--ct-space-2);
    align-items: center;
}
.ct-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: var(--ct-surface);
    border-radius: var(--ct-radius-sm);
    box-shadow: var(--ct-shadow-sm);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ct-pagination .page-numbers.current {
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    color: #fff;
}
.ct-pagination .page-numbers:hover:not(.current) { color: var(--ct-brand); }

/* Search form */
.ct-search-form-wrap { margin-top: var(--ct-space-5); max-width: 560px; }
.ct-search-form-wrap form { display: flex; gap: var(--ct-space-2); }
.ct-search-form-wrap input[type="search"],
.ct-search-form-wrap input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--ct-border-strong);
    border-radius: var(--ct-radius-sm);
    background: var(--ct-surface);
    font-size: var(--ct-fs-base);
}
.ct-search-form-wrap input[type="search"]:focus,
.ct-search-form-wrap input[type="text"]:focus {
    outline: 2px solid var(--ct-brand);
    outline-offset: 0;
    border-color: var(--ct-brand);
}
.ct-search-form-wrap input[type="submit"],
.ct-search-form-wrap button {
    padding: 12px 22px;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border: 0;
    border-radius: var(--ct-radius-sm);
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

/* 404 / empty state */
.ct-404 {
    text-align: center;
    padding: var(--ct-space-16) var(--ct-space-4);
    max-width: 480px;
    margin: 0 auto;
}
.ct-404-num {
    font-family: var(--ct-font-display);
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, var(--ct-brand), var(--ct-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: var(--ct-space-4);
}
.ct-404-title { font-size: var(--ct-fs-2xl); }
.ct-404-desc { color: var(--ct-text-muted); margin-bottom: var(--ct-space-6); }

/* Author hero — banner card: black chrome strip, overlapping avatar
   with volt ring, chips + stat pills below */
.ct-author-hero {
    position: relative;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
    margin: var(--ct-space-8) 0 var(--ct-space-6);
}
.ct-author-hero-banner {
    height: 96px;
    background: linear-gradient(105deg, var(--ct-green-950) 0%, var(--ct-green-900) 55%, var(--ct-green-800) 100%);
    border-bottom: 3px solid var(--ct-volt);
}
.ct-author-hero-inner {
    display: flex;
    gap: var(--ct-space-5);
    align-items: flex-start;
    padding: 0 var(--ct-space-6) var(--ct-space-6);
}
.ct-author-avatar-wrap {
    flex-shrink: 0;
    margin-top: -48px;
    border-radius: 50%;
    padding: 4px;
    background: var(--ct-surface);
    box-shadow: var(--ct-shadow-sm);
}
.ct-author-hero-avatar {
    display: block;
    border-radius: 50%;
    border: 3px solid var(--ct-volt);
    width: 96px; height: 96px;
}
.ct-author-hero-body { padding-top: var(--ct-space-4); min-width: 0; }
.ct-author-hero-name {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    margin-bottom: var(--ct-space-2);
    line-height: var(--ct-lh-tight);
}
.ct-author-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-2);
    margin-bottom: var(--ct-space-3);
}
.ct-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    color: var(--ct-text-muted);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
}
.ct-author-chip-spec { background: var(--ct-brand-tint); color: var(--ct-brand); }
.ct-author-hero-bio {
    color: var(--ct-text-muted);
    max-width: 64ch;
    margin: 0 0 var(--ct-space-4);
    font-size: var(--ct-fs-sm);
    line-height: var(--ct-lh-normal);
}
.ct-author-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ct-space-4);
}
.ct-author-count {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-text-muted);
    background: var(--ct-surface-2);
    padding: 6px 14px;
    border-radius: 999px;
}
.ct-author-count strong { color: var(--ct-brand); font-weight: 800; }
.ct-author-social-row { display: inline-flex; gap: var(--ct-space-2); }
.ct-author-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ct-green-900);
    color: #fff;
    transition: background var(--ct-dur-fast) var(--ct-ease),
                color var(--ct-dur-fast) var(--ct-ease),
                transform var(--ct-dur-fast) var(--ct-ease);
}
.ct-author-social:hover {
    background: var(--ct-brand);
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 639px) {
    .ct-author-hero-banner { height: 76px; }
    .ct-author-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 var(--ct-space-4) var(--ct-space-5);
    }
    .ct-author-avatar-wrap { margin-top: -44px; }
    .ct-author-hero-avatar { width: 84px; height: 84px; }
    .ct-author-hero-body { padding-top: var(--ct-space-2); }
    .ct-author-chips, .ct-author-meta { justify-content: center; }
    .ct-author-hero-bio { margin-left: auto; margin-right: auto; }
}


/* =================================================================
   16. NEWS HUB
   ================================================================= */

.ct-news-hub { padding-bottom: var(--ct-space-12); }
.ct-newshub-intro { padding: var(--ct-space-8) 0 var(--ct-space-6); }
.ct-newshub-page-title {
    font-size: clamp(28px, 4.6vw, 42px);
    font-weight: 800;
    margin-bottom: var(--ct-space-2);
}
.ct-newshub-page-title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 0.9em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 14px;
    vertical-align: -0.08em;
}
.ct-newshub-page-sub { color: var(--ct-text-muted); font-size: var(--ct-fs-md); margin: 0; }

.ct-newshub-section { margin-bottom: var(--ct-space-10); }
.ct-newshub-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-2) var(--ct-space-4);
    margin-bottom: var(--ct-space-5);
}
.ct-newshub-section-title { font-size: var(--ct-fs-2xl); font-weight: 800; margin: 0; }
.ct-newshub-section-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 0.9em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 11px;
    vertical-align: -0.08em;
}
.ct-newshub-section-title a:hover { color: var(--ct-brand); }
.ct-newshub-more {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-brand);
    white-space: nowrap;
}
.ct-newshub-more:hover { color: var(--ct-green-900); }

.ct-newshub-subcat { margin-bottom: var(--ct-space-6); }
.ct-newshub-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
    margin-bottom: var(--ct-space-3);
}
.ct-newshub-subtitle {
    display: inline-flex;
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ct-newshub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-3);
}
@media (min-width: 640px) {
    .ct-newshub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .ct-newshub-grid { grid-template-columns: repeat(3, 1fr); }
}
.ct-newshub-card {
    min-width: 0;
    background: var(--ct-surface);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-newshub-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow);
}
.ct-newshub-card-link {
    display: flex;
    gap: var(--ct-space-3);
    align-items: center;
    padding: var(--ct-space-3);
}
.ct-newshub-card-visual {
    flex-shrink: 0;
    width: 68px;
    aspect-ratio: 1;
    border-radius: var(--ct-radius-sm);
    overflow: hidden;
    background: var(--ct-surface-2);
}
.ct-newshub-card-visual img,
.ct-newshub-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ct-newshub-card-visual .ct-placeholder { min-height: 100%; }
.ct-newshub-card-fallback { width: 100%; height: 100%; background: var(--ct-surface-2); }
.ct-newshub-card-body { min-width: 0; }
.ct-newshub-card-title {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    line-height: var(--ct-lh-snug);
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-newshub-card-link:hover .ct-newshub-card-title { color: var(--ct-brand); }
.ct-newshub-card-meta { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }


/* =================================================================
   17. HEAD-TO-HEAD
   ================================================================= */

.ct-h2h { padding: var(--ct-space-8) 0 var(--ct-space-12); }

.ct-h2h-hero {
    text-align: center;
    background: linear-gradient(115deg, var(--ct-green-950), var(--ct-green-800));
    border-radius: var(--ct-radius-xl);
    padding: var(--ct-space-10) var(--ct-space-5);
    margin-bottom: var(--ct-space-8);
    box-shadow: var(--ct-shadow);
}
.ct-h2h-hero-eyebrow {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ct-volt);
    margin-bottom: var(--ct-space-3);
}
.ct-h2h-title {
    font-size: clamp(26px, 4.6vw, 44px);
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-4);
    flex-wrap: wrap;
    margin: 0;
}
.ct-h2h-team-a { color: var(--ct-volt); }
.ct-h2h-team-b { color: #ff9d9d; }
.ct-h2h-vs {
    font-size: 0.45em;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 2.6em; height: 2.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ct-h2h-tagline { color: rgba(255, 255, 255, 0.7); margin-top: var(--ct-space-3); }

.ct-h2h-section { margin-bottom: var(--ct-space-10); }

/* Combined totals */
.ct-h2h-totals {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-6);
}
.ct-h2h-totals-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
    margin-bottom: var(--ct-space-4);
}
.ct-h2h-totals-team { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-h2h-totals-team-b { text-align: right; }
.ct-h2h-totals-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-md);
    font-weight: 700;
}
.ct-h2h-totals-wins {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-3xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ct-h2h-totals-team-a .ct-h2h-totals-wins { color: var(--ct-win); }
.ct-h2h-totals-team-b .ct-h2h-totals-wins { color: var(--ct-loss); }
.ct-h2h-totals-pct { font-size: var(--ct-fs-xs); color: var(--ct-text-dim); }
.ct-h2h-totals-mid { text-align: center; }
.ct-h2h-totals-mid-label {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ct-text-dim);
    display: block;
}
.ct-h2h-totals-matches {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ct-h2h-totals-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ct-surface-2);
}
.ct-h2h-fill-a, .ct-h2h-bar-a { background: linear-gradient(90deg, var(--ct-brand-bright), var(--ct-brand)); }
.ct-h2h-fill-b, .ct-h2h-bar-b { background: linear-gradient(90deg, #ff5fa8, var(--ct-pink)); }
.ct-h2h-totals-extra {
    margin-top: var(--ct-space-3);
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-dim);
}

/* Format cards */
.ct-h2h-formats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
}
@media (min-width: 640px) {
    .ct-h2h-formats { grid-template-columns: repeat(3, 1fr); }
}
.ct-h2h-format-card {
    background: var(--ct-surface);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-5);
}
.ct-h2h-format-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ct-space-4);
}
.ct-h2h-format-tag {
    display: inline-flex;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-h2h-format-matches { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-h2h-format-rows { display: flex; flex-direction: column; gap: var(--ct-space-2); }
.ct-h2h-format-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
}
.ct-h2h-format-team { font-size: var(--ct-fs-sm); font-weight: 600; }
.ct-h2h-format-wins {
    font-family: var(--ct-font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ct-h2h-format-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    overflow: hidden;
    margin: 0 var(--ct-space-2);
    display: flex;
}
.ct-h2h-format-fill { height: 100%; }
.ct-h2h-format-foot {
    margin-top: var(--ct-space-3);
    font-size: var(--ct-fs-xxs);
    color: var(--ct-text-dim);
}

/* Recent meetings */
.ct-h2h-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--ct-surface);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow-sm);
}
.ct-h2h-recent-item { border-bottom: 1px solid var(--ct-border); margin: 0; }
.ct-h2h-recent-item:last-child { border-bottom: 0; }
.ct-h2h-recent-link,
.ct-h2h-recent-item > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ct-space-3);
    padding: var(--ct-space-3) var(--ct-space-4);
}
.ct-h2h-recent-date, .ct-h2h-recent-format, .ct-h2h-recent-venue {
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-dim);
}
.ct-h2h-recent-result { font-weight: 600; font-size: var(--ct-fs-sm); flex: 1; }
.ct-h2h-recent-meta { font-size: var(--ct-fs-xs); color: var(--ct-text-dim); }

/* Prose + related predictions */
.ct-h2h-prose { max-width: var(--ct-container-narrow); }
.ct-h2h-prose-body { font-size: var(--ct-fs-md); line-height: var(--ct-lh-loose); }

.ct-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
}
@media (min-width: 640px) {
    .ct-top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .ct-top-grid { grid-template-columns: repeat(3, 1fr); }
}
.ct-top-card {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
    transition: transform var(--ct-dur-fast) var(--ct-ease),
                box-shadow var(--ct-dur-fast) var(--ct-ease);
}
.ct-top-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow);
}
.ct-top-link { display: flex; flex-direction: column; height: 100%; }
.ct-top-visual { aspect-ratio: 16 / 9; background: var(--ct-surface-2); overflow: hidden; }
.ct-top-thumb, .ct-top-thumb img, .ct-top-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ct-top-visual .ct-placeholder { min-height: 100%; }
.ct-top-body { padding: var(--ct-space-4); display: flex; flex-direction: column; gap: var(--ct-space-2); }
.ct-top-eyebrow { display: flex; gap: var(--ct-space-2); align-items: center; }
.ct-top-eyebrow-mark {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    color: var(--ct-green-900);
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ct-top-eyebrow-meta { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-top-title { font-size: var(--ct-fs-md); margin: 0; line-height: var(--ct-lh-snug); }
.ct-top-link:hover .ct-top-title { color: var(--ct-brand); }
.ct-top-meta { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }


/* =================================================================
   18. FOOTER
   ================================================================= */

.ct-footer {
    background: linear-gradient(180deg, var(--ct-green-950) 0%, #041f10 100%);
    color: rgba(255, 255, 255, 0.72);
    margin-top: var(--ct-space-16);
    padding: var(--ct-space-12) 0 var(--ct-space-8);
    font-size: var(--ct-fs-sm);
}
.ct-footer a { color: rgba(255, 255, 255, 0.72); }
.ct-footer a:hover { color: var(--ct-volt); }

.ct-footer-masthead {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: var(--ct-space-6);
    margin-bottom: var(--ct-space-8);
}
.ct-footer-brand {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-2xl);
    font-weight: 800;
    color: #fff;
}
.ct-footer-brand-dot { color: var(--ct-volt); }
.ct-footer-tagline { margin-top: var(--ct-space-2); max-width: 52ch; }

.ct-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ct-space-8);
    margin-bottom: var(--ct-space-8);
}
@media (min-width: 900px) {
    .ct-footer-grid { grid-template-columns: repeat(3, 1fr) 1.4fr; }
}
.ct-footer-col h6, .ct-footer-disclaimer h6 {
    color: var(--ct-volt);
    letter-spacing: 0.14em;
}
.ct-footer-list { list-style: none; margin: 0; padding: 0; }
.ct-footer-list li { margin-bottom: var(--ct-space-2); }

.ct-footer-disclaimer {
    font-size: var(--ct-fs-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    grid-column: 1 / -1;
}
@media (min-width: 900px) {
    .ct-footer-disclaimer { grid-column: auto; }
}

.ct-footer-widgets {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--ct-space-6);
    margin-bottom: var(--ct-space-6);
    display: grid;
    gap: var(--ct-space-6);
}
@media (min-width: 900px) {
    .ct-footer-widgets { grid-template-columns: repeat(3, 1fr); }
}
.ct-footer-widget-title { color: var(--ct-volt); }

.ct-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ct-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--ct-space-5);
    font-size: var(--ct-fs-xs);
    color: rgba(255, 255, 255, 0.45);
}


/* =================================================================
   19. MOBILE BOTTOM NAV
   ================================================================= */

/* App-style dock: dark floating bar, rounded, frosted, with a raised
   circular LIVE button in the centre — the "native app" feel.
   Geometry is deliberately defensive: the bar sizes itself off the
   viewport with a hard max-width cap and auto margins, and every tab
   carries min-width:0, so no cache-mangled rule, wide layout viewport
   or long label can ever stretch it or push tabs off-screen. */
.ct-mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0 auto;
    width: calc(100% - 20px);
    max-width: 460px;
    box-sizing: border-box;
    z-index: var(--ct-z-mobile-nav);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background: rgba(14, 14, 19, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(5, 5, 8, 0.45),
                0 2px 8px rgba(5, 5, 8, 0.3);
}
.ct-mbn-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    border-radius: 16px;
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--ct-dur-fast) var(--ct-ease),
                background var(--ct-dur-fast) var(--ct-ease),
                transform var(--ct-dur-fast) var(--ct-ease);
    -webkit-tap-highlight-color: transparent;
}
.ct-mbn-tab > span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-mbn-tab:hover { color: rgba(255, 255, 255, 0.85); }
.ct-mbn-tab:active { transform: scale(0.94); }
.ct-mbn-tab svg { display: block; transition: transform var(--ct-dur-fast) var(--ct-ease-out); }
.ct-mbn-tab.is-active {
    color: var(--ct-volt);
    background: rgba(61, 220, 132, 0.12);
}
.ct-mbn-tab.is-active svg { transform: translateY(-1px); }
.ct-mbn-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--ct-volt);
    transform: translateX(-50%);
}
/* Centre LIVE button — raised red circle, always visible */
.ct-mbn-tab-live {
    flex: 0 0 62px;
    margin-top: -22px;
    align-self: flex-start;
    background: linear-gradient(160deg, #ff5570, var(--ct-red) 55%, var(--ct-red-dark));
    color: #fff;
    border-radius: 50%;
    width: 62px;
    height: 62px;
    padding: 0;
    gap: 2px;
    border: 3px solid rgba(14, 14, 19, 0.95);
    box-shadow: 0 6px 18px rgba(255, 51, 85, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.06);
    animation: ct-mbn-live-glow 2.4s ease-in-out infinite;
}
.ct-mbn-tab-live span { font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em; }
.ct-mbn-tab-live svg { width: 20px; height: 20px; }
.ct-mbn-tab-live:hover { color: #fff; }
.ct-mbn-tab-live.is-active {
    color: #fff;
    background: linear-gradient(160deg, #ff5570, var(--ct-red) 55%, var(--ct-red-dark));
}
.ct-mbn-tab-live.is-active::after { display: none; }
@keyframes ct-mbn-live-glow {
    0%, 100% { box-shadow: 0 6px 18px rgba(255, 51, 85, 0.45), 0 0 0 0 rgba(255, 51, 85, 0.35); }
    50%      { box-shadow: 0 6px 22px rgba(255, 51, 85, 0.6),  0 0 0 7px rgba(255, 51, 85, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ct-mbn-tab-live { animation: none; }
}

@media (min-width: 769px) {
    .ct-mobile-bottom-nav { display: none; }
}
@media (max-width: 768px) {
    .ct-footer { padding-bottom: calc(var(--ct-space-8) + 96px); }
    .ct-main   { padding-bottom: var(--ct-space-4); }
}


/* =================================================================
   20. WORDPRESS CORE COMPAT
   ================================================================= */

.alignwide { margin-left: calc(-1 * var(--ct-space-6)); margin-right: calc(-1 * var(--ct-space-6)); }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignleft { float: left; margin: 0 var(--ct-space-5) var(--ct-space-3) 0; }
.alignright { float: right; margin: 0 0 var(--ct-space-3) var(--ct-space-5); }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-dim);
    padding-top: var(--ct-space-2);
}
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.sticky {}
.bypostauthor {}


/* =================================================================
   21. CRICKET MASTER SUITE BRIDGE — match-centre hero re-skin
   =================================================================
   The plugin's match-centre module (prediction + fixture pages)
   injects its own <style> block with a hard-coded flat green
   (.cms-mc-hero { background:#0d3b2e }). That green never matched
   the theme header, producing the visible colour seam under the
   sticky bar. These rules are scoped under .ct-site so they beat
   the plugin's single-class selectors regardless of load order,
   and re-paint the hero in the theme's midnight chrome so header
   and hero read as one continuous surface.
   ================================================================= */

.ct-site .cms-mc-hero {
    background: linear-gradient(180deg,
        var(--ct-green-900) 0%,
        var(--ct-green-800) 78%,
        #1e1e26 100%) !important;
    color: #fff;
    padding: 26px 16px 24px;
    margin: 0 0 20px;
    border-bottom: 3px solid var(--ct-volt);
    position: relative;
    overflow: hidden;
}
/* Soft stadium-light glow behind the score row */
.ct-site .cms-mc-hero::before {
    content: "";
    position: absolute;
    top: -60%;
    left: 50%;
    width: 560px;
    height: 340px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(61, 220, 132, 0.16) 0%,
        rgba(61, 220, 132, 0) 65%);
    pointer-events: none;
}
.ct-site .cms-mc-hero > * { position: relative; }

.ct-site .cms-mc-meta-line {
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--ct-font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ct-site .cms-mc-team-name {
    color: #fff;
    text-shadow: 0 2px 10px rgba(5, 5, 8, 0.4);
}
.ct-site .cms-mc-team-score {
    color: var(--ct-volt);
    font-variant-numeric: tabular-nums;
}
.ct-site .cms-mc-team-logo {
    box-shadow: 0 6px 18px rgba(5, 5, 8, 0.45);
    border-radius: 50%;
    background: #fff;
}
.ct-site .cms-mc-team-logo--placeholder {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}
.ct-site .cms-mc-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ct-font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
/* Any live-state badge variant the plugin emits picks up theme red */
.ct-site .cms-mc-badge--live,
.ct-site .cms-mc-badge.is-live {
    background: var(--ct-red) !important;
    border-color: var(--ct-red);
    box-shadow: 0 0 0 4px rgba(255, 51, 85, 0.18);
}


/* =================================================================
   22. APP POLISH — micro-interactions + mobile chrome
   ================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Visible focus for keyboard users, in brand blue */
:focus-visible {
    outline: 2px solid var(--ct-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Card press feedback on touch — feels native */
@media (max-width: 768px) {
    .ct-post-card:active,
    .ct-hero-link:active,
    .ct-topstory-link:active,
    .ct-prediction-link:active {
        transform: scale(0.985);
        transition: transform 90ms var(--ct-ease);
    }
}

/* Mobile header: tighter, app-toolbar feel */
@media (max-width: 768px) {
    .ct-mainbar-inner { height: 54px; }
    .ct-logo { font-size: 19px; }
    .ct-mainbar {
        background: linear-gradient(105deg,
            var(--ct-green-950) 0%,
            var(--ct-green-900) 60%,
            var(--ct-green-800) 100%);
    }
}


/* =================================================================
   23. VIEWPORT LOCKDOWN — mobile fit guarantees
   =================================================================
   Nothing on the page is allowed to widen the layout viewport.
   Any element that could be intrinsically wider than the screen
   (tables, embeds, third-party markup from the plugin or ads)
   is clamped or given its own horizontal scroller instead.
   ================================================================= */

html, body {
    max-width: 100%;
}
/* overflow-x: clip blocks page-widening without creating a scroll
   container, so position: sticky on the header keeps working.
   Older browsers fall back to hidden on body only. */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}
@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}

img, svg, video, iframe, embed, object {
    max-width: 100%;
}

/* Wide data tables (theme + Cricket Master Suite output) scroll inside
   their own box on phones instead of stretching the page */
@media (max-width: 768px) {
    .ct-main table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* WP full-bleed blocks can overshoot by scrollbar width — pin them */
    .alignfull { max-width: 100vw; }
    pre { max-width: 100%; overflow-x: auto; }
}


/* =================================================================
   24. MOBILE LAYOUT POLISH — tighter, more app-like proportions
   ================================================================= */

@media (max-width: 480px) {
    /* Prediction cards: compact the face so a card fits comfortably
       above the fold */
    .ct-prediction-link { padding: var(--ct-space-4); padding-top: calc(var(--ct-space-4) + 4px); }
    .ct-team-badge { width: 28px; height: 28px; font-size: 10px; }
    .ct-prediction-top { margin-bottom: var(--ct-space-3); }
    .ct-prediction-pct { font-size: var(--ct-fs-sm); }

    /* Section rhythm: less dead vertical space between bands */
    .ct-band { padding: var(--ct-space-8) 0; }
    .ct-lead-band { padding: var(--ct-space-4) 0 var(--ct-space-3); }

    /* Hero card body tighter on small screens */
    .ct-hero-body { padding: var(--ct-space-4); }
}


/* =================================================================
   26. FAN POLLS
   ================================================================= */

.ct-band-polls {
    background: var(--ct-bg);
    padding: var(--ct-space-8) 0;
}
.ct-polls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
}
@media (min-width: 700px) {
    .ct-polls-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.ct-poll-cell { display: flex; flex-direction: column; gap: var(--ct-space-2); }
.ct-poll-match {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 700;
    color: var(--ct-text);
    padding: 0 var(--ct-space-1);
}
.ct-poll-match:hover { color: var(--ct-brand); }
.ct-poll-tour {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-brand);
    margin-bottom: 2px;
}
/* Plugin poll card sits flush inside the cell */
.ct-poll-cell .cms-poll { box-shadow: var(--ct-shadow-sm); }


/* =================================================================
   27. STANDINGS — ongoing tournament points tables
   ================================================================= */

.ct-band-standings {
    background: var(--ct-surface);
    border-top: 1px solid var(--ct-border);
    border-bottom: 1px solid var(--ct-border);
    padding: var(--ct-space-8) 0;
}
.ct-standings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
}
@media (min-width: 900px) {
    .ct-standings-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.ct-standings-card {
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
    background: var(--ct-surface);
    box-shadow: var(--ct-shadow-sm);
}
.ct-standings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
    padding: var(--ct-space-3) var(--ct-space-4);
    background: var(--ct-green-900);
    border-bottom: 2px solid var(--ct-volt);
}
.ct-standings-tour {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-standings-link {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    color: var(--ct-volt);
    white-space: nowrap;
}
.ct-standings-link:hover { color: #fff; }
.ct-standings-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--ct-fs-xs);
}
.ct-standings-table th, .ct-standings-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--ct-border);
}
.ct-standings-table tbody tr:last-child td { border-bottom: 0; }
.ct-standings-table th {
    font-size: 10px;
    background: var(--ct-surface-2);
}
.ct-standings-table .ct-st-team { text-align: left; font-weight: 600; max-width: 0; width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-standings-table .ct-st-pos { width: 30px; color: var(--ct-text-dim); }
.ct-standings-table .ct-st-pts { font-weight: 700; color: var(--ct-brand); }
.ct-standings-table tr.is-q .ct-st-pos { color: var(--ct-brand); font-weight: 700; }
/* On phones the theme turns .ct-main tables into scroll boxes; the
   compact standings table always fits, so opt it back out */
@media (max-width: 768px) {
    .ct-main .ct-standings-table { display: table; overflow: visible; }
}


/* =================================================================
   28. PREDICTIONS DESK — mobile swipe rail
   ================================================================= */

@media (max-width: 639px) {
    .ct-predictions-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: var(--ct-space-2);
        margin: 0 calc(-1 * var(--ct-space-4));
        padding-left: var(--ct-space-4);
        padding-right: var(--ct-space-4);
    }
    .ct-predictions-grid::-webkit-scrollbar { display: none; }
    .ct-prediction-card { scroll-snap-align: center; }
}


/* =================================================================
   29. GRID MIN-CONTENT GUARDS — mobile overflow fix
   =================================================================
   Grid items default to min-width:auto, so a horizontal rail inside
   a column (tournament carousel, video rail, ticker) inflates the
   whole track to the rail's full content width. That was blowing the
   news-band column out to ~1000px on phones: news titles clipped at
   the screen edge, fixture rows cut off, and the stadium spotlight
   image ballooning (16:9 of an inflated width). min-width:0 on every
   layout-grid child lets the track stay at viewport width while the
   rails scroll inside their own box, as designed.
   ================================================================= */

.ct-home-layout > *,
.ct-lead-grid > *,
.ct-single-grid > *,
.ct-home-main > *,
.ct-home-aside > * {
    min-width: 0;
}
.ct-home-main,
.ct-home-aside {
    min-width: 0;
    max-width: 100%;
}

/* The rails themselves can never demand more than their container */
.ct-tour-carousel,
.ct-videos-rail,
.ct-live-ticker-wrap,
.ct-trending-track-wrap,
.ct-predictions-grid {
    min-width: 0;
    max-width: 100%;
}

/* Fixture rows: long team pairings wrap onto a second line instead
   of forcing width, and never overflow their box */
.ct-fix-teams {
    flex-wrap: wrap;
    min-width: 0;
}
.ct-fix-teams > span { min-width: 0; }

/* Stadium spotlight: hard ceiling so the visual can never dominate
   the screen even if a future layout change widens its box */
.ct-stadium-visual { max-height: 240px; }
.ct-stadium-visual .ct-placeholder,
.ct-stadium-visual img { max-height: 240px; }


/* =================================================================
   30. MOBILE TYPE SCALE — calmer sizes on phones
   ================================================================= */

@media (max-width: 600px) {
    :root {
        --ct-fs-base: 14.5px;
        --ct-fs-md:   15.5px;
        --ct-fs-lg:   17px;
        --ct-fs-xl:   19px;
        --ct-fs-2xl:  22px;
        --ct-fs-3xl:  26px;
        --ct-fs-4xl:  32px;
    }
    .ct-band-title    { font-size: var(--ct-fs-lg); }
    .ct-band-eyebrow  { font-size: 10px; }
    .ct-news-title    { font-size: var(--ct-fs-sm); }
    .ct-hero-title    { font-size: 19px; }
    .ct-side-title    { font-size: var(--ct-fs-sm); }
    .ct-section-title { font-size: var(--ct-fs-md); }
    .ct-topstory-link { font-size: var(--ct-fs-sm); }
}


/* =================================================================
   31. LIVE TICKER — compact cards + scroll polish
   =================================================================
   The plugin ships 320px-wide cards; on phones that means barely one
   card in view. Tightened to 236px with smaller type so 1.5 cards
   peek (a scroll affordance), and the wrap hides its scrollbar since
   the theme JS auto-scrolls it.
   ================================================================= */

.ct-live-ticker-wrap {
    scrollbar-width: none;
    scroll-behavior: auto;
}
.ct-live-ticker-wrap::-webkit-scrollbar { display: none; }

.ct-site .ct-live-ticker-wrap .csc-ticker-card {
    width: 236px !important;
    border-radius: var(--ct-radius) !important;
    padding: 10px 12px !important;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-track { gap: 10px !important; }
@media (min-width: 900px) {
    .ct-site .ct-live-ticker-wrap .csc-ticker-card { width: 260px !important; }
}


/* =================================================================
   32. CMS FIXTURES PAGE — heading spacing under the sticky header
   ================================================================= */

.ct-site .csc-listing-page-title {
    margin: var(--ct-space-6) 0 var(--ct-space-5);
    padding-top: var(--ct-space-2);
}
@media (max-width: 600px) {
    .ct-site .csc-listing-page-title {
        margin: var(--ct-space-5) 0 var(--ct-space-4);
        font-size: var(--ct-fs-xl);
    }
}


/* =================================================================
   33. LIVE BLOG (v2.6) — scoreboard + timeline, ESPNcricinfo-style
   ================================================================= */

.ct-band-liveblog { padding: var(--ct-space-6) 0 var(--ct-space-8); }
.ct-band-liveblog[hidden] { display: none; }
.ct-lb-eyebrow { display: inline-flex; align-items: center; gap: 8px; }

.ct-lb-tabs {
    display: flex;
    gap: var(--ct-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: var(--ct-space-4);
}
.ct-lb-tabs::-webkit-scrollbar { display: none; }
.ct-lb-tab, .ct-mc-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 8px 15px;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-text-muted);
    cursor: pointer;
    transition: background var(--ct-dur-fast) var(--ct-ease), color var(--ct-dur-fast) var(--ct-ease);
}
.ct-lb-tab:hover, .ct-mc-tab:hover { color: var(--ct-text); border-color: var(--ct-border-strong); }
.ct-lb-tab.is-active, .ct-mc-tab.is-active {
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(18, 161, 80, 0.3);
}
.ct-lb-tab-state {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.ct-lb-panel { display: none; }
.ct-lb-panel.is-active { display: block; }

.ct-lb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
}
.ct-lb-grid > * { min-width: 0; }
@media (min-width: 960px) {
    .ct-lb-grid { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: var(--ct-space-6); }
}

/* Scoreboard — black chrome, volt rule, like the standings heads */
.ct-lb-board {
    background: var(--ct-green-900);
    color: #fff;
    border-radius: var(--ct-radius-lg);
    border-bottom: 3px solid var(--ct-volt);
    padding: var(--ct-space-4) var(--ct-space-5);
    box-shadow: var(--ct-shadow);
}
.ct-lb-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-3);
    margin-bottom: var(--ct-space-3);
}
.ct-lb-board-tour {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ct-volt);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-lb-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ct-lb-state.is-live { background: rgba(255, 51, 85, 0.18); color: #ff8fa0; }
.ct-lb-state.is-result { background: rgba(61, 220, 132, 0.16); color: var(--ct-volt); }

.ct-lb-board-teams { display: flex; flex-direction: column; gap: var(--ct-space-2); }
.ct-lb-team {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    min-width: 0;
    padding: 6px 0;
}
.ct-lb-team .ct-team-badge { width: 34px; height: 34px; font-size: 10px; }
.ct-lb-team-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-md);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-lb-team.is-batting .ct-lb-team-name { color: #fff; }
.ct-lb-team.is-batting .ct-lb-team-name::after {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--ct-volt);
    vertical-align: 0.15em;
}
.ct-lb-team-score {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ct-lb-team-score strong {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xl);
    font-weight: 800;
    color: #fff;
}
.ct-lb-team-overs, .ct-lb-team-prev { font-size: var(--ct-fs-xs); color: rgba(255, 255, 255, 0.6); }
.ct-lb-team-yet { font-size: var(--ct-fs-xs); color: rgba(255, 255, 255, 0.5); font-style: italic; }
.ct-lb-board-status {
    margin: var(--ct-space-3) 0 0;
    padding-top: var(--ct-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    color: #ffb3c0;
}
.ct-lb-board-status.is-result { color: var(--ct-volt); }
.ct-lb-rates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-2) var(--ct-space-5);
    margin: var(--ct-space-3) 0 0;
}
.ct-lb-rates > div { display: flex; gap: 6px; align-items: baseline; }
.ct-lb-rates dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.ct-lb-rates dd {
    margin: 0;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Timeline */
.ct-lb-feed {
    list-style: none;
    margin: var(--ct-space-4) 0 0;
    padding: var(--ct-space-2) var(--ct-space-5);
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
}
.ct-lb-entry {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: var(--ct-space-4);
    padding: var(--ct-space-4) 0;
    border-bottom: 1px solid var(--ct-border);
}
.ct-lb-entry:last-child { border-bottom: 0; }
.ct-lb-entry::before {
    /* timeline dot */
    content: "";
    position: absolute;
    left: 79px;
    top: calc(var(--ct-space-4) + 6px);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ct-border-strong);
    box-shadow: 0 0 0 3px var(--ct-surface);
}
.ct-lb-entry.is-wicket::before { background: var(--ct-red); }
.ct-lb-entry.is-milestone::before { background: var(--ct-volt); }
.ct-lb-entry.is-result::before, .ct-lb-entry.is-innings::before { background: var(--ct-green-900); }
.ct-lb-entry.is-desk::before { background: var(--ct-pink); }
.ct-lb-entry-time { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.ct-lb-entry-time time {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: var(--ct-text);
    font-variant-numeric: tabular-nums;
}
.ct-lb-ago { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-lb-entry-body { padding-left: var(--ct-space-4); min-width: 0; }
.ct-lb-entry-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ct-space-2);
    margin-bottom: 5px;
}
.ct-lb-tag {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    color: var(--ct-text-muted);
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.is-wicket .ct-lb-tag { background: var(--ct-red-tint); color: var(--ct-red-dark); }
.is-milestone .ct-lb-tag { background: var(--ct-brand-tint); color: var(--ct-green-900); }
.is-result .ct-lb-tag { background: var(--ct-brand); color: #fff; }
.is-innings .ct-lb-tag { background: var(--ct-green-900); color: var(--ct-volt); }
.is-desk .ct-lb-tag { background: var(--ct-pink-tint); color: var(--ct-pink-dark); }
.ct-lb-entry-score {
    margin-left: auto;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: var(--ct-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ct-lb-entry-text {
    margin: 0;
    font-size: var(--ct-fs-sm);
    line-height: var(--ct-lh-normal);
    color: var(--ct-text);
}
.is-wicket .ct-lb-entry-text, .is-result .ct-lb-entry-text { font-weight: 600; }
.ct-lb-entry-by {
    display: block;
    margin-top: 4px;
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    color: var(--ct-pink-dark);
}
.ct-lb-empty {
    margin: var(--ct-space-4) 0 0;
    padding: var(--ct-space-5);
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    color: var(--ct-text-muted);
    font-size: var(--ct-fs-sm);
}
.ct-lb-more {
    display: inline-block;
    margin-top: var(--ct-space-4);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: var(--ct-brand);
}
.ct-lb-more:hover { color: var(--ct-green-900); }

/* Aside cards */
.ct-lb-aside { display: flex; flex-direction: column; gap: var(--ct-space-4); }
.ct-lb-side-card {
    background: var(--ct-surface);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: var(--ct-space-4) var(--ct-space-5);
}
.ct-lb-side-title { font-size: var(--ct-fs-sm); font-weight: 700; margin: 0 0 var(--ct-space-3); }
.ct-lb-side-title::before {
    content: "";
    display: inline-block;
    width: 4px; height: 0.95em;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: -0.1em;
}
.ct-lb-keys { list-style: none; margin: 0; padding: 0; }
.ct-lb-key {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: var(--ct-space-2);
    padding: 7px 0 7px 10px;
    border-left: 3px solid var(--ct-border);
    font-size: var(--ct-fs-xs);
}
.ct-lb-key.is-wicket { border-left-color: var(--ct-red); }
.ct-lb-key.is-milestone { border-left-color: var(--ct-volt); }
.ct-lb-key.is-result, .ct-lb-key.is-innings { border-left-color: var(--ct-green-900); }
.ct-lb-key-time { color: var(--ct-text-dim); font-variant-numeric: tabular-nums; }
.ct-lb-key-text { color: var(--ct-text); line-height: var(--ct-lh-snug); }
.ct-lb-info { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-lb-info > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--ct-space-2); font-size: var(--ct-fs-xs); }
.ct-lb-info dt { color: var(--ct-text-dim); font-weight: 600; }
.ct-lb-info dd { margin: 0; color: var(--ct-text); font-weight: 500; }
.ct-lb-verdict {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--ct-space-4);
    padding: var(--ct-space-3);
    border-radius: var(--ct-radius);
    background: var(--ct-brand-tint);
    border: 1px solid var(--ct-brand-tint-2);
}
.ct-lb-verdict-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ct-brand);
}
.ct-lb-verdict strong { font-family: var(--ct-font-display); font-size: var(--ct-fs-sm); color: var(--ct-green-900); }
.ct-lb-verdict:hover strong { text-decoration: underline; }

@media (max-width: 600px) {
    .ct-lb-board { padding: var(--ct-space-4); }
    .ct-lb-team-name { font-size: var(--ct-fs-sm); }
    .ct-lb-team-score strong { font-size: var(--ct-fs-lg); }
    .ct-lb-feed { padding: var(--ct-space-1) var(--ct-space-4); }
    .ct-lb-entry { grid-template-columns: 58px minmax(0, 1fr); gap: var(--ct-space-3); }
    .ct-lb-entry::before { left: 62px; }
    .ct-lb-entry-body { padding-left: var(--ct-space-3); }
    .ct-lb-entry-score { margin-left: 0; width: 100%; order: 3; }
}


/* =================================================================
   34. PREDICTIONS DESK — verdict record chip (v2.6)
   ================================================================= */

.ct-band-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ct-space-2) var(--ct-space-4);
}
.ct-pred-record {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: var(--ct-brand-tint);
    border: 1px solid var(--ct-brand-tint-2);
    font-size: var(--ct-fs-xs);
    color: var(--ct-green-900);
}
.ct-pred-record strong { font-family: var(--ct-font-display); font-weight: 800; }
.ct-pred-record-pct {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ct-brand);
    color: #fff;
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: var(--ct-fs-xxs);
}


/* =================================================================
   35. MATCH CENTRE (v2.6) — Live & Today / Results / Tomorrow
   ================================================================= */

.ct-band-matchcentre { background: var(--ct-bg); padding: var(--ct-space-8) 0; }
.ct-mc-tabs {
    display: flex;
    gap: var(--ct-space-2);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--ct-space-5);
}
.ct-mc-tabs::-webkit-scrollbar { display: none; }
.ct-mc-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    color: var(--ct-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.ct-mc-tab.is-active .ct-mc-count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ct-mc-panel { display: none; }
.ct-mc-panel.is-active { display: block; }

.ct-mc-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
    align-items: start;
}
@media (min-width: 760px) { .ct-mc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ct-mc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ct-mc-group {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
    min-width: 0;
}
.ct-mc-group-head {
    padding: var(--ct-space-3) var(--ct-space-4);
    background: var(--ct-green-900);
    border-bottom: 2px solid var(--ct-volt);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-mc-group-head a { color: #fff; }
.ct-mc-group-head a:hover { color: var(--ct-volt); }
.ct-mc-list { list-style: none; margin: 0; padding: 0; }
.ct-mc-row { position: relative; border-bottom: 1px solid var(--ct-border); }
.ct-mc-row:last-child { border-bottom: 0; }
.ct-mc-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--ct-space-3) var(--ct-space-4);
    transition: background var(--ct-dur-fast) var(--ct-ease);
}
.ct-mc-link:hover { background: var(--ct-surface-2); }
.ct-mc-meta { display: flex; align-items: center; gap: var(--ct-space-2); margin-bottom: 2px; }
.ct-mc-when {
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    color: var(--ct-text-muted);
}
.ct-mc-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ct-red);
}
.ct-mc-format {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ct-surface-2);
    font-size: 10px;
    font-weight: 700;
    color: var(--ct-text-muted);
}
.ct-mc-team {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ct-space-3);
    min-width: 0;
}
.ct-mc-team-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    color: var(--ct-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-mc-team-score {
    flex-shrink: 0;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ct-text);
}
.ct-mc-team.is-loser .ct-mc-team-name, .ct-mc-team.is-loser .ct-mc-team-score { color: var(--ct-text-dim); font-weight: 500; }
.ct-mc-team.is-winner .ct-mc-team-name { font-weight: 700; }
.ct-mc-status {
    margin-top: 2px;
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-muted);
    line-height: var(--ct-lh-snug);
}
.ct-mc-row.is-live .ct-mc-status { color: var(--ct-red-dark); font-weight: 600; }
.ct-mc-row.is-result .ct-mc-status { color: var(--ct-brand); font-weight: 600; }
.ct-mc-pred {
    position: absolute;
    top: var(--ct-space-3);
    right: var(--ct-space-4);
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xxs);
    font-weight: 700;
    color: var(--ct-pink-dark);
}
.ct-mc-pred:hover { color: var(--ct-pink); }
.ct-mc-more { margin: var(--ct-space-4) 0 0; text-align: right; }


/* =================================================================
   36. FEATURES & ANALYSIS (v2.6)
   ================================================================= */

.ct-band-features { background: var(--ct-surface); border-top: 1px solid var(--ct-border); border-bottom: 1px solid var(--ct-border); padding: var(--ct-space-8) 0; }
.ct-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ct-space-5);
}
@media (min-width: 640px) { .ct-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ct-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ct-feature-card { min-width: 0; }
.ct-feature-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
    box-shadow: var(--ct-shadow-sm);
    transition: transform var(--ct-dur) var(--ct-ease-out), box-shadow var(--ct-dur) var(--ct-ease-out);
}
.ct-feature-link:hover { transform: translateY(-3px); box-shadow: var(--ct-shadow-lg); }
.ct-feature-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ct-surface-2); }
.ct-feature-visual img, .ct-feature-visual .ct-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 100%; }
.ct-feature-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: var(--ct-space-4);
    border-top: 3px solid var(--ct-pink);
}
.ct-feature-cat {
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ct-pink-dark);
}
.ct-feature-title {
    font-size: var(--ct-fs-md);
    font-weight: 700;
    line-height: var(--ct-lh-snug);
    margin: 0;
    transition: color var(--ct-dur-fast) var(--ct-ease);
}
.ct-feature-link:hover .ct-feature-title { color: var(--ct-brand); }
.ct-feature-deck {
    margin: 0;
    font-size: var(--ct-fs-xs);
    color: var(--ct-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-feature-meta { margin-top: auto; padding-top: 4px; font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
@media (max-width: 639px) {
    .ct-features-grid {
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--ct-space-4));
        padding: 0 var(--ct-space-4) var(--ct-space-2);
    }
    .ct-features-grid::-webkit-scrollbar { display: none; }
    .ct-feature-card { scroll-snap-align: center; }
}

/* Live blog: earlier updates collapse behind a button */
.ct-lb-entry.is-extra { display: none; }
.ct-lb-feed.is-expanded .ct-lb-entry.is-extra { display: grid; }
.ct-lb-feed.is-expanded .ct-lb-expand-row { display: none; }
.ct-lb-expand-row { padding: var(--ct-space-3) 0 var(--ct-space-2); text-align: center; }
.ct-lb-expand {
    padding: 7px 16px;
    background: var(--ct-surface-2);
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: var(--ct-text);
    cursor: pointer;
}
.ct-lb-expand:hover { border-color: var(--ct-border-strong); }
/* Phones: the feed already carries the key moments */
@media (max-width: 959px) { .ct-lb-side-keys { display: none; } }


/* =================================================================
   37. CARD POLISH (v2.6.1) — team logos, prediction cards, polls,
       news rows. Same palette and type; just tidier cards.
   ================================================================= */

/* Team logo medallion — plugin logo over an initials fallback */
.ct-team-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ct-logo, 32px);
    height: var(--ct-logo, 32px);
    border-radius: 50%;
    overflow: hidden;
    background: var(--ct-surface);
    box-shadow: 0 0 0 1px var(--ct-border), 0 2px 6px rgba(10, 10, 16, 0.08);
}
.ct-team-logo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-font-display);
    font-size: calc(var(--ct-logo, 32px) * 0.3);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
}
.ct-team-logo-a .ct-team-logo-fallback { background: linear-gradient(145deg, var(--ct-brand-bright), var(--ct-green-800)); }
.ct-team-logo-b .ct-team-logo-fallback { background: linear-gradient(145deg, #ff5fa8, var(--ct-pink-dark)); }
.ct-team-logo img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    opacity: 0;                 /* initials show until the logo has loaded */
    transition: opacity var(--ct-dur) var(--ct-ease);
}
.ct-team-logo.has-img { background: #fff; }
.ct-team-logo.has-img img { opacity: 1; background: #fff; }
.ct-lb-board .ct-team-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }

/* ---- Prediction cards ---- */
.ct-prediction-link { padding: var(--ct-space-4) var(--ct-space-5) var(--ct-space-4); padding-top: calc(var(--ct-space-4) + 4px); }
.ct-prediction-top { align-items: flex-start; margin-bottom: var(--ct-space-4); }
.ct-prediction-top-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-prediction-sub {
    font-size: var(--ct-fs-xxs);
    font-weight: 600;
    color: var(--ct-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-prediction-rows { gap: 6px; margin-bottom: var(--ct-space-3); }
.ct-prediction-row {
    padding: 8px 12px 8px 8px;
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    transition: border-color var(--ct-dur-fast) var(--ct-ease);
}
.ct-prediction-row.is-pick { background: var(--ct-brand-tint); border-color: var(--ct-brand-tint-2); }
.ct-prediction-team-name { font-size: var(--ct-fs-sm); }
.ct-prediction-pick-tag {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ct-brand);
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ct-prediction-pct { font-size: var(--ct-fs-lg); }
/* Bar: team A green, team B pink — same colours as the medallions */
.ct-prob-bar {
    height: 6px;
    background: linear-gradient(90deg, #ff5fa8, var(--ct-pink-dark));
    margin-bottom: var(--ct-space-4);
}
.ct-prob-bar::after { width: 3px; background: var(--ct-surface); }

.ct-prediction-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--ct-space-2);
    padding: 10px 12px;
    border-radius: var(--ct-radius);
    background: var(--ct-green-900);
    color: #fff;
}
.ct-prediction-verdict-label {
    width: 100%;
    font-family: var(--ct-font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ct-volt);
}
.ct-prediction-verdict-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 700;
    min-width: 0;
}
.ct-prediction-verdict-team svg { color: var(--ct-volt); flex-shrink: 0; }
.ct-prediction-conf {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}
.ct-prediction-conf.is-high { background: rgba(61, 220, 132, 0.18); color: var(--ct-volt); }
.ct-prediction-conf.is-manual { background: rgba(255, 46, 136, 0.2); color: #ff8fc4; }
.ct-prediction-conf.is-too_close { background: rgba(200, 157, 44, 0.22); color: #f0c95c; }

.ct-prediction-foot { margin-top: var(--ct-space-3); padding-top: var(--ct-space-3); }
.ct-prediction-foot .ct-prediction-venue { margin: 0; min-width: 0; }
.ct-prediction-card:hover .ct-prediction-row:not(.is-pick) { border-color: var(--ct-border-strong); }

/* ---- Fan polls: logos + match time in the header ---- */
.ct-poll-match { display: flex; flex-direction: column; gap: 4px; }
.ct-poll-teams { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ct-poll-team-name { min-width: 0; }
.ct-poll-vs { font-size: var(--ct-fs-xxs); font-weight: 600; color: var(--ct-text-dim); text-transform: uppercase; }
.ct-poll-when { font-size: var(--ct-fs-xxs); font-weight: 600; color: var(--ct-text-muted); }

/* ---- Match Centre: logos beside names ---- */
.ct-mc-team { align-items: center; justify-content: flex-start; }
.ct-mc-team .ct-team-logo { margin-right: 2px; }
.ct-mc-team-name { flex: 1; }

/* ---- News rows: wider thumb, one-line deck ---- */
.ct-news-link { gap: var(--ct-space-4); padding: var(--ct-space-3); }
.ct-news-visual { width: 112px; aspect-ratio: 4 / 3; }
.ct-news-visual .ct-placeholder-inner { display: none; }
.ct-news-excerpt { display: none; }
@media (min-width: 640px) {
    .ct-news-visual { width: 168px; aspect-ratio: 16 / 10; }
    .ct-news-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 0 6px;
        font-size: var(--ct-fs-xs);
        color: var(--ct-text-muted);
    }
}
/* Keep verdict + footer aligned at the bottom of every card in a row */
.ct-prediction-verdict { margin-top: auto; }
.ct-prediction-rows + .ct-prediction-foot,
.ct-prob-bar + .ct-prediction-foot { margin-top: auto; }
/* Phone swipe rail: cards keep their natural height (no stretched gaps) */
@media (max-width: 639px) {
    .ct-predictions-grid { align-items: start; }
}


/* =================================================================
   38. TOP MATCHES TICKER — dark scoreboard cards (v2.6.2)
   =================================================================
   Re-skins the plugin's [cricket_live_ticker] cards to match the
   Live Blog scoreboard: black chrome, volt series label and bottom
   rule, white Poppins scores, pill status. Scoped to the homepage
   ticker wrap, so the plugin's own pages keep their styling.
   ================================================================= */

.ct-site .ct-live-ticker-wrap .csc-ticker-card,
.ct-site .ct-live-ticker-wrap .csc-ticker-card:link,
.ct-site .ct-live-ticker-wrap .csc-ticker-card:visited,
.ct-site .ct-live-ticker-wrap .csc-ticker-card:hover,
.ct-site .ct-live-ticker-wrap .csc-ticker-card:focus {
    background: var(--ct-green-900);
    color: #fff;
    border: 0;
    border-bottom: 3px solid var(--ct-volt);
    border-radius: var(--ct-radius-lg) !important;
    padding: 12px 14px 10px !important;
    gap: 10px;
    box-shadow: var(--ct-shadow);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ct-shadow-lg), 0 0 0 1px rgba(61, 220, 132, 0.35);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-card:focus-visible {
    outline: 2px solid var(--ct-volt);
    outline-offset: 2px;
}

/* Head: volt series label + status pill */
.ct-site .ct-live-ticker-wrap .csc-ticker-tournament {
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ct-volt);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-status {
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-status-live {
    background: rgba(255, 51, 85, 0.18);
    color: #ff8fa0;
    padding-left: 8px;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-status-live::before { background: var(--ct-live); }
.ct-site .ct-live-ticker-wrap .csc-ticker-status-result {
    background: rgba(61, 220, 132, 0.16);
    color: var(--ct-volt);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-status-upcoming {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* Logos: white medallion with a soft ring, like the scoreboard */
.ct-site .ct-live-ticker-wrap img.csc-listing-fixture-team-logo,
.ct-site .ct-live-ticker-wrap span.csc-listing-fixture-team-logo {
    background: #fff;
    padding: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    border-radius: 50% !important;
}

/* Scorecard layout (match started) */
.ct-site .ct-live-ticker-wrap .csc-ticker-scorecard { gap: 6px; }
.ct-site .ct-live-ticker-wrap .csc-ticker-score-row { padding: 2px 0; }
.ct-site .ct-live-ticker-wrap .csc-ticker-score-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-score-value {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-md);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-score-overs,
.ct-site .ct-live-ticker-wrap .csc-ticker-score-2nd {
    font-family: var(--ct-font-body);
    font-size: var(--ct-fs-xxs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Pre-match layout (logos + vs) */
.ct-site .ct-live-ticker-wrap .csc-ticker-team-name {
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    color: #fff;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-vs {
    font-family: var(--ct-font-display);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
}

/* Footer line: result in volt, venue muted, hairline above */
.ct-site .ct-live-ticker-wrap .csc-ticker-result,
.ct-site .ct-live-ticker-wrap .csc-ticker-venue {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--ct-fs-xxs);
    text-align: left;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-result { color: var(--ct-volt); font-weight: 600; }
.ct-site .ct-live-ticker-wrap .csc-ticker-venue { color: rgba(255, 255, 255, 0.55); }

/* Nav arrows sit on light ground — keep them readable */
.ct-site .ct-live-ticker-wrap .csc-ticker-nav {
    background: var(--ct-surface);
    color: var(--ct-text);
    box-shadow: var(--ct-shadow);
}


/* =================================================================
   39. MATCH CENTRE — packed columns (v2.6.3)
   =================================================================
   The grid made every row as tall as its tallest series card, leaving
   holes under short ones. CSS columns stack each card straight under
   the previous one in its column, so there are no gaps.
   ================================================================= */

.ct-mc-groups {
    display: block;
    column-count: 1;
    column-gap: var(--ct-space-4);
}
@media (min-width: 760px)  { .ct-mc-groups { column-count: 2; } }
@media (min-width: 1100px) { .ct-mc-groups { column-count: 3; } }
.ct-mc-group {
    display: inline-block;      /* keeps a card whole inside one column */
    width: 100%;
    margin: 0 0 var(--ct-space-4);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
}

/* JS-balanced columns (falls back to the CSS columns above) */
.ct-mc-groups { --ct-mc-cols: 1; }
@media (min-width: 760px)  { .ct-mc-groups { --ct-mc-cols: 2; } }
@media (min-width: 1100px) { .ct-mc-groups { --ct-mc-cols: 3; } }
.ct-mc-groups.is-masonry {
    column-count: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--ct-space-4);
}
.ct-mc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--ct-space-4); }
.ct-mc-groups.is-masonry .ct-mc-group { display: block; margin: 0; }


/* =================================================================
   40. TOP MATCHES TICKER — phone sizing (v2.6.4)
   =================================================================
   Cricinfo-style strip on phones: one card fills the row, with a
   ~28px sliver of the next card as a swipe cue; swipes snap card by
   card. Cards use the same compact rows whether the match has
   started or not (logo + short name + score/time), so every card is
   the same height. Colours and type are unchanged.
   ================================================================= */

@media (max-width: 600px) {
    .ct-live-band { padding: var(--ct-space-2) 0 var(--ct-space-3); }

    .ct-site .ct-live-ticker-wrap .csc-ticker-track {
        gap: 10px !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 2px 0 8px;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-card,
    .ct-site .ct-live-ticker-wrap .csc-ticker-card:link,
    .ct-site .ct-live-ticker-wrap .csc-ticker-card:visited,
    .ct-site .ct-live-ticker-wrap .csc-ticker-card:hover {
        flex: 0 0 calc(100% - 28px) !important;
        width: calc(100% - 28px) !important;
        min-height: 132px;
        padding: 11px 14px 9px !important;
        gap: 8px;
        scroll-snap-align: start;
        transform: none;
        transition: none;
    }

    /* Started matches: compact team rows */
    .ct-site .ct-live-ticker-wrap .csc-ticker-scorecard { gap: 4px; }
    .ct-site .ct-live-ticker-wrap .csc-ticker-score-row { padding: 1px 0; }
    .ct-site .ct-live-ticker-wrap .csc-ticker-score-team img.csc-listing-fixture-team-logo,
    .ct-site .ct-live-ticker-wrap .csc-ticker-score-team span.csc-listing-fixture-team-logo {
        width: 24px !important;
        height: 24px !important;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-score-name { font-size: 14px; }
    .ct-site .ct-live-ticker-wrap .csc-ticker-score-value { font-size: 16px; }

    /* Upcoming matches: same row layout instead of logo-vs-logo, so
       the card is as tall as a live one */
    .ct-site .ct-live-ticker-wrap .csc-ticker-teams {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-team {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 1px 0;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-team img.csc-listing-fixture-team-logo,
    .ct-site .ct-live-ticker-wrap .csc-ticker-team span.csc-listing-fixture-team-logo {
        width: 24px !important;
        height: 24px !important;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-team-name {
        font-size: 14px;
        font-weight: 600;
        text-align: left;
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-vs { display: none; }

    .ct-site .ct-live-ticker-wrap .csc-ticker-result,
    .ct-site .ct-live-ticker-wrap .csc-ticker-venue { padding-top: 7px; }
}


/* =================================================================
   41. TOP MATCHES TICKER — smooth scrolling + arrows (v2.6.5)
   =================================================================
   - One scroller only: the plugin's track. The theme wrap no longer
     scrolls too (nested horizontal scrollers made swipes stutter).
   - Snap to each card on every screen size, no forced stops, so a
     flick carries naturally and settles on a card edge.
   - Swipes stay inside the strip (no page bounce / back-gesture).
   - Arrows on phones too: small, sitting over the next card's edge.
   ================================================================= */

.ct-live-ticker-wrap { overflow: visible; }
.ct-site .ct-live-ticker-wrap .csc-ticker-track {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}
.ct-site .ct-live-ticker-wrap .csc-ticker-card { scroll-snap-align: start; }

.ct-site .ct-live-ticker-wrap .csc-ticker-nav {
    width: 34px;
    height: 34px;
    border: 0;
    transition: opacity var(--ct-dur-fast) var(--ct-ease), transform var(--ct-dur-fast) var(--ct-ease);
}
.ct-site .ct-live-ticker-wrap .csc-ticker-nav-prev { left: -6px; }
.ct-site .ct-live-ticker-wrap .csc-ticker-nav-next { right: -6px; }

@media (max-width: 600px) {
    .ct-site .ct-live-ticker-wrap .csc-ticker-nav {
        display: flex;
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 2px 10px rgba(10, 10, 16, 0.25);
    }
    .ct-site .ct-live-ticker-wrap .csc-ticker-nav svg { width: 14px; height: 14px; }
    /* Over the sliver of the next card, clear of the scores */
    .ct-site .ct-live-ticker-wrap .csc-ticker-nav-next { right: -4px; }
    .ct-site .ct-live-ticker-wrap .csc-ticker-nav-prev { left: -4px; }
    .ct-site .ct-live-ticker-wrap .csc-ticker-card:hover { box-shadow: var(--ct-shadow); }
}
/* The plugin hides an arrow at the start/end of the strip — respect it */
.ct-site .ct-live-ticker-wrap .csc-ticker-nav[hidden] { display: none !important; }
/* Phones: only the "next" arrow (over the peeking card). A back arrow
   would sit on the team logos; swiping back is natural, and the strip
   loops to the start on its own. */
@media (max-width: 600px) {
    .ct-site .ct-live-ticker-wrap .csc-ticker-nav-prev { display: none !important; }
}


/* =================================================================
   42. LIVE BLOG — break label, win predictor, editor insights (v2.7)
   ================================================================= */

.ct-lb-state.is-break { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }

/* Win predictor — sits inside the dark scoreboard */
.ct-wp {
    margin-top: var(--ct-space-4);
    padding-top: var(--ct-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-wp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ct-wp-title {
    font-family: var(--ct-font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ct-volt);
}
.ct-wp-note { font-size: 10px; color: rgba(255, 255, 255, 0.45); }
.ct-wp-row { display: flex; align-items: center; gap: var(--ct-space-3); }
.ct-wp-team {
    flex-shrink: 0;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}
.ct-wp-team strong { font-size: var(--ct-fs-md); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ct-wp-bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, #ff5fa8, var(--ct-pink-dark));
}
.ct-wp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--ct-brand-bright), var(--ct-brand));
    border-radius: 999px 0 0 999px;
    transition: width 900ms var(--ct-ease-out);
}
.ct-wp-worm { display: block; width: 100%; height: 48px; margin-top: 10px; }
.ct-wp-mid { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ct-wp-area { fill: rgba(61, 220, 132, 0.12); }
.ct-wp-line { fill: none; stroke: var(--ct-volt); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ct-wp-axis { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }

/* Editor insight box (staff only) */
.ct-lb-composer {
    margin-top: var(--ct-space-5);
    padding: var(--ct-space-4) var(--ct-space-5);
    background: var(--ct-surface);
    border: 1px dashed var(--ct-pink);
    border-radius: var(--ct-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-3);
}
.ct-lb-composer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ct-space-3); }
.ct-lb-composer-head strong { font-family: var(--ct-font-display); font-size: var(--ct-fs-sm); color: var(--ct-pink-dark); }
.ct-lb-composer-head span { font-size: var(--ct-fs-xxs); color: var(--ct-text-dim); }
.ct-lb-composer-row { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); }
.ct-lb-composer select, .ct-lb-composer textarea {
    font: inherit;
    font-size: var(--ct-fs-sm);
    padding: 8px 10px;
    border: 1px solid var(--ct-border-strong);
    border-radius: var(--ct-radius-sm);
    background: var(--ct-surface);
    color: var(--ct-text);
    min-width: 0;
}
.ct-lb-composer select:first-child { flex: 1 1 260px; }
.ct-lb-composer textarea { width: 100%; resize: vertical; }
.ct-lb-composer textarea:focus, .ct-lb-composer select:focus { outline: 2px solid var(--ct-brand-tint-2); border-color: var(--ct-brand); }
.ct-lb-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3); font-size: var(--ct-fs-xs); color: var(--ct-text-muted); }
.ct-lb-composer-msg { margin-left: auto; font-weight: 600; color: var(--ct-brand); }
.ct-lb-composer-btn {
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ct-brand-bright), var(--ct-brand));
    color: #fff;
    font-family: var(--ct-font-display);
    font-size: var(--ct-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.ct-lb-composer-btn:disabled { opacity: 0.6; cursor: wait; }
/* Three-way (Test / first-class): team A · draw · team B */
.ct-wp-bar.is-3way { display: flex; background: rgba(255, 255, 255, 0.08); }
.ct-wp-seg { display: block; height: 100%; transition: width 900ms var(--ct-ease-out); }
.ct-wp-seg.is-a { background: linear-gradient(90deg, var(--ct-brand-bright), var(--ct-brand)); }
.ct-wp-seg.is-draw { background: rgba(255, 255, 255, 0.35); }
.ct-wp-seg.is-b { background: linear-gradient(90deg, #ff5fa8, var(--ct-pink-dark)); }
.ct-wp-draw { margin-top: 6px; text-align: center; font-size: var(--ct-fs-xxs); color: rgba(255, 255, 255, 0.6); }
.ct-wp-draw strong { color: #fff; font-family: var(--ct-font-display); }