.category-card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

@keyframes soundWave {
  0% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.3);
  }
}

.listening svg {
  animation: pulse 1.5s infinite;
}

/* Add sound wave bars */
.sound-wave {
  display: none;
  align-items: center;
  gap: 2px;
  height: 14px;
  margin-left: 15px;
}

.sound-wave-bar {
  width: 2px;
  height: 100%;
  background-color: #3b82f6;
  border-radius: 2px;
  animation: soundWave 1s ease-in-out infinite;
}

/* Animation delays for 14 bars */
.sound-wave-bar:nth-child(1) {
  animation-delay: 0s;
}
.sound-wave-bar:nth-child(2) {
  animation-delay: 0.07s;
}
.sound-wave-bar:nth-child(3) {
  animation-delay: 0.14s;
}
.sound-wave-bar:nth-child(4) {
  animation-delay: 0.21s;
}
.sound-wave-bar:nth-child(5) {
  animation-delay: 0.28s;
}
.sound-wave-bar:nth-child(6) {
  animation-delay: 0.35s;
}
.sound-wave-bar:nth-child(7) {
  animation-delay: 0.42s;
}
.sound-wave-bar:nth-child(8) {
  animation-delay: 0.49s;
}
.sound-wave-bar:nth-child(9) {
  animation-delay: 0.56s;
}
.sound-wave-bar:nth-child(10) {
  animation-delay: 0.63s;
}
.sound-wave-bar:nth-child(11) {
  animation-delay: 0.7s;
}
.sound-wave-bar:nth-child(12) {
  animation-delay: 0.77s;
}
.sound-wave-bar:nth-child(13) {
  animation-delay: 0.84s;
}
.sound-wave-bar:nth-child(14) {
  animation-delay: 0.91s;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Optional: Add a fade transition for the entire question container */
#game-question {
  transition: opacity 0.3s ease-in-out;
}

#game-question.fade-out {
  opacity: 0;
}

#game-question.fade-in {
  opacity: 1;
}

/* Custom select styling */
#language-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

#language-select option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

/* Add a subtle animation when changing language */
#language-select:focus {
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

/* Add to your existing styles */
#language-dropdown {
  transition: all 0.2s ease-in-out;
}

#language-button:hover {
  background-color: #f9fafb;
}

#language-dropdown div:hover {
  background-color: #f3f4f6;
}

@media (min-width: 535px) {
  .xs\:mt-20 {
    margin-top: 5rem; /* This is equivalent to mt-20 in Tailwind */
  }
}