/* SECTION: App shell grid
   Breakpoints (min-width, rem): sm 30 · md 48 · chat 70.01 · wide 66 */

.app {
  min-height: 100dvh;
  display: grid;
  /* Column 1 is auto so it tracks the sidebar's own width — animating the
     sidebar width then collapses the column smoothly. (Transitioning
     grid-template-columns directly is unreliable in Chromium.) */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
}

.topbar {
  grid-area: topbar;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-topbar);
}

.sidebar {
  grid-area: sidebar;
  position: sticky;
  inset-block-start: var(--topbar-h);
  align-self: start;
  inline-size: var(--sidebar-w);
  block-size: calc(100dvh - var(--topbar-h));
  z-index: var(--z-sidebar);
  overflow: hidden;
  transition: inline-size 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar__body {
  transition: opacity 150ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* JS only adds this class at desktop widths (and removes it below the
   breakpoint), so no media query is needed. */
.app--chat-hidden .sidebar {
  inline-size: 0;
  border-inline-end-color: transparent;
}

.app--chat-hidden .sidebar__body {
  opacity: 0;
  transform: translateX(-0.75rem);
}

.main {
  grid-area: main;
  min-width: 0;
  position: relative;
  z-index: var(--z-main);
}

.main__inner {
  max-width: 78rem;
  margin-inline: auto;
  padding: var(--sp-5) clamp(1rem, 0.4rem + 2vw, 2.25rem) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* SECTION: Promotions row */
.promos {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .promos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 66rem) {
  .promos {
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  }

  .hero-card {
    grid-column: auto;
  }
}

/* SECTION: Games — compact grid, sits below the hero + promotions */
.games {
  display: grid;
  gap: var(--sp-3);
}

/* Small tiles so the whole catalogue is visible at a glance: 2-up on phones,
   3-up on tablets, one tidy 6-up row on the desktop shell. Reflows to more
   rows on its own if the catalogue grows. */
.rail__track {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  /* breathing room so the hover scale/glow is never clipped by the section */
  padding: 0.5rem;
  list-style: none;
}

.rail__track > li {
  min-width: 0;
}

/* One tidy row on the desktop shell; tiles capped so they stay compact */
@media (min-width: 62rem) {
  .rail__track {
    grid-template-columns: repeat(6, minmax(7rem, 10rem));
    justify-content: center;
  }
}

.sidepanels {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .sidepanels {
    grid-template-columns: 1fr 1fr;
  }
}

/* SECTION: Off-canvas sidebar below the chat breakpoint */
@media (max-width: 70rem) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  .sidebar,
  .app--chat-hidden .sidebar {
    position: fixed;
    inset-block: var(--topbar-h) 0;
    inset-inline-start: 0;
    inline-size: min(20rem, 88vw);
    transform: translateX(-102%);
    transition: transform var(--dur-mid) var(--ease);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease);
    z-index: calc(var(--z-sidebar) - 1);
  }

  .sidebar-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 70.01rem) {
  .sidebar-scrim {
    display: none;
  }
}