/* "Watch a round": a recording of the real game room (tools/record-room-video.py, README "Room video").
   Wide video on desktops and tablets, the phone recording on portrait phones. */
.room-video {
  margin: 0 auto;
  max-width: 1100px;
}

.room-video-clip {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: #0b1420;
  box-shadow: 0 18px 48px rgba(0, 40, 34, 0.28);
}

.room-video-clip.wide {
  aspect-ratio: 16 / 9;
}

.room-video-clip.tall {
  display: none;
  aspect-ratio: 9 / 20;
}

.room-video figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--home-muted);
}

.room-video figcaption a {
  color: var(--home-teal);
  font-weight: 600;
}

/* Embedded: the video fits the height of the frame above the button */
.embed-page .room-video {
  width: 100%;
  max-width: calc((100vh - 90px) * 16 / 9);
  margin-top: auto;
}

.embed-page .embed-cta {
  margin-bottom: auto;
}

@media (max-width: 600px) and (orientation: portrait) {
  .room-video:not(.single) .room-video-clip.wide {
    display: none;
  }

  /* The whole phone screen fits in the viewport */
  .room-video-clip.tall {
    display: block;
    margin: 0 auto;
    max-width: calc((100vh - 110px) * 0.45);
    max-width: calc((100svh - 110px) * 0.45);
    border-radius: 14px;
  }
}