:root {
  color-scheme: dark;
  background: #041e42;
}

html,
body,
.screen {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.screen { position: relative; }

/* Keep the layout viewport, media queries and pointer coordinates at 4K.
   The browser maps real clicks/gestures into this scaled same-origin frame. */
.screen-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 3840px;
  height: 2160px;
  border: 0;
  background: #041e42;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(var(--screen-scale, 1));
  visibility: hidden;
}

:root[data-screen-ready="true"] .screen-frame { visibility: visible; }