body {
  background: linear-gradient(to bottom, #ffce3c, #ffd147, #FFC107);
  color: #fff;
}
      /* 🔽 Container que segura todos os ícones de fundo */
    #bg-icons {
      position: fixed;
      inset: 0;
      z-index: -1; /* fica atrás do conteúdo */
      overflow: hidden;
    }

/* wiggle leve */
@keyframes wiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  50% { transform: translateX(3px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

.icon-wrapper {
  position: absolute;
}

.icon {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
  animation: wiggle infinite ease-in-out;
}
    .container {
      max-width: 500px;
      width: 100%;
    }

   .link-button   {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
    font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
 
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s, background-color 0.2s, box-shadow 0.15s;
  box-shadow: 0 4px 0 #000; /* sombra sólida para efeito 3D */
}

.link-button  :hover {
  transform: translateY(-2px);
}

.link-button  :active {
  transform: translateY(2px); /* desce como se fosse pressionado */
  box-shadow: none; /* sombra desaparece */
}
    .section-title {
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1.5rem;
    }

    .media-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
      border-radius: 1rem;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .media-container iframe,
    .media-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .game-card {
      background-color: #2c2c2c;
      border-radius: 1rem;
      padding: 1.5rem;
      text-align: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
      margin-top: 1rem;
    }

.section-block {
    background: rgba(255, 255, 255, 0.507); /* fundo translúcido */
    /* border-radius: 1.5rem; */
    margin-bottom: 3rem;
    padding: 2rem 1rem;

    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

    .banner-image {
      width: 100%; 
      height: 50vh; 
      object-fit: cover; 
      margin-bottom: 2rem;
    }
    .vermelho {
  box-shadow:
              4px 4px 0px #b91c1c;
}

    .azul {
  box-shadow:
              4px 4px 0px #244780;
}
    .roxo {
  box-shadow:
              4px 4px 0px #503491;
}

    .verde {
  box-shadow:
              4px 4px 0px #126b4e;
}

    .sha_5 {
  box-shadow:
              4px 4px 0px #b91c1c;
}
/* keyframes da vibradinha */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* classe base */
 
.texto-titulos{
  width: 55%;
  margin: auto;
}

 
.texto-titulo-show{
  width: 45%;
  margin: auto;
}