body {
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
  background: #0f172a;
  color: white;
}

/* OCEAN */
.ocean {
  position: relative;
  height: 100vh;
  background: linear-gradient(to bottom, #0ea5e9, #020617);
  overflow: hidden;
}

/* PLANTS BASE */
.plant {
  position: absolute;
  bottom: 50px;
  width: 14px;
  background: linear-gradient(#22c55e, #166534);
  border-radius: 10px;
  z-index: 2;
}

/* VARIATIONS (spread across screen) */
.plant.p1  { left: 5%;  height: 110px; transform: rotate(-6deg); }
.plant.p2  { left: 12%; height: 90px;  transform: rotate(5deg); }
.plant.p3  { left: 18%; height: 130px; transform: rotate(-8deg); }
.plant.p4  { left: 25%; height: 80px;  transform: rotate(6deg); }
.plant.p5  { left: 32%; height: 120px; transform: rotate(-5deg); }
.plant.p6  { left: 40%; height: 95px;  transform: rotate(4deg); }
.plant.p7  { left: 48%; height: 140px; transform: rotate(-7deg); }
.plant.p8  { left: 55%; height: 85px;  transform: rotate(6deg); }
.plant.p9  { left: 62%; height: 115px; transform: rotate(-6deg); }
.plant.p10 { left: 70%; height: 100px; transform: rotate(5deg); }
.plant.p11 { left: 78%; height: 130px; transform: rotate(-7deg); }
.plant.p12 { left: 85%; height: 90px;  transform: rotate(6deg); }
.plant.p13 { left: 92%; height: 120px; transform: rotate(-5deg); }

/* ROCKS BASE */
.rock {
  position: absolute;
  bottom: 48px;
  background: radial-gradient(circle at 30% 30%, #6b7280, #374151);
  border-radius: 50%;
  z-index: 2;
}

/* VARIATIONS */
.rock.r1 { left: 5%;  width: 30px; height: 20px; }
.rock.r2 { left: 12%; width: 45px; height: 25px; }
.rock.r3 { left: 20%; width: 25px; height: 18px; }
.rock.r4 { left: 28%; width: 50px; height: 28px; }
.rock.r5 { left: 38%; width: 35px; height: 22px; }
.rock.r6 { left: 48%; width: 40px; height: 24px; }
.rock.r7 { left: 58%; width: 28px; height: 18px; }
.rock.r8 { left: 68%; width: 50px; height: 26px; }
.rock.r9 { left: 78%; width: 32px; height: 20px; }
.rock.r10{ left: 88%; width: 45px; height: 25px; }

/* FISH */
.fish {
  position: absolute;
  left: 0;
  top: 45%;
  width: 70px;
  height: 35px;
  background: linear-gradient(to left, #f97316, #fb923c);
  border-radius: 50% 60% 60% 50%;
  z-index: 3;
  animation: swim 8s linear infinite;
}

/* TAIL */
.tail {
  position: absolute;
  left: -20px;
  top: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;

}

/* GRASS FLOOR */
.grass {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: repeating-linear-gradient(
    to right,
    #166534 0 10px,
    #14532d 10px 20px
  );
  z-index: 2;
}

/* PLANTS */
.plant {
  position: absolute;
  bottom: 50px;
  left: 40px;
  width: 20px;
  height: 120px;
  background: green;
  border-radius: 10px;
  z-index: 2;
}

.plant2 {
  left: 150px;
  height: 100px;
}

/* CORAL BASE */
.coral {
  position: absolute;
  bottom: 60px;

  width: 14px;
  height: 60px;

  background: linear-gradient(#fb7185, #be185d);
  border-radius: 10px;

  z-index: 3;
}

/* BRANCHES */
.coral::before,
.coral::after {
  content: "";
  position: absolute;

  width: 14px;
  height: 45px;

  background: inherit;
  border-radius: 10px;
}

/* LEFT BRANCH */
.coral::before {
  left: -16px;
  top: 10px;
  transform: rotate(-35deg);
}

/* RIGHT BRANCH */
.coral::after {
  left: 16px;
  top: 10px;
  transform: rotate(35deg);
}

/* VARIATIONS */
.coral.c1 { left: 10%; height: 70px; }
.coral.c2 { left: 22%; height: 55px; }
.coral.c3 { left: 35%; height: 80px; }
.coral.c4 { left: 50%; height: 60px; }
.coral.c5 { left: 65%; height: 75px; }
.coral.c6 { left: 80%; height: 65px; }
.coral.c7 { left: 92%; height: 70px; }

/* ROCK */
.rock {
  position: absolute;
  bottom: 50px;
  left: 200px;
  width: 40px;
  height: 25px;
  background: #374151;
  border-radius: 50%;
  z-index: 2;
}


/* FIN */
.fin {
  position: absolute;
  top: -10px;
  left: 25px;
  width: 15px;
  height: 15px;
  background: #fb923c;
  border-radius: 50% 50% 0 0;
}

.shark {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 110px;
  height: 45px;

  background: linear-gradient(#64748b, #1e293b);
  border-radius: 60% 50% 50% 60%;

  z-index: 2;
  animation: sharkSwim 10s linear infinite;
}

/* SHARK MOUTH */
.shark .mouth {
  position: absolute;
  left: 5px;
  bottom: 10px;
  width: 25px;
  height: 10px;
  background: black;
  border-radius: 0 0 12px 12px;
}

.fish::before {
  content: "";
  position: absolute;

  /* MOVE IT OUTSIDE BODY */
  bottom: 6px;
  left: 55px;

  width: 16px;
  height: 12px;

  background: #f97316;

  /* MAKE IT LOOK LIKE A FIN */
  border-radius: 0 50% 50% 0;

  transform: rotate(25deg);

  /* MAKE SURE IT SHOWS */
  z-index: 4;
}

/* GOLDFISH SIDE FIN */
.fish::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 30px;

  width: 14px;
  height: 10px;

  background: #fb923c;
  border-radius: 50% 50% 0 50%;

  transform: rotate(20deg);
}

/* OCTOPUS */
#move-octo {
  display: none;
}

.octopus {
  position: absolute;
  bottom: 60px;
  left: 260px;
  width: 40px;
  height: 40px;
  background: #a855f7;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}

/* OCTOPUS EYES */
.octopus .eye {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
}

.octopus .eye2 {
  left: 22px;
}

/* MOUTH */
.octopus .mouth {
  position: absolute;
  bottom: 8px;
  left: 12px;
  width: 12px;
  height: 6px;
  background: black;
  border-radius: 0 0 10px 10px;
}

/* TENTACLES */
.tentacle {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 15px;
  background: #a855f7;
  border-radius: 10px;
}

.t1 { left: 5px; }
.t2 { left: 12px; }
.t3 { left: 20px; }
.t4 { left: 28px; }

/* OCTOPUS MOVE ON CLICK */
#move-octo:checked + .octopus {
  animation: walk 3s linear forwards;
}
.bubble {
  position: absolute;
  bottom: -30px; /* start below screen */
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.3),
    rgba(255,255,255,0.05)
  );

  border: 1px solid rgba(255,255,255,0.6);

  animation-name: rise, drift;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}


/* ANIMATIONS */
@keyframes swim {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(120vw); }
}

@keyframes sharkSwim {
  0% { transform: translateX(0); }
  100% { transform: translateX(-120vw); }
}

@keyframes rise {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(-300px); opacity: 0; }
}

@keyframes walk {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}


/* FISH EYE */
.fish .eye {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
}

/* SHARK EYE */
.shark .eye {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
}

/* TAIL */
.shark::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 10px;

  width: 0;
  height: 0;

  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #1e293b;
}

/* TOP FIN */
.shark::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 40px;

  width: 0;
  height: 0;

  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #475569;
}

/* SHARK SIDE FIN (BOTTOM) */
.shark .fin-side {
  position: absolute;
  bottom: -10px;
  left: 40px;

  width: 0;
  height: 0;

  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid #334155;
}

/* OPTIONAL SECOND FIN (SMALLER BACK FIN) */
.shark .fin-side2 {
  position: absolute;
  bottom: -8px;
  left: 70px;

  width: 0;
  height: 0;

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #1e293b;
}

/* GOLDFISH SIDE FIN */
.fish::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 30px;

  width: 14px;
  height: 10px;

  background: #fb923c;
  border-radius: 50% 50% 0 50%;

  transform: rotate(20deg);
}

/* OCTOPUS */
#move-octo {
  display: none;
}

.octopus {
  position: absolute;
  bottom: 60px;
  left: 260px;
  width: 40px;
  height: 40px;
  background: #a855f7;
  border-radius: 60% 60% 35% 35%;
  height: 50px; /* slightly taller */
  border-radius: 60% 60% 35% 35%;
  height: 50px; /* slightly taller */
  cursor: pointer;
  z-index: 3;
  transform: rotate(-10deg);
}

/* OCTOPUS EYES */
.octopus .eye {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
}

.octopus .eye2 {
  left: 22px;
}

/* MOUTH */
.octopus .mouth {
  position: absolute;
  bottom: 8px;
  left: 12px;
  width: 12px;
  height: 6px;
  background: black;
  border-radius: 0 0 10px 10px;
}


/* OCTOPUS MOVE ON CLICK */
#move-octo:checked + .octopus {
  animation: walk 3s linear forwards;
}
.bubble {
  position: absolute;
  bottom: -30px; /* start below screen */
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.3),
    rgba(255,255,255,0.05)
  );

  border: 1px solid rgba(255,255,255,0.6);

  animation-name: rise, drift;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  background: linear-gradient(#22d3ee, #9333ea);
}

/* RANDOMIZED POSITIONS + SIZES + SPEEDS + DELAYS */
.b1  { left: 5%;  width: 10px; height: 10px; animation-duration: 4s, 3s; animation-delay: 0s, 0s; }
.b2  { left: 12%; width: 18px; height: 18px; animation-duration: 7s, 4s; animation-delay: 2s, 1s; }
.b3  { left: 20%; width: 12px; height: 12px; animation-duration: 5s, 3s; animation-delay: 1s, 0.5s; }
.b4  { left: 30%; width: 22px; height: 22px; animation-duration: 8s, 5s; animation-delay: 3s, 2s; }
.b5  { left: 40%; width: 8px;  height: 8px;  animation-duration: 4.5s, 2s; animation-delay: 0.5s, 1s; }
.b6  { left: 52%; width: 16px; height: 16px; animation-duration: 6.5s, 4s; animation-delay: 2.5s, 1.5s; }
.b7  { left: 65%; width: 20px; height: 20px; animation-duration: 9s, 5s; animation-delay: 1.5s, 2s; }
.b8  { left: 75%; width: 12px; height: 12px; animation-duration: 5.5s, 3s; animation-delay: 3s, 1s; }
.b9  { left: 85%; width: 18px; height: 18px; animation-duration: 7.5s, 4s; animation-delay: 0.8s, 2s; }
.b10 { left: 95%; width: 10px; height: 10px; animation-duration: 4.2s, 2s; animation-delay: 2.2s, 0.5s; }

/* ========================= */
/* ANGELFISH (REALISTIC SHAPE) */
/* ========================= */

.angel {
  position: absolute;
  width: 36px;
  height: 28px;

  background: linear-gradient(#facc15, #f59e0b);
  border-radius: 50%;

  z-index: 3;

  animation: float 6s ease-in-out infinite;
}

/* BIG SIDE FINS (WINGS) */
.angel::before,
.angel::after {
  content: "";
  position: absolute;

  width: 22px;
  height: 30px;

  background: linear-gradient(#fde68a, #f97316);
  border-radius: 50%;

  opacity: 0.9;
}

/* LEFT WING */
.angel::before {
  left: -16px;
  top: -2px;
  transform: rotate(-25deg);
  background: linear-gradient(#22d3ee, #9333ea);
}

/* RIGHT WING */
.angel::after {
  right: -16px;
  top: -2px;
  transform: rotate(25deg);
  background: linear-gradient(#22d3ee, #9333ea);
}

/* TAIL */
.angel .tail {
  position: absolute;
  right: -10px;
  top: 8px;

  width: 0;
  height: 0;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #f59e0b;
}

/* EYE */
.angel .eye {
  position: absolute;
  left: 8px;
  top: 10px;

  width: 5px;
  height: 5px;
  background: black;
  border-radius: 50%;
}

/* LOWER POSITION (near grass) */
.a1 { left: 20%; top: 38%; animation-duration: 6s; }
.a2 { left: 50%; top: 60%; animation-duration: 7s; }
.a3 { left: 75%; top: 38%; animation-duration: 5.5s; }

/* FLOATING MOTION */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


.fish .tail {
  position: absolute;

  left: -18px;   /* MUST be negative so it sticks out */
  top: 5px;

  width: 0;
  height: 0;

  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #f97316; /* orange tail */
}

/* ========================= */
/* CRAB */
/* ========================= */

.crab {
  position: absolute;
  bottom: 570px;   /* sits on ground */
  right: 60px;    /* right side */

  width: 50px;
  height: 30px;

  background: #dc2626;
  border-radius: 50%;

  z-index: 3;
}

/* EYES */
.crab .eye {
  position: absolute;
  top: -10px;

  width: 6px;
  height: 10px;

  background: #dc2626;
  border-radius: 3px;
}

.crab .eye::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;

  width: 6px;
  height: 6px;

  background: black;
  border-radius: 50%;
}

.crab .eye.left { left: 10px; }
.crab .eye.right { right: 10px; }

/* CLAWS */
.crab .claw {
  position: absolute;
  top: 5px;

  width: 20px;
  height: 20px;

  border: 4px solid #dc2626;
  border-radius: 50%;
}

.crab .claw.left {
  left: -15px;
  border-right: transparent;
}

.crab .claw.right {
  right: -15px;
  border-left: transparent;
}

/* LEGS */
.crab .leg {
  position: absolute;
  bottom: -6px;

  width: 10px;
  height: 4px;

  background: #dc2626;
  border-radius: 2px;
}

/* spread legs */
.l1 { left: 5px; transform: rotate(20deg); }
.l2 { left: 15px; transform: rotate(-20deg); }
.l3 { right: 15px; transform: rotate(20deg); }
.l4 { right: 5px; transform: rotate(-20deg); }
.jelly {
  position: absolute;
  width: 40px;
  height: 30px;

  background: radial-gradient(circle at 50% 30%, #e0f2fe, #7dd3fc);
  border-radius: 50% 50% 40% 40%;

  z-index: 3;

  animation: floatUp 12s linear infinite;
}

/* tentacles */
.jelly .tentacle {
  position: absolute;
  top: 28px;
  width: 3px;
  height: 25px;

  background: rgba(125, 211, 252, 0.7);
  border-radius: 3px;

  animation: wiggle 2s ease-in-out infinite alternate;
}

/* spread tentacles */
.jelly .t1 { left: 8px; }
.jelly .t2 { left: 15px; }
.jelly .t3 { left: 22px; }
.jelly .t4 { left: 29px; }

/* START THEM ON SCREEN */
.j1 { left: 30%; bottom: 620px; animation-duration: 12s; }
.j2 { left: 70%; bottom: 640px; animation-duration: 10s; }

/* FLOAT UP */
@keyframes floatUp {
  0%   { transform: translateY(0); opacity: 0.9; }
  100% { transform: translateY(-120px); opacity: 0.7; }
}

/* tentacle motion */
@keyframes wiggle {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}