.boss-bubble { z-index: 6; }
.boss-boat-wrap { z-index: 5; }
.sos-flag {
  position: absolute;
  top: 12px;
  right: 8px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #fff;
  color: var(--mbv-red);
  font-size: 10px;
  font-weight: 1000;
  box-shadow: 0 4px 12px rgba(15,23,42,.16);
  transform-origin: left bottom;
  animation: sosWiggle 1.2s ease-in-out infinite alternate;
}
@keyframes sosWiggle { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
.cinematic-cloud {
  position: absolute;
  top: 34px;
  width: 74px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  filter: drop-shadow(0 8px 10px rgba(15,23,42,.08));
  z-index: 2;
}
.cinematic-cloud::before,
.cinematic-cloud::after {
  content: "";
  position: absolute;
  bottom: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}
.cinematic-cloud::before { left: 12px; width: 28px; height: 28px; }
.cinematic-cloud::after { right: 12px; width: 34px; height: 34px; }
.cloud-a { left: 12%; animation: cloudSail 13s ease-in-out infinite alternate; }
.cloud-b { left: 46%; top: 22px; transform: scale(.78); animation: cloudSail 16s ease-in-out infinite alternate-reverse; }
.cloud-c { left: 72%; top: 50px; transform: scale(.64); animation: cloudSail 18s ease-in-out infinite alternate; }
@keyframes cloudSail { from { margin-left: -18px; } to { margin-left: 28px; } }
.sea-wave {
  position: absolute;
  left: -12%;
  width: 124%;
  height: 22px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 34px, transparent 34px 68px);
  opacity: .54;
  z-index: 2;
  animation: waveMove 5.2s linear infinite;
}
.wave-a { bottom: 92px; }
.wave-b { bottom: 66px; animation-duration: 6.8s; opacity: .42; }
.wave-c { bottom: 38px; animation-duration: 8.4s; opacity: .32; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(68px); } }
.sea-creature {
  position: absolute;
  z-index: 3;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(15,23,42,.14));
}
.fish { font-size: 20px; animation: fishSwim 8.8s linear infinite; }
.fish-a { left: 18%; bottom: 84px; }
.fish-b { left: 55%; bottom: 50px; animation-duration: 11s; animation-direction: reverse; }
.shark { left: 74%; bottom: 88px; font-size: 25px; opacity: .78; animation: sharkPatrol 7s ease-in-out infinite alternate; }
.whale { left: 33%; bottom: 30px; font-size: 30px; opacity: .66; animation: whaleBob 4.8s ease-in-out infinite; }
@keyframes fishSwim { from { transform: translateX(-42px); } to { transform: translateX(58px); } }
@keyframes sharkPatrol { from { transform: translateX(-26px) rotate(-2deg); } to { transform: translateX(34px) rotate(3deg); } }
@keyframes whaleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.danger-beacon,
.rescue-beacon {
  position: absolute;
  z-index: 4;
  font-size: 22px;
  filter: drop-shadow(0 8px 10px rgba(15,23,42,.16));
  animation: beaconPulse 1.4s ease-in-out infinite alternate;
}
.danger-beacon { right: 13%; bottom: 80px; }
.rescue-beacon { left: 10%; bottom: 92px; }
@keyframes beaconPulse { from { transform: scale(.92); opacity: .72; } to { transform: scale(1.08); opacity: 1; } }
.boss-scene-stage.bank-zone .shark,
.boss-scene-stage.bank-zone .danger-beacon { opacity: .28; }
.boss-scene-stage.danger-zone .shark,
.boss-scene-stage.island-zone .shark { opacity: 1; transform: scale(1.12); }
.boss-scene-stage.danger-zone .boss-bubble { color: #991b1b; }
.boss-scene-stage.bank-zone .boss-bubble { color: #166534; }
@media (max-width: 860px) {
  .cinematic-cloud { transform: scale(.72); }
  .sea-creature { font-size: 18px; }
  .whale { font-size: 24px; }
}