/* ========= GAME OVERVIEW PAGE SPECIFIC STYLES ========= */

.game-overview-intro {
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
  background: linear-gradient(95deg, var(--color-bg) 80%, rgba(35,193,173,0.05) 100%);
  border-left: 6px solid var(--color-primary);
}

.game-section {
  margin-bottom: var(--space-8);
  position: relative;
}

.game-section h2 {
  color: var(--color-success);
  margin-top: 0;
}

.game-list,
.features-list {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.section-illustration {
  margin: var(--space-6) auto 0 auto;
  display: block;
  max-width: 370px;
  filter: drop-shadow(0 2px 10px rgba(35,193,173,0.08));
  border-radius: var(--radius-lg);
}

.progression-blocks {
  margin-top: var(--space-6);
  gap: var(--space-8);
  justify-content: flex-start;
  flex-wrap: wrap;
}
.progression-blocks > div {
  flex: 1 1 160px;
  background: var(--color-gray-800);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-xs);
  text-align: center;
  color: var(--color-primary);
}
.font-sm {
  color: var(--color-gray-400);
  font-size: var(--font-sm);
}

@media (max-width: 800px) {
  .progression-blocks {
    flex-direction: column;
    gap: var(--space-4);
  }
  .game-overview-intro {
    margin-top: var(--space-8);
  }
}

@media (max-width: 600px) {
  .game-section, .game-overview-intro {
    padding: var(--space-4) var(--space-2);
  }
  .section-illustration {
    max-width: 95vw;
  }
}

@media (max-width: 510px) {
  .game-overview-intro {
    border-left-width: 3px;
    margin-top: var(--space-4);
  }
}
/* ==== END GAME OVERVIEW CSS ==== */