/* ============================================
   OPENING CUT-SCENE — baked-video player
   ============================================
   The video arm of the opening A/B. A full-bleed <video> with an in-engine
   typewriter overlay (styled via dialogue.css), the global #spell-seals overlay
   for the flash/reveal, and an always-available Skip control. See
   game/js/cutscene.js and docs/tech/opening-scene-poc-code-session-brief.md. */

#screen-cutscene {
  background: #000;
  padding: 0;
}

/* Full-bleed video — the viewport is locked to 16:9 and the MP4 is 1920x1080,
   so `cover` fills it exactly with no crop. */
.cutscene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
}

/* In-engine typewriter overlay — mirrors #dialogue-container's placement so the
   box sits in the familiar bottom band. Text only (no portrait): PP's face is in
   the video. pointer-events stay off so the Skip button underneath stays tappable. */
.cutscene-dialogue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) translateZ(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.cutscene-dialogue.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* Skip control — always available, generous tap target for small hands. */
.cutscene-skip {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 40;
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 1.2vw, 0.6rem);
  letter-spacing: 0.08em;
  color: var(--text-light);
  background: rgba(10, 14, 20, 0.7);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 0.7em 1.1em;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.cutscene-skip:hover,
.cutscene-skip:active {
  opacity: 1;
  background: rgba(20, 26, 36, 0.92);
}