:root {
  --navy: #0a2540;
  --navy-light: #1a3a5f;
  --accent: #10b981;
  --accent-light: #6ee7b7;
  --bg: #f8fafc;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.section {
  animation: fadeIn 0.35s ease-out;
}

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

.score-reveal {
  animation: scorePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scorePop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.bar-fill {
  transition: width 0.8s ease-out;
}

.answer-btn {
  transition: all 0.15s ease;
}
.answer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
}
.answer-btn:active {
  transform: translateY(0);
}

.progress-bar-fill {
  transition: width 0.35s ease;
}

.grade-green  { background: #10b981; }
.grade-yellow { background: #f59e0b; }
.grade-red    { background: #ef4444; }

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}