/* line 5, app/assets/stylesheets/_tokens.scss */
:root {
  --radius: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-rounded: 1000px;
  --spacing-none: 0px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 56px;
  --spacing-5xl: 72px;
  --text-display: 80px;
  --text-header: 60px;
  --text-subheader: 32px;
  --text-title: 20px;
  --text-lg: 18px;
  --text-standard: 16px;
  --text-sm: 14px;
  --text-meta: 12px;
  --text-display-mobile: 48px;
  --text-header-mobile: 32px;
  --text-subheader-mobile: 24px;
  --text-title-mobile: 18px;
  --leading-display: 84px;
  --leading-header: 68px;
  --leading-subheader: 40px;
  --leading-title: 28px;
  --leading-lg: 26px;
  --leading-standard: 24px;
  --leading-sm: 20px;
  --leading-meta: 16px;
  --leading-display-mobile: 52px;
  --leading-header-mobile: 40px;
  --leading-subheader-mobile: 32px;
  --leading-title-mobile: 26px;
}
/* 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: var(--icon-success);
}

/* line 14, app/assets/stylesheets/account_button.scss */
.account-button.initial #player-balances-cash-icon,
.account-button.initial #player-balances-credits-icon {
  color: var(--icon-success);
  --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: var(--icon-success) !important;
  outline-color: var(--icon-success);
  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: var(--icon-success);
}

/* line 60, app/assets/stylesheets/account_button.scss */
.account-button.stage-1 {
  background-color: #002b0c;
  transition: all 3550ms cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-stage-1 3550ms ease-out infinite;
}

/* line 65, app/assets/stylesheets/account_button.scss */
.account-button.stage-1 .balance-value {
  color: var(--icon-success);
}

/* line 69, app/assets/stylesheets/account_button.scss */
.account-button.stage-1 #player-balances-credits-icon {
  color: var(--icon-success);
  --bg-color: #002b0c;
}

/* line 75, app/assets/stylesheets/account_button.scss */
.account-button.stage-2 {
  background-color: #000000;
  transition: all 3550ms cubic-bezier(0.19, 1, 0.22, 1);
  animation: animate-stage-2 3550ms ease-out infinite;
}

/* line 80, app/assets/stylesheets/account_button.scss */
.account-button.stage-2 .balance-value {
  color: #fae187;
}

/* line 84, app/assets/stylesheets/account_button.scss */
.account-button.stage-2 #player-balances-credits-icon {
  color: #fae187;
  --bg-color: #000000;
}

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

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

/* line 99, app/assets/stylesheets/account_button.scss */
.account-button.stage-3 #player-balances-credits-icon {
  color: #FF281D;
  --bg-color: #000000;
}

@keyframes animate-stage-1 {
  100%,
0% {
    background: #002b0c;
    outline-color: var(--icon-success);
    border: 2px solid var(--icon-success);
    box-shadow: 0 0 6px 0 #00ff74 inset;
    text-shadow: none;
  }
  50% {
    background: #002b0c;
    outline-color: var(--icon-success);
    border: 2px solid var(--icon-success);
    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 217, app/assets/stylesheets/account_button.scss */
.balance-fill-pulse.initial {
  fill: var(--icon-success);
}

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

/* line 226, app/assets/stylesheets/account_button.scss */
.balance-stroke-pulse.initial {
  stroke: var(--icon-success);
}

/* line 229, 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 264, app/assets/stylesheets/account_button.scss */
.fast-shake {
  animation: shakeABit 5000ms ease-in-out infinite;
}

/* line 267, 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/_tokens.scss";
@import "../stylesheets/components/modal.scss";
@import "../stylesheets/pages/wagers.scss";
@import "../stylesheets/mobile_game_overlay.scss";
@import "../stylesheets/orientation.scss";
@import "../stylesheets/quick_credits.scss";
@import "../stylesheets/game_container.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: rgb(var(--brand-200));
    border-color: var(--tw-ring-color);
  }

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

  .password-validation-valid::before {
    content: "✓";
    @apply text-brand-iconBrand 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;
    @apply text-brand-textPrimary bg-brand-bgSurface;
  }

  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-brand-iconBrand 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-obsidianGray p-2 rounded-xl block w-full border-2 border-neutral-600 shadow-sm focus:outline-none focus:border-green-500;
    /* Remove default select arrow for consistency, optional: */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }
  .app-input-error {
    @apply border border-brand-borderError focus:border-brand-borderError focus:ring-brand-borderError;
  }
  .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;
  }

  .lobby .app-container {
    max-width: 1456px;
    @media only screen and (min-width: 1280px) {
      padding-inline: 56px;
      max-width: 1528px;
    }
  }

  .button-green {
    @apply text-base w-full rounded-[12px] text-center font-semibold p-[0.75rem] bg-brand-buttonPrimaryDefault text-black cursor-pointer grow;

    &:disabled {
      @apply opacity-[20%] cursor-not-allowed;
    }
  }
  .button-primary {
    @apply text-base text-center font-semibold leading-6 text-brand-buttonTextPrimary bg-brand-buttonPrimaryDefault rounded-[50px] py-3 px-8 cursor-pointer;

    &:disabled {
      @apply opacity-[40%] cursor-not-allowed;
    }
  }
  .button-dark {
    @apply text-base text-center font-semibold leading-6 text-[#FFFFFF] bg-obsidianGray 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-brand-buttonPrimaryDefault;
    }
  }
  .button-round--green {
    @apply bg-brand-buttonPrimaryDefault;
  }
  .app-link {
    @apply text-brand-iconBrand 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
  }
}

.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: rgb(var(--success-100));
  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;
}

/* Side drawer mobile landscape */
@media (orientation: landscape) and (max-height: 500px) {
  #side-drawer {
    position: fixed;
    top: 72px;
    max-height: calc(100dvh - 72px);
  }
  #side-drawer.side-drawer-landscape {
    width: 100vw;
    right: 0;
  }
}

/* HOT-5: the Salesforce chat window sizes its maximized frame from
   screen.height (its UA sniff classifies the app webview as desktop —
   .eswIsDesktop), but the app webview is shorter than the screen (native
   chrome). Bottom-anchored, the overflow clips the window's own header —
   and its close/minimize controls — above the visible viewport. Pin the
   maximized frame to the real viewport so the header and ✕ are reachable.
   Matches both mount points: inside <body> (native "contained") and above
   it (web "persist", where it costs nothing — 100% is what it gets anyway). */
body[data-hotwire-native] iframe.embeddedMessagingFrame.isMaximized,
body[data-hotwire-native] ~ #embedded-messaging iframe.embeddedMessagingFrame.isMaximized {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* HOT-5: /live-chat native sheet geometry. Scoped to the dedicated page;
   the generic pin above stays untouched for any other native context.
   - The native sheet's ✕ is the ONLY dismissal: the frame is pulled up by
     the height of SF's own header bar (50px in the current build — internal
     SF layout, not a contract; re-measure if SF redesigns it) and that strip
     is clipped away. clip-path both hides the header and removes it from
     hit-testing, so the minimize/menu controls can't be reached even blindly.
   - The bottom is lifted well clear of the home indicator (env() is 0 in
     this web view, so SF can't learn about it). */
body[data-hotwire-native][data-live-chat="contained"] iframe.embeddedMessagingFrame.isMaximized,
body[data-hotwire-native][data-live-chat="contained"] ~ #embedded-messaging iframe.embeddedMessagingFrame.isMaximized {
  top: -50px !important;
  height: calc(100% + 50px - 90px) !important;
  max-height: calc(100% + 50px - 90px) !important;
  clip-path: inset(50px 0 0 0);
}
/* line 1, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table {
  scroll-padding-bottom: 72px;
}

/* line 4, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table table {
  table-layout: fixed;
  width: 100%;
}

/* line 9, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table thead th {
  z-index: 2;
  box-shadow: 0 -4px 0 0 var(--bg-primary);
}

/* line 14, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table th:nth-child(1),
.leaderboard-modal-table td:nth-child(1) {
  width: 80px;
}

@media (min-width: 1024px) {
  /* line 14, app/assets/stylesheets/components/leaderboard_table.scss */
  .leaderboard-modal-table th:nth-child(1),
.leaderboard-modal-table td:nth-child(1) {
    width: 120px;
  }
}

/* line 23, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table th:nth-child(n+2),
.leaderboard-modal-table td:nth-child(n+2) {
  width: calc((100% - 80px) / 3);
}

@media (min-width: 1024px) {
  /* line 23, app/assets/stylesheets/components/leaderboard_table.scss */
  .leaderboard-modal-table th:nth-child(n+2),
.leaderboard-modal-table td:nth-child(n+2) {
    width: calc((100% - 120px) / 3);
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  /* line 1, app/assets/stylesheets/components/leaderboard_table.scss */
  .leaderboard-modal-table {
    height: 100%;
    max-height: none;
  }
}

/* line 37, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table tr[data-current-player="true"] td {
  background-image: linear-gradient(to bottom, #d7ad2f, #e8c75a);
}

/* line 40, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table tr[data-current-player="true"] td * {
  color: #000;
}

/* line 44, app/assets/stylesheets/components/leaderboard_table.scss */
.leaderboard-modal-table tr[data-current-player="true"] td span {
  font-weight: 600;
}
/* Landscape styling for modals with fullscreen_mobile set to true */
@media (orientation: landscape) and (max-height: 600px) {
  /* line 4, app/assets/stylesheets/components/modal.scss */
  .modal--fullscreen-mobile {
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  /* line 13, app/assets/stylesheets/components/modal.scss */
  .modal--fullscreen-mobile > div {
    justify-content: flex-start;
  }
  /* line 17, app/assets/stylesheets/components/modal.scss */
  .tournament-games-modal__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: none;
    overflow-y: visible;
  }
}

/* Modal button scss can be deleted once components are wrapped. */
/* line 26, 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 26, app/assets/stylesheets/components/modal.scss */
  .modal-button {
    width: 50%;
  }
}

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

/* line 45, app/assets/stylesheets/components/modal.scss */
.modal-button--green {
  background-color: var(--button-primary-default);
  color: #000000;
  cursor: pointer;
}

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

/* line 57, app/assets/stylesheets/components/modal.scss */
.modal-button--disabled {
  color: #b3b3b3;
  background-color: #f2f2f2;
  pointer-events: none;
}
/* line 69, app/assets/stylesheets/game_container.scss */
.game-container-tab {
  border-radius: 0 0 40px 40px;
  border: 1px solid #09111B;
  background: linear-gradient(0deg, rgba(6, 9, 17, 0.3) 0%, rgba(6, 9, 17, 0.6) 100%);
  box-shadow: 0 -4px 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* line 76, app/assets/stylesheets/game_container.scss */
.game-icon {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  transition: all 150ms ease-in-out;
}

/* line 86, app/assets/stylesheets/game_container.scss */
.game-icon:hover {
  background: #121C2B;
}

/* line 90, app/assets/stylesheets/game_container.scss */
.game-icon:active {
  background: #45556C;
}

/* line 94, app/assets/stylesheets/game_container.scss */
.game-icon:focus-visible {
  background: #121C2B;
  box-shadow: 0 0 0 2px #359ADF;
  outline: none;
}

@media (max-width: 768px) {
  /* line 76, app/assets/stylesheets/game_container.scss */
  .game-icon {
    width: 48px;
    height: 48px;
  }
}

/* line 106, app/assets/stylesheets/game_container.scss */
.game-mode-button {
  padding: 12px;
  width: 100%;
}

/* line 110, app/assets/stylesheets/game_container.scss */
.game-mode-button--disabled {
  color: #516177;
  border: none;
}

/* line 115, app/assets/stylesheets/game_container.scss */
.game-mode-button--enabled {
  border-radius: 1000px;
  border: 1px solid var(--button-primary-default);
  background: #09111B;
  box-shadow: 0 0 5px 0 var(--button-primary-default);
  color: #FFFFFF;
}

/* line 124, app/assets/stylesheets/game_container.scss */
.more-info-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #243246;
  background-color: #09111B;
  transition: all 150ms ease-in-out;
}

/* line 135, app/assets/stylesheets/game_container.scss */
.more-info-button:hover {
  border-color: #0AD27A;
  background-color: #121C2B;
}

/* line 141, app/assets/stylesheets/game_container.scss */
.outline-button {
  transition: all 150ms ease-in-out;
}

/* line 143, app/assets/stylesheets/game_container.scss */
.outline-button:hover {
  background: rgba(98, 116, 142, 0.2);
}

/* line 147, app/assets/stylesheets/game_container.scss */
.outline-button:active {
  background: #45556C;
}

/* line 151, app/assets/stylesheets/game_container.scss */
.outline-button:focus-visible {
  background: rgba(98, 116, 142, 0.2);
  box-shadow: 0 0 0 2px #359ADF;
}

/* line 158, app/assets/stylesheets/game_container.scss */
.in-game-menu__header {
  margin-bottom: 24px;
}

/* line 161, app/assets/stylesheets/game_container.scss */
.in-game-menu__header h2 {
  font-size: 32px;
}

/* line 166, app/assets/stylesheets/game_container.scss */
.in-game-menu__content {
  display: flex;
  flex-direction: column;
}

/* line 172, app/assets/stylesheets/game_container.scss */
.more-info-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 54px;
}

/* line 179, app/assets/stylesheets/game_container.scss */
.more-info-view__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* line 187, app/assets/stylesheets/game_container.scss */
.close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 1000px;
}

/* line 195, app/assets/stylesheets/game_container.scss */
.close-icon:hover {
  background: #121C2B;
}

/* line 199, app/assets/stylesheets/game_container.scss */
.close-icon:active {
  background: #243246;
}

/* line 203, app/assets/stylesheets/game_container.scss */
.close-icon:focus-visible {
  background: #121C2B;
  box-shadow: 0 0 0 2px #359ADF;
}

/* line 208, app/assets/stylesheets/game_container.scss */
.close-icon__image {
  height: 13px;
  width: 13px;
}

@media (max-height: 780px) and (min-width: 1024px) {
  /* line 4, app/assets/stylesheets/game_container.scss */
  .in-game-menu__header {
    margin-bottom: 0;
  }
  /* line 7, app/assets/stylesheets/game_container.scss */
  .in-game-menu__header h2 {
    font-size: 18px;
  }
  /* line 12, app/assets/stylesheets/game_container.scss */
  .in-game-menu__content {
    flex-direction: row;
    gap: 16px;
  }
  /* line 17, app/assets/stylesheets/game_container.scss */
  .in-game-menu__section {
    width: 50%;
  }
  /* line 22, app/assets/stylesheets/game_container.scss */
  .more-info-view {
    flex-direction: row;
    gap: 16px;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0px;
  }
  /* line 29, app/assets/stylesheets/game_container.scss */
  .more-info-view__image {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 24px;
  }
  /* line 38, app/assets/stylesheets/game_container.scss */
  .more-info-view__info {
    width: 70%;
    overflow-y: auto;
    max-height: 100%;
    justify-content: start;
    padding-bottom: 24px;
  }
  /* line 220, app/assets/stylesheets/game_container.scss */
  .in-game-menu {
    width: 800px;
    max-height: 90vh;
    overflow: hidden;
  }
  /* line 225, app/assets/stylesheets/game_container.scss */
  .in-game-menu__content {
    max-height: calc(90vh - 80px);
    overflow-y: auto;
  }
}

@media (orientation: landscape) and (max-height: 780px) and (max-width: 1023px) {
  /* line 4, app/assets/stylesheets/game_container.scss */
  .in-game-menu__header {
    margin-bottom: 0;
  }
  /* line 7, app/assets/stylesheets/game_container.scss */
  .in-game-menu__header h2 {
    font-size: 18px;
  }
  /* line 12, app/assets/stylesheets/game_container.scss */
  .in-game-menu__content {
    flex-direction: row;
    gap: 16px;
  }
  /* line 17, app/assets/stylesheets/game_container.scss */
  .in-game-menu__section {
    width: 50%;
  }
  /* line 22, app/assets/stylesheets/game_container.scss */
  .more-info-view {
    flex-direction: row;
    gap: 16px;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0px;
  }
  /* line 29, app/assets/stylesheets/game_container.scss */
  .more-info-view__image {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 24px;
  }
  /* line 38, app/assets/stylesheets/game_container.scss */
  .more-info-view__info {
    width: 70%;
    overflow-y: auto;
    max-height: 100%;
    justify-content: start;
    padding-bottom: 24px;
  }
  /* line 50, app/assets/stylesheets/game_container.scss */
  .in-game-credits-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: start;
  }
  /* line 57, app/assets/stylesheets/game_container.scss */
  .in-game-menu {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  /* line 63, app/assets/stylesheets/game_container.scss */
  .in-game-menu__close {
    top: 20px;
  }
}

@media (orientation: landscape) and (max-height: 420px) and (max-width: 1023px) {
  /* line 241, app/assets/stylesheets/game_container.scss */
  .in-game-menu {
    height: 100%;
  }
  /* line 244, app/assets/stylesheets/game_container.scss */
  .in-game-menu__close {
    top: 13px;
  }
}

@media (max-width: 768px) {
  /* line 252, app/assets/stylesheets/game_container.scss */
  .in-game-menu {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  /* line 259, app/assets/stylesheets/game_container.scss */
  .in-game-menu__header h2 {
    font-size: 18px;
  }
}

@media (orientation: portrait) {
  /* line 4, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu__header {
    margin-bottom: 0;
  }
  /* line 7, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu__header h2 {
    font-size: 18px;
  }
  /* line 12, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu__content {
    flex-direction: row;
    gap: 16px;
  }
  /* line 17, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu__section {
    width: 50%;
  }
  /* line 22, app/assets/stylesheets/game_container.scss */
  .game-landscape .more-info-view {
    flex-direction: row;
    gap: 16px;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0px;
  }
  /* line 29, app/assets/stylesheets/game_container.scss */
  .game-landscape .more-info-view__image {
    width: 30%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 24px;
  }
  /* line 38, app/assets/stylesheets/game_container.scss */
  .game-landscape .more-info-view__info {
    width: 70%;
    overflow-y: auto;
    max-height: 100%;
    justify-content: start;
    padding-bottom: 24px;
  }
  /* line 50, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-credits-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: start;
  }
  /* line 57, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  /* line 63, app/assets/stylesheets/game_container.scss */
  .game-landscape .in-game-menu__close {
    top: 20px;
  }
}
/* 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;
  /* Contain the z-indexed nav arrows so they never paint over the sticky category bar or header menus. */
  isolation: isolate;
  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 14, app/assets/stylesheets/game_list.scss */
.game-list.xl {
  min-height: 187px;
}

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

/* line 20, 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 20, app/assets/stylesheets/game_list.scss */
  .game-list .category-name {
    margin-bottom: 8px;
  }
}

/* line 28, 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 28, app/assets/stylesheets/game_list.scss */
  .game-list .category-icon {
    width: 88px;
    height: 88px;
    top: -35px;
    right: 20px;
  }
}

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

/* line 46, app/assets/stylesheets/game_list.scss */
.game-list .nav-button {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* line 54, app/assets/stylesheets/game_list.scss */
.game-list .nav-button.nav-button--prev {
  left: 0;
}

/* line 57, app/assets/stylesheets/game_list.scss */
.game-list .nav-button.nav-button--next {
  right: 0;
}

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

@media screen and (min-width: 1600px) {
  /* line 65, app/assets/stylesheets/game_list.scss */
  .game-list .nav-button.nav-button--prev {
    left: auto;
    right: 100%;
    padding-right: 24px;
  }
  /* line 70, app/assets/stylesheets/game_list.scss */
  .game-list .nav-button.nav-button--next {
    right: auto;
    left: 100%;
    padding-left: 24px;
  }
}

/* line 78, app/assets/stylesheets/game_list.scss */
.game-list:hover .nav-button:not(.swiper-button-disabled) {
  opacity: 1;
  pointer-events: auto;
}

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

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

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

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

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

/* line 103, app/assets/stylesheets/game_list.scss */
.tile-card {
  width: 100%;
  transition: all 0.5s ease;
}

/* line 107, app/assets/stylesheets/game_list.scss */
.tile-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 100ms ease-in;
}

/* line 114, app/assets/stylesheets/game_list.scss */
.tile-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-in;
}

/* line 126, app/assets/stylesheets/game_list.scss */
.tile-card .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;
}

@media (hover: hover) and (pointer: fine) {
  /* line 146, app/assets/stylesheets/game_list.scss */
  .tile-card:hover img {
    transform: scale(1.025);
  }
  /* line 149, app/assets/stylesheets/game_list.scss */
  .tile-card:hover .tile-card__overlay {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 156, app/assets/stylesheets/game_list.scss */
  .tile-card img {
    transition: none;
  }
  /* line 159, app/assets/stylesheets/game_list.scss */
  .tile-card:hover img {
    transform: none;
  }
}

/* line 164, app/assets/stylesheets/game_list.scss */
.home-section {
  padding-block: 32px;
}

@media screen and (min-width: 768px) {
  /* line 164, app/assets/stylesheets/game_list.scss */
  .home-section {
    padding-block: 40px;
  }
}

@media screen and (min-width: 1280px) {
  /* line 164, app/assets/stylesheets/game_list.scss */
  .home-section {
    padding-block: 56px;
  }
}

/* line 175, app/assets/stylesheets/game_list.scss */
.tile-list .tile-list__header {
  margin-top: 0;
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
  /* line 175, app/assets/stylesheets/game_list.scss */
  .tile-list .tile-list__header {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 1280px) {
  /* line 175, app/assets/stylesheets/game_list.scss */
  .tile-list .tile-list__header {
    margin-bottom: 32px;
  }
}

/* line 186, app/assets/stylesheets/game_list.scss */
.tile-list .tile-list__title {
  margin: 0;
}

/* line 190, app/assets/stylesheets/game_list.scss */
.tile-list .tile-slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media screen and (min-width: 768px) {
  /* line 190, app/assets/stylesheets/game_list.scss */
  .tile-list .tile-slide {
    gap: 24px;
  }
}

/* line 201, app/assets/stylesheets/game_list.scss */
.tile-list--featured .tile-slide {
  width: 274px;
}

@media screen and (min-width: 768px) {
  /* line 201, app/assets/stylesheets/game_list.scss */
  .tile-list--featured .tile-slide {
    width: 316px;
  }
}

@media screen and (min-width: 1024px) {
  /* line 201, app/assets/stylesheets/game_list.scss */
  .tile-list--featured .tile-slide {
    width: 276px;
  }
}

@media screen and (min-width: 1280px) {
  /* line 201, app/assets/stylesheets/game_list.scss */
  .tile-list--featured .tile-slide {
    width: calc((100% - 72px) / 4);
  }
}

/* line 214, app/assets/stylesheets/game_list.scss */
.tile-list--featured .tile-card {
  aspect-ratio: 456 / 334;
}

/* line 220, app/assets/stylesheets/game_list.scss */
.tile-list--standard .tile-slide {
  width: 145px;
}

@media screen and (min-width: 768px) {
  /* line 220, app/assets/stylesheets/game_list.scss */
  .tile-list--standard .tile-slide {
    width: 162px;
  }
}

@media screen and (min-width: 1280px) {
  /* line 220, app/assets/stylesheets/game_list.scss */
  .tile-list--standard .tile-slide {
    width: calc((100% - 120px) / 6);
  }
}

/* line 230, app/assets/stylesheets/game_list.scss */
.tile-list--standard .tile-card {
  aspect-ratio: 1 / 1;
}

/* line 235, app/assets/stylesheets/game_list.scss */
.tile-list--grid {
  --tile-gap: 16px;
  --small-columns: 1;
  --tile-unit: calc(
    (100% - (var(--small-columns) + 1) * var(--tile-gap)) / (var(--small-columns) + 2)
  );
}

@media screen and (min-width: 768px) {
  /* line 235, app/assets/stylesheets/game_list.scss */
  .tile-list--grid {
    --tile-gap: 24px;
    --small-columns: 2;
  }
}

@media screen and (min-width: 1280px) {
  /* line 235, app/assets/stylesheets/game_list.scss */
  .tile-list--grid {
    --small-columns: 4;
  }
}

/* line 252, app/assets/stylesheets/game_list.scss */
.tile-list--grid .tile-block--small {
  width: var(--tile-unit);
  display: grid;
  gap: var(--tile-gap);
}

/* line 258, app/assets/stylesheets/game_list.scss */
.tile-list--grid .tile-block--large {
  width: calc(2 * var(--tile-unit) + var(--tile-gap));
  aspect-ratio: 1;
}

/* line 263, app/assets/stylesheets/game_list.scss */
.tile-list--grid .tile-card {
  width: 100%;
  aspect-ratio: 1;
}

/* line 270, app/assets/stylesheets/game_list.scss */
.tile-list--top .top-spinner {
  display: flex;
  align-items: flex-end;
  width: auto;
}

/* line 276, app/assets/stylesheets/game_list.scss */
.tile-list--top .top-spinner__rank {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 44px;
  height: 80px;
  margin-right: -8px;
  overflow: visible;
}

@media screen and (min-width: 768px) {
  /* line 276, app/assets/stylesheets/game_list.scss */
  .tile-list--top .top-spinner__rank {
    width: 72px;
    height: 132px;
  }
}

/* line 291, app/assets/stylesheets/game_list.scss */
.tile-list--top .top-spinner__rank--wide {
  width: 90px;
}

@media screen and (min-width: 768px) {
  /* line 291, app/assets/stylesheets/game_list.scss */
  .tile-list--top .top-spinner__rank--wide {
    width: 144px;
  }
}

/* line 298, app/assets/stylesheets/game_list.scss */
.tile-list--top .top-spinner__rank-svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

/* line 305, app/assets/stylesheets/game_list.scss */
.tile-list--top .top-spinner__card {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 768px) {
  /* line 305, app/assets/stylesheets/game_list.scss */
  .tile-list--top .top-spinner__card {
    width: 180px;
    height: 180px;
  }
}

/* line 318, app/assets/stylesheets/game_list.scss */
.tournament-pages .page {
  width: 16px;
  height: 2px;
  background: var(--icon-disabled);
  border-radius: 1000px;
  cursor: pointer;
  transition: width 0.3s ease;
}

/* line 327, app/assets/stylesheets/game_list.scss */
.tournament-pages .page-active {
  width: 48px;
  background: var(--icon-brand);
}
/* 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%;
}
/* Game tile banner (RL-3326): Contentful image banner with a scrollable row of game tiles on top */
/* line 3, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner {
  /* Mobile gap is proportional, not fixed px: the region scales with the banner, so a fixed gap made
     each tile progressively too wide for its 186/296 ratio and object-fit: cover clipped the sides
     (worst right below the 768px breakpoint). At this value three tiles fill the region's width and
     height exactly at every width. Keep in step with space-between-percent on the carousel element. */
  --banner-tile-gap: 5.4557%;
  /* height: auto overrides swiper.css's .swiper-slide { height: 100% }, which would otherwise stretch
     the slide past the tile ratio and make object-fit: cover crop the artwork's sides. */
  /* Same hover as the lobby tiles minus the shared dark background: these tiles sit on banner artwork */
  /* Grow the whole card on hover. The shared tile hover scales the image inside the card's overflow
     clip, which crops artwork that carries its own framed edges the way these tiles do. */
  /* Arrows are a desktop pointer affordance only; mobile navigates via swipe */
}

/* line 4, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .swiper {
  height: 100%;
}

/* line 8, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .swiper-wrapper {
  align-items: center;
}

/* line 20, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .swiper-slide {
  width: calc((100% - 2 * var(--banner-tile-gap)) / 3);
  height: auto;
  max-height: 100%;
  aspect-ratio: 186 / 296;
  /* Desktop's region is 60% tall against a shorter tile, so its fixed 24px gap leaves vertical
       slack at any realistic width and the tiles centre inside it without clipping. */
}

@media screen and (min-width: 768px) {
  /* line 20, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .swiper-slide {
    width: calc((100% - 48px) / 3);
  }
}

/* line 34, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .tile-card__overlay {
  background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  /* line 41, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .tile-card {
    transition: transform 100ms ease-in;
  }
  /* line 45, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .tile-card:hover {
    transform: scale(1.025);
  }
  /* line 49, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .tile-card:hover img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 55, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .tile-card,
.game-tile-banner .tile-card:hover {
    transition: none;
    transform: none;
  }
}

/* line 62, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .nav-button {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  transition: opacity 0.5s ease;
  display: none;
  /* Desktop: park the arrows in the margins beside the tile strip so they don't cover games.
       The banner leaves 7.5% of its width right of the tile region, which is 18.75% of region
       width; centering the 56px button in that margin (9.375% - half the button) keeps it inside
       the banner at any container width. Mobile keeps edge arrows - tiles span nearly full width. */
}

/* line 70, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .nav-button.nav-button--prev {
  left: 0;
}

/* line 74, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .nav-button.nav-button--next {
  right: 0;
}

@media screen and (min-width: 768px) {
  /* line 83, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .nav-button.nav-button--prev {
    left: auto;
    right: calc(100% + 9.375% - 28px);
  }
  /* line 88, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .nav-button.nav-button--next {
    right: auto;
    left: calc(100% + 9.375% - 28px);
  }
}

/* line 94, app/assets/stylesheets/game_tile_banner.scss */
.game-tile-banner .nav-button.swiper-button-disabled, .game-tile-banner .nav-button.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  /* line 103, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner .nav-button {
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  /* line 109, app/assets/stylesheets/game_tile_banner.scss */
  .game-tile-banner:hover .nav-button:not(.swiper-button-disabled):not(.swiper-button-lock) {
    opacity: 1;
    pointer-events: auto;
  }
}
@media screen and (orientation: landscape) {
  /* line 2, app/assets/stylesheets/mobile_game_overlay.scss */
  .mobile-game-overlay {
    padding: 16px;
  }
  /* line 6, app/assets/stylesheets/mobile_game_overlay.scss */
  .swipe-up-icon, .tap-icon {
    width: 120px;
    height: 120px;
  }
}
/* line 1, app/assets/stylesheets/orientation.scss */
.game-viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  transform-origin: center;
  will-change: transform;
  transition: transform 300ms ease-in-out;
  overflow: hidden;
}

/* Landscape game: rotate when device is in portrait */
@media (orientation: portrait) {
  /* line 12, app/assets/stylesheets/orientation.scss */
  .game-landscape {
    width: 100dvh;
    height: 100dvw;
    transform: rotate(90deg) translate(calc((100dvh - 100dvw) / 2), calc((100dvh - 100dvw) / 2));
  }
}

/* Portrait game: rotate when device is in landscape */
@media (orientation: landscape) {
  /* line 22, app/assets/stylesheets/orientation.scss */
  .game-portrait {
    width: 100dvh;
    height: 100dvw;
    transform: rotate(90deg) translate(calc((100dvh - 100dvw) / 2), calc((100dvh - 100dvw) / 2));
  }
}
/* line 1, app/assets/stylesheets/pages/wagers.scss */
.silver-stack-bg {
  background: radial-gradient(50% 50% at 50% 50%, #393737 0%, #020B1C 100%);
}

/* line 5, app/assets/stylesheets/pages/wagers.scss */
.gold-stack-bg {
  background: radial-gradient(50% 50% at 50% 50%, #4D300C 0%, #020B1C 100%);
}

/* line 9, app/assets/stylesheets/pages/wagers.scss */
.platinum-stack-bg {
  background: radial-gradient(50% 50% at 50% 50%, #373D40 0%, #020B1C 100%);
}

/* line 13, app/assets/stylesheets/pages/wagers.scss */
.emerald-stack-bg {
  background: radial-gradient(50% 50% at 50% 50%, #09490E 0%, #020B1C 100%);
}

/* line 17, app/assets/stylesheets/pages/wagers.scss */
.ruby-stack-bg {
  background: radial-gradient(50% 50% at 50% 50%, #4B0B0C 0%, #020B1C 100%);
}

/* line 21, app/assets/stylesheets/pages/wagers.scss */
.silver-show-bg {
  background: radial-gradient(43.31% 43.31% at 50% 50%, #393737 0%, transparent 100%);
}

/* line 25, app/assets/stylesheets/pages/wagers.scss */
.gold-show-bg {
  background: radial-gradient(43.31% 43.31% at 50% 50%, #4D300C 0%, transparent 100%);
}

/* line 29, app/assets/stylesheets/pages/wagers.scss */
.platinum-show-bg {
  background: radial-gradient(43.31% 43.31% at 50% 50%, #373D40 0%, transparent 100%);
}

/* line 33, app/assets/stylesheets/pages/wagers.scss */
.emerald-show-bg {
  background: radial-gradient(43.31% 43.31% at 50% 50%, #09490E 0%, transparent 100%);
}

/* line 37, app/assets/stylesheets/pages/wagers.scss */
.ruby-show-bg {
  background: radial-gradient(43.31% 43.31% at 50% 50%, #4B0B0C 0%, transparent 100%);
}

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

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

/* line 53, app/assets/stylesheets/pages/wagers.scss */
.bonus-modal-rich-text h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 40px;
}

@media (max-width: 400px) {
  /* line 53, app/assets/stylesheets/pages/wagers.scss */
  .bonus-modal-rich-text h1 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }
}

/* line 68, app/assets/stylesheets/pages/wagers.scss */
.wager-details-table table {
  width: 100%;
  table-layout: fixed;
}

/* line 73, app/assets/stylesheets/pages/wagers.scss */
.wager-details-table th:last-child,
.wager-details-table td:last-child {
  width: 92px;
}

@media (min-width: 768px) {
  /* line 73, app/assets/stylesheets/pages/wagers.scss */
  .wager-details-table th:last-child,
.wager-details-table td:last-child {
    width: 160px;
  }
}

/* line 82, app/assets/stylesheets/pages/wagers.scss */
.wager-details-table td {
  height: 72px;
  font-size: 14px;
  line-height: 20px;
}

/* line 88, app/assets/stylesheets/pages/wagers.scss */
.wager-details-table thead th {
  z-index: 1;
}

/* line 92, app/assets/stylesheets/pages/wagers.scss */
.wager-details-table .overflow-clip {
  max-height: 418px;
  overflow-y: auto;
  background-color: var(--bg-surface);
}

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

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

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

/* line 113, 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 117, 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 121, 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 125, 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 129, 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 133, app/assets/stylesheets/pages/wagers.scss */
.amount-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 139, app/assets/stylesheets/pages/wagers.scss */
.stack-amount {
  -webkit-text-stroke-width: 0.75px;
  paint-order: stroke;
}

/* line 144, app/assets/stylesheets/pages/wagers.scss */
.silver-amount {
  background-image: linear-gradient(180deg, #DEDEDE 7.29%, #727171 89.58%);
  -webkit-text-stroke-color: #DEDEDE;
}

/* line 149, app/assets/stylesheets/pages/wagers.scss */
.gold-amount {
  background-image: linear-gradient(180deg, #FADEA4 7.29%, #C28224 89.58%);
  -webkit-text-stroke-color: #FADEA4;
}

/* line 154, app/assets/stylesheets/pages/wagers.scss */
.platinum-amount {
  background-image: linear-gradient(180deg, #E0E3E7 7.29%, #597A96 89.58%);
  -webkit-text-stroke-color: #E0E3E7;
}

/* line 159, app/assets/stylesheets/pages/wagers.scss */
.emerald-amount {
  background-image: linear-gradient(180deg, #A2E268 7.29%, #379C25 89.58%);
  -webkit-text-stroke-color: #A2E268;
}

/* line 164, app/assets/stylesheets/pages/wagers.scss */
.ruby-amount {
  background-image: linear-gradient(180deg, #FF8C82 7.29%, #BC251D 89.58%);
  -webkit-text-stroke-color: #FF8C82;
}

/* line 169, app/assets/stylesheets/pages/wagers.scss */
.bonus-text {
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
  -webkit-text-fill-color: #FFFFFF;
  -webkit-text-stroke-width: 0.45px;
  -webkit-text-stroke-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* line 185, app/assets/stylesheets/pages/wagers.scss */
.green-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--icon-brand) transparent;
}

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

/* line 196, 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 202, 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 207, 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: var(--icon-brand);
  border-radius: 3px;
  border: none;
}

/* line 213, 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: 550px) {
  /* 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: var(--icon-brand);
}
/* Promo card banner (RL-3325): Contentful image-card carousel below the hero banner slot */
/* line 3, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner {
  /* Card widths per design: one full-width card on mobile, fixed 576px on desktop.
     slidesPerView:'auto' lets these widths drive how many cards show at once. */
  /* Arrows are a desktop pointer affordance only; mobile navigates via swipe + dots */
}

/* line 6, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner .swiper-slide {
  width: 100%;
}

@media screen and (min-width: 768px) {
  /* line 6, app/assets/stylesheets/promo_card_banner.scss */
  .promo-card-banner .swiper-slide {
    width: 576px;
  }
}

/* line 14, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner .nav-button {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  transition: opacity 0.5s ease;
  display: none;
}

/* line 22, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner .nav-button.nav-button--prev {
  left: 0;
}

/* line 26, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner .nav-button.nav-button--next {
  right: 0;
}

/* line 30, app/assets/stylesheets/promo_card_banner.scss */
.promo-card-banner .nav-button.swiper-button-disabled, .promo-card-banner .nav-button.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  /* line 39, app/assets/stylesheets/promo_card_banner.scss */
  .promo-card-banner .nav-button {
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  /* line 45, app/assets/stylesheets/promo_card_banner.scss */
  .promo-card-banner:hover .nav-button:not(.swiper-button-disabled):not(.swiper-button-lock) {
    opacity: 1;
    pointer-events: auto;
  }
}
/* line 128, app/assets/stylesheets/quick_credits.scss */
.quick-credits__wrapper {
  display: flex;
  flex-direction: column;
}

/* line 133, app/assets/stylesheets/quick_credits.scss */
.quick-credits__title {
  font-size: 32px;
  line-height: 40px;
}

/* line 138, app/assets/stylesheets/quick_credits.scss */
.quick-credits__rebuy {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

/* line 144, app/assets/stylesheets/quick_credits.scss */
.quick-credits__cta-mobile {
  display: none;
}

/* line 149, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card {
  width: 308px;
  border-radius: 32px;
  border: 1px solid var(--brand-400);
  background: #121C2B;
  box-shadow: 0 0 20px 0 rgba(var(--color-brand-200), 0.5) inset;
  padding-top: 72px;
  padding-bottom: 24px;
}

/* line 158, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__content {
  display: flex;
  flex-direction: column;
}

/* line 163, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__ctas {
  display: flex;
  flex-direction: column;
}

/* line 168, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__image {
  width: 110px;
  top: -52px;
}

/* line 173, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__title {
  font-size: 32px;
  line-height: 40px;
}

/* line 178, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__description {
  font-size: 14px;
  line-height: 22px;
}

/* line 183, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card__chips {
  width: 80%;
}

/* line 188, app/assets/stylesheets/quick_credits.scss */
.quick-credits-card-padding {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 670px) {
  /* line 195, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__title {
    font-size: 24px;
    line-height: 32px;
  }
  /* line 200, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__rebuy {
    gap: .8rem;
  }
  /* line 205, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card {
    padding-bottom: 32px;
    min-width: 150px;
    max-width: 195px;
    padding-top: 46px;
    padding-bottom: 12px;
    width: 50%;
  }
  /* line 213, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__image {
    width: 77px;
    top: -34px;
  }
  /* line 218, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__title {
    font-size: 22px;
    line-height: 30px;
  }
  /* line 223, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__chips {
    width: 85%;
  }
  /* line 228, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card-padding {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-height: 780px) and (min-width: 1024px) {
  /* line 4, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__title {
    font-size: 24px;
    line-height: 32px;
  }
  /* line 9, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__description {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
  }
  /* line 15, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__wrapper {
    flex-direction: row;
    gap: 16px;
  }
  /* line 20, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__info {
    display: flex;
    flex-direction: column;
    width: 35%;
    justify-content: start;
    gap: 14px;
  }
  /* line 28, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__rebuy {
    width: 65%;
    flex-direction: column;
    gap: 1.60rem;
  }
  /* line 34, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__info-text {
    display: none;
  }
  /* line 38, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__more-credits {
    display: none;
  }
  /* line 42, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-desktop {
    display: none;
  }
  /* line 46, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-mobile {
    display: block;
    margin-top: 0px;
  }
  /* line 50, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-mobile p {
    margin-top: 0px;
  }
  /* line 56, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
  }
  /* line 63, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__content {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  /* line 69, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__ctas {
    flex-direction: row;
  }
  /* line 73, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__image {
    width: 53px;
    top: -22px;
  }
  /* line 78, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__title {
    text-align: left;
    font-size: 18px;
    line-height: 26px;
  }
  /* line 84, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__description {
    text-align: left;
    font-size: 12px;
    line-height: 16px;
  }
  /* line 90, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__chips {
    width: 147px;
    padding-right: 12px;
    flex-shrink: 0;
  }
  /* line 96, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__button {
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    height: 32px;
    max-width: 126px;
    margin: 0;
  }
  /* line 105, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__deposit-required {
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: start;
    padding-left: 12px;
  }
  /* line 112, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__details {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
  }
  /* line 121, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card-padding {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (orientation: landscape) and (max-height: 780px) and (max-width: 1023px) {
  /* line 4, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__title {
    font-size: 24px;
    line-height: 32px;
  }
  /* line 9, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__description {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
  }
  /* line 15, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__wrapper {
    flex-direction: row;
    gap: 16px;
  }
  /* line 20, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__info {
    display: flex;
    flex-direction: column;
    width: 35%;
    justify-content: start;
    gap: 14px;
  }
  /* line 28, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__rebuy {
    width: 65%;
    flex-direction: column;
    gap: 1.60rem;
  }
  /* line 34, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__info-text {
    display: none;
  }
  /* line 38, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__more-credits {
    display: none;
  }
  /* line 42, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-desktop {
    display: none;
  }
  /* line 46, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-mobile {
    display: block;
    margin-top: 0px;
  }
  /* line 50, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__cta-mobile p {
    margin-top: 0px;
  }
  /* line 56, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
  }
  /* line 63, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__content {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  /* line 69, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__ctas {
    flex-direction: row;
  }
  /* line 73, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__image {
    width: 53px;
    top: -22px;
  }
  /* line 78, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__title {
    text-align: left;
    font-size: 18px;
    line-height: 26px;
  }
  /* line 84, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__description {
    text-align: left;
    font-size: 12px;
    line-height: 16px;
  }
  /* line 90, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__chips {
    width: 147px;
    padding-right: 12px;
    flex-shrink: 0;
  }
  /* line 96, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__button {
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    height: 32px;
    max-width: 126px;
    margin: 0;
  }
  /* line 105, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__deposit-required {
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: start;
    padding-left: 12px;
  }
  /* line 112, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card__details {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
  }
  /* line 121, app/assets/stylesheets/quick_credits.scss */
  .quick-credits-card-padding {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* line 245, app/assets/stylesheets/quick_credits.scss */
  .quick-credits {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  /* line 249, app/assets/stylesheets/quick_credits.scss */
  .quick-credits__rebuy {
    margin-top: 25px;
    margin-bottom: 0px;
  }
}
/*
 * 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.
 *


 */