/* Landing-page styles for the editorial hero (inside welcome-bonus)
   and the long-form article. Table/list rules need !important because
   .ui-vg-prose resets cell borders and padding site-wide. */

.vg-lp-welcome,
.vg-lp-article {
  box-sizing: border-box;
  width: 100%;
  color: var(--text-primary, #fff);
}

.vg-lp-article {
  max-width: 1280px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ hero */
/* Full-bleed background already lives in the dumped welcome-bonus markup;
   we only add a dark shade so the longer SEO copy stays readable. */
.vg-lp-welcome__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 8, 13, 0.78) 0%, rgba(9, 8, 13, 0.45) 55%, rgba(9, 8, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(9, 8, 13, 0.35) 0%, rgba(9, 8, 13, 0.55) 100%);
  pointer-events: none;
}

.vg-lp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  z-index: 1;
  text-align: center;
}

.vg-lp-hero__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9dd501;
}

.vg-lp-hero__title {
  margin: 0;
  font-family: var(--font-h1-typeface, "Onest"), sans-serif;
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.vg-lp-hero__lead {
  max-width: 62ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.vg-lp-hero__points {
  display: grid;
  gap: 8px 20px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 62ch;
}

.vg-lp-hero__points li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.vg-lp-hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9dd501, #539401);
  box-shadow: inset 0 0 0 3px rgba(9, 8, 13, 0.7);
}

.vg-lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  width: 100%;
}

.vg-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease;
}

.vg-lp-btn--primary {
  background: linear-gradient(180deg, #9dd501, #539401);
  color: #0b1400;
}

.vg-lp-btn--primary:hover {
  filter: brightness(1.08);
}

.vg-lp-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(9, 8, 13, 0.25);
  backdrop-filter: blur(4px);
}

.vg-lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.vg-lp-hero__disclaimer {
  margin: 2px 0 0;
  max-width: 62ch;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 1024px) {
  .vg-lp-hero-copy {
    align-items: flex-start;
    text-align: left;
  }

  .vg-lp-hero__points {
    grid-template-columns: 1fr 1fr;
  }

  .vg-lp-hero__actions {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------- carousels */
/* Swiper ships with overflow:hidden + transform-based motion. Without its
   JS the strips are frozen; native overflow restores horizontal scrolling. */
.swiper.swiper-horizontal.vg-lp-scroll,
.swiper.swiper-horizontal {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x !important;
  cursor: grab;
  scrollbar-width: none;
}

.swiper.swiper-horizontal::-webkit-scrollbar {
  display: none;
}

.swiper.swiper-horizontal .swiper-wrapper {
  transform: none !important;
  width: max-content !important;
  min-width: 100%;
  height: auto !important;
}

.swiper.swiper-horizontal .swiper-slide {
  height: auto !important;
}

.vg-lp-scroll--dragging {
  cursor: grabbing !important;
  user-select: none;
}

.vg-lp-scroll--dragging a,
.vg-lp-scroll--dragging button {
  pointer-events: none;
}

/* Swiper progress scrollbar (the thin line under each strip). */
.ui-vg-carousel-scrollbar.swiper-scrollbar-horizontal {
  position: relative;
  overflow: hidden;
  min-width: 64px;
  width: 64px;
  height: 4px;
  margin-inline: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.ui-vg-carousel-scrollbar .swiper-scrollbar-drag {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 16px;
  border-radius: inherit;
  background: #9dd501;
}

/* Keep category next-arrow clickable above the strip. */
[data-test-id="categories-nav-next"] {
  pointer-events: auto;
}

[data-test-id="categories-nav-next"] button {
  pointer-events: auto;
}

/* Cards that only exposed play/ref on hover — make the whole tile feel clickable. */
[data-test-id="winning-now-item"],
[data-test-id="game-tmb"],
[data-test-id="top-game-hero"],
[data-test-id^="lobby-tournaments-block__card--"],
[data-test-id="slide__safe-html--clickable"] {
  cursor: pointer;
}

/*
  Play links ship as visibility:hidden until hover — that blocks clicks.
  Keep a full-image hit target always; fade the chrome in on hover.
*/
[data-test-id="game-tmb__image-wrapper"] {
  position: relative;
}

a[data-test-id="game-tmb__play-button"] {
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: inherit !important;
}

a[data-test-id="game-tmb__play-button"] svg {
  opacity: 0;
  width: 48px !important;
  height: 48px !important;
  padding: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9dd501, #539401);
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

[data-test-id="game-tmb"]:hover a[data-test-id="game-tmb__play-button"],
.ui-vg-group:hover a[data-test-id="game-tmb__play-button"] {
  background: rgba(9, 8, 13, 0.45) !important;
}

[data-test-id="game-tmb"]:hover a[data-test-id="game-tmb__play-button"] svg,
.ui-vg-group:hover a[data-test-id="game-tmb__play-button"] svg {
  opacity: 1;
}

/* Demo stays decorative — don't steal the play hit area. */
a[data-test-id="game-tmb__demo-button"] {
  pointer-events: none !important;
}

/* Winning-now: full-card overlay stays clickable; fade in on hover. */
.vg-lp-win-overlay {
  pointer-events: auto !important;
  opacity: 0;
  z-index: 2;
  background: rgba(9, 8, 13, 0.72);
  backdrop-filter: blur(4px);
}

[data-test-id="winning-now-item"]:hover .vg-lp-win-overlay,
.group:hover .vg-lp-win-overlay {
  opacity: 1;
}

.vg-lp-win-overlay .vg-lp-win-play,
.vg-lp-win-overlay a[data-test-id="winning-now-element__play--btn"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.vg-lp-win-overlay .vg-lp-win-play__icon {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9dd501, #539401);
  color: #0b1400;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.vg-lp-tourn-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 8px 0 16px;
  padding: 24px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  text-align: center;
}

.vg-lp-tourn-empty[hidden] {
  display: none !important;
}

.vg-lp-win-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(180deg, #9dd501, #539401);
  color: #0b1400;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.vg-lp-win-play:hover {
  filter: brightness(1.08);
  transform: scale(1.06);
}

.vg-lp-win-play__icon {
  display: block;
  margin-left: 2px; /* optical center for the play triangle */
  fill: currentColor;
}

/* --------------------------------------------------------------- article */
.vg-lp-article {
  padding: 48px 24px 24px;
  max-width: 1280px;
}

.vg-lp-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.vg-lp-toc {
  position: relative;
  order: -1;
  padding: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(157, 213, 1, 0.08), transparent 42%),
    var(--background-secondary, #1b1924);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.vg-lp-toc__title {
  margin: 0;
  padding: 16px 18px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9dd501;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vg-lp-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.vg-lp-toc__toggle .vg-lp-toc__title {
  flex: 1;
  border-bottom: 0;
  padding: 16px 8px 16px 18px;
}

.vg-lp-toc__chevron {
  display: none;
  width: 10px;
  height: 10px;
  margin-right: 18px;
  border-right: 2px solid rgba(255, 255, 255, 0.55);
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vg-lp-toc.is-open .vg-lp-toc__chevron {
  transform: rotate(225deg);
  margin-top: 4px;
}

.vg-lp-toc.is-open .vg-lp-toc__toggle .vg-lp-toc__title,
.vg-lp-toc__toggle .vg-lp-toc__title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vg-lp-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 10px 12px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(157, 213, 1, 0.35) transparent;
  counter-reset: toc;
  font-size: 13px;
}

.vg-lp-toc__list::-webkit-scrollbar {
  width: 4px;
}

.vg-lp-toc__list::-webkit-scrollbar-thumb {
  background: rgba(157, 213, 1, 0.35);
  border-radius: 4px;
}

.vg-lp-toc__list li {
  margin: 0;
  counter-increment: toc;
}

.vg-lp-toc__list li::marker {
  content: none;
}

.vg-lp-toc a {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px 9px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vg-lp-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 1.6em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.28);
  font-variant-numeric: tabular-nums;
}

.vg-lp-toc a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s ease;
}

.vg-lp-toc a:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.vg-lp-toc a:hover::before {
  color: #9dd501;
}

.vg-lp-toc a.is-active {
  color: #fff;
  background: rgba(157, 213, 1, 0.1);
}

.vg-lp-toc a.is-active::before {
  color: #9dd501;
}

.vg-lp-toc a.is-active::after {
  background: #9dd501;
}

@media (min-width: 1100px) {
  .vg-lp-article__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
  }

  .vg-lp-toc {
    order: 0;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
  }

  .vg-lp-toc__list {
    max-height: calc(100vh - 188px);
  }
}

/* Headings need scroll-margin so the sticky header does not cover them. */
.vg-lp-prose h2,
.vg-lp-prose h3 {
  scroll-margin-top: 96px;
}

.vg-lp-prose h2 {
  margin: 40px 0 12px !important;
  padding: 0 !important;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.25;
  font-weight: 700;
}

.vg-lp-prose h2:first-child {
  margin-top: 0 !important;
}

.vg-lp-prose h3 {
  margin: 28px 0 10px !important;
  padding: 0 !important;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.3;
  font-weight: 700;
}

.vg-lp-prose h4 {
  margin: 22px 0 8px !important;
  padding: 0 !important;
  font-size: 17px;
  font-weight: 700;
}

.vg-lp-prose p {
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.vg-lp-prose strong {
  color: var(--text-primary, #fff);
  font-weight: 700;
}

.vg-lp-prose a {
  color: #9dd501;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vg-lp-prose a.vg-lp-btn {
  text-decoration: none !important;
  text-underline-offset: unset;
}

.vg-lp-prose a.vg-lp-btn--primary,
.ui-vg-prose a.vg-lp-btn--primary {
  color: #0b1400 !important;
  -webkit-text-fill-color: #0b1400 !important;
}

.vg-lp-prose a.vg-lp-btn--primary:hover,
.vg-lp-prose a.vg-lp-btn--primary:visited,
.vg-lp-prose a.vg-lp-btn--primary:active,
.ui-vg-prose a.vg-lp-btn--primary:hover,
.ui-vg-prose a.vg-lp-btn--primary:visited,
.ui-vg-prose a.vg-lp-btn--primary:active {
  color: #0b1400 !important;
  -webkit-text-fill-color: #0b1400 !important;
  text-decoration: none !important;
}

.vg-lp-prose a.vg-lp-btn--ghost,
.ui-vg-prose a.vg-lp-btn--ghost {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}

.vg-lp-prose ul,
.vg-lp-prose ol {
  max-width: 78ch;
  margin: 0 0 18px !important;
  padding-left: 24px !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.vg-lp-prose ul {
  list-style: disc;
}

.vg-lp-prose ol {
  list-style: decimal;
}

.vg-lp-prose li {
  margin-bottom: 8px;
}

.vg-lp-prose li::marker {
  color: #9dd501;
  font-weight: 700;
}

.vg-lp-prose ol > li > ul {
  margin-top: 10px !important;
}

.vg-lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 28px;
}

/* Registration block: dumped React fields need a usable native control surface */
[data-test-id="registration-form-section"] .ui-vg-text-field-input,
[data-test-id="registration-form-section"] .vg-lp-currency-select {
  pointer-events: auto !important;
  width: 100% !important;
  min-height: 22px !important;
  height: auto !important;
  color: var(--text-field-placeholder-default-filled-text, rgba(255, 255, 255, 0.85)) !important;
  -webkit-text-fill-color: var(--text-field-placeholder-default-filled-text, rgba(255, 255, 255, 0.85)) !important;
  background: transparent !important;
  cursor: text;
}

[data-test-id="registration-form-section"] .vg-lp-currency-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  outline: none;
  font: inherit;
  background-image: none !important;
}

[data-test-id="registration-form-section"] .vg-lp-currency-select option {
  color: #111;
  background: #fff;
  -webkit-text-fill-color: #111;
}

.vg-lp-prose .vg-lp-note {
  max-width: 78ch;
  margin: 0 0 14px !important;
  padding: 14px 18px !important;
  border-radius: 12px;
  border-left: 3px solid #9dd501;
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------- tables
   .ui-vg-prose forces casino flex “row cards” on <table> — override back to
   a real grid that matches the dark landing chrome, with no hover states. */
.vg-lp-table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.vg-lp-table table,
.vg-lp-prose.ui-vg-prose .vg-lp-table table,
.vg-lp-prose .vg-lp-table table {
  display: table !important;
  flex-direction: unset !important;
  width: 100% !important;
  min-width: 480px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 1.45;
}

.vg-lp-table thead,
.vg-lp-table tbody,
.vg-lp-prose.ui-vg-prose .vg-lp-table thead,
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody {
  display: table-header-group !important;
  flex-direction: unset !important;
  align-self: unset !important;
  gap: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.vg-lp-table tbody,
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody {
  display: table-row-group !important;
}

.vg-lp-table tr,
.vg-lp-prose.ui-vg-prose .vg-lp-table tr,
.vg-lp-prose.ui-vg-prose .vg-lp-table thead tr,
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody tr {
  display: table-row !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}

.vg-lp-table tbody tr:nth-child(even),
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025) !important;
}

.vg-lp-table tbody tr:hover,
.vg-lp-table tbody tr:hover td,
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody tr:hover,
.vg-lp-prose.ui-vg-prose .vg-lp-table tbody tr:hover td,
.vg-lp-prose tbody tr:hover td {
  background: inherit !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.vg-lp-table th,
.vg-lp-table td,
.vg-lp-prose.ui-vg-prose .vg-lp-table th,
.vg-lp-prose.ui-vg-prose .vg-lp-table td,
.vg-lp-prose .vg-lp-table th,
.vg-lp-prose .vg-lp-table td {
  display: table-cell !important;
  flex-direction: unset !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 13px 16px !important;
  text-align: left !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vg-lp-table th,
.vg-lp-prose.ui-vg-prose .vg-lp-table th,
.vg-lp-prose .vg-lp-table th {
  background: rgba(157, 213, 1, 0.1) !important;
  color: #c8f25a !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid rgba(157, 213, 1, 0.28) !important;
}

.vg-lp-table td,
.vg-lp-prose.ui-vg-prose .vg-lp-table td,
.vg-lp-prose .vg-lp-table td {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Key column on 2-col fact tables */
.vg-lp-table td:first-child {
  color: rgba(255, 255, 255, 0.58) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.vg-lp-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 640px) {
  .vg-lp-article {
    padding: 28px 16px 8px;
  }

  .vg-lp-btn {
    width: 100%;
  }

  .vg-lp-table table,
  .vg-lp-prose .vg-lp-table table {
    min-width: 420px;
  }

  .vg-lp-table th,
  .vg-lp-table td {
    padding: 11px 12px !important;
    font-size: 13px !important;
  }

  .vg-lp-table td:first-child {
    white-space: normal;
  }
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 1023px) {
  /* Header: logo + Registrar + burger */
  [data-test-id="header-wrp"] > .ui-vg-flex {
    padding-left: 12px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  [data-test-id="header-logo"] img {
    max-width: 118px;
    height: auto;
  }

  .vg-lp-desktop-nav {
    display: none !important;
  }

  .vg-lp-hide-mobile {
    display: none !important;
  }

  .vg-lp-header-actions {
    margin-left: auto !important;
    align-items: center;
    gap: 8px !important;
  }

  .vg-lp-header-actions [data-test-id="reg-btn"] {
    min-width: 0;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .vg-lp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  .vg-lp-burger svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .vg-lp-burger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
  }

  .vg-lp-mobile-drawer {
    display: none;
    position: fixed;
    top: var(--navbar-primary-height, 56px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: calc(100vh - var(--navbar-primary-height, 56px));
    overflow-y: auto;
    padding: 12px 14px 20px;
    background: rgba(14, 12, 20, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .vg-lp-mobile-drawer.is-open {
    display: block;
  }

  .vg-lp-mobile-drawer__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vg-lp-mobile-drawer__list a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
  }

  .vg-lp-mobile-drawer__list a:hover,
  .vg-lp-mobile-drawer__list a:active {
    background: rgba(157, 213, 1, 0.12);
    color: #fff;
  }

  .vg-lp-mobile-drawer__auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .vg-lp-mobile-drawer__auth-btn,
  .vg-lp-mobile-drawer__auth [data-test-id="login-btn"],
  .vg-lp-mobile-drawer__auth [data-test-id="reg-btn"] {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box;
    white-space: nowrap;
  }

  /* Hero: hide side character card */
  .vg-lp-hero-character,
  [data-test-id="welcome-bonus__character"] {
    display: none !important;
  }

  .vg-lp-welcome > .relative.flex {
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  .vg-lp-hero__lead {
    font-size: 14px;
  }

  .vg-lp-hero__points {
    max-width: 100%;
  }

  /* TOC accordion */
  .vg-lp-toc__chevron {
    display: inline-block;
  }

  .vg-lp-toc:not(.is-open) .vg-lp-toc__list {
    display: none;
  }

  .vg-lp-toc:not(.is-open) .vg-lp-toc__toggle .vg-lp-toc__title {
    border-bottom: 0;
  }

  .vg-lp-toc.is-open .vg-lp-toc__list {
    max-height: min(55vh, 360px);
  }

  .vg-lp-article__layout {
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .vg-lp-burger,
  .vg-lp-mobile-drawer {
    display: none !important;
  }

  .vg-lp-toc__toggle {
    pointer-events: none;
    cursor: default;
  }

  .vg-lp-toc__chevron {
    display: none !important;
  }

  .vg-lp-toc__list {
    display: flex !important;
  }

  .vg-lp-top-games__hero-slide {
    display: none !important;
  }
}

/* Principais jogos + category tabs — mobile rebuild */
@media (max-width: 1023px) {
  .vg-lp-top-games__hero-shell {
    display: none !important;
  }

  .vg-lp-top-games__row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .vg-lp-top-games [data-test-id="top-game-hero"] {
    display: none !important;
  }

  .vg-lp-top-games [data-test-id="swiper"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .vg-lp-top-games [data-test-id="swiper"],
  .vg-lp-top-games [data-test-id="swiper"] > .ui-vg-relative,
  .vg-lp-top-games .swiper.swiper-horizontal,
  .vg-lp-top-games .swiper-wrapper {
    height: auto !important;
    max-height: none !important;
  }

  .vg-lp-top-games .swiper.swiper-horizontal {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Each slide stacks 2 games — show ~2 columns and scroll sideways */
  .vg-lp-top-games .swiper-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    width: max-content !important;
    min-width: 100%;
    transform: none !important;
    gap: 0;
  }

  .vg-lp-top-games .swiper-slide {
    width: calc(50vw - 28px) !important;
    max-width: none !important;
    margin: 0 10px 0 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .vg-lp-top-games .swiper-slide > .flex {
    width: 100% !important;
    height: auto !important;
  }

  .vg-lp-top-games .swiper-slide .relative.w-\[148px\],
  .vg-lp-top-games .swiper-slide [class*="w-[148px]"] {
    width: 100% !important;
  }

  .vg-lp-top-games .swiper-slide [data-test-id="game-tmb"],
  .vg-lp-top-games .swiper-slide [data-test-id="game-tmb"] > div {
    width: 100% !important;
  }

  .vg-lp-top-games [data-test-id="swiper-pagination"],
  .vg-lp-top-games .swiper-pagination {
    display: none !important;
  }

  /* Pagination row keeps margin-top even when dots are hidden */
  .vg-lp-top-games [data-test-id="swiper"] > .ui-vg-flex.ui-vg-mt-4,
  .vg-lp-top-games [data-test-id="swiper"] > .ui-vg-z-1.ui-vg-flex {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
  }

  /* Category tabs: full-width horizontal scroll instead of 3-col squash */
  [data-test-id="game-filters"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    grid-template-columns: none !important;
  }

  [data-test-id="game-filters"] > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  [data-test-id="game-filters"] .flex.w-full.items-center {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
  }

  [data-test-id="game-filters"] .relative.isolate.min-w-0.flex-1,
  [data-test-id="game-filters"] .relative.isolate {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    order: 2;
  }

  [data-test-id="game-categories-desktop"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  [data-test-id="game-categories-desktop"] .swiper.swiper-horizontal {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  [data-test-id="game-categories-desktop"] .swiper-wrapper {
    display: flex !important;
    width: max-content !important;
    min-width: 100%;
    transform: none !important;
    gap: 0;
  }

  [data-test-id="game-categories-desktop"] .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-right: 8px !important;
  }

  [data-test-id="categories-next-btn"],
  [data-test-id="categories-nav-next"] {
    display: none !important;
  }

  /* App download CTA: title → description → full-width buttons → phone image */
  .vg-lp-app-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 20px 16px 24px !important;
    overflow: visible;
  }

  .vg-lp-app-cta > .flex.w-full.flex-col {
    width: 100% !important;
    gap: 16px !important;
  }

  .vg-lp-app-cta [data-test-id="footer-download-app-text"] {
    text-align: left;
  }

  .vg-lp-app-cta .flex.gap-ui-32 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .vg-lp-app-cta .flex.gap-ui-32 > .flex.flex-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .vg-lp-app-cta [data-test-id="download-app-button__btn-ios"],
  .vg-lp-app-cta [data-test-id="download-app-button__btn-android"] {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  .vg-lp-app-cta > .relative.flex.items-end {
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin: 4px auto 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  .vg-lp-app-cta > .relative.flex.items-end > .relative,
  .vg-lp-app-cta > .relative.flex.items-end picture,
  .vg-lp-app-cta > .relative.flex.items-end img {
    display: block !important;
    width: min(260px, 72vw) !important;
    max-width: 100%;
    height: auto !important;
  }

  .vg-lp-app-cta__phone {
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 4px auto 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  .vg-lp-app-cta__phone > .relative {
    width: min(260px, 72vw) !important;
  }

  .vg-lp-app-cta__phone img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}