:root {
  --micalo-safe-left: env(safe-area-inset-left, 0px);
  --micalo-safe-right: env(safe-area-inset-right, 0px);
  --micalo-safe-top: env(safe-area-inset-top, 0px);
  --micalo-safe-bottom: env(safe-area-inset-bottom, 0px);
}
.game-frame-wrap {
  left: var(--micalo-center-x, 50vw) !important;
  top: var(--micalo-center-y, 50vh) !important;
  width: 1600px !important;
  height: 900px !important;
  transform: translate(-50%, -50%)
    scale(
      var(--micalo-scale-x, var(--micalo-scale, 0.2)),
      var(--micalo-scale-y, var(--micalo-scale, 0.2))
    ) !important;
  transform-origin: center center !important;
  transition: none !important;
  visibility: visible !important;
}
html:fullscreen,
html:-webkit-full-screen {
  background: #071e30;
}
@media (pointer: coarse) {
  .game-shell {
    animation: none !important;
  }
  body {
    min-height: 100dvh;
  }
}

#micalo-orientation-hint {
  display: none;
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: 5%;
  width: 90%;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(7, 30, 48, 0.9);
  color: white;
  text-align: center;
  font:
    15px/1.5 Arial,
    Tahoma,
    sans-serif;
  pointer-events: none;
  z-index: 11;
}
@media (pointer: coarse) and (orientation: portrait) {
  .mobile-portrait #micalo-orientation-hint {
    display: block;
  }
}