/* Custom typography and child-friendly styling */
@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

body {
  font-family: 'Readex Pro', 'Tajawal', sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.45s ease-in-out;
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Rounded outline fonts for children's coloring outline */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 4px #CBD5E1;
  text-shadow: none;
}

.outline-printable {
  color: transparent;
  -webkit-text-stroke: 3px #1E293B;
  text-shadow: none;
}

/* Activity tabs */
.activity-tab {
  background-color: transparent;
  color: #78350F;
}

.activity-tab.active {
  background-color: #FED766;
  color: #451A03;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  border: 2px solid #F59E0B;
}

/* Letter Swatches */
.letter-pill {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  transition: all 0.15s ease-out;
  flex-shrink: 0;
  border-width: 2px;
}

.letter-pill.active {
  background-color: #F4845F;
  color: white;
  border-color: #EA580C;
  transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(244, 132, 95, 0.4);
}

.letter-pill:not(.active) {
  background-color: white;
  color: #78350F;
  border-color: #FDE68A;
}

.letter-pill:not(.active):hover {
  background-color: #FEF3C7;
}

/* Swatches for coloring */
.color-swatch.active {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px #FBBF24;
}

/* Counselor interactive buttons & guidance styling */
.counselor-whisper-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.counselor-whisper-btn:hover {
  border-color: #9333EA;
  transform: translateY(-2px);
}
.counselor-whisper-btn:active {
  transform: scale(0.96);
}

/* Badge card styling */
.badge-card {
  transition: all 0.2s ease-out;
}

.badge-card.unlocked {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #F59E0B;
}

.badge-card.locked {
  background-color: #F8FAFC;
  border-color: #E2E8F0;
  opacity: 0.6;
  filter: grayscale(80%);
}

/* Print CSS setup for accurate crisp A4 output */
@media print {
  body {
    background: white !important;
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .no-print {
    display: none !important;
  }

  .print-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 1.2cm !important;
  }

  @page {
    size: A4 portrait;
    margin: 0.8cm;
  }
}