.screenWrap {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
}

.screenStage {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}

.screenStage #screenImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.remoteCursor {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 20px;
  height: 26px;
  display: none;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 65%));
  pointer-events: none;
  transform: translate3d(-2px, -2px, 0);
  will-change: left, top;
}

.remoteCursor.visible { display: block; }
.remoteCursor svg { display: block; width: 100%; height: 100%; }
.remoteCursor path { fill: #fff; stroke: #111; stroke-width: 2.2; stroke-linejoin: round; }
.screenWrap.remoteCursorVisible { cursor: none; }

.screenWrap:fullscreen,
.screenWrap:-webkit-full-screen,
.viewerPage.pseudoFullscreen .screenWrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: #000;
}

.screenWrap:fullscreen,
.screenWrap:-webkit-full-screen { z-index: 2147483647; }

.viewerPage.pseudoFullscreen .screenWrap { z-index: 9999; }

.viewerPage.pseudoFullscreen .screenWrap {
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  width: auto;
  height: auto;
  min-height: 0;
}

body.fullscreenOpen {
  overflow: hidden;
  overscroll-behavior: none;
}

.fullscreenHint {
  position: absolute;
  z-index: 8;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 12px;
  background: rgb(15 23 42 / 92%);
  color: #fff;
  box-shadow: 0 12px 36px rgb(0 0 0 / 45%);
  backdrop-filter: blur(10px);
}

.fullscreenHint span { font-size: 13px; line-height: 1.4; }
.fullscreenHint button { justify-self: end; min-height: 36px; padding: 0 14px; }

@media (pointer: coarse) {
  .remoteCursor { width: 11px; height: 14px; }
}