/* ══════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   SIDEBAR / LAYOUT FIXES
   ══════════════════════════════════════════════ */
.content-wrap {
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}
#main-wrap {
  overflow-x: hidden;
  min-width: 0;
}
#Highlights {
  overflow-x: hidden;
}
.Bl_NT_DB_LITE {
  margin-left: 0;
  margin-right: 0;
}

/* ── Sidebar icon animations ── */
@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}
.imageSpin2 {
  transition-delay: 3s;
  animation: spin infinite 3s 2s;
  -webkit-animation: spin infinite 3s 2s;
}

@keyframes spinning-circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spinning-circle {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
#spinning-circle {
  animation: spinning-circle 5s infinite;
}

/* shared invert + spin (invertcolor, invertcolor2, invertcolor3) */
#invertcolor,
#invertcolor2,
#invertcolor3 {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
#invertcolor {
  animation: spinning-circle 3s infinite;
}
#invertcolor2 {
  animation: spin 4s infinite;
  max-height: 30px;
}
#invertcolor3 {
  animation: spin 3s infinite;
  max-height: 30px;
}

.exgameblinker {
  animation: animate 8s linear infinite;
}
@keyframes animate {
  0%,
  100% {
    background-color: red;
  }
  25%,
  50%,
  75% {
    background-color: inherit;
  }
}

.Galaxyblinker {
  position: relative;
  z-index: 0;
}
.Galaxyblinker::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--bpx-purple) 0%, var(--bpx-purple-light) 100%);
  animation: animateGradient 12s linear infinite;
  transition: opacity 0.5s ease;
}
@keyframes animateGradient {
  0%,
  100% {
    opacity: 1;
  }
  25%,
  50%,
  75% {
    opacity: 0;
  }
}


/* ══════════════════════════════════════════════
   RESPONSIVE SIDEBAR
   ══════════════════════════════════════════════ */

/* Tablet: the vendor sheet reserves only a 64px gutter for a 170px fixed
   sidebar, so the sidebar sits on top of the content. Match the real width. */
@media (max-width: 1025px) {
  #main-wrap {
    margin-left: 170px;
  }
}

/* Mobile: drop the sidebar entirely and give the content the full viewport. */
@media (max-width: 767.98px) {
  #sidebar {
    display: none;
  }

  #main-wrap {
    margin-left: 0;
  }
}

/* ══════════════════════════════════════════════
   GAME SLIDER SIZING
   ══════════════════════════════════════════════ */

/* The vendor sheet sizes the slider with `width: 90vw`. That is measured
   against the viewport, but the slider actually lives inside the viewport
   minus the fixed sidebar — so the track was always narrower than its row and
   left dead space on the right that changed size as the window resized.
   Size it to its container instead. */
.games_slider {
  width: 100%;
}

/* The vendor negative gutters made this row wider than the area containing it,
   which pushed the same dead space out to the edges. */
.right-content,
.games_slider_container {
  margin-left: 0;
  margin-right: 0;
}

/* ══════════════════════════════════════════════
   SITE HEADER / FOOTER ALONGSIDE THE SIDEBAR
   ══════════════════════════════════════════════ */

/* home.css only loads on the front page, so these rules are already scoped to
   it. The sidebar is position:fixed, so the shared header and footer have to
   begin where it ends or they would sit underneath it. */
.bpx-header,
.bpx-footer {
  margin-left: 168px;
}

@media (max-width: 1025px) {
  .bpx-header,
  .bpx-footer {
    margin-left: 170px;
  }
}

/* Sidebar is hidden on mobile, so the chrome spans the full width again. */
@media (max-width: 767.98px) {
  .bpx-header,
  .bpx-footer {
    margin-left: 0;
  }
}

/* ══════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR (desktop)
   ══════════════════════════════════════════════ */

/* Collapse only applies where the sidebar exists — it is hidden on mobile. */
@media (min-width: 768px) {
  /* Collapsed: the sidebar becomes an icon-only rail, and everything offset by
     its full width follows it in. */
  .bpx-sidebar-collapsed #sidebar {
    max-width: 64px;
  }

  .bpx-sidebar-collapsed .sidebar-menu .nav-link {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  /* Hide the labels, keep the icons. */
  .bpx-sidebar-collapsed .sidebar-menu .nav-link > span {
    display: none;
  }

  .bpx-sidebar-collapsed .sidebar-menu .nav-link i,
  .bpx-sidebar-collapsed .sidebar-menu .nav-link img {
    margin-right: 0;
  }

  .bpx-sidebar-collapsed #main-wrap,
  .bpx-sidebar-collapsed .bpx-header,
  .bpx-sidebar-collapsed .bpx-footer {
    margin-left: 64px;
  }
}

/* Smooth the transition without animating layout-heavy properties on load. */
#sidebar,
#main-wrap,
.bpx-header,
.bpx-footer {
  transition: max-width 0.2s ease, margin-left 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #main-wrap,
  .bpx-header,
  .bpx-footer {
    transition: none;
  }
}

/* ── Sidebar collapse toggle ── */
.bpx-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 8px 0 4px auto;
  margin-right: 12px;
  cursor: pointer;
  color: var(--bpx-on-dark-bright);
  font-size: 17px;
  background: var(--bpx-overlay-subtle);
  border: 1px solid var(--bpx-border-faint);
  border-radius: var(--bpx-radius);
  transition: background 0.15s, color 0.15s;
}
.bpx-sidebar-toggle:hover,
.bpx-sidebar-toggle:focus-visible {
  background: var(--bpx-overlay-hover);
  color: var(--bpx-accent-bright);
}

/* Centre the button once the rail is narrow. */
.bpx-sidebar-collapsed .bpx-sidebar-toggle {
  margin-left: auto;
  margin-right: auto;
}

/* The sidebar is hidden on mobile, so its collapse control goes with it. */
@media (max-width: 767.98px) {
  .bpx-sidebar-toggle {
    display: none;
  }
}