@font-face {
  font-family: 'Advanced Dot Digital-7';
  src: url('/fonts/Open24DisplaySt.woff2') format('woff2');
  font-display: swap;
}

html.route-theme-ap88,
html.route-theme-ap88 body {
  --theme-primary: #d92ab4;
  --theme-primary-rgb: 217, 42, 180;
  --theme-secondary: #4e0086;
  --theme-accent: #fdce21;
  --background: #080b1f;
  --background-secondary: #220647;
  --background-tertiary: #3f086b;
  --background-card: #210340;
  --border: #6e1199;
  --theme-gradient-1: #fdce21;
  --theme-gradient-2: #f0a000;
  --theme-gradient-3: #d92ab4;
  --theme-gradient-4: #9d0f86;
  --theme-gradient-5: #ffffff;
  --theme-gradient-6: #fdce21;
  --theme-gradient-7: #d92ab4;
  --theme-gradient-8: #4e0086;
  --theme-gradient-9: #220647;
  --theme-glow: rgba(217, 42, 180, 0.3);
  --theme-glow-strong: rgba(217, 42, 180, 0.5);
  --theme-ring: #d92ab4;
  --theme-border-glow-1: rgba(217, 42, 180, 1);
  --theme-border-glow-2: rgba(217, 42, 180, 0.1);
  --theme-user-accent: #fdce21;
  min-height: 100%;
  background: #080b1f;
}

html.route-theme-ap88 body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html.route-theme-ap88 .font-black:not(.ap88-jackpot-amount) {
  font-weight: 800 !important;
}

html.route-theme-ap88 .font-bold {
  font-weight: 650 !important;
}

@media (min-width: 768px) {
  html.route-theme-ap88,
  html.route-theme-ap88 body {
    background:
      radial-gradient(circle at 50% -18%, rgba(78, 16, 125, 0.52), transparent 34rem),
      linear-gradient(180deg, #090d24 0%, #090d24 100%);
  }
}

.ap88-jackpot-amount {
  color: #fdce21;
  font-family: 'Advanced Dot Digital-7', sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 4px rgba(253, 206, 33, 0.55),
    0 0 14px rgba(253, 206, 33, 0.22);
  white-space: nowrap;
}

.ap88-mobile-appbar,
.ap88-mobile-head,
.ap88-mobile-logo-row,
.ap88-mobile-auth,
.ap88-mobile-footer-nav {
  display: none !important;
}

@media (max-width: 767px) {
  .ap88-mobile-appbar {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 16px !important;
    background: linear-gradient(90deg, #4a4fe4 0%, #7d3ea5 52%, #a6211f 100%) !important;
  }

  .ap88-mobile-appbar-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  .ap88-mobile-download {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 116px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ff9d23 0%, #f06400 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-transform: none !important;
    box-shadow: 0 0 14px rgba(255, 119, 0, 0.65) !important;
  }

  .ap88-mobile-head {
    height: 136px !important;
    display: grid !important;
    grid-template-rows: 78px 58px !important;
    background: #080b1f !important;
  }

  .ap88-mobile-logo-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 64px !important;
    align-items: center !important;
    padding: 0 12px !important;
  }

  .ap88-mobile-burger {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .ap88-mobile-logo {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
  }

  .ap88-mobile-logo img {
    max-width: 150px !important;
    max-height: 54px !important;
  }

  .ap88-mobile-auth {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    height: 58px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  .ap88-mobile-auth-logged-in {
    height: 52px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .ap88-hero-image {
    opacity: 1 !important;
    display: block !important;
  }

  .ap88-home-logged-in-ready {
    overflow-x: hidden;
  }

  .ap88-home-hero img,
  .ap88-home-games img {
    max-width: 100%;
  }

  .ap88-home-mobile-nav {
    background: linear-gradient(180deg, #5b0b93 0%, #43046f 100%) !important;
  }

  .ap88-mobile-scroll-nav {
    gap: 12px !important;
    padding: 10px 12px 11px !important;
  }

  .ap88-mobile-scroll-nav-item {
    min-width: 68px !important;
    gap: 5px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }

  .ap88-mobile-scroll-nav-icon {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    color: #f4d4ff !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    filter: drop-shadow(0 1px 4px rgba(217, 42, 180, 0.36));
  }

  .ap88-mobile-scroll-nav-item:first-child .ap88-mobile-scroll-nav-icon,
  .ap88-mobile-scroll-nav-item:first-child span {
    color: #fdce21 !important;
  }

  .ap88-mobile-scroll-nav-item span {
    font-weight: 600 !important;
  }

  .ap88-mobile-footer-nav {
    display: block !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    transform: translateZ(0);
    border-top: 1px solid rgba(244, 114, 255, 0.55);
    background:
      radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.42) 0%, transparent 34%),
      linear-gradient(180deg, #5f08a3 0%, #3b0472 42%, #210044 100%);
    box-shadow:
      0 -10px 26px rgba(0, 0, 0, 0.78),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 0 22px rgba(217, 42, 180, 0.28);
  }

  html.route-theme-ap88 .font-black:not(.ap88-jackpot-amount) {
    font-weight: 750 !important;
  }

  html.route-theme-ap88 .font-bold {
    font-weight: 600 !important;
  }

  .ap88-mobile-footer-nav a {
    gap: 3px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  .ap88-mobile-footer-nav svg {
    width: 27px !important;
    height: 27px !important;
    stroke-width: 2.6 !important;
  }

  .ap88-mobile-footer-nav span {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }

  .ap88-payment-section {
    background: #070a1d !important;
    padding: 34px 10px 42px !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .ap88-payment-title {
    margin-bottom: 24px !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
  }

  .ap88-payment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 18px !important;
  }

  .ap88-payment-grid .ap88-logo-tile {
    width: 100% !important;
    height: 66px !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    background: #101330 !important;
    box-shadow:
      inset 5px 0 8px rgba(139, 255, 85, 0.66),
      inset 0 0 18px rgba(0, 0, 0, 0.58) !important;
  }

  .ap88-payment-grid .ap88-logo-tile-inactive {
    box-shadow:
      inset 5px 0 8px rgba(239, 68, 68, 0.8),
      inset 0 0 18px rgba(0, 0, 0, 0.58) !important;
  }

  .ap88-payment-grid .ap88-logo-tile-mobile-label,
  .ap88-payment-grid .ap88-logo-tile span {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  .ap88-provider-title {
    display: none !important;
  }

  .ap88-provider-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 30px !important;
  }

  .ap88-provider-grid .ap88-logo-tile {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 5px !important;
    border-radius: 12px !important;
    background: #070a1d !important;
    box-shadow: none !important;
  }

  .ap88-provider-grid .ap88-logo-tile img {
    display: block !important;
    max-width: 88% !important;
    max-height: 78% !important;
    object-fit: contain !important;
    filter: none !important;
  }
}

@media (min-width: 768px) {
  .ap88-mobile-appbar,
  .ap88-mobile-head,
  .ap88-mobile-logo-row,
  .ap88-mobile-auth,
  .ap88-mobile-footer-nav {
    display: none !important;
  }
}