html, body{
overflow-x: hidden;
}

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

* {
  box-sizing: border-box;
}

/* ========================= */
/* fundo e cor de texto do ranking*/
/* ========================= */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', sans-serif;
  color: rgb(255, 255, 255);
  text-align: center;

  overflow-x: hidden; /* impede a tela de ir pro lado */

  background:
    linear-gradient(rgba(0, 109, 204, 0.65), rgba(0,0,0,0.65)),
    url("fundo.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Luz azul */
body::before {
  content: "";
  position: fixed;
  top: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: #00f7ff;
  filter: blur(250px);
  opacity: 0.15;
  z-index: -1;
}

/* Luz rosa */
body::after {
  content: "";
  position: fixed;
  bottom: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: #ff0077;
  filter: blur(250px);
  opacity: 0.12;
  z-index: -1;
}

h1 {
  font-size: 42px;
  margin-top: 40px;
  letter-spacing: 2px;
}

h2 {
  margin-top: 60px;
  margin-bottom: 30px;
}

/* ========================= */
/* PÓDIO */
/* ========================= */

#podio {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  margin-top: 80px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.podio-item {
  width: 230px;
  padding: 30px 20px;
  border-radius: 25px;
  text-align: center;
  backdrop-filter: blur(15px);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s ease;
}

.podio-item:hover {
  transform: translateY(-10px) scale(1.05);
}

.podio-1 {
  order: 2;
  padding-top: 60px;
  padding-bottom: 60px;
  background: linear-gradient(135deg, #ffd700, #ffae00);
  color: black;
  box-shadow: 0 0 40px gold;
}

.podio-2 {
  order: 1;
  padding-top: 40px;
  padding-bottom: 40px;
  background: linear-gradient(135deg, #c0c0c0, #e6e6e6);
  color: black;
}

.podio-3 {
  order: 3;
  padding-top: 30px;
  padding-bottom: 30px;
  background: linear-gradient(135deg, #cd7f32, #8b5a2b);
  color: rgb(0, 0, 0);
}

.podio-item h3 {
  font-size: 34px;
  margin: 0;
}

.podio-item p {
  font-size: 18px;
  font-weight: bold;
}

/* ========================= */
/* GALERIA JOGADORES */
/* ========================= */

#galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 0 20px 80px;
}



/* ========================= */
/* box players da galera */
/* ========================= */

.player-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 20px;
  width: 220px;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

.player-box:hover {
  transform: translateY(-8px);
  background: linear-gradient(135deg,  #fbff00);
  box-shadow: 0 0 25px rgba(0,255,255,0.6);
}

.player-box h3 {
  margin: 0;
  font-size: 20px;
}

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

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  padding: 40px;
  z-index: 999;
}

.modal-content {
  background: white;
  color: black;
  padding: 40px 30px;
  border-radius: 20px;
  width: 350px;
  max-width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

#fechar {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
}

/* ========================= */
/* RESPONSIVO */
/* ========================= */

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  #podio {
    flex-direction: column;
    align-items: center;
  }

  .podio-item {
    width: 95%;
  }

  .player-box {
    width: 95%;
  }

  
  /* container já respeita menu.css */
.container{
max-width:1200px;
margin:auto;
padding:20px;
margin-top:90px;
}
}


.ranking-container{
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}

.ranking-box{
background: #111;
padding: 20px;
border-radius: 10px;

width: 100%;
max-width: 520px;
margin: 0 auto;
margin-bottom: 50px;
}

.linha-ranking{
display:flex;
justify-content:space-between;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.menu-logo img {
  height: 50px; /* ajusta a altura da logo */
  width: auto;
}


.linha-ranking{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
border-bottom:1px solid #333;
}

.zoeira{
font-size:18px;
margin-left:10px;
}

.linha-ranking{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
border-bottom:1px solid #333;
}

.lado-dir{
display:flex;
align-items:center;
gap:8px;
}

.zoeira{
font-size:18px;
}

.lado-dir{
display:flex;
align-items:center;
gap:8px;
justify-content:flex-end;
}

.zoeira{
width:25px;
text-align:center;
font-size:18px;
}

.mensagem-zoeira{
background:#11111100;
padding:12px;
margin-bottom:20px;
border-radius:8px;
text-align:center;
font-weight:bold;
font-size:16px;

overflow-x:hidden;
}

.msg{
white-space: nowrap;
margin:4px 0;
}

@media (max-width:768px){


.mensagem-zoeira{
overflow-x:auto;
}
.ranking-box{
max-width:100%;
}

.mensagem-zoeira{
font-size:14px;
}

}

img, video{
max-width:100%;
height:auto;
}