#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");
  
  /* Dolphin */
  --dolphin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cdefs%3E%3ClinearGradient id='dg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cfd8dc'/%3E%3Cstop offset='50%25' stop-color='%2378909c'/%3E%3Cstop offset='100%25' stop-color='%23455a64'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20,50 Q60,10 130,20 T170,45 L160,55 Q130,40 60,65 Z' fill='url(%23dg)'/%3E%3Cpath d='M85,25 Q100,5 120,15 Z' fill='%23546e7a'/%3E%3Cpath d='M20,50 L5,40 L5,60 Z' fill='%23546e7a'/%3E%3Ccircle cx='140' cy='32' r='2' fill='%23000'/%3E%3C/svg%3E");

  /* Jellyfish */
  --jelly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpath d='M20,50 Q50,0 80,50 Z' fill='rgba(255,150,200,0.5)'/%3E%3Cpath d='M30,50 Q30,100 25,130 M40,50 Q40,110 45,140 M50,50 Q50,120 55,135 M60,50 Q60,100 65,125 M70,50 Q70,90 75,120' stroke='rgba(255,255,255,0.3)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  
  /* Royal Angelfish */
  --royal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cellipse cx='60' cy='35' rx='50' ry='30' fill='%23ffeb3b'/%3E%3Cpath d='M20,10 L25,60 M40,5 L45,65 M60,5 L65,65 M80,10 L85,60' stroke='%231a237e' stroke-width='6'/%3E%3Cpath d='M10,35 L0,20 L0,50 Z' fill='%23fbc02d'/%3E%3Ccircle cx='95' cy='30' r='4' fill='%23000'/%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 — near M211/212 coral, below the labels */
#m2-fish-school { top: 66%; left: 58%; width: 24%; height: 16%; }
/* M1 school — use the open mezzanine area */
#m1-fish-school { top: 14%; left: 26%; width: 58%; height: 28%; }
/* 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); }
.fish.species-dolphin { background-image: var(--dolphin); width: 90px; height: 40px; }
.fish.species-angler  { background-image: var(--angler); width: 70px; height: 45px; }
.fish.species-jelly   { background-image: var(--jelly); width: 50px; height: 70px; }
.fish.species-royal   { background-image: var(--royal); width: 60px; height: 35px; }

/* ── M2: orange clownfish + purple angelfish — swim upward-right ── */
#m2-fish-school .fish { animation-name: fishSwimUp !important; }
#m2-fish-school .fish:nth-child(1) { top: 60%;  left: -25%; animation-duration: 11s; }
#m2-fish-school .fish:nth-child(2) { top: 80%; left: -15%; animation-duration: 13s; animation-delay: 1.2s; transform: scale(.85) rotate(-18deg); }
#m2-fish-school .fish:nth-child(3) { top: 95%; left: -30%; animation-duration: 10s; animation-delay: 2.4s; transform: scale(1.05) rotate(-18deg); }
#m2-fish-school .fish:nth-child(4) { top: 45%; left: -10%; animation-duration: 14s; animation-delay: 3.2s; transform: scale(.78) rotate(-18deg); }
#m2-fish-school .fish:nth-child(5) { top: 70%; left: -20%; animation-duration: 12s; animation-delay: 0.8s; }

/* ── M1: relocated overview fish, with large species scaled down to match ── */
#m1-fish-school .fish.species-purple { width: 38px; height: 28px; }
#m1-fish-school .fish.species-green  { width: 54px; height: 22px; }
#m1-fish-school .fish.species-pink   { width: 46px; height: 24px; }
#m1-fish-school .fish.species-dolphin { width: 72px; height: 32px; }
#m1-fish-school .fish.species-angler  { width: 52px; height: 34px; }
#m1-fish-school .fish.species-royal   { width: 50px; height: 30px; }

#m1-fish-school .fish:nth-child(1)  { top: 8%;  left: -18%; animation-duration: 14s; }
#m1-fish-school .fish:nth-child(2)  { top: 56%; left: -28%; animation-duration: 11s; animation-delay: 1.4s; }
#m1-fish-school .fish:nth-child(3)  { top: 18%; left: -36%; animation-duration: 13s; animation-delay: 3.2s; }
#m1-fish-school .fish:nth-child(4)  { top: 70%; left: -16%; animation-duration: 12s; animation-delay: 2.1s; }
#m1-fish-school .fish:nth-child(5)  { top: 40%; left: -24%; animation-duration: 10s; animation-delay: 4.5s; }
#m1-fish-school .fish:nth-child(6)  { top: 4%;  left: -44%; animation-duration: 15s; animation-delay: 5.8s; }
#m1-fish-school .fish:nth-child(7)  { top: 82%; left: -34%; animation-duration: 13s; animation-delay: 6.4s; }
#m1-fish-school .fish:nth-child(8)  { top: 28%; left: -12%; animation-duration: 11s; animation-delay: 7.1s; }
#m1-fish-school .fish:nth-child(9)  { top: 62%; left: -42%; animation-duration: 16s; animation-delay: 0.8s; }
#m1-fish-school .fish:nth-child(10) { top: 76%; left: 106%; animation-duration: 18s; animation-delay: 3.9s; animation-name: swimLeft; }
#m1-fish-school .fish:nth-child(11) { top: 14%; left: -30%; animation-duration: 12s; animation-delay: 8.2s; }

/* ── 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;
  }
}

@keyframes fishSwimUp {
  0% {
    transform: translate(0, 0) rotate(-18deg) scaleX(1);
    opacity: 0;
  }

  10% {
    opacity: .85;
  }

  80% {
    opacity: .9;
  }

  100% {
    transform: translate(180%, -90%) rotate(-18deg) scaleX(1);
    opacity: 0;
  }
}

/* High-fi SVG Fish School for Overview Mode */
#overview-fish-school {
  position: absolute;
  top: 80px;
  left: 550px;
  width: 400px;
  height: 250px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: 5;
  display: none;
}

.overview-mode #overview-fish-school {
  display: block;
  opacity: 1;
}

#overview-fish-school .fish {
  position: absolute;
  animation: overviewSwim 12s linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
  opacity: 0;
}

#overview-fish-school .fish:nth-child(1) {
  top: 100%;
  left: 24%;
  animation-delay: 1.2s;
  animation-name: jellyfishRise;
  animation-duration: 18s;
}

@keyframes overviewSwim {
  0% { transform: translate(0, 0) scaleX(1); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translate(600px, -150px) scaleX(1); opacity: 0; }
}

@keyframes swimLeft {
  0% { transform: translate(0, 0) scaleX(-1); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translate(-800px, -50px) scaleX(-1); opacity: 0; }
}

@keyframes jellyfishRise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% { transform: translateY(-350px); 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;
}