/* Full-screen short videos (Videos tab) — vertical Reels / Shorts layout */
.reel {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  box-sizing: border-box;
  margin: 0;
  margin-top: 0 !important;
  padding: 0;
  padding-top: 0 !important;
  top: 0 !important;
  background: #0b0f19 !important;
  background-color: #0b0f19 !important;
}
.reels-shell,
.cheerdi-embed,
#tab-content-frame,
.tab-frame {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
}
.reel video,
.reel-thumb {
  position: absolute;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  margin-top: 0 !important;
  padding: 0;
  padding-top: 0 !important;
  background: #000 !important;
  background-color: #000 !important;
  display: block;
}
.reel-side {
  position: absolute;
  right: 10px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
@media (min-width: 768px) {
  .reel-side {
    right: 78px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Top header never appears on Videos (hard refresh included) */
#top-nav-bar,
header.main-header,
nav.top-navigation,
.cheerdi-top-bar,
.cheerdi-top-nav,
#cheerdiTopNav,
.reels-top {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* PC only. Phone rules above stay object-fit:cover with the name over the video.
   v79: Previous/Next are fixed round buttons. Name and description sit in a panel
   under the picture so they do not cover the frame. */
@media (min-width: 1024px) {
  .reel {
    background: #07070f !important;
    background-color: #07070f !important;
  }
  .reel video,
  .reel-thumb {
    object-fit: contain !important;
    width: auto !important;
    min-width: 0 !important;
    height: calc(100% - 176px) !important;
    min-height: 0 !important;
    max-height: calc(100% - 176px) !important;
    max-width: min(440px, 46%) !important;
    aspect-ratio: 9 / 16;
    left: 50% !important;
    top: 16px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
  }
  .reel-meta {
    left: 50% !important;
    right: auto !important;
    width: min(460px, calc(100% - 180px)) !important;
    transform: translateX(-50%) !important;
    bottom: 14px !important;
    background: #12182a !important;
  }
  .reel-side {
    right: 18px !important;
    top: auto !important;
    bottom: 28px !important;
    transform: none !important;
    z-index: 7;
  }
  .pc-video-nav {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    right: 96px !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
  }
}