/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 1/X
===================================== */


/* =====================================
   RESET GLOBAL
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html,
body{

    width:100%;
    min-height:100%;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:#000;

    color:#fff;

    overflow-x:hidden;

}


body{

    position:relative;

}


/* LINKS */

a{

    text-decoration:none;

    color:white;

}


/* BOTÕES */

button{

    font-family:inherit;

}


/* IMAGENS E VÍDEOS */

img,
video{

    max-width:100%;

    height:auto;

}


/* =====================================
   FUNDO PRINCIPAL
===================================== */


.background{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

}



/* VÍDEO BACKGROUND */

.bg-video{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    object-fit:cover;

    z-index:0;

}



/* CAMADA ESCURA */

.overlay{

    position:relative;

    z-index:1;

    width:100%;

    min-height:100vh;

    background:

    rgba(0,0,0,.65);

}



/* =====================================
   CONTAINER PADRÃO
===================================== */


.container{

    width:95%;

    max-width:1400px;

    margin:0 auto;

}



/* =====================================
   MENU SUPERIOR
===================================== */


.menu-fixed{

    width:100%;

    position:relative;

    z-index:10;

}



.top-menu{

    width:95%;

    max-width:1400px;

    min-height:70px;

    margin:20px auto;


    padding:

    15px 30px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    gap:20px;


    background:

    rgba(10,10,10,.92);


    border:

    1px solid #8b6b20;


    border-radius:15px;


    box-shadow:

    0 0 25px

    rgba(212,175,55,.25);


}



/* NOME SERVIDOR */


.server-name{

    color:#d4af37;

    font-size:28px;

    font-weight:bold;

    letter-spacing:3px;

    white-space:nowrap;

}



/* MENU LINKS */


.top-menu nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}



.top-menu nav a{

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}



.top-menu nav a:hover{

    color:#d4af37;

}



/* =====================================
   BOTÕES PREMIUM
===================================== */


.login-btn,
.play-button,
.download-btn,
.painel-btn{


    position:relative;

    overflow:hidden;


    background:

    linear-gradient(

    180deg,

    #d4af37,

    #8b6b20

    );


    color:#111;


    border:none;


    border-radius:10px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;


}



.login-btn{

    padding:

    12px 28px;


    font-size:15px;

}



.login-btn:hover,
.play-button:hover,
.download-btn:hover,
.painel-btn:hover{

    transform:

    scale(1.05);


    box-shadow:

    0 0 20px

    rgba(212,175,55,.65);

}



/* EFEITO DE BRILHO */


.login-btn::before,
.play-button::before,
.download-btn::before,
.painel-btn::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:100%;


    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );


    transition:.6s;


}



.login-btn:hover::before,
.play-button:hover::before,
.download-btn:hover::before,
.painel-btn:hover::before{

    left:120%;

}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 2/X
===================================== */


/* =====================================
   PAINEL STATUS SERVIDOR
===================================== */


.server-panel{

    width:90%;

    max-width:650px;

    margin:

    50px auto 30px;


    padding:35px;


    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    text-align:center;


    box-shadow:

    0 0 30px

    rgba(212,175,55,.25);


}



.server-panel h2{

    color:#d4af37;

    font-size:30px;

    margin-bottom:20px;

}



.server-online{

    color:#00ff66;

    font-size:24px;

    font-weight:bold;

    margin-bottom:15px;

}



.server-info{

    color:white;

    font-size:18px;

    line-height:1.6;

}



/* BOTÃO JOGAR */

.play-button{

    display:inline-block;

    margin-top:30px;

    padding:

    15px 50px;


    font-size:18px;

}



/* =====================================
   NOTÍCIAS
===================================== */


.news-panel{

    width:90%;

    max-width:950px;

    margin:

    30px auto;


    padding:30px;


    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    box-shadow:

    0 0 25px

    rgba(212,175,55,.20);


}



.news-panel h2{

    text-align:center;

    color:#d4af37;

    font-size:28px;

    margin-bottom:25px;

}



.news-item{

    background:#111;

    border:

    1px solid #333;


    border-radius:12px;


    padding:18px;


    margin-bottom:15px;


    color:#d4af37;


    font-weight:bold;

}



.news-item span{

    display:block;

    margin-top:8px;

    color:white;

    font-size:14px;

    font-weight:normal;

    line-height:1.5;

}



/* =====================================
   MODAL LOGIN
===================================== */


.login-modal{

    display:none;

    position:fixed;

    inset:0;


    background:

    rgba(0,0,0,.80);


    z-index:9999;


    align-items:center;

    justify-content:center;


    padding:20px;

}



.login-box{

    width:100%;


    max-width:430px;


    padding:35px;


    background:#0b0b0b;


    border:

    1px solid #d4af37;


    border-radius:18px;


    box-shadow:

    0 0 35px

    rgba(212,175,55,.50);


    position:relative;


    animation:

    fadeUp .4s ease;


    text-align:center;

}



.close-login{

    position:absolute;


    right:20px;


    top:15px;


    color:#d4af37;


    font-size:28px;


    cursor:pointer;

}



.login-box h2{

    color:#d4af37;


    font-size:28px;


    margin-bottom:10px;

}



.login-subtitle{

    color:#ccc;

    margin-bottom:25px;

}



/* =====================================
   INPUTS
===================================== */


.login-box input,
.cadastro-box input{


    width:100%;


    padding:14px;


    margin:

    8px 0;


    background:#111;


    color:white;


    border:

    1px solid #444;


    border-radius:10px;


    outline:none;


    font-size:15px;


}



.login-box input:focus,
.cadastro-box input:focus{


    border-color:#d4af37;


    box-shadow:

    0 0 8px

    rgba(212,175,55,.40);


}



/* BOTÃO FORMULÁRIOS */


.login-box button,
.cadastro-box button{


    width:100%;


    padding:15px;


    margin-top:20px;


    background:

    linear-gradient(

    180deg,

    #d4af37,

    #8b6b20

    );


    color:#111;


    border:none;


    border-radius:10px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;


}



.login-box button:hover,
.cadastro-box button:hover{


    transform:

    scale(1.03);


}



/* =====================================
   PÁGINA CADASTRO
===================================== */


.cadastro-page{


    width:95%;


    max-width:600px;


    margin:

    50px auto;


    padding:20px;


}



.cadastro-box{


    background:

    rgba(10,10,10,.92);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:35px;


    box-shadow:

    0 0 30px

    rgba(212,175,55,.25);


}



.cadastro-box h1{


    text-align:center;


    color:#d4af37;


    margin-bottom:30px;


    font-size:30px;


}



.cadastro-box label{


    display:block;


    color:#d4af37;


    margin-top:15px;


    font-weight:bold;


}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 3/X
===================================== */


/* =====================================
   PAINEL DO JOGADOR
===================================== */


.painel-layout{

    width:95%;

    max-width:1400px;

    margin:40px auto;

    display:flex;

    gap:30px;

    align-items:flex-start;

}



/* =====================================
   MENU LATERAL
===================================== */


.menu-lateral{

    width:280px;

    flex-shrink:0;

    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


}



.menu-logo{

    text-align:center;

    margin-bottom:25px;

}



.menu-logo h2{

    color:#d4af37;

    font-size:24px;

}



.menu-logo span{

    display:block;

    color:#aaa;

    margin-top:8px;

}



.menu-logo strong{

    color:white;

}



/* LINKS MENU */


.menu-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.menu-item{

    display:block;

    padding:14px;


    background:#111;


    border:

    1px solid #333;


    border-radius:10px;


    color:white;


    transition:.3s;


}



.menu-item:hover{

    border-color:#d4af37;

    color:#d4af37;

}



.menu-item.sair{

    margin-top:15px;

}



/* =====================================
   CONTEÚDO DO PAINEL
===================================== */


.conteudo-painel{

    flex:1;

    min-width:0;

}



/* TOPO PAINEL */


.painel-topo{


    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:30px;


    text-align:center;


    margin-bottom:30px;


}



.painel-topo h1{


    color:#d4af37;


    font-size:32px;


}



.painel-topo p{


    color:white;


    font-size:18px;


    margin-top:10px;


}



/* =====================================
   GRID PERSONAGENS
===================================== */


.painel-grid{

    width:100%;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:25px;

}



/* CARD PERSONAGEM */


.char-card{


    width:100%;


    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    transition:.3s;


}



.char-card:hover{


    transform:

    translateY(-5px);


    border-color:#d4af37;


    box-shadow:

    0 0 35px

    rgba(212,175,55,.40);


}



.char-card h2{

    color:#d4af37;

    margin-bottom:15px;

}



.char-card p{

    color:white;

    margin-bottom:8px;

}



.char-card b{

    color:#d4af37;

}



/* STATUS PLAYER */


.online{

    color:#00ff66;

    font-weight:bold;

}



.offline{

    color:#ff4444;

    font-weight:bold;

}



/* BOTÃO PERSONAGEM */


.painel-btn{


    width:100%;


    margin-top:15px;


    padding:14px;


}



/* =====================================
   LISTA DE PERSONAGENS
===================================== */


.lista-personagens{


    background:#0b0b0b;


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    margin-bottom:30px;


}



.lista-personagens h2{


    text-align:center;


    color:#d4af37;


    margin-bottom:20px;


}



.lista-personagens a{


    display:inline-block;


    min-width:220px;


    padding:15px;


    margin:10px;


    background:#111;


    border:

    1px solid #333;


    border-radius:10px;


    color:white;


    text-align:center;


}



.lista-personagens a:hover{


    border-color:#d4af37;


    color:#d4af37;


}



/* =====================================
   MINHA CONTA
===================================== */


.conta-page{


    width:95%;


    max-width:1000px;


    margin:40px auto;


}



.conta-page h1{


    text-align:center;


    color:#d4af37;


    margin-bottom:30px;


}



.conta-card{


    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    margin-bottom:25px;


}



.conta-card h2{


    color:#d4af37;


    margin-bottom:20px;


}



.conta-info{


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:12px;


    border-bottom:

    1px solid #333;


}



.conta-info span:first-child{


    color:#aaa;


}



.conta-info span:last-child{


    color:white;


    font-weight:bold;


}



/* =====================================
   STATUS DO PLAYER
===================================== */


.player-status{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.status-box{


    flex:1;


    min-width:200px;


    background:#111;


    border:

    1px solid #333;


    border-radius:12px;


    padding:20px;


    text-align:center;


}



.status-box h3{


    color:#d4af37;


    margin-bottom:10px;


}



.status-box p{


    color:white;


    font-size:20px;


    font-weight:bold;


}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 4/X
===================================== */


/* =====================================
   RANKING
===================================== */


.ranking-page{

    width:95%;

    max-width:1400px;

    margin:40px auto;

}



.ranking-page h1{

    text-align:center;

    color:#d4af37;

    font-size:38px;

    letter-spacing:3px;

    margin-bottom:40px;

}



/* GRID RANKING */


.ranking-container{

    display:grid;

    grid-template-columns:

    repeat(3,minmax(280px,1fr));


    gap:25px;

}



/* CARD RANKING */


.ranking-card{

    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    box-shadow:

    0 0 25px

    rgba(212,175,55,.20);


}



.ranking-card h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:25px;

}



/* JOGADOR RANKING */


.rank-player{

    display:flex;

    align-items:center;

    gap:15px;


    padding:15px;


    margin-bottom:12px;


    background:#111;


    border:

    1px solid #333;


    border-radius:12px;


}



.rank-position{


    width:40px;


    height:40px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#222;


    color:#d4af37;


    font-weight:bold;


    flex-shrink:0;


}



.rank-info{


    flex:1;


}



.rank-info b{


    color:#d4af37;


    font-size:18px;


}



.rank-info span{


    display:block;


    color:white;


    margin-top:5px;


    font-size:14px;


}



.rank-class{


    color:#aaa;


}



/* MEDALHAS */


.rank-player:nth-child(2) .rank-position{


    background:#d4af37;

    color:#111;

}



.rank-player:nth-child(3) .rank-position{


    background:#c0c0c0;

    color:#111;

}



.rank-player:nth-child(4) .rank-position{


    background:#cd7f32;

    color:#111;

}



/* VOLTAR */


.ranking-voltar{


    text-align:center;


    margin-top:40px;


}



/* =====================================
   DOWNLOAD
===================================== */


.download-page{


    width:95%;


    max-width:1200px;


    margin:40px auto;


}



.download-page h1{


    text-align:center;


    color:#d4af37;


    font-size:38px;


    margin-bottom:40px;


}



/* GRID DOWNLOAD */


.download-container{


    display:grid;


    grid-template-columns:


    repeat(3,minmax(280px,1fr));


    gap:30px;


}



/* CARD DOWNLOAD */


.download-card{


    background:


    rgba(10,10,10,.90);


    border:


    1px solid #8b6b20;


    border-radius:18px;


    padding:35px 25px;


    text-align:center;


    box-shadow:


    0 0 25px


    rgba(212,175,55,.20);


}



.download-card:hover{


    transform:


    translateY(-8px);


    border-color:#d4af37;


}



.download-icon{


    font-size:55px;


    margin-bottom:20px;


}



.download-card h2{


    color:#d4af37;


    margin-bottom:15px;


}



.download-card p{


    color:white;


    line-height:1.6;


    min-height:60px;


}



.download-btn{


    display:inline-block;


    margin-top:25px;


    padding:


    14px 35px;


}



/* INFO DOWNLOAD */


.download-info{


    margin-top:15px;


    color:#aaa;


    font-size:13px;


}



/* =====================================
   PÁGINA INFORMAÇÕES
===================================== */


.info-page{


    width:95%;


    max-width:1200px;


    margin:40px auto;


}



.info-page h1{


    text-align:center;


    color:#d4af37;


    font-size:42px;


    letter-spacing:3px;


}



.info-page h2{


    text-align:center;


    color:white;


    margin:

    15px 0 35px;


}



.info-intro{


    max-width:1000px;


    margin:auto;


    text-align:center;


    color:white;


    font-size:18px;


    line-height:1.8;


}



/* GRID INFORMAÇÕES */


.info-grid{


    display:grid;


    grid-template-columns:


    repeat(3,minmax(280px,1fr));


    gap:25px;


    margin-top:40px;


}



/* CARD INFORMAÇÃO */


.info-card{


    background:


    rgba(10,10,10,.90);


    border:


    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    min-height:250px;


}



.info-card h3{


    color:#d4af37;


    text-align:center;


    margin-bottom:20px;


}



.info-card p{


    color:white;


    line-height:1.7;


}



/* FINAL INFORMAÇÕES */


.info-final{


    margin:40px auto;


    padding:30px;


    text-align:center;


    background:


    rgba(10,10,10,.90);


    border:


    1px solid #8b6b20;


    border-radius:18px;


    color:#d4af37;


    font-size:22px;


}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 5/X FINAL
===================================== */


/* =====================================
   TRANSIÇÕES GERAIS
===================================== */


button,
a,
.server-panel,
.news-panel,
.ranking-card,
.download-card,
.conta-card,
.info-card,
.login-box,
.cadastro-box,
.char-card,
.menu-item{


    transition:

    all .3s ease;


}



/* =====================================
   ANIMAÇÃO DE ENTRADA
===================================== */


.server-panel,
.news-panel,
.ranking-card,
.download-card,
.conta-card,
.info-card,
.login-box,
.cadastro-box,
.char-card{


    animation:

    fadeUp .7s ease;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(30px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}



/* =====================================
   BRILHO PREMIUM
===================================== */


.server-panel:hover,
.news-panel:hover,
.ranking-card:hover,
.download-card:hover,
.conta-card:hover,
.info-card:hover,
.char-card:hover{


    border-color:#d4af37;


    box-shadow:


    0 0 20px

    rgba(212,175,55,.45),


    0 0 40px

    rgba(212,175,55,.15);


}



/* =====================================
   SCROLL PREMIUM
===================================== */


::-webkit-scrollbar{


    width:10px;


}



::-webkit-scrollbar-track{


    background:#050505;


}



::-webkit-scrollbar-thumb{


    background:#8b6b20;


    border-radius:10px;


}



::-webkit-scrollbar-thumb:hover{


    background:#d4af37;


}



/* =====================================
   CORREÇÃO ESCALA 100%
===================================== */


html{


    scroll-behavior:smooth;


}



body{


    overflow-x:hidden;


}



/* Evita quebra de layout */


.container,
.top-menu,
.server-panel,
.news-panel,
.painel-layout,
.ranking-page,
.download-page,
.info-page{


    max-width:100%;


}



/* =====================================
   NOTEBOOK 1366x768
===================================== */


@media(max-width:1400px){


    .top-menu{


        width:94%;


    }



    .server-name{


        font-size:24px;


    }



    .painel-layout{


        width:94%;


    }



    .menu-lateral{


        width:250px;


    }



}



/* =====================================
   TABLET
===================================== */


@media(max-width:1100px){


    .painel-layout{


        flex-direction:column;


    }



    .menu-lateral{


        width:100%;


    }



    .ranking-container,
    .download-container,
    .info-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



}



/* =====================================
   TABLET PEQUENO
===================================== */


@media(max-width:900px){


    .top-menu{


        flex-direction:column;


        text-align:center;


    }



    .top-menu nav{


        justify-content:center;


    }



    .login-btn{


        width:100%;


    }



}



/* =====================================
   CELULAR
===================================== */


@media(max-width:600px){


    body{


        font-size:14px;


    }



    .top-menu{


        padding:20px;


    }



    .server-name{


        font-size:20px;


        letter-spacing:1px;


    }



    .top-menu nav{


        gap:12px;


    }



    .top-menu nav a{


        font-size:14px;


    }



    .server-panel{


        width:95%;


        padding:20px;


    }



    .server-panel h2{


        font-size:22px;


    }



    .news-panel{


        width:95%;


        padding:15px;


    }



    .login-box,
    .cadastro-box{


        padding:20px;


    }



    .ranking-container,
    .download-container,
    .info-grid{


        grid-template-columns:

        1fr;


    }



    .ranking-page h1,
    .download-page h1{


        font-size:28px;


    }



    .info-page h1{


        font-size:32px;


    }



    .conta-info{


        flex-direction:column;


        align-items:flex-start;


        gap:8px;


    }



    .rank-player{


        gap:10px;


    }



    .rank-info b{


        font-size:15px;


    }



}



/* =====================================
   FULL HD 1920X1080
===================================== */


@media(min-width:1600px){


    .top-menu{


        max-width:1500px;


    }



    .server-panel{


        max-width:700px;


    }



}



/* =====================================
   CORREÇÃO FINAL DE BOTÕES
===================================== */


.login-btn,
.play-button,
.download-btn,
.painel-btn{


    user-select:none;


}



.login-btn:active,
.play-button:active,
.download-btn:active,
.painel-btn:active{


    transform:scale(.98);


}



/* =====================================
   FIM CSS L2 EVOLUTION
===================================== */
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 6/X
===================================== */


/* =====================================
   INFORMAÇÕES DA CONTA
===================================== */


.conta-info span:first-child{

    color:#aaa;

}



.conta-info span:last-child{

    color:white;

    font-weight:bold;

}



/* =====================================
   STATUS DO JOGADOR
===================================== */


.player-status{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:20px;

    flex-wrap:wrap;

}



.status-box{

    flex:1;

    min-width:220px;

    max-width:350px;

    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:15px;


    padding:20px;


    text-align:center;


    box-shadow:

    0 0 20px

    rgba(212,175,55,.15);


}



.status-box h3{

    color:#d4af37;

    font-size:18px;

    margin-bottom:10px;

}



.status-box p{

    color:white;

    font-size:20px;

    font-weight:bold;

}



/* =====================================
   AJUSTES DO PAINEL RESPONSIVO
===================================== */


@media(max-width:1100px){


    .painel-layout{

        flex-direction:column;

        width:95%;

        margin:auto;

    }



    .menu-lateral{

        width:100%;

        position:relative;

    }



    .conteudo-painel{

        width:100%;

    }



    .painel-grid{

        grid-template-columns:

        repeat(2,1fr);

    }



}



@media(max-width:750px){


    .painel-layout{

        width:95%;

    }



    .painel-grid{

        grid-template-columns:

        1fr;

    }



    .char-card{

        padding:20px;

    }



    .conta-info{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }



}



/* =====================================
   CORREÇÃO DE ALINHAMENTO GERAL
===================================== */


.painel-layout,
.ranking-page,
.download-page,
.info-page,
.cadastro-page{

    position:relative;

    z-index:2;

}



.painel-layout *{

    max-width:100%;

}



/* Evita estouro horizontal */

.char-card,
.conta-card,
.status-box,
.menu-lateral{

    overflow:hidden;

}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 7/X
===================================== */


/* =====================================
   RANKING
===================================== */


.ranking-page{

    width:95%;

    max-width:1400px;

    margin:40px auto;

    position:relative;

}



.ranking-page h1{

    text-align:center;

    color:#d4af37;

    font-size:38px;

    letter-spacing:3px;

    margin-bottom:40px;

}



/* GRID RANKING */


.ranking-container{

    display:grid;

    grid-template-columns:

    repeat(3,minmax(280px,1fr));


    gap:25px;

}



/* CARD RANKING */


.ranking-card{

    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:25px;


    box-shadow:

    0 0 25px

    rgba(212,175,55,.20);


}



.ranking-card h2{

    color:#d4af37;

    text-align:center;

    margin-bottom:25px;

}



/* JOGADOR DO RANKING */


.rank-player{

    display:flex;

    align-items:center;

    gap:15px;


    padding:15px;


    margin-bottom:12px;


    background:#111;


    border:

    1px solid #333;


    border-radius:12px;


}



.rank-position{

    width:40px;

    height:40px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#222;


    color:#d4af37;


    font-weight:bold;


    flex-shrink:0;


}



.rank-info{

    flex:1;

}



.rank-info b{

    color:#d4af37;

    font-size:18px;

}



.rank-info span{

    display:block;

    color:white;

    margin-top:5px;

    font-size:14px;

}



.rank-class{

    color:#aaa;

}



/* MEDALHAS CORRIGIDAS */


.rank-player:nth-child(1) .rank-position{

    background:#d4af37;

    color:#111;

}



.rank-player:nth-child(2) .rank-position{

    background:#c0c0c0;

    color:#111;

}



.rank-player:nth-child(3) .rank-position{

    background:#cd7f32;

    color:#111;

}



/* BOTÃO VOLTAR */


.ranking-voltar{

    text-align:center;

    margin-top:40px;

}



/* =====================================
   DOWNLOAD
===================================== */


.download-page{

    width:95%;

    max-width:1200px;

    margin:40px auto;

}



.download-page h1{

    text-align:center;

    color:#d4af37;

    font-size:38px;

    margin-bottom:40px;

}



/* GRID DOWNLOAD */


.download-container{

    display:grid;

    grid-template-columns:

    repeat(3,minmax(280px,1fr));


    gap:30px;

}



/* CARD DOWNLOAD */


.download-card{

    background:

    rgba(10,10,10,.90);


    border:

    1px solid #8b6b20;


    border-radius:18px;


    padding:35px 25px;


    text-align:center;


    box-shadow:

    0 0 25px

    rgba(212,175,55,.20);


}



.download-card:hover{

    transform:

    translateY(-8px);


    border-color:#d4af37;

}



.download-icon{

    font-size:55px;

    margin-bottom:20px;

}



.download-card h2{

    color:#d4af37;

    margin-bottom:15px;

}



.download-card p{

    color:white;

    line-height:1.6;

    min-height:60px;

}



.download-btn{

    display:inline-block;

    margin-top:25px;

    padding:

    14px 35px;

}



/* INFORMAÇÃO DOWNLOAD */


.download-info{

    margin-top:15px;

    color:#aaa;

    font-size:13px;

}



/* =====================================
   PÁGINA DE INFORMAÇÕES
===================================== */


.info-page{

    width:95%;

    max-width:1200px;

    margin:40px auto;

}



.info-page h1{

    text-align:center;

    color:#d4af37;

    font-size:42px;

    letter-spacing:3px;

}



.info-page h2{

    text-align:center;

    color:white;

    margin:

    15px 0 35px;

}



.info-intro{

    max-width:1000px;

    margin:auto;


    text-align:center;


    color:white;


    font-size:18px;


    line-height:1.8;


}



/* GRID INFORMAÇÕES */


.info-grid{

    display:grid;


    grid-template-columns:


    repeat(3,minmax(280px,1fr));


    gap:25px;


    margin-top:40px;


}



/* CARD INFORMAÇÃO */


.info-card{


    background:


    rgba(10,10,10,.90);



    border:


    1px solid #8b6b20;



    border-radius:18px;



    padding:25px;



    min-height:250px;


}



.info-card h3{


    color:#d4af37;


    text-align:center;


    margin-bottom:20px;


}



.info-card p{


    color:white;


    line-height:1.7;


}



/* FINAL */


.info-final{


    margin:40px auto;


    padding:30px;


    text-align:center;


    background:


    rgba(10,10,10,.90);



    border:


    1px solid #8b6b20;



    border-radius:18px;



    color:#d4af37;



    font-size:22px;


}
/* =====================================
   L2 EVOLUTION
   CSS PROFISSIONAL CORRIGIDO
   PARTE 8/X FINAL
===================================== */


/* =====================================
   TRANSIÇÕES GERAIS
===================================== */


button,
a,
.server-panel,
.news-panel,
.ranking-card,
.download-card,
.conta-card,
.info-card,
.login-box,
.cadastro-box,
.char-card,
.status-box,
.menu-item{


    transition:

    all .3s ease;


}



/* =====================================
   ANIMAÇÃO DE ENTRADA
===================================== */


.server-panel,
.news-panel,
.ranking-card,
.download-card,
.conta-card,
.info-card,
.login-box,
.cadastro-box,
.char-card,
.status-box{


    animation:

    fadeUp .7s ease;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(30px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}



/* =====================================
   EFEITO BRILHO PREMIUM
===================================== */


.server-panel:hover,
.news-panel:hover,
.ranking-card:hover,
.download-card:hover,
.conta-card:hover,
.info-card:hover,
.char-card:hover,
.status-box:hover{


    border-color:#d4af37;


    box-shadow:


    0 0 20px

    rgba(212,175,55,.45),


    0 0 40px

    rgba(212,175,55,.15);


}



/* =====================================
   EFEITO DE BOTÃO PREMIUM
===================================== */


.login-btn,
.play-button,
.download-btn,
.painel-btn{


    position:relative;


    overflow:hidden;


}



.login-btn::before,
.play-button::before,
.download-btn::before,
.painel-btn::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:100%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );


    transition:.6s;


}



.login-btn:hover::before,
.play-button:hover::before,
.download-btn:hover::before,
.painel-btn:hover::before{


    left:120%;


}



/* =====================================
   SCROLL PREMIUM
===================================== */


::-webkit-scrollbar{


    width:10px;


}



::-webkit-scrollbar-track{


    background:#050505;


}



::-webkit-scrollbar-thumb{


    background:#8b6b20;


    border-radius:10px;


}



::-webkit-scrollbar-thumb:hover{


    background:#d4af37;


}



/* =====================================
   AJUSTE ESCALA 100%
===================================== */


html{


    width:100%;


    scroll-behavior:smooth;


}



body{


    width:100%;


    overflow-x:hidden;


}



img,
video{


    max-width:100%;


    height:auto;


}



/* =====================================
   NOTEBOOK 1366x768
===================================== */


@media(max-width:1400px){


    .top-menu{


        width:94%;


    }



    .server-name{


        font-size:24px;


    }



    .painel-layout{


        width:94%;


    }



    .ranking-container,
    .download-container,
    .info-grid{


        gap:20px;


    }


}



/* =====================================
   TABLET
===================================== */


@media(max-width:1100px){


    .ranking-container,
    .download-container,
    .info-grid{


        grid-template-columns:


        repeat(2,1fr);


    }



    .painel-layout{


        flex-direction:column;


    }



    .menu-lateral{


        width:100%;


    }


}



/* =====================================
   TABLET PEQUENO
===================================== */


@media(max-width:900px){


    .top-menu{


        flex-direction:column;


        text-align:center;


    }



    .top-menu nav{


        justify-content:center;


    }



    .login-btn{


        width:100%;


    }



}



/* =====================================
   CELULAR
===================================== */


@media(max-width:600px){


    body{


        font-size:14px;


    }



    .background{


        min-height:100vh;


    }



    .bg-video{


        height:100vh;


        object-fit:cover;


    }



    .top-menu{


        padding:20px;


    }



    .server-name{


        font-size:20px;


        letter-spacing:1px;


    }



    .top-menu nav{


        gap:12px;


    }



    .top-menu nav a{


        font-size:14px;


    }



    .server-panel{


        width:95%;


        padding:20px;


    }



    .server-panel h2{


        font-size:22px;


    }



    .news-panel{


        width:95%;


        padding:15px;


    }



    .ranking-container,
    .download-container,
    .info-grid{


        grid-template-columns:


        1fr;


    }



    .ranking-page h1,
    .download-page h1{


        font-size:28px;


    }



    .info-page h1{


        font-size:32px;


    }



    .rank-player{


        gap:10px;


    }



    .rank-info b{


        font-size:15px;


    }



    .download-card{


        padding:25px 15px;


    }



    .login-box,
    .cadastro-box{


        padding:20px;


    }



}



/* =====================================
   FULL HD 1920X1080
===================================== */


@media(min-width:1600px){


    .top-menu{


        max-width:1500px;


    }



    .server-panel{


        max-width:700px;


    }



    .container{


        max-width:1500px;


    }


}



/* =====================================
   CORREÇÃO FINAL
===================================== */


*,
*::before,
*::after{


    box-sizing:border-box;


}



button,
input,
textarea,
select{


    font-family:inherit;


}



/* REMOVE QUEBRA HORIZONTAL */


html,
body{


    max-width:100%;


    overflow-x:hidden;


}



/* =====================================
   FIM CSS L2 EVOLUTION
===================================== */