/* ===========================================================
   LIVE MATCH — MATCH BANNER
===========================================================*/

.match-banner{
    position:relative;
    overflow:hidden;

    padding:var(--space-6) var(--space-5);
    margin-top:var(--space-5);

    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);

    background:
    linear-gradient(90deg, rgba(11,18,32,0.85) 20%, rgba(11,18,32,0.55) 60%, rgba(11,18,32,0.3) 100%),
    url("../images/hero/Live\ Match\ banner.webp");
    background-repeat:no-repeat;
    background-size:100% 100%, 100% 100%, 100% 100%, cover;
    background-position:center, center, center, center 40%;
}

.match-banner-top{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:flex-start;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.match-banner-top .badge-live{
    justify-self:start;
}

.match-title-block{
    text-align:center;
}

.match-title-block h2{
    font-size:var(--fs-h2);
    margin-top:0;
    margin-bottom:2px;
}

.match-venue{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.watching-badge{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:6px 14px;
    border-radius:var(--radius-pill);

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);

    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:yellow;
}

/* Scoreboard row (reuses .scoreboard-* from cards.css, extended for RR + wider layout) */

.match-banner .scoreboard-row{
    justify-content:space-between;
    margin:var(--space-5) 0 var(--space-4);
    margin-left: 50px;
}

.match-banner .crest-badge-sm{
    width:64px;
    height:64px;
    font-size:var(--fs-small);
}

.match-banner .scoreboard-runs{
    font-size:3.25rem;
}

.match-banner .scoreboard-overs{
    font-size:var(--fs-small);
}

.scoreboard-rr{
    display:block;
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:red;
    margin-top:2px;
}

.match-banner .scoreboard-team-name{
    font-size:1rem;
    color:var(--color-text);
    margin-top:4px;
    margin-right: 210px;
    
}

.match-status-line{
    text-align:center;
    color:greenyellow;
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

/* ===========================================================
   TAB NAVIGATION
===========================================================*/

.match-tabs{
    display:flex;
    align-items:center;
    gap:var(--space-2);

    border-bottom:1px solid var(--color-border);
    margin-bottom:var(--space-5);
    overflow-x:auto;
}

.match-tab{
    display:flex;
    align-items:center;
    gap:6px;

    padding:var(--space-3) var(--space-4);

    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    white-space:nowrap;

    border-bottom:2px solid transparent;
    transition:all var(--transition-fast);
}

.match-tab:hover{
    color:var(--color-text);
}

.match-tab.active{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

/* ===========================================================
   MATCH PAGE LAYOUT (main content + sidebar)
===========================================================*/

.match-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:var(--space-5);
    align-items:start;
}

.match-main{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    min-width:0;
}

.match-sidebar{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    min-width:0;
    margin-top:var(--space-5);
}

/* ===========================================================
   INNINGS / BOWLING / PARTNERSHIP TABLES
===========================================================*/

.innings-header{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
}

.innings-header h3{
    font-size:var(--fs-h3);
}

.dismissal-text{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    display:block;
    margin-top:2px;
}

.innings-total-row td{
    font-weight:var(--fw-bold);
    border-top:1px solid var(--color-border);
    border-bottom:none;
}

.yet-to-bat{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.yet-to-bat span{
    color:var(--color-text);
    font-weight:var(--fw-medium);
}

.player-name-cell{
    display:flex;
    align-items:center;
    gap:10px;
}

.avatar-mini{
    width:28px;
    height:28px;
    border-radius:50%;
    flex-shrink:0;

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
    font-weight:var(--fw-bold);
    color:var(--color-purple);
}

.match-status-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-4);
}

.match-status-bar .status-stats{
    display:flex;
    gap:var(--space-6);
}

.status-stat-label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.status-stat-value{
    font-weight:var(--fw-bold);
}

.commentary-feed{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    max-height:340px;
    overflow-y:auto;
}

.commentary-item{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
}

.ball-indicator{
    width:26px;
    height:26px;
    border-radius:50%;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:var(--fs-tiny);
    font-weight:var(--fw-bold);
    color:#fff;
}

.ball-indicator.ball-wicket{ background:var(--color-danger); }
.ball-indicator.ball-four{ background:var(--color-success); }
.ball-indicator.ball-six{ background:var(--color-success); }
.ball-indicator.ball-dot{ background:var(--color-info); }
.ball-indicator.ball-run{ background:var(--color-success); }

.commentary-over{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    width:32px;
    flex-shrink:0;
    padding-top:4px;
}

.commentary-text{
    font-size:var(--fs-small);
}

.commentary-score{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    display:block;
    margin-top:2px;
}

.over-progress-row{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-wrap:wrap;
}

.overs-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:var(--space-2);
}

.over-total-chip{
    display:flex;
    align-items:center;
    justify-content:center;

    height:32px;
    border-radius:var(--radius-sm);

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);

    font-size:var(--fs-small);
    font-weight:var(--fw-semibold);
}

.over-total-chip.highlight{
    background:rgba(34,197,94,0.15);
    border-color:var(--color-success);
    color:var(--color-success);
}

.match-info-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.match-info-row{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:var(--space-3);
    font-size:var(--fs-small);
}

.match-info-label{
    color:var(--color-text-muted);
}

.match-info-value{
    color:var(--color-text);
    font-weight:var(--fw-medium);
}

/* ===========================================================
   RESPONSIVE — MOBILE / TABLET
   Everything below here only fires under a max-width media query,
   so the laptop/desktop layout above is completely untouched.
===========================================================*/

@media (max-width: 960px){
    /* The 2-column match-layout (scorecard + sidebar) never stacked —
       there were no responsive rules for it in this file at all, so
       the sidebar squeezed in beside the main content and forced the
       whole page to scroll horizontally. */
    .match-layout{
        grid-template-columns:minmax(0, 1fr);
    }
    .match-main,
    .match-sidebar{
        min-width:0;
    }
    .match-sidebar{
        margin-top:0;
    }
}

@media (max-width: 960px){
    /* Scoreboard row: reset the desktop-only spacing hacks
       (margin-left:50px on the row, margin-right:210px on the team
       name) which would otherwise push everything off-screen on a
       phone — then lay the row out as a compact 3-column grid so the
       crest + score + "VS" + crest + score all stay on one line. */
    .match-banner .scoreboard-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
        justify-content:normal;
        align-items:center;
        gap:6px;
        margin:var(--space-4) 0;
        margin-left:0;
    }

    .scoreboard-team{
        min-width:0;
    }

    .scoreboard-team-main{
        display:flex;
        align-items:center;
        gap:6px;
        min-width:0;
        overflow:hidden;
    }

    .scoreboard-team-right .scoreboard-team-main{
        justify-content:flex-end;
    }

    .match-banner .crest-badge-sm{
        width:32px;
        height:32px;
        font-size:10px;
        flex-shrink:0;
    }

    .match-banner .scoreboard-team-name{
        font-size:9.5px;
        margin-top:2px;
        margin-right:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .scoreboard-score{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        min-width:0;
        overflow:hidden;
    }

    .scoreboard-team-right .scoreboard-score{
        align-items:flex-end;
    }

    .match-banner .scoreboard-runs{
        font-size:1rem;
        white-space:nowrap;
    }

    .match-banner .scoreboard-overs{
        font-size:8.5px;
        white-space:nowrap;
    }

    .scoreboard-rr{
        font-size:8.5px;
    }

    .scoreboard-vs{
        flex-shrink:0;
        width:22px;
        height:22px;
        font-size:9px;
        margin:0 4px;
    }

    /* Match banner header row (LIVE badge / title / watching count)
       stacks instead of the 3-column grid squeezing everything tight */
    .match-banner-top{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
        gap:var(--space-2);
    }

    .match-banner-top .badge-live{
        justify-self:center;
    }

    .watching-badge{
        justify-self:center;
    }

    .match-title-block h2{
        font-size:1.15rem;
    }

    .match-info-row{
        grid-template-columns:80px 1fr;
        font-size:var(--fs-tiny);
    }
}