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


:root {

    --bg-main:#020817;
    --bg-panel:#071229;
    --bg-input:#1E293B;
    --border:#334155;

    --accent:#00E5FF;
    --danger:#EF4444;

    --text-main:#FFFFFF;
    --text-muted:#94A3B8;

    --font:'Sora',sans-serif;

    --radius-btn:12px;

    --shadow-soft:
    0 12px 40px rgba(0,0,0,.4);

}



body {

    font-family:var(--font);

    background:var(--bg-main);

    color:var(--text-main);

    line-height:1.5;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    -webkit-font-smoothing:antialiased;

}



a {

    text-decoration:none;

    color:inherit;

}




/* HEADER */


.site-header {

    padding:20px;

    background:var(--bg-panel);

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

}



.header-inner {

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.brand-logo {

    font-size:28px;

    font-weight:800;

    letter-spacing:2px;

}



.gradient-text {

    background:
    linear-gradient(
    90deg,
    #fff,
    var(--accent)
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}





.btn-telegram {

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    background:var(--bg-input);

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

    border-radius:12px;

    font-size:12px;

    font-weight:800;

}



/* MATCH SECTION */


.matches-section {

    width:100%;

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

}



.section-header h2 {

    font-size:22px;

    font-weight:800;

    margin-bottom:25px;

}



.match-grid {

    display:grid;

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

    gap:20px;

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


.match-card {

    background:var(--bg-panel);

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

    border-radius:16px;

    overflow:hidden;

    transition:.25s ease;

}



.match-card:hover {

    transform:translateY(-5px);

    border-color:var(--accent);

}



.card-thumb {

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

}



.card-thumb img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.status-badge {

    position:absolute;

    top:12px;

    left:12px;

    display:flex;

    align-items:center;

    padding:6px 10px;

    border-radius:8px;

    background:#ef4444;

    color:white;

    font-size:11px;

    font-weight:800;

}



.card-details {

    padding:18px;

}



.card-info h3 {

    font-size:17px;

    font-weight:800;

}



.card-info p {

    color:var(--text-muted);

    font-size:13px;

    margin-top:5px;

}



.time-pill {

    display:flex;

    align-items:center;

    gap:6px;

    padding:7px 10px;

    background:var(--bg-input);

    border-radius:8px;

    color:var(--text-muted);

    font-size:11px;

    font-weight:700;

}



.time-pill svg {

    width:14px;

    height:14px;

    stroke:var(--accent);

}



.card-actions {

    padding:0 18px 18px;

}



.btn-play {

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:var(--accent);

    color:var(--bg-main);

    font-weight:800;

    cursor:pointer;

    text-transform:uppercase;

}





/* =========================
   POPUP
========================= */


.popup-overlay {

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:99999;

    backdrop-filter:blur(5px);

}



.popup-overlay.show {

    display:flex;

}




.popup-box {

    width:90%;

    max-width:420px;

    background:var(--bg-panel);

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

    border-radius:18px;

    padding:30px;

    text-align:center;

    position:relative;

    box-shadow:
    0 20px 60px rgba(0,0,0,.6);

    animation:popupIn .3s ease;

}



@keyframes popupIn {

    from {

        opacity:0;

        transform:scale(.8);

    }


    to {

        opacity:1;

        transform:scale(1);

    }

}



.popup-box h2 {

    color:var(--accent);

    font-size:22px;

    margin-bottom:15px;

}



.popup-box p {

    color:var(--text-muted);

    margin-bottom:25px;

}



.popup-box a {

    display:inline-block;

    padding:13px 25px;

    background:var(--accent);

    color:var(--bg-main);

    border-radius:12px;

    font-weight:800;

}



.popup-close {

    position:absolute;

    top:10px;

    right:15px;

    border:none;

    background:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}



.popup-close:hover {

    color:var(--accent);

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


.site-footer {

    margin-top:auto;

    padding:25px 20px;

    background:var(--bg-panel);

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

    text-align:center;

    color:var(--text-muted);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}



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


@media(max-width:768px){


    .header-inner {

        gap:15px;

    }



    .brand-logo {

        font-size:22px;

    }



    .btn-telegram {

        padding:8px 12px;

        font-size:10px;

    }



    .matches-section {

        margin:25px auto;

        padding:0 15px;

    }



    .section-header h2 {

        font-size:18px;

    }



    .match-grid {

        grid-template-columns:1fr;

    }



    .popup-box {

        padding:25px 20px;

    }



}





@media(max-width:400px){


    .header-inner {

        flex-direction:column;

    }



    .brand-logo {

        font-size:20px;

    }


}