*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#050505;

    color:white;

    font-family:
    system-ui,
    -apple-system,
    sans-serif;

    min-height:100vh;

}



/* NAVBAR */


.navbar{

    position:sticky;

    top:0;

    z-index:1000;


    height:70px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 30px;


    background:
    rgba(0,0,0,.75);


    backdrop-filter:
    blur(15px);


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

}




.logo{

    text-decoration:none;

    font-size:30px;

    font-weight:900;


    background:
    linear-gradient(
        90deg,
        #00aaff,
        #00ff88
    );


    -webkit-background-clip:text;

    color:transparent;

}




/* SEARCH */


#search{


    width:300px;


    padding:
    12px 18px;


    border-radius:30px;


    border:none;


    outline:none;


    background:#151515;


    color:white;


    font-size:14px;


}



#search::placeholder{

    color:#777;

}





/* HERO */


.hero{


    padding:
    70px 30px;


    background:
    linear-gradient(
        135deg,
        #00243a,
        #000
    );


}



.hero h1{


    font-size:45px;

    margin-bottom:15px;


}



.hero p{

    color:#aaa;

    font-size:18px;

}





/* SECTIONS */


.section-title{


    margin:

    35px 30px 20px;


    font-size:28px;


}






/* GRID */


.match-grid{


    padding:

    0 30px 40px;


    display:grid;


    grid-template-columns:

    repeat(
        auto-fill,
        minmax(280px,1fr)
    );


    gap:25px;


}

/* CARD */


.match-card{


    background:#111;


    border-radius:18px;


    overflow:hidden;


    border:

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


    transition:.3s;


}




.match-card:hover{


    transform:
    translateY(-8px);


    border-color:#00aaff;


    box-shadow:

    0 15px 40px
    rgba(0,170,255,.25);


}




.match-image{


    width:100%;


    height:170px;


    object-fit:cover;


}







.match-content{


    padding:18px;


}







.match-title{


    font-size:20px;


    font-weight:800;


    margin-bottom:8px;


}







.league{


    color:#888;


    font-size:14px;


}






/* LIVE BADGE */


.live{


    display:inline-block;


    margin-top:12px;


    background:#ff0033;


    padding:

    5px 12px;


    border-radius:20px;


    font-size:12px;


    font-weight:800;


    animation:pulse 1.5s infinite;


}





@keyframes pulse{


    50%{


        opacity:.4;


    }


}







/* UPCOMING BADGE */


.upcoming-badge{


    display:inline-block;


    margin-top:12px;


    background:#333;


    color:white;


    padding:

    5px 12px;


    border-radius:20px;


    font-size:12px;


    font-weight:800;


}







/* NO LIVE MESSAGE */


.no-live{


    text-align:center;


    padding:25px 15px;


    color:#aaa;


    font-size:18px;


    background:#111;


    border-radius:15px;


    margin:0 30px 30px;


    border:

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


}







/* BUTTON */


.watch-btn{


    display:block;


    text-align:center;


    margin-top:15px;


    padding:12px;


    border-radius:12px;


    text-decoration:none;


    color:white;


    font-weight:800;




    background:

    linear-gradient(
        90deg,
        #0088ff,
        #00cc88
    );


}

/* FAVORITE BUTTON */


.favorite-btn{


    background:none;


    border:none;


    color:#ffd700;


    font-size:22px;


    cursor:pointer;


    float:right;


}







/* EMPTY HIDE */


.hidden{


    display:none;


}







/* FOOTER */


footer{


    text-align:center;


    padding:30px;


    color:#777;


}







/* MOBILE */


@media(max-width:600px){



.navbar{


    padding:0 15px;


}





.logo{


    font-size:23px;


}





#search{


    width:150px;


}





.hero{


    padding:45px 20px;


}





.hero h1{


    font-size:32px;


}





.section-title{


    margin-left:15px;


}





.match-grid{


    padding:

    0 15px 30px;


}





.no-live{


    margin:

    0 15px 30px;


    font-size:16px;


}



}
/* POPUP */

.popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

}


.popup-box{

    width:90%;

    max-width:380px;

    background:#111;

    color:white;

    padding:25px;

    border-radius:18px;

    text-align:center;

    border:1px solid #0088ff;

    box-shadow:
    0 0 30px rgba(0,136,255,.4);

    position:relative;

}


.popup-box h2{

    color:#00aaff;

    margin-bottom:10px;

}


.popup-box p{

    color:#ccc;

    font-size:14px;

    margin-bottom:20px;

}


.popup-box a{

    display:inline-block;

    background:#0088ff;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

}


.popup-close{

    position:absolute;

    right:12px;

    top:8px;

    background:none;

    border:0;

    color:white;

    font-size:28px;

    cursor:pointer;

}