/* ==========================================================
   CHOICE BUTTONS  (add-on for core_style.css)

   Load this AFTER core_style.css. It only styles the
   .choice-buttons / .choice-btn classes, which no other
   exercise uses, so nothing in core_style.css is changed.

   Colours and shapes come from core_style.css:
   - pill radius 40px        (.draggable, .drop-zone, .select-blank)
   - blue accent #3b82f6     (.blank-number, .instruction)
   - light fill #f8faff and border #b9c8e0   (.drop-zone)
   - .correct / .incorrect   (reused as-is from core_style.css)
   ========================================================== */

.choice-buttons {
  display: inline-flex;
  gap: 8px;
  margin: 4px 4px;
  vertical-align: middle;
}

.choice-btn {
  min-width: 96px;
  height: 46px;
  padding: 0 24px;
  background: #ffffff;
  color: #3b82f6;
  border: 2px solid #3b82f6;
  border-radius: 40px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(59,130,246,0.15);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.choice-btn:hover {
  background: #3b82f6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(59,130,246,0.32);
}

.choice-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.choice-btn:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* Picked (grading colours below take over straight away) */
.choice-btn.selected {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* .correct and .incorrect colours come from core_style.css.
   These rules only add the icons and motion. */
.choice-btn.correct::before {
  content: "\2713\00a0";
  font-weight: 700;
}

.choice-btn.incorrect::before {
  content: "\2717\00a0";
  font-weight: 700;
}

.choice-btn.correct {
  box-shadow: 0 4px 10px rgba(52,211,153,0.35);
}

.choice-btn.incorrect {
  animation: choice-nudge 0.35s ease;
}

/* When the right answer is chosen, fade the option that was not */
.choice-buttons:has(.correct) .choice-btn:not(.correct) {
  opacity: 0.45;
}

@keyframes choice-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

@media (max-width: 560px) {
  .choice-btn {
    min-width: 80px;
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice-btn { transition: none; }
  .choice-btn:hover { transform: none; }
  .choice-btn.incorrect { animation: none; }
}