/*==================================================
    BRRO - Ranking System
    Theme Purple
==================================================*/

.ranking-container{
    width:100%;
    margin:25px auto;
}

/*==================================================
    SUMMARY
==================================================*/

.ranking-summary{

    background:#202020;

    border:1px solid #323232;

    border-left:4px solid #2D8CFF;

    border-radius:8px;

    padding:18px 22px;

    margin-bottom:28px;

    color:#CFCFCF;

    font-size:15px;

}

.ranking-summary strong{

    color:#FFFFFF;

    font-weight:700;

}

/*==================================================
    PODIUM
==================================================*/

.ranking-podium{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.podium-card{

    background:#222222;

    border:1px solid #333333;

    border-radius:10px;

    text-align:center;

    padding:30px 25px;

    transition:.25s;

}

.podium-card.first{

    border-top:4px solid #F5C542;

}

.podium-card.second{

    border-top:4px solid #C7CCD2;

}

.podium-card.third{

    border-top:4px solid #CD7F32;

}

.podium-position{

    font-size:42px;

    margin-bottom:18px;

}

.podium-name{

    font-size:28px;

    color:#FFFFFF;

    font-weight:700;

    margin-bottom:12px;

}

.podium-job{

    color:#8EB9FF;

    font-size:15px;

    margin-bottom:12px;

}

.podium-guild{

    color:#CFCFCF;

    font-size:15px;

    margin-bottom:18px;

}

.podium-value{

    color:#F5C542;

    font-size:32px;

    font-weight:700;

}

/*==================================================
    TABLE
==================================================*/

.ranking-table{

    width:100%;

    border-collapse:collapse;

    background:#202020;

    border-radius:10px;

    overflow:hidden;

}

.ranking-table thead{

    background:#2A2A2A;

}

.ranking-table th{

    padding:16px;

    color:#FFFFFF;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.5px;

    border-bottom:1px solid #3A3A3A;

}

.ranking-table td{

    padding:14px 12px;

    color:#EAEAEA;

    border-bottom:1px solid #2F2F2F;

    vertical-align:middle;

}

.ranking-table tbody tr{

    background:#202020;

    transition:.20s;

}

/*==================================================
    CHARACTER
==================================================*/

.character-name{

    color:#FFFFFF;

    font-size:16px;

    font-weight:700;

}

.character-name a{

    color:#FFFFFF;

    text-decoration:none;

}

.character-name a:hover{

    color:#3B82F6;

}

.character-job{

    color:#9D9D9D;

    font-size:13px;

}

/*==================================================
    GUILD
==================================================*/

.guild-cell{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:4px 10px;

    border-radius:14px;

    background:#2A2A2A;

    border:1px solid #3A3A3A;

}

/*==================================================
    RANK
==================================================*/

.rank-number{

    width:70px;

    text-align:center;

    font-size:20px;

    font-weight:700;

    color:#FFFFFF;

}

.rank-gold{

    color:#F5C542;

}

.rank-silver{

    color:#C7CCD2;

}

.rank-bronze{

    color:#CD7F32;

}

/*==================================================
    LEVEL
==================================================*/

.rank-level{

    color:#D8D8D8;

    font-weight:600;

}

/*==================================================
    TABLE EFFECTS
==================================================*/

.ranking-table tbody tr:hover{

    background:#2A3340;

}

.ranking-table tbody tr:last-child td{

    border-bottom:none;

}

.ranking-table td:first-child{

    border-left:4px solid transparent;

}

.ranking-table tbody tr:hover td:first-child{

    border-left:4px solid #3B82F6;

}

/*==================================================
    ZENY
==================================================*/

.zeny-value{

    color:#F5C542;

    font-size:19px;

    font-weight:700;

    text-align:right;

    white-space:nowrap;

}

/*==================================================
    LINKS
==================================================*/

.ranking-table a{

    color:#FFFFFF;

    text-decoration:none;

    transition:.20s;

}

.ranking-table a:hover{

    color:#3B82F6;

}

/*==================================================
    EMPTY
==================================================*/

.ranking-empty{

    background:#202020;

    border:1px solid #343434;

    border-radius:10px;

    padding:45px;

    text-align:center;

    color:#B5B5B5;

}

.ranking-empty h2{

    margin:0 0 12px;

    color:#FFFFFF;

    font-size:26px;

}

.ranking-empty p{

    margin:0;

    font-size:15px;

}

/*==================================================
    PODIUM EFFECTS
==================================================*/

.podium-card:hover{

    transform:translateY(-4px);

    background:#292929;

    border-color:#3B82F6;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.podium-card.first{

    transform:scale(1.05);

}

.podium-card.first:hover{

    transform:scale(1.07);

}

/*==================================================
    BADGES
==================================================*/

.rank-badge{

    display:inline-block;

    min-width:34px;

    height:34px;

    line-height:34px;

    border-radius:50%;

    text-align:center;

    font-weight:bold;

    color:#FFF;

}

.rank-badge.gold{

    background:#D4A017;

}

.rank-badge.silver{

    background:#8E949C;

}

.rank-badge.bronze{

    background:#A85B2A;

}

/*==================================================
    SCROLLBAR
==================================================*/

.ranking-table::-webkit-scrollbar{

    height:8px;

}

.ranking-table::-webkit-scrollbar-track{

    background:#1A1A1A;

}

.ranking-table::-webkit-scrollbar-thumb{

    background:#3B82F6;

    border-radius:20px;

}

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

@media(max-width:1100px){

    .ranking-podium{

        grid-template-columns:1fr;

    }

    .podium-card.first{

        transform:none;

    }

}

@media(max-width:900px){

    .ranking-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .ranking-table th,

    .ranking-table td{

        padding:12px;

    }

}

@media(max-width:640px){

    .ranking-summary{

        font-size:14px;

        padding:14px;

    }

    .podium-name{

        font-size:22px;

    }

    .podium-value{

        font-size:24px;

    }

    .character-name{

        font-size:15px;

    }

    .zeny-value{

        font-size:17px;

    }

}

/*==================================================
    TRANSITIONS
==================================================*/

.ranking-table,
.ranking-table tr,
.ranking-table td,
.podium-card,
.guild-cell{

    transition:.20s ease;

}

/* Classe */

.job-cell{

    display:flex;

    align-items:center;

    gap:8px;

}

.job-icon{

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#2D2D2D;

    border:1px solid #404040;

    font-size:12px;

    flex-shrink:0;

}

.text-right{

    text-align:right !important;

    padding-right:18px;

}

.ranking-table td.zeny-value{

    text-align:right;

    padding-right:18px;

}

.zeny-header{

    text-align:right;

    padding-right:18px;

}

.zeny-value{

    text-align:right;

    padding-right:18px;

    color:#F5C542;

    font-size:19px;

    font-weight:700;

    white-space:nowrap;

}

.ranking-table{

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}

.ranking-table th{

    white-space:nowrap;

}

.ranking-table td{

    white-space:nowrap;

}

.pvp-points{
    text-align:center;
    font-weight:bold;
    color:#28a745;
}

.guild-column{
    text-align:left;
}

.guild-cell{
    display:flex;
    align-items:center;
    gap:8px;
}