/* ---------------------------------------------------------------------------
   Player shell.

   The recording page runs fullscreen with the cursor hidden; embedded on the
   document it needs a frame, a play control and a progress line instead.
   These rules override video.css for that context only.
   --------------------------------------------------------------------------- */
html, body.player {
  margin: 0; padding: 0; height: auto; overflow: hidden;
  background: transparent; cursor: auto;
}

#shell {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #050B15; cursor: pointer;
}

/* The stage keeps its 1920x1080 authoring size and is scaled to the shell. */
body.player #stage {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
}

/* ── play control ─────────────────────────────────────────────────────── */
#play {
  position: absolute; inset: 0; z-index: 40; width: 100%; height: 100%;
  border: 0; background: rgba(5, 11, 21, 0.68);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; cursor: pointer; font-family: 'Inter', sans-serif; color: #F6FAFD;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#shell.is-playing #play { opacity: 0; pointer-events: none; }

.play__ring {
  width: clamp(58px, 7vw, 84px); height: clamp(58px, 7vw, 84px);
  border-radius: 50%; display: grid; place-items: center;
  background: #B3CFE5; color: #0A1931;
  box-shadow: 0 0 0 0 rgba(179, 207, 229, 0.5);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: ring 2.8s ease-out infinite;
}
.play__ring svg { width: 42%; height: 42%; margin-left: 8%; }
#play:hover .play__ring { transform: scale(1.07); }
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(179, 207, 229, 0.42); }
  70%  { box-shadow: 0 0 0 26px rgba(179, 207, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 207, 229, 0); }
}

.play__label {
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 650; letter-spacing: -0.015em;
}
.play__sub {
  font-size: clamp(11px, 1.1vw, 13px); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(179, 207, 229, 0.7); margin-top: -8px;
}

/* ── progress ─────────────────────────────────────────────────────────── */
#progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 45;
  background: rgba(179, 207, 229, 0.16);
}
#progress i { display: block; height: 100%; width: 0; background: #B3CFE5; }

/* ── captions, sized down for an embedded frame ───────────────────────── */
body.player .cap { left: 64px; bottom: 64px; }

@media (prefers-reduced-motion: reduce) {
  .play__ring { animation: none; }
}

/* ── fullscreen ───────────────────────────────────────────────────────── */
#full {
  position: absolute; right: 16px; bottom: 16px; z-index: 46;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(179, 207, 229, 0.24);
  background: rgba(5, 11, 21, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(246, 250, 253, 0.75);
  display: grid; place-items: center; padding: 0;
  opacity: 0; transition: opacity 300ms ease, background 200ms ease, color 200ms ease;
}
#full svg { width: 17px; height: 17px; }
#shell:hover #full, #shell.is-playing #full { opacity: 1; }
#full:hover { background: rgba(179, 207, 229, 0.9); color: #0A1931; }

/* Fullscreen fills the screen rather than keeping the embed's box. */
:fullscreen #shell, :-webkit-full-screen #shell { width: 100vw; height: 100vh; aspect-ratio: auto; }