/* Quick quiz after each planet, dressed in Montessori Garden's green, orange and blue. */
.quiz-card {
  --mg-green: #3f9b2f; --mg-leaf: #7cc242; --mg-orange: #f5a623; --mg-blue: #2f7fd1;
  width: min(480px, calc(100vw - 32px));
  padding-top: 18px; color: #24401c; background: #fffdf7;
  border: 4px solid var(--mg-leaf); box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 0 6px rgba(124, 194, 66, .25);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.quiz-logo { display: block; width: auto; height: 70px; margin: 0 auto 8px; }
.quiz-card .kicker { display: inline-block; padding: 4px 14px; border-radius: 99px; background: var(--mg-orange); color: #fff; }
.quiz-q { font-size: clamp(22px, 5vw, 28px); margin: 8px 0 18px; line-height: 1.25; color: #2e6b22; }

/* Answer buttons: each one gets a brand color through --c (set in js/ui/quiz.js) */
.choices { display: grid; gap: 10px; }
.choice {
  font: 700 17px var(--font); color: #1f2d3d; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-radius: 16px;
  background: #fff; border: 3px solid var(--c); box-shadow: 0 3px 0 var(--c);
  transition: transform .12s, background .2s, border-color .2s;
}
.choice:hover:not(:disabled) { transform: translateY(-2px); background: #f6fbf1; }
.choice:focus-visible { outline: 3px solid var(--mg-blue); outline-offset: 3px; }
.choice canvas { flex: none; width: 44px; height: 44px; }
.choice .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--c); color: #fff; }
.choice.right { background: #e8f7df; border-color: var(--mg-green); box-shadow: 0 3px 0 var(--mg-green); }
.choice.wrong { background: #fff1e6; border-color: #e8743b; box-shadow: 0 3px 0 #e8743b; }
.choice:disabled { cursor: default; }
.choice:disabled:not(.right):not(.wrong) { opacity: .45; }

.quiz-result { min-height: 1.5em; margin: 16px 0 14px; font-size: 18px; font-weight: 800; }
.quiz-result.good { color: var(--mg-green); }
.quiz-result.soft { color: #c9621f; }
.quiz-card .big-btn { color: #fff; background: linear-gradient(135deg, var(--mg-leaf), var(--mg-green)); box-shadow: 0 8px 22px rgba(63, 155, 47, .35); animation: none; }