:root {
  --item-size: 180px;
  --item-gap: 8px;
  --slot-width: calc(var(--item-size) + 16px);
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
  border-radius: 0;
}

body {
  background: radial-gradient(219.23% 129.58% at 14.02% 115.78%, #3029B4 0%, #107FCE 36.06%, #0AD5E6 100%);
  margin: 0;
  font-family: "Arial", sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 780px) {
  body {
    overflow: auto;
    background: #107FCE;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
body.animating .slot:hover {
  transform: none !important;
}

.svg-background {
  position: absolute;
  height: 110vh;
  top: -5vh;
  left: -5vw;
  z-index: -1;
}
@media (max-width: 780px) {
  .svg-background {
    display: none;
  }
}

.title {
  margin-bottom: 48px;
}
.title img {
  height: 100%;
}
@media (max-width: 780px) {
  .title {
    height: 32px;
    margin: 24px 0;
  }
}

h2 {
  color: #B7B6BB;
  text-align: center;
  text-shadow: 1px 2px 0px rgb(43, 43, 43), -1px -1px 0px rgba(255, 255, 255, 0.25);
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 16px;
}

.slot {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
  width: 100%;
}
.slot:hover {
  transform: scale(1.02);
}
@media (max-width: 780px) {
  .slot:hover {
    transform: none;
  }
}
.slot.spinning {
  position: relative;
}
.slot.spinning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 10;
}
.slot.spinning:hover {
  transform: none;
}
.slot-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slot-machine {
  display: inline-flex;
  padding: 16px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 24px;
  border-top: 4px solid #BBBBBB;
  border-right: 4px solid #6B6D6C;
  border-bottom: 4px solid #5E5E5E;
  border-left: 4px solid #6B6D6C;
  background: linear-gradient(180deg, #505251 0%, #414141 100%);
  box-shadow: 0px 145px 41px 0px rgba(0, 0, 0, 0), 0px 93px 37px 0px rgba(0, 0, 0, 0.02), 0px 52px 31px 0px rgba(0, 0, 0, 0.08), 0px 23px 23px 0px rgba(0, 0, 0, 0.14), 0px 6px 13px 0px rgba(0, 0, 0, 0.16);
}
@media (max-width: 780px) {
  .slot-machine {
    transform: scale(0.7);
    height: 308px;
  }
}
.slot-machine-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.slot-window {
  height: 440px;
  width: 180px;
  border-radius: 8px;
  border-top: 4px solid #7F8387;
  border-right: 4px solid #6B6E73;
  border-bottom: 4px solid #B7B6BB;
  border-left: 4px solid #6B6E73;
  background: linear-gradient(180deg, rgba(126, 182, 207, 0.5) 0%, #D6F2FE 50.5%, rgba(3, 99, 209, 0.5) 100%), url(/img/pattern.png) lightgray 0% 0%/42px 42px repeat;
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.25) inset, 0px -16px 16px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.25) inset, 0px 16px 16px 0px rgba(0, 0, 0, 0.25) inset;
  position: relative;
  overflow: hidden;
}
.slot-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 180px;
  width: 180px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.slot-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.slot-detail {
  width: 108px;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(99, 99, 99) 0%, rgba(78, 78, 76, 0.2) 100%);
  position: relative;
}
.slot-detail:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 16px;
  background: #2B2B2B;
  box-shadow: 0px -1px 0px 0px #858585 inset;
}
.slot-select {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 16px));
  height: 200px;
  width: 105%;
  border-top: 16px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 18px solid transparent;
  border-image: linear-gradient(180deg, #FFFDB3 6%, #FFF136 8%, #FFE94C 90%, #FDEC6A 100%);
  border-image-slice: 1;
  z-index: 5;
  animation: breath 0.8s ease-in-out infinite;
  pointer-events: none;
}
.slot-select.bounce {
  animation: bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, breath 0.8s ease-in-out infinite 0.5s;
}
@keyframes breath {
  0% {
    box-shadow: 0px 3px 0px 0px #FFF136 inset, 0px -3px 0px 0px #FFFECB inset, 0px 3px 0px 0px #ffd813, 0px -3px 0px 0px #FFFECB, 0px 0px 0px 0px rgba(254, 236, 34, 0.5), 0px 0px 0px 0px rgba(254, 236, 34, 0.5) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25), 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset;
  }
  80% {
    box-shadow: 0px 3px 0px 0px #FFF136 inset, 0px -3px 0px 0px #FFFECB inset, 0px 3px 0px 0px #ffd813, 0px -3px 0px 0px #FFFECB, 0px 0px 0px 16px rgba(254, 236, 34, 0.1), 0px 0px 0px 16px rgba(254, 236, 34, 0.1) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25), 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset;
  }
  100% {
    box-shadow: 0px 3px 0px 0px #FFF136 inset, 0px -3px 0px 0px #FFFECB inset, 0px 3px 0px 0px #ffd813, 0px -3px 0px 0px #FFFECB, 0px 0px 0px 12px rgba(254, 236, 34, 0), 0px 0px 0px 12px rgba(254, 236, 34, 0) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset, 0px 4px 6px 5px rgba(0, 0, 0, 0.25), 0px 4px 6px 5px rgba(0, 0, 0, 0.25) inset;
  }
}
@keyframes bounce {
  0% {
    transform: translate(-50%, calc(-50% - 16px)) scale(0.9);
  }
  25% {
    transform: translate(-50%, calc(-50% - 16px)) scale(1.1);
  }
  50% {
    transform: translate(-50%, calc(-50% - 16px)) scale(1);
  }
  75% {
    transform: translate(-50%, calc(-50% - 16px)) scale(1.05);
  }
  100% {
    transform: translate(-50%, calc(-50% - 16px)) scale(1);
  }
}

#character-wrapper .slot-item {
  height: 120px;
  width: 120px;
}

.randomize-button {
  margin-top: 60px;
  display: block;
  cursor: pointer;
  border: 0;
  width: 600px;
  padding: 32px 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(img/button.png) center center/contain no-repeat;
  position: relative;
  transition: transform 0.15s ease-in-out;
}
@media (max-width: 780px) {
  .randomize-button {
    transform: scale(0.5);
  }
}
.randomize-button::before, .randomize-button::after, .randomize-button-right, .randomize-button-left {
  content: "";
  display: block;
  width: 16px;
  height: 62px;
  background: #FEEC28;
  position: absolute;
  animation: breath-button 0.8s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.randomize-button::before {
  bottom: 8px;
  left: 16px;
  transform: skew(30deg);
}
.randomize-button::after {
  bottom: 8px;
  right: 16px;
  transform: skew(-30deg);
}
.randomize-button-right {
  top: 0;
  right: 16px;
  transform: skew(30deg);
}
.randomize-button-left {
  top: 0;
  left: 16px;
  transform: skew(-30deg);
}
.randomize-button .text {
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15), -2px -2px 0px rgba(255, 255, 255, 0.15);
  font-family: Inter, sans-serif;
  font-size: 64px;
  font-style: italic;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  background: linear-gradient(180deg, #6B675C 21.74%, #3D3A29 80.43%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.15s ease;
}

@media (min-width: 780px) {
  .randomize-button:hover {
    transform: scale(1.01);
  }
  .randomize-button:hover .text {
    transform: scale(1.01);
  }
  .randomize-button:hover::after {
    transform: translate(4px) skew(-30deg);
  }
  .randomize-button:hover .randomize-button-left {
    transform: translate(-4px) skew(-30deg);
  }
  .randomize-button:hover::before {
    transform: translate(-4px) skew(30deg);
  }
  .randomize-button:hover .randomize-button-right {
    transform: translate(4px) skew(30deg);
  }
  .randomize-button:active {
    transform: scale(1);
  }
  .randomize-button:active .text {
    transform: scale(0.98);
  }
  .randomize-button:active::after {
    transform: translate(-8px) skew(-30deg);
  }
  .randomize-button:active .randomize-button-left {
    transform: translate(8px) skew(-30deg);
  }
  .randomize-button:active::before {
    transform: translate(8px) skew(30deg);
  }
  .randomize-button:active .randomize-button-right {
    transform: translate(-8px) skew(30deg);
  }
}
@keyframes breath-button {
  0% {
    box-shadow: 0px 2px 0px 0px #FFFECB inset, 0px -2px 0px 0px #FFFECB, 0px 0px 0px 0px rgba(254, 236, 34, 0.5);
  }
  80% {
    box-shadow: 0px 2px 0px 0px #FFFECB inset, 0px -2px 0px 0px #FFFECB, 0px 0px 0px 8px rgba(254, 236, 34, 0.1);
  }
  100% {
    box-shadow: 0px 2px 0px 0px #FFFECB inset, 0px -2px 0px 0px #FFFECB, 0px 0px 0px 6px rgba(254, 236, 34, 0);
  }
}
.dust {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150vw;
  height: 150vh;
  z-index: -1;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.dust-1 {
  position: absolute;
  width: 300%;
  height: 300%;
  background: url(/img/dust-1.png) repeat;
  background-size: 25%;
  animation: dust1 120s linear infinite;
}
.dust-2 {
  position: absolute;
  width: 300%;
  height: 300%;
  background: url(/img/dust-2.png) repeat;
  background-size: 25%;
  animation: dust2 200s linear infinite;
}
.dust-3 {
  position: absolute;
  width: 300%;
  height: 300%;
  background: url(/img/dust-3.png) repeat;
  background-size: 25%;
  animation: dust3 280s linear infinite;
}
@media (max-width: 780px) {
  .dust {
    display: none;
  }
}

@keyframes dust1 {
  0% {
    transform: translate(-59.5vw, 59.5vh);
  }
  100% {
    transform: translate(59.5vw, -59.5vh);
  }
}
@keyframes dust2 {
  0% {
    transform: translate(-59vw, 59vh);
  }
  100% {
    transform: translate(59vw, -59vh);
  }
}
@keyframes dust3 {
  0% {
    transform: translate(-58.5vw, 58.5vh);
  }
  100% {
    transform: translate(58.5vw, -58.5vh);
  }
}
/* Options */
.options-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.option-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.2s;
  transform: skew(-10deg);
}

.option-label:hover {
  background-color: rgba(0, 0, 0, 0.7);
  transform: skew(-10deg) scale(1.05);
}

.option-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-custom {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffcb05;
  border: 2px solid #fff;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.2s;
}

.checkbox-custom:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #e60012;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.option-label input[type=checkbox]:checked ~ .checkbox-custom:after {
  display: block;
}

.option-label input[type=checkbox]:checked ~ .checkbox-custom {
  background-color: #fff;
}

.option-text {
  font-size: 16px;
  text-shadow: 1 px 1 px 0 #000;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
}