/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.pm-stats-page{

    position:relative;

    padding:25px 15px;

    border-radius:28px;

    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(120,0,40,.45) 0%,
        rgba(0,0,0,.78) 50%,
        rgba(0,60,140,.45) 100%
    ),

    url('https://pollamundialista.diversionplus.co/wp-content/uploads/2026/05/bg-stadium.png');

    background-size:cover;

    background-position:center;

    color:#fff;

    font-family:
    'Poppins',
    sans-serif;

}

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.pm-stats-hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:30px;

}

.pm-stats-team{

    width:30%;

    text-align:center;

}

.pm-stats-team img{

    width:110px;

    height:110px;

    

    border-radius:50%;

    border:4px solid rgba(255,255,255,.9);

    box-shadow:
    0 0 18px rgba(255,0,0,.45);


}


.pm-stats-team h2{

    margin-top:12px;

    font-size:28px;

    font-weight:800;

    text-transform:uppercase;

    line-height:1.1;

}

/*
|--------------------------------------------------------------------------
| CENTER
|--------------------------------------------------------------------------
*/

.pm-stats-center{

    width:40%;

    text-align:center;

}

.pm-stats-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:14px;

    background:
    linear-gradient(
        90deg,
        #ff003c,
        #ff2f2f
    );

    color:#fff;

    font-size:18px;

    font-weight:700;

    margin-bottom:14px;

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

}

.pm-stats-score{

    font-size:70px;

    font-weight:900;

    line-height:1;

    margin-bottom:8px;

}

.pm-stats-minute{

    color:#00ff9d;

    font-size:26px;

    font-weight:800;

    margin-bottom:10px;

}

.pm-stats-venue{

    color:#cfd5e6;

    font-size:16px;

}

/*
|--------------------------------------------------------------------------
| BOXES
|--------------------------------------------------------------------------
*/

.pm-stats-box{

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

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

    border-radius:22px;

    overflow:hidden;

    margin-bottom:25px;

    backdrop-filter:blur(10px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.3);

}

.pm-stats-box h3{

    margin:0;

    padding:20px 24px;

    font-size:22px;

    font-weight:800;

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

    text-transform:uppercase;

}

/*
|--------------------------------------------------------------------------
| STATS ROW
|--------------------------------------------------------------------------
*/

.pm-stat-row{

    display:grid;

    grid-template-columns:
    60px
    1fr
    60px;

    align-items:center;

    gap:12px;

    padding:18px 24px;

    position:relative;

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

}

.pm-stat-row:last-child{

    border-bottom:none;

}

.pm-stat-row div{

    font-size:18px;

    font-weight:700;

}

.pm-stat-row div:nth-child(2){

    text-align:center;

    color:#d5d9e5;

    font-weight:500;

    font-size:17px;

}

/*
|--------------------------------------------------------------------------
| BAR
|--------------------------------------------------------------------------
*/

.pm-stat-row::after{

    content:'';

    position:absolute;

    left:24px;

    right:24px;

    bottom:7px;

    height:5px;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #ff003c 0%,
        #ff003c 50%,
        #2aa8ff 50%,
        #2aa8ff 100%
    );

    opacity:.9;

}

/*
|--------------------------------------------------------------------------
| EVENTS
|--------------------------------------------------------------------------
*/

.pm-event-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 24px;

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

    font-size:15px;

    gap:10px;

}

.pm-event-row:last-child{

    border-bottom:none;

}

.pm-event-row div:first-child{

    color:#00ff9d;

    font-weight:800;

    width:50px;

}

.pm-event-row div:nth-child(2){

    color:#ffcc00;

    font-weight:700;

    text-transform:uppercase;

}

/*
|--------------------------------------------------------------------------
| LINEUPS
|--------------------------------------------------------------------------
*/

.pm-lineups-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:20px;

    padding:24px;

}

.pm-lineups-grid h4{

    font-size:22px;

    margin-bottom:18px;

    text-transform:uppercase;

    font-weight:800;

}

.pm-player-row{

    padding:10px 14px;

    margin-bottom:10px;

    border-radius:12px;

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

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

    font-size:14px;

    font-weight:600;

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .pm-stats-page{

        padding:18px 12px;

    }

    .pm-stats-hero{

        flex-direction:column;

        gap:15px;

    }

    .pm-stats-team,
    .pm-stats-center{

        width:100%;

    }


    .pm-stats-team h2{

        font-size:22px;

    }

    .pm-stats-score{

        font-size:52px;

    }

    .pm-stats-minute{

        font-size:22px;

    }

    .pm-stats-venue{

        font-size:14px;

    }

    .pm-stats-box h3{

        font-size:18px;

        padding:16px 18px;

    }

    .pm-stat-row{

        grid-template-columns:
        45px
        1fr
        45px;

        padding:14px 16px;

        gap:8px;

    }

    .pm-stat-row div{

        font-size:14px;

    }

    .pm-stat-row div:nth-child(2){

        font-size:13px;

    }

    .pm-lineups-grid{

        grid-template-columns:
        1fr;

        padding:18px;

    }

    .pm-player-row{

        font-size:13px;

    }

    .pm-event-row{

        padding:14px 16px;

        font-size:13px;

    }

}