/* ==UserStyle==
@name           YouTube - Fullscreen Theater (mobile)
@description    Displays YouTube's theater in fullscreen.
@version        2023.10.04.17.00
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   stylus

==/UserStyle== */
@-moz-document url-prefix("https://m.youtube.com/watch?v=")
{
  :root {
    --header-height: 48px;
    --player-height: calc(100vh - var(--header-height));
  }

  .player-container,
  .player-container.sticky-player {
    height: var(--player-height);
    right: 0;
    left: 0;
    position: absolute;
  }

  ytm-watch .player-size,
  .player-container .player-size {
    padding-bottom: 0;
    height: var(--player-height);
  }

  ytm-watch .player-size,
  .player-container .player-size {
    width: 100vw;
  }

  @media (min-width: 931px) and (orientation: landscape) {
    ytm-single-column-watch-next-results-renderer [section-identifier="related-items"],
    ytm-single-column-watch-next-results-renderer > ytm-playlist {
      position: absolute;
      right: -252px;
      top: 0;
      width: 252px;
      height: 100%;
    }
  }

  @media (min-width: 1280px) and (orientation: landscape) {
    ytm-single-column-watch-next-results-renderer [section-identifier="related-items"],
    ytm-single-column-watch-next-results-renderer > ytm-playlist {
      right: -496px;
      width: 496px;
    }
  }
}