.site-shell {
  width: min(calc(100% - (var(--gutter) * 2)), var(--width-shell));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgb(52 16 85 / 28%));
}

.site-header__bar {
  background:
    linear-gradient(180deg, rgb(126 48 166 / 94%) 0%, rgb(70 21 111 / 98%) 100%),
    var(--color-purple-800);
}

.site-header__inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto minmax(16rem, 26rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.arcade-nav {
  background: rgb(52 16 85 / 96%);
}

.arcade-nav__shell {
  overflow-x: auto;
  scrollbar-width: thin;
}

.arcade-nav__list {
  min-height: var(--nav-height);
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

main {
  padding-block: var(--space-5) var(--space-7);
}

.site-footer {
  margin-top: var(--space-7);
  color: #ffffff;
  background:
    linear-gradient(180deg, var(--color-purple-700), var(--color-purple-900)),
    var(--color-purple-800);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) repeat(2, minmax(10rem, 0.7fr));
  align-items: start;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.site-footer__brand-area {
  display: grid;
  gap: var(--space-2);
}

.site-footer__brand-area p {
  max-width: 18rem;
  color: rgb(255 255 255 / 82%);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-2);
}

.site-footer__nav h2 {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-base);
}

.page-main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: var(--space-5);
}

.page-sidebar {
  grid-area: sidebar;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  position: static;
}

.page-columns {
  display: grid;
  grid-template-columns: minmax(13.75rem, 15.5rem) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  gap: var(--space-4);
  align-items: start;
}

.theme-sidebar {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.game-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr));
  gap: 0.7rem;
  align-items: start;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}