body{
  background: rgba(0, 0, 0);
}

.teste{
  background-color: transparent;
  padding: 5px;
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(61,133,198);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(255,211,113);
}

a.btn.btn-light.ml-4:hover{
  background-color: red;
}

.background-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.border-row {
  border: 1px solid red;
}

.image-slide {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.image-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.slide {
  max-width: 100%;
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
}

.slide:not(.active) {
  opacity: 0;
  transform: translateX(-100%);
}

.blocoA {
  width: 580px;
  height: 310px;
  margin-left: -30px;
  margin-top: 0px;
  border-radius: 20px;
}

.blocoB {
  background: url(../../images/novo/blocob.png);
  background-size: cover; 
  width: 580px;
  height: 310px;
  margin-left: -5px;
  margin-top: 0px;
  border-radius: 20px;
  border-right: 0px solid yellow;
}

.blocoC {
  background-size: cover; 
  width: 580px;
  height: 310px;
  margin-left: -5px;
  margin-top: 0px;
  border-radius: 20px;
  border-left: 0px solid yellow;
}

.blocoYoutube {
  background: url(../../images/novo/youtube2.png) no-repeat;
  background-size: 100%; 
  margin-left: 0px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #ff0000;
  border-radius: 20px;
  transition: transform 0.3s;
}

.blocoYoutube:hover {
 transform: scale(0.9);
}

.blocoDiscord {
  background: url(../../images/novo/discord.jpg);
  background-size: cover; 
  margin-left: 0px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #3D85C6;
  border-radius: 20px;
  transition: transform 0.3s;
}

.blocoDiscord:hover {
 transform: scale(0.9);
}

.blocoDownload {
  background: url(../../images/novo/download2.png);
  background-position: relative;
  background-size: cover; 
  margin-top: -100px;
  margin-left: 900px;
  width: 200px;
  height: 75px;
  border-bottom: 0px solid #3D85C6;
  border-radius: 25px;
  transition: transform 0.3s;
}

.blocoDownload:hover {
  transform: scale(0.9);
}

.blocoDonate {
  background: url(../../images/novo/donate.jpg);
  background-position: absolute;
  background-size: cover; 
  margin-left: 0px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #3D85C6;
  border-radius: 20px;
  transition: transform 0.3s;
}

.blocoDonate:hover {
  transform: scale(0.9);
}

/* Novo: cards de WhatsApp e Instagram na seção #canais */
.blocoWhatsapp {
  background: url(../../images/novo/whatsapp.png) no-repeat center;
  background-size: cover;
  margin-left: -160px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #25D366;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.blocoWhatsapp:hover {
  transform: scale(0.94);
}

.blocoInstagram {
  background: url(../../images/novo/instagram.png) no-repeat center;
  background-size: cover;
  margin-left: -50px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #DD2A7B;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.blocoInstagram:hover {
  transform: scale(0.94);
}

.blocoFacebook {
  background: url(../../images/novo/facebook.png) no-repeat center;
  background-size: cover;
  margin-left: -105px;
  width: 200px;
  height: 65px;
  border-bottom: 2px solid #515BD4;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.blocoFacebook:hover {
  transform: scale(0.94);
}

.blocoNews {
  background-color: transparent;
  padding-top: 10px;
  background-size: cover; 
  margin-left: 20px;
  /*width: 780px;*/
  width: 100%;
  height: 565px;
  border-radius: 25px;
}

#bloco-rank1{
  float: left;
  margin-left: 70px;
}

.blocoRank1 {
  background: radial-gradient(circle at top,
              rgba(95, 115, 255, 0.18) 0%,
              rgba(12, 15, 30, 0.96) 45%,
              rgba(5, 7, 15, 1) 100%);
  margin-top: -10px;
  margin-left: -60px;
  width: 340px;
  height: 600px;
  border-radius: 10px;
  border-inline: 4px solid rgba(95, 115, 255, 0.18);
  border-block: 4px solid rgba(95, 115, 255, 0.18);
}

#bloco-rank2{
  float: left;
  margin-left: -60px;
}

.blocoRank2 {
  background: radial-gradient(circle at top,
              rgba(95, 115, 255, 0.18) 0%,
              rgba(12, 15, 30, 0.96) 45%,
              rgba(5, 7, 15, 1) 100%); 
  margin-top: -10px;
  margin-left: -30px;
  width: 340px;
  height: 600px;
  border-radius: 10px;
  border-inline: 4px solid rgba(95, 115, 255, 0.18);
  border-block: 4px solid rgba(95, 115, 255, 0.18);
}

#bloco-rank3{
  float: left;
  margin-left: -60px;
}

.blocoRank3 {
  background: radial-gradient(circle at top,
              rgba(95, 115, 255, 0.18) 0%,
              rgba(12, 15, 30, 0.96) 45%,
              rgba(5, 7, 15, 1) 100%); 
  margin-top: -10px;
  margin-left: 0px;
  width: 340px;
  height: 600px;
  border-radius: 10px;
  border-inline: 4px solid rgba(95, 115, 255, 0.18);
  border-block: 4px solid rgba(95, 115, 255, 0.18);
}

.blocoGuerras {
  background: url(../../images/novo/blocoa.jpg);
  background-size: cover; 
  margin-left: -8px;
  margin-top: 0px;
  width: 109%;
  height: 310px;
  border-radius: 20px;
  border-right: 0px solid darkgoldenrod;
}

.blocoFAQ {
  background: url(../../images/novo/personagem7.png);
  background-size: cover; 
  margin-left: 0px;
  margin-top: 60px;
  width: 1087px;
  height: 670px;
  border-radius: 25px;
}

.next-left{ 
  position: absolute;
  bottom: 5%;
  left: 70%;
  transition: transform 0.3s;
}

.next-right{ 
  position: absolute;
  bottom: 5%;
  left: 85%;
  transform: scaleX(-1);
  transition: transform 0.3s;
}

.number-page-cardA{
  position: absolute;
  bottom: 6.5%;
  left: 80.3%;
  color: white;
}

.title-cardA{
  font-size: 40px;
  position: absolute;
  bottom: 15%;
  right: 66.0%;
  color: white;
  transition: transform 0.3s;
  cursor: pointer;
}

.title-cardA:hover{
 transform: scale(1.25);
}

.subtitle-cardA{
  font-size: 15px;
  position: absolute;
  bottom: 3%;
  right: 57.0%;
  color: white;
}

.title-cardB{
  font-size: 35px;
  position: absolute;
  bottom: 75%;
  right: 75%;
  color: white;
}

.title-cardB::before {
  content: "";
  display: block;
  width: 180%;
  height: 3px;
  background-color: white;
  position: absolute;
  bottom: -2px;
  left: 0;
  border-radius: 20px;
}

.gema-news {
  position: absolute;
  bottom: 55%;
  right: 83%;
  transform: scaleX(-1);
  cursor: pointer;
}

.update-news{
  position: absolute;
  bottom: 58%;
  right: 72%;
  color: #f8ce11;
  font-size: 17px;
  transition: transform 0.3s, opacity 0.3s;
  cursor: pointer;
}

.date-update-news{
  position: absolute;
  bottom: 52%;
  right: 67%;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.date-update-news::before {
  content: "";
  display: block;
  width: 180%;
  height: 2px;
  background-color: white;
  position: absolute;
  bottom: -2px;
  left: 0;
  border-radius: 20px;
}

.gema-news-2 {
  position: absolute;
  bottom: 55%;
  right: 83%;
  transform: scaleX(-1);
  cursor: pointer;
}

.update-news-2{
  margin-top: 10px;
  position: absolute;
  top: -55px;
  right: 72%;
  color: #f8ce11;
  font-size: 17px;
  transition: transform 0.3s, opacity 0.3s;
  cursor: pointer;
}

.date-update-news-2{
  position: absolute;
  top: -25px;
  right: 67%;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.date-update-news-2::before {
  content: "";
  display: block;
  width: 180%;
  height: 2px;
  background-color: white;
  position: absolute;
  bottom: -2px;
  left: 0;
  border-radius: 20px;
}

.gema-news-3 {
  position: absolute;
  bottom: 55%;
  right: 83%;
  transform: scaleX(-1);
  cursor: pointer;
}

.update-news-3{
  margin-top: 10px;
  position: absolute;
  top: -55px;
  right: 72%;
  color: #f8ce11;
  font-size: 17px;
  transition: transform 0.3s, opacity 0.3s;
  cursor: pointer;
}

.date-update-news-3{
  position: absolute;
  top: -25px;
  right: 67%;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.date-update-news-3::before {
  content: "";
  display: block;
  width: 180%;
  height: 2px;
  background-color: white;
  position: absolute;
  bottom: -2px;
  left: 0;
  border-radius: 20px;
  cursor: pointer;
}

/* HOME DESKTOP */

#home{
  background: url(../../images/novo/bg1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  min-height: 130vh;  /* ou 130vh se precisar */
  
  margin-top: -80px;
  padding-top: 80px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Fade suave do BG da home para o fundo preto da página */
#home::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* encosta bem no limite */
  width: 100%;
  height: 180px; /* controla o "tamanho" do degradê */
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
.logo-lpx {
    position: absolute;
    top: 160px;        /* ajuste fino vertical */
    left: 160px;      /* ajuste fino horizontal */
    width: 260px;     /* tamanho da logo */
    z-index: 10;      /* garante que fique por cima */
    pointer-events: none; /* evita clique interferir em menus */
}

#second-update{
  position: relative;
  bottom: -210px;
}

#third-update{
  position: relative;
  bottom: -280px;
}

.read-more-news-1{
  position: absolute;
  right: 5%;
  bottom: 53%;
  width: 150px;
  height: 45px;
  border-radius: 70px;
  border: 2px solid #fdb00a;
  z-index: 10;
  transition: transform 0.5s,background-color 0.5s;
}

.read-more-news-1:hover {
  transform: scale(1.1);
}

.read-more-news-2{
  position: absolute;
  right: 5%;
  bottom: 29%;
  width: 150px;
  height: 45px;
  border-radius: 70px;
  border: 2px solid #fdb00a;
  z-index: 10;
  transition: transform 0.5s,background-color 0.5s;
}

.read-more-news-2:hover {
  transform: scale(1.1);
}

.read-more-news-3{
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 150px;
  height: 45px;
  border-radius: 70px;
  border: 2px solid #fdb00a;
  z-index: 10;
  transition: transform 0.5s,background-color 0.5s;
}

.read-more-news-3:hover {
  transform: scale(1.1);
}

.btn-read-more{
  position: absolute;
  right: 3%;
  top: 7%;
  transition: transform 0.5s;
}

.btn-read-more:hover {
  transform: rotate(360deg); 
}

.txt-read-more{
  position: absolute;
  font-size: 10px;
  color: #fdb00a;
  letter-spacing: 2px;
  left: 12%;
  top: 32%;
}

.update-news:hover{
 transform: translateX(15px); 
 opacity: 0.7;
}

.update-news-2:hover{
 transform: translateX(15px); 
 opacity: 0.7; 
}

.update-news-3:hover{
 transform: translateX(15px); 
 opacity: 0.7;
}

footer {
  background: url(../../images/novo/logo-footers.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;   /* ⬅️ diminui a imagem */
  color: #fff;
  text-align: center;
  padding: 5px;
  width: 100%;
}


a.nav-link{
  transition: transform 0.3s, box-shadow 0.5s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

a.nav-link:hover{
  transform: scale(1.3);
  box-shadow: 0 0 0 gold;
}

a.btn.btn-light.ml-4 {
  border-radius: 35px;
  transition: transform 0.3s, box-shadow 0.5s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

a.btn.btn-light.ml-4:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px gold;
}

a.btn.btn-light.ml-4{
  padding-left: 20px;
  padding-right: 20px; 
  transition: transform 0.3s, box-shadow 0.5s, padding 0.5s;
}

.donate{
  border-radius: 35px;
  transition: transform 0.3s, box-shadow 0.5s;
  position: relative;
  z-index: 1;
}

.donate:hover{
  transform: scale(1.2);
  box-shadow: none; 
}

div.blocoB.position-relative{
  transition: border-right 0.3s;
}

div.blocoA.position-relative{
  transition: border-left 0.3s;
}

.title-bloco-news {
  font-size: 35px;
  color: white;
}

#registro-dados-news {
  max-height: calc(100% - 50px); 
  overflow-y: hidden;
  padding-top: 15px;
}

#registro-dados-news thead {
  position: sticky;
  top: 0;
  background-color: #343a40;
  color: white;
}

#registro-dados-news table {
  border-collapse: separate; 
  border-spacing: 0 5px;
  width: 100%;
}

.tipo_noticie,
.tipo_maintenance,
.tipo_update,
.tipo_generic {
  font-size: 14px;
  color: white;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 18px;
}

.tipo_noticie {
  background-color: #28c7db;
}

.tipo_maintenance {
  background-color: #d1ab28;
}

.tipo_update {
  background-color: #43930d;
}

.tipo_generic{
  background-color: #7743df;
}

.table tr {
  background-color: rgba(68, 43, 119, 0.2);
  color: white;
}

i{
 transition: transform 0.8s;
}

i:hover{
  transform: rotate(360deg); 
}

.detalhes {
  padding: 10px;
  border: 1px solid gray;
  animation: fadeInUp 0.3s ease-in-out; 
  width: 100%; 
  box-sizing: border-box; 
}

.d-none {
  display: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top{
  padding-right: 30px;
  padding-left: 10px;
}

.players{
  padding-right: 55px;
}

.title-bloco-ranking{
  padding-top: 10px;
  font-size: 18px;
  color: white;
  margin-bottom: 0px;
  border-bottom: 2px solid rgba(95, 115, 255, 0.18);
  padding-bottom: 7px;
}

div.title-bloco-ranking span{
  margin-right: 10px;
  margin-left: 5px;
}

#tabela-ranking-players, 
#tabela-ranking-guilds, 
#tabela-ranking-fames{
  text-align: center;
  padding-left:2px; 
  padding-right:2px; 
}

.blocoRank1, 
.blocoRank2,
.blocoRank3 {
  overflow-y: hidden;
  position: relative;
}

#tabela-ranking-players table, 
#tabela-ranking-guilds table, 
#tabela-ranking-fames table{
  border-collapse: separate; 
  border-spacing: 0 2.9px;
}

#timer{
  position: absolute;
  left: 39.8%;
  bottom: 270px;
  font-size: 32px;
  color: white;
  font-weight: bold;
}

.blocoGuerras{
 /* background: linear-gradient(135deg, #111827, #0d111b);*/
  padding-top: 40px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 80px;
}

#guild2{
  float: right;
}

#guild1{
  float: left;
}

#titleGuild1{
  position: absolute;
  padding-top: 140px;
  /*right: 530px;*/
  right: 328px;
  color: white;
  font-size: 26px;
  letter-spacing: 2px;
  text-align: center;
  width: 270px;
}

#titleGuild1 p{
  font-size: 24px;
  text-align: center;
}

#subtitleGuild1{
  position: absolute;
  padding-top: 190px;
  right: 560px;
  color: white;
  font-size: 18px;
  letter-spacing: 2px;
}

#titleGuild2{
  position: absolute;
  padding-top: 140px;
  /*left: 71%;*/
  left: 61%;
  color: white;
  font-size: 26px;
  letter-spacing: 2px;
  width: 270px;
  text-align: center;
}

#titleGuild2 p{
  font-size: 24px;
  text-align: center;
}

p.war_time{
  font-size: 16px;
  margin-top: -67px;
}

#subtitleGuild2{
  position: absolute;
  padding-top: 190px;
  left: 72%;
  color: white;
  font-size: 18px;
  letter-spacing: 2px;
}

#sword{
  position: absolute;
  top: -5%;
  left: 42%;
  right: 20%;
  z-index: 11;
  transition: transform 0.6s;
}

#sword:hover{
  transform: scale(1.2);
}

#titleGuild1{
  transition: transform 0.3s, color 0.6s;
  z-index: 15;
}

#titleGuild2{
  transition: transform 0.3s, color 0.6s;
  z-index: 15;
}

#titleGuild1:hover{
 color: yellow;
 cursor: pointer;
}

#titleGuild2:hover{
 color: yellow;
 cursor: pointer;
}

.aura-amarela {
  position: absolute;
  left: 80px;
  top: 0px;
  width: 220px;
  height: 220px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 0, 0.6) 0%, rgba(255, 255, 0, 0)70%);
  animation: pulseAura 3s ease-in-out infinite;
}

.aura-azul {
  position: absolute;
  left: 300px;
  top: 0px;
  width: 220px;
  height: 220px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 8, 240, 0.6) 0%, rgba(0, 8, 240, 0)70%);
  animation: pulseAura 3s ease-in-out infinite;
}

.table-container {
  overflow-x: auto; /* Adiciona rolagem horizontal em telas menores */
}

.table-original-width {
  width: 100%; /* Defina o valor desejado para o width */
}

@keyframes pulseAura {
  0% {
    transform: scale(2);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.2);
    opacity: 0.8;
  }
}

.FAQ{
  transition: transform 0.4s;
}

.FAQ:hover{
  transform: scale(1.04);
  cursor: pointer;
}

.centered {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* ========================= */
/*   BLOCO RANKS GERAIS      */
/* ========================= */

.bloco-ranks-gerais{
  /*background: url(../../images/novo/paredenews.png);*/
  background: url();
  background-size: cover;
  width: 100%;
  height: 700px;
  padding-top: 50px;
}

.bloco-ranks-gerais {
  padding-left: 120px; 
  padding-right: 120px;
}

#rankings-principais a{
  color: white;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

#rankings-principais{
  width: 95%;
  height: 600px;
  overflow: auto;
}

.nav-item{
  color:  white;
}

#rankings-principais .table{
  padding: 15px;
  text-align: center;
  /*border-collapse: separate; 
  border-spacing: 0 10px;*/
  width: 100%;
}

#rankings-principais th{
  /*border-collapse: separate; 
  border-spacing: 0 10px;*/
  width: 25%;
}

#rankings-principais td{
  font-size: 16px;
  /*border-collapse: separate; 
  border-spacing: 0 10px;*/
  width: 25%;
}

/* ========================= */
/*   OLHOS PULSANDO          */
/* ========================= */

.hero-eye {
  position: absolute;
  top: 52%; 
  left: 67.4%;
  width: 15px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 200, 255, 1) 0%,
    rgba(0, 200, 255, 0.4) 45%,
    transparent 70%
  );
  box-shadow:
    0 0 8px rgba(0, 200, 255, 1),
    0 0 20px rgba(0, 200, 255, 1);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: eyePulse 2.5s ease-in-out infinite;
  z-index: 4;
}

.hero-eye.right {
  left: 63.8%;
}

@keyframes eyePulse {
  0% { transform: scale(0.8); opacity: .5; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: .7; }
}

.navbar {
    position: relative;
    z-index: 900;
}

/* ======================================
   LPX - MOBILE GERAL (<= 768px)
   ====================================== */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden;
  }

  /* HOME */
  #home{
    background: url(../../images/novo/bg1.png) center center no-repeat;
    background-size: cover;
    height: 420px;
    margin-top: 0;
    padding-top: 80px;
    display: block;
  }

  /* SLIDER / BLOCOS PRINCIPAIS */
  .blocoA,
  .blocoB,
  .blocoC {
    width: 95%;
    height: 260px;                 /* altura fixa bonita no mobile */
    margin: 10px auto;
    border-radius: 10px;
    background-size: cover;        /* preenche o card sem distorcer */
    background-position: center;
    overflow: hidden;              /* corta o excesso da imagem */
  }

  /* BOTÕES (YOUTUBE / DONATE / DISCORD / DOWNLOAD / WHATS / INSTA) */
  .blocoYoutube,
  .blocoDonate,
  .blocoDiscord,
  .blocoDownload,
  .blocoWhatsapp,
  .blocoInstagram {
    width: 95%;
    height: 140px;
    margin: 10px auto;
  }

  /* NEWS */
  .blocoNews {
    margin: 20px auto;
    width: 95%;
    height: auto;
    padding: 15px;
  }

  #registro-dados-news {
    max-height: 350px;
    overflow-y: hidden;
  }

  /* SHILON / GWH */
  .blocoGuerras {
    width: 95%;
    height: 260px;                 /* altura controlada no mobile */
    margin: 20px auto;
    background-size: cover;
    background-position: center;
    overflow: hidden;              /* evita fundo sobrando/repetindo */
  }

  #guild1, #guild2 {
    float: none;
    text-align: center;
  }

  #titleGuild1,
  #titleGuild2,
  #subtitleGuild1,
  #subtitleGuild2,
  #timer,
  #sword,
  .aura-amarela,
  .aura-azul {
    position: static;
    margin: 10px auto;
    text-align: center;
  }

  /* RANKS PRINCIPAIS (TABS) */
  .bloco-ranks-gerais {
    height: auto;
    padding: 20px 10px;
  }

  #rankings-principais {
    width: 100%;
    height: auto;
    padding: 10px;
  }

  #rankings-principais .table {
    font-size: 14px;
  }

  /* RANKS (3 MOLDURAS) */
  #bloco-rank1,
  #bloco-rank2,
  #bloco-rank3 {
    float: none;
    margin: 0 auto 20px auto;
  }

  .blocoRank1,
  .blocoRank2,
  .blocoRank3 {
      width: 95% !important;
      margin: 20px auto !important;
      padding: 20px 10px !important;
      height: auto !important;
      background-size: 100% 100% !important;
      background-position: center top !important;
      display: block !important;
      overflow-y: visible;
  }

  .blocoRank1 table,
  .blocoRank2 table,
  .blocoRank3 table {
      width: 90% !important;
      margin: 10px auto !important;
  }

  .title-bloco-ranking,
  .tituloRank {
      text-align: center !important;
      margin: 0 auto !important;
      padding: 15px 0 !important;
      font-size: 20px !important;
      display: block !important;
      width: 100% !important;
  }

  /* PERSONAGEM DO FAME (RODAPÉ) */
  .blocoFAQ {
      width: 95% !important;
      height: 520px !important;
      margin: 30px auto !important;
      background-size: contain !important;
      background-position: center bottom !important;
      background-repeat: no-repeat !important;
  }

  footer {
    padding: 10px;
  }
}

/* ========================= */
/*  LPX - EFEITO NO RANKING  */
/* ========================= */

/* linha base do rank */
.rank-item {
  position: relative;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

/* anima a “faixa de luz” usando o background (não aumenta largura) */
.rank-item:hover {
  background-image: radial-gradient(ellipse at center,
      rgba(120,150,255,0.5) 0%,
      rgba(120,150,255,0.18) 40%,
      rgba(0,0,0,0) 70%);
  background-repeat: no-repeat;
  background-size: 180% 260%;
  animation: lpxLightSweep 0.9s ease-out;
}

/* glow no nome do player/guild */
.rank-item:hover .player-name,
.rank-item:hover .guild-name,
.rank-item:hover td:nth-child(2) b {
  text-shadow:
    0 0 8px rgba(140,170,255,0.9),
    0 0 18px rgba(140,170,255,0.4);
}

/* animação: faixa atravessando da esquerda pra direita */
@keyframes lpxLightSweep {
  0%   { background-position: -150% 50%; }
  100% { background-position: 150% 50%; }
}

.font-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    font-weight: 700;
}

/* /// FOLHAS SUBINDO /// */

/* LEFT 1 */
.leaves-left-1 {
    background: url(../../images/novo/leaves-left-1.png) no-repeat;
    width: 120px;
    height: 133px;
    position: absolute;
    left: 800px;
    bottom: -300px;
    animation: leaves-left-1-up 12s infinite linear;
}

@keyframes leaves-left-1-up {
    0% { bottom: -300px; opacity: 0; }
    90% { opacity: 1; }
    100% { bottom: 750px; left: -250px; opacity: 0; transform: rotate(-200deg); }
}

/* LEFT 2 */
.leaves-left-2 {
    background: url(../../images/novo/leaves-left-2.png) no-repeat;
    width: 160px;
    height: 72px;
    position: absolute;
    left: 800px;
    bottom: -200px;
    animation: leaves-left-2-up 12s infinite linear;
    animation-delay: 6s;
}

@keyframes leaves-left-2-up {
    0% { bottom: -200px; opacity: 0; }
    90% { opacity: 1; }
    100% { bottom: 750px; left: -250px; opacity: 0; transform: rotate(-150deg); }
}

/* LEFT 3 */
.leaves-left-3 {
    background: url(../../images/novo/leaves-left-3.png) no-repeat;
    width: 658px;
    height: 439px;
    position: absolute;
    left: 800px;
    bottom: -200px;
    animation: leaves-left-3-up 12s infinite linear;
    animation-delay: 9s;
}

@keyframes leaves-left-3-up {
    0% { bottom: -200px; opacity: 0; }
    90% { opacity: 1; }
    100% { bottom: 750px; left: -250px; opacity: 0; transform: rotate(-250deg); }
}

/* LEFT 4 */
.leaves-left-4 {
    background: url(../../images/novo/leaves-left-4.png) no-repeat;
    width: 1920px;
    height: 996px;
    position: absolute;
    left: -100px;
    bottom: -300px;
    animation: leaves-left-4-up 12s infinite linear;
    animation-delay: 3s;
}

@keyframes leaves-left-4-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; }
    100% { bottom: 750px; left: -250px; opacity: 0; transform: rotate(-150deg); }
}

/* LEFT 5 */
.leaves-left-5 {
    background: url(../../images/novo/leaves-left-5.png) no-repeat;
    width: 170px;
    height: 108px;
    position: absolute;
    left: 800px;
    bottom: -300px;
    animation: leaves-left-5-up 12s infinite linear;
    animation-delay: 7s;
}

@keyframes leaves-left-5-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; }
    100% { bottom: 750px; left: -250px; opacity: 0; transform: rotate(-250deg); }
}


/* RIGHT 1 */
.leaves-right-1 {
    background: url(../../images/novo/leaves-right-1.png) no-repeat;
    width: 200px;
    height: 115px;
    position: absolute;
    right: 800px;
    bottom: -250px;
    animation: leaves-right-1-up 12s infinite linear;
    animation-delay: 1s;
}

@keyframes leaves-right-1-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; transform: rotate(-200deg); }
    100% { bottom: 850px; right: -250px; opacity: 0; transform: rotate(-200deg); }
}

/* RIGHT 2 */
.leaves-right-2 {
    background: url(../../images/novo/leaves-right-2.png) no-repeat;
    width: 140px;
    height: 55px;
    position: absolute;
    right: 800px;
    bottom: -250px;
    animation: leaves-right-2-up 12s infinite linear;
    animation-delay: 3s;
}

@keyframes leaves-right-2-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; transform: rotate(-100deg); }
    100% { bottom: 850px; right: -250px; opacity: 0; transform: rotate(-120deg); }
}

/* RIGHT 3 */
.leaves-right-3 {
    background: url(../../images/novo/leaves-right-3.png) no-repeat;
    width: 1909px;
    height: 910px;
    position: absolute;
    right: 700px;
    bottom: -250px;
    animation: leaves-right-3-up 12s infinite linear;
    animation-delay: 6s;
}

@keyframes leaves-right-3-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; transform: rotate(150deg); }
    100% { bottom: 850px; right: -250px; opacity: 0; transform: rotate(170deg); }
}

/* RIGHT 4 */
.leaves-right-4 {
    background: url(../../images/novo/leaves-right-4.png) no-repeat;
    width: 1905px;
    height: 1704px;
    position: absolute;
    right: 800px;
    bottom: -950px;
    animation: leaves-right-4-up 12s infinite linear;
    animation-delay: 9s;
}

@keyframes leaves-right-4-up {
    0% { bottom: -950px; opacity: 0; }
    90% { opacity: 1; transform: rotate(150deg); }
    100% { bottom: 850px; right: -250px; opacity: 0; transform: rotate(170deg); }
}

/* RIGHT 5 */
.leaves-right-5 {
    background: url(../../images/novo/leaves-right-5.png) no-repeat;
    width: 110px;
    height: 65px;
    position: absolute;
    right: 850px;
    bottom: -250px;
    animation: leaves-right-5-up 12s infinite linear;
    animation-delay: 2s;
}

@keyframes leaves-right-5-up {
    0% { bottom: -250px; opacity: 0; }
    90% { opacity: 1; transform: rotate(150deg); }
    100% { bottom: 850px; right: -250px; opacity: 0; transform: rotate(170deg); }
}


/* Ajustes para mobile  width: 768px */

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

    .leaves-left-1,
    .leaves-left-2,
    .leaves-left-3,
    .leaves-left-4,
    .leaves-left-5,
    .leaves-right-1,
    .leaves-right-2,
    .leaves-right-3,
    .leaves-right-4,
    .leaves-right-5 {
        transform: scale(0.65);
        opacity: 0.8;
    }

    /* Reposicionamento */
    .leaves-left-1,
    .leaves-left-2,
    .leaves-left-3,
    .leaves-left-4,
    .leaves-left-5 {
        left: 10% !important;
    }

    .leaves-right-1,
    .leaves-right-2,
    .leaves-right-3,
    .leaves-right-4,
    .leaves-right-5 {
        right: 10% !important;
    }

    /* Partículas sobem menos */
    @keyframes ashes-left-1,
    ashes-left-2,
    ashes-left-3,
    ashes-left-4,
    ashes-left-5 {
        100% { bottom: 650px; opacity: 0; }
    }

    @keyframes smoke-right-1,
    smoke-right-2,
    smoke-right-3,
    smoke-right-4,
    smoke-right-5 {
        100% { bottom: 700px; opacity: 0; }
    }
}

.view-rank-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  text-align: center;
}

.view-rank-btn {
    width: 100px;
    padding: 5px 0;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #4e7bff, #1b2da3);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.view-rank-btn:hover {
    opacity: 0.35;
}