@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
  *{
      font-family: "Almarai", sans-serif;
  font-weight: 400;
  font-style: normal;
  }
    /* 3D card base styles */
    .scene { perspective: 1400px; }
    .card-3d {
      transform-style: preserve-3d;
      transition: transform .6s cubic-bezier(.2,.9,.3,1);
      will-change: transform;
    }
    .card-face {
      backface-visibility: hidden;
      transform: translateZ(30px);
    }
    .card-shadow {
      box-shadow: 0 20px 50px rgba(2,6,23,.35), inset 0 -6px 20px rgba(0,0,0,.08);
    }
    /* answer button 3D effect */
    .btn-3d { transform: translateZ(20px); transition: transform .12s ease, box-shadow .12s ease; }
    .btn-3d:active { transform: translateZ(6px) translateY(2px); }
    /* glow on correct/wrong */
    .correct { box-shadow: 0 8px 30px rgba(34,197,94,.25), 0 0 18px rgba(34,197,94,.08) ; }
    .wrong { box-shadow: 0 8px 30px rgba(239,68,68,.25), 0 0 18px rgba(239,68,68,.06) ; }
    /* custom timer circle */
    .timer-svg { transform: rotate(-90deg); }
    /* small responsive tweaks */
    @media (min-width: 1024px){
      .max-w-main{ max-width: 980px; }
    }
    .shine {
  position: relative;
  overflow: hidden; /* hide shine outside the button */
  z-index: 0;
}

.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine-left-right 3s infinite;
  pointer-events: none; /* allow clicks to pass through */
}

@keyframes shine-left-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}