:root,
:root[data-theme='dark'],
:root[data-theme='light'],
:root [data-theme='dark'],
:root [data-theme='light'],
:host,
:host[data-theme='dark'],
:host[data-theme='light'] {
  --bg-0: #050607;
  --bg-1: #07090B;
  --bg-2: #0A0D10;

  --panel: #0B0F12;
  --panel-2: #090C0F;

  --line: rgba(255, 255, 255, .075);

  --text: #EAF1F4;
  --text-2: rgba(234, 241, 244, .72);
  --text-3: rgba(234, 241, 244, .54);

  --green: #0B7C5C;
  --green-2: #096B4F;
  --yellow: #F4D24A;

  --base: var(--bg-1);
  --base-text: var(--text);

  --brand-color: var(--green);
  --secondary: var(--yellow);

  --bodyBg: var(--bg-0) !important;
  --bodyBg2: var(--bg-1) !important;
  --bodyBg3: var(--bg-2) !important;
  --bodyTxt: var(--text) !important;
  --bodyTxt2: var(--text-2) !important;
  --bodyTxt3: var(--text-3) !important;
  --bodyAccent: var(--green) !important;
  --bodyBorder: var(--line) !important;

  --sliderBg: var(--panel) !important;
  --sliderBg2: var(--panel-2) !important;
  --sliderTxt: var(--text) !important;
  --sliderTxt2: var(--text-2) !important;
  --sliderTxt3: var(--text-3) !important;
  --sliderBorder: var(--line) !important;

  --buttonBg: linear-gradient(180deg,
      color-mix(in srgb, var(--green) 78%, white),
      color-mix(in srgb, var(--green-2) 92%, black)) !important;
  --buttonTxt: #04110C !important;

  --oddBg: rgba(9, 12, 14, .92) !important;
  --oddBgHover: rgba(255, 255, 255, .055) !important;
  --oddTxt: var(--yellow) !important;
  --oddTxt2: rgba(234, 241, 244, .75) !important;
  --oddTxt3: rgba(234, 241, 244, .55) !important;
  --oddBorder: rgba(255, 255, 255, .11) !important;
  --oddRadius: 7px !important;

  --oddActiveBg: linear-gradient(180deg,
      color-mix(in srgb, var(--green) 82%, white),
      color-mix(in srgb, var(--green-2) 92%, black)) !important;
  --oddActiveTxt: #04110C !important;

  --vip-bg-0: #060b0c;
  --vip-bg-1: #071312;
  --vip-surface: rgba(255, 255, 255, .04);
  --vip-surface-2: rgba(255, 255, 255, .06);
  --vip-border: rgba(255, 255, 255, .10);
  --vip-border-2: rgba(255, 255, 255, .16);
  --vip-text: rgba(255, 255, 255, .92);
  --vip-text-dim: rgba(255, 255, 255, .72);
  --vip-black: rgba(0, 0, 0, .55);
  --vip-glow: rgba(0, 255, 170, .28);
  --vip-glow-2: rgba(0, 255, 170, .18);
  --vip-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  --vip-shadow-soft: 0 10px 28px rgba(0, 0, 0, .38);
  --vip-radius: 18px;
  --vip-radius-2: 16px;

  --lux-accent-hsl: var(--p, 152 84% 42%);
  --lux-accent: hsl(var(--lux-accent-hsl) / 1);

  --hx-green: #0e6f57;
  --hx-green-2: #0a5a46;
  --hx-green-3: #0c7f63;
  --hx-green-soft: rgba(14, 111, 87, .22);
  --hx-green-line: rgba(14, 111, 87, .45);
  --hx-text: rgba(255, 255, 255, .92);
}

:root[data-theme='dark'] body,
:root[data-theme='light'] body,
:host body {
  background:
    radial-gradient(1000px 500px at 15% 0%,
      color-mix(in srgb, var(--green) 10%, transparent),
      transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0)) !important;
  color: var(--text) !important;
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
[class*="btn"] {
  box-shadow: none !important;
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 10px;
}

.flex.items-center.justify-between .badge,
.flex.items-center.justify-between span[class*="rounded"][class*="full"] {
  background-color: #F6D81D !important;
  border-color: #F6D81D !important;
  color: #111 !important;
  font-weight: 800 !important;
}

.flex.items-center.justify-between .badge *,
.flex.items-center.justify-between span[class*="rounded"][class*="full"] * {
  color: #111 !important;
}

.header-top {
  position: sticky;
  top: 0;
  z-index: 3000;
  background:
    radial-gradient(1100px 240px at 18% 0%, rgba(27, 191, 135, .16), transparent 60%),
    radial-gradient(900px 260px at 85% 0%, rgba(246, 195, 79, .10), transparent 55%),
    linear-gradient(180deg, rgba(10, 16, 24, .94), rgba(7, 11, 16, .88));
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
}

.header-top .header-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-top .logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
  flex: 0 0 auto;
}

.header-top .logo-section .logo-img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
  transform: translateZ(0);
}

.header-top .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.header-top .quick-links,
.header-top .utility-icons,
.header-top .auth-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.header-top .quick-links {
  gap: 8px;
}

.header-top .quick-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  border: 1px solid transparent;
  transition:
    background .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s cubic-bezier(.2, .8, .2, 1),
    transform .18s cubic-bezier(.2, .8, .2, 1),
    color .18s cubic-bezier(.2, .8, .2, 1);
}

.header-top .quick-link svg {
  opacity: .92;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}

.header-top .quick-link span {
  font-weight: 600;
  letter-spacing: .2px;
  font-size: 13.5px;
}

.header-top .quick-link:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .95);
  transform: translateY(-1px);
}

.header-top .quick-link:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

.header-top .quick-link.icon-only {
  padding: 0 10px;
}

.header-top .quick-link.has-badge .badge {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: rgba(27, 191, 135, .16);
  border: 1px solid rgba(27, 191, 135, .28);
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}

.header-top .quick-link.vip-link {
  background: linear-gradient(90deg, rgba(246, 195, 79, .12), rgba(27, 191, 135, .08));
  border-color: rgba(246, 195, 79, .16);
}

.header-top .quick-link.vip-link:hover {
  background: linear-gradient(90deg, rgba(246, 195, 79, .16), rgba(27, 191, 135, .12));
  border-color: rgba(246, 195, 79, .22);
}

.header-top .utility-icon,
.header-top .lang-selector .lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition:
    background .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s cubic-bezier(.2, .8, .2, 1),
    transform .18s cubic-bezier(.2, .8, .2, 1),
    color .18s cubic-bezier(.2, .8, .2, 1);
}

.header-top .utility-icon:hover,
.header-top .lang-selector .lang-trigger:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  transform: translateY(-1px);
  color: rgba(255, 255, 255, .95);
}

.header-top .balance-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
  min-width: 92px;
}

.header-top .balance-value {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 14px;
  color: rgba(255, 255, 255, .95);
}

.header-top .balance-bonus {
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
}

.header-top .btn-deposit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(27, 191, 135, .28);
  color: rgba(255, 255, 255, .96);
  background: linear-gradient(180deg, rgba(27, 191, 135, .36), rgba(14, 165, 111, .20));
  box-shadow: 0 16px 35px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
  transition:
    transform .18s cubic-bezier(.2, .8, .2, 1),
    box-shadow .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s cubic-bezier(.2, .8, .2, 1),
    background .18s cubic-bezier(.2, .8, .2, 1);
}

.header-top .btn-deposit:hover {
  transform: translateY(-1px);
  border-color: rgba(27, 191, 135, .38);
  background: linear-gradient(180deg, rgba(27, 191, 135, .44), rgba(14, 165, 111, .26));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .45), 0 0 0 6px rgba(27, 191, 135, .10);
}

.header-top .btn-deposit:active {
  transform: translateY(0);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
}

.header-top .btn-deposit span {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 13.5px;
}

.header-top .btn-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .90);
  background: rgba(255, 255, 255, .03);
  transition:
    background .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s cubic-bezier(.2, .8, .2, 1),
    transform .18s cubic-bezier(.2, .8, .2, 1),
    color .18s cubic-bezier(.2, .8, .2, 1);
}

.header-top .btn-user:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
  color: rgba(255, 255, 255, .96);
}

.header-top .btn-user .chevron {
  opacity: .85;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}

.header-top .btn-user:hover .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

nav.header-nav {
  position: sticky;
  top: 56px;
  z-index: 2000;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

nav.header-nav .nav-container {
  max-width: 1240px;
  margin: 0 auto !important;
  min-height: 46px;
  padding: 6px clamp(18px, 3vw, 40px) 12px !important;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px) !important;
  justify-content: space-between !important;
  position: relative;
  background:
    radial-gradient(1100px 240px at 18% 0%, rgba(14,111,87,.20), transparent 60%),
    radial-gradient(900px 260px at 85% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, #0E6F57 0%, #0A5A46 100%) !important;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
}

nav.header-nav .nav-container::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 195, 79, 0), rgba(246, 195, 79, 1), rgba(246, 195, 79, 0));
  opacity: .95;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

nav.header-nav a.nav-item,
nav.header-nav button.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 clamp(14px, 2.4vw, 22px) !important;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid transparent;
  transition:
    background .18s cubic-bezier(.2, .8, .2, 1),
    border-color .18s cubic-bezier(.2, .8, .2, 1),
    transform .18s cubic-bezier(.2, .8, .2, 1),
    color .18s cubic-bezier(.2, .8, .2, 1);
}

nav.header-nav a.nav-item svg,
nav.header-nav button.nav-item svg {
  opacity: .9;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}

nav.header-nav a.nav-item span,
nav.header-nav button.nav-item span {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 13.5px;
}

nav.header-nav a.nav-item:hover,
nav.header-nav button.nav-item:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .94);
  transform: translateY(-1px);
}

nav.header-nav a.nav-item:hover svg,
nav.header-nav button.nav-item:hover svg {
  transform: translateY(-1px);
  opacity: 1;
}

nav.header-nav a.nav-item.active {
  background: rgba(246, 195, 79, .10);
  border-color: rgba(246, 195, 79, .22);
  box-shadow: inset 0 0 0 1px rgba(246, 195, 79, .10);
  color: rgba(255, 255, 255, .96);
}

nav.header-nav .nav-dropdown {
  position: relative;
}

nav.header-nav .nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

nav.header-nav .dropdown-trigger .dropdown-chevron {
  margin-left: 6px;
  opacity: .85;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

nav.header-nav .nav-dropdown:hover .dropdown-trigger .dropdown-chevron {
  transform: rotate(180deg);
}

nav.header-nav .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  padding: 8px;
  border-radius: 14px;
  background:
    radial-gradient(600px 160px at 30% 0%, rgba(27, 191, 135, .12), transparent 60%),
    linear-gradient(180deg, rgba(12, 18, 26, .96), rgba(8, 12, 18, .96));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s cubic-bezier(.2, .8, .2, 1), transform .16s cubic-bezier(.2, .8, .2, 1);
}

nav.header-nav .nav-dropdown:hover .dropdown-menu,
nav.header-nav .dropdown-menu:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

nav.header-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background .16s cubic-bezier(.2, .8, .2, 1),
    border-color .16s cubic-bezier(.2, .8, .2, 1),
    transform .16s cubic-bezier(.2, .8, .2, 1);
}

nav.header-nav .dropdown-item:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  transform: translateY(-1px);
}

nav.header-nav .dropdown-item.featured {
  background: linear-gradient(90deg, rgba(246, 195, 79, .14), rgba(27, 191, 135, .10));
  border-color: rgba(246, 195, 79, .18);
}

nav.header-nav .dropdown-item.featured:hover {
  background: linear-gradient(90deg, rgba(246, 195, 79, .18), rgba(27, 191, 135, .14));
  border-color: rgba(246, 195, 79, .22);
}

.flex.w-full.justify-between {
  justify-content: center !important;
  gap: 56px !important;
  row-gap: 34px !important;
  padding: 26px 32px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.flex.w-full.justify-between>.flex.flex-col.gap-3.relative.pb-5.mb-2 {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.desktop-cr-container {
  gap: 10px !important;
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2, .85, .2, 1), filter .22s cubic-bezier(.2, .85, .2, 1);
}

.desktop-cr-container:hover {
  transform: translateY(-4px) scale(1.07) !important;
}

.desktop-cr-item {
  width: 92px !important;
  height: 80px !important;
  border-radius: 22px !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 192, 138, .18) !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(17, 192, 138, .26), rgba(17, 192, 138, 0) 55%),
    radial-gradient(circle at 80% 85%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .35) !important;
  transition:
    transform .22s cubic-bezier(.2, .85, .2, 1),
    box-shadow .22s cubic-bezier(.2, .85, .2, 1),
    border-color .22s cubic-bezier(.2, .85, .2, 1),
    filter .22s cubic-bezier(.2, .85, .2, 1);
}

.desktop-cr-item::before {
  content: "";
  position: absolute;
  inset: -60%;
  background:
    conic-gradient(from 210deg,
      rgba(17, 192, 138, 0),
      rgba(17, 192, 138, .22),
      rgba(255, 255, 255, .10),
      rgba(17, 192, 138, 0));
  filter: blur(18px);
  opacity: .55;
  transform: rotate(12deg);
  pointer-events: none;
}

.desktop-cr-item::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  opacity: .65;
}

.desktop-cr-item:hover {
  border-color: rgba(17, 192, 138, .42) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .52),
    0 0 0 3px rgba(17, 192, 138, .12),
    0 0 34px rgba(17, 192, 138, .18),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  filter: saturate(1.08);
}

.desktop-cr-item:active {
  transform: translateY(1px) scale(.99);
}

.desktop-cr-item svg {
  width: 36px !important;
  height: 36px !important;
  color: rgba(255, 255, 255, .92) !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}

.desktop-cr-container>span {
  font-size: 12px !important;
  line-height: 1.1 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78) !important;
  gap: 0 !important;
}

.desktop-cr-container:hover>span {
  color: rgba(17, 192, 138, .95) !important;
}

.desktop-cr-container.is-active .desktop-cr-item,
a.desktop-cr-item.active,
a.desktop-cr-item.router-link-active,
a.desktop-cr-item[aria-current="page"] {
  border-color: rgba(17, 192, 138, .60) !important;
  box-shadow:
    0 28px 74px rgba(0, 0, 0, .56),
    0 0 0 3px rgba(17, 192, 138, .18),
    0 0 54px rgba(17, 192, 138, .22),
    inset 0 0 0 1px rgba(17, 192, 138, .18) !important;
}

.desktop-cr-container.is-active .desktop-cr-item::after,
a.desktop-cr-item.active::after,
a.desktop-cr-item.router-link-active::after,
a.desktop-cr-item[aria-current="page"]::after {
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(17, 192, 138, 1), transparent);
  box-shadow: 0 0 18px rgba(17, 192, 138, .45);
}

.desktop-cr-container.is-active>span,
a.desktop-cr-item.active+span,
a.desktop-cr-item.router-link-active+span,
a.desktop-cr-item[aria-current="page"]+span {
  color: rgba(17, 192, 138, 1) !important;
}

.flex.justify-between.h-8.bg-base-300 {
  height: auto !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: linear-gradient(180deg, rgba(7, 32, 26, .78), rgba(7, 32, 26, .55)) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(12px);
}

.bg-primary.text-primary-content.rounded-md.rounded-l-none {
  height: 100% !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, .95), rgba(5, 150, 105, .75)) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  position: relative;
  white-space: nowrap;
}

.bg-primary.text-primary-content.rounded-md.rounded-l-none::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  opacity: .55;
}

.bg-primary.text-primary-content.rounded-md.rounded-l-none h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, .95) !important;
  text-shadow: 0 10px 18px rgba(0, 0, 0, .35) !important;
}

.flex.items-center.z-10.relative.gap-1 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.flex.items-center.z-10.relative.gap-1>span.border.border-primary {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(16, 185, 129, .45) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12)) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  user-select: none;
}

.flex.items-center.z-10.relative.gap-1>span.border.border-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, .75) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .30), 0 0 0 3px rgba(16, 185, 129, .12), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.flex.items-center.z-10.relative.gap-1>span.border.border-primary svg {
  width: 22px !important;
  height: 22px !important;
  color: rgba(16, 185, 129, .95) !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

button.btn.btn-primary.bg-primary {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  width: auto !important;
  min-width: 150px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 185, 129, .55) !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, .95), rgba(5, 150, 105, .70)) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

button.btn.btn-primary.bg-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, .85) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32), 0 0 0 4px rgba(16, 185, 129, .14), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  filter: saturate(1.05);
}

.w-full.py-2.mb-3.svelte-17myeuz {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.providers-grid.svelte-17myeuz {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(17, 192, 138, .14), transparent 60%),
    radial-gradient(700px 240px at 85% 0%, rgba(246, 195, 79, .08), transparent 55%),
    linear-gradient(180deg, rgba(12, 18, 26, .72), rgba(8, 12, 18, .62)) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 46px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(17, 192, 138, .14), rgba(17, 192, 138, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .35) !important;
  color: rgba(255, 255, 255, .82) !important;
  cursor: pointer !important;
  transform: translateZ(0);
  transition:
    transform .16s cubic-bezier(.2, .8, .2, 1),
    box-shadow .16s cubic-bezier(.2, .8, .2, 1),
    border-color .16s cubic-bezier(.2, .8, .2, 1),
    background .16s cubic-bezier(.2, .8, .2, 1),
    filter .16s cubic-bezier(.2, .8, .2, 1);
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(17, 192, 138, .34) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .50), 0 0 0 3px rgba(17, 192, 138, .12), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  filter: saturate(1.06);
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz .provider-logo.svelte-17myeuz {
  height: 28px !important;
  width: auto !important;
  max-width: 110px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
  transform: translateZ(0);
  opacity: .92;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .16s, filter .16s;
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz:hover .provider-logo.svelte-17myeuz {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz .fallback-text {
  display: none !important;
}

.providers-grid.svelte-17myeuz .provider-chip.active.svelte-17myeuz {
  border-color: rgba(17, 192, 138, .60) !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(17, 192, 138, .22), rgba(17, 192, 138, 0) 58%),
    linear-gradient(180deg, rgba(17, 192, 138, .18), rgba(255, 255, 255, .02)) !important;
  box-shadow: 0 22px 62px rgba(0, 0, 0, .55), 0 0 0 3px rgba(17, 192, 138, .16), 0 0 48px rgba(17, 192, 138, .18), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  color: rgba(255, 255, 255, .96) !important;
}

.providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz>div.absolute {
  top: 6px !important;
  left: 8px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, .95), rgba(239, 68, 68, .72)) !important;
}

.filter-grid.casino,
.filters-wrap,
.filters-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
}

.filter-grid.casino::-webkit-scrollbar,
.filters-wrap::-webkit-scrollbar,
.filters-strip::-webkit-scrollbar {
  display: none !important;
}

.filters-strip {
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(92px, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  gap: clamp(16px, 2.2vw, 34px) !important;
  padding: 14px clamp(12px, 2vw, 26px) 12px !important;
  margin: 0 !important;
}

button.filter-item,
.filter-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 92px !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  overflow: visible !important;
  transform: translateZ(0) !important;
  position: relative !important;
}

button.filter-item::after,
.filter-item::after {
  content: "" !important;
  width: 58px !important;
  height: 3px !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  margin-top: -2px !important;
  background: linear-gradient(90deg, transparent, rgba(22, 255, 203, .95), transparent) !important;
  box-shadow: 0 0 18px rgba(22, 255, 203, .35) !important;
  transition: opacity .18s ease !important;
}

button.filter-item.is-active::after,
.filter-item.is-active::after,
button.filter-item.active::after,
.filter-item.active::after,
button.filter-item[aria-current="true"]::after,
.filter-item[aria-current="true"]::after,
button.filter-item[aria-pressed="true"]::after,
.filter-item[aria-pressed="true"]::after {
  opacity: 1 !important;
}

.filter-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(22, 255, 203, .22) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(16, 166, 125, .42) 0%, rgba(10, 92, 70, .18) 52%, rgba(7, 10, 12, .74) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .58),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -14px 26px rgba(0, 0, 0, .42) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
  transform-origin: center !important;
  will-change: transform !important;
}

.filter-icon>svg,
.filter-icon svg>svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

.filter-icon svg,
.filter-icon svg svg {
  fill: currentColor !important;
  color: rgba(234, 241, 244, .92) !important;
}

.filter-icon svg path,
.filter-icon svg svg path {
  fill: currentColor !important;
}

.filter-label {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  color: rgba(234, 241, 244, .62) !important;
  white-space: nowrap !important;
  transition: color .18s ease, opacity .18s ease !important;
}

button.filter-item:hover,
.filter-item:hover {
  z-index: 6 !important;
}

button.filter-item:hover .filter-icon,
.filter-item:hover .filter-icon {
  transform: translateY(-3px) scale(1.04) !important;
  border-color: rgba(22, 255, 203, .22) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, .64),
    0 0 0 3px rgba(22, 255, 203, .10),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -16px 30px rgba(0, 0, 0, .44) !important;
  filter: saturate(1.08) !important;
}

button.filter-item:hover .filter-label,
.filter-item:hover .filter-label {
  color: rgba(234, 241, 244, .85) !important;
}

button.filter-item:active .filter-icon,
.filter-item:active .filter-icon {
  transform: translateY(0) scale(1.01) !important;
}

button.filter-item.is-active .filter-label,
.filter-item.is-active .filter-label,
button.filter-item.active .filter-label,
.filter-item.active .filter-label,
button.filter-item[aria-current="true"] .filter-label,
.filter-item[aria-current="true"] .filter-label,
button.filter-item[aria-pressed="true"] .filter-label,
.filter-item[aria-pressed="true"] .filter-label {
  color: rgba(234, 241, 244, .92) !important;
}

.filter-grid.casino {
  padding: 14px clamp(10px, 2vw, 22px) 18px !important;
}

.w-full.py-2.svelte-4ge2h9 {
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(0, 255, 170, .10), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(0, 200, 255, .08), transparent 55%),
    linear-gradient(180deg, var(--vip-bg-1), var(--vip-bg-0));
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .55);
  padding: 14px 14px 6px;
}

.games-grid.svelte-4ge2h9 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px !important;
  align-items: stretch;
}

.game-card.svelte-4ge2h9 {
  position: relative !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(22,255,203,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateY(10px) scale(.985);
  will-change: transform, filter, box-shadow;
  opacity: 0;
  animation: vipCardIn .55s cubic-bezier(.2, .9, .2, 1) forwards;
  animation-delay: var(--delay, 0s);
  --footerH: 46px;
  padding-bottom: var(--footerH);
}

@keyframes vipCardIn {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.game-card.svelte-4ge2h9::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 25% 10%, rgba(0,255,170,.22), transparent 60%),
    radial-gradient(460px 240px at 85% 10%, rgba(246,210,74,.12), transparent 60%);
  opacity:.18;
  z-index:0;
}

.game-card.svelte-4ge2h9::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%),
    radial-gradient(120% 120% at 50% 110%, rgba(0,0,0,.40), rgba(0,0,0,0) 55%);
  opacity:.95;
  z-index:3;
}

.game-card.svelte-4ge2h9 > * {
  position: relative;
  z-index: 1;
}

.game-image-container.svelte-4ge2h9 {
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(0,0,0,.12), rgba(0,0,0,.65)) !important;
  position: relative;
}

.game-image-container.svelte-4ge2h9::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 50% 110%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  opacity:.85;
}

.game-card.svelte-4ge2h9:hover .game-image-container.svelte-4ge2h9::after {
  opacity:.95;
}

.game-image.svelte-4ge2h9 {
  transform: scale(1.0001);
  filter: saturate(1.05) contrast(1.06);
  transition: transform .70s cubic-bezier(.2,.9,.2,1), filter .70s ease;
}

.game-card.svelte-4ge2h9:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(22,255,203,.20) !important;
  box-shadow:
    0 28px 78px rgba(0,0,0,.72),
    0 0 0 4px rgba(22,255,203,.08),
    0 0 44px rgba(0,255,170,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.game-card.svelte-4ge2h9:hover .game-image.svelte-4ge2h9 {
  transform: scale(1.09);
  filter: saturate(1.10) contrast(1.08);
}

.hover-overlay.svelte-4ge2h9 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(680px 320px at 50% 30%, rgba(0,0,0,.10), rgba(0,0,0,.78)) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease;
}

.game-card.svelte-4ge2h9:hover .hover-overlay.svelte-4ge2h9 {
  opacity: 1;
  transform: translateY(0);
}

.play-btn.svelte-4ge2h9 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  outline: none;
  color: var(--vip-text);
  letter-spacing: .2px;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  border: 1px solid rgba(0,255,170,.34) !important;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,255,170,.22), rgba(0,255,170,.12)) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 34px rgba(0,255,170,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.game-card.svelte-4ge2h9:hover .play-btn.svelte-4ge2h9 {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.game-card.svelte-4ge2h9 .play-btn.svelte-4ge2h9:hover {
  border-color: rgba(0,255,170,.52) !important;
  background: linear-gradient(180deg, rgba(0,255,170,.28), rgba(0,255,170,.16)) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,.62),
    0 0 54px rgba(0,255,170,.22),
    0 0 0 6px rgba(0,255,170,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.play-btn.svelte-4ge2h9 span {
  font-weight: 800;
  font-size: 13px;
  text-transform: none;
}

.favorite-btn.svelte-4ge2h9 {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  outline: none;
  color: rgba(255, 255, 255, .90);
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(14,111,87,.98), rgba(10,90,70,.88)) !important;
  border: 1px solid rgba(0,255,170,.22) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 26px rgba(0,255,170,.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.favorite-btn.svelte-4ge2h9 svg {
  width: 18px !important;
  height: 18px !important;
  color: rgba(255, 255, 255, .95) !important;
  filter: drop-shadow(0 10px 22px rgba(14, 111, 87, .35)) !important;
}

.favorite-btn.svelte-4ge2h9:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: rgba(0,255,170,.40) !important;
  box-shadow:
    0 24px 62px rgba(0,0,0,.62),
    0 0 38px rgba(0,255,170,.18),
    0 0 0 5px rgba(0,255,170,.10),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  filter: saturate(1.06);
}

.new-badge.svelte-4ge2h9 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(246,210,74,.22), rgba(246,210,74,.12)) !important;
  border: 1px solid rgba(246,210,74,.34) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 26px rgba(246,210,74,.14) !important;
}

.new-badge.svelte-4ge2h9 svg {
  color: var(--lux-accent) !important;
  opacity: .95;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

.new-badge.svelte-4ge2h9 span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
}

.game-card.svelte-4ge2h9 > :last-child {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  height: var(--footerH) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 12px !important;
  border-color: rgb(var(--brand-rgb) / .34) !important;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgb(var(--brand-rgb) / .34), rgb(var(--brand-rgb) / .20)) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .55),
    0 0 26px rgb(var(--brand-rgb) / .12),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  color: rgba(234, 241, 244, .92) !important;
  font-weight: 850 !important;
  letter-spacing: .2px !important;
}

.game-card.svelte-4ge2h9 > :last-child::after {
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(246 216 29 / 1), transparent) !important;
  box-shadow: 0 0 24px rgb(246 216 29 / .45) !important;
  opacity: 1 !important;
  pointer-events:none;
}

#bottom-menu {
  background: radial-gradient(120% 140% at 50% 0%, rgba(16, 185, 129, .22) 0%, rgba(6, 95, 70, .30) 35%, rgba(2, 6, 5, .92) 100%) !important;
  border: 1px solid rgba(16, 185, 129, .28) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  box-shadow: none !important;
}

#bottom-menu .grid.grid-cols-4 {
  gap: 0 !important;
}

#bottom-menu .grid.grid-cols-4>div {
  position: relative !important;
  padding: .15rem .15rem !important;
  gap: .18rem !important;
  transition: transform .16s ease, filter .16s ease, opacity .16s ease !important;
}

#bottom-menu .grid.grid-cols-4>div.border-r {
  border-right-color: rgba(16, 185, 129, .14) !important;
}

#bottom-menu .grid.grid-cols-4>div svg.iconCustom {
  color: rgba(197, 255, 235, .92) !important;
  transition: transform .16s ease, color .16s ease, filter .16s ease !important;
  filter: none !important;
}

#bottom-menu .grid.grid-cols-4>div span {
  color: rgba(197, 255, 235, .88) !important;
  letter-spacing: .15px !important;
}

#bottom-menu .grid.grid-cols-4>div::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px -12px !important;
  border-radius: 20px !important;
  opacity: 0 !important;
  background: radial-gradient(70% 80% at 50% 20%, rgba(16, 185, 129, .26) 0%, rgba(16, 185, 129, .12) 35%, rgba(0, 0, 0, 0) 72%) !important;
  transition: opacity .16s ease !important;
  pointer-events: none !important;
}

#bottom-menu .grid.grid-cols-4>div::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: -11px !important;
  height: 3px !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(16, 185, 129, .85) 45%, rgba(16, 185, 129, .55) 55%, rgba(0, 0, 0, 0) 100%) !important;
  transition: opacity .16s ease !important;
  pointer-events: none !important;
}

#bottom-menu .grid.grid-cols-4>div:hover {
  filter: brightness(1.08) !important;
}

#bottom-menu .grid.grid-cols-4>div:hover::before,
#bottom-menu .grid.grid-cols-4>div:hover::after {
  opacity: 1 !important;
}

#bottom-menu .grid.grid-cols-4>div:hover svg.iconCustom {
  color: rgba(255, 255, 255, .98) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

#bottom-menu .grid.grid-cols-4>div:active {
  transform: translateY(1px) scale(.99) !important;
}

#chat-fx {
  --chatBolt: rgba(255, 214, 0, .95);
  --chatBolt2: rgba(120, 255, 210, .75);
  --chatGlow: rgba(255, 214, 0, .28);
  position: fixed;
  right: 0%;
  bottom: 1%;
  z-index: 2147483642;
  pointer-events: none;
}

#chat-fx .fx-wrap {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  border-radius: 18px;
  overflow: visible;
  transform: translateZ(0);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
}

#chat-fx .fx-wrap::before {
  content: "";
  position: absolute;
  inset: -18px -16px -18px -18px;
  border-radius: 28px;
  background:
    radial-gradient(closest-side, var(--chatGlow), rgba(255, 214, 0, 0) 65%),
    radial-gradient(closest-side, rgba(120, 255, 210, .18), rgba(120, 255, 210, 0) 70%);
  opacity: 0;
  transform: scale(.96);
  animation: chatGlow 2.6s ease-in-out infinite;
  pointer-events: none;
}

#chat-fx .fx-wrap::after {
  content: "";
  position: absolute;
  inset: -10px -10px -10px -10px;
  border-radius: 26px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transform: skewX(-14deg) translateX(-24px);
  pointer-events: none;
  animation: chatFlash 4.8s ease-in-out infinite;
}

#chat-fx img {
  display: block;
  border: none !important;
  border-radius: 18px;
  position: relative;
  z-index: 2;
  transform-origin: 80% 80%;
  animation: chatPulse 2.6s ease-in-out infinite;
  will-change: transform, filter;
  filter: saturate(1.06) contrast(1.04);
}

#chat-fx .bolt {
  position: absolute;
  inset: -22px -18px -22px -22px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: boltStrike 4.8s cubic-bezier(.2, .9, .2, 1) infinite;
}

#chat-fx .bolt svg {
  width: 110px;
  height: 110px;
  position: absolute;
  right: -8px;
  bottom: -10px;
  transform: rotate(10deg);
  filter: drop-shadow(0 0 10px rgba(255, 214, 0, .55)) drop-shadow(0 0 22px rgba(120, 255, 210, .28));
}

@keyframes chatPulse {
  0%, 72%, 100% { transform: translateZ(0) scale(1); }
  76% { transform: translateZ(0) scale(1.018); }
  80% { transform: translateZ(0) scale(1); }
}

@keyframes chatGlow {
  0%, 68%, 100% { opacity: 0; transform: scale(.96); }
  72% { opacity: .55; transform: scale(1.03); }
  78% { opacity: .18; transform: scale(1.01); }
}

@keyframes chatFlash {
  0%, 73%, 100% { opacity: 0; transform: skewX(-14deg) translateX(-24px); }
  74% { opacity: .85; transform: skewX(-14deg) translateX(18px); }
  76% { opacity: 0; transform: skewX(-14deg) translateX(34px); }
}

@keyframes boltStrike {
  0%, 73% { opacity: 0; transform: translateZ(0) scale(.92); }
  74% { opacity: 1; transform: translateZ(0) scale(1.02); }
  75% { opacity: .35; transform: translateZ(0) scale(1.00); }
  76% { opacity: 0; transform: translateZ(0) scale(.98); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #chat-fx img,
  #chat-fx .fx-wrap::before,
  #chat-fx .fx-wrap::after,
  #chat-fx .bolt {
    animation: none !important;
  }
  #chat-fx .fx-wrap::before { opacity: .25; }
}

.header-divider.svelte-z6pbiz,
.header-top .header-divider {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-top.svelte-z6pbiz,
nav.header-nav.svelte-z6pbiz {
  background: var(--panel) !important;
}

.header-divider.svelte-z6pbiz {
  background: var(--panel) !important;
  opacity: 1 !important;
}

.header-top.svelte-z6pbiz,
nav.header-nav.svelte-z6pbiz,
.nav-container.svelte-z6pbiz {
  border: 0 !important;
  box-shadow: none !important;
}

:root {
  --brand-rgb: 11 124 92;
}

:where(.games-grid,.game-card,.game-modal,.game-detail,.game-view)
  :is(a,button,[role="button"],.play-btn,.game-btn,.wild-btn,.game-title,.game-name) {
  background: rgb(var(--brand-rgb) / .22) !important;
  border: 1px solid rgb(var(--brand-rgb) / .55) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

:where(.games-grid,.game-card,.game-modal,.game-detail,.game-view)
  :is(a,button,[role="button"],.play-btn,.game-btn,.wild-btn,.game-title,.game-name):hover {
  background: rgb(var(--brand-rgb) / .32) !important;
  border-color: rgb(var(--brand-rgb) / .72) !important;
}

:where(.games-grid,.game-card,.game-modal,.game-detail,.game-view)
  :is(a,button,[role="button"],.play-btn,.game-btn,.wild-btn,.game-title,.game-name):active {
  background: rgb(var(--brand-rgb) / .40) !important;
  transform: translateY(1px) !important;
}

:is(.games-grid.svelte-4ge2h9,[class*="games-grid"],.w-full.py-2.svelte-4ge2h9,.w-full.py-2)
:is(.drop-shadow-md.cursor-pointer,.cursor-pointer.drop-shadow-md) .flex.flex-row.relative.py-2.rounded-b-lg.bg-primary {
  height: 46px !important;
  padding: 0 12px !important;
  border-radius: 0 0 20px 20px !important;
  border-top: 1px solid rgba(11,124,92,.28) !important;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(11,124,92,.34), rgba(9,107,79,.22)) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 26px rgba(11,124,92,.10),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

:is(.games-grid.svelte-4ge2h9,[class*="games-grid"],.w-full.py-2.svelte-4ge2h9,.w-full.py-2)
:is(.drop-shadow-md.cursor-pointer,.cursor-pointer.drop-shadow-md) .flex.flex-row.relative.py-2.rounded-b-lg.bg-primary::after {
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(246 216 29 / 1), transparent) !important;
  box-shadow: 0 0 24px rgb(246 216 29 / .45) !important;
  opacity: 1 !important;
  pointer-events:none;
}

@media (max-width:1100px) {
  .header-top .header-container { max-width: 100%; padding: 10px 10px; }
  nav.header-nav .nav-container { max-width: 100%; }
}

@media (max-width:980px) {
  nav.header-nav { top: 52px; }

  .header-top .quick-links,
  .header-top .utility-icons { padding: 5px; }

  .header-top .quick-link span { font-size: 13px; }
  .header-top .btn-deposit span { font-size: 13px; }

  nav.header-nav a.nav-item,
  nav.header-nav button.nav-item {
    height: 36px;
    padding: 0 12px !important;
  }

  nav.header-nav a.nav-item span,
  nav.header-nav button.nav-item span { font-size: 13px; }

  .providers-grid.svelte-17myeuz {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .providers-grid.svelte-17myeuz::-webkit-scrollbar { height: 10px; }
  .providers-grid.svelte-17myeuz::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 10px; }
  .providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz { scroll-snap-align: start; flex: 0 0 auto !important; }
}

@media (max-width:768px) {
  .games-grid.svelte-4ge2h9 { gap: 12px !important; }

  .favorite-btn.svelte-4ge2h9 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  .play-btn.svelte-4ge2h9 { padding: 11px 16px; }

  .filters-strip {
    grid-auto-columns: minmax(84px, 1fr) !important;
    gap: 12px !important;
    padding: 12px 12px 10px !important;
    justify-items: start !important;
  }

  button.filter-item,
  .filter-item { min-width: 84px !important; }

  .filter-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
  }

  .filter-label {
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width:640px) {
  .flex.w-full.justify-between {
    gap: 28px !important;
    row-gap: 24px !important;
    padding: 18px 16px !important;
  }

  .flex.justify-between.h-8.bg-base-300 {
    padding: 10px 10px !important;
    gap: 10px !important;
  }

  .flex.items-center.z-10.relative.gap-1 {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  button.btn.btn-primary.bg-primary {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width:520px) {
  .games-grid.svelte-4ge2h9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
  }

  .game-card.svelte-4ge2h9 { --footerH: 44px; }

  .favorite-btn.svelte-4ge2h9 {
    width: 38px !important;
    height: 38px !important;
  }

  .providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz {
    height: 44px !important;
    padding: 0 12px !important;
  }

  .providers-grid.svelte-17myeuz .provider-chip.svelte-17myeuz .provider-logo.svelte-17myeuz {
    height: 26px !important;
    max-width: 96px !important;
  }
}

@media (hover:none) and (pointer:coarse) {
  .hover-overlay.svelte-4ge2h9 {
    opacity: 1;
    transform: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .62));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    align-items: flex-end;
    padding: 14px;
  }

  .play-btn.svelte-4ge2h9 {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
  }
}
.provider-chip,
.grid-chip{
  transform:translateZ(0);
  transition:transform .18s ease, filter .18s ease;
  will-change:transform;
  transform-origin:center;
}

.provider-chip:hover,
.grid-chip:hover{
  transform:scale(1.08);
  z-index:10;
  filter:saturate(1.08) brightness(1.03);
}

.provider-chip:active,
.grid-chip:active{
  transform:scale(1.04);
}

.provider-chip.active,
.grid-chip.active{
  transform:scale(1.06);
}

.provider-chip:focus-visible,
.grid-chip:focus-visible{
  outline:none;
  transform:scale(1.08);
}

.flex.items-center.gap-2.overflow-x-auto,
.providers-grid{
  overflow:visible !important;
}

.flex.items-center.gap-2.overflow-x-auto{
  position:relative;
  z-index:1;
}

.provider-chip,
.grid-chip{
  position:relative;
  z-index:1;
}

.provider-chip:hover,
.grid-chip:hover{
  z-index:50;
}

@media (prefers-reduced-motion:reduce){
  .provider-chip,
  .grid-chip{
    transition:none !important;
  }
}