* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow: hidden;
}

.splash {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    #0f3d2e,
    #14804a 22%,
    #16a06b,
    #0e8f8a,
    #146fa8 76%,
    #0c3f66
  );
  background-size: 300% 300%;
  animation: ombre-shift 14s ease-in-out infinite;
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.game {
  position: relative;
  z-index: 1;
  width: min(1280px, 100vw, calc(100vh * 1.72973));
  width: min(1280px, 100vw, calc(100dvh * 1.72973));
  aspect-ratio: 1280 / 740;
}

.game iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes ombre-shift {
  0%,
  100% {
    background-position: 0% 40%;
  }

  50% {
    background-position: 100% 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash {
    animation: none;
  }
}