:root {
  --primary-color: #4F46E5;
  --secondary-color: #7C3AED;
  --text-color: #fff;
  --background-start: #4F46E5;
  --background-end: #7C3AED;
  --glass-background: rgba(255, 255, 255, 0.1);
  --glass-background-hover: rgba(255, 255, 255, 0.2);
  --transition-speed: 0.3s;
  --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500);
  --silver-gradient: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  --bronze-gradient: linear-gradient(135deg, #CD7F32, #8B4513);
}

body {
  color: var(--text-color);
  background: linear-gradient(135deg, var(--background-start), var(--background-end));
}

/* Container */
.leaderboard-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Tabs */
.leaderboard-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.tab-button {
  background: var(--glass-background);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.1rem;
  min-width: 180px;
  transition: var(--transition-speed);
}

.tab-button:hover {
  background: var(--glass-background-hover);
  transform: translateY(-2px);
}

.tab-button.active {
  background: var(--glass-background-hover);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Tab content */
.leaderboard-tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.leaderboard-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.leaderboard-legend {
  display: grid;
  grid-template-columns: 60px 1fr repeat(4, 80px) 90px;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--glass-background);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* Row container */
.leaderboard-list {
  overflow-x: auto;
  margin-bottom: 2rem;
  border-radius: 0 0 0.5rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Row layout */
.leaderboard-item {
  display: grid;
  grid-template-columns: 60px 1fr repeat(4, 80px) 90px;
  gap: 0.5rem;
  
  padding: 1rem;
  background: var(--glass-background);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  transition: var(--transition-speed);
}

.leaderboard-item:hover {
  background: var(--glass-background-hover);
}

.leaderboard-item:last-child {
  border-bottom: none;
}

/* Column styles */
.rank-column {
  font-size: 1.25rem;
  font-weight: bold;
}

.user-column {
  text-align: left;
  padding-left: 0.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-name {
  font-size: 1.1rem;
  font-weight: 500;
}

.stats-column {
  font-weight: 500;
  padding: 10px;
}

.score-column {
  font-size: 1.125rem;
  font-weight: 700;
  background: var(--glass-background-hover);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Medals */
.medal {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.medal i {
  font-size: 1.2rem;
}

.leaderboard-item:hover .medal {
  transform: scale(1.1) rotate(5deg);
}

.medal-1 {
  background: var(--gold-gradient);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  color: #472707;
}

.medal-2 {
  background: var(--silver-gradient);
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
  color: #333;
}

.medal-3 {
  background: var(--bronze-gradient);
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.6);
  color: #fff;
}

.top-rank {
  background: rgba(255, 255, 255, 0.15);
  border-left: 3px solid transparent;
}

.rank-1 { border-left-color: #FFD700; }
.rank-2 { border-left-color: #C0C0C0; }
.rank-3 { border-left-color: #CD7F32; }

/* Info box */
.leaderboard-info {
  background: var(--glass-background);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 1.75rem;
  margin-top: 2.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.leaderboard-info h3 {
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
}

.leaderboard-info h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: 3px;
}

.leaderboard-info ul {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.leaderboard-info li {
  margin-bottom: 0.75rem;
}

.leaderboard-info p:last-child {
  background: var(--glass-background);
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
}

/* No data state */
.no-data {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--glass-background);
  border-radius: 0.5rem;
  font-style: italic;
}

/* Responsive - Tablets and below */
@media (max-width: 1024px) {
  .leaderboard-legend,
  .leaderboard-item {
    /* 6 columns after hiding Views: rank, user, prompts, uses, upvotes, score */
    grid-template-columns: 50px 1fr 80px 80px 80px 90px;
  }

  /* Hide Views column - it's the 6th child overall */
  .leaderboard-legend > :nth-child(6),
  .leaderboard-item > :nth-child(6) {
    display: none;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .leaderboard-legend {
    display: none;
  }

  .leaderboard-item {
    display: grid;
    grid-template-areas:
      "rank user prompts uses"
      "rank user upvotes score";
    grid-template-columns: 28px 1fr 80px 80px;
    
    
    text-align: right;
  }

  .rank-column            { grid-area: rank; text-align: center; font-size: 1rem; }
  .user-column            { grid-area: user; text-align: left; font-weight: bold; }
  .stats-column:nth-of-type(1) { grid-area: prompts; }
  .stats-column:nth-of-type(2) { grid-area: uses; }
  .stats-column:nth-of-type(3) { grid-area: upvotes; }
  .score-column           { grid-area: score; }

  .stats-column,
  .score-column {
    position: relative;
    font-weight: 600;
  }

  .stats-column::before,
  .score-column::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: -0.15rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
  }

  .stats-column[data-label="Views"] {
    display: none !important;
  }

  .medal {
    width: 28px;
    height: 28px;
  }

  .user-name {
    font-size: 0.95rem;
  }
}

/* Tiny Phones */
@media (max-width: 480px) {
  .leaderboard-item {
    grid-template-columns: 24px 1fr 52px 52px;
  }
}