/* Fullscreen overlays. Loaded after livo-public.css.
   Container fullscreen (Android, iPad, desktop) and iPhone pseudo-fullscreen
   keep the score bug, event boards and sponsor mark on the picture. */

.player {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

.player.is-pseudo-fs,
.player:fullscreen,
.player:-webkit-full-screen {
  padding: 0 !important;
  background: #000;
}

.player.is-pseudo-fs video,
.player:fullscreen video,
.player:-webkit-full-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  background: #000;
}

.player.is-pseudo-fs .broadcast-layer,
.player:fullscreen .broadcast-layer,
.player:-webkit-full-screen .broadcast-layer {
  z-index: 6;
}

/* Graphics sit on the framed picture (JS sets the box). Do not add a second safe-area inset. */
.player.is-pseudo-fs .scorebug,
.player:fullscreen .scorebug,
.player:-webkit-full-screen .scorebug {
  top: var(--ov-pad);
  left: var(--ov-pad);
}

.player.is-pseudo-fs .channel-bug,
.player:fullscreen .channel-bug,
.player:-webkit-full-screen .channel-bug {
  top: var(--ov-pad-sm);
  right: var(--ov-pad-sm);
}

.player.is-pseudo-fs .lt,
.player:fullscreen .lt,
.player:-webkit-full-screen .lt {
  top: calc(var(--ov-pad) + var(--bug-h));
  left: var(--ov-pad);
}

.player.is-pseudo-fs .adslot,
.player:fullscreen .adslot,
.player:-webkit-full-screen .adslot {
  width: clamp(88px, calc(120 * var(--u)), 200px);
  max-width: 28%;
  right: var(--ov-pad-sm);
  bottom: var(--ov-pad-sm);
}

.player.is-pseudo-fs .adslot img,
.player.is-pseudo-fs .adslot .adslot__mark,
.player:fullscreen .adslot img,
.player:fullscreen .adslot .adslot__mark,
.player:-webkit-full-screen .adslot img,
.player:-webkit-full-screen .adslot .adslot__mark {
  max-width: 200px;
  max-height: 84px;
}

.player.is-pseudo-fs.is-controls-on .adslot,
.player:fullscreen.is-controls-on .adslot,
.player:-webkit-full-screen.is-controls-on .adslot {
  bottom: calc(48px + var(--sab));
}

.player.is-pseudo-fs .live-controls,
.player:fullscreen .live-controls,
.player:-webkit-full-screen .live-controls {
  z-index: 8;
  left: calc(6px + var(--sal));
  right: calc(6px + var(--sar));
  bottom: calc(6px + var(--sab));
  height: 40px;
  max-height: 44px;
}