body {
    background-image: url(/images/background-top.webp);
    background-repeat: no-repeat;
    /* CORREÇÃO: Empurra a imagem 80px para baixo para não ficar atrás do menu */
    background-position: center 80px !important;
    background-size: 100% auto; /* Ajuste para cobrir a largura */
    background-color: #131118;
}

body > header > nav{
    height: 75px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.219);
    font-family: 'Josefin Sans', sans-serif;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7511205165660014) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7511205165660014) 100%);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7511205165660014) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1); 
}

body > header > nav > .container{
    z-index:3;
}

a.nav-link:hover{
    background-color: #13111838;
    border-bottom:2px solid #892f24 !important;
    transition: 0.5s all;
}

a {
    color: #DAA520; /* GoldenRod - Amarelo Escuro */
    text-decoration: none;
}

.navbar-brand > img{
    height: 25px;
}

div > ul > li.nav-item > a.nav-link{
    color: white !important;
    font-size: 1.125rem;
    padding: 24px !important;
    border-bottom:2px solid #89302400;
}

.home-download-box{
    margin-top: 115px;
}

.home-login-box{
    max-width: 300px;
    background-color: #171717;
    padding: 60px 30px 30px 30px;
    color: white;
}

.btn-home-download-box{
    box-shadow: 1px -10px 40px 20px rgba(255, 0, 0, 0.178);
    transition: 0.9s;
}

.btn-home-download-box:hover{
    box-shadow: 1px -10px 40px 20px rgba(255, 0, 0, 0.411);
    transform: translate(0px, 5px);
    transform: scale(1.1) perspective(1px);
}

.btn-home-login-box{
    text-align: center;
    display: block;
    background-color: #271f1f;
    color: white;
    text-decoration: none;
    line-height: 50px;
    height: 50px;
    transition: 0.9s;
    margin-bottom: 30px;
    font-family: 'Cinzel', serif;
}

.home-login-box > span{
    font-size: 0.875rem;
}

.btn-home-login-box:hover{
    background-color: #352929;
    color: white;
}

.home-logo-decorator{
    position: relative;
}

.logo{
    position: absolute;
    top: 136px;
    z-index: 1;
    left: 30px;
}

.decorator-render{
    position: absolute;
    top: -70px;
    left: 300px;
}

.box{
    width: 215px;
    height: 215px;
    background-color: red;
    border: 1px solid white;
}

.top-players-home{
    z-index: 2;
    position: relative;
    margin-top: 30px;
    /* background-image: url(/images/bg-title.webp); */
    height: 77px;
    color: white;
    font-family: 'Cinzel', serif;
}

.top-players-home > h1{
    font-size: 1.5rem;
    margin-bottom: 0px !important;
    padding-top: 15px;
}

.top-players-cards{
   /* background-color: #171717; */
    position: relative;
    padding: 20px;
}

.player-card{
    width: 214px;
    height: 214px;
    margin-left: 20px;
}

.player-bg-card{
    background-image: url(/images/class-icon.webp);
    background-size: 1080px 425px;
    background-repeat: no-repeat;
    position: relative;
    height: inherit;
    font-family: 'Josefin Sans', sans-serif;
}

.player-name{
    position: absolute;
    font-size: 1.3rem;
    bottom: 58px;
    display: block;
    width: 210px;
    text-align: center;
    font-weight: 500;
    background: #DD8637;
    background: -webkit-linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
    background: -moz-linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
    background: linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}
.player-level{
    position: absolute;
    font-size: 1.0rem;
    bottom: 32px;
    display: block;
    width: 210px;
    text-align: center;
    font-weight: 400;
    background: #DD8637;
    background: -webkit-linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
    background: -moz-linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
    background: linear-gradient(to right, #DD8637 0%, #F7E061 50%, #DD8637 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

/* Class positions with-wolf */
.warrior-m{
    background-position: 0 0;
    transition: 0.3s ;
}

.warrior-f{
    background-position: 0 -213px;
    transition: 0.3s ;
}

.ninja-m{
    background-position: -216px 0;
    transition: 0.3s ;
}

.ninja-f{
    background-position: -216px -213px;
    transition: 0.3s ;
}

.shura-m{
    background-position: -432px 0;
    transition: 0.3s ;
}

.shura-f{
    background-position: -432px -213px;
    transition: 0.3s ;
}

.shaman-m{
    background-position: -650px 0;
    transition: 0.3s ;
}

.shaman-f{
    background-position: -650px -213px;
    transition: 0.3s ;
}

.lycan-m{
    background-position: -865px 0;
    transition: 0.3s;
}
/* Class positions end */

.home-news-bg{
    /* background-image: url(/images/bg-news.webp); */
    background-repeat: repeat-y;
    background-size: cover;
    background-position-y: -50px;
}

.home-container{
    position: relative;
    padding: 30px 30px 30px 30px;
    color: white;
}

.home-container h2{
    font-family: 'Cinzel', serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
    padding-left: 30px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
h2 > a{
    float:right;
    text-decoration: none;
    color: white;
}

h2 > a:hover{
    color: rgba(255, 255, 255, 0.322);
}

.news-home-list{
    list-style: none;
    padding: 0;
}

.news-home-list > li{
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
    font-size: 0.9rem;
}

.news-home-list > li > a{
    text-decoration: none;
    color: white;
    display: block;
}
.news-home-list > li > i{
    /* float: right; */
    font-style: normal;
    font-size: 0.8rem;
}

.carousel-size{
    margin:auto;
}

.carousel-size, .carousel-item{
    max-width: 530px;
    max-height: 260px;
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.56);
}

.home-footer-bg{
    background-color: #171717;
}

.copyright{
    background-color: #282828;
}

.home-statistics{
    padding-right: 30px;
    font-size: 0.9rem;
}
.home-statistics > li{
    display: flex;
    justify-content: space-between;
}

.home-statistics > li > hr{
    height: 1px;
    color:rgba(255, 255, 255, 0.541);
    flex-grow: 1;
    margin-left: 15px;
    margin-right: 15px;
}

.footer-links,
.footer-social-medias{
    list-style: none;
    max-width: 300px;
}

.footer-links > li{
    padding-top: 10px !important;
}

.footer-links > li > a{
    color: #f64242;
}

.footer-social-medias {
    /* float: right; */
    padding-right: 40px;
}

.footer-social-medias > li {
    display: inline-block;
    margin-right: 15px;
    font-size: 1.3rem;
}
.footer-social-medias > li > a{
    color: white;
}

.home-content{
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}

.content-title {
    /* Fundo: Bronze Escuro (Mistura de preto com o dourado do tema) */
    background-color: #573821 !important; 
    
    /* Detalhe: Uma borda lateral grossa para dar estilo */
    border-left: 5px solid #b7950b !important;
    border-radius: 4px; /* Cantos levemente arredondados */
    
    /* Espaçamento interno para o texto não colar nas bordas */
    padding: 20px 25px !important; 
    margin: 40px 0px 20px 0px;
    
    /* Sombra para dar profundidade */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    
    text-align: left;
}

.content-title h1 {
    color: #fff; /* Texto branco para leitura clara */
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.8rem;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    border: none; /* Removemos linhas extras */
}



article > span{
    margin-bottom: 15px;
    display: block;
    text-align: end;
}

.home-content > .container > .content-bg{
    background-color: #171717;
    color: rgb(199, 196, 196);
    padding: 15px 40px 15px 40px;
}

.user-forms{
    max-width: 500px;
    margin: auto;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.144);
}

.tooltip-inner {
    max-width: 350px;
    text-align: start;
}

.nav-link.active{
    background-color: #8a1e10f5 !important;
}

.nav-link{
    color: #df402bf5;
}

.nav-link:hover{
    color: #fff;
}

.btn-primary{
    background-color: #da8c20;
    border: 1px solid #da8c20;
}

.btn-primary:hover{
    background-color: #8a1e10f5;
    border: 1px solid #da8c20;
}

.btn-primary:focus{
    background-color: #8a1e10f5;
    border: 1px solid #da8c20;
}

input{
    background-color: #2b2a2a !important;
    border: 1px solid #2b2a2a !important;
    color: #8d8d8d !important;
}

.user-forms > .input-group > span.input-group-text{
    background-color: #383838 !important;
    border: 1px solid #383838 !important;
    color: #ffffff !important;
}

.content-bg > table{
    width: 100%;
    text-align: center;
}

.content-bg > table td, th{
    padding: 10px;
    border: 1px solid #383838;
    background-color: rgb(19, 18, 18);
}

.content-bg .ranking-class img{
    width: 20%;
}

ul.pagination > li > a{
    background-color: rgb(24, 23, 23) !important;
    color: #fff !important;
    border: 1px solid #383838;
}

ul.pagination > li > a:hover{
    border: 1px solid #585757;
}

.content-bg > ul, .user-menu{
    list-style: none;
    padding: 0;
}

.user-menu > li > a{
    color: #da8c20;
}

.user-menu > li > a:hover{
    color: #922213;
}

.user-account-bonus > div {
    border: 1px solid #585757;
    padding: 10px;
}

.user-account-bonus > div:hover{
    background-color: rgb(53, 47, 47);
}

.user-account-bonus > div > img{
    margin-top: 5px;
    max-height: 32px;
    max-width: 32px;
}

table.user-vote4coins td{
    border: 1px solid #585757;
    padding: 10px;
}

.user-account-info > li > span{
    color:#9c1a09;
    font-weight: bold;
    margin-right: 5px;
}

.user-characters td{
    border: 1px solid #383838;
    padding: 15px;
    background-color: rgb(19, 18, 18);
}

.user-characters > thead{
    text-align: center;
}

.user-characters td > b{
    color:#9c1a09;
}

.player-profile {
    background-image: url('/images/profile/background.webp');
    background-repeat: no-repeat;
}

.player-profile > table > tbody > tr > td{
    padding: 10px 80px;
    border: 1px solid #383838;
    background-color: rgb(24, 23, 23);
}

.align-chivalric {
    color: #3399FF;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-noble {
    color: #0066CC;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-good {
    color: #003366;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-friendly {
    color: #336699;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-neutral {
    color: #fff;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-aggressive {
    color: #660000;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-fraudulent {
    color: #990000;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-malicious {
    color: #CC0000;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}

.align-cruel {
    color: #FF0000;
    font-family: 'Arial';
    font-size: 15px;
    text-shadow: 1px 1px 0px black;
}
/* Partizan */
.ability-warrior-0 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 64px 0px;
}
/* Arahan */
.ability-warrior-1 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 32px 0px;
}
/* Arco */
.ability-assassin-0 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 96px 0px;
}
/* Adaga */
.ability-assassin-1 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 128px 0px;
}
/* Black */
.ability-shura-0 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 160px 0px;
}
/* Miragem */
.ability-shura-1 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 192px 0px;
}
/* Relâmpago */
.ability-shaman-0 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 256px 0px;
}
/* Dragão */
.ability-shaman-1 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 224px 0px;
}
/* Default */
.ability-lycan-0 {
    margin: auto;
    background-image: url('/images/profile/ability.png');
    width: 32px;
    height: 32px;
    background-position: 0px 0px;
}

.word-cloud {
    background-color: rgb(24, 23, 23);
    margin: 15px;
    padding: 15px;
}

ul.cloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.75rem;
  width: 450px;
}

ul.cloud a {
  /*   
  Not supported by any browser at the moment :(
  --size: attr(data-weight number); 
  */
  --size: 4;
  --color: rgb(14, 199, 255);
  color: var(--color);
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  display: block;
  padding: 0.125rem 0.25rem;
  position: relative;
  text-decoration: none;
  /* 
  For different tones of a single color
  opacity: calc((15 - (9 - var(--size))) / 15); 
  */
}

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 6; }
ul.cloud a[data-weight="6"] { --size: 8; }
ul.cloud a[data-weight="7"] { --size: 10; }
ul.cloud a[data-weight="8"] { --size: 13; }
ul.cloud a[data-weight="9"] { --size: 16; }

ul[data-show-value] a::after {
  content: " (" attr(data-weight) ")";
  font-size: 1rem;
}


ul.cloud a:focus {
  outline: 1px dashed;
}

ul.cloud a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

input::placeholder {
    color: #6e6c6c !important;
}

/* start rank klaus*/

/* start rank klaus*/

/* =======================================================
   ESTILOS DOS RANKINGS E ACABAMENTOS FINAIS (VERSÃO CORRIGIDA)
   ======================================================= */

/* --- 1. RANKING WIDGET (Com efeito de subir adicionado) --- */
.ranking-widget {
    background: rgba(10, 10, 10, 0.85); /* Mais transparente (Igual ao que gostou) */
    backdrop-filter: blur(10px);        /* Efeito Vidro */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #b7950b;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: #ccc;
    font-family: 'Josefin Sans', sans-serif;
    margin-bottom: 15px;
    font-size: 12px;
    
    /* ANIMAÇÃO DE LEVITAR */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    top: 0;
}

.ranking-widget:hover {
    transform: translateY(-5px); 
    border-color: #f1c40f; 
    
    /* Glow Dourado Suave */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 20px rgba(241, 196, 15, 0.2); 
    
    /* Faz o ícone do título pulsar ao passar o mouse */
}

.ranking-widget h3 {
    background: linear-gradient(90deg, #151515, #252525);
    color: #f1c40f;
    margin: 0;
    padding: 10px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    
    /* CONFIGURAÇÃO FLEX PARA CENTRALIZAR */
    display: flex; 
    align-items: center; 
    justify-content: center; /* <--- ADICIONE ESTA LINHA */
    gap: 8px; /* Espaço entre o ícone e o texto */
}

/* Cabeçalho da Tabela */
.ranking-header {
    display: flex;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #333;
    font-size: 10px; font-weight: 700; color: #666; text-transform: uppercase;
}

/* Lista */
.ranking-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Linha Individual */
.ranking-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #1f1f1f;
    font-size: 12px;
    height: 35px;
    color: #fff;
}

.ranking-item:hover {
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.05), transparent);
    border-left: 2px solid #f1c40f;
}

/* --- 2. COLUNAS (PC) --- */
.col-pos    { width: 15%; display: flex; align-items: center; }
.col-name   { width: 45%; font-weight: 600; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-empire { width: 20%; text-align: center; font-size: 9px; opacity: 0.9; }
.col-stat   { width: 30%; text-align: end; color: #f1c40f; font-weight: bold; font-family: 'Cinzel', serif; }

/* Badges (Bolinhas de Posição) */
.rank-badge {
    width: 18px; height: 18px;
    background: #2a2a2a; border: 1px solid #444; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 10px; color: #888;
}

/* Cores do Pódio */
.ranking-item:nth-child(1) .rank-badge { background: #ffd700; color: #000; }
.ranking-item:nth-child(2) .rank-badge { background: #c0c0c0; color: #000; }
.ranking-item:nth-child(3) .rank-badge { background: #cd7f32; color: #000; }

/* Rodapé "Ver Mais" */
.ranking-footer { padding: 8px; text-align: center; background: rgba(0,0,0,0.4); border-top: 1px solid #333; }
.btn-ver-mais { font-size: 10px; text-transform: uppercase; color: #888; text-decoration: none; border: 1px solid #444; padding: 3px 10px; border-radius: 15px; }


/* --- 3. ESPAÇADOR E SEÇÕES --- */
.header-spacer {
    width: 100%;
    height: 1px; 
    display: block;
}

/* Imagens dos Jogadores (Sprites) 
.player-bg-card {
    background-image: url(/images/class-icon.webp);
    background-size: 1080px 425px;
    background-repeat: no-repeat;
    position: relative;
    height: inherit;
    font-family: 'Josefin Sans', sans-serif;
    border: none;
    background-color: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Posições 
.warrior-m { background-position: 0 0; transition: 0.3s; }
.warrior-f { background-position: 0 -213px; transition: 0.3s; }
.ninja-m   { background-position: -216px 0; transition: 0.3s; }
.ninja-f   { background-position: -216px -213px; transition: 0.3s; }
.shura-m   { background-position: -432px 0; transition: 0.3s; }
.shura-f   { background-position: -432px -213px; transition: 0.3s; }
.shaman-m  { background-position: -650px 0; transition: 0.3s; }
.shaman-f  { background-position: -650px -213px; transition: 0.3s; }
.lycan-m   { background-position: -865px 0; transition: 0.3s; }
*/

/* Seções Coloridas */
.section-top-players {
    /*width: 100%; position: relative;
    background: linear-gradient(180deg, rgba(62,14,14,1) 0%, rgba(40,10,10,1) 100%);
    border-top: 2px solid #b7950b; */
	border-bottom: 1px solid #b7950b;
    padding-top: 1px; padding-bottom: 50px; z-index: 10;
}
.top-players-home { margin-top: 0 !important; height: auto; margin-bottom: 20px; }

.section-rankings {
    width: 100%; position: relative;
    background-color: #0b0c10;
    padding-top: 60px; padding-bottom: 60px; z-index: 9;
}

/* Notícias */
.section-news {
    display: block; width: 100%; position: relative;
    background-color: #151515; border-top: 1px solid #333;
    padding-top: 50px; padding-bottom: 80px; color: #ffffff; z-index: 5;
}
.section-news .section-title {
    font-weight: bold; color: #ffffff;
    border-bottom: 2px solid #b7950b; padding-bottom: 10px; margin-bottom: 20px;
    display: flex; justify-content: space-between;
}
.section-news .btn-plus { text-decoration: none; color: #f1c40f; font-size: 1.2rem; }
.news-list-custom { list-style: none; padding: 0; margin: 0; }
.news-list-custom li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #333;
}
.news-category a { color: #f1c40f !important; text-decoration: none; font-weight: bold; margin-right: 5px; }
.news-link { color: #e0e0e0 !important; text-decoration: none; transition: 0.3s; }
.news-link:hover { color: #fff !important; }
.news-date { font-size: 0.85rem; color: #888; white-space: nowrap; margin-left: 10px; }

/* Slider Eventos */
.carousel-custom-wrapper { max-width: 100%; border: 2px solid #333; border-radius: 5px; overflow: hidden; }
.carousel-caption { background: rgba(0,0,0,0.7); bottom: 0; width: 100%; left: 0; padding: 10px !important; }

/* Setas do Carrossel */
.carousel-control-prev, .carousel-control-next { opacity: 1 !important; width: 10%; z-index: 20; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.6); border-radius: 50%;
    padding: 15px; background-size: 50% 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon { background-color: #b7950b; }


/* =======================================================
   5. REGRAS DE MÍDIA ORIGINAIS (Preservadas)
   ======================================================= */

/* Ajuste do Boneco no Cabeçalho */
@media only screen and (max-width: 1300px) {
    .decorator-render{ left: auto; }
}

/* Ocultar Colunas em Tabelas Antigas (Outras Páginas) */
@media only screen and (max-width: 767px) {
    .ranking-exp, .ranking-guild-points{ display: none; }
}

@media only screen and (max-width: 530px) {
    .ranking-guild, .ranking-guild-loss, .ranking-guild-draw{ display: none; }
}

@media only screen and (max-width: 450px) {
    .ranking-class, .ranking-empire{ display: none; }
}

/* Menu Mobile Cor de Fundo */
@media only screen and (max-width: 991px) {
    body > header > nav { background-color: black; color: white; height: auto; }
    .home-logo-decorator { display: none; }
}


/* =======================================================
   6. CORREÇÕES FINAIS PARA O RANKING MOBILE
   ======================================================= */

@media only screen and (max-width: 768px) {

    /* 1. Visibilidade do Texto */
    .ranking-item, .ranking-item div, .ranking-item span, .ranking-item a {
        color: #ffffff !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important;
    }

    /* 2. Layout em Linha */
    .ranking-item {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        align-items: center !important; width: 100% !important; height: auto !important;
        padding: 8px 5px !important; border-bottom: 1px solid #333 !important;
    }
    .ranking-header { display: flex !important; width: 100% !important; }

    /* 3. LARGURAS AJUSTADAS (Para caber Reino) */
    .col-pos    { width: 12% !important; justify-content: center !important; }
    .col-name   { width: 43% !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: left !important; padding-left: 5px !important; }
    .col-empire { width: 20% !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 11px !important; }
    .col-stat   { width: 30% !important; text-align: right !important; padding-right: 5px !important; color: #f1c40f !important; }

    /* 4. Altura do Espaçador do Topo */
    .header-spacer { height: 250px !important; }
    .ranking-widget { font-size: 13px !important; }
}

/* --- MENU FIXO E BOTÕES DO TOPO --- */

/* 1. Fixar a barra de navegação no topo */
body > header > nav {
    position: fixed !important; /* Fixa na tela */
    top: 0;
    width: 100%;
    z-index: 9999; /* Garante que fica por cima de tudo */
    backdrop-filter: blur(10px); /* Efeito de vidro (opcional, fica bonito) */
    background: rgba(0, 0, 0, 0.85) !important; /* Fundo mais escuro para ler melhor */
    border-bottom: 1px solid #b7950b; /* Linha dourada para destaque */
    height: 80px; /* Altura fixa */
}

/* 2. Botões de Destaque no Menu (Download/Cadastro) */
.btn-header-action {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    padding: 8px 20px;
    border-radius: 4px;
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
    border: 1px solid transparent;
}

/* Botão Download (Dourado) */
.btn-download-top {
    background: linear-gradient(180deg, #b7950b, #f1c40f);
    color: #000 !important;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}
.btn-download-top:hover {
    background: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Botão Criar Conta (Vermelho/Transparente) */
.btn-register-top {
    border: 1px solid #c0392b;
    color: #fff !important;
    background: rgba(192, 57, 43, 0.2);
}
.btn-register-top:hover {
    background: #c0392b;
    color: #fff !important;
}

/* 3. Ajuste do Espaçador para o Menu não tapar o conteúdo */
/* Como o menu agora flutua, precisamos empurrar o site um pouco para baixo */
.home-download-box {
    margin-top: 150px !important; /* Aumentei a margem original */
}

/* --- BOTÕES DO CABEÇALHO (LOGIN/REGISTRO) --- */

.btn-header-action {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    padding: 8px 20px;
    border-radius: 4px;
    transition: 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
}

/* Botão Entrar (Outline/Transparente) */
.btn-login-top {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ccc !important;
    background: transparent;
}
.btn-login-top:hover {
    border-color: #fff;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}

/* Botão Criar Conta (Dourado Sólido) */
.btn-register-top {
    background: linear-gradient(180deg, #b7950b, #f1c40f);
    color: #000 !important;
    border: 1px solid #b7950b;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
}
.btn-register-top:hover {
    background: #fff;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Ajuste no menu para o Download ficar destacado */
.nav-link.text-warning {
    color: #f1c40f !important;
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.3);
}

/* =======================================================
   NOVO FOOTER PROFISSIONAL
   ======================================================= */

.footer-pro {
    background-color: #0d0d0d; /* Fundo quase preto */
    border-top: 3px solid #b7950b; /* Linha dourada no topo */
    color: #a0a0a0;
    margin-top: 50px;
    font-size: 14px;
}

.footer-top {
    padding: 60px 0 40px 0;
    background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('/images/background-top.webp');
    background-size: cover;
    background-position: center bottom;
}

.footer-title {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
    display: inline-block;
}

.footer-logo {
    max-height: 50px;
    filter: grayscale(100%) opacity(0.7);
    transition: 0.3s;
}
.footer-about:hover .footer-logo {
    filter: grayscale(0%) opacity(1);
}

/* Lista de Links */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}
.footer-links-list a {
    color: #a0a0a0;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
}
.footer-links-list a i {
    font-size: 10px;
    margin-right: 8px;
    color: #b7950b;
}
.footer-links-list a:hover {
    color: #fff;
    padding-left: 5px; /* Efeito de movimento */
}

/* --- GRID DE ESTATÍSTICAS (DASHBOARD) --- */
.server-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 10px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.stat-box:hover {
    background: rgba(183, 149, 11, 0.1); /* Fundo dourado suave */
    border-color: #b7950b;
}

.stat-icon {
    font-size: 20px;
    color: #b7950b;
    margin-right: 10px;
    width: 30px;
    text-align: center;
}

.stat-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.stat-value {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Cinzel', serif;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
}

/* --- BOTÕES SOCIAIS --- */
.social-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    border-radius: 50%; /* Redondo */
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid #333;
}

.social-btn:hover { color: #fff; transform: translateY(-3px); }

.social-btn.discord:hover { background-color: #5865F2; border-color: #5865F2; }
.social-btn.facebook:hover { background-color: #1877F2; border-color: #1877F2; }
.social-btn.instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border: none; }
.social-btn.youtube:hover { background-color: #FF0000; border-color: #FF0000; }

/* Rodapé Inferior */
.footer-bottom {
    background-color: #000;
    padding: 15px 0;
    border-top: 1px solid #222;
}

/* =======================================================
   ESTILO DA NOVA SEÇÃO DE EVENTOS
   ======================================================= */

/* Cabeçalho da Tabela de Eventos */
.event-list-header {
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
}

/* Lista */
.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Item Individual */
.event-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Colunas */
.section-events .col-icon { width: 10%; text-align: center; }
.section-events .col-icon img { width: 32px; height: 32px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); }

.section-events .col-ev-name { width: 40%; font-size: 14px; text-transform: capitalize; }

.section-events .col-time { width: 30%; font-size: 12px; }

.section-events .col-status { width: 20%; text-align: center; }

/* Animação de Pulso para Eventos Ativos */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.status-pulse {
    animation: pulse-green 2s infinite;
}

/* Responsividade Mobile para Eventos */
@media only screen and (max-width: 768px) {
    .event-list-header { display: none !important; }
    
    .event-item {
        flex-wrap: wrap;
        text-align: center;
    }
    
    .section-events .col-icon { width: 20%; margin-bottom: 10px; }
    .section-events .col-ev-name { width: 80%; text-align: left; margin-bottom: 10px; font-size: 16px; }
    .section-events .col-time { width: 50%; text-align: left; padding-left: 10px; }
    .section-events .col-status { width: 50%; text-align: right; }
}

/* --- 2. CALENDÁRIO WIDGET (Com visual do Ranking + Levitar) --- */
.event-widget-box {
    width: 100%;
    max-width: 450px;
    
    /* AQUI: Copiei o fundo do Ranking para ficarem iguais */
    background: rgba(10, 10, 10, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #b7950b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    min-height: 300px;
    margin: 0 auto;
    
    /* ANIMAÇÃO DE LEVITAR */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    top: 0;
}

.event-widget-box:hover {
    transform: translateY(-5px); 
    border-color: #f1c40f; 
    
    /* Glow Dourado Suave */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 20px rgba(241, 196, 15, 0.2); 
    
    /* Faz o ícone do título pulsar ao passar o mouse */
}

/* Efeito extra: Ícone do calendário pulsa */
.event-widget-box:hover .event-widget-title-bar i {
    animation: icon-pulse 1s infinite alternate;
}

@keyframes icon-pulse {
    from { text-shadow: 0 0 5px rgba(241, 196, 15, 0.5); transform: scale(1); }
    to { text-shadow: 0 0 15px rgba(241, 196, 15, 1); transform: scale(1.2); }
}

/* Cabeçalho (Navegação) */
.event-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(to bottom, #222, #111);
    border-bottom: 1px solid #333;
}

.current-date-display {
    text-align: center;
}

.btn-nav-event {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}

.btn-nav-event:hover {
    background: #b7950b;
    color: #000;
    border-color: #b7950b;
}

/* Lista Compacta */
.event-list-mini {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px; /* Scroll se tiver muitos eventos */
    overflow-y: auto;
}

.event-mini-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.2s;
}

.event-mini-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Itens Internos */
.ev-mini-icon img {
    width: 28px;
    height: 28px;
    margin-right: 12px;
}

.ev-mini-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ev-name {
    font-size: 13px;
    font-weight: bold;
    color: #e0e0e0;
}



/* Ajuste da Hora do Evento */
.ev-time {
    font-size: 12px;
    color: #dcdcdc !important; /* Cor clara (Gelo) para leitura fácil */
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    margin-top: 3px;
}

/* Ícone do Relógio Dourado */
.ev-time i {
    color: #f1c40f; /* Dourado */
    font-size: 13px;
}

/* Bolinha de Ativo */
.event-mini-item.active .ev-name {
    color: #f1c40f; /* Nome dourado se ativo */
}

/* Scrollbar Personalizada para a lista */
.event-list-mini::-webkit-scrollbar { width: 4px; }
.event-list-mini::-webkit-scrollbar-track { background: #111; }
.event-list-mini::-webkit-scrollbar-thumb { background: #333; }

/* --- WIDGET DE EVENTOS (PREMIUM) --- */

.event-widget-box {
    width: 100%;
    max-width: 450px; /* Aumentado de 350px para 450px */
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #b7950b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    min-height: 300px;
    margin: 0 auto; /* Centraliza */
}

/* Título do Widget */
.ranking-widget h3,
.event-widget-title-bar {
    text-align: center;
    padding: 15px 0 15px 0;
    color: #f1c40f;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

/* Cabeçalho (Navegação) */
.event-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.current-date-display {
    text-align: center;
    line-height: 1.2;
}

.btn-nav-event {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}

.btn-nav-event:hover {
    background: #b7950b;
    color: #fff;
    border-color: #b7950b;
    transform: scale(1.1);
}

/* Lista */
.event-list-mini {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 350px;
    overflow-y: auto;
}

.event-mini-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: 0.2s;
}

.event-mini-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Ícone */
.ev-mini-icon img {
    width: 36px;
    height: 36px;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.1));
}

/* Informações */
.ev-mini-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ev-name {
    font-size: 14px;
    font-weight: 600;
    color: #ddd;
    margin-bottom: 2px;
}

.ev-time {
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- STATUS BADGES (Cores do Tema) --- */

.ev-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px; /* Ajustei para caber melhor */
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 95px;   /* Largura fixa para ficarem alinhados */
    text-align: center;
    letter-spacing: 0.5px;
    backdrop-filter: blur(2px);
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
}


/* 1. ATIVO (Verde) */
.status-active {
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(39, 174, 96, 0.5);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.1);
}

/* 2. EM BREVE (Laranja/Dourado - Substitui o Azul) */
.status-upcoming {
    background: rgba(230, 126, 34, 0.15) !important; /* Fundo Laranja */
    color: #f39c12 !important;                       /* Texto Dourado */
    border: 1px solid rgba(230, 126, 34, 0.4) !important;
}

/* 3. ENCERRADO (Vermelho) */
.status-ended {
    background: rgba(192, 57, 43, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(192, 57, 43, 0.3);
    opacity: 0.6;
}

/* Hover nos itens */
.event-mini-item:hover .status-active { background: rgba(39, 174, 96, 0.3); }
.event-mini-item:hover .status-upcoming { background: rgba(230, 126, 34, 0.25) !important; color: #fff !important; border-color: #f39c12 !important;}
.event-mini-item:hover .status-ended { opacity: 1; }

/* --- CORREÇÃO DA DATA ESCURA --- */
#displayFullDate {
    color: #b0b0b0 !important; /* Cinza claro para leitura fácil */
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 2px;
    display: block;
}

#displayDayName {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra para destacar o HOJE */
}

/* =======================================================
   WIDGET IMPERADOR (CORRIGIDO E PADRONIZADO)
   ======================================================= */

.emperor-widget-box {
    width: 100%;
    max-width: 450px;
	height: 320px;
    
    /* AQUI: Copiei o fundo do Ranking para ficarem iguais */
    background: rgba(10, 10, 10, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #b7950b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    min-height: 300px;
    margin: 0 auto;
    
    /* ANIMAÇÃO DE LEVITAR */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    top: 0;
}

.emperor-widget-box:hover{
    transform: translateY(-5px); 
    border-color: #f1c40f; 
    
    /* Glow Dourado Suave */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 20px rgba(241, 196, 15, 0.2); 
    
    /* Faz o ícone do título pulsar ao passar o mouse */
}

/* 1. ESTRUTURA FLEXÍVEL (Para eliminar a faixa preta) */
.emperor-widget-box {
    display: flex;
    flex-direction: column;
    height: 100%;       /* Ocupa a mesma altura da coluna vizinha */
    min-height: 320px;  /* Altura mínima de segurança */
    background: #151515; /* Fundo base de segurança */
    /* Herda bordas e sombras das classes globais se existirem */
}

.emperor-body {
    /* O SEGREDO: flex: 1 obriga este bloco a crescer e tapar o fundo preto */
    flex: 1; 
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    overflow: hidden;

    /* O Gradiente que se move (agora ocupa tudo) */
    background: radial-gradient(circle at 50% 40%, rgba(241, 196, 15, 0.08) 0%, rgba(26, 26, 26, 1) 90%);
    
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* 2. CONTEÚDO (Avatar, Nome, Texto) */
.emperor-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid #b7950b;
    box-shadow: 0 0 15px rgba(183, 149, 11, 0.3);
    object-fit: cover;
    object-position: top;
    margin: 10px 0;
    transition: 0.5s;
}

.emperor-widget-box:hover .emperor-avatar {
    transform: scale(1.05);
    border-color: #f1c40f;
    box-shadow: 0 0 25px rgba(241, 196, 15, 0.6);
}

.emperor-name {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
    background: -webkit-linear-gradient(#fff, #b7950b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.emperor-info {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0,0,0,0.5);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.emperor-info img { height: 18px; width: auto; }
.emperor-info span { font-size: 12px; color: #ccc; font-weight: 600; text-transform: uppercase; }

.emperor-quote {
    color: #f1c40f !important;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,1);
    margin-top: 15px;
    font-size: 0.85rem;
    position: relative;
    z-index: 5;
    /* Importante: Margem em baixo para afastar das bolinhas */
    margin-bottom: 25px !important; 
}

/* 3. CARROSSEL (ESTICADO) */
#emperorCarousel {
    flex: 1; /* Estica para preencher o pai */
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#emperorCarousel .carousel-inner {
    flex: 1;
}
#emperorCarousel .carousel-item {
    height: 100%;
}

/* Indicadores (Bolinhas) */
#emperorCarousel .carousel-indicators {
    margin-bottom: 0 !important; /* Remove margem que causa a faixa preta */
    bottom: 10px;
    padding: 0;
}
#emperorCarousel .carousel-indicators [data-bs-target] {
    background-color: #fff; width: 6px; height: 6px; border-radius: 50%; border: none; opacity: 0.4; margin: 0 3px;
}
#emperorCarousel .carousel-indicators .active { background-color: #f1c40f; opacity: 1; }

/* 4. SETAS IDÊNTICAS AO CALENDÁRIO */
/* Copiando o estilo de .btn-nav-event */

#emperorCarousel .carousel-control-prev,
#emperorCarousel .carousel-control-next {
    width: 35px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Estilo do Botão (Igual ao Calendário) */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    
    opacity: 1; /* Visível sempre */
    z-index: 20;
    transition: 0.3s;
    
    /* Flex para centralizar ícone */
    display: flex; align-items: center; justify-content: center;
    color: #aaa; /* Cor do ícone */
}

/* Posição */
#emperorCarousel .carousel-control-prev { left: 15px; }
#emperorCarousel .carousel-control-next { right: 15px; }

/* Ícone da Seta (Usando ícones do Bootstrap via fonte ou SVG ajustado) */
#emperorCarousel .carousel-control-prev-icon,
#emperorCarousel .carousel-control-next-icon {
    display: none !important; /* Esconde o ícone padrão do bootstrap */
}

/* Tamanho do ícone de fonte <i class="bi"> */
#emperorCarousel .carousel-control-prev i,
#emperorCarousel .carousel-control-next i {
    font-size: 14px;
    line-height: 1;
}

/* Hover (Igual ao Calendário: Fundo Dourado, Ícone Preto/Branco) */
#emperorCarousel .carousel-control-prev:hover,
#emperorCarousel .carousel-control-next:hover {
    background: #b7950b;
    border-color: #b7950b;
    color: #fff !important;
    transform: translateY(-50%) scale(1.1);
}

/* Efeito de Hover nas caixas de moedas */
.coin-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo um pouco mais escuro */
}

.coin-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: #b7950b !important; /* Borda dourada ao passar o mouse */
}

/* --- EFEITO DE TREMIDA (SHAKE) NO HOVER --- */
@keyframes softShake {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-2deg); }
    100% { transform: translateY(-5px) rotate(0deg); }
}

.coin-card-interactive {
    position: relative; /* Necessário para posicionar o selo "Melhor Opção" */
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.coin-card-interactive:hover {
    /* Ativa a animação definida acima */
    animation: softShake 0.4s ease-in-out forwards; 
    border-color: #f1c40f !important; /* Borda fica dourada */
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.3); /* Brilho dourado */
    background-color: rgba(255, 255, 255, 0.05); /* Clareia levemente o fundo */
    cursor: pointer;
}

/* Estilo Base para os Selos (Já existente, mas garantindo a base) */
.best-option-badge {
    position: absolute;
    top: -12px;
    right: -10px;
    padding: 5px 15px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 10;
    border: 2px solid #fff;
    animation: pulse-badge 2s infinite;
}

/* 1. MELHOR COMPRA (Dourado com Brilho Extra) */
.badge-best-buy {
    background: linear-gradient(45deg, #FFD700, #ffcc00);
    color: #fff;
    border-color: #fff;
}

/* 2. MAIS COMPRADO (Azul ou Roxo para destacar do dourado) */
.badge-most-bought {
    background: linear-gradient(45deg, #2980b9, #6dd5fa);
    color: #fff;
    border-color: #fff;
}

/* Animação de pulso (Ajustada) */
@keyframes pulse-badge {
    0% { transform: scale(1); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.featured-card {
    border: 2px solid #f1c40f !important;
    transform: scale(1.05);
    z-index: 5;
    background: rgba(241, 196, 15, 0.05) !important;
}

/* --- CORREÇÃO DE Z-INDEX (ALERTAS) --- */

/* Garante que o SweetAlert fique ACIMA do menu fixo (que tem 9999) */
div.swal2-container {
    z-index: 20000 !important;
}

/* Caso uses Toasts do Bootstrap ou avisos padrão */
.alert-fixed-top {
    position: fixed;
    top: 60px; /* Empurra para baixo do menu de 80px */
    right: 20px;
    z-index: 10000;
}

div.swal2-container {
    z-index: 20000 !important;    /* Garante que fica À FRENTE do menu */
    padding-top: 45px !important; /* Empurra para BAIXO (Altura do menu + 15px de folga) */
}

/* Opcional: Se usares 'Toasts' (notificações de canto), isto garante que não colam na borda */
div.swal2-container.swal2-top-end,
div.swal2-container.swal2-top-right,
div.swal2-container.swal2-top-left,
div.swal2-container.swal2-top-start {
    top: 45px !important; 
}

/* --- ESTILO DA NOVA HERO SECTION --- */



/* --- FUNDOS DESFOCADOS (Ranking, Eventos, Footer E NOTÍCIAS) --- */
.section-rankings, 
.section-events,
.section-news,  /* <--- ADICIONADO AQUI */
.footer-pro {
    position: relative;
    background: none !important;
    background-color: rgba(11, 12, 16, 0.6) !important;
    overflow: hidden;
    z-index: 1;
    /* Remove margens para colar tudo */
    margin: 0 !important;
    padding-top: 60px;
    padding-bottom: 60px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.section-rankings::before, 
.section-events::before,
.section-news::before,
.footer-pro::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('/images/background-top.webp');
    background-position: center 80px; 
    background-size: cover; 
    background-attachment: fixed; /* Parallax */
    filter: blur(10px) brightness(0.5);
    -webkit-filter: blur(10px) brightness(0.5);
    z-index: -1;
    opacity: 0.8;
}

.section-rankings > .container,
.section-events > .container,
.section-news > .container, /* <--- ADICIONADO AQUI */
.footer-pro > .container {
    position: relative;
    z-index: 2;
}

/* =======================================================
   ESTILO UNIFICADO DE WIDGETS (A "Fatia de Bolo")
   ======================================================= */

/* Aplica o visual a TODOS os blocos principais */
.ranking-widget, 
.event-widget-box, 
.emperor-widget-box,
.news-widget-box { /* Nova classe para notícias */
    background: rgba(10, 10, 10, 0.85); /* Fundo Escuro */
    backdrop-filter: blur(10px);        /* Efeito Vidro */
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #b7950b; /* A BORDA AMARELA/DOURADA */
    border-radius: 4px;
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Garante altura igual nas colunas (flexbox) */
    height: 100%; 
    display: flex;
    flex-direction: column;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Para o cabeçalho não sair da borda arredondada */
}

/* Efeito Hover em todas as caixas */
.ranking-widget:hover, 
.event-widget-box:hover, 
.emperor-widget-box:hover,
.news-widget-box:hover {
    transform: translateY(-5px);
    border-color: #f1c40f; /* Borda fica mais brilhante */
    box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 20px rgba(241, 196, 15, 0.2);
}

/* Padronizar os Títulos das Caixas */
.ranking-widget h3,
.event-widget-title-bar,
.news-widget-header {
    background: rgba(0, 0, 0, 0.4);
    color: #f1c40f;
    padding: 15px;
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    display: block; /* Garante bloco */
}

/* Ajuste específico para o corpo das notícias ter espaçamento */
.news-widget-body {
    padding: 20px;
    flex: 1; /* Ocupa o resto da altura */
}

/* Ajuste nos links de título das notícias para caberem na caixa */
.section-news .section-title {
    display: none; /* Escondemos o título antigo pois agora temos o da caixa */
}

/* =======================================================
   RESTAURAÇÃO DAS BORDAS DOURADAS (DIVISÓRIAS)
   ======================================================= */

/* Coloca a linha amarela EXATAMENTE onde a seta vermelha aponta 
   (entre o Ranking e os Eventos) */
.section-events {
    border-top: 1px solid #b7950b !important;
}

/* Para manter o padrão, coloca também entre Eventos e Notícias */
.section-news {
    border-top: 1px solid #b7950b !important;
}

/* Se quiser garantir que a borda do Footer também seja amarela */
.footer-pro {
    border-top: 1px solid #b7950b !important;
}

/* =======================================================
   CORREÇÃO DE ESPAÇAMENTOS (FOOTER E SEÇÕES)
   ======================================================= */

/* 1. CORREÇÃO DO FOOTER (Fatia sobrando em baixo e distanciamento em cima) */
.footer-pro {
    /* Removemos o espaçamento do container principal para ele não esticar além do necessário */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Movemos o espaçamento para dentro da área de conteúdo do footer */
.footer-top {
    padding-top: 60px;    /* Espaço em relação à linha amarela */
    padding-bottom: 40px; /* Espaço em relação ao copyright */
   /* background: transparent !important; /* Mantém transparente para ver o blur */
}

/* Garante que a barra preta de copyright cubra tudo até ao fim */
.footer-bottom {
    background-color: #000 !important; /* Fundo preto sólido */
    position: relative;
    z-index: 2;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* 2. AJUSTE FINO NAS OUTRAS SEÇÕES (Opcional)
   Se achar que o espaço entre a linha amarela e os títulos de Eventos/Notícias 
   está muito grande (como mostrou na primeira imagem), use isto: */
.section-events, 
.section-news {
    padding-top: 30px !important; /* Reduzi de 60px para 30px para "colar" mais */
    padding-bottom: 30px !important;
}

.hero-container {
    padding-top: 130px; /* Espaço para fugir do menu */
    padding-bottom: 10px; /* Pouco espaço em baixo para colar no Top Classes */
    position: relative;
    z-index: 5;
}

.hero-logo {
    max-width: 550px; /* Logo um pouco maior para impor respeito */
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    display: inline-block;
    /* Sem animação, estática como pediu */
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .hero-logo {
        max-width: 300px; /* Menor no telemóvel */
    }
}

/* =======================================================
   MELHORIAS DE LOGIN E MOBILE
   ======================================================= */

/* --- 1. BOTÃO DE USUÁRIO (HEADER - VERSÃO QUADRADA) --- */
.btn-logged-user {
    background: rgba(255, 255, 255, 0.05); /* Um pouco mais sutil */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f1c40f !important; /* Nome Dourado */
    
    /* AQUI ESTÁ A MUDANÇA: De 30px para 4px (Quadrado) */
    border-radius: 4px; 
    
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    transition: 0.3s;
    font-family: 'Cinzel', serif; /* Fonte do tema */
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-logged-user:hover {
    background: rgba(183, 149, 11, 0.2); /* Fundo dourado suave */
    border-color: #f1c40f;
    color: #fff !important;
}

/* Botão de Sair (Quadrado também) */
.btn-logout-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* AQUI ESTÁ A MUDANÇA: De 50% para 4px (Quadrado) */
    border-radius: 4px; 
    
    background: rgba(192, 57, 43, 0.15);
    border: 1px solid #c0392b;
    color: #e74c3c !important;
    transition: 0.3s;
}

.btn-logout-icon:hover {
    background: #c0392b;
    color: #fff !important;
    transform: translateY(-2px); /* Pequeno efeito de clique */
}

/* --- 2. BOTÕES MOBILE (HERO SECTION) --- */
.btn-mobile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 800;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    transition: transform 0.2s;
}

.btn-mobile-hero:active {
    transform: scale(0.96);
}

/* Estilo Download Mobile */
.btn-download-mobile {
    background: linear-gradient(90deg, #b7950b, #f1c40f);
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
    border: 1px solid #ffd700;
    font-size: 14px;
}
.btn-download-mobile small {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.8;
    margin-top: 2px;
    text-transform: none;
}

/* Estilo Conta Mobile */
.btn-account-mobile {
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff !important;
    font-size: 13px;
    flex-direction: row; /* Ícone ao lado */
    gap: 8px;
}

/* --- 3. CORREÇÃO MENU MOBILE (ALINHAMENTO) --- */
@media (max-width: 991px) {
    /* 1. Libera a altura para o menu crescer quando clica no sanduíche */
    body > header > nav {
        height: auto !important; /* O SEGREDO: Permite crescer */
        background: rgba(10, 10, 10, 0.98) !important; /* Fundo quase preto sólido para leitura fácil */
        transition: background 0.3s;
    }

    /* 2. Pequeno ajuste visual na área que abre */
    .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Uma linha para separar o topo das opções */
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.tooltip {
    z-index: 10001 !important; 
}

/* =======================================================
   BARRA DE TÍTULO (ESTILO ORIGINAL - COR ESCURA)
   ======================================================= */

/* 2. BOTÕES "COMPRAR AGORA" (E outros botões principais) */
/* Antes estava tudo laranja. Agora será escuro com borda dourada. */
.btn-primary {
    background: linear-gradient(180deg, #1a1a1a 0%, #000 100%) !important;
    border: 1px solid #444 !important;
    color: #ccc !important;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Só fica "Amarelo/Dourado" quando passa o mouse */
.btn-primary:hover {
    background: #b7950b !important;
    border-color: #f1c40f !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(183, 149, 11, 0.4);
    transform: translateY(-2px);
}

/* 3. MENU LATERAL (Minha Conta / Loja) */
/* Tirar o excesso de laranja dos links laterais */
.user-menu > li > a {
    color: #a0a0a0 !important; /* Cinza claro por padrão */
    text-decoration: none;
    transition: 0.3s;
}

.user-menu > li > a:hover {
    color: #f1c40f !important; /* Dourado apenas no hover */
    padding-left: 5px; /* Pequeno movimento para a direita */
}

/* Títulos das seções do menu lateral */
.user-menu .text-light {
    color: #fff !important;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-bottom: 1px solid rgba(183, 149, 11, 0.3); /* Linha dourada fraca */
    padding-bottom: 5px;
    margin-bottom: 10px;
    display: block;
}

/* 4. AJUSTE NOS ALERTAS DE PREÇO (R$) NA LOJA */
.coin-card-interactive .bg-black.bg-opacity-25 {
    background-color: rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* =======================================================
   BANNER PREMIUM DE CASH (PAINEL)
   ======================================================= */

.cash-banner-premium {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #b7950b; /* Borda Dourada */
    box-shadow: 0 0 20px rgba(183, 149, 11, 0.2);
    min-height: 140px;
    display: flex;
    align-items: center;
}

/* Imagem de Fundo com Zoom suave */
.cash-banner-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 10s ease;
    z-index: 0;
}
.cash-banner-premium:hover .cash-banner-bg {
    transform: scale(1.1);
}

/* Camada escura para o texto aparecer bem */
.cash-banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, rgba(183,149,11,0.1) 100%);
    z-index: 0;
}

/* Ícone de Moeda */
.cash-icon-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f1c40f, #b7950b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #000;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
    border: 2px solid #fff;
}

/* Texto Gradiente Dourado */
.text-gradient-gold {
    background: linear-gradient(to right, #f1c40f, #fff, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* Botão Pulsante */
.btn-cash-pulse {
    display: inline-block;
    background: linear-gradient(180deg, #b7950b, #f39c12);
    color: #fff !important;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #ffd700;
    box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7);
    animation: pulse-orange 2s infinite;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: 0.3s;
}

.btn-cash-pulse:hover {
    background: #fff;
    color: #b7950b !important;
    transform: translateY(-2px);
}

@keyframes pulse-orange {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

/* Responsividade para telemóveis */
@media (max-width: 768px) {
    .cash-banner-content {
        flex-direction: column;
        text-align: center;
    }
    .cash-action.ms-auto {
        margin-left: 0 !important;
        width: 100%;
    }
    .btn-cash-pulse {
        width: 100%;
        display: block;
        text-align: center;
    }
    .text-start {
        text-align: center !important;
    }
}

/* =======================================================
   BOTÕES WHATSAPP (PAINEL)
   ======================================================= */

.wpp-card {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 8px;
    background: linear-gradient(145deg, #151515, #0a0a0a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Efeito Hover Geral */
.wpp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-color: #25D366; /* Verde WhatsApp */
}

/* Ícone da Esquerda (Caixa) */
.wpp-icon-box {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    transition: 0.3s;
}

/* Conteúdo de Texto */
.wpp-content {
    flex-grow: 1;
}
.wpp-content h5 {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Ícone da Direita (Seta/Logo) */
.wpp-arrow {
    font-size: 20px;
    color: #444;
    transition: 0.3s;
    transform: translateX(0);
}

/* --- ESTILOS ESPECÍFICOS --- */

/* 1. GRUPO (Foco em comunidade) */
.wpp-group:hover .wpp-icon-box {
    background: rgba(37, 211, 102, 0.2);
    color: #25D366;
    border-color: #25D366;
}
.wpp-group:hover .wpp-arrow {
    color: #25D366;
    transform: translateX(5px) scale(1.1);
}

/* 2. SUPORTE (Foco em atendimento) */
.wpp-support:hover .wpp-icon-box {
    background: rgba(52, 183, 241, 0.2); /* Azulzinho Telegram/Suporte ou Verde */
    color: #34b7f1;
    border-color: #34b7f1;
}
.wpp-support:hover {
    border-color: #34b7f1; /* Borda azul no suporte pra diferenciar */
}
.wpp-support:hover .wpp-arrow {
    color: #34b7f1;
    transform: translateX(5px) rotate(10deg);
}

/* Fundo sutil de ícone (Decoração) */
.wpp-card::before {
    content: '\F618'; /* Código do ícone bootstrap whatsapp */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 80px;
    opacity: 0.03;
    transform: rotate(-15deg);
    transition: 0.3s;
}
.wpp-card:hover::before {
    opacity: 0.1;
    transform: rotate(0deg);
}