/* Firefox/Linux can paint a cursor for replaced video elements even when the
   fullscreen parent inherits cursor:none. Apply it to the entire player tree. */
html.player-cursor-hidden,
html.player-cursor-hidden * {
  cursor: none !important;
}
body.player-mode .video-shell.controls-hidden,
body.player-mode .video-shell.controls-hidden *,
html:fullscreen body.player-mode .video-shell.controls-hidden,
html:fullscreen body.player-mode .video-shell.controls-hidden *,
html:-webkit-full-screen body.player-mode .video-shell.controls-hidden,
html:-webkit-full-screen body.player-mode .video-shell.controls-hidden *,
.video-shell:fullscreen.controls-hidden,
.video-shell:fullscreen.controls-hidden *,
.video-shell:-webkit-full-screen.controls-hidden,
.video-shell:-webkit-full-screen.controls-hidden * {
  cursor: none !important;
}

/* Fullscreen belongs to the persistent page root so changing episodes does not
   tear it down. Remove the application frame and make the player the viewport. */
body.player-mode.player-fullscreen {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
body.player-mode.player-fullscreen > aside,
body.player-mode.player-fullscreen main > header,
body.player-mode.player-fullscreen .player-top {
  display: none !important;
}
body.player-mode.player-fullscreen main,
body.player-mode.player-fullscreen #content,
body.player-mode.player-fullscreen .player-page {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
body.player-mode.player-fullscreen .video-shell {
  position: fixed !important;
  z-index: 9999 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: #000 !important;
}
body.player-mode.player-fullscreen .video-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.player-mode.player-fullscreen .video-stage video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}
body.player-mode.player-fullscreen .jf-transport {
  position: absolute !important;
  z-index: 10 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* In the normal embedded player, the picture and transport are separate rows.
   Giving the stage 100% height and then adding the transport caused clipping. */
body.player-mode:not(.player-fullscreen) .video-shell {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: calc(100svh - 62px) !important;
  min-height: 0 !important;
}
body.player-mode:not(.player-fullscreen) .video-stage {
  position: relative !important;
  width: 100% !important;
  height: calc(100% - 78px) !important;
  min-height: 0 !important;
  aspect-ratio: auto;
  overflow: hidden;
  background: #000;
}
body.player-mode:not(.player-fullscreen) .video-stage video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
body.player-mode:not(.player-fullscreen) .jf-transport {
  position: absolute !important;
  z-index: 10 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Keep chapter prompts above the replaced video element in every fullscreen
   implementation. The stage already excludes the transport when embedded. */
.video-stage > .skip-segment {
  position: absolute !important;
  z-index: 20 !important;
  max-width: calc(100% - 48px) !important;
}
.video-stage > .skip-segment[hidden] {
  display: none !important;
}
body.player-mode:not(.player-fullscreen) .video-stage > .skip-segment {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: 24px !important;
}
body.player-mode.player-fullscreen .video-stage > .skip-segment,
html:fullscreen body.player-mode .video-stage > .skip-segment,
html:-webkit-full-screen body.player-mode .video-stage > .skip-segment,
.video-shell:fullscreen .video-stage > .skip-segment,
.video-shell:-webkit-full-screen .video-stage > .skip-segment {
  right: max(32px, env(safe-area-inset-right)) !important;
  bottom: max(88px, calc(72px + env(safe-area-inset-bottom))) !important;
  z-index: 20 !important;
}

@media (max-width: 820px) {
  body.player-mode:not(.player-fullscreen) .player-page {
    height: auto !important;
    min-height: 0 !important;
  }
  body.player-mode:not(.player-fullscreen) .video-shell {
    height: calc(100svh - 50px) !important;
  }
  body.player-mode:not(.player-fullscreen) .video-stage {
    height: calc(100% - 70px) !important;
  }
  body.player-mode:not(.player-fullscreen) .video-stage > .skip-segment {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: 14px !important;
    max-width: calc(100% - 28px) !important;
  }
  body.player-mode.player-fullscreen .video-stage > .skip-segment,
  html:fullscreen body.player-mode .video-stage > .skip-segment,
  html:-webkit-full-screen body.player-mode .video-stage > .skip-segment {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(76px, calc(64px + env(safe-area-inset-bottom))) !important;
    max-width: calc(100% - 32px) !important;
  }
}

@media (max-width: 820px) and (orientation: landscape) and (max-height: 520px) {
  body.player-mode:not(.player-fullscreen) .video-shell {
    height: 100svh !important;
  }
  body.player-mode:not(.player-fullscreen) .video-stage {
    height: calc(100% - 70px) !important;
    aspect-ratio: auto;
  }
}