/* line 3, app/assets/stylesheets/account_button.scss */
.account-button.balance-value {
  transition: all .2s ease-in-out;
}

/* line 7, app/assets/stylesheets/account_button.scss */
.account-button.initial {
  background-color: #353535;
}

/* line 10, app/assets/stylesheets/account_button.scss */
.account-button.initial .balance-value {
  color: #0AEB88;
}

/* line 14, app/assets/stylesheets/account_button.scss */
.account-button.initial #player-balances-cash-icon,
.account-button.initial #player-balances-credits-icon {
  color: #0AEB88;
  --bg-color: #353535;
}

/* line 21, app/assets/stylesheets/account_button.scss */
.account-button.warning {
  background-color: #000000;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-stage-3 1250ms linear infinite;
}

/* line 26, app/assets/stylesheets/account_button.scss */
.account-button.warning .balance-value {
  color: #FF281D;
}

/* line 30, app/assets/stylesheets/account_button.scss */
.account-button.warning #player-balances-cash-icon,
.account-button.warning #player-balances-credits-icon {
  color: #FF281D;
}

/* line 35, app/assets/stylesheets/account_button.scss */
.account-button.warning #player-balances-credits-icon {
  animation: shakeABitFast 2000ms ease-in-out infinite;
  --bg-color: #000000;
}

/* line 42, app/assets/stylesheets/account_button.scss */
.account-button.updating {
  background-color: #0aeb88 !important;
  outline-color: #0aeb88;
  border: 2px solid #002b0c;
  box-shadow: 0 0 10px 0 #002b0c inset;
  color: #353535;
}

/* line 49, app/assets/stylesheets/account_button.scss */
.account-button.updating .balance-value {
  color: #353535;
}

/* line 53, app/assets/stylesheets/account_button.scss */
.account-button.updating #player-balances-credits-icon {
  color: #353535;
  --bg-color: #0aeb88;
}

@keyframes animate-stage-1 {
  100%,
0% {
    background: #002b0c;
    outline-color: #0aeb88;
    border: 2px solid #0aeb88;
    box-shadow: 0 0 6px 0 #00ff74 inset;
    text-shadow: none;
  }
  50% {
    background: #002b0c;
    outline-color: #0aeb88;
    border: 2px solid #0aeb88;
    box-shadow: 0 0 10px 0 #00ff74 inset;
    text-shadow: none;
  }
}

@keyframes animate-stage-2 {
  0% {
    border: 2px solid #fae187;
    box-shadow: 0 0 1px #fae187, 0 0 1px #fae187;
    outline: 1px solid transparent;
    outline-offset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) -21.37%, rgba(253, 192, 137, 0.4) 120.36%);
  }
  50% {
    outline-color: #fae187;
    border: 2px solid #fae187;
    box-shadow: 0 0 10px 0 #ffd400, 0 0 5px 0 #ffd400;
    outline-offset: 0;
    text-shadow: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) -21.37%, rgba(253, 192, 137, 0.4) 120.36%);
  }
  100% {
    border: 2px solid #fae187;
    box-shadow: 0 0 10px #fae187, 0 0 5px #fae187;
    outline: 1px solid transparent;
    outline-offset: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) -21.37%, rgba(253, 192, 137, 0.4) 120.36%);
    @media screen and (max-width: 999px) {
      outline-offset: 5px;
    }
  }
}

@keyframes animate-stage-3 {
  0% {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) -21.37%, rgba(251, 2, 2, 0.4) 120.36%);
    border: 2px solid #ff9090;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 var(--box-blur) var(--glow), 0 0 var(--box-blur) var(--glow);
    outline: 1px solid transparent;
    outline-offset: 0;
    text-shadow: none;
  }
  50% {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) -21.37%, rgba(251, 2, 2, 0.4) 120.36%);
    outline-color: #ff9090;
    border: 2px solid #ff9090;
    outline-offset: 0px;
    box-shadow: 0px 0px 7.19px 0px #ff0000, 0px 0px 14.39px 0px #ff0000, 0px 0px 50.35px 0px #ff0000, 0px 0px 40px 0px #ff0000 inset;
  }
  100% {
    border: 2px solid #ff9090;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 var(--box-blur) var(--glow), 0 0 var(--box-blur) var(--glow);
    outline: 1px solid transparent;
    outline-offset: 10px;
    text-shadow: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) -21.37%, rgba(251, 2, 2, 0.4) 120.36%);
  }
}

/* line 172, app/assets/stylesheets/account_button.scss */
.balance-fill-pulse.initial {
  fill: #0aeb88;
}

/* line 175, app/assets/stylesheets/account_button.scss */
.balance-fill-pulse.immediate {
  fill: #ff0000;
}

/* line 181, app/assets/stylesheets/account_button.scss */
.balance-stroke-pulse.initial {
  stroke: #0aeb88;
}

/* line 184, app/assets/stylesheets/account_button.scss */
.balance-stroke-pulse.immediate {
  stroke: #ff0000;
}

@keyframes animate-fill {
  0% {
    fill: #ff7139;
  }
  25% {
    fill: rgba(255, 113, 57, 0.5);
  }
  50% {
    fill: rgba(255, 113, 57, 0.5);
  }
  100% {
    fill: #ff7139;
  }
}

@keyframes animate-stroke {
  0% {
    stroke: #ff7139;
  }
  25% {
    stroke: rgba(255, 113, 57, 0.5);
  }
  50% {
    stroke: rgba(255, 113, 57, 0.5);
  }
  100% {
    stroke: #ff7139;
  }
}

/* line 219, app/assets/stylesheets/account_button.scss */
.fast-shake {
  animation: shakeABit 5000ms ease-in-out infinite;
}

/* line 222, app/assets/stylesheets/account_button.scss */
.immediate-shake {
  animation: shakeABitFast 2000ms ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(0px, -1px) rotate(0deg);
  }
  30% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(0px, -1px) rotate(0deg);
  }
  60% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  80% {
    transform: translate(0px, -1px) rotate(0deg);
  }
  90% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -1px) rotate(-1deg);
  }
}

@keyframes shakeABit {
  0% {
    transform: translate(0px, -5px) rotate(10deg);
  }
  3% {
    transform: translate(0px, -5px) rotate(-10deg);
  }
  5% {
    transform: translate(2px, -5px) rotate(10deg);
  }
  8% {
    transform: translate(-2px, -5px) rotate(-10deg);
  }
  10% {
    transform: translate(2px, -5px) rotate(10deg);
  }
  12% {
    transform: translate(0px, -3px) rotate(0deg);
  }
  15%,
100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes shakeABitFast {
  0% {
    transform: translate(0px, -5px) rotate(10deg);
  }
  6.5% {
    transform: translate(0px, -5px) rotate(-10deg);
  }
  10.5% {
    transform: translate(2px, -5px) rotate(10deg);
  }
  16.5% {
    transform: translate(-2px, -5px) rotate(-10deg);
  }
  20.5% {
    transform: translate(2px, -5px) rotate(10deg);
  }
  24.5% {
    transform: translate(0px, -3px) rotate(0deg);
  }
  32.5%,
100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "../stylesheets/components/modal.scss";
@import "../stylesheets/pages/wagers.scss";

@layer base {
  :root {
    --font-poppins: var(--poppins-default);

    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 154, 92%, 48%;
    --primary-foreground: 0, 0%, 16%;

    --secondary: 17, 100%, 61%;
    --secondary-foreground: 0, 0%, 16%;

    --tertiary: 42, 100%, 54%;
    --tertiary-foreground: 0, 0%, 16%;

    --white: 0, 0%, 100%;
    --white-foreground: 0, 0%, 16%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --bordered: 0, 0%, 100%;
    --bordered-foreground: 0, 0%, 16%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 154, 92%, 48%;
    --primary-foreground: 0, 0%, 16%;

    --secondary: 17, 100%, 61%;
    --secondary-foreground: 0, 0%, 16%;

    --tertiary: 42, 100%, 54%;
    --tertiary-foreground: 0, 0%, 16%;

    --white-foreground: 0, 0%, 16%;
    --white: 0, 0%, 100%;

    --bordered: 0, 0%, 100%;
    --bordered-foreground: 0, 0%, 16%;
    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  turbo-cable-stream-source {
    display: none;
  }

  turbo-frame {
    display: contents;
  }

  /* Focus Ring */
  [type='text']:focus,
  [type='email']:focus,
  [type='url']:focus,
  [type='password']:focus,
  [type='number']:focus,
  [type='date']:focus,
  [type='datetime-local']:focus,
  [type='month']:focus,
  [type='search']:focus,
  [type='tel']:focus,
  [type='time']:focus,
  [type='week']:focus,
  [multiple]:focus,
  textarea:focus,
  select:focus {
    --tw-ring-color: #0AEB88;
    border-color: var(--tw-ring-color);
  }

  #horseplay-credits-button,
  #horseplay-cash-button {
    @apply flex py-2 px-3 gap-2 bg-[#353535] rounded-full justify-center items-center relative max-h-[36px] lg:max-h-[42px];
  }

  .password-validation-valid::before {
    content: "✓";
    @apply text-green-500 font-bold mr-2;
  }

  .password-validation-invalid:before {
    content: "✗";
    @apply text-red-500 font-bold mr-2;
  }

  header.site-header {
    background-color: transparent;
  }

  body {
    font-feature-settings: 'rlig' 1, 'calt' 1;
    color: #fff;
    background: #020202;
  }

  main.static-page {
    width: 860px;
    margin: 90px auto;
  }

  .static-page h1 {
    @apply text-4xl font-bold mb-5;
  }

  .static-page h2 {
    @apply text-3xl font-bold mb-5;
  }

  .static-page h3 {
    @apply text-2xl font-bold mb-5;
  }

  .static-page h4 {
    @apply text-xl font-bold mb-5;
  }

  .static-page p {
    @apply mb-5;
  }

  .static-page img {
    @apply block my-5;
  }

  .static-page a {
    @apply text-[#0aeb88] underline;
  }

  .static-page a:hover {
    color: var(--electric-orange);
  }

  .static-page .text-lime {
    color: var(--lime);
  }

  .basic-page {
    @apply bg-black flex flex-col mx-auto p-4 lg:p-8 lg:items-center lg:my-auto lg:border lg:border-neutral-600 lg:rounded-xl z-0 md:w-[496px] md:min-h-[650px]
  }

  .basic-page h3 {
    @apply text-3xl font-bold mb-2 block w-full;
  }

  .basic-page-container {
    @apply flex flex-col flex-1 relative md:w-[430px];
  }

  .basic-page-container < div {
    @apply flex flex-col
  }

  .basic-page form {
    display: contents;
  }

}

@layer utilities {
  .masonry {
    column-gap: 1.5em;
    column-count: 1;
  }
  .masonry-sm {
    column-gap: 1.5em;
    column-count: 2;
  }
  .masonry-md {
    column-gap: 1.5em;
    column-count: 3;
  }
  .break-inside {
    break-inside: avoid;
  }
}

@layer components {
  .app-label {
    @apply text-[12px] text-[#999999] font-bold leading-4 uppercase pb-[5px];
  }
  .app-error {
    @apply text-red-500 text-sm font-semibold pt-[5px];
  }
  .app-input {
    @apply dark:bg-[#222222] p-2 rounded-xl block w-full border-2 border-neutral-600 shadow-sm focus:outline-none focus:border-green-500;
  }
  .app-input-error {
    @apply placeholder-red-500 border-2 border-red-500 focus:border-red-500 focus:ring-red-500;
  }
  .app-input-success {
    @apply placeholder-green-700 border-2 border-green-500 focus:border-green-500;
  }
  .app-input-cta {
    @apply dark:bg-[#444444] cursor-pointer flex justify-center items-center rounded-xl border border-[#444444] text-center shadow-sm font-semibold;
  }
  .app-container {
    @media only screen and (min-width: 992px) {
      padding: 0 20px;
    }
    max-width: 1366px;
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
  }

  .button-green {
    @apply text-base w-full rounded-[12px] text-center font-semibold p-[0.75rem] bg-[#00FF8F] text-black cursor-pointer grow;
  }
  .button-primary {
    @apply text-base text-center font-semibold leading-6 text-[#000000] bg-[#0AEB88] rounded-[50px] py-3 px-8 cursor-pointer;
  }
  .button-dark {
    @apply text-base text-center font-semibold leading-6 text-[#FFFFFF] bg-[#222222] rounded-[50px] py-3 px-8 cursor-pointer;
  }
  .button-white {
    @apply text-base font-semibold leading-6 text-black bg-white rounded-[50px] py-3 px-8 cursor-pointer;

    &:disabled {
      @apply text-base font-semibold leading-6 text-[#b3b3b3] bg-[#f2f2f2] rounded-[50px] py-3 px-8 pointer-events-none;
    }
  }
  .button-disabled {
    @apply opacity-[20%] cursor-not-allowed;
  }
  /* Button white round with BEM-style variants */
  .button-round-compact {
    @apply border-2 font-bold leading-tight text-[12px] px-4 py-1 rounded-full dark:text-black capitalize cursor-pointer;

    &:disabled {
      @apply opacity-[20%] cursor-not-allowed;
    }
  }
  .button-round {
    @apply border-2 font-bold leading-tight text-[14px] px-4 py-2 rounded-full dark:text-black capitalize cursor-pointer;

    &:disabled {
      @apply opacity-[20%] cursor-not-allowed;
    }
  }
  .button-round--white {
    @apply bg-[#FFFFFF];

    &:hover {
      @apply bg-[#00FF8F];
    }
  }
  .button-round--green {
    @apply bg-[#00FF8F];
  }
  .app-link {
    @apply text-primary underline underline-offset-2;
  }
  .landing-page-header {
    @apply text-[40px] leading-[40px] lg:text-[64px] lg:leading-[65px] font-semibold;
  }
  .primary-header {
    @apply text-center text-3xl lg:text-4xl font-bold my-4
  }
}

.coinLoadingIn {
  width: 0;
  animation: expand 0.5s ease-in forwards;
  @media screen and (min-width: 1024px) {
    animation: expand-fullscreen 0.5s ease-in forwards;
}
}

.coinLoadingOut {
  width: 36px;
  animation: shrink 0.5s ease-in forwards;
  @media screen and (min-width: 1024px) {
    width: 42px;
    animation: shrink-fullscreen 0.5s ease-in forwards;
  }
}

@keyframes expand {
  0% {
    width: 0;
  }
  100% {
    width: 36px;
  }
}
@keyframes expand-fullscreen {
  0% {
    width: 0;
  }
  100% {
    width: 42px;
  }
}

@keyframes shrink {
  0% {
    width: 36px;
  }
  100% {
      width: 0;
      display: none;
  }
}
@keyframes shrink-fullscreen {
  0% {
      width: 42px;
  }
  100% {
      width: 0;
      display: none;
  }
}

.minimizeButton {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.bspot-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  overflow: hidden;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.bspot-modal-overlay.hidden {
  display: none;
}

.bspot-modal-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #121212;
  width: 100%;
  padding: 1.25rem;
  border-radius: 0.5rem;
  text-align: left;
  max-height: 90vh;
  overflow: hidden auto;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05),rgba(255, 255, 255, 0.05));
}

@media only screen and (min-width: 1024px) {
  .bspot-modal-box {
    min-width: 700px;
    padding: 2rem;
  }
}

.bspot-modal_content {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  background: transparent;
  webkitoverflowscrolling: touch;
  border-radius: 4px;
  outline: none;
  max-height: 90vh;
  overflow: hidden;
  /*::-webkit-scrollbar {*/
  /*  display: none; !* Hide scrollbar for Chrome, Safari and Opera *!*/
  /*}*/
}

@media only screen and (max-width: 620px) {
  .bspot-modal_content {
    left: 50%;
    transform: translateX(-50%);
    right: 0px;
    padding: 0px;
    width: 90vw;
  }
}

.toast-info {
  border-color: #fde989;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) -21.37%, hsla(28, 97%, 76%, .4) 120.36%), #572602;
  box-shadow: 0 0 26.348px 0 #f80, 0 0 7.528px 0 #f80, 0 0 3.764px 0 #f80, inset 0 0 15.699px 0 #ffd400;
}

.toast-success {
  border-color: #0aeb88;
  background: #002b0c;
  box-shadow: 0px 0px 20.93px 0px #00ff74 inset;
}

.toast-error {
  border-color: #ffffff;
  background: #ffffff;
}

details summary::-webkit-details-marker {
  display:none;
}

details summary::-webkit-details-marker {
  display:none;
}
/* line 1, app/assets/stylesheets/components/modal.scss */
.modal-button {
  font-size: 16px;
  width: 100%;
  border-radius: 12px;
  flex-grow: 1;
  text-align: center;
  font-weight: 600;
  padding: 0.75rem;
}

@media (min-width: 48rem) {
  /* line 1, app/assets/stylesheets/components/modal.scss */
  .modal-button {
    width: 50%;
  }
}

/* line 14, app/assets/stylesheets/components/modal.scss */
.modal-button--white {
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
}

/* line 20, app/assets/stylesheets/components/modal.scss */
.modal-button--green {
  background-color: #00FF8F;
  color: #000000;
  cursor: pointer;
}

/* line 26, app/assets/stylesheets/components/modal.scss */
.modal-button--dark-gray {
  background-color: #2D2D30;
  color: #ffffff;
  cursor: pointer;
}

/* line 32, app/assets/stylesheets/components/modal.scss */
.modal-button--disabled {
  color: #b3b3b3;
  background-color: #f2f2f2;
  pointer-events: none;
}
/* TODO: copied verbatim from Next app, should be refactored into partials and Tailwind classes */
/* line 3, app/assets/stylesheets/game_list.scss */
.game-list {
  min-height: 168px;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: top right;
}

@media screen and (min-width: 1200px) {
  /* line 3, app/assets/stylesheets/game_list.scss */
  .game-list {
    min-height: 252px;
  }
}

/* line 12, app/assets/stylesheets/game_list.scss */
.game-list.xl {
  min-height: 187px;
}

@media screen and (min-width: 1200px) {
  /* line 12, app/assets/stylesheets/game_list.scss */
  .game-list.xl {
    min-height: 256px;
  }
}

/* line 18, app/assets/stylesheets/game_list.scss */
.game-list .category-name {
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 16px;
}

@media screen and (min-width: 1200px) {
  /* line 18, app/assets/stylesheets/game_list.scss */
  .game-list .category-name {
    margin-bottom: 8px;
  }
}

/* line 26, app/assets/stylesheets/game_list.scss */
.game-list .category-icon {
  position: absolute;
  top: -28px;
  right: 5px;
  width: 65px;
  height: 65px;
  overflow: hidden;
}

@media screen and (min-width: 1200px) {
  /* line 26, app/assets/stylesheets/game_list.scss */
  .game-list .category-icon {
    width: 88px;
    height: 88px;
    top: -35px;
    right: 20px;
  }
}

/* line 39, app/assets/stylesheets/game_list.scss */
.game-list .category-icon img {
  width: 100%;
  height: 100%;
}

/* line 44, app/assets/stylesheets/game_list.scss */
.game-list .nav-button {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background-color: unset;
  border: unset;
  width: 60px;
  height: 60px;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: url('data:image/svg+xml,<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Group 157"><circle id="Ellipse 88" cx="25.2166" cy="25.2166" r="25.2166" transform="rotate(-180 25.2166 25.2166)" fill="black"/><path id="Arrow 1" d="M15.7129 24.5094C15.3224 24.9 15.3224 25.5331 15.7129 25.9237L22.0768 32.2876C22.4674 32.6781 23.1005 32.6781 23.4911 32.2876C23.8816 31.8971 23.8816 31.2639 23.4911 30.8734L17.8342 25.2166L23.4911 19.5597C23.8816 19.1692 23.8816 18.536 23.4911 18.1455C23.1005 17.755 22.4674 17.755 22.0768 18.1455L15.7129 24.5094ZM34.5994 24.2166L16.42 24.2166V26.2166L34.5994 26.2166V24.2166Z" fill="%230AEB88"/></g></svg>') no-repeat;
}

/* line 56, app/assets/stylesheets/game_list.scss */
.game-list .nav-button:disabled {
  cursor: auto;
  pointer-events: none;
}

/* line 60, app/assets/stylesheets/game_list.scss */
.game-list .nav-button.prev {
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

/* line 65, app/assets/stylesheets/game_list.scss */
.game-list .nav-button.next {
  top: 50%;
  right: 16px;
  transform: translateY(50%);
  rotate: 180deg;
}

/* line 73, app/assets/stylesheets/game_list.scss */
.game-list:hover .nav-button {
  opacity: 1;
}

/* line 75, app/assets/stylesheets/game_list.scss */
.game-list:hover .nav-button:disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

/* line 82, app/assets/stylesheets/game_list.scss */
.game-list .slide {
  display: flex;
  width: auto;
  height: auto;
  margin-left: 16px;
}

/* line 87, app/assets/stylesheets/game_list.scss */
.game-list .slide:first-child {
  margin-left: 12px;
}

@media screen and (min-width: 992px) {
  /* line 87, app/assets/stylesheets/game_list.scss */
  .game-list .slide:first-child {
    margin-left: 20px;
  }
}

/* line 93, app/assets/stylesheets/game_list.scss */
.game-list .slide:last-child {
  margin-right: 12px;
}

@media screen and (min-width: 992px) {
  /* line 93, app/assets/stylesheets/game_list.scss */
  .game-list .slide:last-child {
    margin-right: 20px;
  }
}
/* TODO: copied verbatim from Next app, should be refactored into partials and Tailwind classes */
/* line 3, app/assets/stylesheets/game_tile.scss */
.game-tile {
  position: relative;
  box-sizing: border-box;
  width: 126px;
  height: 126px;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  border-radius: 16px;
  background-image: linear-gradient(#121212, #121212), linear-gradient(179.87deg, #ffff72 0.1%, #fe9a03 13.28%, #feffc9 29.37%, #fec103 44.5%, #fea501 51.02%, #fc9001 66.86%, #fff3b7 75.74%, #fb7802 84.81%, #f99602 99.87%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.5s ease;
}

@media screen and (min-width: 768px) {
  /* line 3, app/assets/stylesheets/game_tile.scss */
  .game-tile {
    width: 150px;
    height: 150px;
  }
}

@media screen and (min-width: 1200px) {
  /* line 3, app/assets/stylesheets/game_tile.scss */
  .game-tile {
    width: 216px;
    height: 216px;
  }
}

/* line 39, app/assets/stylesheets/game_tile.scss */
.game-tile.margin-top {
  margin-top: 16px;
}

/* line 42, app/assets/stylesheets/game_tile.scss */
.game-tile.xl-tile {
  width: 194px;
  height: 143px;
}

@media screen and (min-width: 1200px) {
  /* line 42, app/assets/stylesheets/game_tile.scss */
  .game-tile.xl-tile {
    width: 300px;
    height: 220px;
  }
}

/* line 50, app/assets/stylesheets/game_tile.scss */
.game-tile.full-tile {
  width: 100%;
  height: auto;
}

/* line 54, app/assets/stylesheets/game_tile.scss */
.game-tile .badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 11px;
  font-weight: 500;
  color: white;
  border-radius: 16px;
  border: 1px solid white;
  background-color: black;
  box-shadow: rgba(0, 0, 0, 0.4) 0 1.59364px 3.18728px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* line 71, app/assets/stylesheets/game_tile.scss */
.game-tile img {
  color: transparent;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #121212;
  cursor: pointer;
  filter: contrast(1.3);
}

/* line 82, app/assets/stylesheets/game_tile.scss */
.game-tile-ghost {
  position: relative;
  box-sizing: border-box;
  width: 126px;
  height: 126px;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  border: 1px solid transparent;
  border-radius: 16px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.5s ease;
}

@media screen and (min-width: 768px) {
  /* line 82, app/assets/stylesheets/game_tile.scss */
  .game-tile-ghost {
    width: 150px;
    height: 150px;
  }
}

@media screen and (min-width: 1200px) {
  /* line 82, app/assets/stylesheets/game_tile.scss */
  .game-tile-ghost {
    width: 216px;
    height: 216px;
  }
}

/* line 109, app/assets/stylesheets/game_tile.scss */
.game-tile-ghost.margin-top {
  margin-top: 16px;
}

/* line 112, app/assets/stylesheets/game_tile.scss */
.game-tile-ghost.xl-tile {
  width: 194px;
  height: 143px;
}

@media screen and (min-width: 1200px) {
  /* line 112, app/assets/stylesheets/game_tile.scss */
  .game-tile-ghost.xl-tile {
    width: 300px;
    height: 220px;
  }
}

/* line 120, app/assets/stylesheets/game_tile.scss */
.game-tile-ghost.full-tile {
  width: 100%;
  height: 100%;
}
/* line 1, app/assets/stylesheets/pages/wagers.scss */
.wager-selection-bg-gradient {
  border-radius: 0px 0px 20px 20px;
  border: 1px solid #262626;
  background: linear-gradient(180deg, #0D0D0D 17.98%, #1E2226 58.2%);
  z-index: 0;
}

/* line 8, app/assets/stylesheets/pages/wagers.scss */
.wait-badge {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 14px 14px 0px 0px;
  border-top: 1px solid #416377;
  opacity: 0.75;
  background: linear-gradient(180deg, #222 2.31%, rgba(30, 30, 30, 0) 45.28%);
}

/* line 17, app/assets/stylesheets/pages/wagers.scss */
.support_email_link a {
  color: #DC2626;
  font-weight: 500;
}

/* line 21, app/assets/stylesheets/pages/wagers.scss */
.support_email_link a:hover {
  color: #991B1B;
}

/* line 28, app/assets/stylesheets/pages/wagers.scss */
.bonus-modal-rich-text h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* line 35, app/assets/stylesheets/pages/wagers.scss */
.checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: -1px;
  width: 7px;
  height: 14px;
  border: solid #000000;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* line 48, app/assets/stylesheets/pages/wagers.scss */
.checkbox input:checked + .checkmark::after {
  display: block;
}

/* line 52, app/assets/stylesheets/pages/wagers.scss */
.in-game-iframe-container {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0 !important;
}

/* line 57, app/assets/stylesheets/pages/wagers.scss */
.in-game-iframe-container .pb-9 {
  padding-bottom: 1rem !important;
}

/* line 61, app/assets/stylesheets/pages/wagers.scss */
.in-game-iframe-container .modal-footer {
  flex-direction: row;
}

/* line 66, app/assets/stylesheets/pages/wagers.scss */
.silver-text-background {
  background: linear-gradient(180deg, #FAF9F8 21.09%, #BBB6AB 32.62%, #B4AD9E 51.17%, #CDCBC5 69.34%, #DAD7CF 80.21%);
}

/* line 70, app/assets/stylesheets/pages/wagers.scss */
.gold-text-background {
  background: linear-gradient(180deg, #FEE389 21.09%, #FAAF01 32.62%, #E69601 51.17%, #FEC429 69.34%, #FED140 80.21%);
}

/* line 74, app/assets/stylesheets/pages/wagers.scss */
.platinum-text-background {
  background: linear-gradient(180deg, #CBC8BC 21.09%, #8B8370 32.62%, #837865 51.17%, #9B978C 69.34%, #ABA592 80.21%);
}

/* line 78, app/assets/stylesheets/pages/wagers.scss */
.emerald-text-background {
  background: linear-gradient(180deg, #89FEC1 21.09%, #01FA69 32.62%, #01E655 51.17%, #29FE88 69.34%, #40FE9C 80.21%);
}

/* line 82, app/assets/stylesheets/pages/wagers.scss */
.ruby-text-background {
  background: linear-gradient(180deg, #FE9E89 21.09%, #FA1E01 32.62%, #E61001 51.17%, #FE4829 69.34%, #FE6240 80.21%);
}

/* line 86, app/assets/stylesheets/pages/wagers.scss */
.bonus-text {
  text-align: center;
  -webkit-text-stroke-width: 0.6px;
  -webkit-text-stroke-color: #000;
  font-size: 20px;
  font-style: normal;
  line-height: 15px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-weight: 600;
}

/* line 100, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #0AEB88 transparent;
}

/* line 104, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* line 111, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar:hover::-webkit-scrollbar, .green-scrollbar:focus::-webkit-scrollbar, .green-scrollbar:active::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block;
}

/* line 117, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar:hover::-webkit-scrollbar-track, .green-scrollbar:focus::-webkit-scrollbar-track, .green-scrollbar:active::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

/* line 122, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar:hover::-webkit-scrollbar-thumb, .green-scrollbar:focus::-webkit-scrollbar-thumb, .green-scrollbar:active::-webkit-scrollbar-thumb {
  background-color: #0AEB88;
  border-radius: 3px;
  border: none;
}

/* line 128, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar:hover::-webkit-scrollbar-corner, .green-scrollbar:focus::-webkit-scrollbar-corner, .green-scrollbar:active::-webkit-scrollbar-corner {
  background: transparent;
}
/* line 1, app/assets/stylesheets/payments_info.scss */
.payments-info {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

@media (max-width: 1024px) {
  /* line 1, app/assets/stylesheets/payments_info.scss */
  .payments-info {
    display: block;
  }
}

/* line 8, app/assets/stylesheets/payments_info.scss */
.payments-info div {
  position: relative;
  background-color: #2c2c2c;
  border-radius: 20px;
  padding: 40px 10px 20px 10px;
  margin-top: 50px;
  width: calc(33% - 10px);
}

@media (max-width: 1024px) {
  /* line 8, app/assets/stylesheets/payments_info.scss */
  .payments-info div {
    width: 100%;
  }
}

/* line 18, app/assets/stylesheets/payments_info.scss */
.payments-info div img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* line 23, app/assets/stylesheets/payments_info.scss */
.payments-info div img.play {
  width: 100px;
}

/* line 26, app/assets/stylesheets/payments_info.scss */
.payments-info div img.instant-bank-transfer {
  width: 130px;
}

/* line 29, app/assets/stylesheets/payments_info.scss */
.payments-info div img.cards {
  width: 150px;
}

@media (max-width: 1024px) {
  /* line 18, app/assets/stylesheets/payments_info.scss */
  .payments-info div img {
    width: 75%;
  }
}

/* line 36, app/assets/stylesheets/payments_info.scss */
.payments-info div p {
  text-align: left;
  font-size: 15px;
  line-height: 22px;
}

/* line 40, app/assets/stylesheets/payments_info.scss */
.payments-info div p a {
  text-decoration: none;
  color: #0aeb88;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */