/* 
 * حفيظ · CSS Custom Styling
 * Islamic Serene Parchment Theme
 */

@layer utilities {
  .font-quran {
    font-family: 'Amiri Quran', 'Amiri', serif;
  }
}

/* Base styling */
body {
  background-color: #FAF7F0;
  background-image: radial-gradient(#E8DFC8 0.75px, transparent 0.75px);
  background-size: 24px 24px;
}

/* Quranic verse number end marker circle */
.ayah-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 6px;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #9C7A28;
  vertical-align: middle;
  user-select: none;
}

.ayah-num-badge::before {
  content: '۝';
  position: absolute;
  font-size: 34px;
  color: #C5A059;
  line-height: 1;
  top: -1px;
}

/* Active Highlight for the Verse currently playing */
.ayah-block.active-playing {
  background-color: rgba(212, 175, 55, 0.14);
  border-radius: 14px;
  padding: 4px 8px;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.4);
  transition: all 0.3s ease;
}

/* Word Masking States */
.quran-word {
  position: relative;
  display: inline-block;
  padding: 2px 4px;
  margin: 0 1px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* Masked: Blurred / Hidden */
.quran-word.masked-blur {
  filter: blur(8px);
  background-color: rgba(220, 200, 168, 0.5);
  color: transparent;
  text-shadow: 0 0 12px rgba(42, 36, 28, 0.5);
  border-bottom: 2px dashed #C5A059;
}

.quran-word.masked-blur:hover {
  filter: blur(4px);
  background-color: rgba(220, 200, 168, 0.7);
}

/* Fully hidden with placeholder bar */
.quran-word.masked-hidden {
  background-color: #E2D5BE;
  color: transparent;
  min-width: 38px;
  height: 1.4em;
  border-radius: 6px;
  border-bottom: 2px solid #C5A059;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quran-word.masked-hidden::after {
  content: '؟';
  color: #9C7A28;
  font-size: 13px;
  font-weight: bold;
}

/* First Letter only */
.quran-word.masked-first-letter {
  background-color: rgba(243, 239, 230, 0.8);
  border-bottom: 2px dotted #C5A059;
}

/* Unmasked / Revealed upon tap */
.quran-word.revealed-peek {
  filter: none !important;
  color: #173D2C !important;
  background-color: #FEF3C7 !important;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
  animation: pulsePeek 1.5s ease;
}

@keyframes pulsePeek {
  0% { transform: scale(1.08); background-color: #FDE68A; }
  100% { transform: scale(1); background-color: #FEF3C7; }
}

/* Tab buttons */
.tab-btn.active {
  background-color: #173D2C;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(23, 61, 44, 0.25);
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scrollbar polish */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F3EFE6;
}
::-webkit-scrollbar-thumb {
  background: #DCC8A8;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}