#p2-fish-school {
  position: absolute;
  top: 28%;
  left: 18%;
  width: 28%;
  height: 16%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  z-index: 30;
}

#p2-fish-school.show {
  opacity: 1;
  transform: translateY(0);
}

:root {
  /* Original blue fish */
  --fish-sprite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23f8feff'/%3E%3Cstop offset='40%25' stop-color='%2300b3ff'/%3E%3Cstop offset='100%25' stop-color='%2300488c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='12,25 0,10 0,40' fill='%230061b0'/%3E%3Cellipse cx='66' cy='25' rx='44' ry='19' fill='url(%23g)'/%3E%3Cellipse cx='90' cy='22' rx='6' ry='6' fill='%23fff'/%3E%3Cellipse cx='92' cy='22' rx='2.8' ry='2.8' fill='%23002954'/%3E%3Ccircle cx='88.5' cy='23' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
  /* Orange clownfish */
  --fish-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ffe0b2'/%3E%3Cstop offset='40%25' stop-color='%23ff8c00'/%3E%3Cstop offset='100%25' stop-color='%23e65100'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='12,25 0,10 0,40' fill='%23e65100'/%3E%3Cellipse cx='66' cy='25' rx='44' ry='19' fill='url(%23g)'/%3E%3Crect x='55' y='7' width='4' height='36' rx='2' fill='%23fff' opacity='.7'/%3E%3Crect x='75' y='9' width='4' height='32' rx='2' fill='%23fff' opacity='.7'/%3E%3Cellipse cx='90' cy='22' rx='6' ry='6' fill='%23fff'/%3E%3Cellipse cx='92' cy='22' rx='2.8' ry='2.8' fill='%23002954'/%3E%3Ccircle cx='88.5' cy='23' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
  /* Purple angelfish (taller) */
  --fish-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23e1bee7'/%3E%3Cstop offset='50%25' stop-color='%239c27b0'/%3E%3Cstop offset='100%25' stop-color='%234a148c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='10,35 0,18 0,52' fill='%237b1fa2'/%3E%3Cellipse cx='52' cy='35' rx='38' ry='28' fill='url(%23g)'/%3E%3Cpolygon points='45,7 55,7 50,14' fill='%237b1fa2'/%3E%3Cpolygon points='45,63 55,63 50,56' fill='%237b1fa2'/%3E%3Cellipse cx='72' cy='30' rx='5.5' ry='5.5' fill='%23fff'/%3E%3Cellipse cx='74' cy='30' rx='2.5' ry='2.5' fill='%23002954'/%3E%3Ccircle cx='70.5' cy='31' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
  /* Yellow tang */
  --fish-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23fff9c4'/%3E%3Cstop offset='40%25' stop-color='%23ffeb3b'/%3E%3Cstop offset='100%25' stop-color='%23f9a825'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='12,25 0,12 0,38' fill='%23f9a825'/%3E%3Cellipse cx='66' cy='25' rx='44' ry='18' fill='url(%23g)'/%3E%3Cellipse cx='90' cy='22' rx='5.5' ry='5.5' fill='%23fff'/%3E%3Cellipse cx='92' cy='22' rx='2.5' ry='2.5' fill='%23002954'/%3E%3Ccircle cx='88.5' cy='23' r='1.2' fill='%23fff'/%3E%3C/svg%3E");
  /* Green parrotfish */
  --fish-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23c8e6c9'/%3E%3Cstop offset='40%25' stop-color='%2366bb6a'/%3E%3Cstop offset='100%25' stop-color='%231b5e20'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='14,25 0,12 0,38' fill='%232e7d32'/%3E%3Cellipse cx='70' cy='25' rx='48' ry='18' fill='url(%23g)'/%3E%3Cellipse cx='96' cy='22' rx='6' ry='6' fill='%23fff'/%3E%3Cellipse cx='98' cy='22' rx='2.8' ry='2.8' fill='%23002954'/%3E%3Ccircle cx='94.5' cy='23' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
  /* Pink/coral reef fish */
  --fish-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 55'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23fce4ec'/%3E%3Cstop offset='40%25' stop-color='%23f06292'/%3E%3Cstop offset='100%25' stop-color='%23ad1457'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='11,27 0,14 0,40' fill='%23c2185b'/%3E%3Cellipse cx='60' cy='27' rx='40' ry='21' fill='url(%23g)'/%3E%3Cellipse cx='82' cy='24' rx='5.5' ry='5.5' fill='%23fff'/%3E%3Cellipse cx='84' cy='24' rx='2.5' ry='2.5' fill='%23002954'/%3E%3Ccircle cx='80.5' cy='25' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
  /* Teal surgeonfish */
  --fish-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23b2dfdb'/%3E%3Cstop offset='40%25' stop-color='%2326a69a'/%3E%3Cstop offset='100%25' stop-color='%23004d40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='12,25 0,12 0,38' fill='%2300695c'/%3E%3Cellipse cx='66' cy='25' rx='44' ry='18' fill='url(%23g)'/%3E%3Cpath d='M50 10 Q58 25 50 40' stroke='%23004d40' stroke-width='2.5' fill='none' opacity='.5'/%3E%3Cellipse cx='90' cy='22' rx='6' ry='6' fill='%23fff'/%3E%3Cellipse cx='92' cy='22' rx='2.8' ry='2.8' fill='%23002954'/%3E%3Ccircle cx='88.5' cy='23' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
}

#p2-fish-school .fish {
  position: absolute;
  width: 58px;
  height: 24px;
  background-image: var(--fish-sprite);
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  opacity: .95;
  animation: fishSwim 9s linear infinite;
}

#p2-fish-school .fish:nth-child(1) {
  top: 10%;
  left: -30%;
  animation-duration: 12s;
}

#p2-fish-school .fish:nth-child(2) {
  top: 40%;
  left: -20%;
  animation-duration: 10s;
  animation-delay: 1s;
  transform: scale(.9);
}

#p2-fish-school .fish:nth-child(3) {
  top: 70%;
  left: -25%;
  animation-duration: 11s;
  animation-delay: 2s;
  transform: scale(1.1);
}

#p2-fish-school .fish:nth-child(4) {
  top: 55%;
  left: -15%;
  animation-duration: 9s;
  animation-delay: 3s;
  transform: scale(.85);
}

#p2-fish-school .fish:nth-child(5) {
  top: 25%;
  left: -10%;
  animation-duration: 13s;
  animation-delay: 1.7s;
}

/* ─── Fish schools on other floors ─── */
.fish-school {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  z-index: 30;
}
.fish-school.show {
  opacity: 1;
  transform: translateY(0);
}
/* M2 school — upper-left ocean area */
#m2-fish-school { top: 22%; left: 14%; width: 30%; height: 18%; }
/* P0 school — lower area */
#p0-fish-school { top: 30%; left: 55%; width: 25%; height: 16%; }
/* Auditorium school — center */
#aud-fish-school { top: 25%; left: 20%; width: 35%; height: 20%; }

.fish-school .fish {
  position: absolute;
  width: 58px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  opacity: .95;
  animation: fishSwim 9s linear infinite;
}

/* ── Fish species classes ── */
.fish.species-blue   { background-image: var(--fish-sprite); }
.fish.species-orange { background-image: var(--fish-orange); }
.fish.species-purple { background-image: var(--fish-purple); width: 44px; height: 32px; }
.fish.species-yellow { background-image: var(--fish-yellow); }
.fish.species-green  { background-image: var(--fish-green); width: 62px; height: 24px; }
.fish.species-pink   { background-image: var(--fish-pink); width: 52px; height: 26px; }
.fish.species-teal   { background-image: var(--fish-teal); }

/* ── M2: orange clownfish + purple angelfish ── */
#m2-fish-school .fish:nth-child(1) { top: 5%;  left: -25%; animation-duration: 11s; }
#m2-fish-school .fish:nth-child(2) { top: 35%; left: -15%; animation-duration: 13s; animation-delay: 1.2s; transform: scale(.85); }
#m2-fish-school .fish:nth-child(3) { top: 65%; left: -30%; animation-duration: 10s; animation-delay: 2.4s; transform: scale(1.05); }
#m2-fish-school .fish:nth-child(4) { top: 20%; left: -10%; animation-duration: 14s; animation-delay: 3.2s; transform: scale(.78); }
#m2-fish-school .fish:nth-child(5) { top: 50%; left: -20%; animation-duration: 12s; animation-delay: 0.8s; }

/* ── P0: yellow tang + green parrotfish ── */
#p0-fish-school .fish:nth-child(1) { top: 8%;  left: -20%; animation-duration: 13s; }
#p0-fish-school .fish:nth-child(2) { top: 42%; left: -30%; animation-duration: 11s; animation-delay: 1.5s; transform: scale(.92); }
#p0-fish-school .fish:nth-child(3) { top: 72%; left: -15%; animation-duration: 10s; animation-delay: 2.8s; transform: scale(1.08); }
#p0-fish-school .fish:nth-child(4) { top: 28%; left: -25%; animation-duration: 14s; animation-delay: 0.6s; transform: scale(.82); }

/* ── Auditorium: pink + teal + mix ── */
#aud-fish-school .fish:nth-child(1) { top: 5%;  left: -20%; animation-duration: 12s; }
#aud-fish-school .fish:nth-child(2) { top: 30%; left: -30%; animation-duration: 10s; animation-delay: 1.4s; transform: scale(.88); }
#aud-fish-school .fish:nth-child(3) { top: 55%; left: -15%; animation-duration: 14s; animation-delay: 2.6s; transform: scale(1.1); }
#aud-fish-school .fish:nth-child(4) { top: 75%; left: -25%; animation-duration: 11s; animation-delay: 0.5s; transform: scale(.8); }
#aud-fish-school .fish:nth-child(5) { top: 18%; left: -10%; animation-duration: 13s; animation-delay: 3.5s; transform: scale(.95); }
#aud-fish-school .fish:nth-child(6) { top: 48%; left: -22%; animation-duration: 9s;  animation-delay: 1.8s; transform: scale(.75); }

@keyframes fishSwim {
  0% {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }

  10% {
    opacity: .85;
  }

  80% {
    opacity: .9;
  }

  100% {
    transform: translateX(180%) scaleX(1);
    opacity: 0;
  }
}

.floor-layer {
  position: relative;
  display: none;
}

.floor-layer.active {
  display: block;
}

.floor-layer img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}