:root {
    --ole-blue: #0a4ea3; /* royal blue */
    --ole-blue-600: #114484;
    --ole-gold: #f2b705; /* warm gold */
    --ink: #0f172a; /* title text */
    --muted: #475569; /* body text */
    --bg: #f7fafc; /* page background */
    --card: #ffffff; /* surfaces/cards */
    --soft-blue: #e8f1ff; /* subtle blue bg */
    --soft-gold: #fff6db; /* subtle gold bg */
    --border: #e2e8f0; /* borders */
    --border-strong: #d6dee9;
    --hover: #fef7e6; /* row hover */
    --success: #23a26d;
    --danger: #c62828;
    --shadow: 0 10px 24px rgba(16, 24, 40, .06);
    --radius: 12px;
    --sticky-top: 66px;
    --affix-top: 0px; /* try 0 first; if it overlaps, try 8px or 12px */
    --thead-h: 44px;
    --odds-col-w: 210px; /* overall column width (was ~260). Try 200–220 */
    --odds-top-fs: 13px; /* main numbers size */
    --odds-bot-fs: 11px; /* secondary numbers size */
    --odds-gap: 4px; /* space between the 3 blocks */
    --odds-pad-x: 4px;
    --odds-popup-w: 720px; /* overall width (try 640–760) */
    --odds-popup-maxh: 68vh; /* max height before it scrolls */
    --odds-th-fs: 13px; /* table header font size */
    --odds-td-fs: 13px; /* table cell font size */
    --odds-pad: 8px; /* table cell padding */
    --odds-head-fs: 14px; /* header title size */
    --odds-head-pad-y: 8px; /* header paddings */
    --odds-head-pad-x: 10px;
    --navy-700: #0e3a8a; /* fallback navy */
    --navy-500: #1f4fd6;
    --navy-800: #0a2c69;
    --gold-600: #f2c21a;
    --gold-500: #f6d24b;
    --gold-700: #d9a50a;
    --chip-radius: 999px;
    --chip-pad-y: 6px; /* tweak size here */
    --chip-pad-x: 14px;
    --chip-shadow: 0 6px 14px rgba(0,0,0,.18);
}
body {
    font-family: ui-sans-serif, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
    margin: 0;
    padding: 0;
    color: var(--muted);
    background: var(--bg);
}

/* Header */
header {
    background: #fff;
    color: var(--ink);
    padding: 10px 22px;
    display: flex;
    align-items: center; /* center logo + nav vertically */
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.logo {
    display: flex;
    align-items: center;
    gap: 0px;
}

.logo-img {
    height: 66px;
    width: auto;
    display: block;
}

.logo-text {
    font-weight: 800;
    font-size: 28px;
    color: var(--ole-blue);
    letter-spacing: .2px;
}

    .logo-text b {
        color: var(--ole-gold);
        font-weight: 800;
    }

/* Nav */
nav {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 10px;
    margin-left: -201px; /* <-- this especially */
}

    nav a {
        color: var(--ink);
        font-weight: 700;
        text-decoration: none;
        position: relative;
        padding: 8px 10px;
        border-radius: 8px;
        transition: .2s ease;
    }



        nav a.active {
            color: var(--ole-blue);
        }

            
            nav a:hover::after {
                content: "";
                position: absolute;
                left: 10px;
                right: 10px;
                bottom: 4px;
                height: 2px;
                background: linear-gradient(90deg,var(--ole-blue),var(--ole-gold));
                border-radius: 2px;
            }

/* Auth buttons (kept) */
.auth-buttons {
    display: flex;
    gap: 12px;
}

    .auth-buttons a {
        color: var(--ink);
        font-weight: 700;
    }

        .auth-buttons a:last-child {
            background: var(--ole-blue);
            color: #fff;
            padding: 8px 14px;
            border-radius: 999px;
            box-shadow: 0 4px 10px rgba(10,78,163,.15);
        }

            .auth-buttons a:last-child:hover {
                filter: brightness(.95);
            }

.logo {
    display: flex;
    align-items: center;
    gap: 0px;
}

.logo-img {
    height: 66px;
    width: auto;
    display: block;
}

.logo-text {
    font-weight: 800;
    font-size: 28px;
    color: var(--ole-blue);
    letter-spacing: .2px;
}

    .logo-text b {
        color: var(--ole-gold);
        font-weight: 800;
    }




.nav-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

nav a:hover .nav-icon {
    filter: brightness(1) invert(0);
}

.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 20px;
    box-sizing: border-box;
}
.page-wrap {
    display: block;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    max-width: 1350px;
    margin: 0 auto;
    align-items: start
}

.header {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 15px;
    align-items: center!important;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04)
}

    .header h1 {
        margin: 0;
        font-size: 1.5rem
    }

.meta {
    color: #666;
    font-size: .9rem
}

.grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px
}


.card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04)
}

.teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .teams .logo {
        width: 56px;
        height: 56px;
        object-fit: contain
    }
.teams1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px
}
    .teams1 .logo {
        width: 56px;
        height: 56px;
        object-fit: contain
    }
.vs {
    font-weight: 700
}

.small-bars {
    display: flex;
    gap: 8px
}

.small-bar {
    width: 24px;
    background: #e9eef6;
    border-radius: 4px;
    position: relative
}

    .small-bar span {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #7aa4ff;
        border-radius: 4px
    }

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse
}

    .table th, .table td {
        border-bottom: 1px solid #eee;
        padding: 8px 10px;
        text-align: left
    }

    .table th {
        font-weight: 600;
        background: #fafafa
    }

/* last matches block */
.block-title {
    font-weight: 700;
    margin: 8px 0
}

.subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.h1 {
    font-weight: bold;
    background-color: #333;
    color: white;
    padding: 6px 10px;
    text-align: left;
}
/* 2-col layout; left fixed so bars never push content */
.h2h-widget {
    display: grid;
    grid-template-columns: 160px 1fr; /* widen a bit to fit labels */
    align-items: center;
    gap: 16px;
}

.h2h-left {
    width: 160px;
}

/* bars area */
.h2h-bars {
    height: 150px; /* room for bar + label */
    display: flex;
    align-items: flex-end;
    gap: 12px;
    user-select: none;
}

/* one bar + its label */
.h2h-item {
    display: grid;
    grid-template-rows: 1fr auto; /* bar takes space, label sits below */
    justify-items: center;
    align-items: end;
    width: 56px; /* bar 36px + some space for label */
}

/* the bar */
.h2h-bar {
    position: relative;
    width: 36px;
    height: 120px;
    background: #f2f2f2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #e6e6e6;
}

    .h2h-bar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--h,0%);
        background: var(--bar-color,#999);
        transition: height .25s ease;
    }

/* hover bubble */
.h2h-value {
    position: absolute;
    bottom: calc(var(--h,0%) + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .15s ease;
}

.h2h-bar:hover .h2h-value {
    opacity: 1;
}

/* per-team colors */
.h2h-a {
    --bar-color: #3b82f6;
}
/* Team A */
.h2h-b {
    --bar-color: #ef4444;
}
/* Team B */

/* label under each bar */
.h2h-label {
    margin-top: 6px;
    max-width: 56px;
    text-align: center;
    font-size: 12px;
    color: #000;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* legend (optional, can remove if labels below are enough) */
.h2h-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 16px;
    color: #666;
}
.h2h-legendlastmatch {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 16px;
    color: #666;
}

.h2h-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 50px;
}

    .h2h-swatch.h2h-a {
        background: #0E3A8A;
    }

    .h2h-swatch.h2h-b {
        background: #f2c21a;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 6px;
        margin-left: 20px;
        margin-bottom: 0px;
        margin-top: 50px;
    }

    .h2h-swatch.h2h-d {
        background: #bbbbbb;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 6px;
        margin-left: 20px;
        margin-bottom: 0px;
        margin-top: 50px;
    }
    .h2h-swatch.h2h-l {
        background: #ff2353;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 6px;
        margin-left: 20px;
        margin-bottom: 0px;
        margin-top: 50px;
    }
/* Radar block layout */
.radar-wrap {
    position: relative;
    display: inline-block; /* keep it compact */
    padding-right: 96px; /* space for the big number */
    width: min(90vw, 900px);
    height: 60vh;
}

    /* Fix canvas size (optional) */
    .radar-wrap canvas {
        width: 360px; /* tweak to your page */
        height: 360px;
    }

/* The big total number on the right */
.radar-total {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font: 600 28px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #111;
}
/* Stacked single bar */
.h2h-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Team B color */

/* tiny numbers on segments (optional) */
.h2h-seg-val {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* total inside the bar (centered) */
.h2h-total-in {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 28px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #111;
    pointer-events: none; /* mouse goes through */
    mix-blend-mode: normal; /* reads well on both colors */
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* caption + mini legend under the bar */
.h2h-caption {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
}

.h2h-mini-legend {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
}

.gap16 {
    display: inline-block;
    width: 16px;
}
/* row that holds (two-bar footprint) + total */
/* lay bar pair + total in one row */
.h2h-row {
    display: flex;
    align-items: center;
    gap: 1px;
}

/* center the number inside each bar */
.h2h-num-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    pointer-events: none;
}

/* big total on right of bars */
.h2h-total-out {
    font-weight: 800;
    font-size: 32px;
    color: #111;
    line-height: 1;
}


/* two-bar footprint container: 56px + 56px with gap */
.h2h-solo {
    display: flex;
    align-items: flex-end;
    gap: 12px; /* same gap as your two bars */
}

/* REAL stacked bar */
.h2h-bigbar {
    position: relative;
    width: 56px;
    height: 150px;
    background: #f2f2f2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #e6e6e6;
    display: flex;
    flex-direction: column-reverse; /* A at bottom */
}

/* stacked segments */
.h2h-seg {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .h2h-seg.h2h-a {
        background: #3b82f6;
    }
    /* Team A */
    .h2h-seg.h2h-b {
        background: #ef4444;
    }
/* Team B */

/* numbers inside segments (6 and 3) */
.h2h-num {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    line-height: 1;
    pointer-events: none;
}

/* GHOST bar = second bar placeholder (muted) */
.h2h-ghostbar {
    width: 56px;
    height: 150px;
    border-radius: 12px;
    background: #f7f7f7;
    box-shadow: inset 0 0 0 1px #eee;
    opacity: .75;
}

/* big total on the right */
.h2h-total-out {
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: #111;
    min-width: 2ch;
}
/* stacked single bar */
.h2h-stack {
    display: flex;
    flex-direction: column-reverse; /* puts A at the bottom */
    width: 36px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #e6e6e6;
    background: #f2f2f2;
}

/* each segment gets height from flex-basis (aPct%, bPct%) */
.h2h-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

    .h2h-seg.h2h-a {
        background: #3b82f6;
    }
    /* Arsenal */
    .h2h-seg.h2h-b {
        background: #ef4444;
    }
/* Forest */

/* small numbers inside */
.h2h-num {
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* total number on the right side */
.h2h-total-out {
    font-weight: 800;
    font-size: 28px;
    margin-left: 16px;
    color: #111;
}

.h2h-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

/*.h2h-menu {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

.h2h-btn {
    margin: 5px 0;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
}

    .h2h-btn.active {
        background: #007bff;
        color: white;
    }*/
.h2h-menu {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    margin-top: 5px;
    gap: 8px;
}

.h2h-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f0f0f0;
    color: #555;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    text-align: center;
    min-width: 100px;
}

    .h2h-btn:hover {
        background: #e0e0e0;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    }

/*    .h2h-btn.active {
        background: linear-gradient(135deg, #4caf50, #2e7d32);
        color: white;
        box-shadow: 0 4px 8px rgba(42, 74, 255, 0.3);
    }

        .h2h-btn.active[data-view="wdl"]:first-child {
            background: linear-gradient(135deg, #4caf50, #2e7d32);
            box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
        }

        .h2h-btn.active[data-view="wdl"]:last-child {
            background: linear-gradient(135deg, #4caf50, #2e7d32);
            box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
        }*/

/*    .h2h-btn:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .h2h-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
        pointer-events: none;
    }*/

.h2h-chart {
    flex: 1;
}

.bar-row {
    overflow: visible;
    display: flex;
    margin-bottom: 10px;
    margin-top: 50px;

}

.bar-rowlastmatch {
    overflow: visible;
    display: flex;
    margin-bottom: 10px;
    margin-top: 6px;
}

.bar {
    text-align: center;
    padding: 5px;
    color: white;
}

.teamA {
    background: #007BFF;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
    .teamA:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .teamA:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }
    .teamA::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px; 
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px;
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }
    .teamA::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; 
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .teamA:hover::after,
    .teamA:hover::before {
        opacity: 1;
        transform: translateY(0);
    }

    
@media (prefers-reduced-motion: reduce) {
    .teamA, .teamA::before, .teamA::after {
        transition: none;
        transform: none;
    }
}

.teamB {
    background: #ff2353;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.teamB:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.teamB:focus-visible {
    outline: 2px solid var(--ole-gold);
    outline-offset: 2px;
}

.teamB::after {
    content: attr(title);
    white-space: pre;
    position: absolute;
    bottom: calc(100% + 10px); /* above the bar */
    left: 9px; /* near right edge of bar */
    z-index: 30;
    background: #0B1E3A;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
    padding: 8px 12px 8px 28px; /* room for the gold square */
    font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
    pointer-events: none;
    /* little gold square on the left */
    background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 10px 10px;
}

.teamB::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0px);
    left: calc(1% - 1px);
    border: 7px solid transparent;
    border-top-color: #131c2d; /* same as panel fill */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
}

.teamB:hover::after,
.teamB:hover::before {
    opacity: 1;
    transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
    .teamB, .teamB::before, .teamB::after {
        transition: none;
        transform: none;
    }
}

.teamB2 {
    background: #ff2353;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .teamB2:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .teamB2:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .teamB2::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); /* above the bar */
        left: 9px; /* near right edge of bar */
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; /* room for the gold square */
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        /* little gold square on the left */
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .teamB2::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .teamB2:hover::after,
    .teamB2:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .teamB2, .teamB2::before, .teamB2::after {
        transition: none;
        transform: none;
    }
}

.teamA2 {
    background: linear-gradient(180deg,var(--ob-gold-500),var(--ob-gold-600));
    color: #1f2937; 
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .teamA2:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .teamA2:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .teamA2::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 8px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px;
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .teamA2::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; 
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .teamA2:hover::after,
    .teamA2:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .teamA2, .teamA2::before, .teamA2::after {
        transition: none;
        transform: none;
    }
}


.teamA1 {
    background: #f1a226;
    font-weight: 700;
}

.teamB1 {
    background: #ff2353;
    font-weight: 700;
}

.teamBt {
    background: #f1a226;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.teamBt:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.teamBt:focus-visible {
    outline: 2px solid var(--ole-gold);
    outline-offset: 2px;
}

.teamBt::after {
    content: attr(title);
    white-space: pre;
    position: absolute;
    bottom: calc(100% + 10px); /* above the bar */
    left: 9px; /* near right edge of bar */
    z-index: 30;
    background: #0B1E3A;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
    padding: 8px 12px 8px 28px; /* room for the gold square */
    font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
    pointer-events: none;
    /* little gold square on the left */
    background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 10px 10px;
}

.teamBt::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0px);
    left: calc(1% - 1px);
    border: 7px solid transparent;
    border-top-color: #131c2d; /* same as panel fill */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
}

.teamBt:hover::after,
.teamBt:hover::before {
    opacity: 1;
    transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
    .teamBt, .teamBt::before, .teamBt::after {
        transition: none;
        transform: none;
    }
}


.draw {
    background: #bbbbbb;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.draw:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.draw:focus-visible {
    outline: 2px solid var(--ole-gold);
    outline-offset: 2px;
}

.draw::after {
    content: attr(title);
    white-space: pre;
    position: absolute;
    bottom: calc(100% + 10px); 
    left: 9px;
    z-index: 30;
    background: #0B1E3A;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
    padding: 8px 12px 8px 28px; 
    font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
    pointer-events: none;
    background-image: linear-gradient(#bbbbbb);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 10px 10px;
}

.draw::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0px);
    left: calc(1% - 1px);
    border: 7px solid transparent;
    border-top-color: #131c2d; /* same as panel fill */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .08s linear, transform .12s ease-out;
}

.draw:hover::after,
.draw:hover::before {
    opacity: 1;
    transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
    .draw, .draw::before, .draw::after {
        transition: none;
        transform: none;
    }
}

.drawh {
    background: #bbbbbb;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .drawh:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .drawh:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .drawh::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; 
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .drawh::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; 
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .drawh:hover::after,
    .drawh:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .drawh, .drawh::before, .drawh::after {
        transition: none;
        transform: none;
    }
}

.drawa {
    background: #bbbbbb;
    font-weight: 700;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .drawa:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .drawa:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .drawa::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; 
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .drawa::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .drawa:hover::after,
    .drawa:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .drawa, .drawa::before, .drawa::after {
        transition: none;
        transform: none;
    }
}


    .legend {
        margin-top: 10px;
        font-size: 14px;
    }

    .h2h-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

        .h2h-table th, .h2h-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

    .ScoreBox {
        color: White !important;
        border-radius: 10px;
        padding: 2px 6px;
        margin-top: 0px;
        text-align: center;
        display: inline-block;
        font-size: 12px;
        min-width: 45px;
        font-weight: bold;
    }

    .h2h-controls {
        display: flex;
        gap: 8px;
        margin-bottom: 8px
    }

    .h2h-btn.active {
        font-weight: 600
    }

    .h2h-chart.hidden {
        display: none;
    }

    .bi-bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0; /* halves touch at center */
        height: 22px; /* bar height */
        margin: 8px 0 16px;
        font-family: inherit;
    }

    .bi-half {
        position: relative;
        width: 50%;
        height: 100%;
        background: #eef1f4; /* track */
        overflow: hidden;
    }

    .bi-left {
        border-radius: 12px 0 0 12px;
    }

    .bi-right {
        border-radius: 0 12px 12px 0;
    }
.bi-bar, .bi-half {
    overflow: visible;
}
    /* Fills grow out from the center */
    .bi-left .bi-fill {
        position: relative;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .bi-right .bi-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

.bi-fill {
    overflow: visible;
    display: flex;
    align-items: center;
    padding: 0 8px;
    white-space: nowrap;
    min-width: 0; /* allow true 0% */
}

        .bi-fill .bi-val {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 700;
            color: #fff; /* white inside bars */
            text-shadow: 0 1px 0 rgba(0,0,0,.18);
            z-index: 1;
            pointer-events: none;
        }
    /* Colors – tweak to match your palette */
.bi-a {
    background: #2f8ef0;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-a:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-a:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-a::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; 
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-a::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-a:hover::after,
    .bi-a:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-a, .bi-a::before, .bi-a::after {
        transition: none;
        transform: none;
    }
}

.bi-b {
    background: #f1a226;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-b:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-b:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-b::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; 
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-b::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-b:hover::after,
    .bi-b:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-b, .bi-b::before, .bi-b::after {
        transition: none;
        transform: none;
    }
}

.bi-a1 {
    background: #2f8ef0;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-a1:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-a1:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-a1::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); /* above the bar */
        left: calc(100% - 14px); /* near right edge of bar */
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; /* room for the gold square */
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        /* little gold square on the left */
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-a1::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 2px);
        left: calc(100% - 24px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-a1:hover::after,
    .bi-a1:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-a1, .bi-a1::before, .bi-a1::after {
        transition: none;
        transform: none;
    }
}

.bi-a2 {
    background: #f1a226;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-a2:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-a2:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-a2::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; /* room for the gold square */
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        /* little gold square on the left */
        background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-a2::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; 
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-a2:hover::after,
    .bi-a2:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-a2, .bi-a2::before, .bi-a2::after {
        transition: none;
        transform: none;
    }
}

.bi-b1 {
    background: #ff2353;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-b1:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-b1:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-b1::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; 
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        background-image: linear-gradient(var(--ole-gold), var(--ole-gold));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-b1::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-b1:hover::after,
    .bi-b1:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-b1, .bi-b1::before, .bi-b1::after {
        transition: none;
        transform: none;
    }
}

.bi-b2 {
    background: #ff2353;
    color: #fff;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .bi-b2:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(241,162,38,.35);
        transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }

    .bi-b2:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

    .bi-b2::after {
        content: attr(title);
        white-space: pre;
        position: absolute;
        bottom: calc(100% + 10px); 
        left: 9px;
        z-index: 30;
        background: #0B1E3A;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.32);
        padding: 8px 12px 8px 28px; /* room for the gold square */
        font: 700 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
        pointer-events: none;
        /* little gold square on the left */
        background-image: linear-gradient(var(--ole-blue), var(--ole-blue));
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 10px 10px;
    }

    .bi-b2::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0px);
        left: calc(1% - 1px);
        border: 7px solid transparent;
        border-top-color: #131c2d; /* same as panel fill */
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .08s linear, transform .12s ease-out;
    }

    .bi-b2:hover::after,
    .bi-b2:hover::before {
        opacity: 1;
        transform: translateY(0);
    }


@media (prefers-reduced-motion: reduce) {
    .bi-b2, .bi-b2::before, .bi-b2::after {
        transition: none;
        transform: none;
    }
}

    /* Team B */

    /* Numbers inside each fill */
    .bi-val {
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .bi-val1 {
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    /* Center tick / “0” badge */
    .bi-center-tick {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        line-height: 1;
        padding: 2px 8px;
        color: #6b7280;
        background: #f3f4f6;
        border-radius: 12px;
        pointer-events: none;
    }

    /* Total at far right (like your 18) */
    .bi-total {
        position: absolute;
        right: 6px;
        font-size: 12px;
        color: #6b7280;
        line-height: 1;
        pointer-events: none;
    }

    .bi-totalleft {
        position: absolute;
        right: 0px;
        left: 6px;
        font-size: 12px;
        color: #6b7280;
        line-height: 1;
        pointer-events: none;
    }

    .state-container {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .state-menu {
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        margin-top: 5px;
        gap: 5px;
    }

    .state-btn {
        padding: 10px 10px;
        border: none;
        border-radius: 3px;
        font-weight: 600;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f0f0f0;
        color: #555;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        position: relative;
        text-align: center;
        min-width: 100px;
    }

        .state-btn:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.15);
        }

        .state-btn.active {
            background: linear-gradient(135deg, #4caf50, #2e7d32);
            color: white;
            box-shadow: 0 4px 8px rgba(42, 74, 255, 0.3);
        }

            .state-btn.active[data-view="wdl"]:first-child {
                background: linear-gradient(135deg, #4caf50, #2e7d32);
                box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
            }

            .state-btn.active[data-view="wdl"]:last-child {
                background: linear-gradient(135deg, #4caf50, #2e7d32);
                box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
            }

        .state-btn:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .state-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
            pointer-events: none;
        }

    .tab-section {
        flex: 1;
    }

        .tab-section.hidden {
            display: none;
        }

    .h2h-widget {
        display: grid;
        grid-template-columns: 160px 1fr; /* widen a bit to fit labels */
        align-items: center;
        gap: 16px;
    }
    /*.tab-section {
    display: none;
}

    .tab-section.is-active {
        display: block;
    }
*/
    /* Forecast card layout */
    .forecast-card .fc-body {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 16px;
        padding: 12px 0 4px;
    }

    /* Bars */
    /* UPDATE these rules */

    /* group tight */
    /*.fc-bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    height: 200px;
    padding: 4px 8px 0;
}

.fc-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 110%;
    margin: 0 0px;
}*/

    /* neon/gradient bar with % inside */
    /*.fc-stick {
    width: 58px;
    height: calc(var(--val,0)*1%);
    border-radius: 12px 12px 0 0;
    background: linear-gradient(to top, var(--g1), var(--g2));
    border: 2px solid var(--stroke);
    border-bottom: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 18px rgba(0,0,0,.15), 0 0 16px var(--glow);
    display: flex;
    align-items: center;
    justify-content: center;
}*/

    /*.fc-val {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}*/

    /* labels */
    /*.fc-label {
    margin-top: 6px;
    font-size: 12px;
    color: #667085;
}*/

    /* top badge for highest bar */
    /*.fc-topbadge {
    position: absolute;
    top: 16px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0b1220;
    background: #c9f3ff;
    border: 1px solid #99e2ff;
    border-radius: 8px;
    text-shadow: none;
}

    .fc-topbadge::after {
        content: "";
        position: absolute;
        left: 14px;
        top: 100%;
        border: 6px solid transparent;
        border-top-color: #c9f3ff;
    }*/

    /* keep your color mapping (already set by --g1/--g2 above) */


    /*.fc-bar.is-home {
    --c: #4a86ff;
}

.fc-bar.is-draw {
    --c: #9aa3b2;
}

.fc-bar.is-away {
    --c: #ff6b6b;
}*/

    /* container alignment */
    .fc-bars {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        padding: 14px 12px 10px;
        position: relative;
        border-radius: 16px;
        background: transparent;
    }

    /* each bar uses --val (0-100) for height */
    .fc-bar {
        --w: 82px; /* bar width */
        align-items: flex-end;
        justify-content: end;
        gap: 0;
        height: 180px;
        --g1: #6aa6ff;
        --g2: #1b4fff; /* default gradient (home) */
        --glow: 0 16px 42px rgba(27,79,255,.25);
        --ring: rgba(255,255,255,.25);
        width: var(--w);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        position: relative;
        filter: drop-shadow(0 18px 40px rgba(15,23,42,.10));
    }

    /* the vertical glossy stick */
    .fc-stick {
        height: calc(var(--h) * (var(--val) / 100));
        width: 100%;
        min-height: 6px;
        background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
        border-radius: 18px;
        position: relative;
        box-shadow: var(--glow), inset 0 0 0 1px var(--ring);
        transition: height .45s cubic-bezier(.2,.8,.2,1);
        --vnum: var(--val-num, var(--val, 0)); /* prefer number */
        height: calc(var(--h) * (var(--vnum) / 100));
    }

        /* soft inner glow and subtle highlight strip */
        .fc-stick::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%);
            border-radius: inherit;
            mix-blend-mode: screen;
            opacity: .9;
        }

        .fc-stick::before {
            content: "";
            position: absolute;
            left: 14%;
            top: 6%;
            width: 68%;
            height: 18%;
            background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
            border-radius: 14px;
            filter: blur(3px);
            opacity: .8;
        }

    /* percent label inside bar */
    .fc-val {
        position: absolute;
        inset: auto 0 8px 0;
        text-align: center;
        color: #fff;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .2px;
        text-shadow: 0 1px 0 rgba(0,0,0,.2);
    }

    /* under-text */
    .fc-label {
        font-size: 13px;
        color: #374151;
        text-align: center;
        font-weight: 600;
    }

    /* "Best" bubble */
    .fc-topbadge {
        position: absolute;
        top: -12px;
        left: 10px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 700;
        color: #0b4;
        background: #d8ffe8;
        border: 1px solid #bdf6d3;
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(11,180,88,.18);
        transform: translateY(-6px);
    }

    /* color themes */
    .fc-bar.is-home {
        --g1: #69a6ff;
        --g2: #1b4fff;
        --glow: 0 16px 46px rgba(27,79,255,.35);
    }

    .fc-bar.is-draw {
        --g1: #c0c6cf;
        --g2: #8a93a1;
        --glow: 0 16px 40px rgba(107,114,128,.32);
    }

    .fc-bar.is-away {
        --g1: #f6a345;
        --g2: #e58b18;
        --glow: 0 16px 46px rgba(229,139,24,.36);
    }

    /* slight scale-up for the top bar */
    .fc-bar.is-top .fc-stick {
        transform: translateY(-2px) scale(1.02);
    }

    /* Right panel */
    .fc-right {
        position: relative;
        border: 1px solid #eef0f3;
        border-radius: 10px;
        padding: 16px;
        width: 80%; /* or 300px, etc. */
        max-width: 280px;
    }

    .fc-tabs {
        position: absolute;
        top: -14px;
        left: 14px;
        display: flex;
        gap: 8px;
    }

    .fc-tab {
        background: #fff;
        border: 1px solid #e6e8ec;
        border-bottom: none;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
    }

        .fc-tab.active {
            font-weight: 600;
            box-shadow: 0 -1px 0 #fff inset;
        }

    .fc-conf {
        width: max-content;
        margin: 0 auto;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        background: #eef2ff;
        color: #3b5bdb;
    }

        .fc-conf.low {
            background: #fff4e5;
            color: #b25e09;
        }

        .fc-conf.medium {
            background: #e8f2ff;
            color: #0b57d0;
        }

        .fc-conf.high {
            background: #e9f9ee;
            color: #137333;
        }

    .fc-bestline {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        padding: 6px 2px;
    }

    .fc-badge {
        background: #111827;
        color: #fff;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 999px;
        letter-spacing: .3px;
    }
    /* Header row */
    .fc-header {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* kickoff left, confidence right */
        gap: 16px;
    }

    /* Confidence pill styles (re-use existing colors) */
    .fc-confline {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fc-conf-label {
        font-size: 12px;
        color: #667085;
    }

    .fc-conf {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        background: #eef2ff;
        color: #3b5bdb;
        text-transform: uppercase;
    }

        .fc-conf.low {
            background: #fff4e5;
            color: #b25e09;
        }

        .fc-conf.medium {
            background: #e8f2ff;
            color: #0b57d0;
        }

        .fc-conf.high {
            background: #e9f9ee;
            color: #137333;
        }

    .fc-bar .fc-stick {
        transition: transform .18s ease, box-shadow .18s ease, height .18s ease;
    }

    .fc-bar:hover .fc-stick,
    .fc-bar:focus-visible .fc-stick {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,.18), 0 0 22px var(--glow);
    }

    .fc-bar {
        outline: none;
    }
        /* for keyboard focus */
        .fc-bar:focus-visible .fc-label {
            text-decoration: underline;
        }

    /* shared tooltip */
    .fc-tip {
        position: absolute;
        pointer-events: none;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 600;
        color: #111827;
        background: #fff;
        border: 1px solid #e6e8ec;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        transform: translate(-50%, -8px);
        opacity: 0;
        transition: opacity .12s ease, transform .12s ease;
        white-space: nowrap;
        z-index: 10;
    }

        .fc-tip.show {
            opacity: 1;
            transform: translate(-50%, -12px);
        }

        .fc-tip .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            margin-right: 6px;
        }

    /* nicer highest bar state */
    .fc-bar.is-top .fc-stick {
        box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 18px 26px rgba(0,0,0,.18), 0 0 22px var(--glow);
    }
    /* prevent accidental text selection on drag */
    .fc-bars, .fc-bar, .fc-stick {
        user-select: none;
    }

        /* selected state */
        .fc-bar.is-selected .fc-stick {
            outline: 2px solid rgba(0,0,0,.12);
            box-shadow: 0 16px 28px rgba(0,0,0,.2), 0 0 26px var(--glow);
            transform: translateY(-6px);
        }

    /* intro grow animation (runs once on load) */
    .fc-stick {
        --h: calc(var(--val,0) * 1%);
        height: 0;
        animation: fcGrow .45s ease-out forwards;
    }

    @keyframes fcGrow {
        to {
            height: var(--h);
        }
    }

    /* detail panel */
    .fc-detail {
        margin-top: 8px;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
        color: #334155;
    }

        .fc-detail .pct {
            margin-left: 6px;
            color: #0b57d0;
        }

    .fc-nodata {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 160px;
        padding: 24px;
        border: 1px dashed #E5E7EB;
        border-radius: 12px;
        background: #FAFAFA;
        color: #6B7280;
    }

    .fc-nodata-title {
        font-weight: 700;
        margin-bottom: 4px;
    }

    .fc-nodata-meta {
        font-size: 13px;
    }

    /* Row layout */
    .fc-row {
        display: flex;
        justify-content: center; /* center all three horizontally */
        gap: 20px;
        align-items: flex-start;
    }

    /* Base card (replaces your .fc-right width rules) */
    .fc-card {
        position: relative;
        border: 1px solid #eef0f3;
        border-radius: 10px;
        padding: 16px;
        background: #fff;
        box-sizing: border-box;
        background: radial-gradient(140% 160% at 0% 0%, #f7fbff 0%, #ffffff 58%);
        border: 1px solid #e9eef6;
        border-radius: 16px;
        padding: 16px 18px;
        box-shadow: 0 10px 28px rgba(18,38,63,.08);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fc-score-number {
        font-size: clamp(34px, 4.8vw, 52px);
        font-weight: 800;
        letter-spacing: .5px;
        color: #0f172a; /* near-black */
        text-shadow: 0 1px 0 #fff;
    }

    .fc-scorecard {
        width: 280px;
        height: 200px;
    }
    /* middle (score) */
    .fc-bestcard {
        width: 260px;
        height: 200px;
    }
    /* right column fixed width */

    /* Your existing bits (keep as-is) */
    .fc-tabs {
        position: absolute;
        top: -14px;
        left: 14px;
        display: flex;
        gap: 8px;
    }

    .fc-tab {
        background: #fff;
        border: 1px solid #e6e8ec;
        border-bottom: none;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
    }

        .fc-tab.active {
            font-weight: 600;
            box-shadow: 0 -1px 0 #fff inset;
        }

    .fc-panel.hidden {
        display: none;
    }

    .fc-score {
        font-size: 44px;
        font-weight: 700;
        letter-spacing: .5px;
        text-align: center;
        padding: 60px 0 59px;
    }

    @media (max-width: 900px) {
        .fc-row {
            flex-direction: column;
            align-items: center;
        }

        .fc-card {
            width: 90%;
        }
    }
    /* --- Best card polish (no markup change) --- */
    .fc-bestline {
        --bg: #fff;
        --bd: #e9eef6;
        --shadow: 0 6px 16px rgba(18, 38, 63, .06);
        --home: #1b4fff;
        --away: #e23b3b;
        --draw: #6b7280;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        background: radial-gradient(120% 120% at 0% 0%, #f7fbff 0%, #ffffff 55%);
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: .9rem 1rem;
        box-shadow: var(--shadow);
        height: 170px;
    }

        /* Badge = compact pill with subtle glow */
        .fc-bestline .fc-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .75rem;
            letter-spacing: .2px;
            color: #fff;
            background: linear-gradient(135deg,#111827,#1f2937);
            padding: .35rem .6rem;
            border-radius: 999px;
            box-shadow: 0 6px 14px rgba(31,41,55,.25), inset 0 0 0 1px rgba(255,255,255,.08);
            white-space: nowrap;
            min-width: 68px;
            text-align: center;
        }

        /* Stack of lines */
        .fc-bestline .fc-lines {
            display: left;
            flex-direction: column;
            gap: .25rem;
            margin-top: 4rem;
            transform: translateX(-80px);
        }

    /* Line typography */
    .fc-line {
        color: #1f2937;
        line-height: 1.25;
    }

        .fc-line:first-child {
            font-weight: 800;
            letter-spacing: .2px;
        }

        /* Subtle bullet before each line (no need to type '-') */
        .fc-line::before {
            content: "";
            display: inline-block;
            width: .5rem;
            height: .5rem;
            margin-right: .45rem;
            border-radius: 50%;
            background: #cfd8e3;
            transform: translateY(1px);
        }

        /* Color-code first line by outcome keywords (no markup change) */
        .fc-line:first-child {
            position: relative;
            padding-left: 0;
        }

            .fc-line:first-child::before {
                background: #cfd8e3;
            }

            .fc-line:first-child:has(> :where(.x)) {
            }
            /* noop for older browsers */

            /* Home / Away / Draw tint based on text */
            .fc-line:first-child:contains("Home") {
                color: var(--home);
            }

            .fc-line:first-child:contains("Away") {
                color: var(--away);
            }

            .fc-line:first-child:contains("Draw") {
                color: var(--draw);
            }

    /* graceful fallback if :contains isn't supported */
    @supports not (selector(:contains(*))) {
        /* nothing — just keeps default dark text */
    }

    /* Optional tiny separator spacing if you show lines 2 & 3 */
    .fc-line + .fc-line {
        opacity: .95;
    }

    .fc-line:last-child {
        opacity: .9;
    }

    /* Mobile breathing room */
    @media (max-width:560px) {
        .fc-bestline {
            padding: .75rem .85rem;
            border-radius: 12px;
        }

            .fc-bestline .fc-badge {
                font-size: .72rem;
                padding: .3rem .55rem;
            }
    }

    .fc-rowgrid {
        display: grid;
        grid-template-columns: 1.1fr 1fr 1.2fr; /* bars, score, best */
        gap: 18px;
        align-items: stretch;
    }

    @media (max-width: 900px) {
        .fc-rowgrid {
            grid-template-columns: 1fr;
        }
    }

    .fc-bubble {
        position: absolute;
        top: -10px;
        left: 6px;
        background: #e7f3ff;
        color: #2b63ff;
        font-weight: 800;
        font-size: 12px;
        padding: 4px 7px;
        border-radius: 12px;
        border: 1px solid #d6e6ff;
        box-shadow: 0 8px 18px rgba(43,99,255,.12);
    }

        .fc-bubble::after {
            content: "";
            position: absolute;
            bottom: -6px;
            left: 14px;
            border: 6px solid transparent;
            border-top-color: #e7f3ff;
            filter: drop-shadow(0 1px 0 #d6e6ff);
        }

    /* ---------------------------------------------------------
   OléBall Light Theme — drop-in overrides (paste at bottom)
   Palette: deep navy + warm gold on airy white surfaces
----------------------------------------------------------*/
    :root {
        /* Brand palette */
        --ob-navy-700: #0e3a8a; /* deep navy from logo */
        --ob-navy-500: #1f4fd6; /* lively blue for gradients */
        --ob-gold-600: #f2c21a; /* warm gold from logo */
        --ob-gold-500: #f6d24b; /* lighter gold */
        --ob-draw: #9aa3b2;
        /* Neutrals / surfaces */
        --ob-bg: #f7fbff;
        --ob-surface: #ffffff;
        --ob-border: #e8eef8;
        --ob-text: #0f172a;
        --ob-muted: #64748b;
        --ob-radius: 16px;
        --ob-shadow: 0 10px 28px rgba(18,38,63,.08);
        --ob-neutral-700: #2e6f7e; /* slate teal */
        --ob-neutral-600: #3b7f90;
        --ob-neutral-500: #4a8fa0;
        --ob-neutral-200: #cfe4ea;
        --ob-neutral-100: #e9f3f6;
        --ob-red-700: #b91c1c; /* deep red */
        --ob-red-600: #dc2626; /* main red */
        --ob-red-500: #ef4444; /* lighter red */
        --ob-red-200: #fde2e2; /* soft bg */
        --ob-red-100: #fff2f2; /* softer bg */
        --ob-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    }

    /* Page foundation */
    html, body {
        background: var(--ob-bg);
        color: var(--ob-text);
    }

    .header, .card, .fc-card, .fc-right {
        background: var(--ob-surface);
        border: 1px solid var(--ob-border);
        border-radius: var(--ob-radius);
        box-shadow: var(--ob-shadow);
    }

    /* Header / nav in light theme */
    header {
        background: var(--ob-surface);
        border-bottom: 1px solid var(--ob-border);
    }

    nav a {
        color: var(--ob-text);
    }


        nav a.active {
            color: var(--ob-navy-700);
        }



    /* Cards & tables */
    .table th {
        background: #f9fbff;
        color: #1f2937;
    }

    .table th, .table td {
        border-bottom: 1px solid var(--ob-border);
    }

    /* Head-to-head & state bars (bi-*) — brand colors */
    .bi-a, .teamA {
        background: linear-gradient(180deg,var(--ob-navy-500),var(--ob-navy-700));
        color: #fff;
        font-weight:700;
    }

    .bi-b, .teamB, .teamBt, .teamB1,.bi-a2 {
        background: linear-gradient(180deg,var(--ob-gold-500),var(--ob-gold-600));
        color: #1f2937; /* better contrast on gold */
    }


    .bi-a1 {
        background: linear-gradient(180deg,var(--ob-navy-500),var(--ob-navy-700));
        color: #fff;
    }

    /* H2H mini vertical bars */
    .h2h-a {
        --bar-color: var(--ob-navy-500);
    }

    .h2h-b {
        --bar-color: var(--ob-gold-600);
    }

    /* Forecast bars — keep structure, recolor only */
    .fc-bar.is-home {
        --g1: var(--ob-navy-500);
        --g2: var(--ob-navy-700);
        --glow: 0 16px 46px rgba(31,79,214,.28);
    }

    .fc-bar.is-draw {
        --g1: #cfd8e3;
        --g2: var(--ob-draw);
        --glow: 0 16px 40px rgba(107,114,128,.25);
    }

    .fc-bar.is-away {
        --g1: var(--ob-gold-500);
        --g2: var(--ob-gold-600);
        --glow: 0 16px 46px rgba(242,194,26,.28);
    }

    /* “Best” bubble + confidence pills keep a light vibe */
    .fc-bubble {
        background: #fff6d8;
        color: #8b6b00;
        border-color: #ffeaa9;
    }

    .fc-conf.low {
        background: #fff6e6;
        color: #a25a06;
    }

    .fc-conf.medium {
        background: #eaf2ff;
        color: #184ecf;
    }

    .fc-conf.high {
        background: #edfbe8;
        color: #116b2d;
    }

    /* Score card */
    .fc-score-number {
        color: var(--ob-navy-700);
        text-shadow: 0 1px 0 rgba(255,255,255,.9);
    }

    /* “Best bet” card typographic polish and brand bullets */
    .fc-bestline {
        background: radial-gradient(120% 120% at 0% 0%, #f7fbff 0%, #ffffff 55%);
    }

    .fc-line:first-child::before {
        background: var(--ob-gold-600);
    }
    /* first bullet gold */

    /* Left menu buttons */
    .state-btn, .h2h-btn {
        border-radius: 10px;
        border: 1px solid var(--ob-border, #e8eef8);
        background: #fff;
        color: #2b3447;
        padding: .45rem .9rem;
        transition: all .15s ease;
    }
    /*    .state-btn:hover, .h2h-btn:hover {
        transform: translateY(-1px);
    }*/

    /* ===== STATE MENU (maps each button by data-view) ===== */

    /* H2H = neutral */
    .state-menu .state-btn[data-view="h2h"] {
        color: var(--ob-neutral-700);
        background: var(--ob-neutral-100);
        border-color: var(--ob-neutral-200);
    }

        .state-menu .state-btn[data-view="h2h"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-neutral-700),var(--ob-neutral-500));
            border-color: transparent;
            box-shadow: 0 6px 14px rgba(46,111,126,.22);
        }

    /* Team A = navy */
    .state-menu .state-btn[data-view="teamAlm"] {
        color:  #0e3a8a;
        background: #eef3ff;
    }

        .state-menu .state-btn[data-view="teamAlm"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-navy-700, #0e3a8a),var(--ob-navy-500, #1f4fd6));
            border-color: transparent;
            box-shadow: 0 6px 14px rgba(31,79,214,.25);
        }

    /* Team B = warm gold */
    .state-menu .state-btn[data-view="teamBlm"] {
        color: #1f2937;
        background: #fff8da;
        border-color: #ffebb6;
    }

        .state-menu .state-btn[data-view="teamBlm"].active {
            color: #1f2937; /* better contrast on gold */
            background: linear-gradient(135deg,var(--ob-gold-600, #f2c21a),var(--ob-gold-500, #f6d24b));
            border-color: transparent;
            box-shadow: 0 6px 14px rgba(242,194,26,.28);
        }

    /* ===== H2H SUB-TABS ===== */
    /* Default (not active) keeps subtle neutral outline */
    .h2h-btn {
        background: #fff;
    }

        /* “Won” tab active = Team A color */
        .h2h-btn[data-view="wdl"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-neutral-700),var(--ob-neutral-500));
            border-color: transparent;
        }

        /* “Same Team” active = Neutral middle color */
        .h2h-btn[data-view="shawdl"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-neutral-700),var(--ob-neutral-500));
            border-color: transparent;
        }

        /* “Goal” & “SHA Gm” active = Team B gold */
        .h2h-btn[data-view="goaldt"].active,
        .h2h-btn[data-view="goalshadt"].active {
            color: #1f2937;
            background: linear-gradient(135deg,var(--ob-gold-600, #f2c21a),var(--ob-gold-500, #f6d24b));
            border-color: transparent;
        }

        /* Hover polish for all tabs */
        .state-btn:hover:not(.active),
        .h2h-btn:hover:not(.active) {
            background: #f3f6fe;
        }

        .h2h-btn[data-view="lastmatchawl"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-navy-700, #0e3a8a),var(--ob-navy-500, #1f4fd6));
            border-color: transparent;
        }

        .h2h-btn[data-view="lastmatchagoal"].active {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-navy-700, #0e3a8a),var(--ob-navy-500, #1f4fd6));
            border-color: transparent;
        }

        .h2h-btn[data-view="lastmatchbwl"].active {
            color: #1f2937;
            background: linear-gradient(135deg,var(--ob-gold-600, #f2c21a),var(--ob-gold-500, #f6d24b));
            border-color: transparent;
        }

        .h2h-btn[data-view="lastmatchbgoal"].active {
            color: #1f2937;
            background: linear-gradient(135deg,var(--ob-gold-600, #f2c21a),var(--ob-gold-500, #f6d24b));
            border-color: transparent;
        }
    /* .state-btn:hover, .h2h-btn:hover {
        background: #eaf0ff;
        transform: translateY(-1px);
    }

    .state-btn.active, .h2h-btn.active {
        color: #fff;
        background: linear-gradient(135deg,var(--ob-navy-700),var(--ob-navy-500));
        box-shadow: 0 6px 14px rgba(31,79,214,.25);
        border-color: transparent;
    }
*/
    /* Small utility tweaks */
    .h2h-label {
        color: #0f172a;
    }

    .fc-label {
        color: #344256;
    }

    .fc-card {
        background: radial-gradient(140% 160% at 0% 0%, #f7fbff 0%, #ffffff 58%);
    }

    .ScoreBox {
        background: var(--ob-navy-700);
    }

        .ScoreBox.draw {
            background: var(--ob-draw);
            color: #fff;
        }

    .ob-teamA-name {
        color: var(--ob-navy-700);
        font-weight: 700;
    }

    .ob-teamB-name {
        color: var(--ob-gold-600);
        font-weight: 700;
    }
    /* Neutral button (for “Draw”, secondary, filters, etc.) */
    .btn-neutral,
    .state-btn.neutral {
        color: #fff;
        background: linear-gradient(135deg,var(--ob-neutral-700),var(--ob-neutral-500));
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: 0 6px 14px rgba(46,111,126,.22);
    }

        .btn-neutral:hover,
        .state-btn.neutral:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
        }

        .btn-neutral:active,
        .state-btn.neutral:active {
            transform: translateY(0);
        }

        .btn-neutral.outline {
            color: var(--ob-neutral-700);
            background: transparent;
            border-color: var(--ob-neutral-500);
        }

        .btn-neutral.soft {
            color: var(--ob-neutral-700);
            background: var(--ob-neutral-100);
            border: 1px solid var(--ob-neutral-200);
        }

    /* (Optional) use for “draw” bars/labels too */
    .fc-bar.is-draw {
        --g1: var(--ob-neutral-500);
        --g2: var(--ob-neutral-700);
    }

    .bi-bar {
        position: relative;
    }

    /* make sure fills are positioned containers */
    .bi-fill {
        position: relative;
        overflow: visible;
    }

    /* LEFT half: value at the right edge of the blue fill */
    /* Restore LEFT value to centered inside blue fill */
    .bi-left .bi-val {
        position: absolute;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        font-weight: 700;
        color: #fff;
        pointer-events: none;
    }

    /* Keep RIGHT value at the end of the red fill (as desired) */
    .bi-right .bi-val {
        position: absolute;
        right: 25px; /*change from6px 20251013*/
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        color: #fff;
        text-align: right;
        pointer-events: none;
    }

    /* make sure the red fill hugs the outer right edge */
    .bi-right {
        display: flex;
    }

        .bi-right .bi-fill {
            margin-left: auto;
        }

    /* make sure the red fill hugs the outer right edge */
    .bi-left {
        display: flex;
    }

        .bi-left .bi-fill {
            margin-left: auto;
        }

    /* RIGHT half: align the red fill to the outer right, then place value at its right edge */
    .bi-right .bi-fill {
        margin-left: auto; /* ensures the red fill hugs the outer right edge */
        float: none; /* in case older rules used float */
    }

    /* Optional: keep labels readable when segment is tiny */
    .bi-left .bi-fill, .bi-right .bi-fill {
        min-width: 28px;
    }

    /* Works even if your title is just <div>Head to Head Won</div> */
    .left-col div:has(+ .bi-bar),
    .right-col div:has(+ .bi-bar) {
        text-align: center;
        font-family: var(--ob-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
        font-weight: 700;
        font-size: 0.98rem; /* tidy, not too big */
        letter-spacing: .2px;
        color: var(--ob-navy-700, #0e3a8a);
        margin: 14px 0 8px;
        position: relative;
    }

        /* brand underline “pill” */
        .left-col div:has(+ .bi-bar)::after,
        .right-col div:has(+ .bi-bar)::after {
            content: "";
            display: block;
            width: 120px;
            height: 3px;
            margin: .35rem auto 0;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--ob-navy-500, #1f4fd6), var(--ob-gold-600, #f2c21a));
            opacity: .35;
        }

    /* spacing between stacked groups */
    .bi-bar {
        margin-bottom: 18px;
    }

    /* Optional: slightly softer look on very small screens */
    @media (max-width: 480px) {
        .left-col div:has(+ .bi-bar),
        .right-col div:has(+ .bi-bar) {
            font-size: .95rem;
        }

            .left-col div:has(+ .bi-bar)::after,
            .right-col div:has(+ .bi-bar)::after {
                width: 96px;
            }
    }
    /* Section/card headers — same font as homepage, bold + clean */
    .card > .title, .panel > .title, .block-title,
    h2.section-title, .section-header h2 {
        font-family: var(--ob-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: .2px;
        color: var(--ob-navy-700, #0e3a8a);
        margin: 0 0 .6rem 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        /* soft brand pill under the title */
        .card > .title::after, .panel > .title::after, .block-title::after,
        h2.section-title::after, .section-header h2::after {
            content: "";
            height: 6px;
            width: 120px;   
            border-radius: 999px;
            background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
            opacity: .25;
            margin-left: auto;
        }
    /* Reusable chip */
.ob-chip {
    align-items: center;
    text-align: center !important;
    gap: 8px;
    padding: var(--chip-pad-y) var(--chip-pad-x);
    border-radius: 5px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    border: 1px solid transparent;
    box-shadow: var(--chip-shadow);
    background-clip: padding-box;
    -webkit-font-smoothing: antialiased;
    transition: filter .15s ease, transform .08s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    width: 200px;
}
    .ob-chip::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        /* top inner highlight + bottom inner shade */
        /* top inner highlight + bottom inner shade */
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
        pointer-events: none;
    }

        .ob-chip .dot {
            width: .6rem;
            height: .6rem;
            border-radius: 999px;
        }

        /* Team A (navy) & Team B (gold) */
    .ob-chip.a {
        color: #fff;

        background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
        border-color: var(--navy-800);
        text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }
        .ob-chip.a:hover {
            filter: brightness(1.04);
            box-shadow: 0 8px 18px rgba(0,0,0,.22);
        }

        .ob-chip.a:active {
            transform: translateY(1px);
            box-shadow: 0 4px 10px rgba(0,0,0,.2) inset;
        }
            .ob-chip.a .dot {
                background: #fff;
                opacity: .9;
            }

    .ob-chip.b {
        color: #1f2937; /* slate-800 */
        background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
        border-color: var(--gold-700);
        /* tiny dark text shadow for readability on bright gold */
        text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.08);
    }

        .ob-chip.b:hover {
            filter: saturate(1.05) brightness(1.02);
            box-shadow: 0 8px 18px rgba(0,0,0,.22);
        }

        .ob-chip.b:active {
            transform: translateY(1px);
            box-shadow: 0 4px 10px rgba(0,0,0,.18) inset;
        }
    .ob-chip:focus-visible {
        outline: 3px solid rgba(241,162,38,.45); /* warm ring */
        outline-offset: 2px;
    }

            .ob-chip.b .dot {
                background: #1f2937;
                opacity: .8;
            }

        /* Neutral/draw chip if you need it */
        .ob-chip.neutral {
            color: #fff;
            background: linear-gradient(135deg,var(--ob-neutral-700,#2e6f7e),var(--ob-neutral-500,#4a8fa0));
        }

            .ob-chip.neutral .dot {
                background: #fff;
                opacity: .9;
            }
    /* use when you print team names inside tables, small headers, etc. */
    .ob-teamA {
        color: var(--ob-navy-700,#0e3a8a);
        font-weight: 700;
    }

    .ob-teamB {
        color: var(--ob-gold-600,#f2c21a);
        font-weight: 700;
    }
    /* ---------- Centered, branded titles for H2H charts ---------- */
    /* Match any <div> whose next sibling is .bar-row */
    .h2h-chart div:has(+ .bar-row) {
        text-align: center;
        font-family: var(--ob-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
        font-weight: 700;
        font-size: .98rem;
        letter-spacing: .2px;
        color: var(--ob-navy-700,#0e3a8a);
        margin: 14px 0 8px;
        position: relative;
    }

        /* Brand underline pill under the title */
        .h2h-chart div:has(+ .bar-row)::after {
            content: "";
            display: block;
            width: 120px;
            height: 6px;
            margin: .35rem auto 0;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
            opacity: .25;
        }

    /* Tidy spacing for the bar area below each title */
    .h2h-chart .bar-row {
        margin-top: .6rem;
    }


    @media (max-width:480px) {
        .h2h-chart div:has(+ .bar-row) {
            font-size: .95rem;
        }

            .h2h-chart div:has(+ .bar-row)::after {
                width: 96px;
            }
    }
    /* Centered, branded titles for Last Match blocks too */
    .h2h-chart div:has(+ .bar-rowlastmatch) {
        text-align: center;
        font-family: var(--ob-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
        font-weight: 700;
        font-size: .98rem;
        letter-spacing: .2px;
        color: var(--ob-navy-700,#0e3a8a);
        margin: 14px 0 8px;
        position: relative;
    }

        .h2h-chart div:has(+ .bar-rowlastmatch)::after {
            content: "";
            display: block;
            width: 120px;
            height: 6px;
            margin: .35rem auto 0;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
            opacity: .25;
        }

    /* spacing for the bars below these titles */
    .h2h-chart .bar-rowlastmatch {
        margin-top: .6rem;
    }

    /* Optional: smaller on mobile */
    @media (max-width:480px) {
        .h2h-chart div:has(+ .bar-rowlastmatch) {
            font-size: .95rem;
        }

            .h2h-chart div:has(+ .bar-rowlastmatch)::after {
                width: 96px;
            }
    }

    /* ========= Last Matches (home team) — make "lose" segment RED ========= */
    /* Your blocks: data-view="lastmatchawl" and "lastmatchagoal" */
    /* Recolor the right side (TeamB / opponent / lose) from gold -> red */
    .h2h-chart[data-view="lastmatchawl"] .bi-b,
    .h2h-chart[data-view="lastmatchagoal"] .bi-b {
        background: linear-gradient(180deg, var(--ob-red-600,#dc2626), var(--ob-red-500,#ef4444)) !important;
        color: #fff; /* text inside stays readable */
    }

    /* If you use alternative classnames for the right fill, cover them too: */
    .h2h-chart[data-view="lastmatchawl"] .teamB,
    .h2h-chart[data-view="lastmatchagoal"] .teamB {
        background: linear-gradient(180deg, var(--ob-red-600,#dc2626), var(--ob-red-500,#ef4444)) !important;
        color: #fff;
    }

        /* Ensure the value inside that red segment is white */
        .h2h-chart[data-view="lastmatchawl"] .bi-b .bi-val,
        .h2h-chart[data-view="lastmatchagoal"] .bi-b .bi-val,
        .h2h-chart[data-view="lastmatchawl"] .teamB .bi-val,
        .h2h-chart[data-view="lastmatchagoal"] .teamB .bi-val {
            color: #fff !important;
        }

    /* ------- (Optional) Legend inside Last Matches shows opponent as red ------- */
    /* If your legend has colored dots/spans for Team B, tint them red only here. 
   Adjust selectors to your legend markup if needed. */
    .h2h-chart[data-view^="lastmatch"] .legend .teamB-dot,
    .h2h-chart[data-view^="lastmatch"] .legend .b,
    .h2h-chart[data-view^="lastmatch"] .legend .teamB {
        background: var(--ob-red-600,#ca3232) !important;
        border-color: var(--ob-red-600,#ca3232) !important;
    }
    /* ===== Last Matches — Team B view =====
   Left segment (their wins) = GOLD
   Right segment (their losses) = RED
   Applies to any data-view that starts with "lastmatchb"
   (e.g., lastmatchbwl, lastmatchbgoal, lastmatchbagoal, etc.)
---------------------------------------------------------------- */
    .h2h-chart[data-view^="lastmatchb"] .bi-a,
    .h2h-chart[data-view^="lastmatchb"] .teamA {
        /* left fill */
        background: linear-gradient(180deg,var(--ob-gold-500),var(--ob-gold-600));
        color: #1f2937; /* better contrast on gold */
    }

    .h2h-chart[data-view^="lastmatchb"] .bi-b,
    .h2h-chart[data-view^="lastmatchb"] .teamB {
        /* right fill */
        background: linear-gradient(180deg, var(--ob-red-600, #dc2626), var(--ob-red-500, #ef4444)) !important;
        color: #fff;
    }

    /* Ensure the numbers inside the segments stay readable */
    .h2h-chart[data-view^="lastmatchb"] .bi-a .bi-val,
    .h2h-chart[data-view^="lastmatchb"] .teamA .bi-val {
        color: #1f2937 !important;
    }

    .h2h-chart[data-view^="lastmatchb"] .bi-b .bi-val,
    .h2h-chart[data-view^="lastmatchb"] .teamB .bi-val {
        color: #fff !important;
    }

    .table, .table th, .table td {
        font-family: var(--ob-font-sans) !important;
        font-weight: 400;
        letter-spacing: .1px;
        color: #0f172a;
    }

        .table th {
            font-weight: 700;
            color: #334155;
        }

        /* Make numbers align nicely (HT, FT, scores, odds) */
        .table td:nth-child(5),
        .table td:nth-child(6),
        .table td .num,
        .fc-val,
        .bi-val {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1, "liga" 1, "kern" 1;
        }

        /* Team names slightly bolder for scannability */
        .table td:nth-child(3),
        .table td:nth-child(4) {
            font-weight: 600;
        }

        /* Optional: subtle hover row */
        .table tbody tr:hover {
            background: #f7fbff;
        }
    /* Fix: center the underline pill directly under the title text */
    .card > .title,
    .panel > .title,
    .block-title,
    h2.section-title,
    .section-header h2 {
        position: relative;
        display: inline-block; /* shrink to the title text width */
        margin-bottom: 14px; /* room for the pill */
    }

        /* override previous “right-edge” pill */
        .card > .title::after,
        .panel > .title::after,
        .block-title::after,
        h2.section-title::after,
        .section-header h2::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%); /* center under the text */
            bottom: -8px; /* sits below the baseline */
            width: 120px;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
            opacity: .25;
            margin-left: 0 !important; /* cancel the old rule */
        }

    /* If your header row is a flex container, prevent it from stretching the title */
    .section-header,
    .card .header,
    .panel .header {
        align-items: flex-start; /* avoid vertical centering pushing things */
    }
    /* === H2H card title normalization (only this card) === */
    /* Match the card that contains the H2H bars/widgets */
    .card:has(.h2h-win-bars),
    .card:has(.h2h-container) {
        position: relative;
    }

        .card:has(.h2h-win-bars) > .block-title,
        .card:has(.h2h-container) > .block-title {
            /* shrink to text width and unify spacing/line-height */
            display: inline-block !important;
            width: auto !important;
            line-height: 1.2;
            margin: 0 0 14px 0;
            padding: 0;
            position: relative;
            z-index: 1; /* keep above any card accents */
        }

            /* Single, centered brand underline under "H2H" */
            .card:has(.h2h-win-bars) > .block-title::after,
            .card:has(.h2h-container) > .block-title::after {
                content: "";
                position: absolute;
                left: 60%;
                transform: translateX(-50%);
                bottom: -8px;
                width: 120px;
                height: 6px;
                border-radius: 999px;
                background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
                opacity: .25;
            }

        .card:has(.h2h-win-bars) > .block-title {
            display: inline-block !important;
            width: auto !important;
            line-height: 1.2;
            margin: 0 0 14px 0;
            padding: 0;
            position: relative;
            z-index: 1;
        }

            .card:has(.h2h-win-bars) > .block-title::after {
                content: "";
                position: absolute;
                left: 170%;
                transform: translateX(-50%);
                bottom: -8px;
                width: 120px;
                height: 6px;
                border-radius: 999px;
                background: linear-gradient(90deg, var(--ob-navy-500,#1f4fd6), var(--ob-gold-600,#f2c21a));
                opacity: .25;
            }


        .card:has(.h2h-win-bars)::before,
        .card:has(.h2h-container)::before {
            pointer-events: none;
        }
    .bi-bar {
        position: relative;
    }

    .bi-half {
        position: relative;
        z-index: 1;
    }
    /* track */
    .bi-fill {
        position: absolute;
        z-index: 3;
    }
        /* colored fill */
        .bi-fill .bi-val {
            z-index: 4;
        }

    .bi-total, .bi-totalleft {
        position: absolute;
        z-index: 0;
        color: #c6ced9; 
        pointer-events: none;
    }

    .bi-fill .bi-val:nth-of-type(n+2) {
        display: none !important;
    }

    .bi-left .bi-val {
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    .bi-right .bi-val {
        right: 25px; 
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        text-align: right;
    }
    /* or slightly smaller than your number size */
    .fc-score-number.is-muted {
        opacity: .75;
        font-weight: 600;
        letter-spacing: .3px;
        font-size: 0.9em; /* 90% of the normal score font */
    }

/* left card header */
.card .teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

    .card .teams .team {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* reserve space so layout won't jump even before image loads */
    .card .teams .logo-wrap {
        width: 72px; /* adjust (64–88) to taste */
        height: 72px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }

    /* make any raster/SVG behave */
    .card .teams img.logo {
        max-width: 80%;
        max-height: 80%;
        width: auto; /* prevent stretching */
        height: auto;
        display: block; /* kill inline baseline gaps */
        object-fit: contain; /* keep aspect ratio inside box */
    }

    /* keep the VS spacer narrow and centered */
    .card .teams .vs {
        min-width: 34px;
        text-align: center;
        font-weight: 700;
    }
.card .teams1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

    .card .teams1 .team {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
    }

    /* reserve space so layout won't jump even before image loads */
    .card .teams1 .logo-wrap {
        width: 72px; /* adjust (64–88) to taste */
        height: 72px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }

    /* make any raster/SVG behave */
    .card .teams1 img.logo {
        max-width: 80%;
        max-height: 80%;
        width: auto; /* prevent stretching */
        height: auto;
        display: block; /* kill inline baseline gaps */
        object-fit: contain; /* keep aspect ratio inside box */
    }

    /* keep the VS spacer narrow and centered */
    .card .teams .vs {
        min-width: 34px;
        text-align: center;
        font-weight: 700;
    }
/* ===========================
   Tablet layout (≤ 1024px)
   =========================== */
@media (max-width: 1024px) {
    header {
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    /*nav {
        margin-left: 0;*/ /* stop pushing nav too far left */
        /*flex-wrap: wrap;
        gap: 8px;
        padding: 4px 0;
    }

        nav a {
            padding: 6px 8px;
            font-size: 0.85rem;
        }*/

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card {
        border-radius: 18px;
        padding: 16px;
    }

    /* Team + radar area: allow 2 columns on tablet */
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
/* ===========================
   Mobile layout (≤ 768px)
   =========================== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        overflow-x: hidden; /* avoid sideways scroll if something is a bit wide */
    }

    .container {
        padding-top: 12px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Top team + radar section → stack 1 column */
    .grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 14px;
    }

    .teams {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

        .teams .logo-wrap {
            margin-bottom: 4px;
        }

        .teams .vs {
            margin: 6px 0;
        }

    /* Forecast row: if you later add more cards, they will stack */
    .fc-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* H2H / Last Match / State blocks → menu on top, chart below */
    .h2h-container,
    .state-container {
        flex-direction: column;
        align-items: stretch;
    }

    .h2h-menu,
    .state-menu {
        flex-direction: row;
        margin-right: 0;
        margin-bottom: 10px;
        overflow-x: auto; /* allow swipe if many tabs */
        gap: 6px;
    }

    .h2h-btn,
    .state-btn {
        flex: 1 0 auto;
        white-space: nowrap;
        font-size: 11px;
        padding: 6px 8px;
    }

    .h2h-chart,
    .tab-section {
        width: 100%;
    }

    .h2h-right,
    .h2h-legend,
    .h2h-legendlastmatch {
        margin-left: 0;
        margin-top: 10px;
    }

    /* Tables tighter so they fit in small width */
    .table {
        font-size: 12px;
    }

        .table th,
        .table td {
            padding: 6px 4px;
        }

    /* Nav on very small screens */
    nav {
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

        nav a {
            font-size: 0.8rem;
            padding: 5px 7px;
        }
}
/* =========================================
   MOBILE & SMALL TABLET (≤ 768px)
   Make details page 1-column, section by section
   ========================================= */
@media (max-width: 768px) {

    /* Main wrapper */
    .page-wrap {
        max-width: 100%;
        padding: 8px 10px 20px;
        box-sizing: border-box;
    }

    /* Top nav (from your layout) */
    /*nav {
        margin-left: 0;*/ /* stop shifting left */
        /*flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

        nav a {
            font-size: 0.8rem;
            padding: 5px 8px;
        }*/

    /* === MAIN GRID: TEAMS + RIGHT PANEL === */
    .grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        padding: 12px 0 18px;
        gap: 12px;
    }

    .card {
        padding: 14px;
        border-radius: 18px;
        margin-bottom: 10px;
    }

    /* Teams block (logos + VS) more vertical */
    .teams {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

        .teams .logo-wrap {
            margin-bottom: 4px;
        }

        .teams .vs {
            margin: 6px 0;
        }

    /* Forecast row – already has a 900px rule, this is just extra for small phones */
    .fc-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .fc-card {
        width: 100%;
        max-width: 100%;
    }

    /* === H2H CARD: MENU ON TOP, CHART BELOW === */
    .h2h-widget {
        grid-template-columns: 1fr; /* stack menu + chart */
        gap: 10px;
        align-items: stretch;
    }

    .h2h-menu {
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: 0;
        margin-bottom: 8px;
        gap: 6px;
    }

    .h2h-btn {
        flex: 1 0 auto;
        min-width: 0;
        font-size: 11px;
        padding: 6px 8px;
        white-space: nowrap;
    }

    .h2h-chart {
        width: 100%;
    }

    /* Tables smaller so they fit even on iPhone SE */
    .table {
        font-size: 12px;
    }

        .table th,
        .table td {
            padding: 6px 4px;
        }
}

/* Optional: extra tightening for very small screens like iPhone SE */
@media (max-width: 480px) {
    .card {
        padding: 12px;
    }

    .teams .logo {
        max-width: 70px;
    }

    .block-title,
    h2.section-title {
        font-size: 1rem;
    }
}
.page-wrap {
    display: header;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    max-width: 1350px;
    margin: 0 auto;
    align-items: start
}
/* =========================================
   FINAL SAFETY NET FOR MOBILE (≤ 768px)
   Kill any side scroll / overflow
   ========================================= */
@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden; /* stop side scroll */
    }

    header,
    nav,
    .page-wrap,
    .container,
    .grid,
    .fc-row,
    .h2h-widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    img,
    canvas {
        max-width: 100%;
        height: auto;
    }
}
/* =========================================
   Ultra-small phones
   Fix H2H + Last Matches layout
   ========================================= */
@media (max-width: 480px) {

    .card {
        padding: 10px 8px;
        border-radius: 14px;
    }

    .h2h-menu {
        flex-wrap: wrap;
        gap: 4px;
    }

    .h2h-btn {
        flex: 1 0 48%;
        font-size: 10px;
        padding: 4px 6px;
        white-space: nowrap;
    }

    .h2h-card,
    .lastmatches-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .h2h-card table,
        .lastmatches-card table {
            min-width: 650px; 
            width: 650px;
        }

    .table {
        font-size: 11px;
    }

        .table th,
        .table td {
            padding: 4px 3px;
            white-space: nowrap;
        }
}
/* =========================================
   Fix Prediction Detail card on small phones
   ========================================= */
@media (max-width: 480px) {

    .forecast-card .fc-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-template-columns: none; 
    }

        .forecast-card .fc-body > * {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

    .forecast-card .fc-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .forecast-card .fc-card,
    .forecast-card .fc-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        box-sizing: border-box;
    }
}
/* =========================================
   Prediction Detail – stack everything
   top-to-bottom on small phones
   ========================================= */
@media (max-width: 600px) {


    .fc-body {
        display: flex;
        flex-direction: column; 
        gap: 10px;
    }

        .fc-body > * {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

    .fc-row {
        flex-direction: column; 
        align-items: stretch;
        gap: 10px;
    }

    .fc-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
    }
}
.radar-container {
    width: 320px;
    height: 320px;
    margin: 0 auto; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

@media (max-width: 768px) {
    .radar-container {
        width: 100%;
        max-width: 320px;
    }

        .radar-container canvas {
            width: 100% !important;
            height: auto !important;
        }
}



@media (max-width: 768px) {
    nav {
        margin-left: 0; 
        justify-content: space-around;
        flex-wrap: wrap;
    }
}
@media (max-width: 768px) {
    nav {
        padding: 6px 4px;
    }
}

@media (max-width: 500px) {
    .state-menu {
        flex-direction: column; 
        align-items: stretch;
        width: 100%;
        margin-right: 0;
        gap: 6px;
    }

    .state-btn {
        width: 100%; 
        min-width: 0; 
        text-align: center;
    }
}
@media (max-width: 600px) {
    table {
        table-layout: fixed; 
        width: 100%;
    }

        table th,
        table td {
            white-space: normal !important; 
        }
}
@media (max-width: 600px) {
    .last-matches-table {
        table-layout: fixed;
        width: 100%;
    }

        .last-matches-table th,
        .last-matches-table td {
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
}
@media (max-width: 415px) {
    .ScoreBox {
        padding: 3px 1px; 
        border-radius: 6px;
        font-size: 0.65rem; 
    }
}
@media (max-width: 600px) {

    .lastmatches-table {
        table-layout: fixed;
        width: 100%;
        font-size: 11px !important;
    }

        .lastmatches-table th,
        .lastmatches-table td {
            padding: 2px 3px !important;
            white-space: normal;
        }

            .lastmatches-table th:nth-child(5),
            .lastmatches-table td:nth-child(5),
            .lastmatches-table th:nth-child(6),
            .lastmatches-table td:nth-child(6) {
                width: 22px !important;
                text-align: center;
                font-size: 9px !important;
                padding: 0 1px !important;
            }

            .lastmatches-table th:nth-child(7),
            .lastmatches-table td:nth-child(7) {
                width: 36px !important;
                text-align: center;
                padding: 0 2px !important;
            }

        .lastmatches-table .ScoreBox {
            display: inline-block;
            width: 100%;
            padding: 1px 0;
            border-radius: 10px;
            font-size: 0.65rem;
            line-height: 1.1;
            text-align: center;
            box-sizing: border-box;
        }
}

@media (max-width: 640px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 4px;
        gap: 8px;
        margin-left: 0;
    }

    nav a {
        padding: 6px 8px;
        font-weight: 700;
        font-size: 13px;
    }

    .logo-img {
        height: 52px;
    }
}

@media (max-width: 900px) {
    header {
        padding: 8px 12px;
        flex-direction: column; 
        align-items: flex-start;
        row-gap: 6px;
    }

    nav {
        margin-left: 0 !important;
        width: 100%;
        padding: 4px 0 0;
        flex-wrap: wrap;           
        justify-content: flex-start;
        gap: 8px;
    }

    nav a {
        padding: 6px 8px;
        font-size: 13px;
        font-weight: 700;
    }
}


@media (max-width: 1200px) {
    nav {
        margin-left: 0 !important;
    }
}

.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: var(--ob-navy-700, #0e3a8a);
        margin: 3px 0;
    }

.mobile-nav-panel {
    display: none;
    position: absolute;
    right: 10px;
    top: 100%;
    margin-top: 6px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--ob-border, #e8eef8);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
    padding: 6px 0;
    min-width: 210px;
    z-index: 1000;
}

    .mobile-nav-panel a {
        display: block;
        padding: 8px 14px;
        font-size: 14px;
        color: var(--ob-text, #0f172a);
        text-decoration: none;
    }

        .mobile-nav-panel a + a {
            border-top: 1px solid var(--ob-border, #e8eef8);
        }

        .mobile-nav-panel a:hover {
            background: #f7fbff;
        }

    .mobile-nav-panel.open {
        display: block;
    }


@media (max-width: 768px) {

   
/*    .detail-header {
        padding: 8px 10px;
        flex-wrap: nowrap;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #ffffff;
    }*/


    .logo {
        flex: 0 0 auto;
    }


    .nav-row {
        width: 100%;
        max-width: 420px;
        display: flex;
        align-items: center;
        justify-content: center; 
        margin: 4px auto 0;
    }

    .main-nav {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0;
        margin-left: 0; 
        justify-content: center; 
    }

        .main-nav a {
            font-size: 13px;
            padding: 6px 4px;
        }

            .main-nav a:nth-child(n+4) {
                display: none;
            }

    .auth-buttons {
        display: none;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 10px; 
    }
}

@media (min-width: 769px) {
    .mobile-nav-panel {
        display: none !important;
    }
}
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* Footer background (light + subtle texture) */
.site-footer {
    background: var(--soft-blue); /* single light blue */
    border-top: 2px solid var(--ole-gold); /* keep brand accent */
    padding-top: 32px; /* <— top padding */
    padding-bottom: 2px;
    z-index: 99;
    position: relative;
}

    /* Grid container (ONE definition) */

    .site-footer .footer-wrap {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px; /* <— left/right padding */
        display: grid;
        grid-template-columns: 1fr .8fr 1.4fr;
        gap: 50px; /* <— column gap */
    }
/* Brand */
.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--ole-blue-600);
}

.brand-tagline {
    color: var(--muted);
}

.follow {
    margin-top: 30px;
}

.follow-label {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.follow-icons {
    display: flex;
    gap: .5rem;
}

/* Social icons */
.icon-btn {
    --s: 36px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    position: relative;
    display: inline-block;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .icon-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px;
        height: 18px;
        mask-size: contain;
        mask-repeat: no-repeat;
        background: var(--ole-blue-600);
    }

    .icon-btn.fb::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.06C22 6.49 17.52 2 11.94 2 6.37 2 1.89 6.49 1.89 12.06c0 4.99 3.64 9.14 8.4 9.94v-7.03H7.9v-2.9h2.39V9.57c0-2.36 1.41-3.66 3.56-3.66 1.03 0 2.11.18 2.11.18v2.33h-1.19c-1.17 0-1.53.73-1.53 1.48v1.78h2.6l-.42 2.9h-2.18V22c4.76-.8 8.4-4.95 8.4-9.94Z'/%3E%3C/svg%3E");
    }

    .icon-btn.x::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4.7l4.71 6.7L17.93 3H21l-7.62 9.06L21.5 21h-4.7l-5.04-7.17L7.07 21H3l8.03-9.52L3 3Z'/%3E%3C/svg%3E");
    }

    .icon-btn.ig::before {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
    }

    .icon-btn:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: 0 4px 14px rgba(16,24,40,.12);
    }

        .icon-btn:hover::before {
            background: var(--ole-gold-500);
        }

/* Quick actions + contact */
.footer-quick {
    margin-top: 34px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    border: 1px solid var(--border);
}

.cta-primary {
    background: var(--ole-gold);
    color: #1a1a1a;
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(241,162,38,.18);
}

    .cta-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(241,162,38,.25);
    }

.cta-ghost {
    background: var(--ole-gold);
    color: #1a1a1a;
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(241,162,38,.18);
    ;
}

    .cta-ghost:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(241,162,38,.25);
    }

.cta-ghost1 {
    background: var(--card);
    color: var(--ole-blue-600);
}

    .cta-ghost1:hover {
        transform: translateY(-1px);
        color: var(--ole-blue-500);
    }

.footer-contact {
    margin-top: 70px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

    .footer-contact a {
        color: var(--ole-blue-600);
        text-decoration: none;
    }

        .footer-contact a:hover {
            text-decoration: underline;
        }

.mail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ole-gold-500);
    box-shadow: 0 0 0 3px rgba(241,162,38,.18);
}

/* Nav (use nav-grid ONLY) */
.nav-grid {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px,1fr));
    gap: 6px 18px;
}

.nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

    .nav a:hover {
        color: var(--ole-blue-500);
    }
.footer-bar {
    border-top: 1px solid var(--border);
    background: linear-gradient(0deg, #fff6db, #fff);
}

    .footer-bar .bar-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: .92rem;
        color: #0f172a;
    }

    .footer-bar .bar-links a {
        color: var(--ole-blue-600);
    }

        .footer-bar .bar-links a:hover {
            color: var(--ole-gold-500);
            text-decoration: underline;
        }


/* Responsive */
@media (max-width:1040px) {
    .site-footer .footer-wrap {
        grid-template-columns: .9fr .9fr 1.2fr;
        gap: 24px;
    }
}

@media (max-width:760px) {
    .site-footer .footer-wrap {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .nav-grid {
        grid-template-columns: 1fr 1fr;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
    }
}

.site-footer .footer-nav .footer-nav-grid {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-left: 280px;
    margin-top: -70px;
}

.site-footer .footer-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

    .site-footer .footer-nav a:hover {
        color: var(--ole-blue-500);
    }
/* Footer mobile tidy-up */
@media (max-width: 760px) {

    /* make footer a simple stacked column */
    .site-footer .footer-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* put footer nav directly under the text, no weird offset */
    .site-footer .footer-nav .footer-nav-grid {
        margin-left: 0;
        margin-top: 0;
        justify-content: flex-start;
    }

    .site-footer .footer-nav {
        text-align: left;
    }

    /* optional: give footer some breathing room */
    .site-footer {
        padding-top: 24px;
        padding-bottom: 16px;
    }
}
/* Footer tablet layout: 761px – 1200px */
@media (min-width: 761px) and (max-width: 1000px) {

    /* 2 columns: left = logo/social, right = about text */
    .site-footer .footer-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* put the nav in its own row, full width under both columns */
    .site-footer .footer-nav {
        grid-column: 1 / -1; /* span across the grid */
        text-align: left;
        margin-top: 8px;
    }

        /* remove the big offset that breaks layout */
        .site-footer .footer-nav .footer-nav-grid {
            margin-left: 0;
            margin-top: 0;
            justify-content: flex-start;
            max-width: 260px; /* keeps links in a neat block */
        }
}
/* 0) Stop mobile browsers from auto-enlarging footer text */
@media (max-width: 720px) {
    .site-footer {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* 1) Set a smaller BASE size on the whole about block */
@media (max-width: 720px) {
    .site-footer .about-card {
        font-size: 13.5px !important; /* base for p, li, etc. */
        line-height: 1.5 !important;
        padding: 2px 0 0 12px !important; /* keep the gold rail space tidy */
    }
}

/* 2) Tweak specific elements inside */
@media (max-width: 720px) {
    .site-footer .about-card h3 {
        font-size: 15.5px !important;
        margin: 0 0 .4rem !important;
    }

    .site-footer .about-card p {
        margin: .35rem 0 !important;
    }

    .site-footer .about-card .about-list {
        margin: .2rem 0 .6rem 1rem !important;
    }

        .site-footer .about-card .about-list li {
            font-size: 13.5px !important;
            line-height: 1.45 !important;
            margin: .18rem 0 !important;
        }

    .site-footer .about-card strong {
        font-weight: 700 !important;
    }

    .site-footer .about-card em {
        font-style: italic !important;
    }
}
/* ≤480px: phones like XR/11/12/13 mini */
@media (max-width: 480px) {
    /* set BASE size directly on the block so p/li inherit */
    .site-footer .about-card {
        font-size: 13px !important;
        line-height: 1.45 !important;
        padding: 2px 0 0 10px !important;
    }

        .site-footer .about-card h3 {
            font-size: 15px !important;
            margin: 0 0 .35rem !important;
        }

        .site-footer .about-card .about-list {
            margin: .2rem 0 .5rem .9rem !important;
        }

        .site-footer .about-card li {
            font-size: 13px !important;
            margin: .16rem 0 !important;
        }
}

/* ≤414px: iPhone XR/11/12/13/14 (non-Max) */
@media (max-width: 414px) {
    .site-footer .about-card {
        font-size: 12.5px !important;
    }

        .site-footer .about-card h3 {
            font-size: 14.5px !important;
        }
}

/* ≤390px: iPhone 12/13/14/15 */
@media (max-width: 390px) {
    .site-footer .about-card {
        font-size: 12px !important;
    }

        .site-footer .about-card h3 {
            font-size: 14px !important;
        }
}

html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ≤ 640px: phones & small tablets in portrait */
@media (max-width: 640px) {
    .site-footer {
        padding-top: 22px;
        padding-bottom: 18px;
    }

        .site-footer .footer-wrap {
            grid-template-columns: 1fr; /* stack columns */
            gap: 16px;
            padding: 0 16px; /* inner LR padding */
        }

    /* brand */
    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .footer-quick .cta {
        height: 32px;
        padding: 0 12px;
        font-size: .9rem;
    }

    .site-footer .footer-contact {
        margin-top: 16px;
    }

    /* nav → single column */
    .site-footer .footer-nav .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: 240px;
    }

    .site-footer .footer-nav a {
        font-size: 14px;
        padding: 4px 0;
    }

    /* About block (this is your “Trusted by 10M+ …”) */
    .site-footer .about-card {
        font-size: 14px !important; /* base for p/li */
        line-height: 1.5 !important;
        padding: 2px 0 0 12px !important; /* keep space for gold rail */
    }

        .site-footer .about-card h3 {
            font-size: 16px !important;
            margin-bottom: .4rem !important;
        }

        .site-footer .about-card .about-list {
            margin: .2rem 0 .6rem 1rem !important;
        }

        .site-footer .about-card li {
            margin: .18rem 0 !important;
        }
}

/* ≤ 480px: smaller phones */
@media (max-width: 480px) {
    .site-footer .about-card {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

        .site-footer .about-card h3 {
            font-size: 15px !important;
        }

    .footer-quick .cta {
        height: 30px;
        padding: 0 10px;
        font-size: .88rem;
    }

    .site-footer .footer-contact {
        margin-top: 14px;
    }
}

/* ≤ 380px: very small phones */
@media (max-width: 380px) {
    .site-footer .about-card {
        font-size: 12.5px !important;
    }

        .site-footer .about-card h3 {
            font-size: 14px !important;
        }

    .site-footer .footer-nav a {
        font-size: 13.5px;
    }
}
@media (max-width: 768px) {
    .detail-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        align-items: center;
        z-index: 999;
        background: #fff;
        border-bottom: 1px solid #d5e2ff;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
        transition: transform 0.22s ease-out;
    }

        .detail-header.hide-on-scroll {
            transform: translateY(-100%);
        }

    body {
        padding-top: 110px;
    }
}
.mobile-nav-panel {
    display: none;
    position: absolute;
    right: 10px;
    top: 100%;
    margin-top: 8px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d5e2ff; 
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    padding: 6px 0;
    min-width: 230px;
    z-index: 1000;
}

    .mobile-nav-panel a {
        display: block;
        padding: 10px 16px;
        font-size: 14px;
        color: #0f172a;
        text-decoration: none;
    }

        .mobile-nav-panel a + a {
            border-top: 1px solid #edf2ff;
        }

        .mobile-nav-panel a:hover {
            background: #eef3ff;
            color: #0e3a8a; 
        }
        .mobile-nav-panel a:first-child { 
            font-weight: 600;
            color: #0e3a8a;
        }

@media (max-width: 768px) {
    header {
        align-items: center;
    }

        header .logo {
            justify-content: center; 
            margin: 0 auto; 
            width: 100%; 
        }
}
/* HT = blue, bold */
.live-minute.ht {
    color: #007BFF;
    font-weight: 700;
}

/* FT = gold, bold */
.live-minute.ft {
    color: #f1a226;
    font-weight: 700;
}

/* 50' = red, bold */
.live-minute.min {
    color: #d00000;
    font-weight: 700;
    font-size: 17px;
}

/* flashing apostrophe */
.live-minute .tick {
    display: inline-block;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Base */
.ScoreBox {
    --sb-bg: var(--ole-blue-600);
    --sb-fg: #fff;
    --sb-border: #0a254a; /* dark blue rim */
    --sb-shadow: rgba(0,0,0,.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 5px 5px;
    font: 800 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    font-variant-numeric: tabular-nums;
    color: var(--sb-fg) !important;
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 5px;
    text-align: center;
    letter-spacing: -.2px;
    box-shadow: 0 1px 5px var(--sb-shadow), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.22);
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

    /* Subtle hover/focus without changing hue */
    .ScoreBox:hover,
    .ScoreBox:focus {
        box-shadow: 0 3px 10px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.24);
    }

    /* Variants that stay in dark-blue family */
    .ScoreBox.neutral {
        --sb-bg: var(--ole-blue-650);
        --sb-border: #0e2b52;
    }


    .ScoreBox.ht {
        --sb-bg: #1b3564;
        --sb-border: #10274a;
    }
    /* deeper blue */
    /* FT keeps your warm gold but still fits dark theme with darker border */
    .ScoreBox.ft {
        --sb-bg: var(--ole-gold-500);
        --sb-border: var(--ole-gold-650);
        --sb-fg: #1a1305;
        text-shadow: none;
    }

    /* Sizes */
    .ScoreBox.sm {
        min-width: 28px;
        padding: 1px 6px;
        font-size: 11px;
        border-radius: 8px;
    }

    .ScoreBox.lg {
        min-width: 42px;
        padding: 3px 10px;
        font-size: 14px;
        border-radius: 10px;
    }
/* Goal popups container (top center) */
#goal-popups {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* lets clicks pass through except the popup itself */
}

/* Single popup */
.goal-popup {
    pointer-events: auto;
    min-width: 260px;
    max-width: 88vw;
    background: #0b1e3a; /* deep blue */
    color: #fff;
    border: 2px solid #f1a226; /* warm gold */
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    padding: 12px 16px 12px 14px;
    font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    column-gap: 10px;
    animation: pop-slide-in .25s ease-out both;
}

    .goal-popup .icon {
        font-size: 22px;
        line-height: 1;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
    }

    .goal-popup .content .title {
        font-weight: 700;
        color: #ffd27a; /* lighter gold for emphasis */
        margin-bottom: 2px;
    }

    .goal-popup .content .meta {
        opacity: .9;
        font-weight: 500;
    }

    .goal-popup .close {
        background: transparent;
        border: 0;
        color: #fff;
        opacity: .8;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 4px 6px;
    }

        .goal-popup .close:hover {
            opacity: 1;
        }

    /* exit animation */
    .goal-popup.hide {
        animation: pop-fade-out .22s ease-in forwards;
    }

@keyframes pop-slide-in {
    from {
        opacity: 0;
        transform: translate(-2px, -8px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes pop-fade-out {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* Theme for goal popups */
#goal-popups .goal-toast {
    background: #0B1E3A; /* deep blue */
    color: #EAF2FF; /* soft white-blue text */
    border: 2px solid #F1A226; /* warm gold */
    box-shadow: 0 12px 28px rgba(11,30,58,.45);
    border-radius: 12px;
}

    #goal-popups .goal-toast .title {
        color: #FFD27A; /* soft gold for heading */
        font-weight: 700;
    }

    #goal-popups .goal-toast .icon {
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
    }

    #goal-popups .goal-toast button {
        color: #FFF;
        opacity: .85;
    }

        #goal-popups .goal-toast button:hover {
            opacity: 1;
        }

/* Optional: subtle entrance/exit feel (works with your inline transitions) */
#goal-popups .goal-toast {
    transform: translateY(0);
}
/* Light theme variant */
.goal-popup.light {
    background: #F9FBFF; /* very light blue-white */
    color: #0B1E3A; /* deep blue text */
    border: 2px solid #F1A226; /* warm gold */
    box-shadow: 0 10px 30px rgba(11,30,58,.12);
}

    .goal-popup.light .icon {
        /* keep the ball, but make it read on light cards */
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
    }

    .goal-popup.light .content .title {
        color: #BD7B00; /* deeper warm gold for heading */
    }

    .goal-popup.light .content .meta {
        color: #1c2a45; /* slightly softer deep blue for body */
        opacity: .95;
    }

    .goal-popup.light .close {
        color: #0B1E3A;
        opacity: .65;
    }

        .goal-popup.light .close:hover {
            opacity: .9;
        }
.goal-popups {
    /* keep your existing styles here, plus these if not already there */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

    /* Class used when popup is visible */
    .goal-popups.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

/* MOBILE: override anything that hides it */
@media (max-width: 768px) {

    /* In case some earlier CSS has display:none on mobile */
    .goal-popups {
        display: block !important;
        /* Put it fixed in the viewport so it won't be cut by table/overflow */
        position: fixed;
        left: 50%;
        bottom: 70px; /* above your bottom nav/footer */
        transform: translateX(-50%);
        max-width: 90vw; /* keep inside screen */
        z-index: 9999;
    }
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--ole-blue-600);
    margin: 3px 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

/* open state – turn into X */
.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(10px) rotate(50deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-50deg);
}

:root[data-theme="dark"],
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e5e7eb;
    --muted: #a7b0c0;
    --bg: #071a33; /* page background */
    --card: #0b1e3a; /* surfaces/cards */
    --soft-blue: #0d274d;
    --soft-gold: rgba(242, 183, 5, 0.10);
    --border: rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.14);
    --hover: rgba(242, 183, 5, 0.10);
    --shadow: 0 10px 24px rgba(0,0,0,.35);
    /* if some blocks use these fallbacks */
    --ob-border: rgba(255,255,255,.12);
    --ob-text: var(--ink);
    --ob-muted: var(--muted);
    /* key fix: this controls TeamA name + radar dataset A */
    --ob-navy-700: #60a5fa; /* light blue */
    --ob-navy-600: #60a5fa; /* optional */
    --ob-navy-500: #3b82f6; /* optional */
    /* keep gold readable */
    --ob-gold-600: #f2c21a;
}

    /* header + mobile menu */
    html[data-theme="dark"] .detail-header {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.45) !important;
    }

    html[data-theme="dark"] .mobile-nav-panel {
        background: var(--card) !important;
        border-color: rgba(255,255,255,.10) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.60) !important;
    }

        html[data-theme="dark"] .mobile-nav-panel a {
            color: var(--ink) !important;
        }

            html[data-theme="dark"] .mobile-nav-panel a + a {
                border-top-color: rgba(255,255,255,.06) !important;
            }

            html[data-theme="dark"] .mobile-nav-panel a:hover {
                background: rgba(242, 183, 5, .12) !important;
                color: #f2b705 !important;
            }

/* theme toggle button (header + mobile panel) */
.theme-toggle {
    appearance: none;
    border: 1px solid var(--border);                                                                                                                                                                                                    
    background: #fff;
    color: var(--ink);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

    .theme-toggle:hover {
        border-color: var(--ole-blue);
        box-shadow: 0 0 0 3px rgba(10,78,163,.12);
        transform: translateY(-1px);
    }

    .theme-toggle:active {
        transform: translateY(0);
    }

.theme-toggle__icon {
    font-size: 16px;
    line-height: 1;
}

/* Theme button itself */
html[data-theme="dark"] .theme-toggle {
    background: rgba(255,255,255,.04);
    border-color: #e2e8f0;
    box-shadow: none;
}
    html[data-theme="dark"] .theme-toggle:hover {
        border-color: rgba(242,183,5,.55);
        box-shadow: 0 0 0 3px rgba(241,162,38,.14);
    }
.theme-toggle--mobile {
    width: calc(100% - 12px);
    height: 42px;
    margin: 6px 6px 8px;
    border-radius: 12px;
    justify-content: center;
}



/* === DARK MODE: make detail content follow theme === */
html[data-theme="dark"] .header,
html[data-theme="dark"] .card {
    background: #0f1a2d !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--muted) !important;
}

    html[data-theme="dark"] .header h1 {
        color: var(--ink) !important;
    }

html[data-theme="dark"] .meta {
    color: var(--muted) !important;
}

html[data-theme="dark"] .table th {
    background: rgba(255,255,255,.04) !important;
    color: var(--ink) !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
}


html[data-theme="dark"] .small-bar {
    background: rgba(255,255,255,.08) !important;
}

/*whole background*/
html[data-theme="dark"] .container {
    background: #071326;
    min-height: 100vh;
}
    html[data-theme="dark"] .container .fc-card,
    html[data-theme="dark"] .container .fc-scorecard,
    html[data-theme="dark"] .container .fc-bestline,
    html[data-theme="dark"] .container .pred-card {
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        color: #eaf1ff !important;
    }

/* FORCE header+footer to remain light even in dark mode */
html[data-theme="dark"] header,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .navbar {
    background: #fff !important;
    color: #0b1e3a !important;
    border-color: rgba(11,30,58,.12) !important;
}
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer {
    background: #e8f1ff !important;
    border-top: 2px solid var(--ole-gold) !important;
    color: #0b1e3a !important;
}


    html[data-theme="dark"] header a,
    html[data-theme="dark"] .site-header a,
    html[data-theme="dark"] .site-footer a {
        color: #0b1e3a !important;
    }
html[data-theme="dark"] .icon-btn {
    background: #fff !important;
}
html[data-theme="dark"].footer-bar .bar-inner {
    color: #0f172a !important;
}
html[data-theme="dark"].footer-bar {
    background: linear-gradient(0deg,#fff6db, #fff) !important;
}

html[data-theme="dark"].state-menu .state-btn[data-view="teamAlm"] {
    color: #0E3a8a;
}

html[data-theme="dark"] .fc-label,
html[data-theme="dark"] .fc-line,
html[data-theme="dark"] .fc-conf-label {
    color: #A7B0C0 !important;
}
html[data-theme="dark"] .fc-bestline .fc-badge {
    color: #111827;
    background: #fff;
}
html[data-theme="dark"] .fc-tabs,
html[data-theme="dark"] .fc-tab.active {
    background: #1d2739 !important;
    box-shadow: 0 -1px 0 #343d4d inset;
}

html[data-theme="dark"] .fc-tab.active {
    border: 1px solid #343d4d !important;
}

html[data-theme="dark"] .fc-nodata {
    background: #1d2739;
    border: 1px dashed #343d4d;
}
html[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255,255,255,.05)!important;
}

html[data-theme="dark"] .nav a:hover {
    background: transparent !important;
}

html[data-theme="dark"] .h2h-legend,
html[data-theme="dark"] .h2h-legend > div {
    color: var(--ink) !important; 
}

html[data-theme="dark"] .h2h-legend {
    color: var(--muted) !important; 
}

    html[data-theme="dark"] .h2h-legend > div {
        color: inherit !important;
    }

html[data-theme="dark"] .h2h-legendlastmatch,
html[data-theme="dark"] .h2h-legendlastmatch > div {
    color: var(--ink) !important;
}

html[data-theme="dark"] .h2h-legendlastmatch {
    color: var(--muted) !important;
}

    html[data-theme="dark"] .h2h-legendlastmatch > div {
        color: inherit !important;
    }

/* Dark mode: ONLY override the inline black (#000) text, keep blue/yellow as-is */
html[data-theme="dark"] td[style*="color:#000"],
html[data-theme="dark"] td[style*="color: #000"] {
    color: var(--ink) !important;
}
/* Dark mode: ScoreBox text color based on inline background-color */
html[data-theme="dark"] .ScoreBox {
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.12); /* helps on dark bg */
}

    /* Blue winner (#054898) -> white text */
    html[data-theme="dark"] .ScoreBox[style*="background-color:#054898"],
    html[data-theme="dark"] .ScoreBox[style*="background-color: #054898"] {
        color: #fff !important;
    }

    /* Yellow winner (#f3bc00) -> dark text */
    html[data-theme="dark"] .ScoreBox[style*="background-color:#f3bc00"],
    html[data-theme="dark"] .ScoreBox[style*="background-color: #f3bc00"] {
        color: #0b1e3a !important;
    }

    /* Light gray draw (#bbbbbb / #d1d5db) -> dark text */
    html[data-theme="dark"] .ScoreBox[style*="background-color:#bbbbbb"],
    html[data-theme="dark"] .ScoreBox[style*="background-color:#d1d5db"] {
        color: #0b1e3a !important;
    }

    /* Darker gray (#6b7280) -> white text */
    html[data-theme="dark"] .ScoreBox[style*="background-color:#6b7280"] {
        color: #fff !important;
    }
html[data-theme="dark"] .table td:nth-child(1),
html[data-theme="dark"] .table td:nth-child(2),
html[data-theme="dark"] .table td:nth-child(5),
html[data-theme="dark"] .table td:nth-child(6) {
    color: var(--muted) !important;
}
/* Team name inline blue -> new dark blue */
html[data-theme="dark"] td[style*="color:#054898"],
html[data-theme="dark"] td[style*="color: #054898"] {
    color: #3b82f6 !important;
}

/* Winner badge inline blue bg -> new dark blue bg */
html[data-theme="dark"] .ScoreBox[style*="background-color:#054898"],
html[data-theme="dark"] .ScoreBox[style*="background-color: #054898"] {
    background-color: #3b82f6 !important;
    color: #fff !important;
}
/* ==========================
   Prediction "View" gate
   ========================== */
.fc-gate {
    position: relative;
    border-radius: 16px;
}

/* top row */
.fc-gate__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 10px;
}

.fc-gate__hint {
    font-size: 13px;
    opacity: .75;
}

/* content area (blurred when locked) */
.fc-gate__content {
    transition: filter .18s ease, opacity .18s ease;
}

.fc-gate.is-locked .fc-gate__content {
    filter: blur(6px);
    opacity: .55;
    pointer-events: none;
    user-select: none;
}

/* overlay */
.fc-gate__overlay {
    position: absolute;
    inset: 50px 0 0 0; /* start under the top row */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
}

.fc-gate.is-locked .fc-gate__overlay {
    opacity: 1;
    transform: translateY(0);
}

.fc-gate__overlayCard {
    width: min(420px, 100%);
    border-radius: 16px;
    padding: 14px 16px;
    background: rgba(11, 30, 58, 0.78);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
}

.fc-gate__title {
    font-weight: 800;
    margin-bottom: 4px;
}

.fc-gate__desc {
    font-size: 13px;
    opacity: .85;
}
/* ==========================
   Prediction Gate — Light theme polish
   ========================== */

/* ensure proper stacking */
.fc-gate__top {
    position: relative;
    z-index: 3;
}

.fc-gate__content {
    position: relative;
    z-index: 1;
}

/* overlay should not block hover/click when unlocked */
.fc-gate__overlay {
    z-index: 2;
    pointer-events: none;
}

.fc-gate.is-locked .fc-gate__overlay {
    pointer-events: auto;
}

/* Light theme: make overlay card LIGHT (not dark) */
.fc-gate__overlayCard {
    background: rgba(255,255,255,.88);
    border: 1px solid var(--border);
    color: var(--ink);
    box-shadow: 0 16px 38px rgba(16,24,40,.14);
}

/* nicer title/desc in light mode */
.fc-gate__title {
    font-size: 16px;
    letter-spacing: .2px;
}

.fc-gate__desc {
    color: var(--muted);
}

/* make overlay look more premium (soft tint behind card) */
.fc-gate.is-locked .fc-gate__overlay {
    background: radial-gradient(1200px 240px at 50% 0%, rgba(10,78,163,.10), rgba(242,183,5,.06) 85%, transparent 10%);
    border-radius: 16px;
}

/* Button style (works even if your btn-cta missing) */
.fc-gate__btn {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, #ffffff, var(--soft-blue));
    color: var(--ink);
    font-weight: 800;
    padding: 9px 14px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(16,24,40,.10);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .fc-gate__btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.02);
        box-shadow: 0 14px 26px rgba(16,24,40,.14);
    }

    .fc-gate__btn:active {
        transform: translateY(0);
        box-shadow: 0 10px 18px rgba(16,24,40,.12);
    }

    .fc-gate__btn:focus-visible {
        outline: 2px solid var(--ole-gold);
        outline-offset: 2px;
    }

/* Optional: make the hint nicer in light theme */
.fc-gate__hint {
    color: var(--muted);
    font-size: 13px;
}
/* ==========================
   Prediction Gate — Dark theme overrides
   ========================== */
html[data-theme="dark"] .fc-gate__overlayCard {
    background: rgba(10, 18, 32, .72); /* deep glass */
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    box-shadow: 0 18px 42px rgba(0,0,0,.40);
}

html[data-theme="dark"] .fc-gate__title {
    color: rgba(255,255,255,.95);
}

html[data-theme="dark"] .fc-gate__desc,
html[data-theme="dark"] .fc-gate__hint {
    color: rgba(167,176,192,.92); /* soft grey like your dark label */
}

/* dark overlay tint behind the card */
html[data-theme="dark"] .fc-gate.is-locked .fc-gate__overlay {
    background: radial-gradient(1200px 240px at 50% 0%, rgba(242,183,5,.10), rgba(14,58,138,.16) 85%, transparent 12%);
}

/* button in dark mode */
html[data-theme="dark"] .fc-gate__btn {
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, #f2c21a, #f6b24d); /* navy */
    color: rgba(255,255,255,.92);
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

    html[data-theme="dark"] .fc-gate__btn:hover {
        filter: brightness(1.06);
        box-shadow: 0 16px 34px rgba(0,0,0,.45);
    }

    html[data-theme="dark"] .fc-gate__btn:focus-visible {
        outline: 2px solid rgba(242,183,5,.85); /* gold focus */
        outline-offset: 2px;
    }
/* Center the overlay content */
.fc-gate__overlay {
    justify-content: center;
    align-items: center;
}

.fc-gate__overlayCard {
    text-align: center;
    display: grid;
    justify-items: center; /* ✅ center children */
    gap: 10px;
}

/* make top row (button + hint) centered too */
.fc-gate__top {
    justify-content: center; /* ✅ */
    flex-direction: column; /* ✅ stack */
    text-align: center;
    gap: 8px;
}
.fc-gate__btn {
    border: 1px solid rgba(242,183,5,.28); /* gold border */
    background: linear-gradient(180deg, #f2c21a, #f6b24d); /* navy */
    color: #000;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(16,24,40,.16);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .fc-gate__btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 16px 32px rgba(16,24,40,.20);
    }

    .fc-gate__btn:active {
        transform: translateY(0);
    }

    .fc-gate__btn:focus-visible {
        outline: 2px solid rgba(242,183,5,.95);
        outline-offset: 2px;
    }
html[data-theme="dark"] .fc-gate__btn {
    border: 1px solid rgba(242,183,5,.35);
    background: linear-gradient(180deg, #f2c21a, #f6b24d); /* navy */
    color:#000;
    box-shadow: 0 14px 30px rgba(0,0,0,.42);
}

    html[data-theme="dark"] .fc-gate__btn:hover {
        filter: brightness(1.08);
        box-shadow: 0 18px 38px rgba(0,0,0,.50);
    }
.fc-gate__btn {
    margin: 0 !important;
}

/* Overlay content spacing */
.fc-gate__overlayCard {
    gap: 10px;
}

/* chips row */
.fc-gate__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.fc-chip {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(14,58,138,.06);
    color: var(--ink);
}

    .fc-chip.warn {
        background: rgba(242,183,5,.10);
        border-color: rgba(242,183,5,.25);
    }

/* details accordion */
.fc-gate__details {
    width: 100%;
    max-width: 520px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.55);
    padding: 10px 12px;
}

    .fc-gate__details > summary {
        text-align:center;
        cursor: pointer;
        font-weight: 800;
        list-style: none;
    }

        .fc-gate__details > summary::-webkit-details-marker {
            display: none;
        }

.fc-gate__detailsBody {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

    .fc-gate__detailsBody ul {
        margin: 0 0 8px 18px;
        padding: 0;
    }

.fc-gate__note {
    border-top: 1px dashed rgba(15,23,42,.14);
    padding-top: 8px;
    font-size: 12.5px;
    color: var(--muted);
}

/* final CTA line */
.fc-gate__ctaText {
    font-size: 13px;
    color: var(--muted);
}

/* dark mode */
html[data-theme="dark"] .fc-chip {
    border-color: rgba(255,255,255,.12);
    background: rgba(242,183,5,.08);
    color: rgba(255,255,255,.92);
}

html[data-theme="dark"] .fc-gate__details {
    border-color: rgba(255,255,255,.10);
    background: rgba(10,18,32,.35);
}

html[data-theme="dark"] .fc-gate__detailsBody,
html[data-theme="dark"] .fc-gate__ctaText {
    color: rgba(167,176,192,.92);
}

html[data-theme="dark"] .fc-gate__note {
    border-top-color: rgba(255,255,255,.14);
}
/* Mobile: move the hidden-card higher */
@media (max-width: 600px) {
    .fc-gate__overlay {
        align-items: flex-start; /* instead of center */
        padding-top: 14px; /* push card down a bit from top */
    }

    /* optional: make card a bit wider and tighter */
    .fc-gate__overlayCard {
        width: min(92vw, 420px);
        margin-top: 6px; /* extra small lift control */
    }
}

.local-time {
    font-family: var(--ob-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
    color: #6b7280;
    margin: 0 0 .6rem 0;
    text-align:center;
}
.match-time time.local-time {
    display: inline-block;
    line-height: 1.2;
}