@charset "UTF-8";
@import url("../fonts/Rubik/index.css");
/**
  Нормализация блочной модели
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
  Убираем внутренние отступы слева тегам списков,
  у которых есть атрибут class
 */
:where(ul, ol):where([class]) {
  padding-left: 0;
}

/**
  Убираем внешние отступы body и двум другим тегам,
  у которых есть атрибут class
 */
body,
:where(blockquote, figure):where([class]) {
  margin: 0;
}

/**
  Убираем внешние отступы вертикали нужным тегам,
  у которых есть атрибут class
 */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}

/**
  Убираем стандартный маркер маркированному списку,
  у которого есть атрибут class
 */
:where(ul[class]) {
  list-style: none;
}

/**
  Обнуляем вертикальные внешние отступы параграфа,
  объявляем локальную переменную для внешнего отступа вниз,
  чтобы избежать взаимодействие с более сложным селектором
 */
p {
  --paragraphMarginBottom: 24px;
  margin-block: 0;
}

/**
  Внешний отступ вниз для параграфа без атрибута class,
  который расположен не последним среди своих соседних элементов
 */
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}

/**
  Упрощаем работу с изображениями
 */
img {
  display: block;
  max-width: 100%;
}

/**
  Наследуем свойства шрифт для полей ввода
 */
input,
textarea,
select,
button {
  font: inherit;
}

html {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  height: 100%;
  /**
    Плавный скролл
   */
  scroll-behavior: smooth;
}

body {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  min-height: 100%;
  /**
    Унифицированный интерлиньяж
   */
}

/**
  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
 */
svg * {
  transition-property: fill, stroke;
}

/**
  Удаляем все анимации и переходы для людей,
  которые предпочитают их не использовать
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes rotated_bouncing {
  0% {
    transform: translateY(0) rotateZ(19.22deg);
  }
  100% {
    transform: translateY(12px) rotateZ(19.22deg);
  }
}
@keyframes bouncing {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(12px);
  }
}
@keyframes shadow_pulse {
  0% {
    box-shadow: #4bc517 0px 0 12px 0px;
  }
  100% {
    box-shadow: #4bc517 0px 0 12px 16px;
  }
}
body {
  width: 100%;
  height: 100%;
  padding-left: 8.8vw;
}
@media only screen and (max-width: 768px) {
  body {
    padding: 0 12px;
  }
}

.background {
  position: fixed;
  z-index: 5;
  inset: 0;
}
.background__image {
  pointer-events: none;
  width: 130.6%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.background::after {
  content: "";
  z-index: 10;
  background: linear-gradient(270deg, rgba(30, 30, 29, 0) 10.85%, #1e1e1d 79.23%);
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px;
  height: 100%;
  width: 100%;
}

.decor {
  position: fixed;
  z-index: 10;
  width: 66.8%;
  top: -9.76%;
  right: -20%;
}
@media only screen and (max-width: 768px) {
  .decor {
    width: 119.41%;
    top: 61px;
    right: unset;
    left: -10px;
  }
}
.decor__scatter {
  pointer-events: none;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease-in;
}
.modal__window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 40.625vw;
  height: 65.234vh;
  transform: scale(0.3);
  transition: transform 0.25s ease-in;
}
@media only screen and (max-width: 768px) {
  .modal__window {
    width: 55%;
  }
}
@media only screen and (max-width: 576px) {
  .modal__window {
    width: 90%;
  }
}
.modal-opened {
  opacity: 1;
  z-index: 100;
}
.modal-opened .modal__window {
  transform: scale(1);
}
.modal__image-roll {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal__image-gift {
  width: 74.53%;
  max-height: 65.27%;
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: -18%;
}
.modal__link {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.15vw;
  border: 0.2083vw solid #1e1e1d;
  background: #ffbc00;
  width: 38.63%;
  font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #1e1e1d;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-size: min(3.5vh, 2.5vw);
  line-height: 175%;
}
@media only screen and (max-width: 1024px) {
  .modal__link {
    padding: 10px 24px;
    width: unset;
    border: 3px solid #1e1e1d;
    font-size: 32px;
    line-height: normal;
    border-radius: 31px;
  }
}

.wrapper {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3.51vh;
  width: max(520px, 48.06vw);
  height: 100vh;
}
@media only screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
  }
}
.wrapper .hero {
  display: flex;
  flex-direction: column;
  padding-top: 8.7vh;
  gap: 7.9vh;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .wrapper .hero {
    padding-top: 81px;
  }
}
.wrapper .hero__link {
  display: flex;
  width: 28.9%;
  aspect-ratio: 40/7;
  flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .wrapper .hero__link {
    width: 200px;
  }
}
.wrapper .hero__logo {
  width: 100%;
  height: 100%;
}
.wrapper .hero__title {
  font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #fff;
  text-align: center;
  font-style: italic;
  font-size: max(32px, 2.74vw);
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .wrapper .hero__title {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #1e1e1d;
    font-weight: 800;
    line-height: normal;
  }
}
.wrapper .reel {
  height: 100%;
  overflow: hidden;
  padding-bottom: 5vh;
}
@media only screen and (max-width: 576px) {
  .wrapper .reel {
    overflow: unset;
    padding: 0;
  }
}
.wrapper .reel__inner {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  position: relative;
}
@media only screen and (max-width: 576px) {
  .wrapper .reel__inner {
    min-width: 258px;
  }
}
.wrapper .reel__frame {
  max-height: 100%;
  overflow: hidden;
  position: relative;
}
.wrapper .reel__image {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.wrapper .reel__screen {
  position: absolute;
  top: 5.6%;
  left: 50%;
  transform: translateX(-50%);
  height: 86.64%;
  aspect-ratio: 639/402;
  padding: 2.73%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}
.wrapper .reel__column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 10.33%;
  transition: all 0.4s ease-in-out;
}
.wrapper .reel__column-slide-out {
  transform: translateY(120%);
}
.wrapper .reel__column-slide-in {
  transform: translateY(-120%);
}
.wrapper .reel__cell {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
.wrapper .reel__cell-highlight::before {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  border-radius: 6%;
  outline: 0.5vh solid #ffbc00;
}
.wrapper .reel__cell-y-gem {
  background: url("../images/9a71529b459bbe5bc09bceccd71168792960251e.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-r-gem {
  background: url("../images/4271a6667e08a1c54acc8c3a629a7f58b980df0e.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-p-gem {
  background: url("../images/7086830a1c0156f0c784aa16a8c22ef7a5b45d99.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-b-gem {
  background: url("../images/1b635215e773287b834a408ebacc2f33617ef269.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-g-gem {
  background: url("../images/61c56a488451775250f2aa425b60da8ee1f834e1.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-scatter {
  background: url("../images/32ba8eb1324bfd10e7b1667ea0c67a9dcdd60228.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-ring {
  background: url("../images/c9d96a00503e4bf6e67913b34707366e5e9037da.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-cup {
  background: url("../images/c6780e1e9e8d76a65986ab77e69502da3b19acd8.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-crown {
  background: url("../images/eda7c6db61ba877fd3f05a40bc75b4f444922957.png") 50%/contain no-repeat;
}
.wrapper .reel__cell-hourglass {
  background: url("../images/a6208be60e79d3e1ce5f39181449304b23bb5bb0.png") 50%/contain no-repeat;
}
.wrapper .play {
  position: fixed;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 576px) {
  .wrapper .play {
    position: static;
  }
}
.wrapper .play__button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  aspect-ratio: 1/1;
  height: 100%;
  max-height: 27.44%;
  border-radius: 1000px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease-in;
}
@media only screen and (max-width: 576px) {
  .wrapper .play__button {
    max-height: unset;
    height: 174px;
  }
}
.wrapper .play__button:hover {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.wrapper .play__button.pressed {
  transform: scale(0.3);
  opacity: 0;
}
.wrapper .play__button-text {
  width: 44.6%;
  height: 18.3%;
}
.wrapper .play__button-background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=index.css.map */