.leaderboard-page .leaderboard-section{
    background-color:#111;
    padding:50px 0;
    width:100%;
    overflow:hidden;
    position:relative;
    z-index:1;
    min-height:100vh
}
.leaderboard-table-fancy{
    width:100%;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(135deg,#1e1e1e,#2a2a2a);
    color:#fff;
    font-family:Kanit,sans-serif;
    box-shadow:0 0 20px rgba(255,255,255,.05);
    margin:0 auto
}
.leaderboard-table-fancy thead th{
    background:linear-gradient(90deg,#393939,#2b2b2b);
    padding:10px;
    font-size:.67rem;
    text-transform:uppercase;
    letter-spacing:.25px;
    word-spacing:-1px;
    white-space:nowrap;
    overflow:hidden;
    border-bottom:1px solid #444
}
.leaderboard-table-fancy tbody td{
    padding:14px 16px;
    font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.05);
    white-space:nowrap;
    overflow:hidden
}
.leaderboard-table-fancy tbody tr:hover td{
    background:rgba(255,255,255,.03)
}
.leaderboard-table-fancy .level-icon{
    position:relative;
    width:48px;
    height:48px;
    margin:auto
}
.leaderboard-table-fancy .level-icon img.frame{
    position:absolute;
    top:0;
    left:0;
    width:48px;
    height:48px;
    z-index:1
}
.leaderboard-table-fancy .level-icon img.level{
    position:absolute;
    top:10px;
    left:10px;
    width:28px;
    height:28px;
    z-index:2
}
.leaderboard-table-fancy .guild-logo{
    width:48px;
    height:48px;
    border-radius:6px;
    display:block;
    margin:auto;
    object-fit:cover
}
.leaderboard-page h2{
    font-size:2.5rem;
    color:#fff;
    text-align:center;
    margin-bottom:50px
}
.leaderboard-page .tab-menu{
    display:flex;
    justify-content:center;
    gap:16px;
    margin:20px 0 40px
}
.leaderboard-page .tab{
    background:#2c2c2c;
    border:none;
    padding:10px 20px;
    border-radius:12px;
    color:#fff;
    cursor:pointer;
    transition:transform .15s;
    font-weight:700;
    text-decoration:none
}
.leaderboard-page .tab:hover{
    transform:scale(1.03);
    background-color:#333
}
.leaderboard-page .tab.active,.leaderboard-page .tab:focus,.leaderboard-page .tab:visited{
    color:#fff!important;
    text-decoration:none
}
.leaderboard-page .fade-in{
    animation:.4s ease-in-out fadeIn
}
.leaderboard-page .leaderboard-table-fancy tbody tr{
    animation:.4s forwards fadeInUp;
    opacity:0
}
.leaderboard-page .leaderboard-table-fancy tbody tr:first-child{
    animation-delay:0s
}
.leaderboard-page .leaderboard-table-fancy tbody tr:nth-child(2){
    animation-delay:50ms
}
.leaderboard-page .leaderboard-table-fancy tbody tr:nth-child(3){
    animation-delay:.1s
}
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes fadeInUp{
    0%{
        opacity:0;
        transform:translateY(10px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}
.leaderboard-wrapper{
    display:flex;
    align-items:stretch;
    justify-content:center;
    position:relative;
    max-width:1100px;
    margin:0 auto;
    width:100%
}
.guild-table,.player-table{
    width:50%;
    padding:0 20px;
    box-sizing:border-box;
    position:relative;
    z-index:1
}
.leaderboard-wrapper::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.1);
    transform:translateX(-50%);
    z-index:0
}
@media (max-width:768px){
    .leaderboard-wrapper{
        flex-direction:column
    }
    .leaderboard-wrapper::before{
        display:none
    }
    .guild-table,.player-table{
        flex-grow:1;
        height:100%
    }
}