/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v3/gyByhwUxId8gMEwYGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v3/gyByhwUxId8gMEwSGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v3/gyByhwUxId8gMEwcGFWNOITd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.bg-gray {
  background: #27272A;
}

@media (min-width:1200px) {
  .rounded-lg-5 {
    border-radius: 2rem !important
  }

  .f57 {
    font-size: 57px;
  }

  .f80 {
    font-size: 80px;
  }

  .f128 {
    font-size: 128px;
  }

}

@media (max-width:338px) {
  .logo-nav-img {
    width: 200px !important;
    height: auto;
  }
}

.link-active {
  color: var(--bs-warning) !important;
}

.f20 {
  font-size: 20px;
}

.btn-link {
  color: #ffffff85;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--bs-warning);
}

.btn-link-active {
  color: var(--bs-warning);
  text-decoration: none;
}



body {
  --space: 1rem;

}

.marquee {
  --duration: 25s;
  --gap: var(--space);

  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);

}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
  margin-bottom: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee__group img {
  max-width: clamp(10rem, 1rem + 28vmin, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}

.marquee--borders {
  border-block: 3px solid dodgerblue;
  padding-block: 0.75rem;
}

.marquee--reverse .marquee__group {
  animation-delay: calc(var(--duration) / -2);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.game-thumb:hover {
  transform: scale(105%);
}

.h-500px {
  min-height: 500px;
}

.w-60vh {
  width: 60vh;
}

.w-50vh {
  width: 50vh;
}


.bg-y-gradient {
  background: radial-gradient(50% 50% at 50% 50%, #fbf38b96 0%, rgb(251 243 139 / 5%) 65.38%, rgb(0 0 0 / 0%) 100%);
}



/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--bs-warning) var(--bs-body-bg);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: var(--bs-body-bg);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--bs-warning);
  border-radius: 10px;
  border: 3px solid #ffffff;
}

.btn-gray:focus {
  background-color: var(--bs-btn-hover-bg)
}

.bg-2 {
  color: #1ce262;
}

.bg-3 {
  color: #ff8b00;
}

@media (min-width: 768px) {
  .md-328-height {
    min-height: 328px;
  }
}














.game-container {
  overflow: hidden;
  border-radius: 18px;
}

.game-iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 500px;
}

.game-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#game {
  margin: auto;
  overflow: hidden
}

#embed,
iframe {
  width: 100%;
  overflow: hidden
}

#loader {
  position: relative;
  overflow: hidden;
  height: 500px;
  margin: auto;
  color: #fff;
  text-align: left
}

.preview #playGame {
  height: 100%;
  text-align: center;
  margin: auto;
  cursor: pointer
}

.preview .noglow {
  width: 100%;
  height: auto;
  max-width: 900px;
  opacity: 0.8
}

.preview .glow {
  width: 100%;
  max-width: 815px;
  text-align: center;
  filter: blur(15px) brightness(1.2);
  opacity: 0.8
}

.preview .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column
}

.preview .playimg {
  overflow: hidden;
  width: 190px;
  margin: 50px auto 0 auto;
  border: solid 2px rgba(255, 255, 255, 0.4);
  border-radius: 20px
}

.playBT {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 60px;
  padding: 0 20px;
  margin: 20px auto 50px auto;
  border-radius: 30px;
  background-color: #222;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
  transition: all 400ms cubic-bezier(.47, 1.64, .41, .8);
}

.playBT span {
  margin: 0 10px;
  color: #f3f3f3;
  font-size: 19px;
  line-height: 19px;
  white-space: nowrap;
  font-weight: 700
}

.playBT .icon-arrow {
  font-size: 30px;
  transition: all 200ms ease
}

@keyframes flick {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 1
  }
}

.playBT:hover {
  transform: scale(1.1)
}

.fullscreen {
  object-fit: contain;
  user-select: text;
  position: fixed !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  inset: 0px !important;
  margin: 0px !important;
}

#fullscreenDiv {
  display: none;
  position: static;
  height: 20%;
  padding: 20px;
}