/**
 * When main hero carousel sits under the fixed header, make the header
 * glass-like so the banner shows through (Welcome / home main view only).
 *
 * Also fixes stacking: .wrapper .top-light-bg and .page-background use z-index:2
 * while .page-content.w-b is z-index:1 — they were painting OVER the hero.
 *
 * .wrapper { overflow: hidden } clips the hero pulled up with negative margin,
 * which often shows as a thin horizontal band at the very top — allow vertical
 * overflow while keeping horizontal scroll contained.
 */
html {
  background-color: #050608;
}

body.has-hero-undernav {
  background-color: #050608 !important;
  overflow-x: hidden !important;
}

body.has-hero-undernav #app {
  background-color: #050608;
}

/* overflow-x + overflow-y: visible collapses to auto in CSS — use visible only */
body.has-hero-undernav .wrapper {
  overflow: visible !important;
}

/* Wrapper spotlight / disco layers sit at z-index:2 and can read as a top band */
body.has-hero-undernav .wrapper:before,
body.has-hero-undernav .wrapper:after {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Full-bleed light strip over the hero — hide so banner shows through the header */
body.has-hero-undernav .wrapper > .top-light-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.has-hero-undernav .page-content.w-b {
  z-index: 8 !important;
}

body.has-hero-undernav .page-background {
  z-index: 0 !important;
}

/*
 * Do NOT use backdrop-filter on .header-section: it creates a containing block for
 * descendants with position:fixed (e.g. .tele-consult-wrap), so the chat button
 * sticks to the header instead of the viewport bottom.
 */
body.has-hero-undernav .header-section {
  /* Fully transparent shell so hero fills edge-to-edge under nav */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Left/right animated deco (left-bg / right-bg) */
body.has-hero-undernav .page-background:before,
body.has-hero-undernav .page-background:after {
  display: none !important;
  animation: none !important;
}

/*
 * .header-top .container is max-width + centered — edges left empty were
 * transparent .header-section over the hero (bright patches by Sign Out / hamburger).
 * Tint the full-width .header-top bar; keep .container clear to avoid double-dark.
 */
body.has-hero-undernav .header-top {
  background-color: rgba(6, 9, 15, 0.78) !important;
}

body.has-hero-undernav .header-top .container {
  background-image: none !important;
  background-color: transparent !important;
  border-bottom: none !important;
  filter: none !important;
}

body.has-hero-undernav .header-top .container:before,
body.has-hero-undernav .header-top .container:after {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.has-hero-undernav .header-menu {
  background: rgba(6, 9, 15, 0.52) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.has-hero-undernav .logo-panel {
  background-color: transparent !important;
}

body.has-hero-undernav .header-menu .container {
  background: transparent !important;
}

/*
 * Custom game iframe lives inside .page-content (z-index 8 under hero-undernav).
 * Fixed .header-section is z-index 99, so the overlay could never cover the nav.
 * While a fullscreen game iframe is open, lift the main content stack above the header.
 */
body.has-fullscreen-game-iframe .page-content.w-b {
  position: relative;
  z-index: 200 !important;
}

/* iOS Safari: reduce automatic text/layout inflation when rotating with a game iframe open */
body.has-fullscreen-game-iframe {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Hot & New list header: keep title text bright on desktop.
 * Some builds/orderings let Bootstrap body/span inheritance or stacking mute the Vue-scoped colors.
 */
.hot-games-container .hot-new-section-title {
  position: relative;
  z-index: 6;
  isolation: isolate;
}

.hot-games-container .hot-new-section-title__shell {
  position: relative;
  z-index: 1;
}

.hot-games-container .hot-new-section-title__glow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

@media (min-width: 768px) {
  .hot-games-container .hot-new-section-title__glow {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 1),
      0 0 18px rgba(255, 255, 255, 0.95),
      0 0 26px rgba(125, 211, 252, 0.85),
      0 0 40px rgba(56, 189, 248, 0.55) !important;
    background: linear-gradient(180deg, #2d3d52 0%, #1a2436 48%, #101a28 100%) !important;
  }
}