html,
body {
  overflow-x: hidden;
  overflow-y: hidden;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

* {
  touch-action: none;
  /* mintegral problem */
  user-select: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
}

html {
  font-size: 10vw;
  font-family: gameFont, sans-serif;
  position: fixed;
}

canvas {
  /* !important beats the renderer's inline px size so the canvas always fills
     the layout viewport — needed when we lock the viewport to a 360px min width
     and let the browser scale the whole page (canvas + HUD) down together. */
  width: 100% !important;
  height: 100% !important;
}

#debug_label {
  position: absolute;
  top: 5%;
  left: 30%;
  width: 40%;
  text-align: center;
  font-size: 5vw;
  color: black;
}

#ui_screen {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0vh;
  padding-bottom: 0vh;
}

#constructor {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#videoPlayable {
  height: auto;
  width: 100vw;
}

#interactive {
  z-index: 1001;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;

  transition: opacity 500ms ease-out;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#editor {
  pointer-events: none;
}

#ui,
#editor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vh * 9 / 16);
  height: 100vh;
}

#modal {
  z-index: 10000;
}

.interactive-text {
  color: rgb(83, 38, 0);
  font-size: 5vh;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#joystick_zone {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1001;
  touch-action: auto;
}

@media (orientation: landscape) {
  #videoPlayable {
    height: 100vh;
    width: auto;
  }
}