/*==========================================================
  RTSC V14 MATCH CENTRE
==========================================================*/

:root{

    --mc-radius:22px;
    --mc-radius-lg:30px;

    --mc-gap:24px;

    --mc-border:rgba(255,255,255,.08);

    --mc-card:rgba(255,255,255,.05);

    --mc-card-hover:rgba(255,255,255,.08);

    --mc-gold:#FFC107;

    --mc-red:#ff3b30;

    --mc-green:#34C759;

    --mc-blue:#2196F3;

    --mc-text:#ffffff;

    --mc-text-soft:rgba(255,255,255,.72);

}

/*==========================================================
PAGE
==========================================================*/

#match-centre{

    min-height:100vh;

    background:

    radial-gradient(circle at top right,
    rgba(255,193,7,.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(33,150,243,.10),
    transparent 35%),

    linear-gradient(
    180deg,
    #07131f,
    #091827);

    color:var(--mc-text);

}

.match-hero{

    padding:80px 0 50px;

}

.match-hero-grid{

    display:grid;

    grid-template-columns:

    1fr
    1.3fr
    1fr;

    gap:32px;

    align-items:center;

}

/*==========================================================
TEAM PANELS
==========================================================*/

.team-panel{

    background:var(--mc-card);

    backdrop-filter:blur(16px);

    border:1px solid var(--mc-border);

    border-radius:var(--mc-radius-lg);

    padding:40px;

    text-align:center;

    transition:.35s;

}

.team-panel:hover{

    transform:translateY(-8px);

    border-color:var(--mc-gold);

    box-shadow:

    0 25px 50px rgba(0,0,0,.35);

}

.team-panel img{

    width:120px;

    height:120px;

    object-fit:contain;

    margin-bottom:20px;

}

.team-panel h2{

    margin:0;

    font-size:1.6rem;

    font-weight:700;

}

.team-score{

    margin-top:25px;

    font-size:3rem;

    font-weight:900;

    color:var(--mc-gold);

}

/*==========================================================
MATCH HERO
==========================================================*/

.match-centre-panel{

    background:var(--mc-card);

    border:1px solid var(--mc-border);

    backdrop-filter:blur(18px);

    border-radius:var(--mc-radius-lg);

    padding:45px;

    text-align:center;

}

.match-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(255,59,48,.15);

    color:#ff5f5f;

    font-weight:700;

    margin-bottom:20px;

}

.match-status.live{

    animation:livePulse 1.4s infinite;

}

#competition-name{

    margin:0;

    font-size:2.3rem;

    font-weight:800;

}

#match-date,
#match-ground{

    margin-top:14px;

    color:var(--mc-text-soft);

}

#match-countdown{

    margin-top:30px;

    font-size:2rem;

    color:var(--mc-gold);

    font-weight:800;

}

/*==========================================================
BUTTONS
==========================================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

    margin-top:35px;

}

.hero-buttons .btn{

    min-width:180px;

}

/*==========================================================
LIVE SUMMARY
==========================================================*/

.live-summary{

    padding:0 0 60px;

}

.summary-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:24px;

}

.summary-card{

    background:var(--mc-card);

    border:1px solid var(--mc-border);

    backdrop-filter:blur(16px);

    border-radius:var(--mc-radius);

    padding:30px;

    text-align:center;

    transition:.3s;

}

.summary-card:hover{

    transform:translateY(-6px);

    border-color:var(--mc-gold);

}

.summary-card h3{

    margin:0;

    margin-bottom:18px;

    font-size:1rem;

    color:var(--mc-text-soft);

    font-weight:600;

}

.summary-card div{

    font-size:1.8rem;

    font-weight:800;

    color:var(--mc-gold);

}

/*==========================================================
COMMON CARD
==========================================================*/

.info-card,
.tab-panel{

    background:var(--mc-card);

    border:1px solid var(--mc-border);

    backdrop-filter:blur(16px);

    border-radius:var(--mc-radius);

    padding:28px;

    margin-bottom:30px;

}

.loading{

    text-align:center;

    padding:60px;

    color:var(--mc-text-soft);

}

/*==========================================================
ANIMATION
==========================================================*/

@keyframes livePulse{

    0%{

        box-shadow:

        0 0 0 rgba(255,59,48,.65);

    }

    50%{

        box-shadow:

        0 0 30px rgba(255,59,48,.55);

    }

    100%{

        box-shadow:

        0 0 0 rgba(255,59,48,.10);

    }

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.match-hero-grid{

grid-template-columns:1fr;

}

.summary-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.match-hero{

padding:40px 0;

}

.team-panel{

padding:28px;

}

.team-panel img{

width:90px;

height:90px;

}

.team-score{

font-size:2.2rem;

}

.match-centre-panel{

padding:30px;

}

#competition-name{

font-size:1.8rem;

}

.summary-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

}

/*==========================================================
MATCH CENTRE TABS
==========================================================*/

.match-tabs-section{

    margin-bottom:40px;

}

.match-tabs{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

    justify-content:center;

    padding:22px;

    background:var(--mc-card);

    border:1px solid var(--mc-border);

    border-radius:var(--mc-radius-lg);

    backdrop-filter:blur(16px);

}

.match-tab{

    appearance:none;

    border:none;

    cursor:pointer;

    padding:14px 24px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    color:var(--mc-text-soft);

    font-weight:700;

    font-size:.95rem;

    transition:.30s ease;

}

.match-tab:hover{

    background:rgba(255,193,7,.15);

    color:#fff;

    transform:translateY(-3px);

}

.match-tab.active{

    background:linear-gradient(
        135deg,
        #FFC107,
        #FF9800
    );

    color:#111;

    box-shadow:

    0 10px 24px rgba(255,193,7,.35);

}

/*==========================================================
TAB PANELS
==========================================================*/

.match-content{

    margin-top:35px;

}

.tab-panel{

    display:none;

    animation:tabFade .35s ease;

}

.tab-panel.active{

    display:block;

}

.tab-panel h2{

    margin:0 0 24px;

    font-size:1.6rem;

    font-weight:800;

    color:var(--mc-gold);

    display:flex;

    align-items:center;

    gap:10px;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:18px;

}

/*==========================================================
SCORECARD
==========================================================*/

.scorecard-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:18px;

    background:rgba(255,255,255,.03);

}

.scorecard-table thead{

    background:rgba(255,193,7,.12);

}

.scorecard-table th{

    padding:18px 16px;

    text-align:left;

    font-weight:700;

    color:var(--mc-gold);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.scorecard-table td{

    padding:16px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:var(--mc-text);

}

.scorecard-table tbody tr{

    transition:.25s;

}

.scorecard-table tbody tr:hover{

    background:rgba(255,255,255,.05);

}

.scorecard-player{

    display:flex;

    align-items:center;

    gap:12px;

}

.scorecard-player img{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

}

.scorecard-player-name{

    font-weight:700;

}

.scorecard-dismissal{

    color:var(--mc-text-soft);

    font-size:.85rem;

    margin-top:4px;

}

.scorecard-highlight{

    color:var(--mc-gold);

    font-weight:800;

}

.innings-summary{

    margin-top:25px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

.summary-box{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:22px;

    text-align:center;

}

.summary-box h4{

    margin:0 0 10px;

    color:var(--mc-text-soft);

    font-size:.9rem;

    font-weight:600;

}

.summary-box strong{

    display:block;

    font-size:1.8rem;

    color:var(--mc-gold);

    font-weight:900;

}

/*==========================================================
ANIMATION
==========================================================*/

@keyframes tabFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .innings-summary{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .match-tabs{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding:16px;

    }

    .match-tab{

        white-space:nowrap;

        flex:0 0 auto;

    }

    .scorecard-table{

        display:block;

        overflow-x:auto;

    }

    .innings-summary{

        grid-template-columns:1fr;

    }

}

/*==========================================================
BALL BY BALL COMMENTARY
==========================================================*/

.commentary-timeline{

    position:relative;

    margin-top:20px;

    padding-left:34px;

}

.commentary-timeline::before{

    content:"";

    position:absolute;

    left:12px;

    top:0;

    bottom:0;

    width:3px;

    background:linear-gradient(
        to bottom,
        var(--mc-gold),
        rgba(255,255,255,.08)
    );

    border-radius:999px;

}

.commentary-item{

    position:relative;

    margin-bottom:22px;

    padding:22px 24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    transition:.30s;

}

.commentary-item:hover{

    transform:translateX(6px);

    border-color:var(--mc-gold);

}

.commentary-item::before{

    content:"";

    position:absolute;

    left:-29px;

    top:28px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--mc-gold);

    border:4px solid #07131f;

}

.commentary-over{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:64px;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,193,7,.12);

    color:var(--mc-gold);

    font-weight:700;

    margin-bottom:12px;

}

.commentary-event{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;

}

.commentary-text{

    flex:1;

    line-height:1.65;

    color:var(--mc-text);

}

.commentary-badge{

    padding:6px 12px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

}

.commentary-badge.four{

    background:#2196F3;

    color:#fff;

}

.commentary-badge.six{

    background:#34C759;

    color:#fff;

}

.commentary-badge.wicket{

    background:#ff3b30;

    color:#fff;

}

.commentary-badge.dot{

    background:rgba(255,255,255,.10);

    color:#fff;

}

/*==========================================================
STATISTICS
==========================================================*/

.statistics-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

}

.statistics-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.06);

    border-radius:20px;

    padding:26px;

    transition:.30s;

}

.statistics-card:hover{

    transform:translateY(-6px);

    border-color:var(--mc-gold);

}

.statistics-card h3{

    margin:0 0 18px;

    font-size:1rem;

    color:var(--mc-text-soft);

    font-weight:600;

}

.statistics-value{

    font-size:2.2rem;

    font-weight:900;

    color:var(--mc-gold);

    margin-bottom:12px;

}

.statistics-label{

    color:var(--mc-text-soft);

    font-size:.92rem;

}

.progress-track{

    margin-top:18px;

    width:100%;

    height:8px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--mc-gold),
        #ff9800
    );

}

/*==========================================================
PARTNERSHIPS
==========================================================*/

.partnership-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

}

.partnership-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.06);

    border-radius:20px;

    padding:26px;

    transition:.30s;

}

.partnership-card:hover{

    transform:translateY(-6px);

    border-color:var(--mc-gold);

}

.partnership-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.partnership-title{

    font-size:1.1rem;

    font-weight:700;

}

.partnership-runs{

    font-size:2rem;

    font-weight:900;

    color:var(--mc-gold);

}

.partnership-players{

    display:flex;

    justify-content:space-between;

    gap:18px;

    margin-top:18px;

}

.partner{

    flex:1;

    text-align:center;

}

.partner img{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:10px;

}

.partner-name{

    font-weight:700;

    margin-bottom:6px;

}

.partner-score{

    color:var(--mc-text-soft);

    font-size:.9rem;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

    .commentary-event{

        flex-direction:column;

    }

    .statistics-grid{

        grid-template-columns:1fr;

    }

    .partnership-grid{

        grid-template-columns:1fr;

    }

    .partnership-players{

        flex-direction:column;

    }

}

/*==========================================================
WORM GRAPH
==========================================================*/

.worm-panel{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:30px;

}

#worm-graph{

    display:block;

    width:100%;

    min-height:420px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

}

.graph-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    gap:16px;

    flex-wrap:wrap;

}

.graph-legend{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.9rem;

    color:var(--mc-text-soft);

}

.legend-dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.legend-dot.team-a{

    background:#FFC107;

}

.legend-dot.team-b{

    background:#2196F3;

}

/*==========================================================
WAGON WHEEL
==========================================================*/

.wagon-panel{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:30px;

    margin-top:30px;

}

#wagon-wheel{

    display:block;

    width:100%;

    min-height:420px;

    border-radius:18px;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.05),
    rgba(255,255,255,.01));

}

.wagon-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-top:28px;

}

.wagon-box{

    text-align:center;

    background:rgba(255,255,255,.04);

    border-radius:18px;

    padding:18px;

}

.wagon-box strong{

    display:block;

    font-size:1.8rem;

    color:var(--mc-gold);

    margin-bottom:8px;

}

/*==========================================================
PLAYING XI
==========================================================*/

.lineup-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

}

.player-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:24px;

    text-align:center;

    transition:.30s;

}

.player-card:hover{

    transform:translateY(-8px);

    border-color:var(--mc-gold);

}

.player-card img{

    width:96px;

    height:96px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:16px;

}

.player-card h3{

    margin:0;

    font-size:1.1rem;

}

.player-role{

    color:var(--mc-text-soft);

    margin:10px 0;

}

.player-tags{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}

.player-tag{

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,193,7,.12);

    color:var(--mc-gold);

    font-size:.78rem;

    font-weight:700;

}

/*==========================================================
WEATHER
==========================================================*/

.weather-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:28px;

    padding:30px;

    border-radius:22px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.weather-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.weather-icon{

    width:72px;

    height:72px;

}

.weather-temp{

    font-size:3rem;

    font-weight:900;

    color:var(--mc-gold);

}

.weather-details{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:24px;

}

.weather-item{

    background:rgba(255,255,255,.04);

    border-radius:16px;

    padding:16px;

}

/*==========================================================
GROUND
==========================================================*/

.ground-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:30px;

}

.ground-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:28px;

}

.ground-card h3{

    margin-top:0;

    color:var(--mc-gold);

}

.ground-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:20px;

}

.ground-info div{

    background:rgba(255,255,255,.04);

    border-radius:14px;

    padding:16px;

}

.ground-map{

    min-height:340px;

    border-radius:18px;

    overflow:hidden;

    background:#0d1b2a;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .ground-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .wagon-summary{

        grid-template-columns:repeat(2,1fr);

    }

    .weather-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .weather-details{

        grid-template-columns:1fr;

    }

    .ground-info{

        grid-template-columns:1fr;

    }

    .lineup-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:520px){

    .wagon-summary{

        grid-template-columns:1fr;

    }

    #worm-graph,

    #wagon-wheel{

        min-height:280px;

    }

}

/*==========================================================
RELATED MATCHES
==========================================================*/

.related-matches{

    padding:70px 0;

}

.related-matches-list,
#related-matches-list{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

}

.related-match-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:.30s;

}

.related-match-card:hover{

    transform:translateY(-8px);

    border-color:var(--mc-gold);

    box-shadow:0 20px 40px rgba(0,0,0,.30);

}

.related-match-header{

    padding:18px 22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.related-match-body{

    padding:24px;

}

.related-match-footer{

    padding:20px 24px;

    border-top:1px solid rgba(255,255,255,.06);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==========================================================
SPONSORS STRIP
==========================================================*/

.match-sponsors{

    padding:70px 0;

}

#match-sponsors{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:24px;

}

.match-sponsor{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:130px;

    transition:.30s;

}

.match-sponsor:hover{

    transform:translateY(-6px);

    border-color:var(--mc-gold);

}

.match-sponsor img{

    max-width:140px;

    max-height:80px;

    object-fit:contain;

    filter:grayscale(10%);

    transition:.30s;

}

.match-sponsor:hover img{

    transform:scale(1.08);

    filter:none;

}

/*==========================================================
FOOTER
==========================================================*/

.site-footer{

    margin-top:90px;

    border-top:1px solid rgba(255,255,255,.08);

    background:#07111b;

}

.footer-content{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    padding:70px 0 40px;

}

.footer-logo{

    width:90px;

    margin-bottom:20px;

}

.footer-content h3{

    margin-top:0;

    margin-bottom:12px;

}

.footer-content h4{

    margin-bottom:16px;

    color:var(--mc-gold);

}

.footer-content p{

    color:var(--mc-text-soft);

}

.footer-content ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-content li{

    margin-bottom:12px;

}

.footer-content a{

    color:var(--mc-text-soft);

    text-decoration:none;

    transition:.25s;

}

.footer-content a:hover{

    color:var(--mc-gold);

}

.social-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-bottom{

    padding:24px 0;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:rgba(255,255,255,.55);

    font-size:.9rem;

}

/*==========================================================
SKELETON LOADERS
==========================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.06);

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    animation:skeletonLoading 1.4s infinite;

}

.skeleton-line{

    height:14px;

    border-radius:999px;

    margin-bottom:12px;

}

.skeleton-title{

    height:24px;

    width:65%;

    border-radius:999px;

    margin-bottom:20px;

}

.skeleton-avatar{

    width:80px;

    height:80px;

    border-radius:50%;

}

@keyframes skeletonLoading{

    100%{

        transform:translateX(100%);

    }

}

/*==========================================================
LOADING & ERROR STATES
==========================================================*/

.loading-state,
.error-state,
.empty-state{

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    text-align:center;

    background:rgba(255,255,255,.04);

    border:1px dashed rgba(255,255,255,.10);

    border-radius:22px;

    padding:40px;

}

.loading-state .loading-spinner{

    margin:0;

}

.error-state h3{

    color:#ff6b6b;

    margin:0;

}

.error-state p,
.empty-state p{

    color:var(--mc-text-soft);

    max-width:500px;

}

.retry-button{

    margin-top:10px;

}

.fade-loading{

    opacity:.55;

    pointer-events:none;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .footer-content{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    #match-sponsors{

        grid-template-columns:repeat(2,1fr);

    }

    .related-matches-list,
    #related-matches-list{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    #match-sponsors{

        grid-template-columns:1fr;

    }

}

/*==========================================================
PREMIUM ANIMATIONS
==========================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;
        transform:translateX(-35px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;
        transform:translateX(35px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.94);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes glowPulse{

    0%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

    50%{

        box-shadow:0 0 28px rgba(255,193,7,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(255,193,7,0);

    }

}

/*==========================================================
ANIMATION HELPERS
==========================================================*/

.fade-in{

    animation:fadeIn .45s ease both;

}

.fade-up{

    animation:fadeUp .55s ease both;

}

.fade-down{

    animation:fadeDown .55s ease both;

}

.slide-left{

    animation:slideLeft .55s ease both;

}

.slide-right{

    animation:slideRight .55s ease both;

}

.zoom-in{

    animation:zoomIn .45s ease both;

}

.float-card{

    animation:floatCard 5s ease-in-out infinite;

}

.glow{

    animation:glowPulse 2.4s infinite;

}

/*==========================================================
HOVER EFFECTS
==========================================================*/

.hover-lift{

    transition:
    transform .30s,
    box-shadow .30s,
    border-color .30s;

}

.hover-lift:hover{

    transform:translateY(-8px);

    border-color:var(--mc-gold);

    box-shadow:0 22px 48px rgba(0,0,0,.34);

}

.hover-grow{

    transition:.25s;

}

.hover-grow:hover{

    transform:scale(1.04);

}

.hover-glow:hover{

    box-shadow:

    0 0 26px rgba(255,193,7,.35);

}

/*==========================================================
UTILITY CLASSES
==========================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.gold{

    color:var(--mc-gold);

}

.green{

    color:var(--mc-green);

}

.red{

    color:var(--mc-red);

}

.blue{

    color:var(--mc-blue);

}

.bold{

    font-weight:700;

}

.hidden{

    display:none !important;

}

.invisible{

    visibility:hidden;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.grid{

    display:grid;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.round{

    border-radius:50%;

}

.shadow{

    box-shadow:0 20px 40px rgba(0,0,0,.30);

}

.glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.08);

}

/*==========================================================
SPACING
==========================================================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}
.p-40{padding:40px;}

/*==========================================================
ENHANCED RESPONSIVE POLISH
==========================================================*/

@media(max-width:1200px){

    .container{

        padding-inline:24px;

    }

}

@media(max-width:992px){

    .match-tabs{

        gap:10px;

    }

    .summary-grid{

        gap:18px;

    }

}

@media(max-width:768px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.2rem;

    }

    .team-panel{

        padding:24px;

    }

    .match-centre-panel{

        padding:24px;

    }

    .info-card{

        padding:20px;

    }

}

@media(max-width:480px){

    .container{

        padding-inline:16px;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .match-tab{

        font-size:.85rem;

        padding:12px 18px;

    }

}

/*==========================================================
PRINT STYLES
==========================================================*/

@media print{

    *{

        animation:none !important;

        transition:none !important;

        box-shadow:none !important;

        text-shadow:none !important;

    }

    html,
    body{

        background:#ffffff !important;

        color:#000000 !important;

    }

    body{

        font-size:12pt;

        line-height:1.45;

    }

    .site-header,
    .site-footer,
    .match-tabs-section,
    .hero-buttons,
    .carousel-button,
    .btn,
    .social-links,
    .match-sponsors,
    .related-matches{

        display:none !important;

    }

    #match-centre{

        background:#ffffff !important;

        color:#000000 !important;

    }

    .team-panel,
    .match-centre-panel,
    .summary-card,
    .tab-panel,
    .info-card{

        background:#ffffff !important;

        border:1px solid #cfcfcf !important;

        color:#000000 !important;

        break-inside:avoid;

        page-break-inside:avoid;

    }

    .tab-panel{

        display:block !important;

        margin-bottom:24px;

    }

    h1,
    h2,
    h3,
    h4{

        color:#000000 !important;

    }

    a{

        color:#000000 !important;

        text-decoration:none;

    }

    img{

        max-width:100%;

    }

}

/*==========================================================
DARK THEME REFINEMENTS
==========================================================*/

html[data-theme="dark"]{

    color-scheme:dark;

}

html[data-theme="dark"] #match-centre{

    background:

        radial-gradient(circle at top right,
        rgba(255,193,7,.10),
        transparent 35%),

        linear-gradient(
        180deg,
        #050b12,
        #08121c);

}

html[data-theme="dark"] .team-panel,
html[data-theme="dark"] .match-centre-panel,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .tab-panel,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .player-card,
html[data-theme="dark"] .weather-card,
html[data-theme="dark"] .ground-card{

    background:rgba(255,255,255,.045);

    border-color:rgba(255,255,255,.08);

}

html[data-theme="dark"] .match-tab{

    background:rgba(255,255,255,.05);

}

html[data-theme="dark"] .match-tab.active{

    color:#111111;

}

html[data-theme="dark"] .scorecard-table tbody tr:hover{

    background:rgba(255,255,255,.05);

}

/*==========================================================
LIGHT THEME
==========================================================*/

html[data-theme="light"]{

    color-scheme:light;

}

html[data-theme="light"] #match-centre{

    background:#f4f6fa;

    color:#1f2937;

}

html[data-theme="light"] .team-panel,
html[data-theme="light"] .match-centre-panel,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .tab-panel,
html[data-theme="light"] .info-card,
html[data-theme="light"] .player-card,
html[data-theme="light"] .weather-card,
html[data-theme="light"] .ground-card,
html[data-theme="light"] .statistics-card,
html[data-theme="light"] .partnership-card{

    background:#ffffff;

    border:1px solid #dfe5ec;

    color:#1f2937;

}

html[data-theme="light"] .match-tab{

    background:#eef2f7;

    color:#374151;

}

html[data-theme="light"] .match-tab:hover{

    background:#ffe9a6;

}

html[data-theme="light"] .match-tab.active{

    background:#FFC107;

    color:#111111;

}

html[data-theme="light"] .team-score,
html[data-theme="light"] .statistics-value,
html[data-theme="light"] .partnership-runs,
html[data-theme="light"] .weather-temp{

    color:#d48806;

}

html[data-theme="light"] .scorecard-table{

    background:#ffffff;

}

html[data-theme="light"] .scorecard-table th{

    background:#fff8dc;

}

html[data-theme="light"] .scorecard-table td{

    color:#1f2937;

}

html[data-theme="light"] .scorecard-table tbody tr:hover{

    background:#f7f9fc;

}

html[data-theme="light"] .footer-content,
html[data-theme="light"] .footer-bottom{

    color:#374151;

}


/*==========================================================
FINAL UTILITY / HELPER CLASSES
==========================================================*/

/* Visibility */

.d-none{
    display:none !important;
}

.d-block{
    display:block !important;
}

.d-inline{
    display:inline !important;
}

.d-inline-block{
    display:inline-block !important;
}

.d-flex{
    display:flex !important;
}

.d-grid{
    display:grid !important;
}

/* Alignment */

.justify-start{
    justify-content:flex-start;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:flex-end;
}

.justify-between{
    justify-content:space-between;
}

.align-start{
    align-items:flex-start;
}

.align-center{
    align-items:center;
}

.align-end{
    align-items:flex-end;
}

/* Flex */

.flex-1{
    flex:1;
}

.flex-wrap{
    flex-wrap:wrap;
}

.flex-nowrap{
    flex-wrap:nowrap;
}

.flex-column{
    flex-direction:column;
}

/* Width */

.w-auto{
    width:auto;
}

.w-25{
    width:25%;
}

.w-50{
    width:50%;
}

.w-75{
    width:75%;
}

.w-100{
    width:100%;
}

.max-w-100{
    max-width:100%;
}

/* Height */

.h-auto{
    height:auto;
}

.h-100{
    height:100%;
}

/* Overflow */

.overflow-hidden{
    overflow:hidden;
}

.overflow-auto{
    overflow:auto;
}

/* Radius */

.radius-sm{
    border-radius:8px;
}

.radius{
    border-radius:16px;
}

.radius-lg{
    border-radius:24px;
}

.radius-xl{
    border-radius:32px;
}

.round{
    border-radius:50%;
}

/* Borders */

.border{
    border:1px solid rgba(255,255,255,.08);
}

.border-gold{
    border:1px solid var(--mc-gold);
}

.border-none{
    border:none;
}

/* Background */

.bg-glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

}

.bg-gold{

    background:var(--mc-gold);

    color:#111;

}

.bg-dark{

    background:#08121c;

}

/* Text */

.text-white{
    color:#fff;
}

.text-muted{
    color:var(--mc-text-soft);
}

.text-gold{
    color:var(--mc-gold);
}

.text-green{
    color:var(--mc-green);
}

.text-red{
    color:var(--mc-red);
}

.text-blue{
    color:var(--mc-blue);
}

.uppercase{
    text-transform:uppercase;
}

.capitalize{
    text-transform:capitalize;
}

.nowrap{
    white-space:nowrap;
}

/* Cursor */

.pointer{
    cursor:pointer;
}

.no-pointer{
    pointer-events:none;
}

/* Opacity */

.opacity-0{
    opacity:0;
}

.opacity-25{
    opacity:.25;
}

.opacity-50{
    opacity:.5;
}

.opacity-75{
    opacity:.75;
}

.opacity-100{
    opacity:1;
}

/* Shadows */

.shadow-sm{
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.shadow-md{
    box-shadow:0 16px 32px rgba(0,0,0,.28);
}

.shadow-lg{
    box-shadow:0 24px 48px rgba(0,0,0,.38);
}

/* Image */

.img-fluid{

    display:block;

    width:100%;

    height:auto;

}

/* Transition */

.transition{

    transition:.30s ease;

}

/* User Select */

.no-select{

    user-select:none;

}

/* Z-index */

.z-1{
    z-index:1;
}

.z-10{
    z-index:10;
}

.z-100{
    z-index:100;
}

/* End of Utility Classes */