html,
body,
a,
button,
img {
  -webkit-touch-callout: none;
}

body {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  touch-action: manipulation;
}

img {
  pointer-events: none;
}

@media (pointer: coarse) {
  .hotspot::before,
  .intro-enter::before,
  .footer-link::before,
  .menu-toggle::before,
  .site-brand::before,
  .site-menu__link::before {
    content: "";
    position: absolute;
  }

  .hotspot::before {
    inset: -16px;
  }

  .intro-enter::before {
    inset: -18px -24px;
  }

  .footer-link,
  .site-brand,
  .site-menu__link {
    position: relative;
  }

  .footer-link::before,
  .menu-toggle::before,
  .site-brand::before {
    inset: -10px;
  }

  .site-menu__link::before {
    inset: -10px -18px;
  }
}

@media (max-width: 900px) {
  .scene,
  .track-page,
  .intro-screen,
  .legal-page {
    min-height: 100svh;
  }

  .site-header {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    width: calc(100% - 24px);
  }

  .footer-nav {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    gap: 10px;
    padding: 0 16px env(safe-area-inset-bottom, 0px);
  }

  .footer-link {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .legal-page {
    padding:
      calc(env(safe-area-inset-top, 0px) + 112px)
      20px
      calc(env(safe-area-inset-bottom, 0px) + 82px);
  }

  .legal-card {
    width: min(100%, 640px);
  }

  .legal-card h1 {
    margin-bottom: 18px;
    font-size: 26px;
  }

  .legal-meta {
    margin-bottom: 24px;
  }

  .legal-card h2 {
    margin-top: 26px;
  }

  .legal-card p,
  .legal-card li,
  .legal-details p {
    font-size: 12px;
    line-height: 1.68;
  }
}

@media (max-width: 640px) {
  .footer-nav {
    grid-template-columns: auto auto auto;
    justify-content: center;
  }

  .footer-link:nth-child(1),
  .footer-link:nth-child(2),
  .footer-link:nth-child(3) {
    justify-self: center;
  }

  .site-menu__link {
    font-size: clamp(30px, 11vw, 52px);
  }
}