/* Chapters I and II film direction. Shared controls retain the VEIL design-system skin.
   These rules apply only while a directed shot owns the surface. */
#game [data-ui-screen][data-cinema="true"] :is(.story-shell, .cutscene-shell) {
  overflow-y: auto;
  background: #050b0f;
  scrollbar-width: thin;
  scrollbar-color: #526770 #050b0f;
}
#game [data-ui-screen][data-cinema="true"] .story-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
}
#game [data-ui-screen][data-cinema="true"] .cutscene-shell {
  grid-template-rows: auto minmax(180px, 1fr) auto;
}
#game [data-ui-screen][data-cinema="true"] :is(.story-header, .cutscene-header) {
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  gap: 10px;
  background: #071015;
  border-bottom: 1px solid #b5945933;
}
#game [data-ui-screen][data-cinema="true"] :is(.story-header, .cutscene-header) > div:first-child {
  min-width: 0;
}
#game [data-ui-screen][data-cinema="true"] :is(.story-header, .cutscene-header) h1 {
  max-width: none;
  font-size: clamp(18px, 4.5vw, 23px);
  line-height: 1.15;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
#game [data-ui-screen][data-cinema="true"] :is(.story-header, .cutscene-header) .eyebrow {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: #a0bcc3;
}
#game [data-ui-screen][data-cinema="true"] .story-quest-strip {
  gap: 5px 10px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid #29434b;
  background: #0a141b;
  letter-spacing: .025em;
}
#game [data-ui-screen][data-cinema="true"] .story-quest-strip > strong {
  font-size: 11px;
  line-height: 1.3;
}
#game [data-ui-screen][data-cinema="true"] .story-dialogue-stage {
  display: grid;
  grid-template-rows: minmax(180px, 1fr) auto;
  overflow: visible;
}
#game [data-ui-screen][data-cinema="true"] :is(.story-visual, .cutscene-visual) {
  min-height: 180px;
  height: auto;
  contain: paint;
  background: #060c10;
}

/* A background is a legible place, not a dark rectangle behind a full-body icon. */
#game .story-visual[data-cinema="true"] .story-backdrop {
  background: var(--story-background) var(--cinema-focus-x, 50%) var(--cinema-focus-y, 45%) / cover no-repeat;
  filter: saturate(.94) brightness(.93);
  animation: none;
}
#game .cutscene-visual[data-cinema="true"] .cutscene-backdrop,
#game [data-cinema="true"] .story-cinema-reveal {
  object-fit: cover;
  object-position: var(--cinema-focus-x, 50%) var(--cinema-focus-y, 45%);
  filter: saturate(.94) brightness(.93);
  animation: none;
}
#game [data-cinema="true"] .cutscene-shade {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, #04090e88, transparent 22%, transparent 86%, #04090e55);
}
#game [data-cinema="true"] .story-cinema-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#game [data-cinema="true"] :is(.story-npc-sprite, .cutscene-portrait) {
  z-index: 4;
  inset: 2% auto auto 50%;
  width: 100%;
  max-width: none;
  height: 164%;
  object-fit: contain;
  object-position: center top;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 15px #0009);
  transition: none;
}
#game [data-cinema="true"][data-cinema-actor-side="left"] :is(.story-npc-sprite, .cutscene-portrait) { left: 39%; }
#game [data-cinema="true"][data-cinema-actor-side="right"] :is(.story-npc-sprite, .cutscene-portrait) { left: 61%; }
#game [data-cinema="true"] .story-cinema-secondary {
  position: absolute;
  z-index: 3;
  inset: 10% auto auto 70%;
  width: 73%;
  height: 132%;
  object-fit: contain;
  object-position: center top;
  transform: translateX(-50%);
  filter: brightness(.59) saturate(.72) drop-shadow(0 8px 15px #0009);
  pointer-events: none;
}
#game [data-cinema="true"][data-cinema-secondary-side="left"] .story-cinema-secondary { left: 23%; }
#game [data-cinema="true"][data-cinema-secondary-side="right"] .story-cinema-secondary { left: 77%; }
#game [data-cinema="true"][data-cinema-mode="establish"] :is(.story-npc-sprite, .cutscene-portrait, .story-cinema-secondary) {
  top: 23%;
  height: 108%;
  width: 64%;
}

/* Props retain their transparent silhouettes and own a specific staging anchor. */
#game [data-cinema="true"] :is(.story-item-prop, .cutscene-item-prop) {
  position: absolute;
  z-index: 6;
  inset: var(--cinema-prop-y, 64%) auto auto var(--cinema-prop-x, 66%);
  width: var(--cinema-prop-width, 30%);
  height: auto;
  max-height: 80%;
  max-width: 90%;
  object-fit: contain;
  border: 0;
  box-shadow: none;
  background: transparent;
  filter: drop-shadow(0 10px 10px #000b);
  transform: translate(-50%, -50%);
}
#game [data-cinema="true"] .story-cinema-evidence {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
#game [data-cinema="true"] .story-cinema-evidence-prop {
  position: absolute;
  inset: var(--cinema-evidence-y, 65%) auto auto var(--cinema-evidence-x, 50%);
  width: var(--cinema-evidence-width, 24%);
  height: auto;
  max-height: 80%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 7px 8px #000b);
}
#game [data-cinema="true"] .story-cinema-prop-label {
  position: absolute;
  z-index: 9;
  inset: auto 14px 10px auto;
  max-width: calc(100% - 28px);
  padding: 5px 9px;
  border-left: 2px solid #c19b60;
  background: #071015e8;
  color: #dcc6a0;
  font: 11px/1.35 var(--ui-font-body);
  letter-spacing: .015em;
  overflow-wrap: anywhere;
  pointer-events: none;
}
#game [data-cinema="true"] [hidden] { display: none !important; }

/* Light/weather are behind faces. Event layers are finite, with a held aftermath. */
#game [data-cinema="true"] :is(.story-cinema-atmosphere, .story-cinema-action, .story-cinema-wash) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
#game [data-cinema="true"] .story-cinema-atmosphere { z-index: 2; }
#game [data-cinema="true"] .story-cinema-action { z-index: 7; mix-blend-mode: screen; }
#game [data-cinema="true"] .story-cinema-wash { z-index: 8; background: #03070c; }
#game [data-cinema="true"][data-cinema-effect="rain"] .story-cinema-atmosphere {
  background: repeating-linear-gradient(105deg, transparent 0 31px, #a3cad42b 32px, transparent 33px 78px);
  background-size: 180% 180%;
  animation: storyFilmRain 10s linear 1 both;
}
#game [data-cinema="true"]:is([data-cinema-effect="dust"], [data-cinema-effect="embers"]) .story-cinema-atmosphere {
  background-image: radial-gradient(ellipse at 18% 35%, #d8bc8080 0 1px, transparent 2px),
    radial-gradient(ellipse at 64% 61%, #a2c8ca88 0 1px, transparent 2px),
    radial-gradient(ellipse at 41% 82%, #dfb96b88 0 1px, transparent 2px);
  background-size: 110px 120px, 160px 150px, 220px 190px;
  animation: storyFilmDust 9s ease-out 1 both;
}
#game [data-cinema="true"][data-cinema-effect="memory"] .story-cinema-action {
  background: linear-gradient(105deg, transparent 30%, #addce52b 48%, transparent 64%),
    linear-gradient(0deg, #5993a31f, transparent 60%);
}
#game [data-cinema="true"][data-cinema-effect="flood"] .story-cinema-action {
  top: 40%;
  background: repeating-linear-gradient(174deg, transparent 0 18px, #9ed2e83b 21px, transparent 25px 43px),
    linear-gradient(0deg, #5fa6c175, #6091a140 55%, transparent);
  mask-image: linear-gradient(0deg, black 70%, transparent);
}
#game [data-cinema="true"][data-cinema-effect="seal"] .story-cinema-action {
  background: radial-gradient(ellipse at var(--cinema-prop-x, 50%) var(--cinema-prop-y, 48%), #ccab744d, #62d3e41a 13%, transparent 38%);
}
#game [data-cinema="true"][data-cinema-effect="mechanism"] .story-cinema-action {
  background: conic-gradient(from 20deg at 50% 64%, transparent 0 31%, #98c9d124 32%, transparent 34% 65%, #e5cc9424 66%, transparent 68%),
    radial-gradient(ellipse at 50% 64%, #93d6e32b, transparent 50%);
}
#game [data-cinema="true"][data-cinema-paused="true"] :is(.story-cinema-atmosphere, .story-cinema-action) { animation-play-state: paused; }
#game [data-cinema="true"][data-cinema-reduced="true"] :is(.story-cinema-atmosphere, .story-cinema-action) { animation: none; }
#game [data-cinema="true"][data-cinema-reduced="true"] .story-cinema-atmosphere { opacity: .2; }
@keyframes storyFilmRain { from { background-position: 0 0; } to { background-position: -80px 270px; } }
@keyframes storyFilmDust { from { background-position: 0 30px; } to { background-position: 16px -25px; } }

/* Art and readable subtitles have separate rows. Never place text over a face. */
#game [data-ui-screen][data-cinema="true"] :is(.story-dialogue-panel, .cutscene-caption) {
  min-height: 0;
  max-height: 43dvh;
  margin: 0 8px max(8px, env(safe-area-inset-bottom));
  padding: 10px;
  border-width: 12px;
  border-image-width: 12px;
  box-shadow: 0 -5px 16px #0005;
  overflow-y: auto;
}
#game [data-ui-screen][data-cinema="true"] .story-dialogue-panel:has(.story-choices:not([hidden])) { max-height: 52dvh; }
#game [data-ui-screen][data-cinema="true"] .story-dialogue-panel .eyebrow { margin: 0 0 4px; color: #cbb78e; font-size: 10px; }
#game [data-ui-screen][data-cinema="true"] .story-npc-role { font-size: 10px; margin: 0; color: #91a9b4; }
#game [data-ui-screen][data-cinema="true"] .story-dialogue-panel h2 { margin: 2px 0 9px; font-size: 21px; line-height: 1.15; color: #e9dfcb; }
#game [data-ui-screen][data-cinema="true"] :is(.story-dialogue-text, .cutscene-text) {
  flex: 0 0 auto;
  margin: 0 0 12px;
  min-height: 0;
  font-size: 15px;
  line-height: 1.55;
  overflow: visible;
  color: #e8e3d7;
  overflow-wrap: anywhere;
}
#game [data-ui-screen][data-cinema="true"] .story-choices {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  margin-bottom: 8px;
  gap: 7px;
}
#game [data-ui-screen][data-cinema="true"] .story-choice { font-size: 13px; min-height: 44px; }
#game [data-ui-screen][data-cinema="true"] .cutscene-speaker { margin: 0 34px 9px 0; font-size: 11px; letter-spacing: .06em; }
#game [data-ui-screen][data-cinema="true"] .cutscene-location {
  margin: 0 28px 5px 0;
  font: 10px/1.4 var(--ui-font-body);
  color: #cbb78e;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
#game [data-ui-screen][data-cinema="true"] .cutscene-frame-counter { top: 10px; right: 10px; font-size: 11px; }
@media (max-height: 580px) {
  #game [data-ui-screen][data-cinema="true"] :is(.story-shell, .cutscene-shell, .story-dialogue-stage) { display: block; }
  #game [data-ui-screen][data-cinema="true"] :is(.story-visual, .cutscene-visual) { height: 210px; }
  #game [data-ui-screen][data-cinema="true"] :is(.story-dialogue-panel, .cutscene-caption),
  #game [data-ui-screen][data-cinema="true"] .story-dialogue-panel:has(.story-choices:not([hidden])) { max-height: none; }
}