/* ==========================================================================
   WinHouse — cap the content body at 1600px and keep it centred.
   Loaded from new/index.html, which is the single shell for every route.

   Only the content column is constrained. The left nav (.deznav) and the top
   bar (header) stay where the app puts them, spanning the full viewport.

   Centring happens inside the space *after* the fixed sidebar, so --wh-nav
   tracks the sidebar width the app uses at each breakpoint, including the
   collapsed rail (.menu-toggle). The leftover is measured with % rather than
   vw so the scrollbar can't skew it, and max() stops the body ever sliding
   under the nav on narrow screens.
   ========================================================================== */

:root {
  --wh-body: 1600px;
  --wh-nav: 278.4px;
}
@media (max-width: 1600px) { :root { --wh-nav: 243.6px; } }
@media (max-width: 992px)  { :root { --wh-nav: 70px; } }
@media (max-width: 768px)  { :root { --wh-nav: 0px; } }

/* collapsed rail — the app narrows .deznav to 80px and pins the content to it */
.menu-toggle { --wh-nav: 80px; }

.content-body {
  max-width: var(--wh-body);
  /* !important: the app pins margin-left to the sidebar width, which would
     otherwise left-align the body the moment the rail is collapsed */
  margin-left: max(
    var(--wh-nav),
    calc(var(--wh-nav) + (100% - var(--wh-nav) - var(--wh-body)) / 2)
  ) !important;
  margin-right: auto !important;
}

/* Casino and the other card pages sit in .container, which capped them at
   1240px (1200px of usable width). Let them use the full body. */
/* !important: Vite injects per-page CSS chunks after this file, and they
   re-declare .container at 1240px */
.container {
  max-width: var(--wh-body) !important;
}

/* Dark scrollbars for the shell, so the page scroller matches the sportsbook */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #2C3D4B #16212B; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: #16212B; }
*::-webkit-scrollbar-thumb { background: #2C3D4B; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #3E5265; }

/* Game grids: 8 across on large screens (the app ships 6 at xl). Attribute
   selector avoids escaping the Tailwind colon in `xl:grid-cols-6`. */
@media (min-width: 1280px) {
  .content-body [class*="grid-cols-6"],
  .content-body [class*="xl:grid-cols-6"] {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

/* "Show more" under a capped grid */
.wh-show-more {
  display: block;
  margin: 18px auto 26px;
  height: 40px;
  padding: 0 30px;
  border: 0;
  border-radius: 8px;
  background: #0074FF;
  color: #fff;
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.wh-show-more:hover { filter: brightness(1.08); }

/* Game carousels (Top Games / Slots / Live Casino): show exactly 8 thumbnails
   across the body, the rest reachable by scrolling the rail. The app ships
   fixed 140px cards, which fit ~10. 8 across = (100% - 7 gaps) / 8, matching
   the 8-column grid you land on via "View All".
   Scoped to the 140px game cards so the 180px "Highlighted Events" rail and
   any other flex row are left alone. */
@media (min-width: 1280px) {
  .content-body .overflow-x-auto > [class*="w-[140px]"] {
    flex: 0 0 calc((100% - 7 * 12px) / 8) !important;
    width: calc((100% - 7 * 12px) / 8) !important;
  }
}