/* The page a film is watched on: the stage, a bar of controls, and the chapters.
   The stage itself (everything inside #stage) is styled by ../intro-video/film.css and film-x.css. */

html, body { height: auto; min-height: 100%; overflow: visible; }
body.xp-page {
  margin: 0; background: #05070F; color: var(--text); font-family: var(--body);
  display: flex; justify-content: center; padding: 18px 16px 40px; overflow-x: hidden;
}
.xp { width: min(1120px, 100%); }
.xp-back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0 0 4px;
  color: var(--muted); font: 600 14px/1 var(--body); text-decoration: none;
}
.xp-back:hover { color: var(--text); }
.xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 2px 12px; }
.xp-head h1 { margin: 0; font: 800 clamp(20px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.01em; }
.xp-head p { margin: 0; color: var(--muted); font: 500 14px/1.3 var(--body); text-align: right; }

/* ── the frame the stage is scaled into ── */
.xp-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.xp-frame.tall { aspect-ratio: 3 / 5; }
.xp-frame #stage { cursor: pointer; }
.xp-frame:fullscreen { border: 0; border-radius: 0; aspect-ratio: auto; background: #000; }
.xp-frame.loading::after {
  content: 'Loading the film…'; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font: 500 13px/1 var(--body); color: var(--muted); letter-spacing: .04em;
}
.xp-missing { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--muted); }

/* The still before Play: the film's cover, laid over the stage (player.js sizes it to match).
   It is not part of the film. It lets go as the film starts, and does not come back on replay. */
.xp-poster { position: absolute; display: none; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity .3s ease-out; }
.xp-frame.has-poster .xp-poster { display: block; }
.xp-frame.started .xp-poster { opacity: 0; }

.xp-start {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; border-radius: 16px; padding: 16px 30px 14px; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 16px 50px rgba(46,92,255,.55);
  font: 700 clamp(16px, 2vw, 21px)/1 var(--display);
}
.xp-start small { font: 500 12px/1 var(--body); opacity: .85; letter-spacing: .02em; }
.xp-start:hover { background: #3A68FF; }
.xp-frame.started .xp-start, .xp-frame.loading .xp-start { display: none; }

/* ── controls ── */
.xp-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.xp-bar button, .xp-chapters button {
  font: 700 13px/1 var(--display); color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.xp-bar button:hover, .xp-chapters button:hover { border-color: var(--accent-text); }
.xp-bar button:disabled { opacity: .45; cursor: default; border-color: var(--line); }
.xp-bar button:focus-visible, .xp-chapters button:focus-visible, .xp-start:focus-visible, .xp-back:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
#play { background: var(--accent); border-color: var(--accent); min-width: 78px; }
#sound[aria-pressed="false"], #captions[aria-pressed="true"] { border-color: var(--accent-text); color: #fff; background: rgba(46,92,255,.18); }
#clock { font: 500 13px/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 86px; text-align: center; }
#scrub { flex: 1 1 180px; min-width: 120px; accent-color: var(--accent); height: 28px; }

.xp-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.xp-chapters button { font-size: 12px; padding: 7px 12px; border-radius: 20px; color: var(--muted); }
.xp-chapters button.on { border-color: var(--accent-text); color: #fff; background: rgba(46,92,255,.18); }
.xp-note { min-height: 18px; margin: 12px 2px 0; color: var(--gold); font: 500 13px/1.4 var(--body); }
.xp-hint { margin: 6px 2px 0; color: var(--dim); font: 400 13px/1.5 var(--body); }

/* ── a phone: the tall film, then the controls in two rows ── */
@media (max-width: 640px) {
  body.xp-page { padding: 8px 12px 28px; }
  .xp-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; }
  .xp-head p { text-align: left; }
  .xp-frame { border-radius: 14px; }
  .xp-bar { gap: 8px; }
  #scrub { order: 10; flex-basis: 100%; }
  .xp-bar button { padding: 10px 11px; }
  #fullscreen { display: none; }
}