/* Events & Challenges – DiceWorld page-specific styles */

.section-intro {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}
.lead {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.section-events .event-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xl);
}
.section-events .event-card .button {
  margin-top: var(--space-4);
  width: fit-content;
}

.past-challenges-list .past-challenge {
  background: var(--color-background);
  border-left: 6px solid var(--color-primary);
  padding-left: var(--space-7);
}
.past-challenge ul {
  margin-bottom: var(--space-3);
  list-style: none;
}

.participation-steps {
  counter-reset: step;
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-base);
  list-style: none;
}
.participation-steps li {
  margin-bottom: var(--space-4);
  position: relative;
  padding-left: var(--space-8);
}
.participation-steps li::before {
  content: counter(step) ".";
  counter-increment: step;
  position: absolute;
  left: 0;
  top: 0.25em;
  font-size: 1.3em;
  font-weight: bold;
  color: var(--color-primary);
}

.section-leaderboard {
  margin-top: var(--space-8);
}
.leaderboard-card {
  overflow-x: auto;
  padding: 0;
}
.leaderboard {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}
.leaderboard th, .leaderboard td {
  text-align: left;
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}
.leaderboard th {
  background: var(--color-gray-100);
  color: var(--color-primary);
  font-size: var(--font-size-base);
}
.leaderboard tbody tr:nth-child(odd) {
  background-color: var(--color-surface);
}
.leaderboard tbody tr:nth-child(even) {
  background-color: var(--color-background);
}

.rewards-list .reward-card h3 {
  font-size: var(--font-size-xl);
}
.rewards-list ul {
  margin-bottom: 0;
  font-size: var(--font-size-base);
}

.rules-list {
  padding-left: var(--space-6);
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-8);
}
.rules-list li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

.section-testimonials .testimonial {
  border-left: 6px solid var(--color-success);
  font-style: italic;
  background: var(--color-background);
  padding-left: var(--space-7);
  margin-bottom: var(--space-6);
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
}
.section-testimonials cite {
  font-style: normal;
  color: var(--color-primary);
  font-weight: bold;
}

@media (max-width: 900px) {
  .section-intro, .section-events, .section-past-challenges, .section-how-to, .section-leaderboard, .section-rewards, .section-rules, .section-testimonials {
    margin-bottom: var(--space-8);
  }
  .past-challenges-list .past-challenge, .section-testimonials .testimonial {
    padding-left: var(--space-4);
  }
}
@media (max-width: 600px) {
  .leaderboard {
    min-width: 340px;
    font-size: var(--font-size-sm);
  }
}