body { font-family: 'Tajawal', 'Inter', sans-serif; }

.english-content { direction: ltr !important; text-align: left; }

.chunk-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.chunk-card:not(.locked):hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.locked { opacity: 0.6; cursor: not-allowed; background-color: #f3f4f6; }
.completed { background-color: #d1fae5; border-color: #10b981; }

.activity-btn { transition: background-color 0.2s; }

.incorrect { animation: incorrect-shake 0.5s; }
@keyframes incorrect-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

.correct-flash { animation: correct-flash 0.7s ease-out; }
@keyframes correct-flash {
  0%, 100% { background-color: #f9fafb; }
  50% { background-color: #d1fae5; }
}

.sound-option-btn { width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }
.word-option-btn { padding: 0.75rem 1.5rem; font-size: 1.5rem; }

.achievement-card.locked { filter: grayscale(1); opacity: 0.5; }
.achievement-unlocked-anim { animation: achievement-pop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
@keyframes achievement-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.fade-in { animation: fadeIn 1s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.letter-slot { cursor: pointer; user-select: none; }
.letter-slot.filled:hover { background-color: #fca5a5; }