@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 87% 112%;
  font-display: swap;
  src: url(c1195b639792200b4f72.woff2) format('woff2');
}

@keyframes pulse {

  0%,
  100% {
    animation-timing-function: ease-in;
  }

  50% {
    transform: scale(1.05);
  }
}

:root {
  --headline-hue: 200deg;
  --spacing: 60;
  --base-color: oklch(0.8 0.12 var(--headline-hue));
  --bg-color: oklch(from var(--base-color) 0.175 0.02 calc(h + var(--spacing)))
}

body {
  width: auto;
  height: 100%;
  margin: auto;
  display: flex;
  color: var(--base-color);
  background-color: var(--bg-color);
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'Merriweather';
}

button {
  width: max-content;
  height: 10rem;
  margin: auto;
  font-family: inherit;
  font-size: 3rem;
  border: solid var(--base-color) 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem 3rem;
  color: inherit;
  background-color: var(--bg-color);
  font-variation-settings: 'wght' 550, 'wdth' 93;
  animation: pulse 2s infinite;
  transition: color 150ms, backgrond-color 150ms, font-variation-settings 500ms, padding 300ms, animation 300ms;

  &:disabled {
    font-variation-settings: 'wght' 550, 'wdth' 93 !important;
    color: oklch(from var(--base-color) calc(l/2) calc(c/3) h) !important;
    border: solid oklch(from var(--base-color) calc(l/2) calc(c/3) h) 0.5rem;
    background-color: var(--bg-color) !important;
    animation: none;
  }
}

/* hover for desktops */
@media (hover: hover) and (pointer: fine) {
  button:hover {
    font-variation-settings: 'wght' 850, 'wdth' 112;
    color: var(--bg-color);
    background-color: var(--base-color);
    animation: none;
  }
}

button.is-active {
  font-variation-settings: 'wght' 850, 'wdth' 112;
  color: var(--bg-color);
  background-color: var(--base-color);
  animation: none;
}

img {
  vertical-align: middle;
}

#slot {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

#balance {
  margin: auto;
  font-size: 3.5rem;
  font-variation-settings: 'wght' 850, 'wdth' 100;
}

#reels {
  display: flex;
  width: 100vw;
  height: 100vw;
  max-height: calc(70vh - 50px - 40px);
  max-width: calc(70vh - 50px - 40px);
}

.reel {
  overflow: hidden;
  flex: 1 1 0;
  height: 100%;
  position: relative;
}

.reel>.icons {
  position: relative;
}

.reel>.icons>img {
  width: calc(100% + 6px);
  margin: -3px 0 0 -3px;
  height: auto;

  /* enable gpu accelaration, fixes iOS flicker */
  transform: translate3d(0, 0, 0);
}

#jackpot {
  color: #d5ad6d;
  font-size: 40px;
  text-align: center;
}

#slot.inverted .reel {
  transform: scaleY(-1);
}

#slot.inverted .reel>.icons>img {
  transform: scaleY(-1);
}