.lm-viewport {
  overflow: hidden;
  width: var(--lm-viewport-width, 100%);
  height: var(--lm-viewport-height, 100%);
  position: fixed;
  top: 0;
  z-index: 10;
}

#gameWrapper canvas {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.ratio-16x9 .lm-game-viewport {
  width: var(--lm-width, 100%);
  height: var(--lm-height, 100%);
  max-width: 177.777778vh;

  position: absolute;
}

.lm-vertical-center .lm-game-viewport {
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.lm-horizontal-center .lm-game-viewport {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

@media only screen and (max-device-width: 1024px) {
  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    html {
      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
      height: 100vh;
    }
  }

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    html {
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      height: 100vh;
    }
  }
}

/* PlayUI specific css start */
.lm-mobile .lm-portrait .playui-dialog,
.lm-mobile .lm-portrait .play-ui {
  height: var(--lm-viewport-height, 100%);
}

.lm-tablet .lm-portrait .playui-dialog,
.lm-tablet .lm-portrait .play-ui {
  height: var(--lm-viewport-height, 100%);
  }
/* PlayUI specific css end */