.quiz-card{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin-bottom:16px;
  transition:transform .32s ease, opacity .32s ease;
}

/* Sequential ("Silent Teacher" style) question transitions - only used
   when a quiz is shown one question at a time. Correct answer slides the
   current question out to the left; the next one enters from the right. */
.quiz-card.slide-out{transform:translateX(-36px); opacity:0;}
.quiz-card.slide-in{transform:translateX(36px); opacity:0;}
.quiz-card.no-transition{transition:none !important;}

.quiz-q{font-weight:600;font-size:15px;margin-bottom:14px;}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:560px){.quiz-options{grid-template-columns:1fr;}}
.quiz-opt{text-align:left;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:8px;font-size:13.5px;cursor:pointer;font-family:var(--sans);transition:all .15s ease;}
.quiz-opt:hover{border-color:var(--amber);}
.quiz-opt.correct{background:rgba(79,209,197,.12);border-color:var(--teal);color:var(--teal);}
.quiz-opt.incorrect{background:rgba(240,84,107,.12);border-color:var(--danger);color:var(--danger);}
.quiz-opt[disabled]{cursor:default;}
.quiz-feedback{margin-top:12px;font-size:13.5px;color:var(--text-muted);display:none;}
.quiz-feedback.show{display:block;}

.quiz-fillblank{display:flex;gap:10px;flex-wrap:wrap;}
.quiz-fillblank-input{
  flex:1;min-width:160px;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);
  padding:11px 14px;border-radius:8px;font-size:13.5px;font-family:var(--sans);transition:all .15s ease;
}
.quiz-fillblank-input:focus{outline:none;border-color:var(--amber);}
.quiz-fillblank-input.correct{background:rgba(79,209,197,.12);border-color:var(--teal);color:var(--teal);}
.quiz-fillblank-input.incorrect{background:rgba(240,84,107,.12);border-color:var(--danger);color:var(--danger);}
.quiz-fillblank-input[disabled]{cursor:default;}
.quiz-fillblank-submit{
  font-family:var(--mono);font-size:12.5px;font-weight:700;padding:10px 18px;border-radius:8px;
  border:1px solid var(--amber);background:var(--amber);color:#0B0E14;cursor:pointer;
}
.quiz-fillblank-submit:hover{background:#f2b25a;}
.quiz-fillblank-submit[disabled]{opacity:.5;cursor:default;background:var(--bg-panel-2);border-color:var(--border);color:var(--text-muted);}

.quiz-sequential-progress{
  font-family:var(--mono);font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:10px;
}
.quiz-sequential-done{
  font-family:var(--mono);font-size:15px;color:var(--teal);text-align:center;padding:24px;
  background:var(--bg-panel);border:1px solid var(--teal);border-radius:10px;
}

/* ============================================================================
   BREATHING - only on choices still waiting for an answer. Passive content
   (question text, feedback, progress line) never breathes.
   ============================================================================ */
@keyframes quizBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
}
.quiz-opt:not([disabled]){ animation:quizBreathe 4.5s ease-in-out infinite; }
.quiz-opt:not([disabled]):hover,
.quiz-opt:not([disabled]):focus{ animation-play-state:paused; }

.quiz-fillblank-input:not([disabled]){ animation:quizBreathe 5s ease-in-out infinite; }
.quiz-fillblank-input:not([disabled]):hover,
.quiz-fillblank-input:not([disabled]):focus{ animation-play-state:paused; }

/* ============================================================================
   PRESS-POP - tactile feedback on any click, right or wrong. Not a reward,
   just responsiveness.
   ============================================================================ */
@keyframes quizPress{
  0%{ transform:scale(1); }
  40%{ transform:scale(.94); }
  100%{ transform:scale(1); }
}
.press-pop{ animation:quizPress .22s ease; }

/* ============================================================================
   CORRECT ANSWER - a rainbow band rises through the page background.
   Sized taller than the viewport and offset so a translateY sweep carries
   it fully from below to above; mix-blend-mode:screen lets it light up
   the dark theme instead of sitting on top as a flat colored slab.
   ============================================================================ */
.quiz-rainbow-overlay{
  position:fixed; left:0; right:0; top:-50%; height:200%;
  z-index:2400; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,90,90,.55) 12%,
    rgba(255,175,80,.55) 24%,
    rgba(255,235,90,.5) 36%,
    rgba(120,230,140,.5) 48%,
    rgba(90,190,255,.5) 60%,
    rgba(160,120,255,.5) 72%,
    rgba(255,120,220,.5) 84%,
    transparent 100%);
  mix-blend-mode:screen;
  transform:translateY(55%);
}
.quiz-rainbow-overlay.rise{
  animation:quizRainbowRise 1.15s cubic-bezier(.22,.7,.3,1);
}
@keyframes quizRainbowRise{
  0%{ opacity:0; transform:translateY(55%); }
  10%{ opacity:1; }
  75%{ opacity:.9; }
  100%{ opacity:0; transform:translateY(-55%); }
}

/* ============================================================================
   WRONG ANSWER - full-screen flash + whole-page tremble. Fires on every
   miss (including no-penalty retry/fillblank misses), independent of
   whether the streak actually breaks.
   ============================================================================ */
.quiz-wrong-overlay{
  position:fixed; inset:0; z-index:2500; background:rgba(240,84,107,.4);
  opacity:0; pointer-events:none;
}
.quiz-wrong-overlay.flash{ animation:quizWrongFlash .45s ease-out; }
@keyframes quizWrongFlash{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:0; }
}

@keyframes quizTremble{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,2px); }
  40%{ transform:translate(5px,-3px); }
  60%{ transform:translate(-4px,3px); }
  80%{ transform:translate(4px,-2px); }
}
body.quiz-tremble{ animation:quizTremble .4s ease; }

/* ============================================================================
   SPARKLE PARTICLES - three tiers: correct answer, 3-streak, quiz complete
   (perfect run gets the largest variant of the last one).
   ============================================================================ */
.quiz-spark{
  position:fixed;width:6px;height:6px;border-radius:50%;
  background:var(--sc, var(--amber));
  pointer-events:none;z-index:2000;transform:translate(-50%,-50%);
  animation:quizSparkOut .6s ease-out forwards;
}
.quiz-spark.mid{width:7px;height:7px;animation-duration:.72s;}
.quiz-spark.big{width:8px;height:8px;animation-duration:.85s;}
@keyframes quizSparkOut{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}