/* =========================
   FUENTES
========================= */
@font-face {
  font-family: 'CustomFont';
  src: url('font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =========================
   BODY Y FONDO
========================= */
body {
  background-color: #1e1e2f;
  color: white;
  font-family: 'CustomFont', serif;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: auto; /* scroll permitido */
}

/* enlaces */
body a {
  color: white;
  text-decoration: none;
}
body a:visited {
  color: white;
}

/* =========================
   HEADER Y LOGO
========================= */
header {
  padding: 20px;
}
header img {
  width: 200px;
}

#logo-wrapper {
  display: inline-block;
  animation: pulse 3s ease-in-out infinite;
}

#logo {
  width: 200px;
  transition: filter 0.1s, transform 0.1s;
  transform-style: preserve-3d;
  will-change: transform;
}

/* =========================
   NAV
========================= */
nav {
  margin: 20px 0;
}
nav a {
  margin: 0 20px;
  font-weight: bold;
}

/* =========================
   SECCIONES Y TORNEOS
========================= */
.section-title {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ffcc00;
  display: inline-block;
  padding-bottom: 5px;
}

.tournament-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin: 20px auto;
  max-width: 1000px;
}

.tournament {
  background-color: rgba(255, 255, 255, 0.1); /* fondo translúcido */
  backdrop-filter: blur(8px); /* desenfoque del fondo detrás */
  border-radius: 12px;
  padding: 10px;
  width: 150px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform-style: preserve-3d;
}

/* Hover más vistoso */
.tournament:hover {
  transform: perspective(600px) rotateX(8deg) rotateY(8deg) scale(1.15);
  background-color: rgba(255, 255, 255, 0.15); /* un poquito más visible al pasar el mouse */
  border-color: rgba(255, 255, 255, 0.3);
}

.tournament-grid:hover .tournament {
  transform: scale(0.9);
}

.tournament img {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  filter: 
    drop-shadow(0 0 3px #eeeeee)
    drop-shadow(0 6px 15px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s cubic-bezier(.17,.67,.83,.67),
              filter 0.15s cubic-bezier(.17,.67,.83,.67);
}

.tournament:hover img {
  transform: translateY(-4px);
  filter: 
    drop-shadow(0 0 9px #ffffff)
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* =========================
   FOOTER
========================= */
footer {
  background-color: rgba(0, 0, 0, 0.4); /* fondo oscuro translúcido */
  backdrop-filter: blur(8px);           /* desenfoque del fondo detrás */
  padding: 15px;
  margin-top: 40px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

footer:hover {
  background-color: rgba(0, 0, 0, 0.5); /* un poquito más visible al pasar el mouse */
  border-color: rgba(255, 255, 255, 0.2);
}

/* =========================
   ANIMACIONES
========================= */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* =========================
   FONDO ANIMADO (CANVAS + NEBULA)
========================= */
canvas#space {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* detrás de todo */
  display: block;
}

.nebula {
  position: fixed;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(46,158,255,0.15) 0%, transparent 70%),
              radial-gradient(circle, rgba(0,204,255,0.1) 0%, transparent 80%),
              radial-gradient(circle, rgba(120,220,255,0.08) 0%, transparent 90%);
  mix-blend-mode: screen;
  z-index: -1; /* detrás del contenido, encima del canvas */
}