/* Chapter IV «Долг Гавани»: the storm over the strait, spray and kelp in front
   of the faces, and the fourth tab on the Gate map. */

/* The storm: slanted rain over a darkened sky, lightning on the event layer. */
#game [data-cinema="true"][data-cinema-effect="storm"] .story-cinema-atmosphere {
  background: repeating-linear-gradient(112deg, transparent 0 23px, #b6d6de33 24px, transparent 25px 61px),
    repeating-linear-gradient(104deg, transparent 0 41px, #9cc4ce24 42px, transparent 43px 97px),
    linear-gradient(180deg, #050a0f66, transparent 55%);
  background-size: 190% 190%, 150% 150%, 100% 100%;
  animation: storyFilmRain 6s linear 1 both;
}
#game [data-cinema="true"][data-cinema-effect="storm"] .story-cinema-action {
  background: radial-gradient(ellipse 70% 45% at 62% 8%, #e8f6ffcc, #a9d8e866 30%, transparent 70%),
    linear-gradient(180deg, #d9eef633, transparent 60%);
}

/* Foreground layers. Spray is light and drifts across the frame; kelp rises from the bottom. */
#game [data-cinema="true"][data-cinema-foreground="spray"] .story-cinema-foreground {
  object-position: center;
  opacity: .82;
  mix-blend-mode: screen;
}
#game [data-cinema="true"][data-cinema-foreground="kelp"] .story-cinema-foreground {
  object-position: center bottom;
  filter: brightness(.78);
}

/* Four chapters on the Gate map: the tabs share one row. */
#game .gate-chapter-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#game .gate-chapter-tabs button[hidden] { display: none; }
#game #gateChapterTabs button { padding-inline: 4px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  #game [data-cinema="true"][data-cinema-effect="storm"] .story-cinema-action { display: none; }
}

/* Chapter IV battle sprites follow the chapter III proportions: a slim figure,
   one long serpent and two tall bosses (the story Guardian is the route boss). */
#game .enemy-sprite[data-enemy="riveted_drowned"] {
  right: -1%;
  bottom: 11%;
  width: 52%;
}
#game .enemy-sprite[data-enemy="chain_eel"] {
  right: -12%;
  bottom: 16%;
  width: 76%;
  max-height: 55%;
}
#game .enemy-sprite:is([data-enemy="harbor_guardian_story"], [data-enemy="nameless_helmsman"]) {
  right: -5%;
  bottom: 10%;
  width: 58%;
  max-height: 74%;
}

/* The chapter IV Gate map is the strait: its marker is the Harbor citadel. */
#game .world-map-city.harbor { left: 61%; top: 33%; }