*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}

body{
    background:#111;
    font-family:Arial,sans-serif;
    color:#fff;
}

/* ================= LAYOUT ================= */

.matches-scroll{
    width:100%;
    max-width:1700px;

    margin:20px auto;
    padding:10px;

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

/* ================= MATCH CARD ================= */

.match-box{
    position:relative;

    padding:8px;

    border-radius:12px;

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

    background:linear-gradient(
    180deg,
    #49fcc7 0%,
    #2387fa 40%,
    #51fc87 75%,
    #2275f2 100%
    );

    box-shadow:0 0 15px rgba(255,215,0,.15);

    transition:.3s;
}

.match-box:hover{
    transform:translateY(-3px);
}

/* ================= LIVE BADGE ================= */

.badge{
    position:absolute;
    top:8px;
    right:8px;

    background:#c00000;

    color:#fff;

    font-size:9px;
    font-weight:900;

    padding:3px 8px;

    border:1px solid #ff3b3b;

    border-radius:4px;
}

/* ================= TICKER ================= */

.ticker{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    margin-bottom:10px;
}

.logo{
    width:33px;
    height:33px;

    object-fit:contain;
}

.ticker-text{
    font-size:14px;
    font-weight:700;

    text-align:center;

    color:#ff3333;
}


/* ================= TEAM AREA ================= */

.teams{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:8px;
}

.team{
    flex:1;
    text-align:center;
}

.flag-wrap{
    display:flex;
    justify-content:center;

    margin-bottom:6px;
}

.fi{
    font-size:26px;
}

.team h2{
    margin:0;

    font-size:10px;
    font-weight:700;
}

.vs{
    font-size:11px;
    font-weight:900;

    color:#ffd700;
}

/* ================= KICKOFF ================= */

.kickoff-box{
    margin-top:6px;

    padding:6px;

    border-radius:4px;

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

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

    text-align:center;
}

.kickoff-title{
    color:#f5051d;

    font-size:8px;
    font-weight:700;
}

.kickoff-date{
    margin-top:5px;

    font-size:8px;
}

.kickoff-time{
    margin-top:5px;

    font-size:8px;
    font-weight:900;

    color:#000;
}

/* ================= COUNTDOWN ================= */

.countdown{
    display:flex;
    justify-content:center;

    gap:5px;

    margin-top:5px;

    flex-wrap:wrap;
}

.time-box{
    background:#000;

    min-width:18px;

    padding:3px;

    border-radius:3px;

    text-align:center;
}

.time-box span{
    display:block;

    font-size:10px;
    font-weight:900;

    color:#edcf09;
}

.time-box p{
    margin:2px 0 0;

    font-size:7px;
}

/* ================= BUTTON ================= */

.play-btn{
    margin-top:8px;

    padding:6px 10px;

    text-align:center;

    border-radius:8px;

    font-size:11px;
    font-weight:700;

    color:#000;

    background:#edcf09;

    box-shadow:0 0 10px rgba(255,0,0,.5);
}

.watch-btn{
    color:#000;
    text-decoration:none;
    font-weight:700;
}

/* ================= TABLET ================= */

@media(max-width:768px){

    .matches-scroll{
        display:flex;
        overflow-x:auto;

        scroll-snap-type:x mandatory;
    }

    .match-box{
        min-width:85vw;
        max-width:85vw;

        flex-shrink:0;

        scroll-snap-align:center;
    }

    .fi{
        font-size:28px;
    }
}

/* ================= MOBILE ================= */

@media(max-width:480px){

    .logo{
        width:24px;
        height:24px;
    }

    .ticker-text{
        font-size:10px;
    }

    .league-title{
        font-size:13px;
    }

    .team h2{
        font-size:11px;
    }

    .fi{
        font-size:24px;
    }

    .vs{
        font-size:14px;
    }

    .time-box{
        min-width:28px;
    }
}