/* Chapter III story screens (ADR-030): decisions, the research board, the tide. */
#game [data-ui-screen] .story-decision {
  margin: 0 0 2px;
  color: var(--ui-gold, #dfbc7b);
  font: 600 11px/1.4 var(--ui-font-body, system-ui, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#game [data-ui-screen] .story-choice.decisive { box-shadow: inset 3px 0 var(--ui-gold, #dfbc7b); }
#game [data-ui-screen] .story-research-note {
  margin: 0 0 2px;
  color: var(--ui-muted, #9fb0b7);
  font: 12px/1.45 var(--ui-font-body, system-ui, sans-serif);
}
#game [data-ui-screen] .story-choice.story-action-step.washed {
  color: rgba(159, 176, 183, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(143, 216, 222, 0.5);
}
#game [data-ui-screen] .story-choice.story-action-step.washed::before { border-style: dashed; opacity: 0.5; }
#game [data-ui-screen] .story-choice.story-action-step.secondary { color: var(--ui-muted, #9fb0b7); }
#game [data-ui-screen] .story-choice.story-action-step.confirm { color: var(--ui-gold, #dfbc7b); box-shadow: inset 3px 0 var(--ui-gold, #dfbc7b); }
#game [data-ui-screen] .story-choice.story-action-step.done:not(:disabled) { cursor: pointer; }
#game [data-ui-screen="story"] .story-dialogue-text { white-space: pre-line; }

/* Chapter III film (ADR-030). Foreground layers sit in front of faces but
   behind evidence; the server's picture always stays visible behind them. */
#game [data-cinema="true"] .story-cinema-foreground {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: brightness(.9);
  pointer-events: none;
}
#game [data-cinema="true"][data-cinema-foreground="nets"] .story-cinema-foreground { object-position: center top; }
#game [data-cinema="true"][data-cinema-foreground="foam"] .story-cinema-foreground { opacity: .92; }
#game [data-cinema="true"][data-cinema-effect="tide"] .story-cinema-action {
  top: 45%;
  background: radial-gradient(ellipse 60% 18% at 30% 22%, #e6f3f3a6, transparent 70%),
    radial-gradient(ellipse 55% 16% at 72% 28%, #d5eceb8c, transparent 70%),
    linear-gradient(0deg, #8fc3cc66, #b9dde033 50%, transparent);
  mask-image: linear-gradient(0deg, black 60%, transparent);
}
/* Sea fog banks drift across the whole beat. */
#game [data-cinema="true"]:is([data-cinema-effect="tide"], [data-cinema-effect="fog"]) .story-cinema-atmosphere {
  background: radial-gradient(ellipse 70% 22% at 20% 62%, #c9d8dc40, transparent 70%),
    radial-gradient(ellipse 60% 18% at 78% 48%, #b7cad033, transparent 70%),
    radial-gradient(ellipse 80% 26% at 50% 85%, #d3e0e24d, transparent 72%);
  background-size: 160% 100%;
  animation: storyFilmFog 14s ease-in-out 1 both;
}
/* Erasure: a grey band in saturation blend drains the colour where it passes. */
#game [data-cinema="true"][data-cinema-effect="erase"] .story-cinema-action {
  mix-blend-mode: saturation;
  background: linear-gradient(90deg, transparent 0%, #777 30% 70%, transparent 100%);
}
@keyframes storyFilmFog { from { background-position: 0% 0; } to { background-position: 60% 0; } }