/* Feedback animations and states */
@keyframes pulse-success {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Result state helpers */
#resultado.correcto { animation: pulse-success 0.6s ease; }
#resultado.incorrecto { animation: shake-error 0.5s ease; }

/* Utility to trigger shake on inputs */
.shake-error { animation: shake-error 0.5s ease; border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(239,68,68,0.2) !important; }

/* Final celebration overlay */
.final-congrats-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(34,197,94,0.45), transparent),
              radial-gradient(1200px 800px at 50% 110%, rgba(59,130,246,0.35), transparent),
              rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  backdrop-filter: blur(2px);
  animation: fadeInOverlay .3s ease-out;
}

.final-congrats-card {
  background: white;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 560px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
}

.final-congrats-title { font-size: 24px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.final-congrats-percent { font-size: 64px; font-weight: 900; margin: 8px 0 4px; background: linear-gradient(90deg, #16a34a, #22c55e, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-congrats-sub { font-size: 16px; color: #374151; margin-bottom: 12px; }
.final-congrats-actions { margin-top: 10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.final-congrats-actions .btn-close { background:#111827; color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:700; }

@keyframes popIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

/* Mobile responsive */
@media (max-width: 520px) {
  .final-congrats-card {
    padding: 20px 16px;
    width: calc(100% - 24px);
  }
  .final-congrats-title { font-size: 20px; }
  .final-congrats-percent { font-size: 48px; }
  .final-congrats-sub { font-size: 14px; }
  .final-congrats-actions { flex-direction: column; }
  .final-congrats-actions button { width: 100%; }
}