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

#scaled-container {
  position: relative;
  width: 3846px;
  height: 2167px;
  transform-origin: top left;
}

.hand {
  position: absolute;
  z-index: 20;
  top: 290px;
  transform: scale(var(--x-scale), 1);
  transform-origin: center;
  animation-name: hand-wobble;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.hand.left {
  left: 715px;

  --x-scale: 1;
}

.hand.right {
  right: 715px;

  --x-scale: -1;
}

@keyframes hand-wobble {
  from {
    transform: scale(var(--x-scale), 1) rotate(10deg);
  }

  50% {
    transform: scale(var(--x-scale), 1) rotate(-10deg);
  }

  to {
    transform: scale(var(--x-scale), 1) rotate(10deg);
  }
}

.lockup {
  position: absolute;
  z-index: 20;
  top: 38px;
  left: 1246px;
}

.winner-side {
  display: none;
  position: absolute;
  z-index: 10;
  top: 366px;
}

.winner-side.left {
  left: 102px;
}

.winner-side.right {
  right: 102px;
}

.winner-big {
  display: none;
  position: absolute;
  z-index: 30;
  top: 373px;
  left: 267px;
  transform-origin: center;
  animation-name: winner-spin;
  animation-duration: .75s;
  animation-timing-function: ease-in-out;
}

.winner-prize {
  display: none;
  position: absolute;
  z-index: 25;
  top: 1000px;
  right: 300px;
  padding: 0 50px;
  transform: rotate(-15deg);
  transform-origin: top right;
  border: 40px solid var(--main-color, #ff2a00);
  border-radius: 500px;
  background: white;
  color: var(--main-color, #ff2a00);
  font-size: 140px;
  text-align: right;
  text-transform: uppercase;
}

@keyframes winner-spin {
  from {
    transform: scale(0) rotate(0);
  }

  to {
    transform: scale(1) rotate(360deg);
  }
}

.ticker {
  display: flex;
  position: absolute;
  z-index: 10;
  animation-duration: var(--ticker-duration, 5s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  color: white;
  font-size: 50px;
  line-height: 100px;
  white-space: pre;
}

.ticker.top {
  top: 0;
  animation-name: ticker-left;
}

.ticker.bottom {
  bottom: 0;
  animation-name: ticker-right;
}

@keyframes ticker-left {
  from {
    left: 0;
  }

  to {
    left: var(--ticker-offset);
  }
}

@keyframes ticker-right {
  from {
    right: 0;
  }

  to {
    right: var(--ticker-offset);
  }
}

.icons {
  position: absolute;
  z-index: 10;
  top: 460px;
  width: 818px;
  height: 1388px;
  overflow: hidden;
}

.icons.left {
  left: 525px;
}

.icons.center {
  left: 1517px;
}

.icons.right {
  left: 2509px;
}

.icons.left div {
  animation-duration: 4s;
}

.icons.center div {
  animation-duration: 5s;
}

.icons.right div {
  animation-duration: 6s;
}

.icons div {
  position: absolute;
  bottom: var(--icons-offset, 0);
  left: 0;
}

.icons.spinning div {
  animation-name: icons-spin;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.icons div img {
  display: block;
}

@keyframes icons-spin {
  from {
    bottom: var(--icons-offset);
  }

  to {
    bottom: var(--icons-target-offset);
  }
}