.standings-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:18px
}

.standings-actions .button{
    padding:12px 16px
}

.rankings-page .site-header{
    position:relative
}

.rankings-page main{
    background:#17181b
}

.rankings-page .event-nav nav .current{
    color:#ffce48
}

.rankings-hero{
    max-width:1240px;
    margin:auto;
    padding:95px 28px 75px;
    display:grid;
    grid-template-columns:1fr 330px;
    gap:80px;
    align-items:end
}

.rankings-hero h1{
    font-family:"Bowlby One SC";
    font-size:clamp(56px,7vw,104px);
    line-height:.9;
    letter-spacing:-3px
}

.rankings-hero>div>p:last-child{
    max-width:590px;
    color:#b9bbc2;
    line-height:1.7;
    margin-top:28px
}

.rankings-hero aside{
    background:#1d1e21;
    border:1px solid #393a3f;
    border-radius:4px;
    padding:25px;
    box-shadow:inset 0 -4px rgba(0,0,0,.15)
}

.rankings-hero aside small{
    display:block;
    color:#8f9198;
    font-size:9px;
    letter-spacing:1.5px
}

.rankings-hero aside strong{
    display:block;
    margin:20px 0 8px;
    text-transform:uppercase;
    font-size:12px
}

.rankings-hero aside strong i{
    display:inline-block;
    width:8px;
    height:8px;
    background:#ffce48;
    border-radius:50%;
    margin-right:8px;
    box-shadow:0 0 10px rgba(255,206,72,.55)
}

.rankings-hero aside span{
    color:#b9bbc2;
    font-size:12px
}

.rankings-content{
    background:#1d1e21;
    padding:70px max(28px,calc((100vw - 1240px)/2)) 110px;
    position:relative
}

.rankings-content:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-8px;
    height:8px;
    background:linear-gradient(135deg,transparent 33%,#1d1e21 33%,#1d1e21 66%,transparent 66%) 0 0/48px 16px
}

.rankings-toolbar{
    display:grid;
    grid-template-columns:1fr 230px 230px;
    gap:14px;
    margin-bottom:30px
}

.rankings-toolbar label>span{
    display:block;
    text-transform:uppercase;
    color:#9b9da4;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;
    margin-bottom:8px
}

.rankings-toolbar input,.rankings-toolbar select{
    width:100%;
    height:48px;
    border:1px solid #3a3b40;
    border-radius:4px;
    background:#16171a;
    color:#fff;
    padding:0 15px;
    font:500 13px "Stack Sans Text"
}

.rankings-toolbar input:focus,.rankings-toolbar select:focus{
    outline:2px solid #ffce48;
    outline-offset:1px
}

.player-table-wrap{
    border:1px solid #35363b;
    background:#191a1d;
    border-radius:4px;
    overflow:hidden
}

.player-table-head,.player-row{
    display:grid;
    grid-template-columns:80px 1.4fr 1.2fr 90px 90px 110px 120px;
    align-items:center;
    gap:12px
}

.player-table-head{
    padding:15px 20px;
    background:#151619;
    color:#8f9198;
    text-transform:uppercase;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.2px
}

.player-row{
    min-height:70px;
    padding:12px 20px;
    border-top:1px solid #2d2e32;
    font-size:13px;
    transition:.15s
}

.player-row:hover{
    background:#202125
}

.player-rank{
    font-family:"Bowlby One SC";
    font-size:18px;
    color:#b9bbc2
}

.player-name{
    font-weight:800;
    font-size:15px
}

.player-team{
    display:flex;
    align-items:center;
    gap:10px
}

.player-team img{
    width:31px;
    height:34px;
    object-fit:contain;
    image-rendering:pixelated
}

.player-row .points{
    font-family:"Bowlby One SC";
    font-size:17px;
    color:#ffce48
}

.empty-state{
    text-align:center;
    padding:45px;
    color:#9b9da4
}

.rankings-note{
    color:#898b91;
    font-size:11px;
    margin-top:16px
}

.rank-medal{
    color:#ffce48
}

.rankings-page footer{
    max-width:none
}

@media(max-width:900px){
    .rankings-hero{
        grid-template-columns:1fr
    }

    .rankings-hero aside{
        max-width:400px
    }

    .rankings-toolbar{
        grid-template-columns:1fr 1fr
    }

    .search-box{
        grid-column:1/-1
    }

    .player-table-head,.player-row{
        grid-template-columns:60px 1.3fr 1fr 90px
    }

    .player-table-head span:nth-child(4),.player-table-head span:nth-child(5),.player-table-head span:nth-child(6),.player-row span:nth-child(4),.player-row span:nth-child(5),.player-row span:nth-child(6){
        display:none
    }

}

@media(max-width:600px){
    .rankings-hero{
        padding:70px 20px 60px;
        gap:35px
    }

    .rankings-hero h1{
        font-size:48px;
        letter-spacing:-2px
    }

    .rankings-content{
        padding:55px 18px 80px
    }

    .rankings-toolbar{
        grid-template-columns:1fr
    }

    .search-box{
        grid-column:auto
    }

    .player-table-head,.player-row{
        grid-template-columns:48px 1fr 75px
    }

    .player-table-head span:nth-child(3),.player-row span:nth-child(3){
        display:none
    }

    .player-table-head,.player-row{
        padding-left:12px;
        padding-right:12px
    }

    .player-name{
        font-size:13px
    }

}