/* Adapted room/TV presentation. This file owns only the opening reel. */
.reel.paak-theatre {
  --theatre-height: min(72svh, 900px);
  height: calc(var(--theatre-height) + min(90svh, 1000px));
  overflow: visible;
  background: #000;
}
.paak-theatre-stage {
  position: sticky;
  top: calc((100svh - var(--theatre-height)) / 2);
  width: 100%;
  height: var(--theatre-height);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.paak-theatre-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 80px);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform;
}
.paak-theatre-plate {
  display: block;
  width: 100%;
  height: 100%;
}
.paak-theatre-screen {
  position: absolute;
  /* Inner display at (554, 325), 568x270; cover all placeholder edge pixels. */
  left: 33.13397%;
  top: 34.53773%;
  width: 33.97129%;
  height: 28.69288%;
  overflow: hidden;
  background: #000;
}
.reel.paak-theatre .videos-wrapper,
.reel.paak-theatre .video-wrapper,
.reel.paak-theatre .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
.reel.paak-theatre .media video {
  /* The dedicated preview matches the physical display; fill its last subpixel. */
  object-fit: cover;
  object-position: 50% 50%;
}
.paak-theatre-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Keep the approved room's clean lighting and complete edges. */
  background: none;
}
.reel.paak-theatre .reel-label {
  top: auto;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  text-decoration: underline 1px;
  text-underline-offset: 5px;
}
.paak-theatre-stage:focus-visible {
  outline-offset: -5px;
}
.reel.paak-theatre .mobile-label {
  display: none;
}
@media (max-width: 1023px) {
  .reel.paak-theatre {
    --theatre-height: min(64svh, 640px);
  }
}
@media (max-width: 767px) {
  .reel.paak-theatre {
    --theatre-height: clamp(270px, 100vw, 460px);
    height: calc(var(--theatre-height) + 60svh);
  }
  .paak-theatre-world {
    width: calc(100% - 20px);
  }
  .reel.paak-theatre .reel-label {
    display: none;
  }
  .reel.paak-theatre .mobile-label {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
  }
  .reel.paak-theatre .mobile-label svg {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel.paak-theatre {
    height: var(--theatre-height);
  }
  .paak-theatre-stage {
    position: relative;
    top: 0;
  }
  .paak-theatre-world {
    will-change: auto;
  }
}