/* MondiBet — soft premium TitaBet-inspired theme */
:root {
  --mb-bg: #030510;
  --mb-surface: #07192d;
  --mb-card: #071f3b;
  --mb-gold: #f4c857;
  --mb-gold-soft: #e5b645;
  --mb-text: #ffffff;
  --mb-muted: #a3aab7;
  --mb-border: rgba(244, 200, 87, 0.16);
  --mb-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

html.dark,
body {
  background: var(--mb-bg) !important;
  background: #05111f !important;
  color: var(--mb-text);
}

/* Header + navigation */
header:not([class*="from-amber"]),
.header-safe-top {
  background: rgba(7, 25, 45, 0.96) !important;
  border-color: var(--mb-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Current-address announcement above the header */
.mondi-address-bar {
  position: relative;
  z-index: 9998;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 44px 6px 16px;
  color: #e7eaf0;
  background: #07192d;
  border-bottom: 1px solid rgba(244, 200, 87, 0.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.mondi-address-bar p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}

.mondi-address-bar strong { color: var(--mb-gold); font-weight: 700; }

.mondi-address-close {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  transition: color 180ms ease, background-color 180ms ease;
}

.mondi-address-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

header nav a,
header nav button {
  color: #d7dbe3 !important;
  transition: color 180ms ease, background-color 180ms ease;
}

header nav a:hover,
header nav button:hover {
  color: var(--mb-gold) !important;
  background: rgba(244, 200, 87, 0.08) !important;
}

/* Quick actions */
button[style*="background: rgb(244, 200, 87)"],
button.bg-primary {
  background: linear-gradient(135deg, var(--mb-gold), var(--mb-gold-soft)) !important;
  color: var(--mb-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 7px 22px rgba(244, 200, 87, 0.16) !important;
}

button[style*="background: rgb(229, 182, 69)"] {
  background: linear-gradient(135deg, var(--mb-gold-soft), #c99726) !important;
  color: var(--mb-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 7px 22px rgba(229, 182, 69, 0.14) !important;
}

/* Full-width banner polish */
main > div,
main > section {
  scroll-margin-top: 90px;
}

img[src*="banner-main-desktop"],
img[src*="mondi_banne_web"],
img[src*="mondi_banne_mobile"] {
  display: block;
  width: 100% !important;
  border-radius: 12px;
}

.mondi-main {
  max-width: 1600px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.mondi-hero-stack {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 4px !important;
}

.mondi-hero-stack > .flex:empty { display: none !important; }
.mondi-hero-stack > * + * { margin-top: 10px !important; }

.mondi-main-banner-row {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.mondi-main-banner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 10px !important;
}

.mondi-main-banner > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* MondiBet short-link strip replacing the former main image banner. */
.mondi-shortlink-row {
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
}

/* Balance the visual gap above and below the short-link strip. */
.mondi-hero-stack:has(.mondi-shortlink-row) + .mondi-game-section {
  margin-top: 14px !important;
}

.mondi-shortlink-card {
  position: relative;
  isolation: isolate;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  min-height: 92px;
  padding: 15px 22px;
  overflow: hidden;
  border: 1px solid rgba(244, 200, 87, 0.3);
  border-radius: 14px !important;
  color: #edf3fb !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(244, 200, 87, 0.17), transparent 24%),
    radial-gradient(circle at 88% 20%, rgba(33, 91, 145, 0.24), transparent 30%),
    linear-gradient(115deg, #07192d 0%, #09243f 56%, #05111f 100%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  text-decoration: none !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.mondi-shortlink-card > * { display: none !important; }

.mondi-shortlink-card::after {
  content: attr(data-shortlink-label);
  position: relative;
  z-index: 1;
  display: block;
  color: #d7dfeb;
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 750;
  letter-spacing: 0.015em;
  text-align: center;
  white-space: pre-wrap;
}

.mondi-shortlink-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(244, 200, 87, 0.09) 48%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 650ms ease;
}

.mondi-shortlink-card:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 200, 87, 0.58);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38), 0 0 26px rgba(244, 200, 87, 0.09);
}

.mondi-shortlink-card:hover::before { transform: translateX(110%); }

.mb-shortlink-content {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  color: #cbd5e2;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: center;
}

.mb-shortlink-code {
  color: #f4c857;
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 950;
  letter-spacing: -0.025em;
  text-shadow: 0 0 22px rgba(244, 200, 87, 0.18);
}

.mb-shortlink-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f4c857;
  background: rgba(244, 200, 87, 0.09);
  font-size: 22px;
  transition: transform 220ms ease, background-color 220ms ease;
}

.mondi-shortlink-card:hover .mb-shortlink-arrow {
  transform: translateX(3px);
  background: rgba(244, 200, 87, 0.16);
}

@media (max-width: 767px) {
  .mondi-shortlink-row { margin-top: 12px !important; }
  .mondi-hero-stack:has(.mondi-shortlink-row) + .mondi-game-section {
    margin-top: 10px !important;
  }

  .mondi-shortlink-card {
    min-height: 78px;
    padding: 11px 12px;
    border-radius: 11px !important;
  }
  .mondi-shortlink-card::after {
    font-size: clamp(10px, 3.1vw, 14px);
    white-space: pre-wrap;
  }
  .mb-shortlink-content {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    font-size: clamp(8px, 2.45vw, 11px);
    text-align: center;
    white-space: nowrap;
  }
  .mb-shortlink-code { font-size: clamp(15px, 4.35vw, 20px); line-height: 1.05; }
  .mb-shortlink-arrow { width: 28px; height: 28px; font-size: 18px; }
}

/* Section title artwork without moving React-owned DOM nodes. */
.mondi-title-source-hidden { display: none !important; }

.mondi-game-section::before {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 7 / 1;
  margin: 0;
  border-radius: 9px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 768px) {
  .mondi-slot-section::before {
    background-image: url("/uploads/b3d22e23_title-slot-desktop.webp");
  }
  .mondi-livecasino-section::before {
    background-image: url("/uploads/049d2f73_title-livecasino-desktop.webp");
  }
}

@media (max-width: 767px) {
  .mondi-game-section::before {
    aspect-ratio: 5 / 1;
    margin-bottom: 0;
    border-radius: 7px;
  }
  .mondi-slot-section::before {
    background-image: url("/uploads/7e9e8f3e_title-slot-mobile.webp");
  }
  .mondi-livecasino-section::before {
    background-image: url("/uploads/4f813992_title-livecasino-mobile.webp");
  }
}

/* Desktop quick actions: compact premium controls instead of large pills. */
.mondi-quick-actions-wrap {
  width: 100%;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 7px 10px 8px !important;
}

.mondi-quick-actions-grid {
  width: min(100%, 470px);
  margin-left: auto;
  gap: 8px !important;
}

.mondi-quick-action {
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  letter-spacing: 0.045em !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
}

.mondi-quick-actions-bar {
  background: rgba(7, 25, 45, 0.7) !important;
  border-color: rgba(244, 200, 87, 0.11) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Subtle depth without a busy casino-pattern background. */
.mondi-scroll-shell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 16%, rgba(17, 56, 94, 0.26), transparent 31%),
    radial-gradient(circle at 82% 38%, rgba(244, 200, 87, 0.045), transparent 25%),
    linear-gradient(180deg, #030510 0%, #050b18 46%, #030510 100%) !important;
    radial-gradient(ellipse at 12% 8%, rgba(31, 82, 128, 0.42) 0%, transparent 34%),
    radial-gradient(ellipse at 88% 32%, rgba(244, 200, 87, 0.065) 0%, transparent 25%),
    radial-gradient(ellipse at 52% 78%, rgba(16, 57, 94, 0.34) 0%, transparent 36%),
    linear-gradient(180deg, #07192d 0%, #0a223d 48%, #07192d 100%) !important;
  background-attachment: local !important;
}

.mondi-scroll-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

/* Unified page surfaces — removes route-specific black backgrounds. */
.bg-bg-main:not(body),
main.bg-slate-950,
[class~="bg-[#0b0d15]"],
[class~="bg-[#0d1117]"] {
  background-color: transparent !important;
}

/* Permanent app background: works before JS enhancement and on direct route loads. */
html.dark,
body.app-body,
body.app-body > .flex-1,
body.app-body > [class*="overflow-y-auto"],
.mondi-scroll-shell {
  background-color: #05111f !important;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(25, 68, 108, 0.34) 0%, transparent 34%),
    radial-gradient(ellipse at 88% 34%, rgba(244, 200, 87, 0.05) 0%, transparent 25%),
    radial-gradient(ellipse at 48% 76%, rgba(12, 46, 78, 0.28) 0%, transparent 36%),
    linear-gradient(180deg, #05111f 0%, #071b30 50%, #05111f 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

main.bg-slate-950,
main[class~="bg-[#0b0d15]"],
main[class~="bg-[#0d1117]"] {
  background:
    radial-gradient(ellipse at 15% 12%, rgba(31, 82, 128, 0.28), transparent 34%),
    radial-gradient(ellipse at 88% 45%, rgba(244, 200, 87, 0.045), transparent 24%),
    linear-gradient(180deg, rgba(7, 31, 59, 0.78), rgba(7, 25, 45, 0.92)) !important;
}

/* Wheel and bonus pages ship their own near-black gradients. */
[class~="from-[#0a0a0f]"],
[class~="via-[#0f0f1a]"],
[class~="to-[#0a0a0f]"],
[class~="from-zinc-900"][class~="to-zinc-950"] {
  background-color: #07192d !important;
  background-image:
    radial-gradient(circle at 50% 15%, rgba(25, 72, 117, 0.4), transparent 35%),
    linear-gradient(180deg, #0a223d 0%, #07192d 100%) !important;
}

/* Dark content panels become navy cards; intentional image overlays stay intact. */
[class~="bg-zinc-900/50"] {
  background-color: rgba(7, 31, 59, 0.68) !important;
  border-color: rgba(244, 200, 87, 0.1) !important;
}

/* The original footer gradient is injected on every route. */
[class~="from-[#0d0d0d]"][class~="to-black"] {
  background-image: linear-gradient(180deg, #071f3b 0%, #07192d 100%) !important;
}

/* Premium mobile bottom navigation */
.mondi-mobile-nav {
  display: none;
}

@media (max-width: 767px) {
  .mondi-mobile-nav {
    position: fixed;
    z-index: 9990;
    left: 8px;
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom));
    height: 68px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding: 5px 6px;
    border: 1px solid rgba(244, 200, 87, 0.17);
    border-radius: 18px;
    color: #aeb8c8;
    background: rgba(5, 17, 31, 0.94);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mondi-mobile-nav-item {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-radius: 11px;
    color: inherit;
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mondi-mobile-nav-item:active { background: rgba(244, 200, 87, 0.08); }

  .mondi-mobile-nav-icon {
    height: 23px;
    display: grid;
    place-items: center;
    color: #d8dee8;
    font-family: Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
    font-weight: 700;
  }

  .mondi-mobile-nav-label {
    max-width: 100%;
    overflow: hidden;
    color: #929eaf;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mondi-mobile-nav-item.is-active .mondi-mobile-nav-icon,
  .mondi-mobile-nav-item.is-active .mondi-mobile-nav-label {
    color: var(--mb-gold);
  }

  .mondi-mobile-nav-menu {
    align-self: end;
    height: 72px;
    margin-top: -19px;
    overflow: visible;
  }

  .mondi-mobile-nav-menu .mondi-mobile-nav-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 3px;
    border: 4px solid #05111f;
    border-radius: 50%;
    color: #05111f;
    background: linear-gradient(145deg, #ffda72, var(--mb-gold-soft));
    box-shadow: 0 8px 20px rgba(244, 200, 87, 0.27);
    font-size: 24px;
  }

  .mondi-mobile-nav-menu .mondi-mobile-nav-label { color: #d9bd70; }

  body:not(.mondi-game-mode) > [class*="overflow-y-auto"] {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body.mondi-account-open .mondi-mobile-nav,
  body.mondi-sports-mode .mondi-mobile-nav,
  body.mondi-game-mode .mondi-mobile-nav {
    display: none !important;
  }
}

/* Casino game/demo pages use the full-screen shell only on mobile. */
@media (max-width: 767px) {
  body.mondi-game-mode header,
  body.mondi-game-mode footer,
  body.mondi-game-mode .mondi-address-bar,
  body.mondi-game-mode .mondi-quick-actions-bar {
    display: none !important;
  }

  body.mondi-game-mode > [class*="overflow-y-auto"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.mondi-content-root { padding-bottom: 26px !important; }

/* Footer continuation of the same navy/gold system. */
footer.mondi-footer {
  position: relative;
  color: var(--mb-muted) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 50, 82, 0.7), transparent 42%),
    linear-gradient(180deg, #07192d 0%, #030510 88%) !important;
    linear-gradient(180deg, #071f3b 0%, #07192d 88%) !important;
  border-top: 1px solid rgba(244, 200, 87, 0.18) !important;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.18);
}

footer.mondi-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(360px, 58%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--mb-gold), transparent);
  opacity: 0.72;
}

footer.mondi-footer h1,
footer.mondi-footer h2,
footer.mondi-footer h3,
footer.mondi-footer h4,
footer.mondi-footer h5,
footer.mondi-footer h6 { color: #fff !important; }

footer.mondi-footer a { color: #aeb7c5 !important; transition: color 180ms ease; }
footer.mondi-footer a:hover { color: var(--mb-gold) !important; }
footer.mondi-footer p { color: #8995a7 !important; }

/* Affiliate invitation placed directly below the jackpot pool. */
.mondi-affiliate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  min-height: 250px;
  margin: 12px 4px 26px;
  overflow: hidden;
  border: 1px solid rgba(244, 200, 87, 0.22);
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(118deg, rgba(7, 25, 45, 0.98) 0%, rgba(7, 31, 59, 0.98) 58%, rgba(20, 48, 111, 0.96) 100%);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.3);
  isolation: isolate;
}

.mondi-affiliate::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -65%;
  right: -8%;
  width: 48%;
  height: 220%;
  background: linear-gradient(135deg, var(--mb-gold), #d69b00);
  transform: rotate(24deg);
  opacity: 0.94;
}

.mondi-affiliate::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 68% 44%, rgba(244, 200, 87, 0.13), transparent 25%);
  pointer-events: none;
}

.mondi-affiliate-copy {
  align-self: center;
  padding: 30px 36px;
}

.mondi-affiliate-logo {
  display: block;
  width: auto;
  height: 34px;
  margin-bottom: 18px;
  object-fit: contain;
}

.mondi-affiliate h2 {
  max-width: 780px;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(27px, 2.7vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.mondi-affiliate h2 span { color: var(--mb-gold); }

.mondi-affiliate-copy p {
  max-width: 760px;
  margin: 0;
  color: #cad2df !important;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.6;
}

.mondi-affiliate-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 25px 34px;
}

.mondi-affiliate-chart {
  position: relative;
  width: 154px;
  height: 126px;
  margin-right: 112px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(145deg, #263444, #0c121b);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mondi-affiliate-chart::before {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mb-gold);
  font-size: 82px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 8px 20px rgba(244, 200, 87, 0.28);
  transform: translateY(-4px);
}

.mondi-affiliate-chart::after {
  content: "₺";
  position: absolute;
  right: -30px;
  bottom: -27px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 4px solid #bc8500;
  border-radius: 50%;
  color: #07192d;
  background: var(--mb-gold);
  font-size: 31px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32);
}

.mondi-affiliate-cta {
  position: absolute;
  right: 28px;
  bottom: 31px;
  min-width: 156px;
  padding: 13px 21px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: #fff !important;
  background: linear-gradient(135deg, #184782, #0c284d);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, filter 180ms ease;
}

.mondi-affiliate-cta:hover { color: #fff !important; filter: brightness(1.13); transform: translateY(-2px); }

/* Trust / privileges panel directly below the affiliate banner. */
.mondi-privileges {
  margin: 0 4px 30px;
  padding: 30px 34px 32px;
  border: 1px solid rgba(244, 200, 87, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -20%, rgba(28, 70, 126, 0.38), transparent 42%),
    linear-gradient(180deg, #071f3b 0%, #06172b 100%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.mondi-privileges-heading {
  margin: 0 0 25px;
  color: var(--mb-gold);
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.025em;
}

.mondi-privilege-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  max-width: 1040px;
  margin: 0 auto 28px;
}

.mondi-privilege-card {
  position: relative;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 18px 12px;
  overflow: hidden;
  border: 1px solid rgba(244, 200, 87, 0.32);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(155deg, #183274 0%, #0b2054 58%, #061329 100%);
  box-shadow: inset 0 -3px 0 rgba(244, 200, 87, 0.82), 0 12px 26px rgba(0, 0, 0, 0.22);
  text-align: center;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.mondi-privilege-card::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 50%;
  width: 130px;
  height: 90px;
  border-radius: 50%;
  background: rgba(244, 200, 87, 0.1);
  filter: blur(18px);
  transform: translateX(-50%);
}

.mondi-privilege-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 200, 87, 0.62);
  box-shadow: inset 0 -3px 0 var(--mb-gold), 0 17px 32px rgba(0, 0, 0, 0.3);
}

.mondi-privilege-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  color: var(--mb-gold);
  background: rgba(3, 5, 16, 0.36);
  font-size: 29px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mondi-privilege-card strong { position: relative; font-size: 14px; line-height: 1.25; }
.mondi-privilege-card small { position: relative; color: #aeb9c8; font-size: 10px; }

.mondi-sponsor-logo {
  position: relative;
  width: 92px;
  height: 82px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, 0.28));
  transition: transform 220ms ease;
}

.mondi-privilege-card:hover .mondi-sponsor-logo { transform: scale(1.06); }

.mondi-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.mondi-trust-badge {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 76px;
  padding: 11px 16px;
  border: 2px solid #d8a71e;
  border-radius: 17px;
  color: #07192d;
  background: linear-gradient(180deg, #f5f6f8 0%, #cfd3da 100%);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 #fff;
}

.mondi-trust-badge > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07192d;
  background: var(--mb-gold);
  font-size: 20px;
  font-weight: 900;
}

.mondi-trust-badge div { display: flex; flex-direction: column; }
.mondi-trust-badge strong { font-size: 17px; line-height: 1.05; font-weight: 900; }
.mondi-trust-badge small { margin-top: 4px; color: #35445a; font-size: 10px; font-weight: 700; }

.mondi-quick-action > span:first-child {
  width: 25px !important;
  height: 25px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* JS relocates each title directly above its own game grid. */
.mondi-section-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  border-radius: 9px !important;
}

.mondi-section-title > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

.mondi-game-section {
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* JS assigns these stable classes; no dependency on changing gcol hashes. */
.mondi-game-grid {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  margin-top: -14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.mondi-game-grid > .mondi-game-column,
.mondi-game-grid > [class*="gcol-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
  min-width: 0;
}

.mondi-game-card {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: 10px !important;
  border: 0 !important;
  background: var(--mb-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.mondi-game-card > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), filter 300ms ease !important;
}

.mondi-game-column > div,
.mondi-game-column .h-full {
  min-height: 0 !important;
  height: auto !important;
}

.mondi-game-column a { display: block; }

.mondi-game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background-color 300ms ease;
}

.mondi-game-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(3, 5, 16, 0.34) 100%),
    rgba(0, 0, 0, 0);
  box-shadow: none !important;
  transition: background-color 300ms ease, opacity 300ms ease;
}

@media (hover: hover) {
  .mondi-game-card:hover {
    z-index: 3;
    transform: translateY(-4px);
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.38), 0 0 22px rgba(244, 200, 87, 0.09);
  }

  .mondi-game-card:hover > img {
    transform: scale(1.05) !important;
    filter: saturate(1.06) contrast(1.03);
  }

  .mondi-game-card:hover > .mondi-game-overlay {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .mondi-game-card:hover::after { background-color: rgba(0, 0, 0, 0.2); }
}

/* Login / register modal — remove the old purple cast */
[role="dialog"]:has(input[placeholder*="Kullanıcı"]):not(.mondi-user-dashboard),
[role="dialog"]:has(input[placeholder*="E-posta"]):not(.mondi-user-dashboard),
[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) {
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 200, 87, 0.11), transparent 32%),
    linear-gradient(155deg, #0a1c32 0%, #050b18 68%, #030510 100%) !important;
  border: 1px solid rgba(244, 200, 87, 0.2) !important;
  color: #fff !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 38px rgba(244, 200, 87, 0.08) !important;
}

[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) > div > div:first-child {
  background: rgba(7, 25, 45, 0.94) !important;
  border-color: rgba(244, 200, 87, 0.12) !important;
}

[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) input:not([type="checkbox"]) {
  background: rgba(7, 31, 59, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) input:not([type="checkbox"]):focus {
  border-color: rgba(244, 200, 87, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(244, 200, 87, 0.1) !important;
}

[role="dialog"] input::placeholder { color: rgba(255, 255, 255, 0.42) !important; }
[role="dialog"] input[type="checkbox"] { accent-color: var(--mb-gold); }
[role="dialog"]:has(input[type="password"]) input::placeholder { color: rgba(255, 255, 255, 0.42) !important; }
[role="dialog"]:has(input[type="password"]) input[type="checkbox"] { accent-color: var(--mb-gold); }

/* Text actions inside auth dialogs must remain links, not gold rectangles. */
[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) button[style*="color: rgb(244, 200, 87)"],
[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) button[style*="color: rgb(229, 182, 69)"] {
  width: auto !important;
  height: auto !important;
  padding: 4px 0 !important;
  color: var(--mb-gold) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) button[style*="color: rgb(244, 200, 87)"]:hover,
[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) button[style*="color: rgb(229, 182, 69)"]:hover {
  color: #ffe08a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Login promo panel currently has an inline purple gradient. */
[role="dialog"]:has(input[type="password"]):not(.mondi-user-dashboard) div[style*="linear-gradient(135deg"] {
  background:
    radial-gradient(circle at 88% 20%, rgba(244, 200, 87, 0.2), transparent 28%),
    linear-gradient(135deg, rgba(244, 200, 87, 0.16), rgba(7, 31, 59, 0.76) 48%, rgba(3, 5, 16, 0.96)) !important;
  border: 1px solid rgba(244, 200, 87, 0.14);
}

/* Softer mobile proportions */
@media (max-width: 767px) {
  .mondi-main { padding-left: 8px !important; padding-right: 8px !important; }

  .mondi-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: -10px !important;
  }

  .mondi-game-card {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 7px !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
  }

  .mondi-game-column > div,
  .mondi-game-column .h-full {
    min-height: 0 !important;
    height: auto !important;
  }

  .mondi-game-card > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  .mondi-game-overlay { z-index: 2; }

  .mondi-main-banner,
  .mondi-main-banner > img {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mondi-hero-stack { padding-top: 6px !important; padding-bottom: 2px !important; }
  .mondi-hero-stack > * + * { margin-top: 7px !important; }
  .mondi-quick-actions-wrap { padding: 7px 8px 8px !important; }
  .mondi-quick-actions-grid { width: 100%; margin-left: 0; gap: 7px !important; }
  .mondi-quick-action { height: 40px !important; border-radius: 8px !important; font-size: 11px !important; }
  .mondi-address-bar { padding: 6px 38px 6px 10px; }
  .mondi-address-bar p { font-size: 9px; }
  .mondi-address-close { right: 8px; }
  .mondi-content-root { padding-bottom: 18px !important; }

  .mondi-affiliate {
    flex: 0 0 auto !important;
    height: auto !important;
    block-size: auto !important;
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 8px 0 20px;
    border-radius: 15px;
  }

  .mondi-affiliate::before { top: 66%; right: -35%; width: 105%; height: 80%; transform: rotate(-12deg); }
  .mondi-affiliate-copy { padding: 22px 20px 8px; }
  .mondi-affiliate-logo { height: 27px; margin-bottom: 14px; }
  .mondi-affiliate h2 { margin-bottom: 10px; font-size: 26px; }
  .mondi-affiliate-copy p { font-size: 12px; line-height: 1.55; }
  .mondi-affiliate-visual { min-height: 150px; padding: 12px 18px 20px; justify-content: flex-start; }
  .mondi-affiliate-chart { width: 104px; height: 84px; margin: 5px 0 0 12px; border-radius: 13px; }
  .mondi-affiliate-chart::before { font-size: 54px; }
  .mondi-affiliate-chart::after { right: -21px; bottom: -18px; width: 46px; height: 46px; border-width: 3px; font-size: 23px; }
  .mondi-affiliate-cta { right: 18px; bottom: 28px; min-width: 135px; padding: 11px 15px; font-size: 12px; }

  .mondi-privileges {
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 0 22px;
    padding: 22px 12px 18px;
    border-radius: 15px;
  }
  .mondi-privileges-heading { margin-bottom: 18px; font-size: 24px; }
  .mondi-privilege-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
  .mondi-privilege-card { min-height: 115px; gap: 7px; padding: 12px 8px; border-radius: 14px; }
  .mondi-privilege-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 23px; }
  .mondi-sponsor-logo { width: 68px; height: 61px; }
  .mondi-privilege-card strong { font-size: 12px; }
  .mondi-privilege-card small { font-size: 9px; }
  .mondi-trust-grid { grid-template-columns: 1fr; gap: 8px; }
  .mondi-trust-badge { min-height: 62px; grid-template-columns: 37px 1fr; padding: 8px 13px; border-radius: 13px; }
  .mondi-trust-badge > span { width: 31px; height: 31px; font-size: 17px; }
  .mondi-trust-badge strong { font-size: 15px; }

  img[src*="title-slot-mobile"],
  img[src*="title-livecasino-mobile"] {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  .mondi-section-title { margin-bottom: 9px !important; border-radius: 7px !important; }
  .mondi-game-section { margin-top: 18px !important; margin-bottom: 26px !important; }

  [role="dialog"]:has(input[type="password"]) {
    width: calc(100% - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .mondi-game-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mondi-game-card,
  .mondi-game-card > img,
  .mondi-game-overlay { transition: none !important; }
}


/* MondiBet — append after the supplied base CSS. */

/* The user dashboard contains password inputs but is not an auth dialog. */
.mondi-user-dashboard {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #fff !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62) !important;
}

.mondi-user-dashboard > div {
  border-color: #222 !important;
}

.mondi-user-dashboard > div[style*="background"] {
  background: #111 !important;
}

.mondi-user-dashboard input:not([type="checkbox"]) {
  background: #222 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mondi-user-dashboard input:not([type="checkbox"]):focus {
  border-color: rgba(244, 200, 87, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(244, 200, 87, 0.1) !important;
}

.mondi-user-dashboard input::placeholder { color: #777 !important; }

.mondi-user-dashboard div[style*="linear-gradient(135deg"] {
  background: linear-gradient(135deg, #f4c857 0%, #b48817 100%) !important;
  border: 0 !important;
}

.mondi-user-dashboard button.bg-primary,
.mondi-user-dashboard button[style*="background-color: rgb(244, 200, 87)"] {
  background: #f4c857 !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mondi-user-dashboard button[style*="background-color: rgb(229, 182, 69)"] {
  background: #e5b645 !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mondi-user-dashboard button.bg-\[\#00C853\],
.mondi-user-dashboard button[class*="bg-[#00C853]"] {
  background: #00c853 !important;
  color: #000 !important;
}

/* Hide the unwanted betting-suggestion launcher everywhere. */
button[title="Bahis Öner"],
.mondi-bet-suggest {
  display: none !important;
}

/* Live-support launcher: navy/gold MondiBet treatment. */
.mondi-support-launcher > button,
button.mondi-support-launcher {
  background: linear-gradient(135deg, #f4c857, #d7a82f) !important;
  color: #05111f !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 32px rgba(244, 200, 87, 0.25) !important;
}

.mondi-support-launcher svg { color: #05111f !important; }

.mondi-support-panel {
  background: #07192d !important;
  border-color: rgba(244, 200, 87, 0.24) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

.mondi-support-panel > div:first-child {
  background: linear-gradient(135deg, #0b2948, #07192d) !important;
  border-bottom: 1px solid rgba(244, 200, 87, 0.18) !important;
}

.mondi-support-panel > div:nth-child(2) {
  background: #0a2038 !important;
  border-color: rgba(244, 200, 87, 0.14) !important;
}

.mondi-support-panel > div:last-child {
  background: linear-gradient(180deg, #0a2038, #07192d) !important;
}

.mondi-support-panel h3,
.mondi-support-panel h4 { color: #fff !important; }
.mondi-support-panel p { color: #aeb9c8 !important; }

.mondi-support-panel input {
  background: #0b2948 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.mondi-support-panel input::placeholder { color: #7f91a5 !important; }
.mondi-support-panel input:focus {
  border-color: rgba(244, 200, 87, 0.68) !important;
  box-shadow: 0 0 0 3px rgba(244, 200, 87, 0.1) !important;
}

.mondi-support-panel button.bg-green-600,
.mondi-support-panel button[class*="hover:bg-green"] {
  background: linear-gradient(135deg, #f4c857, #d7a82f) !important;
  color: #05111f !important;
  font-weight: 800 !important;
}

@media (max-width: 767px) {
  body.mondi-support-open .mondi-mobile-nav { display: none !important; }
  .mondi-support-panel { border: 0 !important; border-radius: 0 !important; }
}

/* Final live-support lock — applies to logged-in and guest variants. */
html body button[title="Bahis Öner"],
html body .mondi-bet-suggest {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .mondi-support-launcher > button {
  background: linear-gradient(145deg, #f8d66f 0%, #e5b645 55%, #b88417 100%) !important;
  color: #05111f !important;
  border: 1px solid rgba(255, 235, 166, 0.72) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 0 4px rgba(244, 200, 87, 0.09),
    0 0 24px rgba(244, 200, 87, 0.2) !important;
}

html body .mondi-support-launcher > button:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 15px 36px rgba(0, 0, 0, 0.5),
    0 0 0 5px rgba(244, 200, 87, 0.12),
    0 0 30px rgba(244, 200, 87, 0.27) !important;
}

html body .mondi-support-launcher > button svg {
  color: #05111f !important;
  stroke: currentColor !important;
}

html body .mondi-support-launcher > button span {
  color: #fff !important;
  background: rgba(5, 17, 31, 0.96) !important;
  border: 1px solid rgba(244, 200, 87, 0.18) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

html body .mondi-support-panel {
  background: #07192d !important;
  border: 1px solid rgba(244, 200, 87, 0.26) !important;
}

html body .mondi-support-panel > div:first-child {
  background:
    radial-gradient(circle at 10% 0%, rgba(244, 200, 87, 0.16), transparent 42%),
    linear-gradient(135deg, #0c2a48 0%, #07192d 68%, #05111f 100%) !important;
}

html body .mondi-support-panel > div:first-child > div:first-child > div:first-child {
  background: rgba(244, 200, 87, 0.14) !important;
  border: 1px solid rgba(244, 200, 87, 0.28) !important;
}

html body .mondi-support-panel > div:first-child svg {
  color: #f4c857 !important;
  stroke: currentColor !important;
}

html body .mondi-support-panel > div:first-child button {
  color: #f4c857 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .mondi-support-panel > div:first-child button:hover {
  background: rgba(244, 200, 87, 0.1) !important;
}

html body .mondi-support-panel > div:nth-child(2) {
  background: #081e35 !important;
  border-bottom-color: rgba(244, 200, 87, 0.13) !important;
}

html body .mondi-support-panel > div:last-child {
  background:
    radial-gradient(circle at 50% 100%, rgba(244, 200, 87, 0.05), transparent 42%),
    linear-gradient(180deg, #0a2038 0%, #07192d 100%) !important;
}

html body .mondi-support-panel h3,
html body .mondi-support-panel h4 { color: #fff !important; }
html body .mondi-support-panel p { color: #aeb9c8 !important; }

html body .mondi-support-panel input {
  background: rgba(5, 17, 31, 0.86) !important;
  border: 1px solid rgba(244, 200, 87, 0.18) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html body .mondi-support-panel input::placeholder { color: #7f91a5 !important; }

html body .mondi-support-panel button.bg-green-600,
html body .mondi-support-panel button[class*="hover:bg-green"] {
  background: linear-gradient(135deg, #f4c857, #d7a82f) !important;
  color: #05111f !important;
  border: 1px solid rgba(255, 235, 166, 0.38) !important;
  box-shadow: 0 10px 24px rgba(244, 200, 87, 0.16) !important;
}

html body .mondi-support-panel button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Mobile bottom navigation — larger and more legible. */
@media (max-width: 767px) {
  nav.mondi-mobile-nav {
    height: 72px;
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
  }

  .mondi-mobile-nav-item { gap: 3px; }

  .mondi-mobile-nav-icon {
    height: 27px;
    font-size: 26px;
    font-weight: 800;
  }

  .mondi-mobile-nav-label {
    color: #c0c9d5;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0.035em;
  }

  .mondi-mobile-nav-menu { height: 76px; }

  .mondi-mobile-nav-menu .mondi-mobile-nav-icon {
    width: 52px;
    height: 52px;
    font-size: 0;
  }

  .mondi-mobile-nav-menu .mondi-mobile-nav-icon::before {
    content: "☰";
    display: block;
    color: #05111f;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
  }

  .mondi-mobile-nav-item:not(.mondi-mobile-nav-menu) .mondi-mobile-nav-icon img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
  }

  .mondi-mobile-nav-item:not(.mondi-mobile-nav-menu).is-active .mondi-mobile-nav-icon img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(69%) saturate(541%) hue-rotate(348deg) brightness(101%) contrast(91%);
    opacity: 1;
    transform: translateY(-1px);
  }
}

/* User dashboard — keep every tab on the component's original charcoal palette. */
html body .mondi-user-dashboard,
html body .mondi-user-dashboard > div:last-child {
  background: #1a1a1a !important;
  background-image: none !important;
  color: #fff !important;
}

html body .mondi-user-dashboard {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation-duration: 160ms !important;
  transition-duration: 160ms !important;
}

html body .mondi-user-dashboard > div:nth-of-type(2),
html body .mondi-user-dashboard > div[style*="background: rgb(17, 17, 17)"] {
  background: #111 !important;
  background-image: none !important;
}

html body .mondi-user-dashboard [class*="bg-[#1a1a1a]"],
html body .mondi-user-dashboard [class*="bg-[#111]"] {
  background-color: inherit !important;
  background-image: none !important;
}

html body .mondi-user-dashboard [class*="border-[#222]"] { border-color: #222 !important; }
html body .mondi-user-dashboard [class*="border-[#333]"] { border-color: #333 !important; }

html body .mondi-user-dashboard input:not([type="checkbox"]),
html body .mondi-user-dashboard [class*="bg-[#222]"] {
  background: #222 !important;
  background-image: none !important;
  border-color: #333 !important;
}

@media (max-width: 767px) {
  html body .mondi-user-dashboard {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--app-vh, 100dvh) !important;
    max-height: none !important;
    inset: 12px !important;
    left: 12px !important;
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(var(--app-vh, 100dvh) - 24px) !important;
    max-height: calc(var(--app-vh, 100dvh) - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border: 1px solid rgba(244, 200, 87, 0.2) !important;
    border-radius: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .mondi-user-dashboard,
  html body .mondi-user-dashboard * { box-sizing: border-box; }

  html body .mondi-user-dashboard > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .mondi-user-dashboard > div:nth-of-type(2) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .mondi-user-dashboard > div:last-child > div:last-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.mondi-auth-open .mondi-mobile-nav,
  body:has(.mondi-auth-dialog) .mondi-mobile-nav {
    display: none !important;
  }
}

/* MondiBet scrollbar — desktop Chromium/Safari plus Firefox fallback. */
@media (min-width: 768px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #c89b2d #07192d;
  }

  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track {
    background: #07192d;
    border-left: 1px solid rgba(244, 200, 87, 0.08);
  }
  *::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid #07192d;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4c857, #b88417);
  }
  *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffe082, #d4a735); }
  *::-webkit-scrollbar-corner { background: #07192d; }
}

/* Mobile navigation — restrained travelling gold contour. */
@property --mondi-nav-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media (max-width: 767px) {
  nav.mondi-mobile-nav {
    isolation: isolate;
    border: 1px solid rgba(244, 200, 87, 0.34);
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.52),
      0 0 0 1px rgba(244, 200, 87, 0.06),
      0 0 24px rgba(244, 200, 87, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }

  nav.mondi-mobile-nav::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    --mondi-nav-angle: 0deg;
    background: conic-gradient(
      from var(--mondi-nav-angle),
      transparent 0deg 245deg,
      rgba(244, 200, 87, 0.08) 270deg,
      rgba(255, 226, 137, 0.95) 305deg,
      rgba(244, 200, 87, 0.16) 338deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: mondi-nav-contour 7s linear infinite;
  }

  nav.mondi-mobile-nav::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 17px;
    background: rgba(5, 17, 31, 0.96);
    pointer-events: none;
  }

  nav.mondi-mobile-nav > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes mondi-nav-contour {
  to { --mondi-nav-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  nav.mondi-mobile-nav::before { animation: none !important; }
}

/* Quick actions — Telegram + expandable WhatsApp access. */
.mondi-quick-actions-grid.mondi-quick-actions-grid-social {
  width: min(100%, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) 168px 180px !important;
  align-items: center;
  gap: 10px !important;
  overflow: visible;
}

.mondi-social-action-wrap { position: relative; min-width: 0; }

.mondi-social-action {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #fff !important;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.mondi-social-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mondi-telegram-action { background: linear-gradient(135deg, #168bd2, #086aa8) !important; }
.mondi-telegram-action:disabled { cursor: not-allowed; filter: saturate(0.45); opacity: 0.58; }
.mondi-whatsapp-action { background: linear-gradient(135deg, #25d366, #128c4a) !important; }

.mondi-social-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1;
}

.mondi-social-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.mondi-social-chevron { margin-left: 2px; font-size: 16px; transition: transform 180ms ease; }
.mondi-social-action-wrap.is-open .mondi-social-chevron { transform: rotate(180deg); }

.mondi-whatsapp-menu {
  position: absolute;
  z-index: 9999;
  right: 0;
  top: calc(100% + 8px);
  width: min(290px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid rgba(244, 200, 87, 0.2);
  border-radius: 15px;
  background: rgba(5, 17, 31, 0.98);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(18px);
}

.mondi-quick-actions-bar {
  position: relative !important;
  z-index: 70 !important;
  overflow: visible !important;
}

/* Keep quick actions below the mobile header drawer while it is open. */
@media (max-width: 767px) {
  .mondi-quick-actions-bar {
    z-index: 1 !important;
  }
}

.mondi-quick-actions-wrap,
.mondi-quick-actions-grid { overflow: visible !important; }

.mondi-whatsapp-menu[hidden] { display: none !important; }
.mondi-whatsapp-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none;
}
.mondi-whatsapp-menu a:hover { background: rgba(244, 200, 87, 0.09); }
.mondi-whatsapp-menu strong { font-size: 13px; }
.mondi-whatsapp-menu small { color: #9eabba; font-size: 11px; }

@media (max-width: 767px) {
  .mondi-quick-actions-grid.mondi-quick-actions-grid-social {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .mondi-social-action { height: 42px; padding: 0 10px; border-radius: 10px; font-size: 11px; }
  .mondi-whatsapp-menu { right: 0; }
}

/* Bonus detail modal — opaque premium surface and correctly fitted artwork. */
.mondi-bonus-dialog {
  width: min(1120px, calc(100vw - 40px)) !important;
  max-width: 1120px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mondi-bonus-shell {
  width: 100% !important;
  height: auto !important;
  max-height: min(760px, calc(100dvh - 40px)) !important;
  border: 1px solid rgba(244, 200, 87, 0.2) !important;
  background: #07192d !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68), 0 0 38px rgba(244, 200, 87, 0.08) !important;
}

.mondi-bonus-image-pane {
  overflow: hidden;
  background: #05111f !important;
}

.mondi-bonus-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #05111f;
}

.mondi-bonus-content {
  color: #d7deea !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 200, 87, 0.08), transparent 34%),
    linear-gradient(155deg, #0a2038 0%, #07192d 58%, #05111f 100%) !important;
}

/* Nothing from the page chrome may cross over an open bonus dialog. */
body.mondi-bonus-open .mondi-quick-actions-bar {
  display: none !important;
}

@media (min-width: 768px) {
  .mondi-bonus-shell {
    height: auto !important;
    min-height: 460px;
    align-items: stretch;
  }
  .mondi-bonus-image-pane {
    width: 44% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mondi-bonus-image {
    height: auto !important;
    max-height: min(760px, calc(100dvh - 40px)) !important;
  }
  .mondi-bonus-content {
    width: 56% !important;
    max-height: min(760px, calc(100dvh - 40px)) !important;
  }
}

@media (max-width: 767px) {
  body.mondi-bonus-open .mondi-mobile-nav { display: none !important; }

  .mondi-bonus-dialog {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .mondi-bonus-shell { max-height: calc(100dvh - 16px) !important; }
  .mondi-bonus-image-pane { flex: 0 0 auto; }
  .mondi-bonus-image {
    height: auto !important;
    max-height: 38dvh !important;
  }
  .mondi-bonus-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }
}

/* Unified top-to-bottom rhythm for every main homepage section. */
body:has(.mondi-shortlink-row) {
  --mondi-section-gap: 26px;
}

.mondi-hero-stack:has(.mondi-shortlink-row) {
  margin-bottom: var(--mondi-section-gap) !important;
}

.mondi-hero-stack:has(.mondi-shortlink-row) + .mondi-game-section,
.mondi-game-section,
.mondi-jackpot-section,
.mondi-affiliate,
.mondi-privileges {
  margin-top: 0 !important;
  margin-bottom: var(--mondi-section-gap) !important;
}

@media (max-width: 767px) {
  body:has(.mondi-shortlink-row) { --mondi-section-gap: 20px; }
}