* {
  margin: 0;
  padding: 0;
}

:root {
  --app-width: 100vw;
  --app-height: 100dvh;
  --color-app-background: black !important;
}

html,
body {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  background: black;
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
}

#GameOrientation {
  position: fixed;
  padding: 0;
  border: 0;
  touch-action: none;
  user-select: none;
  overflow: hidden;

  --fade-h: 0;
  --fade-v: 0;
  --fade-size: 6%;
  --fade-intensity: 1.1;
  --fade-strength: min(1, calc(0.9 * var(--fade-intensity)));
  --fade-h-strength: calc(var(--fade-strength) * var(--fade-h));
  --fade-v-strength: calc(var(--fade-strength) * var(--fade-v));
}

#GameOrientation::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    linear-gradient(to right,
      rgba(0,0,0, calc(var(--fade-h-strength))) 0%,
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.86)) calc(var(--fade-size) * 0.08),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.66)) calc(var(--fade-size) * 0.18),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.46)) calc(var(--fade-size) * 0.30),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.27)) calc(var(--fade-size) * 0.46),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.13)) calc(var(--fade-size) * 0.62),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.05)) calc(var(--fade-size) * 0.76),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.012)) calc(var(--fade-size) * 0.88),
      rgba(0,0,0,0) var(--fade-size)
    ),
    linear-gradient(to left,
      rgba(0,0,0, calc(var(--fade-h-strength))) 0%,
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.86)) calc(var(--fade-size) * 0.08),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.66)) calc(var(--fade-size) * 0.18),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.46)) calc(var(--fade-size) * 0.30),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.27)) calc(var(--fade-size) * 0.46),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.13)) calc(var(--fade-size) * 0.62),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.05)) calc(var(--fade-size) * 0.76),
      rgba(0,0,0, calc(var(--fade-h-strength) * 0.012)) calc(var(--fade-size) * 0.88),
      rgba(0,0,0,0) var(--fade-size)
    ),
    linear-gradient(to bottom,
      rgba(0,0,0, calc(var(--fade-v-strength))) 0%,
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.86)) calc(var(--fade-size) * 0.08),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.66)) calc(var(--fade-size) * 0.18),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.46)) calc(var(--fade-size) * 0.30),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.27)) calc(var(--fade-size) * 0.46),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.13)) calc(var(--fade-size) * 0.62),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.05)) calc(var(--fade-size) * 0.76),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.012)) calc(var(--fade-size) * 0.88),
      rgba(0,0,0,0) var(--fade-size)
    ),
    linear-gradient(to top,
      rgba(0,0,0, calc(var(--fade-v-strength))) 0%,
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.86)) calc(var(--fade-size) * 0.08),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.66)) calc(var(--fade-size) * 0.18),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.46)) calc(var(--fade-size) * 0.30),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.27)) calc(var(--fade-size) * 0.46),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.13)) calc(var(--fade-size) * 0.62),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.05)) calc(var(--fade-size) * 0.76),
      rgba(0,0,0, calc(var(--fade-v-strength) * 0.012)) calc(var(--fade-size) * 0.88),
      rgba(0,0,0,0) var(--fade-size)
    );
}

canvas {
  width: 0;
  height: 0;
  outline: none;
}

iframe {
  touch-action: none !important;
  -ms-touch-action: none !important;
  -webkit-touch-callout: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}