/* Scoped to the six opening scenes; other cinematics keep their existing layout. */
#cinematic.opening-illustrated {
  background: linear-gradient(180deg, #081523f5, #0b1426fa 78%);
}
#opening-stage {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid #d8b46a24;
  border-radius: 12px;
  box-shadow: 0 12px 48px #02080d70;
}
#opening-art { display: block; width: 100%; height: 100%; }
.opening-illustrated .cinema-bars { display: none; }
.opening-illustrated .cinema-caption {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 12px clamp(16px, 4vw, 40px) max(44px, 6vh);
  max-height: 64dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0b142600, #0b1426ee 24%);
}
.opening-illustrated .cinema-caption h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  margin: 8px 0;
}
.opening-illustrated .cinema-caption > #scene-text {
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.45;
  min-height: 0;
  max-height: 24dvh;
  overflow-y: auto;
  margin: 12px 0;
  scrollbar-width: thin;
}
.opening-illustrated #scene-text:focus-visible {
  outline: 1px solid #d8b46a;
  outline-offset: 3px;
}
.opening-illustrated #scene-number { z-index: 2; pointer-events: none; bottom: 16px; }
@media (max-height: 450px) {
  .opening-illustrated .cinema-caption { padding: 6px 16px 28px; max-height: 68dvh; }
  .opening-illustrated .cinema-caption h2 { font-size: 25px; margin: 4px 0; }
  .opening-illustrated .cinema-caption > #scene-text { max-height: 20dvh; margin: 6px 0; }
  .opening-illustrated .cinema-caption button { margin: 4px 8px; }
  .opening-illustrated #scene-number { bottom: 8px; font-size: 8px; }
}
.opening-prose-measure {
  position: fixed;
  left: -10000px;
  top: 0;
  padding: 0;
  border: 0;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}
.opening-scroll-cue {
  display: block;
  height: 16px;
  margin: -6px 0 4px;
  color: var(--gold);
  font: 10px/16px "DM Mono", monospace;
  visibility: hidden;
}
.opening-scroll-cue.is-visible { visibility: visible; }
.opening-illustrated #scene-text.opening-scrollable {
  box-shadow: inset 0 -10px 12px -12px #e8bb75;
}

@media (max-height: 450px) and (min-width: 560px) {
  #cinematic.opening-illustrated { align-items: center; justify-content: flex-end; }
  .opening-illustrated .cinema-caption {
    width: 55%; max-height: calc(100dvh - 16px); padding: 8px 16px 28px;
  }
  .opening-illustrated .cinema-caption > #scene-text { max-height: 30dvh; }
}