/* ================== LIGHT THEME ==================
   Start moving the original dark casino page toward a white-gold theme. */

html, body {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 216, 108, 0.34), transparent 32rem),
    linear-gradient(180deg, #fffaf0 0%, #ffffff 42%, #f8efd8 100%) !important;
  color: #1a1a1a !important;
}

body {
  min-height: 100vh;
}

/* Header light */
header, .header, .header-wrapper, .top-nav, .navbar, .nav-bar {
  background: linear-gradient(180deg, #fffdf8 0%, #fff5dc 100%) !important;
  color: #1a1a1a !important;
  border-color: rgba(184, 134, 11, 0.28) !important;
}
header a, .header a,
header li, .header li,
header span, .header span {
  color: #1a1a1a !important;
}
header a:hover, .header a:hover { color: #b8860b !important; }

.top-tool-bar,
#core-nav,
#core-nav .navbar-collapse,
#core-nav .nav-side,
#core-nav .navlink,
#core-nav .navbar-toggle,
.top-tool-bar a,
.top-tool-bar .btn,
.top-tool-bar span {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  text-shadow: none !important;
}

#core-nav .navlink.active,
#core-nav .navlink:hover,
.top-tool-bar a:hover,
.top-tool-bar .btn:hover {
  color: #cfcfcf !important;
  -webkit-text-fill-color: #8a6508 !important;
}

#core-nav .js-playnow-button {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.slider-contain--hero .gradient-text::after {
  content: none !important;
  display: none !important;
}

/* Footer light */
footer, .footer, .footer-wrapper, .footer-bottom, .footer-top {
  background: linear-gradient(180deg, #fffaf0 0%, #f2deb0 100%) !important;
  color: #1a1a1a !important;
  border-color: rgba(184, 134, 11, 0.28) !important;
}
footer a, .footer a { color: #b8860b !important; }
footer p, footer span, footer li, footer h1, footer h2, footer h3, footer h4,
.footer p, .footer span, .footer li, .footer h1, .footer h2, .footer h3, .footer h4 {
  color: #1a1a1a !important;
}

a[data-reg], button[data-reg] { cursor: pointer; }

/* Lighten the large dark page sections first. */
.section-hero,
.section-games,
.section-casino-features,
.section-hundreds-of-games,
.banner-container-yg,
.section-prefooter,
.single-page,
main,
#root {
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 216, 108, 0.26), transparent 28rem),
    linear-gradient(180deg, #fffaf0 0%, #ffffff 48%, #f6e8c8 100%) !important;
  color: #1a1a1a !important;
}

.section-hero--home,
.section-games,
.section-casino-features,
.section-hundreds-of-games {
  background-color: #fffaf0 !important;
  background-blend-mode: screen !important;
}

.section-divider {
  background:
    linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.45), transparent),
    linear-gradient(180deg, #fffaf0, #f3dfad) !important;
  min-height: 18px !important;
}

.frame,
.section-casino-features .slide,
.game-section-heading,
.latest-winners-ticker-contain,
.latest-winners-ticker {
  background-color: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(184, 134, 11, 0.32) !important;
  box-shadow: 0 12px 34px rgba(130, 91, 7, 0.12) !important;
}

.frame::before,
.frame::after,
.slide-gold-frame {
  opacity: 0.38 !important;
}

.section-games p,
.section-games span,
.section-casino-features p,
.section-casino-features span,
.section-hundreds-of-games p,
.section-hundreds-of-games span,
.latest-winner span {
  color: #2a2418 !important;
  text-shadow: none !important;
}

.section-games h1,
.section-games h2,
.section-games h3,
.section-casino-features h1,
.section-casino-features h2,
.section-casino-features h3,
.section-hundreds-of-games h1,
.section-hundreds-of-games h2,
.section-hundreds-of-games h3 {
  text-shadow: 0 1px 0 #ffffff, 0 2px 12px rgba(184, 134, 11, 0.28) !important;
}

.section-hundreds-of-games.lazyload.is-in-view.is-loaded {
  background-color: #030e2e !important;
  background-image: url("/site/hundreds-of-games-bg.webp") !important;
  background-size: 1600px auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.section-hundreds-of-games.lazyload.is-in-view.is-loaded p,
.section-hundreds-of-games.lazyload.is-in-view.is-loaded span {
  color: #ffffff !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

@media (max-width: 991.98px) {
  .section-hundreds-of-games.lazyload.is-in-view.is-loaded {
    background-size: 1250px auto !important;
  }
}

/* ================== FIX BROKEN GAME GRIDS ==================
   The original site uses tiny-slider JS. Without the JS, items have
   position:absolute; left:-100% — invisible. Force a static CSS grid. */

.section-games .tns-outer { width: 100% !important; }
.section-games .tns-controls,
.section-games .tns-liveregion,
.section-games .tns-nav { display: none !important; }

.section-games .tns-ovh { overflow: visible !important; height: auto !important; }
.section-games .tns-inner { margin: 0 !important; }

.section-games .slider.tns-slider,
.section-games .slider {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
  white-space: normal !important;
}

/* THE critical fix — kill position:absolute / left:-100% on items */
.section-games .tns-item,
.section-games .tns-slider > .tns-item {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Hide the cloned "transparent" duplicates so each game appears once */
.section-games .tns-item.tns-transparent {
  display: none !important;
}

.section-games .game-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  opacity: 1 !important;
}

/* Center the casino feature cards when tiny-slider markup is static. */
.section-casino-features .tns-outer,
.section-casino-features .tns-ovh,
.section-casino-features .tns-inner {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

.section-casino-features .tns-controls,
.section-casino-features .tns-liveregion,
.section-casino-features .tns-nav {
  display: none !important;
}

.section-casino-features .slider.tns-slider,
.section-casino-features .slider {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  justify-content: center !important;
  align-items: stretch !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
}

.section-casino-features .tns-item,
.section-casino-features .tns-slider > .tns-item {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.section-casino-features .tns-item.tns-transparent {
  display: none !important;
}

.section-casino-features .slide {
  align-items: center !important;
}

@media (max-width: 991.98px) {
  .section-casino-features .slider.tns-slider,
  .section-casino-features .slider {
    grid-template-columns: minmax(0, 360px) !important;
    gap: 20px !important;
  }
}