/* Arcade artwork, desktop framing and translucent panels. */
body.arcade-page {
  isolation: isolate;
  background: #0d1117;
}

body.arcade-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 10, 15, .04), rgba(6, 10, 15, .12) 36%, rgba(6, 10, 15, .48) 100%),
    url('/assets/arcade/arcade-background.webp');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

body.arcade-page .arcade-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

body.arcade-page .arcade-stat,
body.arcade-page .machine-card {
  background: rgba(20, 26, 33, .80);
}

body.arcade-page .arcade-panel {
  background: linear-gradient(180deg, rgba(16, 22, 29, .80), rgba(15, 21, 27, .82));
}

body.arcade-page .arcade-stat,
body.arcade-page .machine-card,
body.arcade-page .arcade-panel {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

body.arcade-page .arcade-section-head {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

@media (min-width: 1200px) {
  body.arcade-page .arcade-shell {
    width: min(1120px, calc(100% - clamp(340px, 31vw, 560px) - 36px));
    margin-left: auto;
    margin-right: 28px;
  }

  body.arcade-page .arcade-hero {
    grid-template-columns: minmax(0, 1fr) minmax(255px, 32%);
  }
}

@media (max-width: 1199px) {
  body.arcade-page::before {
    background-image:
      linear-gradient(rgba(6, 10, 15, .48), rgba(6, 10, 15, .68)),
      url('/assets/arcade/arcade-background.webp');
  }
}