/* ============================
   ZenType - Custom Styles
   (Tailwind handles most styling)
   ============================ */

/* Cursor blink animation */
.typing-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Word styling with Tailwind-compatible classes */
.word {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 2px 4px;
  margin: 2px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.word.active {
  background-color: rgba(34, 211, 238, 0.2);
  color: #111718;
  border-bottom: 2px solid #22d3ee;
}

.dark .word.active {
  color: #ffffff;
}

.word.correct {
  color: #16a34a;
}

.dark .word.correct {
  color: #4ade80;
}

.word.incorrect {
  color: #dc2626;
  text-decoration: underline;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.dark .word.incorrect {
  color: #f87171;
  text-decoration-color: #f87171;
}

/* Letter highlighting within active word */
.word .letter {
  transition: color 0.1s ease;
}

.word.active .letter.correct {
  color: #16a34a;
}

.dark .word.active .letter.correct {
  color: #4ade80;
}

.word.active .letter.incorrect {
  color: #dc2626;
}

.dark .word.active .letter.incorrect {
  color: #f87171;
}

/* Timer warning states */
#timerDisplay.warning {
  color: #f59e0b;
}

#timerDisplay.danger {
  color: #ef4444;
  animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Modal animation */
#resultModal.show {
  display: flex !important;
}

#resultModal.show #resultCard {
  transform: scale(1);
  opacity: 1;
}

/* Focus styles */
#typingContainer:focus-within #focusHint {
  opacity: 0;
}