/* Fonts & Custom Utilities for أحرف أحمد */
body {
  font-family: 'Cairo', sans-serif;
}

.font-cairo {
  font-family: 'Cairo', sans-serif;
}

.font-readex {
  font-family: 'Readex Pro', sans-serif;
}

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

@keyframes floatElement {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.level-btn.active {
  border-color: #2EC4B6 !important;
  background-color: #E8F5F8 !important;
  color: #1E9A8E !important;
  box-shadow: 0 4px 14px 0 rgba(46, 196, 182, 0.2);
}

.nav-tab.active {
  background-color: #2EC4B6 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(46, 196, 182, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Letter Card Style */
.letter-card {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.letter-card:hover {
  transform: translateY(-4px) scale(1.02);
}
.letter-card:active {
  transform: scale(0.96);
}

/* Match Option Button */
.match-option-btn {
  transition: all 0.2s ease-out;
}
.match-option-btn:hover {
  transform: translateY(-3px);
}
.match-option-btn:active {
  transform: scale(0.97);
}

/* Touch drawing canvas improvements */
#tracingCanvas {
  touch-action: none;
  -webkit-touch-callout: none;
}