.slots-game-board{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* background: linear-gradient(135deg, rgb(72, 42, 90), rgb(32, 29, 34)); */
  }
  
  .audio{
    position: absolute;

    top:1.5%;
    right: 1%;
  }
  
  .doors {
    display: flex;
  }



  .door {
    /* Display Settings */
    display: flex;
    justify-content: center;
    background-clip: border-box;

    /* Size */
    width: 120px;
    height: 100%;

    /* Misc */
    overflow: hidden;
    position: relative;

    /* Mask */
    mask-image: linear-gradient(to bottom, transparent 15px, black 30px, black calc(100% - 30px), transparent calc(100% - 17px), transparent 100%);
  }

  .boxes {
    transition: transform 1s ease-in-out;
  }
  
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    

    font-size: 3rem;
    user-select: none;
  }

  .disabled-button {
    pointer-events: none; /* Prevents mouse interactions */

    cursor: not-allowed; /* Changes cursor to indicate unclickable */
  }

  .box p {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: bolder;
    z-index: 2; /* Set the z-index of the text higher than the image */
  }
  
  .info {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0);
    user-select: none;
    display: none;
  }


  /* Animations */

  .rotate{
    animation: rotate 1s linear infinite;
  }

  .glow{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  
    animation: glow 3s alternate;
  }

  .rotation-shake{
    width: 100px;
    height: 100px;
  
    animation: rotation-shake .65s linear 2;
  }

  .scale-bounce{
    width: 100px;
    height: 100px;
  
    animation: bounce 2s infinite;
  }

  .scale-bounce-zero{
    width: 100px;
    height: 100px;
  
    animation: scale-bounce-zero 4s linear 1;
  }

  .spin-edge {
    position: absolute;
    border-radius: 50%;
  
    width: 75px;
    height: 75px;
    animation: spin-edge .5s linear 2 forwards;
  }
  
  @keyframes glow {
    0% {
      box-shadow: 0 0 0 0 #4CCD99;
    }
    50% {
      box-shadow: 0 0 10px 7px #4CCD99;
    }
    100% {
      box-shadow: 0 0 0 0 #4CCD99;
    }
  }  

  @keyframes rotation-shake {
    0%, 100% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(-25deg);
    }
    75% {
      transform: rotate(25deg);
    }
  }

  @keyframes bounce {
    0%, 100% {
      transform: scale(1); /* Original size */
    }
    50% {
      transform: scale(1.3); /* Scale up to 120% */
    }
  }

  @keyframes scale-bounce-zero {
    0%, 70% {
      transform: scale(1); /* Original size */
    }
    85% {
      transform: scale(2); /* Scale up to 120% */
    }
    100% {
      transform: scale(0); /* Scale down to 0% */
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spinAndFade {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 0.5; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
  }

  @keyframes translate-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-50px);
    }
  }

  @keyframes spin-edge {
    0% { transform: rotate(0deg); }
    50% { opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0; }
  }