.player-page{

padding:140px 0;

}

.player-header{

display:grid;

grid-template-columns:360px 1fr;

gap:60px;

align-items:center;

}

.player-photo img{

width:100%;

border-radius:24px;

}

.player-data h1{

font-size:3rem;

margin-bottom:25px;

}

.player-country{

display:flex;

align-items:center;

gap:15px;

margin-bottom:25px;

}

.player-country img{

width:40px;

}

.player-ranking{

font-size:1.5rem;

margin-bottom:40px;

color:#C78C32;

}

.player-info-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.player-info-grid div{

background:#102233;

padding:20px;

border-radius:16px;

}

.player-matches{

margin-top:60px;

}

.player-matches h2{

font-size:1.6rem;

margin-bottom:20px;

}

.player-match-list{

display:flex;

flex-direction:column;

gap:10px;

}

.player-match-row{

display:grid;

grid-template-columns:1fr 2fr 1fr 1fr;

align-items:center;

gap:14px;

background:#102233;

padding:14px 20px;

border-radius:12px;

border-left:4px solid #2D4861;

}

.player-match-row.is-win{

border-left-color:#2fb772;

}

.player-match-row.is-loss{

border-left-color:#ff5c5c;

}

.player-match-row.is-pending{

border-left-color:#C78C32;

}

.player-match-round{

color:#8E9BAE;

font-size:.85rem;

text-transform:uppercase;

}

.player-match-result{

text-align:right;

font-weight:700;

}

.player-match-row.is-win .player-match-result{

color:#2fb772;

}

.player-match-row.is-loss .player-match-result{

color:#ff5c5c;

}

.player-match-row.is-pending .player-match-result{

color:#C78C32;

}

@media(max-width:700px){

    .player-match-row{

        grid-template-columns:1fr 1fr;

        row-gap:6px;

    }

}

.psa-modal-card.player-modal-card{

max-width:1400px;

width:94%;

max-height:92vh;

overflow-y:auto;

padding:44px;

}

.player-modal-card .player-header{

grid-template-columns:400px 1fr;

gap:50px;

align-items:start;

}

.player-modal-card .player-data h1{

font-size:3rem;

margin-bottom:20px;

}

.player-modal-card .player-ranking{

font-size:1.8rem;

margin-bottom:30px;

}

.player-modal-card .player-info-grid div{

padding:26px;

font-size:1.1rem;

}

.player-modal-card .player-matches h2{

font-size:2rem;

}

.player-modal-card .player-match-row{

padding:18px 26px;

font-size:1.05rem;

}

@media(max-width:640px){

    .player-modal-card .player-header{

        grid-template-columns:1fr;

        text-align:center;

    }

    .player-modal-card .player-photo{

        max-width:180px;

        margin:0 auto;

    }

    .player-modal-card .player-country{

        justify-content:center;

    }

}