/* ==============================================
   QUIZ TAB HIGHLIGHT STYLES
   Macht den Quiz-Tab besonders auffällig
   ============================================== */

/* Der Reiter selbst wird seit 1.90.6 nicht mehr gesondert gestaltet -
   siehe MELDO-DESIGN.md, Abschnitt 3. Nur der Punkt bleibt. */
.meldo-tab-quiz { position: relative; }

/* Subtile Puls-Animation für Aufmerksamkeit */
@keyframes tabPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(232, 146, 79, 0.5);
  }
}

/* Badge/Icon im Quiz-Tab */
.meldo-tab-quiz::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--meldo-accent, #E8924F);
  border-radius: 50%;
  border: 3px solid white;
  animation: badgeBounce 1.5s ease-in-out infinite;
}

@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Entferne Badge wenn Tab aktiv ist */
.meldo-tab-quiz.is-active::before {
  display: none;
}

/* ==============================================
   INTEGRATION MIT BESTEHENDEM DESIGN
   ============================================== */

/* Stelle sicher, dass Tabs responsive bleiben */
@media (max-width: 768px) {
  .meldo-tab-quiz {
    font-size: 0.875rem;
  }
  
  .meldo-tab-quiz::before {
    width: 20px;
    height: 20px;
    top: -6px;
    right: -6px;
  }
}

/* ==============================================
   ZUSÄTZLICHE QUIZ-ELEMENTE
   ============================================== */

/* Glowing Effect für wichtige Buttons */
.meldo-btn-primary.glow {
  animation: buttonGlow 1.5s ease-in-out infinite;
}

@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(61, 124, 133, 0.6), 0 0 30px rgba(61, 124, 133, 0.3);
  }
}

/* Konfetti-Effect für Achievements (optional) */
.achievement-unlocked {
  position: relative;
  overflow: hidden;
}

.achievement-unlocked::after {
  content: '🎉';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: confettiFall 1s ease-out;
  pointer-events: none;
}

@keyframes confettiFall {
  0% {
    top: -20px;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Streak Flame Animation */
.streak-flame {
  display: inline-block;
  animation: flameFlicker 0.5s infinite alternate;
}

@keyframes flameFlicker {
  0% {
    transform: scale(1) rotate(-2deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: scale(1.1) rotate(2deg);
    filter: hue-rotate(20deg);
  }
}

/* Level Up Animation */
@keyframes levelUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.level-up-animation {
  animation: levelUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* XP Gain Animation */
@keyframes xpGain {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}

.xp-float {
  position: fixed;
  pointer-events: none;
  font-weight: 700;
  color: var(--meldo-accent);
  font-size: 1.5rem;
  animation: xpGain 1s ease-out forwards;
}

/* Perfect Score Stars */
.star-perfect {
  color: gold;
  animation: starTwinkle 1s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Loading Spinner für Quiz-Start */
.quiz-loading {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--meldo-border);
  border-top: 4px solid var(--meldo-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Smooth Page Transitions */
.quiz-fade-in {
  animation: fadeIn 0.4s ease-in;
}

.quiz-fade-out {
  animation: fadeOut 0.3s ease-out;
}

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Hover Effects für Interactive Elements */
.quiz-interactive {
  transition: all 0.2s ease;
}

.quiz-interactive:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.quiz-interactive:active {
  transform: scale(0.95);
}

/* Success Checkmark Animation */
@keyframes checkmark {
  0% {
    transform: scale(0) rotate(45deg);
  }
  50% {
    transform: scale(1.2) rotate(45deg);
  }
  100% {
    transform: scale(1) rotate(45deg);
  }
}

.checkmark-animate {
  animation: checkmark 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Error Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animate {
  animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress Ring Animation */
@keyframes progressRing {
  0% {
    stroke-dashoffset: 251.2;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.progress-ring-circle {
  animation: progressRing 2s ease-in-out;
}