/* 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%);
}
/* The map of the five Gates is a plate lying on the table, not a flat screenshot. */
#game [data-cinema="true"] :is(.story-item-prop, .cutscene-item-prop, .story-cinema-evidence-prop)[data-kind="map"] {
  border: 2px solid #9c7a46;
  border-radius: 3px;
  box-shadow: 0 0 0 3px #140d07, 0 0 0 4px #c19b6055, 0 22px 30px #000d, 0 0 32px #8fe0e824;
  filter: sepia(.22) saturate(.9) brightness(1.12) contrast(1.06);
  transform: translate(-50%, -50%) perspective(900px) rotateX(18deg);
}
#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%);
}
/* Water (flood). The event layer is only a swell of cold light from below. Where the plate shows open
   water, the surface itself lives behind the faces: two sheets of glints, squashed flat, cut at the
   painted waterline and drifting across each other in opposite directions. */
#game [data-cinema="true"][data-cinema-effect="flood"] .story-cinema-action {
  top: 30%;
  background: radial-gradient(ellipse 90% 80% at 50% 100%, #5fa9be52, #3b7f9020 55%, transparent 80%);
}
#game [data-cinema="true"][data-cinema-water="surface"] .story-cinema-atmosphere {
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent var(--cinema-water-top, 50%), #000 calc(var(--cinema-water-top, 50%) + 16%));
  mask-image: linear-gradient(180deg, transparent var(--cinema-water-top, 50%), #000 calc(var(--cinema-water-top, 50%) + 16%));
}
#game [data-cinema="true"][data-cinema-water="surface"] .story-cinema-atmosphere::before,
#game [data-cinema="true"][data-cinema-water="surface"] .story-cinema-atmosphere::after {
  content: "";
  position: absolute;
  inset: calc(var(--cinema-water-top, 50%) - 24px) 0 -30px -600px;
  background: url("assets/fx/water-caustics.webp") 0 0 / 360px 64px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, #000 78%, #0007);
  mask-image: linear-gradient(180deg, transparent, #000 50%, #000 78%, #0007);
  opacity: .55;
  animation: storyFilmWaterNear 60s linear 1 both;
}
#game [data-cinema="true"][data-cinema-water="surface"] .story-cinema-atmosphere::after {
  inset: calc(var(--cinema-water-top, 50%) - 24px) -360px -30px 0;
  background-size: 220px 36px;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 15%, transparent 80%);
  mix-blend-mode: screen;
  animation-name: storyFilmWaterFar;
}

#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-paused="true"] .story-cinema-atmosphere::before,
#game [data-cinema="true"][data-cinema-paused="true"] .story-cinema-atmosphere::after { 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::before,
#game [data-cinema="true"][data-cinema-reduced="true"] .story-cinema-atmosphere::after { animation: none; }
#game [data-cinema="true"][data-cinema-reduced="true"] .story-cinema-atmosphere { opacity: .2; }
/* The sheets cross at different speeds; where they meet the light knots and breaks like on moving water. */
@keyframes storyFilmWaterNear { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(600px, 16px, 0); } }
@keyframes storyFilmWaterFar { 0% { transform: translate3d(0px, 0px, 0); opacity: 0.3; } 18% { transform: translate3d(-64.8px, 1.44px, 0); opacity: 0.55; } 40% { transform: translate3d(-144px, 3.2px, 0); opacity: 0.32; } 62% { transform: translate3d(-223.2px, 4.96px, 0); opacity: 0.58; } 84% { transform: translate3d(-302.4px, 6.72px, 0); opacity: 0.34; } 100% { transform: translate3d(-360px, 8px, 0); opacity: 0.45; } }
@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; }
}
/* Chapters I–II foreground layers (base layer rule in chapter-three.css). */
/* Out-of-focus foregrounds stay darker than the scene so they read as depth, not as the subject. */
#game [data-cinema="true"][data-cinema-foreground="chains"] .story-cinema-foreground { object-position: center top; opacity: .82; filter: brightness(.5) saturate(.75); }
#game [data-cinema="true"][data-cinema-foreground="rain"] .story-cinema-foreground { object-position: center; opacity: .7; }
#game [data-cinema="true"][data-cinema-foreground="candles"] .story-cinema-foreground { opacity: .78; filter: brightness(.68) saturate(.9); }