html, body {
  width: 100%;
  overflow-x: hidden; /* yatay scrollu kapatır */
}
 
 
 @keyframes roll {
     0% {
         transform: rotate(0deg) scale(1);
     }

     25% {
         transform: rotate(180deg) scale(1.2);
     }

     50% {
         transform: rotate(360deg) scale(1);
     }

     75% {
         transform: rotate(540deg) scale(0.8);
     }

     100% {
         transform: rotate(720deg) scale(1);
     }
 }

 .dice-animation {
     animation: roll 5s infinite ease-in-out;
 }

 button.line-through {
     pointer-events: none;
     user-select: none;
 }

 /* Subtle animations and effects */
 @keyframes glowPulse {
     0% {
         box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
     }

     70% {
         box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
     }
 }

 .pulse-ring {
     animation: glowPulse 1.8s infinite;
 }

 @keyframes diceShake {
     0% {
         transform: translate(0, 0) rotate(0deg);
     }

     20% {
         transform: translate(-3px, -2px) rotate(-6deg);
     }

     40% {
         transform: translate(3px, 1px) rotate(7deg);
     }

     60% {
         transform: translate(-2px, 3px) rotate(-4deg);
     }

     80% {
         transform: translate(2px, -3px) rotate(5deg);
     }

     100% {
         transform: translate(0, 0) rotate(0deg);
     }
 }

 .dice-anim {
     animation: diceShake 0.6s ease-in-out infinite;
 }

.scale-pop {
  animation: scalePop 0.6s ease-in-out forwards;
}

@keyframes scalePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}