@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(241, 235, 214);
  background: radial-gradient(circle, rgb(241, 235, 214) 0%, rgba(221, 205, 183, 0.5271358543) 25%, rgba(246, 235, 186, 0.5103291317) 100%);
}

div.all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 312px;
}
div.all .slot {
  width: 416px;
  height: 312px;
  border: 4mm ridge rgba(237, 249, 7, 0.6);
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(243, 224, 157);
  background: radial-gradient(circle, rgb(243, 224, 157) 0%, rgba(218, 162, 80, 0.5271358543) 25%, rgba(248, 222, 109, 0.5103291317) 100%);
  padding: 34.32px;
}
div.all .slot .reel {
  position: relative;
  width: 104px;
  height: 312px;
  border: 2mm ridge rgba(139, 106, 60, 0.6);
  border-radius: 15px;
  background-image: url("../0625.png");
  background-repeat: repeat-y;
  background-position: 0 10px;
}
div.all .slot .reel::before, div.all .slot .reel::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.5);
}
div.all .slot .reel::before {
  left: 0;
  transform: translate(-200%, -50%);
  border-radius: 100%;
}
div.all .slot .reel::after {
  right: 0;
  transform: translate(200%, -50%);
}
div.all .say {
  margin-top: 2rem;
  font-size: 2rem;
  background: white;
  border: 2mm ridge rgba(139, 106, 60, 0.6);
  font-family: "Noto Sans TC", sans-serif;
}
div.all .say:hover {
  cursor: pointer;
}
div.all.win1 {
  animation: win1 200ms steps(2, end) infinite;
}
div.all.win2 {
  animation: win2 200ms steps(2, end) infinite;
}

@keyframes win1 {
  0% {
    background: linear-gradient(45deg, orange 0%, yellow 100%);
    box-shadow: 0 0 80px orange;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
@keyframes win2 {
  0% {
    background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
    box-shadow: 0 0 80px lightgreen;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}/*# sourceMappingURL=style.css.map */