/* reveal.css — styles for Ayah reveal/hide toggle and hidden text effect */

/* Place button to the right in the Ayah card header */
.ayah-display-container .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Aesthetic, modern reveal button */
.btn-reveal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(34,197,94,0.18));
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 120ms ease, box-shadow 180ms ease, background 180ms ease;
}
.btn-reveal:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-reveal:active {
  transform: translateY(0);
}
.btn-reveal .icon {
  opacity: 0.9;
}

/* Blur/obscure the Ayah text when hidden */
#ayahDisplay.ayah-hidden {
  filter: blur(8px) saturate(0.75);
  opacity: 0.85;
  user-select: none;
  transition: filter 220ms ease, opacity 220ms ease;
}

/* Ensure the live match area remains readable always */
#liveMatchDisplay {
  filter: none !important;
  opacity: 1 !important;
}