/* 自定义样式补充Tailwind CSS */

/* 卡片悬浮效果 */
.option-card {
  transition: all 0.3s ease;
}

.option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 单词展示区动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* 进度条样式 */
.progress-bar {
  height: 6px;
  background: linear-gradient(to right, #4f46e5, #818cf8);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 音频按钮脉动效果 */
@keyframes audio-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); background-color: rgba(59, 130, 246, 0.2); }
  100% { transform: scale(1); }
}

.audio-btn-active {
  animation: audio-pulse 1s infinite;
}

/* 移动设备适配 */
@media (max-width: 640px) {
  .main-container {
    padding: 1rem;
  }
  
  .word-card {
    padding: 1.25rem;
  }
  
  .option-grid {
    grid-template-columns: 1fr;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .dark-mode-support {
    background-color: #1f2937;
    color: #f3f4f6;
  }
  
  .dark-card {
    background-color: #374151;
    border-color: #4b5563;
  }
}

/* 完成页面动画 */
@keyframes celebrate {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.completion-animation {
  animation: celebrate 0.8s ease-out;
}