/* Only the shared shell changes; the supplied Vibe experience stays untouched. */
body[data-vibe-universe="gaming"] {
  --vibe-shell-bg: #627cff;
  --vibe-shell-ink: #090e18;
  --vibe-shell-divider: #090e1833;
  --vibe-popup-hover: #090e1814;
  --vibe-popup-backdrop: #090e18b8;
}
body[data-vibe-universe="sport"] {
  --vibe-shell-bg: #073f32;
  --vibe-shell-ink: #fff5ee;
  --vibe-shell-divider: #fff5ee44;
  --vibe-popup-hover: #fff5ee16;
  --vibe-popup-backdrop: #032d25b8;
}
body[data-vibe-universe="cinema"] {
  --vibe-shell-bg: #b91c1c;
  --vibe-shell-ink: #fff5ee;
  --vibe-shell-divider: #fff5ee44;
  --vibe-popup-hover: #fff5ee16;
  --vibe-popup-backdrop: #2c0808b8;
}
.vibe-themed .header,
.vibe-themed .header.scrolled,
.vibe-themed .footer,
.vibe-themed .mobile-menu {
  background: var(--vibe-shell-bg);
  color: var(--vibe-shell-ink);
}
.vibe-themed .header {
  border-bottom-color: var(--vibe-shell-divider);
}
@media (min-width: 761px) {
  /* overflow-x:hidden turns body into a non-scrolling scroll container,
     preventing both Vibe sticky elements from following the viewport. */
  body[data-vibe-universe] {
    overflow-x: clip;
    overflow-y: visible;
  }
  html:has(> body[data-vibe-universe]) {
    scroll-padding-top: 0;
  }
  body[data-vibe-universe] .header,
  body[data-vibe-universe] .header.scrolled {
    height: 78px;
  }
}
.vibe-themed .header .brand,
.vibe-themed .footer .brand,
.vibe-themed .footer-links,
.vibe-themed .footer-bottom,
.vibe-themed .footer-legal-links,
.vibe-themed .footer .back-top {
  color: var(--vibe-shell-ink);
  opacity: 1;
}
.vibe-themed .header .brand small,
.vibe-themed .footer .brand small {
  color: inherit;
  opacity: 1;
}
.vibe-themed .menu-toggle span,
.vibe-themed .header .desktop-nav a::after {
  background: var(--vibe-shell-ink);
}
.vibe-themed .header .join {
  background: var(--vibe-shell-ink);
  color: var(--vibe-shell-bg);
}
.vibe-themed .footer-top,
.vibe-themed .footer-links a,
.vibe-themed .mobile-menu a {
  border-color: var(--vibe-shell-divider);
}
.vibe-themed .footer a:hover,
.vibe-themed .mobile-menu a:hover {
  color: var(--vibe-shell-ink);
  text-decoration: underline;
}