.minigame-dialog {
    overflow: hidden;
}

.popup-minigame {
    min-width: 400px;
    min-height: 120px;
}

.popup-minigame.loading {
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
}

.wheel-container {
    position: relative;
    width: 350px;
    height: 350px;
    aspect-ratio: 1;
    margin: 64px;
    filter: drop-shadow(0 10px 5px #00000080);
  }

.wheel-container:has(.wheel.spin) {
    animation: zooming 3s ease-out forwards;
}

  .wheel-container .wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: 10px solid #333;
    transform-origin: center;
    transition: transform .2s ease-out;
  }

  .wheel-container:has(.wheel-start-button:hover) .wheel {
    transform: rotate(calc(var(--initial-rotation) + 3deg));
  }

  .wheel-container .wheel.spin {
    opacity: 1;
    animation: spin 3s ease-out forwards, push .2s ease-out;
  }

  .wheel-container .wheel-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Example with 6 slices */

  .wheel-container .wheel {
    background: conic-gradient(
      #f66 0deg 120deg,
      #6f6 60deg 240deg,
      #66f 120deg 360deg
    );

    --initial-rotation: -60deg;
    transform: rotate(var(--initial-rotation)); /* To center the slices */
  }

  .wheel-container .wheel.four {
    background: conic-gradient(
      #f66 0deg 90deg,
      #6f6 90deg 180deg,
      #66f 180deg 270deg,
      #ff6 270deg 360deg
    );

    --initial-rotation: -45deg;
  }

  .wheel-container .wheel.five {
    background: conic-gradient(
      #f66 0deg 72deg,
      #6f6 72deg 144deg,
      #66f 144deg 216deg,
      #ff6 216deg 288deg,
      #6ff 288deg 360deg
    );

    --initial-rotation: -36deg;
  }

  .wheel-container .wheel.six {
    background: conic-gradient(
      #f66 0deg 60deg,
      #6f6 60deg 120deg,
      #66f 120deg 180deg,
      #ff6 180deg 240deg,
      #6ff 240deg 300deg,
      #f6f 300deg 360deg
    );

    --initial-rotation: -30deg;
  }

  .wheel-container .wheel.seven {
    background: conic-gradient(
      #f66 0deg 51.43deg,
      #6f6 51.43deg 102.86deg,
      #66f 102.86deg 154.29deg,
      #ff6 154.29deg 205.71deg,
      #6ff 205.71deg 257.14deg,
      #f6f 257.14deg 308.57deg,
      #fc6 308.57deg 360deg
    );

    --initial-rotation: -25.71deg;
  }

  .wheel-container .wheel.eight {
    background: conic-gradient(
      #f66 0deg 45deg,
      #6f6 45deg 90deg,
      #66f 90deg 135deg,
      #ff6 135deg 180deg,
      #6ff 180deg 225deg,
      #f6f 225deg 270deg,
      #fc6 270deg 315deg,
      #c6f 315deg 360deg
    );

    --initial-rotation: -22.5deg;
  }

  .wheel-container .wheel.nine {
    background: conic-gradient(
        #f66 0deg 40deg,
        #6f6 40deg 80deg,
        #66f 80deg 120deg,
        #ff6 120deg 160deg,
        #6ff 160deg 200deg,
        #f6f 200deg 240deg,
        #fc6 240deg 280deg,
        #c6f 280deg 320deg,
        #6cf 320deg 360deg
    );

    --initial-rotation: -20deg;
  }

  .wheel-container .pointer-container {
    position: absolute;
    width: 100%;
    top: -10px;
    left: 0;
    display: flex;
    justify-content: center;
  }

  /* Pointer */
  .wheel-container .pointer {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 35px solid orange;
    filter: drop-shadow(0 6px 3px #00000080);
    border-radius: 5%;
  }

  .wheel-container .wheel-start-button {
    width: 130px;
    animation: pulsate 1s infinite alternate;
    filter: drop-shadow(0 10px 5px #00000080);
    transition: transform .2s ease-out, opacity .2s ease-out;
    animation-play-state: running;
  }

  .wheel-container .wheel-start-button:hover {
    opacity: .95;
    transform: scale(1.1);
    animation-play-state: paused;
  }

  .wheel-container .pointer-container .pointer {
    animation: none;
  }

  .wheel-container:has(.wheel.spin) .pointer-container .pointer {
    animation: tilt var(--tilt-duration, 0.1s) ease-out infinite alternate;
  }

  @keyframes spin {
    0% {
        transform: rotate(var(--initial-rotation));
    }
    100% {
        transform: rotate(var(--rotation));
    } /* Spins and stops */
  }

  @keyframes push {
    0% {
        transform: scale(.97);
    }
    100% {
        transform: scale(1);
    }
  }

@keyframes pulsate {
    from {
        transform: scale(1);
        filter: drop-shadow(0 8px 5px #00000080);
    }
    to {
        transform: scale(1.1);
        filter: drop-shadow(0 14px 10px #00000080);
    }
}

@keyframes zooming {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 10px 5px #00000080) brightness(1);
    }
    98% {
        transform: scale(1.125);
        filter: drop-shadow(0 20px 12px #00000080) brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 10px 5px #00000080) brightness(1);
    }
}

@keyframes tilt {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(5deg);
    }
}