/* Shared styles for Grand Prix Math + Speed Sums */

.rg-setup { display: flex; flex-direction: column; gap: 16px; }
.rg-setup h3 { margin: 0 0 8px; font-size: 1.05rem; }

.rg-pick-row { display: flex; flex-wrap: wrap; gap: 10px; }

.rg-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  min-width: 140px;
  text-align: left;
}
.rg-pick strong { font-size: 0.98rem; }
.rg-pick small { color: var(--color-text-soft); }
.rg-pick[aria-pressed="true"] { border-color: var(--color-primary); background: rgba(79, 216, 224, 0.12); }
.rg-pick:disabled { opacity: 0.45; cursor: not-allowed; }

.rg-color-pick { flex-direction: row; align-items: center; min-width: auto; }
.rg-swatch { width: 20px; height: 20px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.3); }

.rg-mastery { color: var(--color-text-soft); font-size: 0.9rem; }

.rg-race { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#rg-canvas { max-width: 100%; border-radius: 12px; }

.rg-question {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 560px;
  text-align: center;
}
.rg-question__prompt { font-size: 1.4rem; font-weight: 700; margin: 0 0 12px; }
.rg-question__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rg-choice {
  border: 2px solid var(--color-primary);
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 64px;
}
.rg-choice:hover { background: var(--color-surface-hover); }

.rg-feedback { padding: 8px 14px; border-radius: 10px; font-weight: 600; text-align: center; max-width: 560px; }
.rg-feedback.rg-good { background: rgba(74, 222, 128, 0.15); color: var(--color-success); }
.rg-feedback.rg-bad { background: rgba(238, 111, 168, 0.14); color: var(--color-accent); }

.rg-results { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }