/* The Film page (film.html, film.js): the film full-window, its chapter menu, the technical subtitles and the
   link into its set. No three.js, no WebGL: a video and a few controls in the viewer's own style. */
body.film-page main { display: block; padding: 8px; min-height: 0; }
body.film-page #screen { height: 100%; }
body.film-page video { background: #000; }
.filmbar { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 180px); }
.filmbar .chapters { display: flex; align-items: center; gap: 6px; color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.08em; background: rgba(21, 23, 26, 0.85); border: 1px solid var(--line); padding: 0 0 0 8px; }
.filmbar .chapters select { background-color: transparent; color: var(--text); border: none; border-left: 1px solid var(--line);
  font: inherit; padding: 3px 24px 3px 8px; text-transform: none; letter-spacing: 0.02em; max-width: 260px; }
.filmbar .setlink { display: inline-block; background: rgba(21, 23, 26, 0.85); color: var(--accent); border: 1px solid var(--line);
  padding: 3px 9px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.filmbar .setlink:hover { border-color: var(--accent); }
/* the film from YouTube (core/ytvideo.js): the still and a play button until play, then the player */
.yt-box { position: absolute; inset: 0; background: #000; }
.yt-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-facade { position: absolute; inset: 0; display: grid; place-content: end center; justify-items: center; gap: 14px; padding-bottom: 14vh;
  background: #000 50% 50% / contain no-repeat; }
.yt-facade::before { content: ''; position: absolute; inset: 0; background: rgba(11, 12, 14, 0.35); }
.yt-play { position: relative; display: flex; align-items: center; gap: 10px; background: rgba(21, 23, 26, 0.9); color: var(--text);
  border: 1px solid var(--accent); padding: 12px 22px; font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; }
.yt-play:hover { background: var(--accent); color: var(--bg); }
.yt-note { position: relative; margin: 0; color: var(--dim); font-size: 12px; text-shadow: 0 0 4px #000; max-width: 90vw; text-align: center; }
#chapter { color: var(--text); text-shadow: 0 0 4px #000, 0 0 2px #000; }
#chapter b { color: var(--accent); font-weight: normal; margin-right: 8px; }
/* the bar off the picture's top while the film plays, back on a pointer move or a pause (film.js) */
#screen.playing.calm .filmbar, #screen.playing.calm #chapter { opacity: 0; transition: opacity 0.6s; }
.filmbar, #chapter { transition: opacity 0.2s; }
@media (max-width: 720px) {
  .filmbar { max-width: calc(100% - 16px); top: auto; bottom: 64px; right: 8px; }
  .filmbar .chapters { font-size: 0; letter-spacing: 0; padding-left: 6px; }
  .filmbar .chapters select { font-size: 13px; }
}

#screen:fullscreen { width: 100vw; height: 100vh; background: #000; }