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

body{
    background:#0f172a;
    color:white;
    font-family:'Segoe UI',sans-serif;
}

/* HERO */

.hero{
    width:100%;
    min-height:300px;

    background:
    linear-gradient(rgba(0,0,0,.6),
    rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1574629810360-7efbbe195018');

    background-size:cover;
    background-position:center;

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

    text-align:center;

    padding:50px 20px;
}

.hero-content{
    max-width:700px;
}

.hero h1{
    font-size:3rem;
    margin-bottom:15px;
}

.hero p{
    font-size:1.1rem;
    opacity:.9;
    margin-bottom:25px;
}

.btn-principal{
    text-decoration:none;
    background:#16a34a;
    color:white;
    padding:14px 28px;
    border-radius:10px;
    font-weight:bold;
    transition:.3s;
}

.btn-principal:hover{
    background:#22c55e;
    transform:translateY(-2px);
}

/* CONTAINER */

.container{
    width:90%;
    max-width:1400px;
    margin:40px auto;

    display:flex;
    gap:30px;
    align-items:flex-start;
}

.container-jogos{
    flex:2;
}

.container-ranking{
    flex:1;
}

.section-header{
    margin-bottom:20px;
}

.section-header h2{
    font-size:1.5rem;
    color:#facc15;
}

.match-card{
    background:#1e293b;
    border-radius:16px;
    padding:18px;
    margin-bottom:16px;
    transition:.3s;
    border:1px solid rgba(255,255,255,.05);
}

.match-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(0,0,0,.3);
}

.match-info{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:.9rem;
    color:#94a3b8;
}

.stage{
    background:#16a34a;
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-size:.8rem;
    font-weight:600;
}

.match-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.team{
    display:flex;
    align-items:center;
    gap:12px;
    width:35%;
    font-weight:600;
}

.away-team{
    justify-content:flex-end;
    text-align:right;
}

.team img{
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:50%;
    background:white;
    padding:2px;
}

.score{
    min-width:120px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;

    font-size:1.8rem;
    font-weight:700;
    color:#facc15;
}

.score strong{
    color:white;
}
/* RANKING */

.ranking-card{
    background:#1e293b;

    padding:18px;

    border-radius:15px;

    margin-bottom:12px;

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

    transition:.3s;
}

.ranking-card:hover{
    transform:translateX(5px);
}

.ranking-user h4{
    margin-bottom:4px;
}

.ranking-user span{
    opacity:.7;
    font-size:.9rem;
}

.ranking-points{
    background:#facc15;
    color:black;

    font-weight:bold;

    padding:8px 14px;
    border-radius:10px;
}

.btn-ranking{
    width:100%;

    display:block;

    text-align:center;

    margin-top:20px;

    background:#16a34a;

    color:white;

    text-decoration:none;

    padding:15px;

    border-radius:12px;

    font-weight:bold;

    transition:.3s;
}

.btn-ranking:hover{
    background:#22c55e;
}

/* RESPONSIVO */

@media(max-width:900px){

    .container{
        flex-direction:column;
    }

    .container-jogos,
    .container-ranking{
        width:100%;
    }

    .hero h1{
        font-size:2.2rem;
    }
}

.match-status{
    padding:6px 12px;
    border-radius:20px;
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* Não começou */
.scheduled{
    background:#2563eb;
    color:white;
}

/* Ao vivo */
.live{
    background:#dc2626;
    color:white;

    animation:pulse 1.5s infinite;
}

/* Encerrado */
.finished{
    background:#16a34a;
    color:white;
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(220,38,38,.7);
    }

    70%{
        box-shadow:0 0 0 10px rgba(220,38,38,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(220,38,38,0);
    }

}


.empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 30px;
    margin: 20px 0;

    background: linear-gradient(135deg, #1e293b, #334155);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;

    text-align: center;
    color: #fff;

    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.empty-card h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.empty-card p {
    margin: 10px 0 25px;
    color: #cbd5e1;
    max-width: 400px;
    line-height: 1.5;
}

.empty-btn {
    display: inline-block;

    padding: 12px 24px;

    background: #22c55e;
    color: #fff;

    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;

    transition: all 0.2s ease;
}

.empty-btn:hover {
    transform: translateY(-2px);
    background: #16a34a;
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
}