/* ═══════════════════════════════════════════════════════════════
   Challenge Quiz Overlay — CSS for Element Garden Quiz Panel
   Used by: quizPanel() Alpine component in elementGarden2.js
   ═══════════════════════════════════════════════════════════════ */

/* Quiz Panel Container */
.swtd-quiz-overlay {
  margin-top: 0.75rem;
  padding: 1rem;
  background: rgba(var(--swtd-card-rgb, 30, 26, 27), 0.95);
  border: 1px solid var(--swtd-border);
  border-radius: 0.5rem;
  backdrop-filter: blur(8px);
}

/* Multiple Choice Option Buttons */
.swtd-quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--swtd-muted);
  background: var(--swtd-input, #2a2425);
  border: 1px solid var(--swtd-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swtd-quiz-option:hover:not(:disabled) {
  color: var(--swtd-light);
  border-color: var(--swtd-red);
}

.swtd-quiz-option:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Correct answer highlight */
.swtd-quiz-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgb(34, 197, 94) !important;
  color: rgb(34, 197, 94) !important;
}

/* Wrong answer highlight */
.swtd-quiz-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgb(239, 68, 68) !important;
  color: rgb(239, 68, 68) !important;
}

/* Points pop animation */
.swtd-quiz-points {
  animation: quiz-points-pop 0.5s ease-out;
}

@keyframes quiz-points-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Panel slide-in animation */
.swtd-quiz-slide-in {
  animation: quiz-slide-in 0.3s ease-out;
}

@keyframes quiz-slide-in {
  0%   { transform: translateY(1rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}