/* General Styles */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;700&family=Kufam:wght@400;700&display=swap');

body {
  font-family: 'Baloo Bhaijaan 2', 'Kufam', 'Amiri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #FFF9C4 0%, #FFEB3B 100%); /* Brighter yellow gradient */
  color: #D81B60; /* Slightly darker pink for better contrast */
  overflow-x: hidden;
  line-height: 1.8; /* Increased line height for better readability */
  padding-top: 25px; /* More padding */
  padding-bottom: 25px;
  min-height: 100vh;
  position: relative;
  font-size: 1.1rem; /* Larger base font size */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FF9800' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFF9C4 0%, #FFEB3B 100%);
  background-attachment: fixed;
}

/* Skip Link */
.visually-hidden-focusable:focus {
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  z-index: 1050; /* Ensure it's above most content */
  padding: 1rem;
  background-color: #0277bd; /* Match button color */
  color: white;
  border-radius: 0.25rem;
  text-decoration: none;
  top: 10px;
  left: 10px;
}


/* Headings */
h1, h2, h3 {
  font-weight: 700;
  color: #D81B60; /* Darker pink for better contrast */
  text-shadow: 3px 3px 0px rgba(255, 152, 0, 0.3), 5px 5px 0px rgba(255, 152, 0, 0.1); /* Enhanced playful shadow */
  letter-spacing: 0.8px; /* Increased letter spacing */
}

h1 {
  font-size: clamp(2.5rem, 7vw, 3.5rem); /* Larger for better visibility */
  margin-bottom: 1.5rem; /* More space below */
  animation: bounce 1.2s ease infinite alternate;
}

h2 {
  font-size: clamp(1.8rem, 5.5vw, 2.6rem); /* Larger */
  margin-bottom: 1.2rem; /* More space below */
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px; /* Thicker underline */
  background: linear-gradient(90deg, #FF9800, #FFEB3B, #FF9800);
  border-radius: 12px; /* More rounded */
}

h3 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem); /* Larger */
  margin-bottom: 1rem; /* Added space below */
}

/* Enhanced Animations */
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Header & Main Content Structure */
header {
  margin-bottom: 2rem;
}

main {
  margin-bottom: 2rem;
}

/* Language Switcher */
.language-switcher {
  position: absolute;
  top: 10px;
  left: 10px; /* Position top-left */
  z-index: 1030; /* Below modals but above most content */
}

.lang-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  margin: 0 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Progress Bar */
.progress {
  border-radius: 50px; /* Fully rounded ends */
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7); /* More visible white */
  border: 3px solid #FF9800; /* Orange border */
  height: 30px; /* Taller */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(0, 0, 0, 0.05);
  position: relative;
}

.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  border-radius: 50px 50px 0 0;
  z-index: 1;
}

.progress-bar {
  font-weight: bold;
  font-size: 1.1rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); /* Bouncy transition */
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent);
  background-size: 40px 40px;
  animation: progress-bar-stripes 1s linear infinite;
  position: relative;
  z-index: 0;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Buttons (General Bootstrap Overrides/Additions) */
.btn {
  border-radius: 50px; /* Consistent rounded buttons */
  padding: 0.8rem 1.8rem; /* Larger padding for easier touch */
  font-weight: bold;
  font-size: 1.2rem; /* Larger font size */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Slightly slower, bouncier transition */
  border: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow */
  text-transform: none;
  position: relative;
  overflow: hidden;
  margin: 0.4rem 0.3rem; /* Added margin between buttons */
  letter-spacing: 0.5px; /* Better letter spacing */
}

.btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%); /* Brighter effect */
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.btn:hover {
  transform: translateY(-6px) scale(1.05); /* More dramatic hover effect */
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15), 0 10px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
  filter: brightness(1.1); /* Brighten on hover */
}

.btn:hover::after {
  opacity: 1;
  transform: scale(1);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.15);
}

.btn:focus {
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15), 0 0 0 0.3rem rgba(3, 169, 244, 0.5); /* Larger focus ring */
  outline: none;
}

/* Button color overrides */
.btn-primary {
  background-color: #2196F3; /* Bright blue */
  color: white;
}

.btn-secondary {
  background-color: #9C27B0; /* Purple */
  color: white;
}

.btn-success {
  background-color: #4CAF50; /* Bright green */
  color: white;
}

.btn-info {
  background-color: #00BCD4; /* Cyan */
  color: white;
}

.btn-warning {
  background-color: #FF9800; /* Orange */
  color: white;
}

.btn-danger {
  background-color: #F44336; /* Red */
  color: white;
}

/* Custom Button Colors (Ensure they don't clash with Bootstrap) */
.btn-purple {
  background-color: #8E24AA;
  color: white;
}
.btn-purple:hover {
  background-color: #7B1FA2;
  color: white;
}

/* Specific Button Adjustments */
.haraka-btn {
  font-size: 0.9rem;
  padding: 0.6rem 0.4rem; /* Adjust padding for smaller buttons */
  width: 100%; /* Make buttons fill column */
  white-space: normal; /* Allow text wrapping */
  line-height: 1.2;
  min-height: 50px; /* Ensure minimum height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-footer .btn {
  font-size: 0.85rem; /* Smaller buttons in modal footers */
  padding: 0.4rem 0.8rem;
}

/* Letter Cards */
.letter-card {
  cursor: pointer;
  background: #ffffff;
  border: 6px solid #2196F3; /* Even thicker border */
  border-radius: 25px; /* More rounded corners */
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Slower, bouncier transition */
  box-shadow: 0 8px 0 #1976D2, 0 10px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow */
  aspect-ratio: 1 / 1; /* Keep cards square */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 15px; /* More padding */
  margin: 0.5rem; /* Added margin between cards */
  min-width: 80px; /* Minimum width */
  min-height: 80px; /* Minimum height */
}

.letter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%); /* Stronger gradient */
  z-index: 1;
  border-radius: 20px;
}

.letter-card::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232196F3' fill-opacity='0.15' fill-rule='evenodd'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E"); /* Larger pattern */
  opacity: 0.6;
  z-index: 0;
}

.letter-card:hover {
  transform: translateY(-10px) scale(1.1) rotate(3deg); /* More dramatic hover effect */
  box-shadow: 0 15px 0 #1976D2, 0 20px 25px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
  border-color: #D81B60; /* Match our updated pink color */
  background: #E3F2FD; /* Slightly lighter blue background on hover */
  filter: brightness(1.1); /* Brighten on hover */
}

.letter-card:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 4px 0 #1976D2, 0 6px 10px rgba(0, 0, 0, 0.15);
}

.letter-card h2 {
  font-size: clamp(3rem, 9vw, 4.5rem); /* Even larger font size */
  color: #D81B60; /* Match our updated pink color */
  margin: 0;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15); /* Stronger text shadow */
  position: relative;
  z-index: 2;
  animation: pulse 2.5s infinite alternate; /* Slower, more gentle pulse */
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* Modals */
.modal-content {
  border-radius: 25px;
  border: 6px solid #FF9800; /* Orange border */
  background: #FFF8E1; /* Warmer light yellow background */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 15px rgba(255, 152, 0, 0.1);
  animation: modalAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 4px dashed rgba(255, 152, 0, 0.3); /* Playful dashed border */
  padding: 1.2rem 1.8rem;
  position: relative;
  overflow: hidden;
}

.modal-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 20.83l2.83-2.83 1.41 1.41L1.41 22.24H0v-1.41zM0 3.07l2.83-2.83 1.41 1.41L1.41 4.48H0V3.07zm20 0l2.83-2.83 1.41 1.41L21.41 4.48H20V3.07zm0 17.76l2.83-2.83 1.41 1.41-2.83 2.83H20v-1.41zm0 17.76l2.83-2.83 1.41 1.41-2.83 2.83H20v-1.41zM40 3.07l-2.83-2.83-1.41 1.41 2.83 2.83H40V3.07zm0 17.76l-2.83-2.83-1.41 1.41 2.83 2.83H40v-1.41zm0 17.76l-2.83-2.83-1.41 1.41 2.83 2.83H40v-1.41z'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1); /* Make close button white */
  opacity: 0.8;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.modal-header .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.modal-title {
  font-size: 1.6rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.modal-body {
  padding: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF9800' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.modal-footer {
  border-top: 4px dashed rgba(255, 152, 0, 0.3); /* Match header border */
  padding: 1.2rem 1.8rem;
  background-color: rgba(255, 152, 0, 0.05); /* Subtle orange footer background */
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* Harakat Modal Specific */
#harakatModal .modal-dialog {
  max-width: 500px; /* Limit width for better layout */
}
.haraka-display {
  font-size: clamp(3rem, 15vw, 5rem); /* Responsive */
  font-weight: 700;
  color: #0277bd; /* Primary color */
  margin-bottom: 1rem;
  min-height: 80px; /* Ensure space */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Word/Phrase Modals */
#currentWord, #currentPhrase {
  font-size: clamp(2rem, 10vw, 3.5rem); /* Responsive */
  color: #4CAF50; /* Green */
  font-weight: 700;
  margin-bottom: 1rem;
  min-height: 60px; /* Ensure space */
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl; /* Ensure correct direction */
}

#wordImageContainer {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.word-image {
  max-width: 100%;
  max-height: 200px; /* Limit image height */
  height: auto;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.word-counter, .phrase-counter, .game-word-counter, .guess-counter, .writing-counter, .syllable-counter, .quiz-counter {
  font-size: 0.9rem;
  color: #757575; /* Gray */
}

/* Game Tiles (General Styling for Arrangement, Guess, Syllable, Word Hunter) */
.letter-tile, .syllable-tile, .word-tile, #guessOptions .btn, #quizOptions .btn {
  font-size: clamp(1.1rem, 5vw, 1.6rem); /* Slightly larger */
  padding: 0.6rem 1.2rem;
  border-radius: 15px;
  border-width: 3px; /* Thicker border */
  border-style: solid;
  min-width: 65px; /* Slightly wider */
  min-height: 55px; /* Slightly taller */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  margin: 5px !important; /* Slightly more spacing */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: #FFFFFF;
  border-color: #2196F3;
  color: #FF4081;
  position: relative;
  overflow: hidden;
}

.letter-tile::before, .syllable-tile::before, .word-tile::before,
#guessOptions .btn::before, #quizOptions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.letter-tile:hover, .syllable-tile:hover, .word-tile:hover,
#guessOptions .btn:hover, #quizOptions .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.1), 0 7px 10px rgba(0, 0, 0, 0.15);
  border-color: #FF9800;
}

.letter-tile:active, .syllable-tile:active, .word-tile:active,
#guessOptions .btn:active, #quizOptions .btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* Specific Tile Overrides if needed */
.letter-tile {
  /* Specific styles for arrangement game tiles if different */
  position: relative; /* For haraka positioning */
}
.letter-tile .haraka {
  font-size: 0.8em;
  position: absolute;
  top: -0.3em; /* Adjust positioning */
  left: 50%;
  transform: translateX(-50%);
  color: #E53935; /* Red */
  line-height: 1;
}
.letter-tile .hamza {
  /* Style for hamza if needed */
}

.selected-letters {
  min-height: 60px;
  background-color: #f5f5f5; /* Light gray background */
  border: 1px dashed #ccc;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.selected-letters .letter-tile {
  cursor: default;
  background-color: #e0e0e0; /* Darker gray for selected */
  border-color: #bdbdbd;
}
.selected-letters .letter-tile:hover {
  transform: none; /* No hover effect */
}

/* Feedback Messages */
.feedback-message, .guess-feedback, .writing-feedback, .hunter-feedback, .syllable-feedback, .quiz-feedback {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  border-radius: 15px;
  margin-top: 1.2rem;
  min-height: 50px; /* Taller */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: feedbackAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes feedbackAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.feedback-message.correct, .guess-feedback.correct, .writing-feedback.correct, .hunter-feedback.correct, .syllable-feedback.correct, .quiz-feedback.correct {
  background-color: #C8E6C9; /* Slightly darker green */
  color: #2E7D32; /* Darker green */
  border: 2px solid #4CAF50;
}

.feedback-message.correct::before, .guess-feedback.correct::before, .writing-feedback.correct::before,
.hunter-feedback.correct::before, .syllable-feedback.correct::before, .quiz-feedback.correct::before {
  content: '✓ ';
  font-size: 1.3em;
  margin-right: 8px;
  animation: bounce 0.6s ease infinite alternate;
}

.feedback-message.incorrect, .guess-feedback.incorrect, .writing-feedback.incorrect, .hunter-feedback.incorrect, .syllable-feedback.incorrect, .quiz-feedback.incorrect {
  background-color: #FFCDD2; /* Slightly darker red */
  color: #C62828; /* Darker red */
  border: 2px solid #F44336;
}

.feedback-message.incorrect::before, .guess-feedback.incorrect::before, .writing-feedback.incorrect::before,
.hunter-feedback.incorrect::before, .syllable-feedback.incorrect::before, .quiz-feedback.incorrect::before {
  content: '✗ ';
  font-size: 1.3em;
  margin-right: 8px;
  animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

/* Writing Practice */
#targetLetter {
  font-size: clamp(3rem, 15vw, 5rem); /* Responsive */
  color: #4CAF50; /* Green */
  font-weight: 700;
  min-height: 80px; /* Ensure space */
  display: flex;
  align-items: center;
  justify-content: center;
}

#userInput {
  font-size: 1.5rem;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0.5rem;
  direction: rtl; /* Ensure correct direction */
}

/* Moving Letter Game */
#movingLetterModal .harakat-display { /* Target the specific display in this modal */
  font-size: clamp(1.5rem, 8vw, 2.5rem); /* Smaller size for the base letter example */
  color: #757575; /* Gray */
  min-height: 50px;
}

.moving-letter-container {
  position: relative; /* Needed for absolute positioning of letter */
  height: 80px; /* Fixed height */
  margin: 1rem 0;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center; /* Center initial position */
  overflow: hidden; /* Hide letter if animation goes outside */
}

.moving-letter {
  font-size: clamp(2rem, 10vw, 3.5rem); /* Responsive */
  color: #AD1457; /* Deep Pink */
  font-weight: bold;
  /* Animation removed - JS handles text change */
}

#letterSelect {
  font-size: 1.2rem;
  border-radius: 10px;
}

/* Word Hunter */
#hunterTargetLetter {
  color: #0277bd; /* Primary color */
  font-weight: bold;
}
.hunter-timer, .hunter-score {
  font-size: 1.1rem;
  color: #AD1457; /* Deep Pink */
  font-weight: bold;
}

/* Missing Syllable */
#missingSyllableLetter {
  color: #0277bd; /* Primary color */
  font-weight: bold;
}
#incompleteWord {
  font-size: clamp(2rem, 10vw, 3.5rem); /* Responsive */
  color: #4CAF50; /* Green */
  font-weight: 700;
  min-height: 60px; /* Ensure space */
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
}
.missing-syllable-placeholder {
  color: #0277bd; /* Primary color */
  font-weight: bold;
  padding: 0 0.2em; /* Add some spacing */
}

/* Global Quiz */
.quiz-question-display {
  font-weight: bold;
  min-height: 60px; /* Ensure space */
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
}
/* Font size adjusted by JS based on type (display-4, display-6) */

/* Footer */
footer {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); /* Blue gradient */
  color: #FFFFFF; /* White text */
  padding: 1.5rem;
  border-radius: 25px 25px 0 0; /* More rounded top corners */
  margin-top: 3rem;
  font-size: 1rem;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #FF9800, #FFEB3B, #FF9800, #FFEB3B, #FF9800);
  background-size: 200% 100%;
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

footer p {
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}

footer a {
  color: #FFEB3B; /* Bright yellow link */
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  position: relative;
  display: inline-block;
}

footer a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFEB3B;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

footer a:hover {
  color: #FFFFFF; /* White text on hover */
  background-color: rgba(255, 235, 59, 0.2); /* Semi-transparent yellow */
}

footer a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Temporary Message Styling */
.app-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2050; /* Above modals */
  min-width: 280px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  font-size: 1.1rem;
  font-weight: bold;
  padding: 1rem 1.5rem;
  border-radius: 20px;
  background-color: #FFF8E1; /* Light yellow */
  border: 3px solid #FF9800; /* Orange border */
  color: #FF4081; /* Pink text */
  animation: messagePopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
             messageFloat 2s ease-in-out infinite alternate;
}

@keyframes messagePopIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes messageFloat {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* Intro.js Customizations */
.introjs-tooltip {
  font-family: 'Baloo Bhaijaan 2', 'Kufam', 'Amiri', sans-serif;
  direction: rtl; /* Default to RTL, JS should handle LTR if needed */
  text-align: right;
  background-color: #FFF8E1; /* Match updated modal background */
  color: #FF4081; /* Match updated text color */
  border: 4px solid #FF9800; /* Orange border */
  border-radius: 20px; /* Rounder corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 0 15px rgba(255, 152, 0, 0.1); /* Enhanced shadow */
  padding: 1.8rem; /* More padding */
  max-width: 380px; /* Slightly wider */
  animation: tooltipBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

@keyframes tooltipBounce {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.introjs-tooltip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #FF9800, #FFEB3B, #FF9800);
  background-size: 200% 100%;
  animation: rainbow 3s linear infinite;
}

.introjs-tooltip-header {
  color: #0277bd; /* Primary color for header */
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.introjs-tooltiptext {
  font-size: 1rem;
  line-height: 1.6;
}

.introjs-button {
  font-family: 'Baloo Bhaijaan 2', 'Kufam', 'Amiri', sans-serif;
  border-radius: 50px; /* Match button style */
  padding: 0.6rem 1.4rem; /* Match updated button style */
  font-weight: bold;
  font-size: 1.05rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
  border: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
  text-transform: none;
  margin: 0 5px; /* Spacing between buttons */
  color: white; /* Default text color */
  position: relative;
  overflow: hidden;
}

.introjs-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.introjs-button:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.15);
}

.introjs-button:hover::after {
  opacity: 1;
  transform: scale(1);
}

.introjs-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.introjs-button:focus {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1), 0 0 0 0.25rem rgba(3, 169, 244, 0.5);
}

.introjs-skipbutton {
  background-color: #9C27B0; /* Purple */
  background-image: linear-gradient(45deg, #9C27B0, #8E24AA);
}
.introjs-skipbutton:hover {
  background-color: #7B1FA2;
  background-image: linear-gradient(45deg, #8E24AA, #7B1FA2);
}

.introjs-prevbutton, .introjs-nextbutton {
  background-color: #FF9800; /* Orange */
  background-image: linear-gradient(45deg, #FF9800, #FB8C00);
}
.introjs-prevbutton:hover, .introjs-nextbutton:hover {
  background-color: #F57C00;
  background-image: linear-gradient(45deg, #FB8C00, #F57C00);
}

.introjs-donebutton {
  background-color: #4CAF50; /* Green */
  background-image: linear-gradient(45deg, #4CAF50, #43A047);
}
.introjs-donebutton:hover {
  background-color: #388E3C;
  background-image: linear-gradient(45deg, #43A047, #388E3C);
}

.introjs-disabled {
  background-color: #E0E0E0; /* Lighter gray for disabled */
  background-image: none;
  color: #9E9E9E;
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 2px dashed #BDBDBD;
}

.introjs-disabled:hover {
  transform: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #E0E0E0;
  background-image: none;
  border: 2px dashed #BDBDBD;
}

.introjs-progress {
  margin-top: 1.2rem;
  background-color: rgba(255, 255, 255, 0.5); /* Lighter background */
  border-radius: 50px;
  height: 10px;
  border: 2px solid #FF9800; /* Orange border */
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.introjs-progressbar {
  background-image: linear-gradient(45deg, #FF9800, #FFEB3B, #FF9800); /* Gradient progress */
  background-size: 200% 100%;
  animation: rainbow 3s linear infinite;
  border-radius: 50px;
  height: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.introjs-arrow.top { border-bottom-color: #FFF8E1; }
.introjs-arrow.right { border-left-color: #FFF8E1; }
.introjs-arrow.bottom { border-top-color: #FFF8E1; }
.introjs-arrow.left { border-right-color: #FFF8E1; }

.introjs-helperLayer {
  background: rgba(255, 152, 0, 0.1); /* Semi-transparent orange overlay */
  border: 3px dashed #FF9800; /* Thicker orange dashed border */
  border-radius: 15px;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 152, 0, 0.5);
  animation: pulse-border 2s infinite alternate;
}

@keyframes pulse-border {
  from {
    border-color: #FF9800;
  }
  to {
    border-color: #FFEB3B;
  }
}

.introjs-overlay {
  background: rgba(0, 0, 0, 0.6); /* Slightly darker overlay */
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1.15rem; /* Slightly larger font on tablets */
  }
  .language-switcher {
    position: static; /* Reset position */
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .btn {
    padding: 0.8rem 1.6rem; /* Larger buttons on tablets */
    font-size: 1.15rem;
    margin: 0.5rem 0.4rem; /* More space between buttons */
  }
  .haraka-btn {
    font-size: 1rem; /* Larger font */
    padding: 0.6rem 0.4rem;
    min-height: 55px; /* Taller buttons */
  }
  .modal-footer .btn {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
  .letter-tile, .syllable-tile, .word-tile, #guessOptions .btn, #quizOptions .btn {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem); /* Larger font */
    padding: 0.6rem 1rem;
    min-width: 60px; /* Wider */
    min-height: 55px; /* Taller */
    margin: 0.4rem; /* More space between tiles */
  }
  .letter-card {
    min-width: 90px; /* Larger minimum size */
    min-height: 90px;
  }
  .letter-card h2 {
    font-size: clamp(2.8rem, 8vw, 4rem); /* Adjust for tablet */
  }
  .container {
    padding-left: 20px; /* More container padding */
    padding-right: 20px;
  }
}

@media (max-width: 576px) {
  body {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1.1rem; /* Still larger than default */
  }
  .btn {
    padding: 0.7rem 1.4rem; /* Still larger than original */
    font-size: 1.1rem;
    margin: 0.4rem 0.3rem;
    border-radius: 30px; /* More rounded on small screens */
  }
  .haraka-btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.3rem;
    min-height: 50px; /* Still taller than original */
  }
  .modal-body, .modal-footer, .modal-header {
    padding: 1.2rem; /* More padding */
  }
  .modal-title {
    font-size: 1.4rem; /* Larger title */
  }
  .letter-tile, .syllable-tile, .word-tile, #guessOptions .btn, #quizOptions .btn {
    font-size: clamp(1rem, 4vw, 1.3rem);
    padding: 0.5rem 0.8rem;
    min-width: 55px;
    min-height: 50px;
    margin: 0.3rem;
  }
  .letter-card {
    min-width: 80px;
    min-height: 80px;
    border-width: 5px; /* Slightly thinner border on small screens */
  }
  .letter-card h2 {
    font-size: clamp(2.5rem, 7vw, 3.5rem); /* Adjust for mobile */
  }
  footer {
    font-size: 0.9rem;
    padding: 1.2rem;
  }
  /* Increase spacing between rows */
  .row {
    row-gap: 15px !important;
  }
  /* Make container take more width on small screens */
  .container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 95%;
  }
}