html, body {
  background-color: #050308;
  overflow: hidden;
}

html.no-gpu, html.no-gpu body {
  background-image: url("/assets/lattice-still.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#lattice {
  pointer-events: none;
  image-rendering: auto;
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
}

html.no-gpu #lattice {
  display: none !important;
}

.stage {
  z-index: 2;
  overflow: hidden auto;
}

.brand {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 920px);
  filter: drop-shadow(0 8px 18px #00000073) drop-shadow(0 0 28px #7a50ff66) drop-shadow(0 0 48px #50e4ff33);
  animation: 1.4s cubic-bezier(.22, 1, .36, 1) .2s forwards logo-in;
  transform: scale(.96);
}

.brand__mark {
  width: 100%;
  height: auto;
  display: block;
}

.game-card__art {
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: 0 0 0 1px #ffffff2e, 0 22px 48px #00000080, 0 0 40px var(--phone-glow);
  transition: box-shadow .35s;
}

.game-card:hover .game-card__art,
.game-card:focus-visible .game-card__art {
  box-shadow: 0 0 0 1px #ffffff52, 0 28px 56px #0000008c, 0 0 56px #aadcff61;
}

.shelf {
  width: min(100%, 1040px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
}

.game-card {
  width: 100%;
  max-width: none;
}

@media (width <= 780px) {
  .brand {
    width: min(94vw, 640px);
  }
  .shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 440px) {
  .shelf {
    grid-template-columns: minmax(0, 1fr);
  }
}