.orientation-prompt {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #07120a;
  color: white;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  text-align: center;
}

.orientation-prompt[hidden] {
  display: none;
}


.game-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(866px, 100dvw);
  height: min(618px, 100dvh);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.game-wrapper img {
  -webkit-user-drag: none;
}

.game-stage {
  position: relative;
  width: 866px;
  height: 618px;
  flex: none;
  transform: scale(var(--game-scale, 1));
  transform-origin: center;
}

.game-wrapper:fullscreen {
  width: 100dvw;
  height: 100dvh;
  background: #000;
}

/* Experiment: stretch the complete game surface across the fullscreen viewport. */
.game-wrapper:fullscreen.mobile-fullscreen-stretch .game-stage {
  width: 100dvw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  transform: none;
}

canvas {
  position: absolute;
  left: 73px;
  top: 69px;

  background-color: black;
  width: 720px;
  height: 480px;
}

.game-wrapper:fullscreen.mobile-fullscreen-stretch canvas {
  inset: 0;
  width: 100%;
  height: 100%;
}

.canvas-frame {
  position: absolute;
  top: 10px;
  left: 0;

  width: 866px;
  height: 618px;

  pointer-events: none;
  z-index: 25;
}

.game-wrapper:fullscreen.mobile-fullscreen-stretch .canvas-frame {
  display: none;
}