:root {
  --gap: 1rem;
}

.mainGame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.display {
  top: var(--gap);
}

canvas {
  max-width: 100%;
}

.text {
  top: var(--gap);
  left: var(--gap);
}

.gameView .ViewHeader {
  border-bottom: none;
}

#view-game.gameView .ViewBackground {
  background-color: #000;
}

.frameIntro {
  font-size: 8vw;
  animation: gameIntro 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
  opacity: 0;
  font-weight: bolder;
}

.frameIntro :nth-child(1) {
  color: var(--primary-color);
}

.frameIntro.out {
  animation: gameIntroOut 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
}

.gameFrame {
  animation: canvasIntro 3s linear;
  animation-fill-mode: forwards;
  opacity: 0;
}

.ejs_context_menu ul li:last-child {
  display: none !important;
}

.ejs_virtualGamepad_parent .ejs_virtualGamepad_left {
  left: calc(var(--gap) * 1);
}

.ejs_virtualGamepad_parent .ejs_virtualGamepad_right {
  right: calc(var(--gap) * 1);
}

.ejs_virtualGamepad_parent .ejs_virtualGamepad_bottom {
  left: 50%;
  transform: translateX(-50%);
  margin-left: unset;
  width: 119px;
}

.ejs_virtualGamepad_parent .ejs_dpad_vertical {
  width: 40px;
}

.ejs_virtualGamepad_parent .ejs_dpad_horizontal {
  height: 40px;
}

.ejs_virtualGamepad_parent .ejs_virtualGamepad_button {
  width: 55px;
  height: 55px;
  line-height: 55px;
}

@keyframes canvasIntro {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes gameIntro {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gameIntroOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}