/* The centred video player (task.md section 9). Clips and the final video are
   watched here: in the middle of the screen, over a dim backdrop, played once on
   open by video.js, with no controls.

   The backdrop is the same idea as the modal scrim, but it belongs to the video
   alone, so it never sits over the quest photo. */

.videobox {
  position: fixed;
  inset: 0;
  z-index: 60; /* over the sheet (40) and the confetti (50) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  /* The same fixed dark ink as the modal .scrim (sheet.css): --ink itself turns
     pale in the dark theme, which would make this a light backdrop. */
  background: rgb(43 29 69 / 72%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.videobox--open {
  opacity: 1;
}

/* Round, like the Telegram video message it came from. A downloaded circle is
   often letterboxed with white bars on the sides; `object-fit: cover` fills the
   1:1 box and crops them, and the 50% radius hides the corners. */
.videobox__video {
  width: min(78vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.videobox__close {
  position: absolute;
  top: calc(var(--space-3) + env(safe-area-inset-top));
  right: var(--space-3);
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}