@import url("./navbar.css");

/* ================= BASE ================= */

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background: url("../assets/backgrounds/aura2.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #fff;
}

/* overlay oscuro elegante */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.10);
  z-index: -1;
}

/* efecto pantalla juego */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.6));
  pointer-events: none;
}

/* ================= NAVBAR FIX LOGO ================= */

.navbar img {
  height: 80px;
  transition: 0.3s;
}

.navbar img:hover {
  transform: scale(1.05);
}

/* ================= SECTION ================= */

.ranking-section {
  margin-top: 120px;
  text-align: center;
}

.ranking-section h2 {
  font-size: 2.5em;
  color: #ffd700;

  text-shadow:
    0 0 10px #ffd700,
    0 0 25px rgba(255,215,0,0.6);

  margin-bottom: 40px;
}

/* ================= GRID ================= */

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

/* ================= BOX AAA ================= */

.ranking-box {
  width: 260px;
  padding: 20px;

  background: rgba(15, 15, 35, 0.75);
  backdrop-filter: blur(12px);

  border-radius: 18px;
  border: 1px solid rgba(120,120,255,0.3);

  box-shadow:
    0 0 15px rgba(0,0,0,0.8),
    inset 0 0 10px rgba(120,120,255,0.1);

  transition: 0.3s;
  position: relative;

  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

.ranking-box:nth-child(2) { animation-delay: 0.2s; }
.ranking-box:nth-child(3) { animation-delay: 0.4s; }

.ranking-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 0 25px rgba(120,120,255,0.5),
    inset 0 0 15px rgba(120,120,255,0.2);
}

/* efecto energía */
.ranking-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, transparent, rgba(120,120,255,0.2), transparent);
  opacity: 0;
  transition: 0.3s;
}

.ranking-box:hover::before {
  opacity: 1;
}

/* ================= TITLES ================= */

.ranking-box h3 {
  color: #ffd700;
  margin-bottom: 12px;
}

/* ================= TABLE ================= */

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  color: #aaa;
  font-size: 0.9em;
  padding: 6px;
  text-align: left;
}

td {
  padding: 7px 5px;
  font-size: 0.95em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* filas */
tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

/* hover */
tr:hover td {
  background: rgba(120,120,255,0.1);
}

/* top 1 */
tr:nth-child(2) td {
  color: #ffd700;
  text-shadow: 0 0 8px #ffd700;
}

/* ranking */
.rank {
  text-align: center;
}

img {
  height: 18px;
}

/* sin datos */
.no-data {
  text-align: center;
  color: #ffd700;
  padding: 10px;
}

/* ================= ANIMACIÓN ================= */

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
  .ranking-grid {
    flex-direction: column;
    align-items: center;
  }
}