/* halloffame.css */

:root {
  --color-bg: #0A0F1E;               /* Fond global (très sombre) */
  --color-card: #1F223F;             /* Fond des cartes */
  --color-title: #FFC107;            /* Titres (jaune Nuts Mania) */
  --color-user: #4A90E2;             /* Nom d’utilisateur (bleu lien) */
  --color-value: #E0E0E0;            /* Texte secondaire (gris clair) */
  --color-gradient-start: #FFC107;   /* Dégradé bandeau : jaune */
  --color-gradient-end: #50E3C2;     /*                    : teal */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 4px 16px rgba(3, 169, 244, 0.6);
  --radius: 1rem;
  --transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

body {
  background-color: var(--color-bg);
  color: var(--color-value);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

.hall-of-fame {
  max-width: 1200px;
  margin: 8rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.hall-of-fame > h1 {
  grid-column: 1 / -1;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-title);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  animation: fadeInDown 1s ease-out;
}

.record {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

/* Avatar + header */
.record-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 0.75rem;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.user-link {
  color: var(--color-user);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.user-link:hover {
  color: var(--color-title);
}

/* Badge SVG */
.record-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  opacity: 0.8;
  transition: transform 0.3s;
}

.record:hover .record-badge {
  transform: scale(1.2);
}

.badge-weekly_pts    { filter: hue-rotate(30deg); }
.badge-monthly_pts   { filter: hue-rotate(60deg); }
.badge-yearly_pts    { filter: hue-rotate(90deg); }
.badge-alltime_pts   { filter: hue-rotate(120deg); }
.badge-cards         { filter: hue-rotate(150deg); }
.badge-albums        { filter: hue-rotate(180deg); }
.badge-packs         { filter: hue-rotate(210deg); }
.badge-champ-week    { filter: hue-rotate(240deg); }
.badge-champ-month   { filter: hue-rotate(270deg); }
.badge-champ-year    { filter: hue-rotate(300deg); }

.record h2 {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--color-title);
}

.record p {
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  color: var(--color-value);
}

/* Animation delays */
.record:nth-child(1)  { animation-delay: 0.1s; }
.record:nth-child(2)  { animation-delay: 0.2s; }
.record:nth-child(3)  { animation-delay: 0.3s; }
.record:nth-child(4)  { animation-delay: 0.4s; }
.record:nth-child(5)  { animation-delay: 0.5s; }
.record:nth-child(6)  { animation-delay: 0.6s; }
.record:nth-child(7)  { animation-delay: 0.7s; }
.record:nth-child(8)  { animation-delay: 0.8s; }
.record:nth-child(9)  { animation-delay: 0.9s; }
.record:nth-child(10) { animation-delay: 1.0s; }
.record:nth-child(11) { animation-delay: 1.1s; }
.record:nth-child(12) { animation-delay: 1.2s; }

/* Bandeau coloré en haut de la carte */
.record::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 5px;
  top: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    var(--color-gradient-start),
    var(--color-gradient-end)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}

.record:hover::before {
  transform: scaleX(1);
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hall-of-fame > h1 { font-size: 2.2rem; }
  .record { padding: 1.5rem 1rem; }
  .record h2 { font-size: 1.3rem; }
}