/* =========================================
   MATCH STYLE BREADCRUMB HEADER
   (exact match-breadcrumbs look)
========================================= */

.stats_parents{
    width:100%;
    min-width:0;   /* ⭐ CRITICAL FLEX FIX */
}

.content.stats-content {
    background: transparent;   /* remove white card */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-width: 0;
    width: 100%;
    flex:1;
    box-shadow: none;
}

.stats_parents{
    width:100%;
    overflow:hidden;   /* 🔥 THIS STOPS STRETCHING */
}

.stat_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
   
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    background: var(--bg-primary);
}

.mobile-match-breadcrumb {
    display: none;
}

/* ===== left breadcrumb row ===== */
.stats-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:12px 18px;
    font-size: 14px;         /* ← requested */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: var(--text-primary);

    overflow: hidden;
    white-space: nowrap;
}

/* breadcrumb text */
.crumb {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

/* separators */
.sep {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0 2px;
}

/* football icon */
.ball-icon {
    font-size: 13px;
    color: var(--text-primary);
    margin-right: 2px;
}

/* country flag */
.country-logo {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    display:  inline-block;
}

/* league title */
.league-title {
    font-weight: 700;
    color: var(--text-secondary);
}

/* remove random spacing */
.stats-breadcrumb * {
    box-sizing: border-box;
}

/* ===============================
   STATS NAV (FINAL CLEAN VERSION)
================================ */

.stats-nav-wrapper{
    width:100%;
    margin-top:12px;
    margin-bottom:10px;
}

.prediction-nav-wrapper{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
}

/* scroll container */
.prediction-nav{
    display:flex;
    gap:8px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:4px 40px;
    box-sizing:border-box;

    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}

.prediction-nav::-webkit-scrollbar{
    display:none;
}

/* tabs */
.prediction-tab{
    flex:0 0 auto;
    white-space:nowrap;

    background: var(--bg-secondary);
    border:none;
    padding:10px 18px;
    border-radius:8px;

    font-size:10px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.prediction-tab.active{
    background: var(--text-primary);
    color: var(--bg-primary);
}

#stats-market-container {
    position: relative;
    will-change: height;
}

#stats-market-container.stats-market-switching {
    transition: height 0.28s ease;
    contain: layout paint;
}

#stats-market-container.stats-market-switching > * {
    transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

#stats-market-container.stats-market-loading > *,
#stats-market-container.stats-market-leaving > * {
    opacity: 0.58;
    transform: translateY(4px) scale(0.995);
    filter: saturate(0.92);
}

#stats-market-container.stats-market-entering > * {
    animation: statsMarketEnter 0.24s ease both;
}

#stats-prediction-types .prediction-tab:disabled {
    cursor: wait;
    opacity: 0.82;
}

@keyframes statsMarketEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #stats-market-container.stats-market-switching,
    #stats-market-container.stats-market-switching > *,
    #stats-market-container.stats-market-entering > * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* arrows */
.scroll-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;

    width:30px;
    height:30px;
    border:none;
    border-radius:50%;

    background: var(--bg-tertiary);
    display:grid;
    place-items:center;
    cursor:pointer;
}

.scroll-arrow.left{ left:6px; }
.scroll-arrow.right{ right:6px; }

.scroll-arrow.hidden{
    opacity:0;
    pointer-events:none;
}

/* arrows icon */
.arrow{
    border:solid #444;
    border-width:0 3px 3px 0;
    display:inline-block;
    padding:3px;
}
.arrow-right{ transform:rotate(-45deg); }
.arrow-left{ transform:rotate(135deg); }


.voting_system {
    margin-top: 16px;
    overflow: hidden;
}

.vote-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vote-slider::-webkit-scrollbar {
    display:none;
}

.vote-block {
    min-width: 100%;
    background: var(--bg-secondary);
    border-radius:12px;
    padding:8px;
    scroll-snap-align:start;
    box-sizing: border-box;
}

.vote-block h3{
    margin:0;
    font-size:18px;      /* reduce size (try 18–20 if smaller needed) */
    font-weight:600;
    line-height:1.2;
    color: var(--text-primary);
}

.vote-options{
    display:flex;
    gap:8px;
}

.vote-btn{
    flex:1;
    border:1px solid #315eff;
    border-radius:30px;
    padding:6px;
    background: var(--bg-primary);
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-primary);
}

.vote-btn.voted {
    border-color: #cbd5e1;
    color: var(--text-primary);
    cursor: default;
}

.vote-btn.voted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--fill-pct, 0%);
    background: rgba(49, 94, 255, 0.15); /* Soft Sofascore-like fill */
    z-index: -1;
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 30px;
}

/* For AWAY button to fill from right if needed, but left-to-right is fine for all */

.vote-btn img{
    height:20px;
    z-index: 2;
}

.vote-btn .vote-pct-text {
    z-index: 2;
    font-weight: 700;
}

.vote-sub{
    margin-top:6px;
    margin-bottom:12px;
    font-size:16px;
    font-weight:500;
    color: var(--text-secondary);
}

/* =========================================
   H2H CARD — DATABASE DRIVEN
========================================= */

/* =========================================
   H2H CARD — DATABASE DRIVEN
========================================= */

.h2h-card {
    margin-top: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    overflow: hidden;
}

/* .h2h-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
} */

.h2h-title-block {
    text-align: center;
    margin-bottom: 14px;
    
    border-radius: 6px;
    overflow: hidden;
}

.h2h-title {
    margin: 0;
    padding: 14px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #1a2a4a;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.h2h-red-stripe {
    background: #c0152a;
    height: 6px;
    width: 100%;
}

/* MAIN LAYOUT */
.h2h-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Team blocks */
.h2h-team {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
}

.h2h-team img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.h2h-team strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.h2h-team span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.h2h-team em {
    font-style: normal;
    font-weight: 700;
}

/* Center */
.h2h-center {
    flex: 1;
    min-width: 0;
}

.h2h-total {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
  
    border-radius: 4px;
    padding: 3px 0;
    margin-bottom: 8px;
}

/* Bar */
.h2h-bar {
    display: flex;
    height: 16px;
    border-radius: 6px;
    overflow: hidden;
    background: #e5e7eb;
    margin-bottom: 6px;
}

.h2h-seg { height: 100%; }
.h2h-seg.home { width: var(--home, 33%); background: #8dd26a; }
.h2h-seg.draw { width: var(--draw, 33%); background: #e7c57d; }
.h2h-seg.away { width: var(--away, 33%); background: #e89c92; }

/* Results row */
.h2h-results {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.h2h-results em {
    font-style: normal;
    font-weight: 700;
}

/* Goals row */
.h2h-goals-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.h2h-goals {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
}

.h2h-goals.home-goals {
    background: #B1E88C;
    color: #1a2a4a;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.h2h-goals.away-goals {
    background: #FFB6AD;
    color: #C72106;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}

.h2h-goals-num {
    font-size: 18px;
    font-weight: 700;
}

.h2h-goals-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.h2h-ball {
    font-size: 18px;
    z-index: 2;
}

/* Stats Grid */
.h2h-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.h2h-grid .box {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
}

/* Top row: pct + label + bars all on one line */
.box-pct-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.h2h-grid .box b {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.h2h-grid .box small {
    font-size: 12px;
}

.box-label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    flex: 1;
    min-width: 0;
}

/* Bar icon — pushed to the right */
.box-bar-icon {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    flex-shrink: 0;
    margin-left: auto;
}

.box-bar-icon .b {
    width: 7px;
    border-radius: 2px 2px 0 0;
}

.box-bar-icon .b1 { height: 40%; background: #aab8c4; }
.box-bar-icon .b2 { height: 65%; background: #aab8c4; }
.box-bar-icon .b3 { height: 100%; background: #aab8c4; }

/* Count line below */
.box-sub-count {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
}

/* Team name line for clean sheets */
.box-sub {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-top: 4px;
    border-top: 2px solid #c0152a;
    padding-top: 4px;
}




.h2h-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    align-items: start;        /* ✅ KEY FIX — columns size independently */
}

/* ── PAST MEETINGS CARD ── */
.past-meetings-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
}

.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.pm-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

/* League filter tabs */
.pm-league-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pm-tab {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: 0.2s;
}

.pm-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Match rows */
.pm-list {
    display: flex;
    flex-direction: column;
}

/* Animated expand/collapse wrapper */
.pm-list-inner {
    overflow: hidden;
    transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 9999px;   /* large enough to not clip on first load */
}

/* ── Match row layout ─────────────────────────────────────── */
.pm-row {
    display: grid;
    grid-template-columns: 38px 1fr 52px 1fr 48px;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    min-width: 0;
    overflow: hidden;
}

.pm-row:last-child {
    border-bottom: none;
}

.pm-date {
    font-size: 10px;
    color: #374151;
    font-weight: 600;
    white-space: pre;
    line-height: 1.3;
    font-family: lato, sans-serif, Arial;
    flex-shrink: 0;
}

/* ── Team name columns ────────────────────────────────────── */
.pm-home-name,
.pm-away-name {
    font-size: 11px;
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-family: lato, sans-serif, Arial;
}

.pm-home-name {
    text-align: right;
    padding-right: 4px;
}

.pm-away-name {
    text-align: left;
    padding-left: 4px;
}

.pm-home-name.bold,
.pm-away-name.bold {
    font-weight: 800;
    color: var(--text-primary);
}

/* ── Score block — fixed centre ───────────────────────────── */
.pm-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 1px;
    width: 52px;
}

.pm-score {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    min-width: 36px;
}

.pm-ht {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    text-align: center;
    font-family: lato, sans-serif, Arial;
}

/* ── League abbreviation — fixed right ────────────────────── */
.pm-league-abbr {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48px;
    text-align: right;
    flex-shrink: 0;
    font-family: lato, sans-serif, Arial;
}

/* Result bar */
.pm-bar-wrap {
    margin: 10px 0 8px;
}

.pm-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #e5e7eb;
}

.pm-seg { height: 100%; transition: width 0.5s ease; }
.pm-home { background: #8dd26a; }
.pm-draw { background: #e7c57d; }
.pm-away { background: #e89c92; }

/* Totals row */
.pm-totals {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 8px;
    gap: 6px;
}

.pm-total-item {
    flex: 1;
    min-width: 0;          /* allow shrinking */
    overflow: hidden;
}


.pm-total-item strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* truncate long team names */
    width: 100%;
}

.pm-total-item span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
}

/* SVG animated bar */
.pm-svg-bar {
    display: block;
    margin: 5px auto 0;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
}

/* View more button */
.pm-footer {
    text-align: center;
    margin-top: 12px;
}

.pm-view-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 6px 24px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pm-view-btn:hover {
    background: #e2e8f0;
}

/* Chevron icon inside button */
.pm-chevron {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.pm-view-btn.expanded .pm-chevron {
    transform: rotate(180deg);
}

/* ── MATCH INTRO CARD ── */
.match-intro-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    align-items: center;
}

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

.match-intro-body p {
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

.match-intro-date {
    text-align: right;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 6px;
}

.pm-empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 16px 0;
}

/* =========================================
   TABLE STANDINGS
========================================= */

.standings-card {
    margin-top: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.standings-title-block {
    text-align: center;
    margin-bottom: 0;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.standings-title {
    margin: 0;
    padding: 14px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #1a2a4a;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.standings-league-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 10px;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}

a.standings-league-name:hover {
    color: #c0152a;
    text-decoration: underline;
}

.standings-red-stripe {
    background: #c0152a;
    height: 6px;
    width: 100%;
}

/* Overall / Home / Away tabs */
.standings-tabs {
    display: flex;
    gap: 0;
    padding: 10px 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.standings-tab {
    padding: 7px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.standings-tab.active {
    color: var(--text-primary);
    border-bottom: 2px solid #c0152a;
}

/* Table wrapper */
.standings-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

/* Header */
.standings-table thead tr {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.standings-table th {
    padding: 9px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    position: relative;
}

.standings-table th.col-team {
    text-align: left;
    padding-left: 12px;
}

/* Sortable header */
.sortable {
    cursor: pointer;
    transition: color 0.2s;
}

.sortable:hover {
    color: var(--text-primary);
}

.sortable.sort-desc::after {
    content: " ▼";
    font-size: 8px;
    color: #c0152a;
}

.sortable.sort-asc::after {
    content: " ▲";
    font-size: 8px;
    color: #c0152a;
}

/* Rows */
.standings-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.standings-table tbody tr:last-child {
    border-bottom: none;
}

.standings-table tbody tr:hover {
    background: #f8fafc;
}

/* Highlighted rows — the two fixture teams */
.standing-row.highlight-home {
    background: #f0fdf4;
}

.standing-row.highlight-away {
    background: #fef2f2;
}

.standing-row.highlight-home:hover {
    background: #dcfce7;
}

.standing-row.highlight-away:hover {
    background: #fee2e2;
}

/* Cells */
.standings-table td {
    padding: 8px;
    text-align: center;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

/* Rank badge */
.col-rank {
    width: 36px;
    text-align: center;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #334155;
}

/* ── Zone badges — description driven ── */

/* Champions League — direct */
.rank-badge.zone-champions     { background: #1d4ed8; color: white; }
/* Champions League — qualification */
.rank-badge.zone-champions-q   { background: #3b82f6; color: white; }

/* Europa League — direct */
.rank-badge.zone-europa        { background: #f97316; color: white; }
/* Europa League — qualification */
.rank-badge.zone-europa-q      { background: #eab308; color: white; }

/* Conference League — direct */
.rank-badge.zone-conference    { background: #16a34a; color: white; }
/* Conference League — qualification */
.rank-badge.zone-conference-q  { background: #84cc16; color: white; }

/* Primary continental cup — group stage (Copa Libertadores, CAF CL, AFC CL etc.) */
.rank-badge.zone-continental    { background: #0e7490; color: white; }
/* Primary continental cup — qualification */
.rank-badge.zone-continental-q  { background: #22d3ee; color: #0c4a6e; }
/* Secondary continental cup — group stage (Copa Sudamericana, CAF CC, AFC Cup etc.) */
.rank-badge.zone-continental2   { background: #0369a1; color: white; }
/* Secondary continental cup — qualification */
.rank-badge.zone-continental2-q { background: #7dd3fc; color: #0c4a6e; }

/* Promotion Zones */
.rank-badge.zone-promotion     { background: #7c3aed; color: white; }
.rank-badge.zone-promotion-q   { background: #a855f7; color: white; } /* lighter purple for playoffs */

/* Relegation play-off */
.rank-badge.zone-relegation-q  { background: #ea580c; color: white; }
/* Direct relegation */
.rank-badge.zone-relegation    { background: #c0152a; color: white; }

/* Team cell */
.col-team {
    text-align: left !important;
    min-width: 130px;
}

.team-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 4px;
}

.team-logo-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.team-name-standing {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Points column — always bold */
.col-pts {
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* Goal diff colours */
.gd-pos { color: #16a34a; }
.gd-neg { color: #c0152a; }

/* Active sorted column highlight */
.standings-table td.sort-active {
    background: #f8fafc;
}

/* ── Standings legend ── */
.standings-legend {
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    background: #f1f5f9;
}

.legend-dot.zone-champions     { background: #1d4ed8; }
.legend-dot.zone-champions-q   { background: #3b82f6; }
.legend-dot.zone-europa        { background: #f97316; }
.legend-dot.zone-europa-q      { background: #eab308; }
.legend-dot.zone-conference    { background: #16a34a; }
.legend-dot.zone-conference-q  { background: #84cc16; }
.legend-dot.zone-continental    { background: #0e7490; }
.legend-dot.zone-continental-q  { background: #22d3ee; }
.legend-dot.zone-continental2   { background: #0369a1; }
.legend-dot.zone-continental2-q { background: #7dd3fc; }
.legend-dot.zone-promotion     { background: #7c3aed; }
.legend-dot.zone-promotion-q   { background: #a855f7; }
.legend-dot.zone-relegation-q  { background: #ea580c; }
.legend-dot.zone-relegation    { background: #c0152a; }

.legend-text {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* =========================================
   STANDINGS PRIMARY NAV TABS
========================================= */

/* ── Group selector tabs (multi-group leagues) ── */

.standings-group-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #f1f5f9;
}

.standings-group-tabs::-webkit-scrollbar {
    display: none;
}

.standings-group-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 6px 6px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.standings-group-tab:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.standings-group-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Hidden group panel */
.standings-group-panel.sgroup-hidden {
    display: none;
}

.standings-nav-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.standings-nav-tabs::-webkit-scrollbar {
    display: none;
}

.standings-nav-tab {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.standings-nav-tab:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.standings-nav-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
   
}

/* ── Secondary tabs (Over/Under thresholds) ── */

.standings-secondary-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.standings-secondary-tabs::-webkit-scrollbar {
    display: none;
}

.standings-secondary-tab {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.standings-secondary-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* ── Form badges ── */
.form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
    color: white;
    margin: 0 1px;
    flex-shrink: 0;
}

.badge-w { background: #16a34a; }
.badge-d { background: #e7c57d; color: #92400e; }
.badge-l { background: #c0152a; }



/* =========================================
   LAST 6 MATCHES — TWO CARD ROW
========================================= */

.last6-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    align-items: start;
}

.last6-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
}

/* ── Fix long team names in last6 header ─────────────────── */
.last6-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    min-width: 0;          /* allow flex children to shrink below content size */
}

.last6-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.last6-team-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;               /* take available space between logo and title */
    min-width: 0;          /* allow shrinking */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.last6-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-left: auto;
    letter-spacing: 0.3px;
    flex-shrink: 0;        /* never shrink — team name shrinks instead */
    white-space: nowrap;
}

/* ── Filter tabs container — two rows stacked ─────────────── */
.last6-filter-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}

/* ── League strip row ─────────────────────────────────────── */
.last6-tabs-league-row {
    position: relative;
    overflow: hidden;
    padding-right: 24px;         /* space for fade overlay */
}

/* The track that GSAP translates horizontally */
.last6-tabs-scroll-track {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    width: max-content;
    cursor: grab;
    user-select: none;
    will-change: transform;
}

.last6-tabs-scroll-track.is-dragging {
    cursor: grabbing;
}

/* Right-edge fade — hints that more tabs exist off-screen */
.last6-tabs-fade-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
    background: linear-gradient(to right, transparent, #fff 80%);
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 2;
}

/* ── Venue row — always fixed, never moves ────────────────── */
.last6-tabs-venue-row {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* ── Shared tab pill ──────────────────────────────────────── */
.last6-tab {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;         /* text never wraps inside a pill */
    flex-shrink: 0;              /* pill never compresses */
}

.last6-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.last6-tab:not(.active):hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* Old divider — hidden in new layout */
.last6-tab-divider {
    display: none;
}

/* ── Match rows — STRICT GRID, columns never scatter ─────── */
.last6-list-inner .pm-row {
    display: grid;
    grid-template-columns: 38px 1fr 60px 1fr 52px;
    align-items: center;
    gap: 4px;
    padding: 5px 2px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
    min-width: 0;
}

.last6-list-inner .pm-row:last-child {
    border-bottom: none;
}

/* Date — fixed width, two-line format, never grows */
.last6-list-inner .pm-date {
    font-size: 10px;
    color: #64748b;
    line-height: 1.3;
    white-space: pre;   /* preserves the \n line-break in date string from server */
}


/* Team names — ellipsis when too long, NEVER push the score block */
.last6-list-inner .pm-home-name,
.last6-list-inner .pm-away-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 11px;
    color: #1e293b;
}

.last6-list-inner .pm-home-name {
    text-align: right;
}
 
.last6-list-inner .pm-away-name {
    text-align: left;
}


 
.last6-list-inner .pm-home-name.bold,
.last6-list-inner .pm-away-name.bold {
    font-weight: 700;
}


/* Score block — centred column, fixed 60px, never squashed */
.last6-list-inner .pm-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.last6-list-inner .pm-score {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

.last6-list-inner .pm-ht {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
}

/* League label — truncates, right-aligned in its 52px column */
.last6-list-inner .pm-league-abbr {
    font-size: 10px;
    color: #94a3b8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    min-width: 0;
}


/* ── Bar + totals ─────────────────────────────────────────── */
.last6-bar-wrap {
    margin: 10px 0 8px;
}

.last6-totals {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 8px;
    gap: 6px;
}

/* ── Footer / view more ───────────────────────────────────── */
.last6-footer {
    text-align: center;
    margin-top: 12px;
}

/* ── Score badge coloring ─────────────────────────────────── */
.pm-score.result-win  { background: #16a34a; color: white; }
.pm-score.result-draw { background: #e7c57d; color: #92400e; }
.pm-score.result-loss { background: #c0152a; color: white; }




/* =========================================
   TEAM PERFORMANCE COMPARISON
========================================= */

.perf-comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 0;
}

.perf-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.perf-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a2a4a;
    padding: 12px 14px;
    border-radius: 0;
}

.perf-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 4px;
}

.perf-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.perf-team-name {
    font-size: 14px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.3px;
}

.perf-league-name {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.perf-flag {
    width: 16px;
    height: 11px;
    object-fit: cover;
    border-radius: 2px;
}

.perf-position {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
}

/* Form table */
.perf-form-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #f1f5f9;
}

.perf-form-table thead tr {
    background: #f8fafc;
}

.perf-form-table th {
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 650;
    color: #64748b;
    letter-spacing: 0.4px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.perf-stats-table th {
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.4px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.perf-stats-table th:first-child {
    text-align: center;
}

.perf-form-table td {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid #f8fafc;
    text-align: center;
}

.perf-form-table tbody tr:last-child td {
    border-bottom: none;
}

.perf-form-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* PPG colored badge — color applied by JS */
.perf-ppg {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    color: white;
    min-width: 35px;
    text-align: center;
    background: #94a3b8;
}

.perf-ppg-green  { background: #16a34a !important; }
.perf-ppg-lime   { background: #91BC80 !important; }
.perf-ppg-amber  { background: #d97706 !important; }
.perf-ppg-orange { background: #ea580c !important; }
.perf-ppg-red    { background: #dc2626 !important; }

/* Stats table */
.perf-stats-table {
    width: 100%;
    border-collapse: collapse;
}

.perf-stats-table thead tr {
    background: #f8fafc;
}

.perf-stats-table td {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    border-bottom: 1px solid #f8fafc;
}

.perf-stats-table td:first-child {
    text-align: center;
    color: #64748b;
    font-weight: 600;
}

.perf-stats-table tbody tr:last-child td {
    border-bottom: none;
}

.perf-stats-table tbody tr:hover {
    background: #f8fafc;
}

/* Highlighted column — Home for home team, Away for away team */
.perf-col-highlight {
    background: #eff6ff !important;
    color: #1B5673 !important;
    font-weight: 800 !important;
}

.perf-no-data {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

.perf-na {
    color: #94a3b8;
    font-size: 12px;
}

/* =========================================
   FORM EDGE ANALYSIS
========================================= */

.fea-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 0;
}

.fea-labels-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* EXACT MATCH */
    align-items: center;
    margin-bottom: 10px;
}

.fea-label-home { font-size: 13px; font-weight: 700; color: #16a34a; grid-column: 1; text-align: center}
.fea-label-away { font-size: 13px; font-weight: 700; color: #c0152a; grid-column: 3; text-align: center}

/* ── Single main row: side | center | side ── */
.fea-logo-row {
    display: grid;
    grid-template-columns:1fr 2fr 1fr; 
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

/* Hide these — not used in new layout */
.fea-info-row { display: none; }

/* Each side stacks vertically: logo → ppg → badges */
.fea-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fea-side-right {
    align-items: center;
}

.fea-logo-wrap {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
}

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

.fea-ppg-badge {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    min-width: 60px;
    text-align: center;
}

/* =========================================
   PPG COLOR SYSTEM (shared)
========================================= */

.ppg-green {
    background: #16a34a !important;
}

.ppg-lime {
    background: #65a30d !important;
}

.ppg-amber {
    background: #f59e0b !important;
}

.ppg-orange {
    background: #f97316 !important;
}

.ppg-red {
    background: #dc2626 !important;
}

.fea-ppg-home,
.fea-ppg-away {
    background: #64748b; /* temporary default */
}

.fea-form-badges {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}

/* Center column: bar on top, verdict below */
.fea-bar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.fea-bar-wrap {
    position: relative;
    width: 100%;
    padding: 18px 0;
}

.fea-bar {
    height: 14px;
    border-radius: 7px;
    background: #e5e7eb;
    position: relative;
    overflow: visible;
    display: flex;
}

.fea-bar-home {
    background: linear-gradient(90deg, #4ade80, #8dd26a);
    height: 100%;
    width: 0%;
    border-radius: 7px 0 0 7px;
    z-index: 1;
}

.fea-bar-away {
    background: linear-gradient(90deg, #e89c92, #f87171);
    height: 100%;
    width: 0%;
    border-radius: 0 7px 7px 0;
    z-index: 1;
}

.fea-pin {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    z-index: 10;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.fea-pin-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: var(--bg-primary);
    border: 2.5px solid #e5e7eb;
    border-radius: 50%;
    padding: 2px;
    display: block;
}

@keyframes feaPinPulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

.fea-pin-logo.pulsing {
    animation: feaPinPulse 1.2s ease-out 3;
    border-color: #6366f1;
}


.fea-bar-home.filled {
    background: linear-gradient(90deg, #4ade80, #8dd26a);
}

.fea-bar-away.filled {
    background: linear-gradient(90deg, #e89c92, #f87171);
}

.fea-verdict-section {
    width: 100%;
    text-align: center;
}

.fea-verdict {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    line-height: 1.6;
}

.fea-verdict strong { font-weight: 800; color: var(--text-primary); }
.fea-verdict .fea-pct-pos { color: #16a34a; font-weight: 800; }
.fea-verdict .fea-pct-neg { color: #c0152a; font-weight: 800; }

/* Match lists */
.fea-matches-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}
.fea-team-home,
.fea-team-away {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#fea-home-matches {
    grid-column: 1;
}

#fea-away-matches {
    grid-column: 3;
}

.fea-matches-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
}

.fea-match-tabs {
    display: flex;
    justify-content: center; 
    gap: 6px;
    width: 100%;
    max-width: 420px;
}

.fea-tab {
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: 0.2s;
}

.fea-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.fea-match-list {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;  
    flex-direction: column;
}

.fea-match-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}

.fea-match-row:last-child { border-bottom: none; }
.fea-team-home { text-align: right; font-weight: 500; color: #334155; }
.fea-team-away { text-align: left;  font-weight: 500; color: #334155; }
.fea-team-home.bold, .fea-team-away.bold { font-weight: 800; color: var(--text-primary); }

.fea-score-badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    min-width: 40px;
    text-align: center;
}

.fea-score-win  { background: #16a34a; }
.fea-score-draw { background: #e7c57d; color: #92400e; }
.fea-score-loss { background: #c0152a; }

.fea-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 310px;
    margin-top: 2px;
    gap: 40px;
}

.fea-page-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
}

.fea-page-btn:hover { color: var(--text-primary); }
.fea-page-btn:disabled { color: #cbd5e1; cursor: default; }
.fea-na { font-size: 12px; color: #94a3b8; }


/* =========================================
   OVER / UNDER GOAL PROBABILITY
========================================= */

.ou-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 16px;
    margin-top: 0;
}

/* Threshold tabs */
.ou-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}

.ou-tab {
    padding: 4px 18px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}

.ou-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Gauge row */
.ou-gauge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
}

.ou-gauge {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.ou-svg {
    width: 100%;
    height: 100%;
    transform: none;
}

.ou-gauge-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ou-gauge-pct {
    font-size: 22px;
    font-weight: 900;
    color: #16a34a;
    line-height: 1;
    transition: color 0.3s;
}

.ou-gauge-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.ou-gauge-meta {
    text-align: left;
    max-width: 180px;
}

.ou-gauge-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ou-gauge-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

/* Per team grid */
.ou-teams-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.ou-team-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}

.ou-team-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.ou-team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.ou-team-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
}

.ou-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ou-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    width: 30px;
    flex-shrink: 0;
}

.ou-bar-wrap {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.ou-bar-fill {
    height: 100%;
    border-radius: 3px;
    width: 0%;
    transition: width 0.8s ease;
}

.ou-bar-over  { background: #16a34a; }
.ou-bar-under { background: #c0152a; }

.ou-stat-val {
    font-size: 11px;
    font-weight: 800;
    min-width: 30px;
    text-align: right;
}

.ou-val-over  { color: #16a34a; }
.ou-val-under { color: #c0152a; }

.ou-games-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
}

/* Verdict banner */
.ou-verdict,
.ou-verdict-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ou-verdict-text {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.5;
}

.ou-verdict-text strong { color: white; font-weight: 800; }

.ou-verdict-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    background: #16a34a;
}

.ou-verdict-badge.under,
.ou-verdict-badge.ou-badge-under { background: #64748b; }
.ou-verdict-badge.ou-badge-over { background: #f97316; }

/* =========================================
   BTTS TRACKER  —  full replacement block
   Replace entire old BTTS block in stats.css
========================================= */

.btts-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 20px 16px 0;
    margin-top: 0;
    overflow: hidden;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.btts-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.btts-gauge {
    position: relative;
    width: 94px;
    height: 94px;
    flex-shrink: 0;
}

.btts-svg { width: 100%; height: 100%; }

.btts-gauge-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.btts-gauge-pct {
    font-size: 20px;
    font-weight: 900;
    color: #16a34a;
    line-height: 1;
    transition: color 0.3s;
}

.btts-gauge-lbl {
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.btts-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.btts-hero-verdict {
    font-size: 16px;
    font-weight: 900;
    color: #16a34a;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.btts-hero-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

.btts-conf-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    width: fit-content;
}

.btts-conf-high   { background: #dcfce7; color: #15803d; }
.btts-conf-medium { background: #fef9c3; color: #854d0e; }
.btts-conf-low    { background: #fee2e2; color: #b91c1c; }

/* ── PERIOD TABS ───────────────────────────────────────────────── */
.btts-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.btts-tab {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.18s;
}

.btts-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* ── TEAM BARS ─────────────────────────────────────────────────── */
.btts-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.btts-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btts-team-info {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 90px;
    flex-shrink: 0;
}

.btts-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.btts-team-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.btts-bar-wrap {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.btts-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.85s ease;
}

.btts-pct-val {
    font-size: 12px;
    font-weight: 800;
    min-width: 36px;
    text-align: right;
    transition: color 0.3s;
}

/* ── GG/NG TIMELINE ────────────────────────────────────────────── */
.btts-timeline-wrap {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 12px 10px;
    margin-bottom: 14px;
}

.btts-tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.btts-tl-title {
    font-size: 10px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.btts-tl-note {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
    font-style: italic;
}

.btts-timelines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.btts-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btts-tl-name {
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    width: 64px;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btts-dots {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.btts-tl-count {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.btts-dot {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.1px;
}

.btts-gg { background: #16a34a; }
.btts-ng { background: #c0152a; }

.btts-tl-empty {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

.btts-tl-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btts-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

.btts-dot-sample {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

/* ── MODEL BREAKDOWN ───────────────────────────────────────────── */
.btts-signals-block {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.btts-signals-title {
    font-size: 9px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.btts-signals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btts-signal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.btts-signal-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 140px;
    flex-shrink: 0;
}

.btts-signal-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.btts-signal-desc {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.3;
}

.btts-signal-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

.btts-signal-bar-wrap {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.btts-signal-bar {
    height: 100%;
    border-radius: 3px;
    width: 0%;
}

.btts-signal-val {
    font-size: 11px;
    font-weight: 800;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* ── VERDICT FOOTER ────────────────────────────────────────────── */
.btts-verdict-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    margin: 0 -16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.btts-verdict-label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.6;
    min-width: 0;
    flex: 1;
}

.btts-verdict-label strong { color: white; font-weight: 800; }

.btts-verdict-badge {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    min-width: 120px;
}

.btts-badge-yes      { background: #16a34a; }
.btts-badge-lean-yes { background: #84cc16; color: #1a2e05; }
.btts-badge-lean-no  { background: #f59e0b; color: #451a03; }
.btts-badge-no       { background: #c0152a; }


/* =========================================
   FIRST HALF GOAL PROBABILITY
========================================= */

.fhg-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 16px;
    margin-top: 0;
}

.fhg-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}

.fhg-tab {
    padding: 4px 18px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}

.fhg-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Gauge */
.fhg-gauge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
}

.fhg-gauge {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.fhg-svg { width: 100%; height: 100%; }

.fhg-gauge-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fhg-gauge-pct {
    font-size: 22px;
    font-weight: 900;
    color: #f97316;
    line-height: 1;
    transition: color 0.3s;
}

.fhg-gauge-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.fhg-gauge-meta { text-align: left; max-width: 180px; }

.fhg-gauge-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.fhg-gauge-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

/* Per team */
.fhg-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.fhg-divider-line {
    width: 1px;
    background: #e5e7eb;
    align-self: stretch;
    margin: 4px 0;
}

.fhg-team-block {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}

.fhg-team-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fhg-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.fhg-team-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
}

.fhg-tag {
    font-size: 9px;
    font-weight: 700;
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.fhg-tag-away {
    background: #fce7f3;
    color: #be185d;
}

.fhg-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.fhg-bar-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    width: 30px;
    flex-shrink: 0;
}

.fhg-bar-wrap {
    flex: 1;
    height: 7px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.fhg-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.9s ease;
}

.fhg-over  { background: linear-gradient(90deg, #f97316, #fb923c); }
.fhg-under { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }

.fhg-bar-val {
    font-size: 11px;
    font-weight: 800;
    min-width: 32px;
    text-align: right;
}

.fhg-val-over  { color: #f97316; }
.fhg-val-under { color: #64748b; }

/* Insight strip */
.fhg-insight {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    text-align: center;
    margin-bottom: 12px;
    min-height: 28px;
}

/* Verdict */
.fhg-verdict {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fhg-verdict-text {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.5;
}

.fhg-verdict-text strong { color: white; font-weight: 800; }

.fhg-verdict-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
}

.fhg-badge-over  { background: #f97316; }
.fhg-badge-under { background: #64748b; }
.fhg-games-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    margin-top: 5px;
}

/* =========================================
   MATCH TEMPO RADAR
========================================= */

.mtr-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 20px 16px 16px;
    margin-top: 0;
}

.mtr-teams-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.mtr-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mtr-team-right { align-items: center; }

.mtr-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
}

.mtr-team-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
}

.mtr-team-bar {
    width: 32px;
    height: 4px;
    border-radius: 2px;
}

.mtr-vs {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 2px;
}

.mtr-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.mtr-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.mtr-legend-line {
    width: 24px;
    height: 3px;
    border-radius: 2px;
}

.mtr-svg-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Polygon entrance animations */
@keyframes mtrPolyIn {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: 1; transform: scale(1); }
}

.mtr-poly-home {
    transform-origin: 200px 200px;
    animation: mtrPolyIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mtr-poly-away {
    transform-origin: 200px 200px;
    animation: mtrPolyIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    opacity: 0;
}

/* Mini stat grid */
.mtr-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.mtr-stat-row {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
}

.mtr-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
}

.mtr-mini-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mtr-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mtr-mini-bar-wrap {
    flex: 1;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.mtr-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    width: 0%;
    transition: width 1s ease;
}

.mtr-mini-val {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 28px;
    text-align: right;
}

/* Verdict */
.mtr-verdict {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mtr-verdict-text {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.5;
}

.mtr-verdict-text strong { color: white; font-weight: 800; }

.mtr-verdict-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    background: #f97316;
    letter-spacing: 0.5px;
}


/* =========================================
   SECOND HALF GOAL PROBABILITY
   (exact mirror of First Half — shg- prefix)
========================================= */

.shg-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 16px;
    margin-top: 0;
}

.shg-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}

.shg-tab {
    padding: 4px 18px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}

.shg-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.shg-gauge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
}

.shg-gauge {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.shg-svg { width: 100%; height: 100%; }

.shg-gauge-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shg-gauge-pct {
    font-size: 22px;
    font-weight: 900;
    color: #f97316;
    line-height: 1;
    transition: color 0.3s;
}

.shg-gauge-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.shg-gauge-meta { text-align: left; max-width: 180px; }

.shg-gauge-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.shg-gauge-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

.shg-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.shg-divider-line {
    width: 1px;
    background: #e5e7eb;
    align-self: stretch;
    margin: 4px 0;
}

.shg-team-block {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
}

.shg-team-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.shg-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.shg-team-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
}

.shg-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.shg-bar-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    width: 30px;
    flex-shrink: 0;
}

.shg-bar-wrap {
    flex: 1;
    height: 7px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.shg-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.9s ease;
}

.shg-over  { background: linear-gradient(90deg, #f97316, #fb923c); }
.shg-under { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }

.shg-bar-val {
    font-size: 11px;
    font-weight: 800;
    min-width: 32px;
    text-align: right;
}

.shg-games-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    margin-top: 5px;
}

.shg-insight {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    text-align: center;
    margin-bottom: 12px;
    min-height: 28px;
}

.shg-verdict {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shg-verdict-text {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.5;
}

.shg-verdict-text strong { color: white; font-weight: 800; }

.shg-verdict-badge {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
}

.shg-badge-over  { background: #f97316; }
.shg-badge-under { background: #64748b; }


/* =========================================
   TRENDS
========================================= */

.trends-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 0;
}

.trends-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    padding: 14px;
    position: relative;
}

/* Header */
.trends-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.trends-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.trends-flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.trends-team-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Controls row */
.trends-controls {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

/* Dropdown */
.trends-dropdown-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    min-width: 160px;
    width: 100%;
}

.trends-dropdown-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trends-dropdown {
    position: relative;
    width: 100%;
}

.trends-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: var(--bg-primary);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.trends-dropdown-btn:hover {
    border-color: #94a3b8;
}

.trends-dropdown-val {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trends-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.trends-dropdown[data-open="true"] .trends-chevron {
    transform: rotate(180deg);
}

.trends-dropdown[data-open="true"] .trends-dropdown-btn {
    border-color: var(--text-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dropdown menu */
.trends-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid #0f172a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.trends-dropdown[data-open="true"] .trends-dropdown-menu {
    display: block;
}

/* Options — now flex row with pct badge on the right */
.trends-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f8fafc;
}

.trends-option:last-child {
    border-bottom: none;
}

.trends-option:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.trends-option.active {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.trends-option.active .trends-opt-pct {
    color: #94a3b8 !important;
}

/* Pct badge inside dropdown option */
.trends-opt-pct {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* Result area */
.trends-result {
    min-height: 60px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.trends-loading {
    font-size: 11px;
    color: #94a3b8;
    padding: 12px 0;
    text-align: center;
}

.trends-empty {
    font-size: 13px;
    color: #94a3b8;
    padding: 20px 0;
    text-align: center;
    font-style: italic;
    font-weight: 600;
}

/* Single trend row — sentence left, metric inline below */
.trends-trend-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

/* Top line: logo + sentence */
.trends-trend-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.trends-trend-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
}

.trends-trend-sentence {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    line-height: 1.6;
    flex: 1;
}

.trends-trend-sentence strong {
    font-weight: 800;
    color: var(--text-primary);
}

.trends-highlight {
    font-weight: 900;
    color: #c0152a;
    font-size: 13px;
}

/* Bottom line: bar + fraction + % + league badge — all inline */
.trends-trend-side {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 26px; /* aligns under sentence text, after logo width */
}

.trends-mini-bar-wrap {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
    max-width: 80px;
}

.trends-mini-bar-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact metric chips */
.trends-metric-val {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.trends-metric-pct {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.trends-metric-sub {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.trends-league-badge {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

/* Dropdown league section header */
.trends-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: 0;
}

/* Thin line accent before the label text */
.trends-group-label::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 10px;
    background: #cbd5e1;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Add a subtle top separator for every section except the first */
.trends-group-label:not(:first-child) {
    border-top: 1px solid #e2e8f0;
    margin-top: 2px;
}

/* =============================================
   MATCH STATISTICS BLOCK
============================================== */

.ms-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* TIME TABS */
.ms-time-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.ms-time-tab {
    flex: 1;
    padding: 11px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.ms-time-tab.active {
    color: #1a2a4a;
    border-bottom-color: #e11d48;
    background: var(--bg-primary);
}

/* CATEGORY TABS */
.ms-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: var(--bg-primary);
    overflow-x: auto;
    scrollbar-width: none;
}

.ms-cat-tabs::-webkit-scrollbar { display: none; }

.ms-cat-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.ms-cat-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* TEAMS HEADER */
.ms-teams-header {
    display: flex;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
}

.ms-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-team-away {
    justify-content: flex-end;
}

.ms-team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.ms-team-name {
    font-size: 13px;
    font-weight: 800;
    color: #1a2a4a;
}

.ms-score-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.ms-score {
    font-size: 22px;
    font-weight: 900;
    color: #1a2a4a;
    line-height: 1;
}

.ms-score-ht {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

/* STATS BODY */
.ms-stats-body {
    padding: 8px 0 12px;
}

.ms-loading {
    text-align: center;
    padding: 30px;
    color: #94a3b8;
    font-size: 13px;
}

/* SECTION HEADER (e.g. "SHOTS", "PASSES") */
.ms-section-header {
    background: #f8fafc;
    padding: 7px 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
    margin: 8px 0 4px;
}

/* STAT ROW */
.ms-stat-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 7px 16px;
    gap: 10px;
}

.ms-stat-row:hover {
    background: #f8fafc;
}

/* VALUES */
.ms-val-home {
    font-size: 13px;
    font-weight: 800;
    color: #e11d48; /* Home Red */
    text-align: left;
}

.ms-val-away {
    font-size: 13px;
    font-weight: 800;
    color: #1a2a4a; /* Away Dark Blue */
    text-align: right;
}

.ms-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
}

/* BAR ROW */
.ms-bar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 0 16px 8px;
}

.ms-bar-home-wrap,
.ms-bar-away-wrap {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.ms-bar-home-wrap {
    display: flex;
    justify-content: flex-end;
}

.ms-bar-home-fill {
    height: 100%;
    background: #e11d48;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.ms-bar-away-fill {
    height: 100%;
    background: #1a2a4a;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* POSSESSION SPECIAL ROW */
.ms-possession-row {
    padding: 10px 16px 6px;
}

.ms-possession-bar {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-top: 6px;
}

.ms-poss-home {
    background: #e11d48;
    transition: width 0.6s ease;
}

.ms-poss-away {
    background: #1a2a4a;
    transition: width 0.6s ease;
}

.ms-poss-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.ms-poss-val {
    font-size: 12px;
    font-weight: 800;
    color: #1a2a4a;
}

/* TOP STATS MINI ICONS ROW */
.ms-mini-icons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 4px;
}

.ms-mini-icons-home,
.ms-mini-icons-away {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}

.ms-mini-icon {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ms-icon-corners { color: #3b82f6; }
.ms-icon-yellow  { color: #f59e0b; }
.ms-icon-red     { color: #e11d48; }
.ms-icon-subs    { color: #16a34a; }

/* =============================================
   SUMMARY TAB
============================================== */

.ms-summary-wrap { padding-bottom: 8px; }

.ms-half-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9;
    padding: 8px 16px;
    margin: 6px 0 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
    border-radius: 0;
}

.ms-half-score {
    font-size: 11px;
    font-weight: 800;
    color: #1a2a4a;
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
}

.ms-event-empty {
    padding: 10px 16px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* ── Event row — base ───────────────────────────────────── */
.ms-event-row {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
    font-size: 12px;
    min-height: 36px;
}

.ms-event-row:hover { background: #f8fafc; }

/* Home: minute | icon | info */
.ms-event-row.home {
    flex-direction: row;
}

/* Away: info | icon | minute (reversed) */
.ms-event-row.away {
    flex-direction: row-reverse;
}

/* ── Minute ─────────────────────────────────────────────── */
.ms-event-minute {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    min-width: 28px;
    flex-shrink: 0;
    text-align: center;
}

/* ── Icon circle ─────────────────────────────────────────── */
.ms-event-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



/* ── Info block ──────────────────────────────────────────── */
.ms-event-info {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

/* Away reverses the info block too */
.ms-event-row.away .ms-event-info {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.ms-event-player {
    font-weight: 700;
    color: #1a2a4a;
    font-size: 12px;
    white-space: nowrap;
}

/* Score badge next to player name on goals */
.ms-event-score {
    font-size: 11px;
    font-weight: 800;
    color: #1a2a4a;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ms-event-assist {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    white-space: nowrap;
}

/* Yellow card square badge */
.ms-event-yellow-card {
    width: 13px;
    height: 17px;
    background: #f59e0b;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

/* Red card square badge */
.ms-event-red-card {
    width: 13px;
    height: 17px;
    background: #e11d48;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

/* =============================================
   LINEUPS TAB
============================================== */

.ms-lineups-wrap { padding: 0 0 12px; }

.ms-formation-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.ms-formation-badge {
    font-size: 13px;
    font-weight: 800;
    color: #1a2a4a;
}

.ms-formation-badge.away { text-align: right; }

.ms-formation-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
    text-align: center;
}

/* =============================================
   PITCH
============================================== */

.msp-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 105 / 68;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.04) 0px,
            rgba(0,0,0,0.04) 9.52%,
            transparent      9.52%,
            transparent      19.04%
        ),
        linear-gradient(180deg, #2d7d3a 0%, #2d7d3a 100%);
    overflow: visible;
}

.msp-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}

.msp-players-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.msp-player {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: auto;
    z-index: 2;
}

.msp-photo-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    overflow: visible;
}

.msp-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.75);
    background: #1a2a4a;
    display: block;
}

.msp-photo-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a2a4a;
    border: 2px solid rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Rating — centered on bottom edge of avatar (SofaScore-style) */
.msp-rating {
    position: absolute;
    bottom: -4px;
    left: 50%;
    top: auto;
    right: auto;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.3;
    min-width: 22px;
    text-align: center;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Card — top-left of avatar */
.msp-card-badge {
    position: absolute;
    top: -2px;
    left: -3px;
    right: auto;
    width: 6px;
    height: 9px;
    border-radius: 1.5px;
    z-index: 4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.msp-card-yellow { background: #facc15; }
.msp-card-red    { background: #e11d48; }

/* Goal — right edge of avatar */
.msp-goal-wrap {
    position: absolute;
    top: 50%;
    right: -7px;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(15, 23, 42, 0.88);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: pointer;
    color: #fff;
}

.msp-goal-icon,
.msp-goal-wrap svg {
    color: #fff;
    fill: #fff;
}

.msp-goal-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e11d48;
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 5;
}

/* ── Goal tooltip ────────────────────────────────────────── */
.msp-goal-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);          /* below the badge */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 20, 30, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 8px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.8;
}

/* Arrow pointing UP toward the badge */
.msp-goal-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;                   /* arrow on top of tooltip */
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: rgba(15, 20, 30, 0.92);
}

.msp-goal-wrap:hover .msp-goal-tooltip {
    display: block;
}


/* Substitution — left edge of avatar */
.msp-sub-icon-wrap {
    position: absolute;
    top: 50%;
    left: -7px;
    bottom: auto;
    right: auto;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(15, 23, 42, 0.88);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: pointer;
}

/* ── Tooltip — below the name label, arrow points UP to icon ── */
.msp-sub-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);        /* below the entire .msp-player block */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 20, 30, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 999;                  /* always above everything */
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Arrow points UP toward the sub-icon badge */
.msp-sub-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;                  /* arrow sits on top of tooltip bubble */
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(15, 20, 30, 0.92);
}




.msp-name {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    max-width: 76px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    background: none;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

.msp-num {
    flex-shrink: 0;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.msp-name-text {
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ── Mobile shared pitch + grid rows (hidden on desktop) ─── */
.msp-mobile-lineup {
    display: none;
}

.msp-pitch--mobile-shared {
    position: relative;
    aspect-ratio: 68 / 130;
    display: flex;
    flex-direction: column;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0px,
            rgba(0,0,0,0.04) 9.52%,
            transparent      9.52%,
            transparent      19.04%
        ),
        linear-gradient(90deg, #2d7d3a 0%, #2d7d3a 100%);
    overflow: visible;
}

.msp-pitch--mobile-shared .msp-svg--team {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.msp-dual-grid-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.msp-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 3%;
}

.msp-half--home {
    justify-content: flex-start;
    padding-top: 3%;
    padding-bottom: 1%;
}

.msp-half--away {
    justify-content: flex-end;
    padding-top: 1%;
    padding-bottom: 3%;
}

.msp-grid-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    width: 100%;
}

.msp-grid-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: 6px 4px;
    width: 100%;
}

.msp-grid-row .msp-player {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 72px;
}

/* ── Rating color scale ──────────────────────────────────── */
.msp-rc-red    { background: #e8001e; color: #fff; }
.msp-rc-orange { background: #f97316; color: #fff; }
.msp-rc-yellow { background: #eab308; color: #fff; }
.msp-rc-green  { background: #16a34a; color: #fff; }
.msp-rc-teal   { background: #06b6d4; color: #fff; }
.msp-rc-blue   { background: #3b47d4; color: #fff; }
.msp-rc-gray   { background: #64748b; color: #fff; }

.ms-rating-green  { background: #16a34a; color: #fff; }
.ms-rating-orange { background: #f97316; color: #fff; }
.ms-rating-red    { background: #e8001e; color: #fff; }
.ms-rating-gray   { background: #64748b; color: #fff; }

/* ── Section headers (SUBSTITUTIONS / SUBSTITUTES / COACHES) ── */
.ms-sub-section-header {
    background: #f8fafc;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 8px;
}

/* ── Bench / Substitutes list ────────────────────────────── */
.ms-bench-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e5e7eb;
}

.ms-bench-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}

.ms-bench-player.away {
    flex-direction: row-reverse;
    text-align: right;
}

.ms-bench-number {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    min-width: 20px;
    text-align: center;
}

.ms-bench-name {
    font-weight: 600;
    color: #1a2a4a;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-bench-sub-icon { color: #16a34a; font-size: 12px; }

/* ── Coaches row ─────────────────────────────────────────── */
.ms-coaches-header {
    background: #f8fafc;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.ms-coaches-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ms-coach-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.ms-coach-block.away { flex-direction: row-reverse; text-align: right; }

.ms-coach-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    flex-shrink: 0;
}

.ms-coach-photo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #64748b;
    flex-shrink: 0;
}

.ms-coach-name  { font-size: 12px; font-weight: 700; color: #1a2a4a; }
.ms-coach-label { font-size: 10px; color: #94a3b8; }

/* =============================================
   SUBSTITUTIONS (v3 — clean, reference-matched)
============================================== */

.ms-sub3-grid {
    display: flex;
    flex-direction: column;
}

.ms-sub3-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ms-sub3-row:last-child { border-bottom: none; }

.ms-sub3-divider { background: rgba(0,0,0,0.08); }

.ms-sub3-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.ms-sub3-cell.away { flex-direction: row-reverse; }

/* Photo */
.ms-sub3-photo-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.ms-sub3-photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.ms-sub3-photo-wrap:hover .ms-sub3-photo { opacity: 0.75; }

.ms-sub3-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #94a3b8;
}

/* Info */
.ms-sub3-info       { flex: 1; min-width: 0; }

.ms-sub3-name {
    font-size: 12px;
    font-weight: 500;
    color: #1a2a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.ms-sub3-cell.away .ms-sub3-info { text-align: right; }

.ms-sub3-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ms-sub3-cell.away .ms-sub3-detail { flex-direction: row-reverse; }

.ms-sub3-arrow  { color: #22c55e; font-size: 10px; flex-shrink: 0; }
.ms-sub3-min    { font-weight: 500; color: #64748b; flex-shrink: 0; }
.ms-sub3-out    { 
    color: #94a3b8; 
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Rating badge */
.ms-sub3-rating {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    letter-spacing: 0.2px;
}
.ms-sub3-rating:hover { opacity: 0.8; }

/* =============================================
   PLAYER STAT POPUP
============================================== */

.msp-clickable { cursor: pointer; }
.msp-clickable:hover .msp-photo { box-shadow: 0 0 0 2px #fff; }

.player-stat-popup {
    width: 240px;
    max-height: 380px;              /* ← reduced from 520px, feels tighter */
    background: #1e2330;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;               /* clips the rounded corners */
    display: flex;
    flex-direction: column;
    animation: pspFadeIn 0.15s ease;
}

/* Centered over the lineup pitch (mobile + desktop) */
.player-stat-popup--pitch-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    width: min(240px, calc(100% - 20px));
    max-height: min(380px, calc(100% - 24px));
    transform: translate(-50%, -50%);
    animation: pspFadeInCenter 0.15s ease;
}

@keyframes pspFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pspFadeInCenter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.psp-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 380px;              /* ← matches parent */
    overflow: hidden;
}

.psp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;                 /* ← header never shrinks */
}

.psp-photo {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.psp-photo-fallback {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.psp-header-info { flex: 1; min-width: 0; }

.psp-player-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psp-meta       { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.psp-captain    { color: #f59e0b; font-weight: 700; }

.psp-rating {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
}

/* ── Scrollable body ─────────────────────────────────────── */
.psp-body {
    overflow-y: auto;               /* ← scrolls when content overflows */
    overflow-x: hidden;
    padding: 4px 0 12px;
    flex: 1;
    min-height: 0;                  /* ← critical: allows flex child to shrink */
}

/* Custom slim scrollbar */
.psp-body::-webkit-scrollbar {
    width: 3px;
}
.psp-body::-webkit-scrollbar-track {
    background: transparent;
}
.psp-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.psp-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}

.psp-section-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #475569;
    text-transform: uppercase;
    padding: 6px 12px 3px;
}

.psp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
}
.psp-stat-row:hover { background: rgba(255,255,255,0.04); }

.psp-stat-label { font-size: 11px; color: #94a3b8; }
.psp-stat-val   { font-size: 12px; font-weight: 600; color: #e2e8f0; }

.psp-empty {
    padding: 16px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}



/* =============================================
   SUMMARY — EVENT ROW CLICK POPUP
============================================== */

.ms-ev-clickable {
    cursor: pointer;
    transition: background 0.12s;
}
.ms-ev-clickable:hover {
    background: #f0f4f8 !important;
}

.ms-ev-popup {
    width: 320px;
    background: var(--bg-primary);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
    animation: msEvPopupIn 0.15s ease;
}

@keyframes msEvPopupIn {
    from { opacity: 0; transform: translateY(-5px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.ms-ev-popup-inner {
    display: flex;
    flex-direction: column;
}

.ms-ev-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.ms-ev-popup-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a2a4a;
    letter-spacing: -0.2px;
}

.ms-ev-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: 0.6px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background 0.12s;
}
.ms-ev-popup-close:hover { background: #eff6ff; }

.ms-ev-popup-body {
    padding: 4px 0 6px;
}

.ms-ev-popup-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s;
}
.ms-ev-popup-player:last-child { border-bottom: none; }
.ms-ev-popup-player:hover { background: #f8fafc; }

.ms-ev-popup-photo-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e5e7eb;
}

.ms-ev-popup-photo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ms-ev-popup-fallback {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e5e7eb;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #94a3b8;
}

.ms-ev-popup-info {
    flex: 1;
    min-width: 0;
}

.ms-ev-popup-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a2a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ms-ev-popup-role {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
}


/* =============================================
   TEAM AVERAGE RATING BADGE (teams header)
============================================== */

/* Wrapper sitting beside team name */
.ms-team-avg-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* Coloured square badge (mimics the Sofascore square) */
.ms-avg-rating-badge {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Rating number — moderate weight, not bold */
.ms-avg-rating-val {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ── Badge color scale (matches existing msp-rc-* logic) ── */
.ms-avg-rc-blue   { background: #3b47d4; }
.ms-avg-rc-teal   { background: #06b6d4; }
.ms-avg-rc-green  { background: #16a34a; }
.ms-avg-rc-yellow { background: #eab308; }
.ms-avg-rc-orange { background: #f97316; }
.ms-avg-rc-red    { background: #e8001e; }


/* =============================================
   PLAYER STATS TAB
============================================== */

.pst-container {
    padding-bottom: 8px;
}

/* ── Filters bar ─────────────────────────────────────────── */
.pst-filters {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

/* Team filter row */
.pst-team-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.pst-team-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #64748b;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pst-team-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.pst-team-btn:not(.active):hover {
    background: #e5e7eb;
    color: #1a2a4a;
}

.pst-filter-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Col-set tabs row */
.pst-col-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.pst-col-tabs::-webkit-scrollbar { display: none; }

.pst-col-tab {
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #94a3b8;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.pst-col-tab.active {
    color: #1a2a4a;
    border-bottom-color: #e11d48;
}

.pst-col-tab:not(.active):hover {
    color: #475569;
}

/* ── Scrollable table wrapper ─────────────────────────────── */
.pst-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}
.pst-table-wrap::-webkit-scrollbar { height: 4px; }
.pst-table-wrap::-webkit-scrollbar-track { background: transparent; }
.pst-table-wrap::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* ── Table ────────────────────────────────────────────────── */
.pst-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

/* Header row */
.pst-table thead tr {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.pst-player-header {
    text-align: left;
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #94a3b8;
    white-space: nowrap;
    min-width: 160px;
    position: sticky;
    left: 0;
    background: #f8fafc;
    z-index: 2;
}

.pst-col-header {
    text-align: center;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #94a3b8;
    white-space: nowrap;
    min-width: 72px;
}

/* ── Player rows ──────────────────────────────────────────── */
.pst-player-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}

.pst-player-row:last-child { border-bottom: none; }
.pst-player-row:hover { background: #f8fafc; }

/* Sticky player cell */
.pst-player-cell {
    position: sticky;
    left: 0;
    background: var(--bg-primary);
    z-index: 1;
    padding: 0;
    min-width: 160px;
}
.pst-player-row:hover .pst-player-cell {
    background: #f8fafc;
}

.pst-player-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}

/* Photo */
.pst-photo-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.pst-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e5e7eb;
    background: #f1f5f9;
    display: block;
}

.pst-photo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.pst-team-logo {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Player name & meta */
.pst-player-info { flex: 1; min-width: 0; }

.pst-player-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a2a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pst-player-meta {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 1px;
    white-space: nowrap;
}

/* Captain badge */
.pst-captain {
    font-size: 10px;
    color: #f59e0b;
    font-weight: 800;
}

/* Sub badge */
.pst-sub-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Stat cells ───────────────────────────────────────────── */
.pst-stat-cell {
    text-align: center;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #1a2a4a;
    white-space: nowrap;
    vertical-align: middle;
}

.pst-dash {
    color: #cbd5e1;
    font-size: 12px;
}

/* Highlighted value (leader / notable) */
.pst-highlight {
    font-weight: 700;
    color: #1a2a4a;
}

/* Pass accuracy % sub-text */
.pst-pct {
    color: #94a3b8;
    font-size: 10px;
}

/* Rating badge in table cell */
.pst-rating-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1px;
    min-width: 34px;
    text-align: center;
}

/* Card badges in discipline tab */
.pst-yellow-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 21px;
    background: #f59e0b;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.pst-red-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 21px;
    background: #e11d48;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

/* PERIOD NOTICE (for 1st/2nd half stats) */
.ms-period-notice {
    background: #fff9c4;
    border: 1px solid #fbc02d;
    color: #455a64;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Card badges inside sub cells ──────────────────────────────── */
.ms-sub-card {
    display: inline-block;
    width: 10px;
    height: 14px;
    border-radius: 1.5px;
    vertical-align: middle;
    margin-left: 3px;
}
.ms-sub-card--yellow { background: #f59e0b; }
.ms-sub-card--red    { background: #e11d48; }

/* ── Mobile tabbed substitutions (hidden on desktop) ─────────── */
.ms-msub-wrap { display: none; }

/* ── Mobile substitution tab styles ──────────────────────────── */
.ms-msub-tabs {
    display: flex;
    justify-content: center;
    padding: 14px 16px 8px;
}

.ms-msub-tab-track {
    display: flex;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 28px;
    padding: 4px;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.ms-msub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 28px;
    border-radius: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.25s;
}

.ms-msub-tab.active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ms-msub-tab-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* ── Coach card ──────────────────────────────────────────────── */
.ms-msub-coach {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ms-msub-coach-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #1e293b;
}

.ms-msub-coach-photo {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ms-msub-coach-fb {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #94a3b8;
}

.ms-msub-coach-name {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
}

.ms-msub-coach-label {
    font-size: 11px;
    font-weight: 500;
    color: #22c55e;
    margin-top: 1px;
}

/* ── Section title ───────────────────────────────────────────── */
.ms-msub-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    padding: 14px 16px 8px;
}

/* ── Substitution list rows ──────────────────────────────────── */
.ms-msub-list {
    display: flex;
    flex-direction: column;
}

.ms-msub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.ms-msub-row:last-child {
    border-bottom: none;
}

.ms-msub-photo-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #1e293b;
}

.ms-msub-photo {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ms-msub-photo-fb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #94a3b8;
}

.ms-msub-info {
    flex: 1;
    min-width: 0;
}

.ms-msub-name {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-msub-card {
    display: inline-block;
    width: 10px;
    height: 14px;
    border-radius: 1.5px;
    vertical-align: middle;
    margin-left: 3px;
}
.ms-msub-card--yellow { background: #f59e0b; }
.ms-msub-card--red    { background: #e11d48; }

.ms-msub-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 2px;
    color: #94a3b8;
}

.ms-msub-arrow {
    color: #22c55e;
    font-size: 10px;
}

.ms-msub-min {
    font-weight: 600;
    color: #94a3b8;
}

.ms-msub-outname {
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Rating badge (same palette as pitch) ────────────────────── */
.ms-msub-rating {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    min-width: 34px;
    text-align: center;
}

.ms-msub-empty {
    padding: 20px 16px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 768px) {
    /* Hide desktop substitution grid on mobile */
    .ms-sub-desktop { display: none !important; }
    /* Show mobile tabbed substitution layout */
    .ms-msub-wrap { display: block !important; }

    .fhg-card,
    .shg-card {
        padding: 14px 12px;
    }

    .fhg-tabs,
    .shg-tabs {
        flex-wrap: wrap;
    }

    .fhg-gauge-row,
    .shg-gauge-row {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .fhg-gauge-meta,
    .shg-gauge-meta {
        max-width: 100%;
        text-align: center;
    }

    .fhg-teams,
    .shg-teams {
        display: block;
    }

    .fhg-team-block,
    .shg-team-block {
        margin-bottom: 12px;
    }

    .fhg-divider-line,
    .shg-divider-line {
        display: none;
    }

    .fhg-verdict,
    .shg-verdict {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .fhg-verdict-badge,
    .shg-verdict-badge {
        align-self: center;
        white-space: normal;
    }
}

@media (min-width: 769px) {
    /* Hide mobile tabbed substitution layout on desktop */
    .ms-msub-wrap { display: none !important; }
    .ms-sub-desktop { display: block; }
}

/* ── Lineup visibility hardening ─────────────────────────────── */
.content.stats-content .msp-name-text,
.msp-pitch .msp-name-text,
.msp-pitch--mobile-shared .msp-name-text {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.55);
}

.content.stats-content .msp-num,
.msp-pitch .msp-num,
.msp-pitch--mobile-shared .msp-num {
    color: rgba(219, 234, 254, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.content.stats-content .msp-goal-wrap,
.content.stats-content .msp-goal-icon,
.content.stats-content .msp-goal-wrap svg {
    color: #fff !important;
    fill: #fff !important;
}

.content.stats-content .ms-msub-wrap {
    background: #fff;
    color: #0f172a;
}

.content.stats-content .ms-msub-coach,
.content.stats-content .ms-msub-row {
    background: #fff;
    border-color: #e5e7eb;
}

.content.stats-content .ms-msub-section-title {
    color: #334155;
    background: #fff;
}

.content.stats-content .ms-msub-coach-name,
.content.stats-content .ms-msub-name {
    color: #0f172a;
}

.content.stats-content .ms-msub-detail,
.content.stats-content .ms-msub-min {
    color: #64748b;
}

.content.stats-content .ms-msub-outname {
    color: #475569;
}

.content.stats-content .ms-formation-badge,
.content.stats-content .ms-formation-label {
    color: #e2e8f0;
}

.dark-mode .content.stats-content .ms-formation-badge,
.dark-mode .content.stats-content .ms-formation-label,
body.dark-mode .content.stats-content .ms-formation-badge,
body.dark-mode .content.stats-content .ms-formation-label {
    color: #f8fafc !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.dark-mode .content.stats-content .ms-avg-rating-val,
body.dark-mode .content.stats-content .ms-avg-rating-val {
    color: #e2e8f0 !important;
}

.dark-mode .content.stats-content .ms-sub3-rating,
body.dark-mode .content.stats-content .ms-sub3-rating {
    color: #fff !important;
}

.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-red,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-red { background: #e8001e !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-orange,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-orange { background: #f97316 !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-yellow,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-yellow { background: #eab308 !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-green,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-green { background: #16a34a !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-teal,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-teal { background: #06b6d4 !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-blue,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-blue { background: #3b47d4 !important; }
.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-gray,
body.dark-mode .content.stats-content .ms-sub3-rating.msp-rc-gray { background: #64748b !important; }

.dark-mode .content.stats-content .ms-msub-wrap,
.dark-mode .content.stats-content .ms-msub-coach,
.dark-mode .content.stats-content .ms-msub-row,
body.dark-mode .content.stats-content .ms-msub-wrap,
body.dark-mode .content.stats-content .ms-msub-coach,
body.dark-mode .content.stats-content .ms-msub-row {
    background: #fff !important;
    border-color: #e5e7eb !important;
}

.dark-mode .content.stats-content .ms-msub-section-title,
body.dark-mode .content.stats-content .ms-msub-section-title {
    color: #334155 !important;
    background: #fff !important;
}

.dark-mode .content.stats-content .ms-msub-coach-name,
.dark-mode .content.stats-content .ms-msub-name,
body.dark-mode .content.stats-content .ms-msub-coach-name,
body.dark-mode .content.stats-content .ms-msub-name {
    color: #0f172a !important;
}

.dark-mode .content.stats-content .ms-msub-detail,
.dark-mode .content.stats-content .ms-msub-min,
body.dark-mode .content.stats-content .ms-msub-detail,
body.dark-mode .content.stats-content .ms-msub-min {
    color: #64748b !important;
}

.dark-mode .content.stats-content .ms-msub-outname,
body.dark-mode .content.stats-content .ms-msub-outname {
    color: #475569 !important;
}

.dark-mode .content.stats-content .ms-sub3-name,
.dark-mode .content.stats-content .ms-bench-name,
.dark-mode .content.stats-content .ms-coach-name,
body.dark-mode .content.stats-content .ms-sub3-name,
body.dark-mode .content.stats-content .ms-bench-name,
body.dark-mode .content.stats-content .ms-coach-name {
    color: #e2e8f0 !important;
}

.dark-mode .content.stats-content .ms-sub3-detail,
.dark-mode .content.stats-content .ms-sub3-out,
.dark-mode .content.stats-content .ms-bench-number,
.dark-mode .content.stats-content .ms-coach-label,
body.dark-mode .content.stats-content .ms-sub3-detail,
body.dark-mode .content.stats-content .ms-sub3-out,
body.dark-mode .content.stats-content .ms-bench-number,
body.dark-mode .content.stats-content .ms-coach-label {
    color: #94a3b8 !important;
}