body {
  font-family: 'Inter', sans-serif;
  color: #3D3D3D; /* Softer default text color */
}

.font-serif-elegant {
  font-family: 'Cormorant Garamond', serif;
}

@keyframes fade-in-scale {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fade-in-scale {
  animation: fade-in-scale 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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


.animate-fade-in-scale-delayed {
  animation: fade-in-scale 0.4s ease-out 0.2s forwards;
  opacity: 0;
}

/* New Clover Game Flip Animation */
#clover-grid {
  perspective: 1000px;
}

.clover-cell {
  /* container for the card, handles hover scale */
  transition: transform 0.3s ease;
}

.clover-cell:not(:disabled):hover {
  transform: scale(1.05);
}

.clover-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.clover-card.is-flipped {
  transform: rotateY(180deg);
}

.clover-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem; /* from rounded-lg */
  transition: background-color 0.3s;
}

.clover-card-front {
  background-color: rgba(255, 255, 255, 0.8); /* bg-white/80 */
  border: 2px solid #e5e7eb; /* border-2 border-zinc-200 */
}

.clover-cell:not(:disabled):hover .clover-card-front {
    background-color: rgba(230, 194, 198, 0.5); /* from hover:bg-[#e6c2c6]/50 */
}

.clover-card-back {
  background-color: rgba(230, 194, 198, 0.3); /* from bg-[#e6c2c6]/30 */
  transform: rotateY(180deg);
}