body {
  margin: 0;
  padding: 0;
  background-color: #000;
  background-image: url(/img/SlotMachine/OnePiece/background.webp);
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
}
#stage {
  margin: 0 auto;
  width: 456px;
  /*padding: 0px 0px 0px 18px;*/
  background-image: url(/img/SlotMachine/frame-black.jpg);
  background-position: 0px 8px;
  background-repeat: no-repeat;
  background-size: 455px 404px;
}
.perspective-on {
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
          perspective: 1000px; /* Setting the perspective of the contents of the stage but not the stage itself */
}
.perspective-off {
  -webkit-perspective: 0;
     -moz-perspective: 0;
          perspective: 0;
}
#rotate {
  left: 18px;
  position: relative;
  /*margin: 0 auto 0;*/
  width: 450px;
  height: 220px;
  padding-top: 120px;
  transform-style: preserve-3d; /* Ensure that we're in 3D space */
}
.ring {
  margin: 0 auto;
  height: 180px;
  width: 140px;
  float: left;
  transform-style: preserve-3d;
}
.slot {
  position: absolute;
  height: 180px;
  width: 140px;
  box-sizing: border-box;
  opacity: 1;
  color: rgba(0,0,0,1);
  background: #fff;
  border: solid 2px #000;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
.backface-on {
  -webkit-backface-visibility: visible;
     -moz-backface-visibility: visible;
          backface-visibility: visible;
}
.slot p {
  font-size: 36px;
  font-weight: bold;
  line-height: 180px;
  margin: 0;
  text-align: center;
}
.go {
  display: block;
  width: 500px;
  /*margin: 0 auto 20px;*/
  padding: 10px 30px;
  font-size: 20px;
  cursor: pointer;
}
label {
  cursor: pointer;
  display: inline-block;
  width: 45%;
  text-align: center;
}
.tilted {
  transform: rotateY(45deg);
}
/*=====*/
.spin-0     { transform: rotateX(-3719deg); }
.spin-1     { transform: rotateX(-3779deg); }
.spin-2     { transform: rotateX(-3839deg); }
.spin-3     { transform: rotateX(-3899deg); }
.spin-4     { transform: rotateX(-3959deg); }
.spin-5    { transform: rotateX(-4019deg); }
/*=====*/
@keyframes tiltin {
    0%    { transform: rotateY(0deg);}
    50%   { transform: rotateY(0deg);}
    100%  { transform: rotateY(45deg);}
}
@keyframes tiltout {
    0%    { transform: rotateY(45deg);}
    100%  { transform: rotateY(0deg);}
}
@keyframes spin {
    100%  { transform: rotateX(0deg); }
}
@keyframes back-spin {
    /*0%    { transform: rotateX(0deg); }*/
    100%  { transform: rotateX(60deg); }
}
@keyframes spin-0 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-3719deg); }
}
@keyframes spin-1 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-3779deg); }
}
@keyframes spin-2 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-3839deg); }
}
@keyframes spin-3 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-3899deg); }
}
@keyframes spin-4 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-3959deg); }
}
@keyframes spin-5 {
    0%    { transform: rotateX(60deg); }
    100%  { transform: rotateX(-4019deg); }
}
button {
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 10px;
    max-width: 100px;
}
.spin-btn {
	display: inline-block;
	text-align: center;
	width: 440px;
	margin-top: -40px;
	margin-bottom: 20px;
}
.pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  border-radius: 70%;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*border-radius: 12px;*/
  border-radius: 70%;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*border-radius: 12px;*/
  border-radius: 70%;
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}
.front {
  display: block;
  position: relative;
  margin-top: 4px;
  padding: 12px 42px;
  /*border-radius: 12px;*/
  border-radius: 70%;
  font-size: 1.25rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover {
  filter: brightness(110%);
}

.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
  outline: none;
}

@keyframes attention-pulse {
  0% { scale: 1; box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
  70% { scale: 1.15; box-shadow: 0 0 0 15px rgba(255, 71, 87, 0); }
  100% { scale: 1; box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}
.attention-pulse {
	animation: attention-pulse 1.5s 3 ease-in-out;
}