@font-face {
  font-family: "Benzin-Bold";
  src: url("../fonts/benzin-bold.eot"); /* IE 9 Compatibility Mode */
  src: url("../fonts/benzin-bold.eot?#iefix") format("embedded-opentype"),
    /* IE < 9 */ url("../fonts/benzin-bold.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/benzin-bold.woff") format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/benzin-bold.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/benzin-bold.svg#benzin-bold")
      format("svg"); /* Chrome < 4, Legacy iOS */
}

body {
  background: url(../img/fon.svg);
  font-family: "Benzin-Bold";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 90px;
}

h2 {
  font-size: 80px;
}

h3 {
  font-size: 46px;
}

h5 {
  font-size: 40px;
}

.text-3d-wrapper {
  position: relative;
  display: inline-block;
}

.text-3d {
  position: relative;
  /* Основной фон градиента */
  background: linear-gradient(
    to bottom,
    #ffbb00,
    #c18100,
    #8b3600
  ); /* сверху вниз */

  /* Показываем градиент только на тексте */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Chrome, Safari */

  /* Для Firefox */
  background-clip: text;
  color: transparent;
  text-align: center;
  z-index: 2;
}

.text-3d.shadow {
  position: absolute;
  top: 5px;
  z-index: 1;
  background: linear-gradient(to bottom, #8b3600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slotBLock_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  align-items: flex-end;
  margin-top: 50px;
}

.sloBlock_cowboy {
  position: absolute;
  z-index: -1;
  left: 20%;
  top: 0%;
}

.x200 {
  padding-right: 10%;
}

.logo {
  margin-bottom: -7%;
}

.slotBlock {
  width: 100%;
  background-image: url(../img/reel_full.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
  height: 100vh;
  overflow: hidden; /* важно, чтобы прятать вращение */
  display: flex;
  justify-content: center;
}

.carouselBlock {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 130px;
  margin-bottom: 65px;
  overflow: hidden;
  position: relative;
}

.carouselColumn {
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  height: 650px; /* задаём фиксированную высоту */
  /* overflow: hidden; */
  transform: translateY(-170%);
  position: relative;
}

/* Элемент */
.carouselItem {
  width: 151px;
  height: 130px;
  background: url(../img/wild.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 20px;
}

/* Анимация вращения */
@keyframes spin {
  0% {
    transform: translateY(-170%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes down {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.down {
  animation-name: down;
  animation-timing-function: linear;
  animation-duration: 0.5s;
}

/* Когда барабан крутится */
.carouselColumn.spinning {
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 0.4s; /* скорость вращения */
}

/* При остановке */
.carouselColumn.stop {
  animation-play-state: paused;
  transition: transform 1s ease-out; /* плавное замедление */
}

.high1 {
  background-image: url(../img/high_1.png);
}

.high2 {
  background-image: url(../img/high_2.png);
}

.high3 {
  background-image: url(../img/high_3.png);
}

.high4 {
  background-image: url(../img/high_4.png);
}

.low1 {
  background-image: url(../img/low_1.png);
}

.low3 {
  background-image: url(../img/low_3.png);
}

.low4 {
  background-image: url(../img/low_4.png);
}

.wild {
  background-image: url(../img/wild.svg) !important;
}

.loneOutlaw {
  background-image: url(../img/lone_outlaw.png);
}

.loneOutlawAnimated {
  background-image: url(../img/outlaw-win.gif);
}

.reelFx-outlaw_loop {
  background-image: url(../img/reelFx-outlaw_loop.gif);
  background-position: center;
  background-size: cover;
}

.outlaw_reels-reveal {
  background-image: url(../img/outlaw_reels-reveal.gif);
  left: 16px !important;
}

.outlaw_reels-end {
  background-image: url(../img/outlaw_reels-end.gif);
}

.outlaw_reels-end_static {
  background-image: url(../img/outlaw_reels-end_static.png);
}

.cylinder-load-6 {
  background-image: url(../img/cylinder-load-6.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire {
  top: 59% !important;
  left: 255px !important;
  width: 300px !important;
  height: 300px !important;
}

.cylinder-fire-6 {
  background-image: url(../img/cylinder-fire-6.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-5 {
  background-image: url(../img/cylinder-fire-5.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-4 {
  background-image: url(../img/cylinder-fire-4.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-3 {
  background-image: url(../img/cylinder-fire-3.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-2 {
  background-image: url(../img/cylinder-fire-2.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-1 {
  background-image: url(../img/cylinder-fire-1.gif);
  background-position: center;
  background-size: contain;
}

.cylinder-fire-0 {
  background-image: url(../img/cylinder-fire-0.gif);
  background-position: center;
  background-size: contain;
}

.outlaw_reels-fire-right-1 {
  background-image: url(../img/outlaw_reels-fire-right-1.gif);
  background-position: center;
  background-size: contain;
  top: -61px !important;
  left: 235px !important;
}
.outlaw_reels-fire-left-1 {
  background-image: url(../img/outlaw_reels-fire-left-1.gif);
  background-position: center;
  background-size: contain;
  top: -72px !important;
  left: -44px !important;
}

.magazine_6 {
  background-image: url(../img/magazine_6.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px !important;
  height: 200px !important;
  top: 73% !important;
  left: 303px !important;
}

.magazine_0 {
  background-image: url(../img/magazine_0.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px !important;
  height: 200px !important;
  top: 73% !important;
  left: 303px !important;
}

.fakeFire {
  position: absolute;
  height: 852px;
  width: 300px;
  top: -40px;
  z-index: 1;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}

.fakeMan {
  position: absolute;
  height: 852px;
  width: 720px;
  top: -40px;
  z-index: 2;
  left: 240px;
  background-position: left;
  background-size: auto;
  background-repeat: no-repeat;
}

.drum {
  z-index: 1000;
  width: 250px;
  height: 250px;
  position: absolute;
  top: 69%;
  left: 277px;
}

.numbers {
  position: absolute;
  width: 151px;
  display: none;
  flex-direction: row;
  justify-content: center;
  z-index: 6;
  left: 41%;
}

.numbers img {
  width: 33%;
}

.bullet {
  background-image: url(../img/bullet_impact_3.gif);
  background-position: center;
  background-size: contain;
}

#spinBtn {
  position: absolute;
  background: linear-gradient(to bottom, #ffbb00, #c18100, #8b3600);
  top: 60%;
  left: 44%;
  padding: 50px 50px;
  border-radius: 999px;
  z-index: 99999999;
}

.btnContainer {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.btn {
  width: 46%;
  color: #f7f402;
  font-size: 40px;
  background-repeat: no-repeat;
  padding: 5px;
  background-size: cover;
  line-height: 67px;
}

.shoot {
  background-image: url(../img/shoot.svg);
}

.claim {
  background-image: url(../img/claim.svg);
}

.tipicialBR {
  background-image: url(../img/duel.svg);
  background-repeat: no-repeat;
  background-position: center;
  margin: 120px 0;
  background-size: contain;
}

.tipicialBR h2 {
  font-size: 110px !important;
}

.duelBlocksWrapper {
  display: flex;
}

.duelBlock {
  width: 49%;
}

.duelBlock p {
  color: #ffffff;
  font-size: 30px;
}

.socialWrapper {
  display: flex;
}

.socialWrapper p {
  color: white;
  font-size: 30px;
}

.socialBlock {
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
}

.spinNow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinNow p {
  color: white;
  font-size: 50px;
  text-transform: uppercase;
  max-width: 950px;
}

.spinNowBtn {
  background-image: url(../img/shoot.svg);
  font-size: 76px;
  line-height: 90%;
  width: 67%;
  height: 213px;
  margin-bottom: 150px;
}

.end-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.blockWinsWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blockWinsItemWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.blockWinsItem {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.blockWinsItem img {
  max-width: none;
  width: 12.5%;
}

.blockWinsText {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blockWinsText h2 {
  text-transform: uppercase;
}

.blockWinsTextBtn {
  width: auto;
  background: linear-gradient(to bottom, #ffbb00, #c18100, #8b3600);
  border-radius: 15px;
  margin-top: 30px;
  padding: 5px 25px;
}

@media (max-width: 1500px) {
  .sloBlock_cowboy {
    left: 15%;
    top: 0%;
  }
}

@media (max-width: 1200px) {
  @keyframes spin {
    0% {
      transform: translateY(-120%);
    }
    100% {
      transform: translateY(100%);
    }
  }

  #spinBtn {
    top: 55%;
    left: 43%;
    padding: 30px 30px;
  }

  main {
    max-width: 720px;
  }

  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 46px;
  }

  h3 {
    font-size: 23px;
  }

  h5 {
    font-size: 24px;
  }

  .tipicialBR h2 {
    font-size: 66px !important;
  }

  .duelBlock p,
  .socialWrapper p {
    font-size: 18px;
  }

  .btn {
    font-size: 22px;
    line-height: 77px;
  }

  .spinNow p {
    font-size: 34px;
  }

  .spinNowBtn {
    font-size: 50px;
    width: 74%;
    height: 143px;
    line-height: 90%;
  }

  .carouselBlock {
    margin-top: 185px;
    margin-bottom: 140px;
  }

  .carouselItem {
    width: 110px;
    height: 110px;
    margin-bottom: 5px;
  }

  .carouselColumn {
    transform: translateY(-120%);
  }

  .fakeFire {
    height: 630px;
    width: 200px;
    background-size: cover;
  }

  .fakeMan {
    top: -32px;
    height: 562px;
    width: 562px;
    top: 0px;
    z-index: 2;
    left: 185px;

    background-size: cover;
  }

  .numbers {
    width: 95px;
  }

  .drum {
    width: 150px;
    height: 150px;
    top: 69%;
    left: 219px;
  }

  .cylinder-fire {
    width: 197px !important;
    height: 188px !important;
    top: 61% !important;
    left: 192px !important;
  }

  .outlaw_reels-fire-right-1 {
    top: -29px !important;
    left: 175px !important;
    height: 589px;
    width: 447px;
  }

  .outlaw_reels-fire-left-1 {
    top: -30px !important;
    height: 588px !important;
    width: 454px !important;
    left: -33px !important;
  }

  .cylinder-fire-2 {
    top: 62% !important;
    left: 199px !important;
  }

  .cylinder-fire-1 {
    top: 63% !important;
    left: 195px !important;
  }

  .outlaw_reels-end {
    background-image: url(../img/outlaw_reels-end.gif);
    left: 177px !important;
    height: 564px;
    width: 224px;
    top: -1px;
  }

  .magazine_0 {
    width: 130px !important;
    height: 130px !important;
    top: 72% !important;
    left: 228px !important;
  }

  .outlaw_reels-end_static {
    left: 177px !important;
    height: 564px;
    width: 224px;
    top: -1px;
  }

  .slotBLock_wrapper img {
    max-width: 360px;
  }

  .logo {
    margin-bottom: -15%;
  }
}

@media (max-width: 800px) {
  .slotBLock_wrapper img {
    max-width: 310px;
  }

  #spinBtn {
    top: 52%;
  }
}

@media (max-width: 380px) {
  @keyframes spin {
    0% {
      transform: translateY(-23%);
    }
    100% {
      transform: translateY(100%);
    }
  }

  #spinBtn {
    top: 45%;
    left: 38%;
    padding: 15px 15px;
  }
  main {
    max-width: 320px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 12px;
  }

  h5 {
    font-size: 24px;
  }

  .text-3d.shadow {
    top: 2px;
  }

  .slotBLock_wrapper img {
    max-width: 200px;
  }

  .carouselItem {
    width: 45px;
    height: 45px;
  }

  .carouselColumn {
    transform: translateY(-23%);
  }
  .carouselBlock {
    margin-top: 85px;
    margin-bottom: 70px;
  }

  .slotBlock {
    height: 45vh;
  }
  .btnContainer {
    flex-direction: column;
    align-items: center;
  }

  .tipicialBR h2 {
    font-size: 26px !important;
  }

  .socialWrapper {
    flex-direction: column;
    align-items: center;
  }

  .socialBlock {
    margin-bottom: 20px;
  }

  .fakeFire {
    height: 270px;
    width: 60px;
    top: -13px;
  }
  .numbers {
    width: 47px;
  }

  .fakeMan {
    height: 243px;
    width: 232px;
    top: 1px;
    left: 17px !important;
  }
  .drum {
    width: 60px;
    height: 60px;
    top: 71%;
    left: 107px;
  }
  .cylinder-fire {
    width: 81px !important;
    height: 81px !important;
    top: 63% !important;
    left: 97px !important;
  }

  .outlaw_reels-fire-right-1 {
    top: -13px !important;
    height: 258px !important;
    width: 201px !important;
    left: 85px !important;
  }

  .outlaw_reels-fire-left-1 {
    top: -20px !important;
    height: 264px !important;
    width: 193px !important;
    left: -2px !important;
  }

  .outlaw_reels-end {
    height: 244px;
    width: 80px;
    top: -1px;
    left: 86px !important;
  }

  .magazine_0 {
    width: 65px !important;
    height: 54px !important;
    top: 72% !important;
    left: 104px !important;
  }

  .outlaw_reels-end_static {
    height: 243px;
    width: 95px;
    top: 1px;
    left: 86px !important;
  }

  .btn {
    font-size: 16px;
    width: 60%;
    line-height: 125%;
    margin-bottom: 15px;
  }

  .tipicialBR {
    margin: 50px 0;
  }

  .duelBlocksWrapper {
    flex-direction: column;
    align-items: center;
  }

  .duelBlock img {
    width: 100px;
    height: 100px;
  }

  .duelBlock p,
  .socialWrapper p {
    font-size: 16px;
  }

  .socialBlock img {
    width: 130px;
  }

  .socialWrapper p {
    margin: 0 auto;
    width: 60%;
  }

  .spinNow p {
    font-size: 12px;
  }

  .spinNowBtn {
    font-size: 16px;
    width: 60%;
    line-height: 125%;
    margin-bottom: 15px;
    height: auto;
  }

  .slotBLock_wrapper img {
    max-width: 130px;
  }
  .sloBlock_cowboy {
    left: 9%;
    top: -10%;
  }
  .logo {
    margin-bottom: -26%;
    z-index: 9999;
    margin-right: 20px;
  }
}