/* === WRAPPER ===
   Ruime verticale spacing rondom en tussen de knoppen
------------------------------------------------------- */
.game-choice-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;              /* afstand tussen regels (bij grid: tussen rijen) */
  padding: 0.75rem 0;     /* extra lucht boven en onder */
}


/* === GRID ===
   1 kolom op mobiel → 2 kolommen op tablet/desktop
------------------------------------------------------- */
.game-choice-grid {
  display: grid;
  grid-template-columns: 1fr;     /* mobiel */
  gap: 1rem;                       /* ruimte tussen knoppen */
}

@media (min-width: 768px) {
  .game-choice-grid {
    grid-template-columns: repeat(2, 1fr); /* 2-koloms layout */
  }
}


/* === BUTTONS ===
   Game-styling knopjes die full-width zijn per grid kolom
------------------------------------------------------- */
.game-choice-btn {
  width: 100%;
  border: 2px solid var(--game-border-soft);
  background-color: var(--game-surface-soft);
  color: var(--game-text);
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;

  font-family: var(--game-font-family);
  font-size: 1rem;
  text-align: left;

  /* button zelf is geen flex-container meer */
  display: block;

  transition:
          background-color 0.18s ease-out,
          border-color 0.18s ease-out,
          box-shadow 0.18s ease-out,
          transform 0.08s ease-out;
}




/* === HOVER === */
.game-choice-btn:hover {
  background-color: var(--game-surface);
  border-color: var(--game-primary-soft);
  box-shadow:
          0 4px 12px rgba(0,0,0,0.25),
          0 0 0 2px var(--game-primary-soft);
  transform: translateY(-2px);
}


/* === GESELECTEERD === */
.game-choice-btn.selected {
  background-color: var(--game-primary-soft);
  border-color: var(--game-primary-strong);
  color: var(--game-text);

  font-weight: 700;

  box-shadow:
          0 4px 14px rgba(0,0,0,0.35),
          0 0 0 3px var(--game-primary-strong);
}



/* === LABEL === */
.game-input-label {
  color: var(--game-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* === INPUT === */
.game-text-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  border: 2px solid var(--game-border-soft);

  background-color: var(--game-surface-soft);
  color: var(--game-text);

  font-family: var(--game-font-family);
  font-size: 1.2rem;           /* grote tekst */
  font-weight: 700;            /* vet */
  letter-spacing: 0.03em;      /* fijn leesbaar */

  outline: none;
  display: block;

  transition:
          border-color 0.18s ease-out,
          box-shadow 0.18s ease-out,
          background-color 0.18s ease-out;
}

/* Hover/focus effect */
.game-text-input:hover,
.game-text-input:focus {
  border-color: var(--game-primary);
  background-color: var(--game-surface);
  box-shadow:
          0 0 0 2px var(--game-primary-soft),
          0 4px 12px rgba(0,0,0,0.25);
}