@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.vocab-card {
  animation: pop-in 0.5s ease-out forwards;
  opacity: 0; /* Start hidden */
}

.vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}
.vocab-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  text-align: left;
}
.vocab-card:hover, .vocab-card.playing {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.vocab-card.playing {
  box-shadow: 0 0 0 3px var(--primary-light);
  border-color: var(--primary);
}
.vocab-image-container {
  position: relative;
  background-color: var(--gray-100);
}
.vocab-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: opacity var(--transition-base);
}
.vocab-card:hover .vocab-image, .vocab-card.playing .vocab-image {
  opacity: 0.8;
}
.vocab-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none; /* Permet aux événements de souris de passer à la carte */
}
.vocab-card:hover .vocab-play-overlay, .vocab-card:focus-visible .vocab-play-overlay, .vocab-card.playing .vocab-play-overlay {
  opacity: 1;
}
.vocab-play-overlay .play-icon {
  width: 48px;
  height: 48px;
  fill: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.vocab-content {
  padding: var(--space-2) var(--space-4);
}
.vocab-word {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
}
.vocab-translation {
  font-size: var(--font-size-base);
  color: var(--gray-500);
}

/* Editor mode styles */
.editor-mode-active .vocab-card {
  position: relative;
}

.editor-mode-active .vocab-card:hover {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.editor-mode-active .vocab-card [data-sict-id] {
  cursor: pointer;
}

.editor-mode-active .vocab-card [data-sict-id]:hover {
  outline: 2px solid #3498db;
  outline-offset: -2px;
}

/* Prevent audio playing in edit mode */
.editor-mode-active .vocab-play-overlay {
  pointer-events: none;
}

/* Normal mode - ensure pointer cursor is not overridden */
body:not(.editor-mode-active) .vocab-card {
  cursor: pointer;
}