.RandomGameButton {
    --game-container-gradient-bg: linear-gradient(90deg, #111522, rgba(17, 21, 34, 0.5) 25%, rgba(17, 21, 34, 0) 50%, rgba(17, 21, 34, 0.5) 75%, #111522);
    --question-mark-color: #fff;
    --hexagon-mark-bg: linear-gradient(#171c2c, #05070b);
    --hexagon-mark-border-bg: linear-gradient(90deg, #ffcd36, #af841b);
    --emfe-w-casino-color-primary: #ffcd36;
    --emfe-w-categories-color-secondary: #af841b;
    --emfe-w-button-typography: #fff;
}.RandomGameWrapper {
    width: 100%;
    overflow: hidden;
    background: transparent;
    position: relative;
}.GameContainerGradient {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100%;
    background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);
    pointer-events: none;
    z-index: 1;
}.ButtonContainer {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}.Flip {
    animation-name: Flip, Blur;
    animation-duration: 0.75s, 3s;
    animation-iteration-count: infinite, 1;
}.QustionMark {
    position: relative;
    font-size: 80px;
    font-weight: 700;
    color: var(--emfe-w-color-white, #FFFFFF);
    z-index: 5;
    bottom: 20px;
    text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);
}.HexagonMark {
    position: absolute;
    width: 70px;
    height: 85px;
    background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
    clip-path: polygon(50% 0px, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}.HexagonMarkBorder {
    position: relative;
    display: flex
;
    justify-content: center;
    align-items: center;
    top: 5px;
    left: 5px;
    width: 60px;
    height: 75px;
    background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
    clip-path: polygon(50% 0px, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}.RandomGameCard {
    position: relative;
    width: 256px;
    height: 170px;
    border-radius: 5px;
    filter: blur(5px);
}.RandomGameCard .RandomGameVendor {
    position: absolute;
    font-size: 12px;
    bottom: 10px;
    left: 10px;
    color: var(--emfe-w-color-white, #FFFFFF);
}.RandomGameImage {
    width: 256px;
    height: 170px;
}
    .GamesContainer {
    display: flex;
    height: 400px;
    flex-flow: row;
    place-content: flex-start;
    align-items: center;
    gap: 20px;
}

    .GameCard {
      position: relative;
      width: 200px;
      height: 300px;
      flex-shrink: 0;
      transition: filter 0.4s, transform 0.4s;
      filter: blur(4px);
      transform: scale(0.9);
      opacity: 0.4;
      border-radius: 10px;
      overflow: hidden;
    }

    .GameCard img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .GameCard.active {
      filter: none;
      transform: scale(1.1);
      opacity: 1;
      z-index: 2;
    }

    .play-button {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #d4af37;
      color: black;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      display: none;
    }

    .GameCard.active .play-button {
      display: block;
    }

    .question-icon {
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      background: #f1c40f;
      color: #000;
      font-size: 30px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      box-shadow: 0 0 5px #000;
    }
	.ButtonWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}.ButtonContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 45px;
    width: 100%;
}.RandomGameButton {
    --game-container-gradient-bg: linear-gradient(90deg, #111522, rgba(17, 21, 34, 0.5) 25%, rgba(17, 21, 34, 0) 50%, rgba(17, 21, 34, 0.5) 75%, #111522);
    --question-mark-color: #fff;
    --hexagon-mark-bg: linear-gradient(#171c2c, #05070b);
    --hexagon-mark-border-bg: linear-gradient(90deg, #ffcd36, #af841b);
    --emfe-w-casino-color-primary: #ffcd36;
    --emfe-w-categories-color-secondary: #af841b;
    --emfe-w-button-typography: #fff;
}.ButtonIcon {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}.QustionMark {
    position: relative;
    font-size: 80px;
    font-weight: 700;
    color: var(--emfe-w-color-white, #FFFFFF);
    z-index: 5;
    bottom: 20px;
    text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);
}.QustionMark {
    color: var(--question-mark-color, #fff) !important;
    text-shadow: 0 .4rem 0 #000 !important;
}.HexagonMark {
    position: absolute;
    width: 70px;
    height: 85px;
    background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);
    clip-path: polygon(50% 0px, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}.HexagonMark {
    background: black !important;
}.HexagonMarkBorder {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5px;
    left: 5px;
    width: 60px;
    height: 75px;
    background: #ffcd36;
    clip-path: polygon(50% 0px, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}.RandomButton {
    font-size: 18px;
    text-transform: uppercase;
    width: max-content;
    border-radius: 5px;
    padding: 5px 25px;
    border: solid 3px #ffcd36;
    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
    opacity: 1;
    text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);
    animation: 3s linear 0s infinite normal none running ButtonEffect;
    background-image: linear-gradient(to right, #ffcd36, #af841b, #ffcd36, #D0046C);
    background-size: 300% 100%;
    cursor: pointer;
}




.RandomGameCard .RandomButton {
    padding: .5rem 1rem !important;
    white-space: nowrap;
    flex: 1;
}.RandomButtons {
    display: flex
;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
}.RandomGameDetails .RandomGameInfo {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 12px;
    font-weight: 400;
    border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
    text-align: center;
    margin: 4px 0;
    line-height: 14px;
    cursor: pointer;
}.RandomGameDetails {
    display: flex
;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
    font-size: 14px;
    width: 100%;
}



.ButtonIcon.FlipAndBlur {
  animation: flipSpin 2s ease-in-out forwards;
  filter: blur(4px);
}

@keyframes flipSpin {
  0% { transform: rotateY(0deg); filter: blur(0px); }
  50% { transform: rotateY(180deg); filter: blur(2px); }
  100% { transform: rotateY(360deg); filter: blur(4px); }
}



.RandomGameCard {
  position: relative;
  filter: blur(5px);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.RandomGameCard.TheRandomGame {
  position: absolute;
  left: 40%;
  transform: translateX(-50%) scale(1.1);
  filter: blur(0);
}



@keyframes ZoomFadeIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.95) translateY(0px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(-30px);
  }
}

.TheRandomGame {
  animation-name: ZoomFadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 1;
  filter: blur(0);
  cursor: pointer;
}

@media (max-width: 768px) {
.RandomGameCard.TheRandomGame {

  left: 20% !important;
}	 
}
	@keyframes SlideLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-12000px); /* bu değeri içeriğe göre ayarlayacağız */
  }
}

.GamesContainer.AnimatingScroll {
  animation: SlideLoop 2.2s linear forwards;
}