:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

.arcade-safe-page {
  min-height: 100dvh;
  box-sizing: border-box;
}

body.arcade-safe-page {
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}

.arcade-safe-top {
  padding-top: calc(var(--safe-top) + 0.5rem);
}

.arcade-safe-bottom {
  padding-bottom: calc(var(--safe-bottom) + 0.75rem);
}

.arcade-fixed-top {
  top: var(--safe-top);
}

.arcade-fixed-bottom {
  bottom: var(--safe-bottom);
}

.touch-play-active {
  touch-action: none;
}

.min-tap {
  min-width: 44px;
  min-height: 44px;
}

@media (pointer: coarse), (max-width: 720px) {
  .arcade-mobile-only {
    display: revert !important;
  }

  .arcade-desktop-only {
    display: none !important;
  }
}

@media (pointer: fine) and (min-width: 721px) {
  .arcade-mobile-only {
    display: none !important;
  }
}