/**
 * F-070: Engaging Quiz Experience
 * All engagement styles: celebrations, floating captions, combo, progress bar,
 * mastery HUD, stars, countdown bar, near-miss, peek view, +1 floats,
 * LVL+ animation, badge showcase
 *
 * Design system: Uses app CSS variables from base.css
 * Theme: Dark mode default, light mode via [data-theme="light"]
 * Icons: SVG via Icons.get() — no emojis
 * Glassmorphism: backdrop-filter: blur() on HUD and overlays
 *
 * Version: 1.1
 * Updated: 2026-03-06
 */

/* ============================================================================
   CSS VARIABLES — Engagement Theme (inherits from base.css)
   ============================================================================ */

:root {
  /* Celebration colors (consistent across themes) */
  --engagement-green: var(--success, #22c55e);
  --engagement-green-light: rgba(34, 197, 94, 0.08);
  --engagement-green-glow: rgba(34, 197, 94, 0.2);
  --engagement-amber: var(--warning, #eab308);
  --engagement-amber-light: rgba(245, 158, 11, 0.12);
  --engagement-amber-glow: rgba(245, 158, 11, 0.35);
  --engagement-red: var(--error, #ef4444);
  --engagement-red-light: rgba(239, 68, 68, 0.08);
  --engagement-gold: #fbbf24;
  --engagement-gold-glow: rgba(251, 191, 36, 0.4);
  --engagement-blue: var(--accent, #2563EB);
  --engagement-blue-light: rgba(59, 130, 246, 0.12);

  /* Progress bar */
  --progress-bar-height: 3px;
  --progress-start-color: var(--accent, #2563EB);
  --progress-end-color: var(--success, #22c55e);

  /* HUD — glassmorphism */
  --hud-height: 44px;
  --hud-bg: rgba(18, 24, 32, 0.75);
  --hud-border: rgba(255, 255, 255, 0.06);
  --hud-text: var(--text-primary, #e2e8f0);
  --hud-text-muted: var(--text-muted, #64748b);
  --hud-divider: rgba(255, 255, 255, 0.08);

  /* Combo */
  --combo-bg: rgba(59, 130, 246, 0.1);
  --combo-border: rgba(59, 130, 246, 0.2);

  /* Floating caption — glassmorphism */
  --caption-bg: rgba(18, 24, 32, 0.85);
  --caption-text: var(--text-secondary, #94a3b8);
  --caption-border: rgba(255, 255, 255, 0.06);
  --caption-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

  /* Exit confirmation */
  --exit-bg: rgba(18, 24, 32, 0.92);
  --exit-border: rgba(255, 255, 255, 0.08);
  --exit-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Timing */
  --celebration-duration: 700ms;
  --float-duration: 600ms;
  --caption-fade-in: 200ms;
  --caption-fade-out: 300ms;
  --countdown-duration: 2500ms;
  --slide-duration: 200ms;
}

/* Light mode overrides */
body:has(#theme-toggle:checked),
[data-theme="light"] {
  --hud-bg: rgba(255, 255, 255, 0.8);
  --hud-border: rgba(0, 0, 0, 0.06);
  --hud-text: var(--text-primary, #1e293b);
  --hud-text-muted: var(--text-muted, #64748b);
  --hud-divider: rgba(0, 0, 0, 0.08);
  --caption-bg: rgba(255, 255, 255, 0.9);
  --caption-text: var(--text-secondary, #475569);
  --caption-border: rgba(0, 0, 0, 0.06);
  --caption-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --combo-bg: rgba(59, 130, 246, 0.08);
  --combo-border: rgba(59, 130, 246, 0.15);
  --exit-bg: rgba(255, 255, 255, 0.95);
  --exit-border: rgba(0, 0, 0, 0.08);
  --exit-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --engagement-green-light: rgba(34, 197, 94, 0.1);
  --engagement-amber-light: rgba(245, 158, 11, 0.1);
  --engagement-red-light: rgba(239, 68, 68, 0.06);
  --engagement-blue-light: rgba(59, 130, 246, 0.08);
}

/* ============================================================================
   HEADER OVERRIDE — When engagement is active, header must be fixed at top
   The header is normally position:sticky but fixed progress bar overlaps it.
   Making it position:fixed keeps it truly at the top of the viewport.
   ============================================================================ */

body:has(.quiz-compact-stats) .unified-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1001 !important;
  border-bottom: none !important; /* Remove separator — quiz has its own progress bar below */
}

/* Hide task-context-bar on quiz — header already shows "Quiz: {Topic}" and this
   sticky white bar (z-index:99) overlaps & clips the bottom of the stat badges */
body:has(.quiz-compact-stats) .task-context-bar {
  display: none !important;
}

/* ============================================================================
   BODY OFFSET — Push content below the fixed header + progress bar
   Header (48px) + Progress (3px) = 51px (no more HUD bar taking vertical space)
   ============================================================================ */

body:has(.quiz-compact-stats) {
  padding-top: calc(var(--header-height, 48px) + var(--progress-bar-height) + 4px) !important;
}

/* ============================================================================
   PROGRESS BAR (SF-070.4 — Zeigarnik Effect)
   3px bar at very top, edge-to-edge. No numbers.
   ============================================================================ */

.quiz-progress-bar {
  position: relative;
  height: 8px;
  background: var(--hud-divider);
  z-index: 10;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 2px;
  margin: 4px 20px 6px;
  border-radius: 4px;
}
@media (max-width: 480px) {
  .quiz-progress-bar {
    margin: 2px 16px 4px;
    height: 6px;
  }
}

/* Hide the old fill element */
.quiz-progress-bar__fill {
  display: none;
}

/* Individual segment per question */
.quiz-progress-seg {
  flex: 1;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 300ms ease, transform 150ms ease;
  position: relative;
  border-radius: 2px;
}

.quiz-progress-seg:hover {
  transform: scaleY(1.8);
  filter: brightness(1.3);
}

/* Visited but unanswered — muted blue */
.quiz-progress-seg.seg-visited {
  background: rgba(59, 130, 246, 0.35);
}

/* Current question — bright indicator that overlays any state */
.quiz-progress-seg.seg-current {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: -1px;
  z-index: 1;
}
/* Current + not yet answered → bright blue fill */
.quiz-progress-seg.seg-current:not(.seg-correct):not(.seg-partial):not(.seg-wrong) {
  background: var(--engagement-blue, #2563EB);
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
}

/* Correct answer — green */
.quiz-progress-seg.seg-correct {
  background: var(--engagement-green, #22c55e);
}

/* Partial marks — amber */
.quiz-progress-seg.seg-partial {
  background: var(--engagement-amber, #eab308);
}

/* Wrong answer — red */
.quiz-progress-seg.seg-wrong {
  background: var(--engagement-red, #ef4444);
}

/* ---- Previous attempt outlines (SF-070.22) ----
   Outline-only indicators from previous quiz attempt.
   Uses inset box-shadow to avoid changing segment dimensions.
   Overridden when current-session answers fill with solid color. */
.quiz-progress-seg.seg-prev-correct {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--engagement-green, #22c55e);
  opacity: 0.6;
}
.quiz-progress-seg.seg-prev-partial {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--engagement-amber, #eab308);
  opacity: 0.6;
}
.quiz-progress-seg.seg-prev-wrong {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--engagement-red, #ef4444);
  opacity: 0.6;
}
/* Current-session solid fill overrides previous outlines */
.quiz-progress-seg.seg-correct,
.quiz-progress-seg.seg-partial,
.quiz-progress-seg.seg-wrong {
  box-shadow: none;
  opacity: 1;
}

/* Tooltip on hover */
.quiz-progress-seg::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 1001;
}

.quiz-progress-seg:hover::after {
  opacity: 1;
}

/* ============================================================================
   NAV BAR STAT ICONS (SF-070.17)
   XP + Mastery icons inline in the compact nav bar.
   Colours match student menu (.score-icon--xp, .score-icon--mastery).
   ============================================================================ */

.quiz-compact-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* ---- SF-070.22: Full-width ticker overlay ----
   When active, fades out nav/stats/reset and shows a centered
   message across the entire header width with a subtle background pill. */

/* The ticker overlay sits inside .quiz-compact-header, absolutely positioned */
.stats-ticker-context {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 350ms ease-out;
  pointer-events: none;
  z-index: 2;
  padding: 0 12px;
}

/* Background pill behind the ticker content — tinted per variant via --ticker-bg */
.stats-ticker-context::before {
  content: '';
  position: absolute;
  inset: 4px 8px;
  border-radius: 10px;
  background: var(--ticker-bg, rgba(241, 245, 249, 0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}

/* Icon wrapper */
.ticker-icon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-icon-wrap svg {
  width: 16px;
  height: 16px;
}

/* Text + Icon — must override body.light-mode span !important (0-1-1) with (0-2-0) */
.stats-ticker-context .ticker-text,
.stats-ticker-context .ticker-icon-wrap {
  color: var(--ticker-color, #2563EB) !important;
}

.ticker-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legend swatches — small outlined squares matching progress bar outlines */
.ticker-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ticker-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: transparent;
}

/* When header has ticker-showing: crossfade grid children out, overlay in */
.quiz-compact-header.ticker-showing > .quiz-compact-nav,
.quiz-compact-header.ticker-showing > .quiz-compact-stats,
.quiz-compact-header.ticker-showing > .quiz-compact-stats--left,
.quiz-compact-header.ticker-showing > .quiz-compact-stats--right,
.quiz-compact-header.ticker-showing > .quiz-compact-reset-btn,
.quiz-compact-header.ticker-showing > .quiz-compact-menu-btn,
.quiz-compact-header.ticker-showing > .quiz-compact-nav-link {
  opacity: 0;
  transition: opacity 250ms ease-in;
  pointer-events: none;
}

/* Fade children back in when ticker hides */
.quiz-compact-header > .quiz-compact-nav,
.quiz-compact-header > .quiz-compact-stats,
.quiz-compact-header > .quiz-compact-stats--left,
.quiz-compact-header > .quiz-compact-stats--right,
.quiz-compact-header > .quiz-compact-reset-btn,
.quiz-compact-header > .quiz-compact-menu-btn,
.quiz-compact-header > .quiz-compact-nav-link {
  transition: opacity 350ms ease-out;
}

.quiz-compact-header.ticker-showing > .stats-ticker-context {
  opacity: 1;
  pointer-events: auto;
}

/* SF-070.23: Marks badge styles */
.quiz-nav-stat--marks {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.quiz-nav-stat--marks .quiz-nav-stat__val {
  font-variant-numeric: tabular-nums;
  transition: transform 200ms ease, color 200ms ease;
}
.quiz-nav-stat--marks.pulse .quiz-nav-stat__val {
  animation: marks-pulse 400ms ease;
}
.quiz-nav-stat--marks.full-marks {
  color: #15803d;
}
.quiz-nav-stat--marks.full-marks .quiz-nav-stat__val {
  animation: marks-full 600ms ease;
}
@keyframes marks-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes marks-full {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* SF-070.23: Structure badge styles */
.quiz-nav-stat--structure {
  background: rgba(99, 102, 241, 0.10);
  color: #6366f1;
}
.quiz-nav-stat--structure.structure-good {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.10);
}
.quiz-nav-stat--structure.structure-needs-work {
  color: #d97706;
  background: rgba(245, 158, 11, 0.10);
}

/* SF-070.23: Spelling badge styles */
.quiz-nav-stat--spelling {
  background: rgba(99, 102, 241, 0.10);
  color: #6366f1;
}
.quiz-nav-stat--spelling.spelling-ok {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.10);
}
.quiz-nav-stat--spelling.spelling-errors {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
}

/* SF-070.23: Ticker text wrapping for multi-line hints */
.quiz-compact-header.ticker-showing .ticker-text {
  white-space: normal;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* SF-070.23: Mobile responsive ticker text */
@media (max-width: 480px) {
  .quiz-compact-header.ticker-showing .ticker-text {
    font-size: 11px;
  }
  .quiz-nav-stat--marks .quiz-nav-stat__val { font-size: 12px; }
}

/* SF-070.24: Unified badge sizing — all badges MUST be same height with centered SVGs */
.quiz-nav-stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-height: 36px;
  box-sizing: border-box;
  transition: transform 200ms ease, box-shadow 200ms ease;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.quiz-nav-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Force all SVG icons to same size — overrides SVG width/height attributes */
.quiz-nav-stat__icon .icon {
  display: block;
  width: 20px;
  height: 20px;
}

.quiz-nav-stat__val {
  font-size: 14px;
  font-weight: 700;
}

/* XP — amber/gold (matches student menu .score-icon--xp) */
.quiz-nav-stat--xp {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

/* Combo multiplier shown inline on XP badge */
.quiz-nav-stat--xp.has-combo::after {
  content: attr(data-combo);
  margin-left: 3px;
  font-size: 11px;
  font-weight: 800;
  color: #f97316;
  animation: combo-pop 300ms ease-out;
}

@keyframes combo-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Mastery — blue (matches student menu .score-icon--mastery) */
.quiz-nav-stat--mastery {
  background: rgba(59, 130, 246, 0.15);
  color: #2563EB;
}

/* Mastery icon — same size as base, no override needed */

/* Shield number overlaid inside the icon */
.quiz-nav-stat__shield-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: inherit;
  pointer-events: none;
}

/* ---- Correct answer pulse animations ---- */

.quiz-nav-stat--xp.is-pulsing {
  animation: nav-stat-pulse-xp 600ms ease-out;
}

.quiz-nav-stat--mastery.is-pulsing {
  animation: nav-stat-pulse-mastery 700ms ease-out;
}

@keyframes nav-stat-pulse-xp {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.3); }
  40% { transform: scale(1.18); box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.25); }
  100% { transform: scale(1); box-shadow: none; }
}

@keyframes nav-stat-pulse-mastery {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
  40% { transform: scale(1.15); box-shadow: 0 0 12px 4px rgba(59, 130, 246, 0.25); }
  100% { transform: scale(1); box-shadow: none; }
}

/* SF-070.25: Generic badge flash for XP awarded / mastery change */
.quiz-nav-stat.badge-flash {
  animation: badge-flash-pop 800ms ease-out;
}

@keyframes badge-flash-pop {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.2); filter: brightness(1.3); }
  50% { transform: scale(1.05); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Level-up: strong gold glow highlight on the shield */
.quiz-nav-stat--mastery.is-level-up {
  z-index: 1101; /* Above fireworks container */
  animation: shield-level-up-glow 3.5s ease-in-out;
}

@keyframes shield-level-up-glow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  10% { transform: scale(1.4); box-shadow: 0 0 20px 8px rgba(245, 158, 11, 0.6); }
  30% { transform: scale(1.25); box-shadow: 0 0 16px 6px rgba(245, 158, 11, 0.5); }
  50% { transform: scale(1.3); box-shadow: 0 0 18px 7px rgba(245, 158, 11, 0.45); }
  80% { transform: scale(1.15); box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* "+N" text that floats up from XP badge on correct answer */
.xp-float-text {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 800;
  color: var(--engagement-green, #22c55e);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: none;
}

.xp-float-text.is-floating {
  transition: transform 1000ms ease-out, opacity 1000ms ease-out;
  transform: translateX(-50%) translateY(-40px);
  opacity: 0;
}

/* ============================================================================
   COMBO BADGE (SF-070.3 — Top-Right Corner)
   ============================================================================ */

.combo-badge {
  /* Hidden: combo multiplier is shown inline on XP badge via .has-combo::after */
  display: none;
}

.combo-badge.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 3-4 combo: amber glow */
.combo-badge.combo-tier-2 {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--engagement-amber);
  box-shadow: 0 0 12px var(--engagement-amber-glow);
}

/* 5+ combo: gold glow + enlarged */
.combo-badge.combo-tier-3 {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #d97706;
  box-shadow: 0 0 20px var(--engagement-gold-glow);
  font-size: var(--font-base, 14px);
  font-weight: 700;
  padding: 6px 14px;
}

/* 7+ combo: golden border on quiz container */
.quiz-container.combo-golden-border {
  box-shadow: 0 0 0 2px var(--engagement-gold), 0 0 20px var(--engagement-gold-glow);
  transition: box-shadow 0.5s ease;
}

/* Structure quality indicator */
.structure-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted);
}

/* ============================================================================
   FLOATING +1 ANIMATION (SF-070.1 — Real-Time Scoring)
   ============================================================================ */

.float-plus-one {
  position: absolute;
  right: 16px;
  font-size: var(--font-base, 14px);
  font-weight: 700;
  color: var(--engagement-green);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  animation: float-up var(--float-duration) ease-out forwards;
}

.float-plus-one--checkpoint {
  font-size: var(--font-sm, 13px);
}

.float-plus-one__label {
  font-size: var(--font-xs, 11px);
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.7;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ============================================================================
   CELEBRATION WASHES (SF-070.1 — Post-Submit)
   ============================================================================ */

/* Target .quiz-question (rendered by quiz-renderer.js) */
.quiz-question {
  border: 2px solid transparent;
  border-radius: var(--radius-lg, 12px);
  padding: 12px 16px;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

/* Correct — green border + subtle background tint (animation then persist) */
.quiz-question.celebration-green {
  animation: border-green 1.2s ease-out;
}

/* Persistent border after celebration animation completes
   High-specificity selectors to override light-mode !important in quiz.html */
body .quiz-question.answered-correct,
body.light-mode .quiz-question.answered-correct {
  border-color: var(--engagement-green) !important;
  background-color: rgba(34, 197, 94, 0.03) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.18), 0 0 4px rgba(34, 197, 94, 0.10) !important;
}
body .quiz-question.answered-partial,
body.light-mode .quiz-question.answered-partial {
  border-color: var(--engagement-amber) !important;
  background-color: rgba(245, 158, 11, 0.03) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.18), 0 0 4px rgba(245, 158, 11, 0.10) !important;
}
body .quiz-question.answered-wrong,
body.light-mode .quiz-question.answered-wrong {
  border-color: var(--engagement-red, #ef4444) !important;
  background-color: rgba(239, 68, 68, 0.02) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.18), 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

@keyframes border-green {
  0%   { border-color: transparent; box-shadow: none; background-color: transparent; }
  15%  { border-color: var(--engagement-green); box-shadow: 0 0 12px rgba(34, 197, 94, 0.2); background-color: rgba(34, 197, 94, 0.04); }
  60%  { border-color: var(--engagement-green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.12); background-color: rgba(34, 197, 94, 0.03); }
  100% { border-color: var(--engagement-green); box-shadow: none; background-color: rgba(34, 197, 94, 0.03); }
}

/* Partial — amber border + subtle tint */
.quiz-question.celebration-amber {
  animation: border-amber 1.2s ease-out;
}

@keyframes border-amber {
  0%   { border-color: transparent; box-shadow: none; background-color: transparent; }
  15%  { border-color: var(--engagement-amber); box-shadow: 0 0 12px rgba(245, 158, 11, 0.2); background-color: rgba(245, 158, 11, 0.04); }
  60%  { border-color: var(--engagement-amber); box-shadow: 0 0 8px rgba(245, 158, 11, 0.12); background-color: rgba(245, 158, 11, 0.03); }
  100% { border-color: var(--engagement-amber); box-shadow: none; background-color: rgba(245, 158, 11, 0.03); }
}

/* Wrong — brief red border + red tint */
.quiz-question.celebration-red {
  animation: border-red 600ms ease-out;
}

@keyframes border-red {
  0%   { border-color: transparent; box-shadow: none; background-color: transparent; }
  30%  { border-color: var(--engagement-red, #ef4444); box-shadow: 0 0 8px rgba(239, 68, 68, 0.15); background-color: rgba(239, 68, 68, 0.03); }
  100% { border-color: var(--engagement-red, #ef4444); box-shadow: none; background-color: rgba(239, 68, 68, 0.02); }
}

/* ============================================================================
   LEVEL UP ANIMATION (SF-070.17 — LVL+)
   ============================================================================ */

.level-up-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--engagement-gold);
  border-radius: var(--radius-lg, 12px);
  padding: 8px 16px;
  text-align: center;
  z-index: 1100;
  box-shadow: 0 0 20px var(--engagement-gold-glow);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.level-up-overlay.is-showing {
  animation: level-up-bounce 5s ease-out forwards;
}

@keyframes level-up-bounce {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  18% { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
  90% { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
}

.level-up-overlay__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--engagement-gold);
  letter-spacing: 2px;
}

.level-up-overlay__detail {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

/* ============================================================================
   FIREWORKS CELEBRATION (Level-Up)
   ============================================================================ */

.fireworks-container {
  position: fixed;
  inset: 0;
  z-index: 1099; /* Behind level-up overlay (1100) */
  pointer-events: none;
  overflow: hidden;
}

/* Dark backdrop as pseudo-element so it doesn't hide sparks with opacity */
.fireworks-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fireworks-backdrop 3.5s ease-out forwards;
}

@keyframes fireworks-backdrop {
  0% { opacity: 0; }
  8% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.firework-trail {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  filter: blur(0.5px);
  animation: firework-rise 600ms ease-out forwards;
}

/* Trail leaves a fading streak behind it */
.firework-trail::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: inherit;
  opacity: 0.4;
  filter: blur(2px);
  border-radius: 0 0 3px 3px;
}

@keyframes firework-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(-1 * var(--peak-y, 70%)));
    opacity: 0.6;
  }
}

.firework-spark {
  position: absolute;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  animation: firework-burst var(--duration, 1.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Glow halo around each spark */
.firework-spark::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  filter: blur(6px);
}

/* Streak/trail behind each spark — rotated radially outward */
.firework-spark::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 14px;
  background: inherit;
  opacity: 0.35;
  filter: blur(1.5px);
  border-radius: 3px;
  top: 50%;
  left: 50%;
  transform-origin: center top;
  transform: translate(-50%, 0) rotate(var(--angle, 0deg));
}

@keyframes firework-burst {
  0% {
    transform: translate(0, 0) scale(1.5);
    opacity: 1;
  }
  8% {
    transform: translate(calc(var(--tx, 0) * 0.12), calc(var(--ty, 0) * 0.12)) scale(1.3);
    opacity: 1;
  }
  35% {
    opacity: 0.85;
    transform: translate(calc(var(--tx, 0) * 0.55), calc(var(--ty, 0) * 0.55)) scale(0.7);
  }
  70% {
    opacity: 0.4;
    transform: translate(calc(var(--tx, 0) * 0.88), calc(var(--ty, 0) * 0.85 + 30px)) scale(0.35);
  }
  100% {
    transform: translate(var(--tx, 0), calc(var(--ty, 0) + 70px)) scale(0);
    opacity: 0;
  }
}

/* ============================================================================
   FLOATING COACHING CAPTION (SF-070.6/7/8 — Glassmorphism)
   ============================================================================ */

.floating-caption {
  position: relative;
  max-width: 480px;
  margin: 8px auto;
  padding: 10px 16px;
  background: var(--caption-bg);
  border: 1px solid var(--caption-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--caption-shadow);
  font-size: var(--font-sm, 13px);
  color: var(--caption-text);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--caption-fade-in) ease, transform var(--caption-fade-in) ease;
  pointer-events: none;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.floating-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-caption.is-fading-out {
  opacity: 0;
  transform: translateY(-5px);
  transition-duration: var(--caption-fade-out);
}

.floating-caption--command-word {
  border-left: 3px solid var(--engagement-blue);
}

.floating-caption--structure {
  border-left: 3px solid var(--engagement-amber);
}

.floating-caption--hint {
  border-left: 3px solid var(--hud-text-muted);
}

/* SF-070.25: Near-miss variant — amber/gold to encourage "almost there!" */
.floating-caption--near-miss {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  font-weight: 600;
}

/* ============================================================================
   AUTO-ADVANCE COUNTDOWN BAR (SF-070.2)
   ============================================================================ */

.auto-advance-bar {
  position: relative;
  height: 2px;
  margin: 12px 0;
  background: var(--hud-divider);
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

.auto-advance-bar.is-active {
  opacity: 1;
}

.auto-advance-bar__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--engagement-green), var(--engagement-blue));
  border-radius: 1px;
  transform-origin: left;
}

.auto-advance-bar__fill.is-counting {
  animation: countdown-shrink var(--countdown-duration) linear forwards;
}

@keyframes countdown-shrink {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* ============================================================================
   QUESTION SLIDE TRANSITION (SF-070.2)
   ============================================================================ */

.quiz-question-area.slide-out-left {
  animation: slide-out-left var(--slide-duration) ease-out forwards;
}

.quiz-question-area.slide-in-right {
  animation: slide-in-right var(--slide-duration) ease-out forwards;
}

@keyframes slide-out-left {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-30px); opacity: 0; }
}

@keyframes slide-in-right {
  0% { transform: translateX(30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ============================================================================
   EXIT CONFIRMATION (SF-070.17 — Glassmorphism Floating)
   ============================================================================ */

.exit-confirmation {
  position: fixed;
  top: calc(var(--progress-bar-height) + var(--hud-height) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--exit-bg);
  border: 1px solid var(--exit-border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--exit-shadow);
  padding: 20px 24px;
  max-width: 360px;
  width: calc(100% - 32px);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.exit-confirmation.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.exit-confirmation__title {
  font-size: var(--font-lg, 16px);
  font-weight: 600;
  color: var(--hud-text);
  margin-bottom: 8px;
}

.exit-confirmation__message {
  font-size: var(--font-sm, 13px);
  color: var(--hud-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
  white-space: pre-line;
}

.exit-confirmation__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.exit-confirmation__btn {
  padding: 8px 20px;
  border-radius: var(--radius-md, 8px);
  border: none;
  cursor: pointer;
  font-size: var(--font-sm, 13px);
  font-weight: 500;
  transition: background var(--transition-fast, 150ms), transform 0.1s;
}

.exit-confirmation__btn:active {
  transform: scale(0.97);
}

.exit-confirmation__btn--leave {
  background: var(--hud-divider);
  color: var(--hud-text-muted);
}

.exit-confirmation__btn--leave:hover {
  background: rgba(255, 255, 255, 0.1);
}

.exit-confirmation__btn--stay {
  background: var(--engagement-green);
  color: #fff;
  font-weight: 600;
}

.exit-confirmation__btn--stay:hover {
  background: #16a34a;
}

/* Reset mode: swap button styles — Reset is primary blue, Cancel is muted */
.exit-confirmation--reset .exit-confirmation__btn--leave {
  background: var(--accent, #2563EB);
  color: #fff;
  font-weight: 600;
}
.exit-confirmation--reset .exit-confirmation__btn--leave:hover {
  background: #2563eb;
}
.exit-confirmation--reset .exit-confirmation__btn--stay {
  background: var(--engagement-green, #22c55e);
  color: #fff;
  font-weight: 600;
}
.exit-confirmation--reset .exit-confirmation__btn--stay:hover {
  background: #16a34a;
}

/* ============================================================================
   PEEK VIEW (SF-070.5 — Model Answer Slide-Up)
   ============================================================================ */

.peek-view {
  position: relative;
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  background: var(--bg-secondary, #1a222d);
  border-radius: var(--radius-lg, 12px);
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.peek-view.is-expanded {
  max-height: 300px;
  padding: 16px;
  border: 1px solid var(--hud-border);
}

.peek-view__handle {
  text-align: center;
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted);
  padding: 8px;
  cursor: pointer;
}

.peek-view__content {
  font-size: var(--font-sm, 13px);
  line-height: 1.6;
  color: var(--text-secondary, #94a3b8);
}

/* ============================================================================
   STAR RATING (SF-070.9 — Topic Mastery)
   ============================================================================ */

.star-rating {
  display: inline-flex;
  gap: 4px;
}

.star-rating__star {
  display: flex;
  align-items: center;
  color: var(--hud-text-muted);
  opacity: 0.3;
  transition: color 0.3s, transform 0.3s, opacity 0.3s;
}

.star-rating__star.is-earned {
  color: var(--engagement-gold);
  opacity: 1;
}

.star-rating__star.is-animating {
  animation: star-bounce 400ms ease-out;
}

@keyframes star-bounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ============================================================================
   NEAR-MISS (SF-070.10 — "SO CLOSE!")
   ============================================================================ */

.near-miss-callout {
  text-align: center;
  padding: 16px;
}

.near-miss-callout__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--engagement-amber);
  animation: near-miss-pulse 1.5s ease-in-out infinite;
}

@keyframes near-miss-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.near-miss-callout__gap {
  font-size: var(--font-base, 14px);
  color: var(--hud-text-muted);
  margin-top: 8px;
}

.near-miss-callout__bar {
  height: 5px;
  background: var(--hud-divider);
  border-radius: 3px;
  margin: 16px auto;
  max-width: 300px;
  position: relative;
  overflow: hidden;
}

.near-miss-callout__bar-fill {
  height: 100%;
  background: var(--engagement-amber);
  border-radius: 3px;
  transition: width 1s ease-out;
}

.near-miss-callout__bar-gap {
  position: absolute;
  right: 0;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--engagement-gold);
  border-radius: 2px;
  animation: gap-pulse 1s ease-in-out infinite;
}

@keyframes gap-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--engagement-gold-glow); }
  50% { box-shadow: 0 0 12px var(--engagement-gold-glow); }
}

/* ============================================================================
   LEVEL-UP PROMPT (SF-070.20 — Adaptive Difficulty)
   ============================================================================ */

.level-up-prompt {
  text-align: center;
  padding: 24px 16px;
}

.level-up-prompt__title {
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  color: var(--hud-text);
  margin-bottom: 8px;
}

.level-up-prompt__message {
  font-size: var(--font-sm, 13px);
  color: var(--hud-text-muted);
  margin-bottom: 20px;
}

.level-up-prompt__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.level-up-prompt__btn-primary {
  padding: 12px 28px;
  background: var(--gradient-primary, linear-gradient(135deg, #2563EB, #8b5cf6));
  color: #fff;
  border: none;
  border-radius: var(--radius-lg, 12px);
  font-size: var(--font-base, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

.level-up-prompt__btn-primary:hover {
  box-shadow: var(--shadow-accent, 0 4px 12px rgba(59, 130, 246, 0.4));
}

.level-up-prompt__btn-primary:active {
  transform: scale(0.97);
}

.level-up-prompt__btn-secondary {
  background: none;
  border: none;
  color: var(--hud-text-muted);
  font-size: var(--font-sm, 13px);
  cursor: pointer;
  padding: 8px;
}

.level-up-prompt__btn-secondary:hover {
  color: var(--hud-text);
}

.level-up-prompt__countdown {
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted);
  margin-top: 12px;
}

/* ============================================================================
   RESPONSIVE — Consistent across ALL breakpoints
   Mobile (< 480px) | Small (< 640px) | Tablet (< 768px) | Desktop (>= 1024px)
   ============================================================================ */

/* Small screens: tighter spacing */
@media (max-width: 640px) {
  .mastery-hud {
    gap: 8px;
    padding: 0 40px;
    font-size: var(--font-xs, 12px);
  }

  .mastery-hud__divider {
    height: 12px;
  }

  .combo-badge {
    right: 12px;
    font-size: var(--font-xs, 12px);
    padding: 4px 10px;
  }

  .floating-caption {
    margin: 8px 12px;
    font-size: var(--font-xs, 12px);
    padding: 8px 12px;
  }

  .exit-confirmation {
    max-width: calc(100% - 24px);
    padding: 16px;
  }

  .level-up-overlay {
    padding: 8px 16px;
  }

  .level-up-overlay__text {
    font-size: 13px;
  }
}

/* Mobile: tighter spacing */
@media (max-width: 480px) {
  .combo-badge {
    right: 8px;
    font-size: 11px;
    padding: 3px 8px;
    min-width: 36px;
  }

  .floating-caption {
    margin: 6px 8px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-md, 8px);
  }

  .exit-confirmation {
    max-width: calc(100% - 16px);
    padding: 14px 16px;
  }

  .near-miss-callout__title {
    font-size: 22px;
  }
}

/* Desktop: more breathing room */
@media (min-width: 1024px) {
  .floating-caption {
    max-width: 520px;
  }

  .exit-confirmation {
    max-width: 400px;
  }
}

/* ============================================================================
   SCORE RESULT FLOAT — Prominent per-question celebration
   ============================================================================ */

.score-result-float {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 24px;
  border-radius: var(--radius-lg, 12px);
  background: rgba(15, 20, 30, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.score-result-float.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.score-result-float.is-fading {
  opacity: 0;
  transform: translate(-50%, -55%) scale(0.95);
  transition: opacity 400ms ease-in, transform 400ms ease-in;
}

/* Icon */
.score-result-float__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-result-float__icon svg {
  width: 32px;
  height: 32px;
}

/* Label ("Perfect!", "Good effort!", "Keep going!") */
.score-result-float__label {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Score ("2/3 marks") */
.score-result-float__score {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}

/* XP pill ("+25 XP (2x)") */
.score-result-float__xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 4px;
}
.score-result-float__xp svg {
  width: 14px;
  height: 14px;
}

/* --- Color variants --- */

/* Correct: green */
.score-result-float--correct {
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(34, 197, 94, 0.15);
}
.score-result-float--correct .score-result-float__icon svg {
  stroke: var(--engagement-green, #22c55e);
}
.score-result-float--correct .score-result-float__label {
  color: var(--engagement-green, #22c55e);
}
.score-result-float--correct .score-result-float__score {
  color: rgba(34, 197, 94, 0.85);
}
.score-result-float--correct .score-result-float__xp {
  background: rgba(34, 197, 94, 0.15);
  color: var(--engagement-green, #22c55e);
}

/* Partial: amber */
.score-result-float--partial {
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.12);
}
.score-result-float--partial .score-result-float__icon svg {
  stroke: var(--engagement-amber, #eab308);
}
.score-result-float--partial .score-result-float__label {
  color: var(--engagement-amber, #eab308);
}
.score-result-float--partial .score-result-float__score {
  color: rgba(245, 158, 11, 0.85);
}
.score-result-float--partial .score-result-float__xp {
  background: rgba(245, 158, 11, 0.15);
  color: var(--engagement-amber, #eab308);
}

/* Wrong: red (subtle — encouraging) */
.score-result-float--wrong {
  border-color: rgba(239, 68, 68, 0.2);
}
.score-result-float--wrong .score-result-float__icon svg {
  stroke: var(--engagement-red, #ef4444);
  opacity: 0.7;
}
.score-result-float--wrong .score-result-float__label {
  color: var(--text-secondary, #94a3b8);
}
.score-result-float--wrong .score-result-float__score {
  color: rgba(239, 68, 68, 0.7);
}
.score-result-float--wrong .score-result-float__xp {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.7);
}

/* Light mode overrides */
[data-theme="light"] .score-result-float,
body.light-mode .score-result-float {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .score-result-float--wrong .score-result-float__label,
body.light-mode .score-result-float--wrong .score-result-float__label {
  color: var(--text-secondary, #64748b);
}

/* Mobile: slightly smaller */
@media (max-width: 480px) {
  .score-result-float {
    padding: 12px 18px;
    min-width: 120px;
  }
  .score-result-float__icon svg { width: 28px; height: 28px; }
  .score-result-float__label { font-size: 16px; }
  .score-result-float__score { font-size: 13px; }
  .score-result-float__xp { font-size: 12px; }
}

/* ============================================================================
   COMBO MILESTONE BANNER — Streak celebrations
   ============================================================================ */

.combo-milestone {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  z-index: 1050;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  white-space: nowrap;
  text-transform: uppercase;
}

.combo-milestone svg {
  width: 20px;
  height: 20px;
}

.combo-milestone.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Green tier (3x) */
.combo-milestone--green {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--engagement-green, #22c55e);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
}
.combo-milestone--green svg { stroke: var(--engagement-green, #22c55e); }

/* Amber tier (5x) */
.combo-milestone--amber {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--engagement-amber, #eab308);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}
.combo-milestone--amber svg { stroke: var(--engagement-amber, #eab308); }

/* Gold tier (7x, 10x) */
.combo-milestone--gold {
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--engagement-gold, #fbbf24);
  box-shadow: 0 4px 24px var(--engagement-gold-glow, rgba(251, 191, 36, 0.3));
  animation: combo-milestone-pulse 600ms ease-out;
}
.combo-milestone--gold svg { stroke: var(--engagement-gold, #fbbf24); }

@keyframes combo-milestone-pulse {
  0%   { transform: translateX(-50%) scale(0.8); }
  50%  { transform: translateX(-50%) scale(1.08); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Light mode */
[data-theme="light"] .combo-milestone,
body.light-mode .combo-milestone {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mobile: smaller text */
@media (max-width: 480px) {
  .combo-milestone {
    font-size: 14px;
    padding: 6px 16px;
    top: 52px;
  }
  .combo-milestone svg { width: 16px; height: 16px; }
}

/* ============================================================================
   REDUCED MOTION — Accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .quiz-progress-bar__fill,
  .combo-badge,
  .float-plus-one,
  .quiz-question-area,
  .auto-advance-bar__fill,
  .floating-caption,
  .level-up-overlay,
  .star-rating__star,
  .near-miss-callout__title,
  .quiz-nav-stat,
  .stats-ticker-context,
  .firework-trail,
  .firework-spark {
    animation: none !important;
    transition-duration: 0s !important;
  }

  .fireworks-container {
    display: none;
  }

  .float-plus-one {
    display: none;
  }

  .score-result-float {
    transition: none !important;
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .score-result-float.is-fading {
    opacity: 0;
    transition: none !important;
  }

  .combo-milestone {
    transition: none !important;
    animation: none !important;
  }
}

/* SF-070.21: Post-submit comparison caption */
.prev-answer-comparison {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-glass, rgba(255,255,255,0.05));
  animation: fadeInUp 300ms ease-out;
}

.prev-answer-comparison .improvement {
  color: var(--engagement-green, #22c55e);
  font-weight: 600;
}

.prev-answer-comparison .consistent {
  color: var(--engagement-amber, #eab308);
}

.prev-answer-comparison .regression {
  color: var(--engagement-red, #ef4444);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SF-070.21: Mastery Cycle Celebration */
.mastery-cycle-celebration {
  text-align: center;
  padding: 24px 16px;
  margin: 12px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--engagement-green-light, rgba(34,197,94,0.08)), var(--engagement-gold, #fbbf24) 120%);
  border: 1px solid var(--engagement-green, #22c55e);
  animation: cyclePop 500ms ease-out;
}

.mastery-cycle-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--engagement-green, #22c55e);
  margin-bottom: 4px;
}

.mastery-cycle-detail {
  font-size: 14px;
  color: var(--text-secondary, #94a3b8);
}

.mastery-cycle-cycle {
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  margin-top: 4px;
}

@keyframes cyclePop {
  0% { opacity: 0; transform: scale(0.8); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   QUIZ SUMMARY OVERLAY (SF-070.22 — Post-Quiz)
   ============================================================================ */

.quiz-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 300ms ease;
  padding: 16px;
}

.quiz-summary-overlay.is-visible {
  opacity: 1;
}

.quiz-summary-card {
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: scale(0.9) translateY(20px);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-summary-overlay.is-visible .quiz-summary-card {
  transform: scale(1) translateY(0);
}

.quiz-summary-topic {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.quiz-summary-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent, #2563EB);
  margin-bottom: 24px;
}

/* Mastery progress section */
.quiz-summary-mastery {
  background: var(--bg-secondary, #f8fafc);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.quiz-summary-mastery-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 12px;
}

.quiz-summary-mastery-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin: 4px 0;
}

.quiz-summary-mastery-change {
  color: var(--engagement-green, #22c55e);
  font-weight: 700;
}

.quiz-summary-bar {
  position: relative;
  height: 12px;
  background: var(--bg-tertiary, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
}

.quiz-summary-bar-before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--text-tertiary, #cbd5e1);
  border-radius: 6px;
  transition: width 800ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.quiz-summary-bar-after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--engagement-green, #22c55e);
  border-radius: 6px;
  transition: width 800ms cubic-bezier(0.34, 1.2, 0.64, 1);
  transition-delay: 400ms;
}

/* Stats row */
.quiz-summary-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.quiz-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.quiz-summary-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
}

.quiz-summary-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Action buttons */
.quiz-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-summary-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.quiz-summary-btn:active {
  transform: scale(0.97);
}

.quiz-summary-btn--primary {
  background: var(--accent, #2563EB);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quiz-summary-btn--primary:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.quiz-summary-btn--secondary {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-primary, #1e293b);
}

.quiz-summary-btn--secondary:hover {
  background: var(--bg-tertiary, #e2e8f0);
}

/* ============================================================================
   BADGE DROPDOWN PANEL (SF-070.24 — Interactive Badge Bar)
   ============================================================================ */

/* Shared dropdown container — slides down from compact header */
.badge-dropdown {
  position: absolute;
  top: 100%;
  left: 8px;
  right: 8px;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 250ms ease-out, opacity 200ms ease-out;
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}

.badge-dropdown--open {
  max-height: 320px;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  background: rgb(18, 24, 32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: #e2e8f0;
}

/* Light theme: dark dropdown still looks best for contrast */
[data-theme="light"] .badge-dropdown--open {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

[data-theme="light"] .badge-dropdown__title {
  color: #1e293b;
}

[data-theme="light"] .badge-dropdown__close {
  color: #64748b;
}

[data-theme="light"] .badge-dropdown__close:hover {
  color: #1e293b;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .hint-accordion-trigger {
  color: #1e293b;
}

[data-theme="light"] .hint-accordion-trigger:hover {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .hint-accordion-status--unmatched {
  background: rgba(0, 0, 0, 0.06);
  color: #94a3b8;
}

/* hint-accordion-feedback removed — flat list */

[data-theme="light"] .hint-accordion-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .marks-info-item {
  color: #1e293b;
}

[data-theme="light"] .marks-info-icon--missing {
  color: #94a3b8;
}

[data-theme="light"] .xp-info__level,
[data-theme="light"] .xp-info__next,
[data-theme="light"] .xp-info__session {
  color: #64748b;
}

[data-theme="light"] .xp-info__bar {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .mastery-info__level {
  color: #1e293b;
}

[data-theme="light"] .mastery-info__range,
[data-theme="light"] .mastery-info__next {
  color: #64748b;
}

[data-theme="light"] .mastery-info__next,
[data-theme="light"] .xp-info__session {
  border-top-color: rgba(0, 0, 0, 0.06);
}

/* Dropdown header row */
.badge-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--hud-border, rgba(255, 255, 255, 0.06));
}

.badge-dropdown__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm, 13px);
  font-weight: 600;
  color: var(--hud-text, #e2e8f0);
}

.badge-dropdown__title svg {
  opacity: 0.7;
}

.badge-dropdown__close {
  background: none;
  border: none;
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  transition: color 150ms, background 150ms;
}

.badge-dropdown__close:hover {
  color: var(--hud-text, #e2e8f0);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Hint Accordion --- */
.hint-accordion-item {
  border-bottom: 1px solid var(--hud-border, rgba(255, 255, 255, 0.06));
}

.hint-accordion-item:last-child {
  border-bottom: none;
}

.hint-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--hud-text, #e2e8f0);
  font-size: var(--font-sm, 13px);
  text-align: left;
}

.hint-accordion-status {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.hint-accordion-status--matched {
  background: rgba(34, 197, 94, 0.15);
  color: var(--engagement-green, #22c55e);
}

.hint-accordion-status--unmatched {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
}

.hint-accordion-label {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-wrap: break-word;
}

/* Accordion chevron/panel/feedback removed — flat list with status icons only */

/* --- Marks Info Panel --- */
/* Marks score summary — compact visual distinct from hints list */
.marks-score-summary {
  padding: 12px 16px 14px;
  text-align: center;
}

.marks-score-big {
  font-size: 32px;
  font-weight: 800;
  color: var(--engagement-green, #22c55e);
  line-height: 1;
  margin-bottom: 8px;
}

.marks-score-of {
  font-size: 18px;
  font-weight: 600;
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
}

.marks-score-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

[data-theme="light"] .marks-score-bar {
  background: rgba(0, 0, 0, 0.08);
}

.marks-score-bar__fill {
  height: 100%;
  background: var(--engagement-green, #22c55e);
  border-radius: 3px;
  transition: width 300ms ease;
}

.marks-score-label {
  font-size: 12px;
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
}

[data-theme="light"] .marks-score-label {
  color: #64748b;
}

[data-theme="light"] .marks-score-big {
  color: #16a34a;
}

[data-theme="light"] .marks-score-of {
  color: #94a3b8;
}

.marks-info-text {
  flex: 1;
  line-height: 1.4;
}

/* --- Spelling Error List --- */
.spelling-error-list {
  padding: 8px 14px;
}
.spelling-error-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.spelling-error-item:last-child {
  border-bottom: none;
}
.spelling-error-word {
  font-size: 13px;
  color: #ef4444;
  font-weight: 600;
  text-decoration: wavy underline;
  text-decoration-color: #ef4444;
  text-underline-offset: 3px;
}
[data-theme="light"] .spelling-error-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* --- XP Info Panel --- */
.xp-info {
  padding: 12px 14px;
  text-align: center;
}

.xp-info__total {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--engagement-amber), var(--engagement-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xp-info__level {
  font-size: var(--font-sm, 13px);
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
  margin-top: 2px;
}

.xp-info__bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 10px 0 6px;
  overflow: hidden;
}

.xp-info__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--engagement-amber), var(--engagement-gold));
  border-radius: 3px;
  transition: width 300ms ease;
}

.xp-info__next {
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
}

.xp-info__session {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hud-border, rgba(255, 255, 255, 0.06));
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted);
}

.xp-info__session strong {
  color: var(--engagement-amber, #eab308);
}

/* --- Mastery Info Panel --- */
.mastery-info {
  padding: 12px 14px;
  text-align: center;
}

.mastery-info__level {
  font-size: 20px;
  font-weight: 700;
  color: var(--hud-text, #e2e8f0);
}

.mastery-info__name {
  font-size: var(--font-sm, 13px);
  color: var(--engagement-blue, #2563EB);
  font-weight: 600;
  margin-top: 2px;
}

.mastery-info__range {
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted, rgba(255, 255, 255, 0.5));
  margin-top: 6px;
}

.mastery-info__next {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hud-border, rgba(255, 255, 255, 0.06));
  font-size: var(--font-xs, 12px);
  color: var(--hud-text-muted);
}

/* --- Clickable badge states --- */
.quiz-nav-stat--hints,
.quiz-nav-stat--marks,
.quiz-nav-stat--xp,
.quiz-nav-stat--mastery {
  cursor: pointer;
  transition: filter 150ms, transform 100ms;
  /* Keep badges clickable even when ticker sets pointer-events:none on parent zones */
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

.quiz-nav-stat--hints:hover,
.quiz-nav-stat--marks:hover,
.quiz-nav-stat--xp:hover,
.quiz-nav-stat--mastery:hover {
  filter: brightness(1.15);
}

.quiz-nav-stat--hints:active,
.quiz-nav-stat--marks:active,
.quiz-nav-stat--xp:active,
.quiz-nav-stat--mastery:active {
  transform: scale(0.95);
}

.quiz-nav-stat--hints[aria-expanded="true"],
.quiz-nav-stat--marks[aria-expanded="true"],
.quiz-nav-stat--xp[aria-expanded="true"],
.quiz-nav-stat--mastery[aria-expanded="true"] {
  filter: brightness(1.2);
}

/* --- Hint badge style (amber) --- */
.quiz-nav-stat--hints {
  background: var(--engagement-amber-light, rgba(245, 158, 11, 0.12));
}

.quiz-nav-stat--hints .quiz-nav-stat__icon svg {
  color: #d97706;
}

/* --- Mobile overrides --- */
@media (max-width: 480px) {
  .badge-dropdown--open {
    max-height: 260px;
  }

  .badge-dropdown__header {
    padding: 8px 10px 6px;
  }

  .hint-accordion-trigger {
    padding: 8px 10px;
    font-size: 12px;
  }

  .hint-accordion-panel {
    padding: 0 10px 8px 34px;
    font-size: 11px;
  }

  .xp-info__total {
    font-size: 24px;
  }

  .mastery-info__level {
    font-size: 18px;
  }
}

/* ============================================================================
   SF-070.25: ESCALATION OFFER MODAL
   ============================================================================ */

.escalation-offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.escalation-offer-overlay.is-visible {
  opacity: 1;
}

.escalation-offer-overlay.is-closing {
  opacity: 0;
}

.escalation-offer-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  transform: scale(0.9) translateY(20px);
  transition: transform 300ms ease-out;
}

.escalation-offer-overlay.is-visible .escalation-offer-card {
  transform: scale(1) translateY(0);
}

.escalation-offer-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: escalation-bounce 600ms ease-out;
}

@keyframes escalation-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.escalation-offer-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.escalation-offer-text {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0 0 24px 0;
}

.escalation-offer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.escalation-offer-btn {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 150ms ease;
}

.escalation-offer-btn--accept {
  background: #2563EB;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.escalation-offer-btn--accept:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.escalation-offer-btn--decline {
  background: transparent;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.escalation-offer-btn--decline:hover {
  background: #f3f4f6;
}

@media (max-width: 480px) {
  .escalation-offer-card {
    padding: 24px 20px;
    max-width: 300px;
  }

  .escalation-offer-icon {
    font-size: 36px;
  }

  .escalation-offer-title {
    font-size: 1.1rem;
  }
}