@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@-webkit-keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.wheel-bg {
  background-color: #451245;
}

.wheel,
.wheel-multiplier {
  background-repeat: no-repeat;
  margin: 0 auto;
  background-size: 100%;
  background-position: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 4s cubic-bezier(0, 0.58, 0.58, 1);
}

.wheel {
  transition: transform 4.5s cubic-bezier(0, 0.58, 0.58, 1);
}

.wheel-center,
.spin {
  background-size: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
}

.wheel-wrapper {
  background-image: url(../svg/wheelbg.svg);
  background-size: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 100vw;
  max-width: 600px;
  max-height: 560px;
  position: relative;
}

.wheel-arrow {
  background-image: url(../svg/wheel-arrow.svg);
  background-repeat: no-repeat;
  margin: 0 auto;
  background-size: 100%;
  background-position: 50%;
  width: 278px;
  height: 357px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 8;
  top: -22%;
}

.wheel {
  background-image: url(../svg/wheel.svg);
  max-width: 414px;
  max-height: 414px;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%) rotate(0deg);
}

.wheel-multiplier {
  background-image: url(../svg/wheel.svg);
  max-width: 225px;
  max-height: 225px;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

.spin {
  background-image: url(../svg/wheel-center.svg);
  max-width: 104px;
  max-height: 104px;
  width: 20%;
  height: 20%;
}

.wheel-bet {
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
}

.anim-spinning {
  animation-name: spin;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  animation-direction: reverse;
  animation-iteration-count: infinite;
}

.token-fields {
  margin: 10px auto;
  text-align: center;
}

.spin {
  margin: 0 auto;
  display: block;
}

.modal .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

#alert-box .modal-dialog {
  max-width: 350px;
  width: 90%;
  margin: 0;
}

#alert-box .modal-dialog .btn {
  width: 80px;
  margin: 8px;
}

#alert-box .modal-dialog p {
  margin: 8px 0;
}

@media (max-width: 568px) {
  .wheel-wrapper {
    background-size: 200%;
  }
  .wheel-arrow {
    width: 135px;
  }

  .wheel {
    max-width: 375px;
    max-height: 375px;
  }

  .wheel-multiplier {
    max-width: 205px;
    max-height: 205px;
  }

  .wheel-center {
    max-width: 94px;
    max-height: 94px;
  }
}

.wheel-bg {
  background-color: transparent;
}

.wheel-content,
.wheel-center,
.wheel-layer-1,
.spin {
  background-size: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
}

.wheel-wrapper {
  background-image: none;
}

.wheel-arrow {
  background-image: none;
  width: 45px;
  height: 74px;
  top: 50%;
  transform: translate(-50%, -323%);
}

.wheel-center {
  background-image: none;
  width: 142px;
  height: 142px;
}

.wheel {
  background-image: url(/assets/images/wheel/9c-worldcup/wheel-aug-2025.png);
  background-size: 100%;
  max-width: 72vw;
  max-height: 72vw;
  width: 416px;
  height: 416px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.wheel-layer-1 {
  background-image: url(/assets/images/wheel/9c-worldcup/wheel-light.png),
    url(/assets/images/wheel/9c-worldcup/outer-wheel.png);
  background-size: 100%;
  max-width: 576px;
  max-height: 575px;
  width: 100%;
  height: 100vw;
}

.wheel-multiplier {
  display: none;
}

.spin {
  background-image: url(/assets/images/wheel/9c-worldcup/center-xmas-2020.png);
  width: 142px;
  height: 142px;
  max-width: 24vw;
  max-height: 24vw;
  top: 50%;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  padding-top: 14%;
  font-size: 25px;
  color: #000;
  text-align: center;
}

.spin:hover {
  background-image: url(/assets/images/wheel/9c-worldcup/center-hover-xmas-2020.png);
  color: #000;
  text-decoration: none;
}

.spin:active {
  color: #000;
}

.modal-backdrop {
  opacity: 0 !important;
}

.wheel-bet {
  left: 50%;
  top: 46%;
  pointer-events: none;
}

.token-fields {
  margin: 0 auto;
  color: #000;
  font-weight: 400;
  font-size: 35px;
}

@media (max-width: 568px) {
  .spin {
    font-size: 4vw;
  }

  .token-fields {
    font-size: 6vw;
  }
}