/* KidsEnglish - Styles personnalisés */

/* Animations et transitions */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

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

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

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

/* Classes d'animation */
.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out;
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out;
}

/* Boutons interactifs pour enfants */
.kid-button {
  @apply bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-4 px-8 rounded-full shadow-lg transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95;
}

.kid-button:hover {
  animation: wiggle 0.5s ease-in-out;
}

.game-button {
  @apply bg-gradient-to-r from-blue-400 to-purple-400 text-white font-bold py-3 px-6 rounded-xl shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95;
}

.game-button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.category-button {
  @apply p-4 rounded-xl font-bold text-white shadow-lg transform transition-all duration-200 hover:scale-105 active:scale-95;
}

.category-button:hover {
  animation: pulse 1s infinite;
}

/* Cards et conteneurs */
.kid-card {
  @apply bg-white/90 backdrop-blur-sm rounded-xl p-6 shadow-xl transform transition-all duration-300 hover:scale-105 hover:shadow-2xl;
}

.glass-effect {
  @apply bg-white/80 backdrop-blur-md border border-white/20 rounded-xl shadow-lg;
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.kid-gradient-bg {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

/* Éléments de jeu */
.game-card {
  @apply bg-gradient-to-br from-yellow-200 to-orange-200 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:rotate-1 hover:scale-105;
}

.answer-button {
  @apply bg-blue-400 hover:bg-blue-500 text-white p-4 rounded-lg font-bold text-lg transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-md;
}

.answer-button:hover {
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.correct-answer {
  @apply bg-green-500 !important;
  animation: pulse 0.5s ease-in-out;
}

.incorrect-answer {
  @apply bg-red-500 !important;
  animation: wiggle 0.5s ease-in-out;
}

/* Badges et récompenses */
.badge-card {
  @apply bg-gradient-to-r from-yellow-200 to-yellow-400 p-3 rounded-lg shadow-md transform transition-all duration-200 hover:scale-105;
}

.badge-earned {
  animation: bounceIn 0.8s ease-out;
}

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

/* Progression et statistiques */
.progress-bar {
  @apply bg-gray-200 rounded-full h-4 overflow-hidden;
}

.progress-fill {
  @apply bg-gradient-to-r from-green-400 to-blue-500 h-full rounded-full transition-all duration-1000 ease-out;
}

.stat-card {
  @apply bg-white/90 backdrop-blur-sm rounded-xl p-4 text-center shadow-lg transform transition-all duration-200 hover:scale-105;
}

/* Modales et overlays */
.modal-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4;
  backdrop-filter: blur(4px);
}

.modal-content {
  @apply bg-white rounded-xl p-6 max-w-md w-full shadow-2xl transform transition-all duration-300;
  animation: fadeIn 0.3s ease-out;
}

/* Formulaires pour enfants */
.kid-input {
  @apply w-full p-4 border-2 border-purple-200 rounded-xl text-lg focus:border-purple-400 focus:outline-none focus:ring-4 focus:ring-purple-100 transition-all duration-200;
}

.kid-input:focus {
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}

/* Navigation et en-têtes */
.kid-header {
  @apply text-center mb-8 p-6 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg;
}

.kid-title {
  @apply text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 mb-4;
}

/* Responsive design */
@media (max-width: 640px) {
  .kid-title {
    @apply text-3xl;
  }
  
  .kid-button {
    @apply py-3 px-6 text-sm;
  }
  
  .game-button {
    @apply py-2 px-4 text-sm;
  }
}

/* Effets de particules (CSS uniquement) */
.particle-bg {
  position: relative;
  overflow: hidden;
}

.particle-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: float 20s infinite linear;
  pointer-events: none;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
  }
}

/* Sélection de couleur désactivée pour les éléments de jeu */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Curseur personnalisé pour les éléments interactifs */
.interactive {
  cursor: pointer;
}

.interactive:hover {
  cursor: pointer;
}

/* Amélioration de l'accessibilité */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible pour l'accessibilité */
.focus-visible {
  @apply focus:outline-none focus:ring-4 focus:ring-purple-200 focus:border-purple-400;
}

/* Styles pour les messages de feedback */
.success-message {
  @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg;
}

.error-message {
  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg;
}

.info-message {
  @apply bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-lg;
}

/* Styles pour les éléments de chargement */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-4 border-purple-200 border-t-purple-600;
}

.loading-dots::after {
  content: '';
  animation: dots 2s infinite;
}

@keyframes dots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%, 100% {
    content: '...';
  }
}