/* QRU / MCQ answer tiles — pressable, selectable, lockable */

.answer-choices {
  --answer-choice-bg: var(--color-bg-800);
  --answer-choice-border: transparent;
  --answer-choice-selected-bg: var(--bs-primary, var(--color-primary));
  --answer-choice-press-scale: 0.97;
  --answer-choice-pop-scale: 1.03;
}

.answer-choice {
  position: relative;
  cursor: pointer;
  background: var(--answer-choice-bg);
  font-weight: 600;
  font-size: 16px;
  color: white;
  min-height: 72px;
  width: 100%;
  border-radius: 16px;
  border: 2px solid var(--answer-choice-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.answer-choice:hover {
  background-color: var(--color-bg-alt-200);
}

.answer-choice--pressed {
  transform: scale(var(--answer-choice-press-scale));
  border-color: rgba(255, 255, 255, 0.35);
  background-color: var(--color-bg-alt-200);
}

.answer-choice--selected,
input[type="radio"]:checked + .answer-choice {
  background-color: var(--answer-choice-selected-bg);
  border-color: rgba(255, 255, 255, 0.45);
  color: white;
  transform: scale(var(--answer-choice-pop-scale));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.answer-choice--selected.answer-choice--pressed {
  transform: scale(var(--answer-choice-press-scale));
}

.answer-choice__text {
  flex: 1;
  text-align: center;
}

/* Outcome states (ready for inline reveal; unused while redirecting) */
.answer-choice--correct {
  background-color: var(--success-200, rgba(168, 244, 62, 0.12));
  border-color: var(--color-success);
  color: white;
  transform: none;
}

.answer-choice--wrong {
  background-color: var(--danger-200, rgba(253, 100, 100, 0.12));
  border-color: var(--color-danger);
  color: white;
  transform: none;
}

.answer-choices--locked {
  pointer-events: none;
}

.answer-choices--locked .answer-choice:not(.answer-choice--selected):not(.answer-choice--correct):not(.answer-choice--wrong) {
  opacity: 0.55;
}

.answer-choices--locked .answer-choice--selected {
  transform: scale(1);
}