/* ===== Apples to Apples Game Styles ===== */

#gameMode {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

#discardButton {
  display: block;
  margin: var(--space-4) auto;
}

.game-blurb {
  background-color: var(--bg-tertiary);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  max-width: var(--max-width-card);
  margin-left: auto;
  margin-right: auto;
}

.game-blurb p {
  margin-bottom: var(--space-4);
}

.game-blurb ul {
  margin: var(--space-4) 0;
}

/* Card container for the red cards */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.card-container .card {
  background-color: var(--bg-card);
  border: 2px solid var(--color-danger);
  padding: var(--space-5);
  min-width: 150px;
  max-width: 200px;
  text-align: center;
  cursor: pointer;
}

.card-container .card:hover {
  border-color: var(--color-danger-hover);
  box-shadow: var(--shadow-lg);
}

/* Prompt card (green card) */
.prompt-card {
  background: linear-gradient(135deg, var(--color-success-light), var(--bg-primary));
  border: 3px solid var(--color-success);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}