:root {
  --lvl-grid-min: 180px;
  --lvl-card-bg: rgba(255, 255, 255, 0.1);
  --lvl-card-text: #ffffff;
  --lvl-card-radius: 20px;
  --lvl-accent: #ff9d1b;
  --lvl-accent-2: #ffcf4a;
  --lvl-overlay-button-bg: #ff9d1b;
  --lvl-overlay-button-text: #251000;
  --lvl-play-icon-bg: rgba(0,0,0,0.55);
  --lvl-play-icon-color: #ffffff;
  --lvl-play-icon-border: rgba(255,255,255,0.85);
  --lvl-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.lvl-playlist,
.lvl-watch-page,
.lvl-video-card,
.lvl-thumb-wrap,
.lvl-video-thumb,
.lvl-video-grid,
.lvl-watch-theatre,
.lvl-watch-frame {
  box-sizing: border-box;
}

/* Playlist / thumbnail library — restored from the last known-good thumbnail styling. */
.lvl-playlist {
  width: 100%;
  padding: 18px;
  padding-bottom: 120px;
}

.lvl-playlist-title {
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.15;
}

.lvl-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lvl-grid-min), 1fr));
  gap: 18px;
  width: 100%;
  align-items: start;
}

.lvl-video-grid > * {
  align-self: start;
}

.lvl-video-grid p,
.lvl-playlist p:has(.lvl-video-card) {
  margin: 0 !important;
  padding: 0 !important;
}

.lvl-video-grid br {
  display: none;
}

.lvl-video-card {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--lvl-card-text) !important;
  background: var(--lvl-card-bg);
  border-radius: var(--lvl-card-radius);
  overflow: hidden;
  box-shadow: var(--lvl-shadow);
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.lvl-video-card:hover,
.lvl-video-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.36);
  filter: brightness(1.04);
}

.lvl-thumb-wrap {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

.lvl-video-thumb {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lvl-play-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -58%);
  border-radius: 999px;
  background: var(--lvl-play-icon-bg);
  border: 2px solid var(--lvl-play-icon-border);
  z-index: 2;
}

.lvl-play-icon::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid var(--lvl-play-icon-color);
}

.lvl-video-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  text-align: center;
}

.lvl-video-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.lvl-video-description {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.86;
}

.lvl-thumb-shade {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(0,0,0,0.58), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}

.lvl-video-button,
.lvl-watch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lvl-accent), var(--lvl-accent-2));
  color: #251000 !important;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  text-decoration: none !important;
}

.lvl-video-button-overlay {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin-top: 0;
  background: var(--lvl-overlay-button-bg);
  color: var(--lvl-overlay-button-text) !important;
  z-index: 3;
  min-width: max-content;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.lvl-overlay-style-pill .lvl-video-button-overlay { border-radius: 999px; }
.lvl-overlay-style-rounded .lvl-video-button-overlay { border-radius: 12px; }
.lvl-overlay-style-square .lvl-video-button-overlay { border-radius: 0; }
.lvl-overlay-style-outline .lvl-video-button-overlay {
  background: transparent;
  color: var(--lvl-overlay-button-bg) !important;
  border: 2px solid var(--lvl-overlay-button-bg);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Watch page — portrait/default. */
.lvl-watch-page {
  width: 100%;
  padding: 10px;
  padding-bottom: 130px;
}

.lvl-watch-theatre {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lvl-watch-frame {
  order: 1;
  position: relative;
  width: min(100%, 1100px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--lvl-shadow);
}

.lvl-watch-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lvl-watch-side {
  order: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
}

.lvl-watch-back-circle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lvl-accent), var(--lvl-accent-2));
  color: #251000 !important;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
  -webkit-tap-highlight-color: transparent;
}

.lvl-watch-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px auto 0;
}

.lvl-error {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff3cd;
  color: #664d03;
}

/* Watch page — landscape/theatre mode.
   Breaks out of narrow WordPress theme containers and sizes from viewport height. */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  :root {
    --lvl-theatre-back-width: 34px;
    --lvl-theatre-gap: 2px;
  }

  .lvl-watch-page:not(.lvl-watch-page-contained) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
  }

  .lvl-watch-theatre {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--lvl-theatre-gap) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
    box-sizing: border-box;
  }

  .lvl-watch-side {
    order: 1;
    width: var(--lvl-theatre-back-width) !important;
    min-width: var(--lvl-theatre-back-width) !important;
    max-width: var(--lvl-theatre-back-width) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--lvl-theatre-back-width) !important;
  }

  .lvl-watch-frame {
    order: 2;
    width: min(
      calc(100vw - var(--lvl-theatre-back-width) - var(--lvl-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
    ) !important;
    height: min(
      calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
      calc((100vw - var(--lvl-theatre-back-width) - var(--lvl-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 9 / 16)
    ) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
  }

  .lvl-watch-frame iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .lvl-watch-back-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 22px !important;
  }

  .lvl-watch-actions { display: none !important; }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
    .lvl-watch-page:not(.lvl-watch-page-contained) {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
    .lvl-watch-theatre {
      height: 100dvh !important;
    }
    .lvl-watch-frame {
      width: min(
        calc(100vw - var(--lvl-theatre-back-width) - var(--lvl-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)),
        calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
      ) !important;
      height: min(
        calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
        calc((100vw - var(--lvl-theatre-back-width) - var(--lvl-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 9 / 16)
      ) !important;
    }
  }
}

/* Contained theatre watch mode.
   Use this on a separate WordPress page with [link_watch_contained].
   It avoids fixed positioning so page builders/flexbox layouts can still control the page. */
.lvl-watch-page-contained {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
  background: transparent;
}

.lvl-watch-page-contained .lvl-watch-theatre {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lvl-watch-page-contained .lvl-watch-frame {
  order: 1;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 auto !important;
  border-radius: 14px;
}

.lvl-watch-page-contained .lvl-watch-side {
  order: 2;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .lvl-watch-page-contained {
    /* Stay inside the WordPress layout while using as much viewport height as practical. */
    width: 100% !important;
    max-width: 100% !important;
    height: min(100%, calc(100vh - 8px)) !important;
    min-height: min(420px, calc(100vh - 8px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .lvl-watch-page-contained .lvl-watch-theatre {
    --lvl-contained-back-width: 32px;
    --lvl-contained-gap: 4px;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 8px) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--lvl-contained-gap) !important;
  }

  .lvl-watch-page-contained .lvl-watch-side {
    order: 1;
    width: var(--lvl-contained-back-width) !important;
    min-width: var(--lvl-contained-back-width) !important;
    max-width: var(--lvl-contained-back-width) !important;
    height: 100% !important;
    flex: 0 0 var(--lvl-contained-back-width) !important;
    align-self: stretch !important;
    justify-content: center !important;
  }

  .lvl-watch-page-contained .lvl-watch-frame {
    order: 2;
    /* Height-first sizing, constrained by parent width, with no fixed-position breakout. */
    height: min(100%, calc(100vh - 8px)) !important;
    width: auto !important;
    max-width: calc(100% - var(--lvl-contained-back-width) - var(--lvl-contained-gap)) !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 1 auto !important;
    border-radius: 6px !important;
  }

  .lvl-watch-page-contained .lvl-watch-back-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 22px !important;
  }

  .lvl-watch-page-contained .lvl-watch-actions { display: none !important; }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
    .lvl-watch-page-contained {
      height: min(100%, calc(100dvh - 8px)) !important;
      min-height: min(420px, calc(100dvh - 8px)) !important;
    }
    .lvl-watch-page-contained .lvl-watch-theatre {
      max-height: calc(100dvh - 8px) !important;
    }
    .lvl-watch-page-contained .lvl-watch-frame {
      height: min(100%, calc(100dvh - 8px)) !important;
    }
  }
}

/* First-video playlist card. Keeps a single playlist item aligned with normal card styling. */
.lvl-playlist-first {
  padding: 0;
  padding-bottom: 0;
}

.lvl-video-grid-first {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  margin: 0 auto;
}

/* Playlist watch page. This is intentionally separate from theatre mode so it works in normal WordPress layouts. */
.lvl-playlist-watch-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 10px 130px;
  box-sizing: border-box;
}

.lvl-playlist-watch-player-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto 18px;
}

.lvl-playlist-watch-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: var(--lvl-shadow);
}

.lvl-playlist-watch-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lvl-playlist-watch-back {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
}

.lvl-playlist-watch-current-title {
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.15;
}

.lvl-playlist-watch-list {
  width: 100%;
}

.lvl-playlist-watch-list-title {
  margin: 0 0 12px;
  text-align: center;
  line-height: 1.15;
}

.lvl-playlist-watch-grid {
  --lvl-grid-min: 150px;
}

.lvl-playlist-watch-item {
  position: relative;
  align-self: start;
}

.lvl-playlist-watch-item.is-current .lvl-video-card {
  outline: 3px solid var(--lvl-accent);
  outline-offset: 2px;
  filter: brightness(1.06);
}

.lvl-playlist-watch-item.is-current::after {
  content: "Now Playing";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--lvl-accent);
  color: #251000;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .lvl-playlist-watch-page {
    padding: 4px 6px 110px;
  }

  .lvl-playlist-watch-player-wrap {
    max-width: min(100%, calc((100vh - 118px) * 16 / 9));
    margin-bottom: 10px;
  }

  .lvl-playlist-watch-frame {
    border-radius: 8px;
  }

  .lvl-playlist-watch-grid {
    --lvl-grid-min: 135px;
    gap: 10px;
  }

  .lvl-playlist-watch-list-title {
    margin-bottom: 8px;
    font-size: 16px;
  }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
    .lvl-playlist-watch-player-wrap {
      max-width: min(100%, calc((100dvh - 118px) * 16 / 9));
    }
  }
}


/* v1.0.15: Watch Now button removed; keep the whole card clickable with centred play icon only. */
.lvl-video-button-overlay {
  display: none !important;
}

/* v1.0.15: playlist watch landscape mode now uses height-first sizing like the normal watch page, but remains in document flow so the video list can sit below it. */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .lvl-playlist-watch-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 0 110px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .lvl-playlist-watch-player-wrap {
    --lvl-playlist-theatre-back-width: 34px;
    --lvl-playlist-theatre-gap: 2px;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 4px) !important;
    min-height: 0 !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--lvl-playlist-theatre-gap) !important;
    box-sizing: border-box !important;
  }

  .lvl-playlist-watch-back {
    position: static !important;
    order: 1 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 var(--lvl-playlist-theatre-back-width) !important;
    margin: 0 !important;
    font-size: 22px !important;
    z-index: 4 !important;
  }

  .lvl-playlist-watch-frame {
    order: 2 !important;
    width: min(
      calc(100vw - var(--lvl-playlist-theatre-back-width) - var(--lvl-playlist-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc((100vh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
    ) !important;
    height: min(
      calc(100vh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
      calc((100vw - var(--lvl-playlist-theatre-back-width) - var(--lvl-playlist-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 9 / 16)
    ) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
  }

  .lvl-playlist-watch-frame iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .lvl-playlist-watch-list {
    padding: 10px 8px 0 !important;
    box-sizing: border-box !important;
  }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
    .lvl-playlist-watch-player-wrap {
      height: calc(100dvh - 4px) !important;
    }

    .lvl-playlist-watch-frame {
      width: min(
        calc(100vw - var(--lvl-playlist-theatre-back-width) - var(--lvl-playlist-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)),
        calc((100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
      ) !important;
      height: min(
        calc(100dvh - 4px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
        calc((100vw - var(--lvl-playlist-theatre-back-width) - var(--lvl-playlist-theatre-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 9 / 16)
      ) !important;
    }
  }
}

/* v1.0.17: YouTube Shorts support.
   Shorts thumbnail cards stay horizontal 16:9 like normal YouTube thumbnails.
   Only the Shorts watch page uses vertical theatre sizing. */
.lvl-short-card {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.lvl-short-thumb-wrap {
  aspect-ratio: 16 / 9;
}

.lvl-short-thumb {
  object-fit: cover;
}

.lvl-short-watch-page,
.lvl-short-watch-theatre,
.lvl-short-watch-frame {
  box-sizing: border-box;
}

.lvl-short-watch-page {
  width: 100%;
  padding: 8px 10px 130px;
}

.lvl-short-watch-theatre {
  width: 100%;
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lvl-short-watch-frame {
  position: relative;
  width: min(100%, calc((100dvh - 205px) * 9 / 16), 480px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: var(--lvl-shadow);
}

.lvl-short-watch-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lvl-short-watch-side {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Landscape for Shorts: keep the video vertical, but use the full available height with side space. */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .lvl-short-watch-page {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent;
  }

  .lvl-short-watch-theatre {
    --lvl-short-back-width: 34px;
    --lvl-short-gap: 4px;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--lvl-short-gap) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
    box-sizing: border-box !important;
  }

  .lvl-short-watch-frame {
    order: 1;
    width: min(
      calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16),
      calc(100vw - var(--lvl-short-back-width) - var(--lvl-short-gap) - env(safe-area-inset-left) - env(safe-area-inset-right))
    ) !important;
    height: min(
      calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
      calc((100vw - var(--lvl-short-back-width) - var(--lvl-short-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 16 / 9)
    ) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
  }

  .lvl-short-watch-side {
    order: 2;
    width: var(--lvl-short-back-width) !important;
    min-width: var(--lvl-short-back-width) !important;
    max-width: var(--lvl-short-back-width) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--lvl-short-back-width) !important;
  }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
    .lvl-short-watch-page,
    .lvl-short-watch-theatre {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }

    .lvl-short-watch-frame {
      width: min(
        calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16),
        calc(100vw - var(--lvl-short-back-width) - var(--lvl-short-gap) - env(safe-area-inset-left) - env(safe-area-inset-right))
      ) !important;
      height: min(
        calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
        calc((100vw - var(--lvl-short-back-width) - var(--lvl-short-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)) * 16 / 9)
      ) !important;
    }
  }
}