/* AI Language Training App - Custom Styles v3.0 */

/* ベースフォント */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* テキストエリアフォーカス */
textarea:focus {
  outline: none;
}

/* スコア表示パルス */
.score-display {
  animation: pulse 1.5s ease-in-out;
}

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

/* テキスト行数制限（Tailwind v3 line-clamp が効かない場合のフォールバック） */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* スムーズなトランジション */
* {
  scroll-behavior: smooth;
}

/* カードホバー */
a[href^="/stage/"],
a[href^="/lesson/"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a[href^="/stage/"]:active,
a[href^="/lesson/"]:active {
  transform: scale(0.99);
}

/* モーダルアニメーション */
#exampleModal {
  animation: fadeIn 0.2s ease;
}
#exampleModal > div {
  animation: slideUp 0.25s ease;
}

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

/* トースト */
#appToast {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* モバイル最適化 */
@media (max-width: 640px) {
  textarea {
    font-size: 16px; /* iOS ズーム防止 */
  }
}

/* プログレスバーアニメーション */
[class*="bg-"][class*="-500"].h-full {
  transition: width 0.5s ease-out;
}