<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aquarium</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

    <style>
        *{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Arial,sans-serif}
        canvas{display:block;position:absolute;top:0;left:0;z-index:1}
        #fish-tank{width:100%;height:100vh;background:linear-gradient(180deg,rgba(135,206,235,0.3)0%,rgba(70,130,180,0.2)40%,rgba(30,58,95,0.1)100%);position:absolute;top:0;left:0;overflow:hidden;z-index:2}
        .water-surface{position:absolute;top:0;left:0;width:100%;height:60px;background:linear-gradient(180deg,rgba(135,206,235,0.6)0%,rgba(135,206,235,0.2)100%);z-index:10}
        @keyframes water-ripple{0%,100%{transform:translateX(0)scaleY(1)}25%{transform:translateX(-10px)scaleY(1.1)}50%{transform:translateX(5px)scaleY(0.9)}75%{transform:translateX(-5px)scaleY(1.05)}}
        .water-surface::before{content:'';position:absolute;width:120%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3)25%,transparent 50%,rgba(255,255,255,0.2)75%,transparent 100%);animation:water-ripple 4s ease-in-out infinite}
        .bubble-container{position:absolute;width:100%;height:100%;pointer-events:none;z-index:5}
        .bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.8),rgba(255,255,255,0.3),transparent);box-shadow:inset 0 0 10px rgba(255,255,255,0.5);animation:bubble-rise linear infinite}
        @keyframes bubble-rise{0%{transform:translateY(0)translateX(0)scale(1);opacity:0.7}50%{transform:translateY(-50vh)translateX(var(--drift))scale(1.2);opacity:0.5}100%{transform:translateY(-100vh)translateX(calc(var(--drift)*1.5))scale(0.8);opacity:0}}
        .fish{position:absolute;z-index:3}
        @keyframes swim-pattern-1{0%{transform:translate(-15vw,0)rotateY(0)}10%{transform:translate(15vw,-8vh)rotateY(0)rotateZ(-10deg)}25%{transform:translate(40vw,-15vh)rotateY(0)rotateZ(15deg)}40%{transform:translate(65vw,-5vh)rotateY(0)rotateZ(-5deg)}50%{transform:translate(95vw,-12vh)rotateY(0)}51%{transform:translate(95vw,-12vh)rotateY(180deg)}65%{transform:translate(70vw,-8vh)rotateY(180deg)rotateZ(-15deg)}80%{transform:translate(35vw,-18vh)rotateY(180deg)rotateZ(10deg)}95%{transform:translate(10vw,-6vh)rotateY(180deg)rotateZ(-8deg)}100%{transform:translate(-15vw,0)rotateY(0)}}
        .fish-orange{bottom:50%;left:0;animation:swim-pattern-1 45s cubic-bezier(0.4,0,0.6,1)infinite}
        @keyframes swim-pattern-2{0%{transform:translate(100vw,0)rotateY(180deg)}15%{transform:translate(75vw,-10vh)rotateY(180deg)rotateZ(12deg)}30%{transform:translate(50vw,-5vh)rotateY(180deg)rotateZ(-8deg)}45%{transform:translate(25vw,-15vh)rotateY(180deg)rotateZ(20deg)}50%{transform:translate(0,-8vh)rotateY(180deg)}51%{transform:translate(0,-8vh)rotateY(0)}65%{transform:translate(30vw,-12vh)rotateY(0)rotateZ(-15deg)}80%{transform:translate(60vw,-3vh)rotateY(0)rotateZ(10deg)}95%{transform:translate(90vw,-9vh)rotateY(0)rotateZ(-5deg)}100%{transform:translate(100vw,0)rotateY(180deg)}}
        .fish-blue{bottom:35%;animation:swim-pattern-2 35s cubic-bezier(0.3,0,0.7,1)infinite}
        @keyframes swim-pattern-3{0%{transform:translate(-20vw,-10vh)rotateY(0)rotateZ(0)}10%{transform:translate(0vw,-5vh)rotateY(0)rotateZ(-5deg)}20%{transform:translate(20vw,-15vh)rotateY(0)rotateZ(5deg)}30%{transform:translate(40vw,-5vh)rotateY(0)rotateZ(-3deg)}40%{transform:translate(60vw,-20vh)rotateY(0)rotateZ(3deg)}50%{transform:translate(80vw,-10vh)rotateY(0)rotateZ(-2deg)}60%{transform:translate(100vw,-25vh)rotateY(0)rotateZ(0)}61%{transform:translate(100vw,-25vh)rotateY(180deg)rotateZ(0)}70%{transform:translate(80vw,-15vh)rotateY(180deg)rotateZ(5deg)}80%{transform:translate(60vw,-30vh)rotateY(180deg)rotateZ(-3deg)}90%{transform:translate(40vw,-20vh)rotateY(180deg)rotateZ(4deg)}100%{transform:translate(-20vw,-10vh)rotateY(180deg)rotateZ(0)}}
        .fish-green{bottom:65%;animation:swim-pattern-3 90s cubic-bezier(0.42,0,0.58,1)infinite}
        .fish-body{position:relative;width:clamp(60px,6vw,100px);height:clamp(40px,4vw,65px);border-radius:50%;background:var(--fish-color);box-shadow:inset 0 -5px 15px rgba(0,0,0,0.3),0 0 20px rgba(0,0,0,0.2);transform:skewX(5deg)skewY(-8deg)}
        .fish-orange .fish-body{--fish-color:linear-gradient(135deg,#FF8C00,#FF6347)}
        .fish-blue .fish-body{--fish-color:linear-gradient(135deg,#1E90FF,#4169E1)}
        .fish-green .fish-body{--fish-color:linear-gradient(135deg,#32CD32,#228B22)}
        .fish-eye{position:absolute;width:clamp(10px,1.2vw,16px);height:clamp(10px,1.2vw,16px);background:#fff;border-radius:50%;right:20%;top:25%;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);overflow:hidden}
        .fish-eye::after{content:'';position:absolute;width:60%;height:70%;background:#000;border-radius:50%;right:20%;top:15%;animation:blink 8s ease-in-out infinite}
        @keyframes blink{0%,96%,98%,100%{height:70%;top:15%}97%{height:5%;top:45%}}
        .top-fin{position:absolute;left:30%;top:-40%;width:clamp(16px,2vw,28px);height:clamp(28px,3.2vw,45px);background:var(--fish-color);border-radius:30% 70% 20% 80%;transform:rotate(75deg)skewX(-20deg);box-shadow:inset 2px -8px 10px rgba(0,0,0,0.4);animation:fin-wave 2s ease-in-out infinite}
        @keyframes fin-wave{0%,100%{transform:rotate(75deg)skewX(-20deg)scaleY(1)}50%{transform:rotate(75deg)skewX(-25deg)scaleY(1.1)}}
        .tail-fin{position:absolute;left:-35%;bottom:-15%;width:clamp(28px,3.2vw,42px);height:clamp(32px,3.6vw,50px);background:var(--fish-color);border-radius:50% 30% 70% 50%;transform:rotate(25deg)skewX(-15deg);transform-origin:right center;box-shadow:inset 1px -10px 8px rgba(0,0,0,0.4);animation:tail-swim 1.5s ease-in-out infinite}
        @keyframes tail-swim{0%,100%{transform:rotate(25deg)skewX(-15deg)skewY(-5deg)}50%{transform:rotate(25deg)skewX(-20deg)skewY(-15deg)}}
        .tail-fin::before{content:'';position:absolute;left:-40%;bottom:20%;width:85%;height:110%;background:var(--fish-color);border-radius:40% 60% 70% 30%;transform:rotate(85deg);box-shadow:inset 1px -10px 8px rgba(0,0,0,0.4)}
        .side-fin{position:absolute;left:35%;bottom:-25%;width:clamp(20px,2.4vw,32px);height:clamp(24px,2.8vw,36px);background:var(--fish-color);border-radius:60% 40% 80% 20%;transform:rotate(20deg)skewX(-15deg);box-shadow:inset 1px -8px 6px rgba(0,0,0,0.4);animation:side-fin-flutter 2.5s ease-in-out infinite}
        @keyframes side-fin-flutter{0%,100%{transform:rotate(20deg)skewX(-15deg)scaleX(1)}50%{transform:rotate(35deg)skewX(-20deg)scaleX(1.2)}}
        .fish-scale{position:absolute;width:clamp(12px,1.6vw,20px);height:clamp(14px,1.8vw,22px);background:rgba(255,255,255,0.3);border-radius:50%;transform:rotate(20deg)skewX(-5deg);box-shadow:inset 2px -2px 4px rgba(0,0,0,0.2)}
        .scale-1{left:15%;bottom:10%}.scale-2{left:35%;bottom:25%}.scale-3{left:55%;bottom:15%}.scale-4{left:25%;bottom:45%}.scale-5{left:45%;bottom:55%}
        .light-ray{position:absolute;top:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,0.4)0%,transparent 100%);animation:light-shimmer 8s ease-in-out infinite;z-index:4}
        @keyframes light-shimmer{0%,100%{opacity:0.3;transform:translateX(0)}50%{opacity:0.7;transform:translateX(20px)}}
        .light-ray:nth-child(1){left:20%}.light-ray:nth-child(2){left:60%;animation-delay:-3s}.light-ray:nth-child(3){left:80%;animation-delay:-6s}
        /* Google Ads Containers */
        .ad-container {
            position: fixed;
            width: 160px;
            height: 600px;
            z-index: 100;
            background: rgba(255, 255, 255, 0.1);
            border: 1px dashed #ccc;
            display: flex;
            flex-direction: column;
            align-items: center; /* center images horizontally */
            overflow-y: auto; /* scroll if content exceeds height */
        }
        .ad-left {
            left: 10px;
            top: 80px; /* moved below angel mascot (which is roughly 55-65px + some gap) */
            gap: 1px; /* space between images */
            padding-top: 10px; /* spacing top inside box */
        }
        .ad-left img {
            width: 100px;
            height: 100px;
            margin-bottom: 15px;
            cursor: pointer;
            object-fit: contain;
            display: block;
        }
        .ad-right {
            right: 10px;
            top: 80px; /* same top as left box for parallel */
            gap: 1px;
            padding-top: 10px;
        }
        .ad-right img {
            width: 100px;
            height: 100px;
            margin-bottom: 15px;
            cursor: pointer;
            object-fit: contain;
            display: block;
        }
        /* Sound Toggle Button */
        #sound-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }
        #sound-toggle svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
        #sound-toggle.muted svg {
            opacity: 0.5;
        }
        @media (max-width: 768px) {
            .ad-container {
                display: none;
            }
        }
        @media (max-width:768px){.fish-body{width:clamp(50px,8vw,80px);height:clamp(35px,5.5vw,55px)}.bubble{animation-duration:calc(var(--duration,8s)*0.8)}}
        @media (max-width:480px){.fish-body{width:clamp(40px,10vw,70px);height:clamp(30px,7vw,50px)}.water-surface{height:40px}.bubble{animation-duration:calc(var(--duration,8s)*0.6)}}
        
        /* Angel Mascot specific styles for fixed top-left placement */
        .angel-mascot-link {
            position: fixed;
            top: 18px;
            left: 10px;
            z-index: 1100;
            display: inline-block;
            width: 40px;
            height: 65px;
            cursor: pointer;
            text-decoration: none;
            overflow: visible;
        }
        .angel-mascot-link .angel-face {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- Angel Mascot with hyperlink in top-left corner -->
    <a href="..\\index.html" class="angel-mascot-link" aria-label="Go to Home Page">
      <div class="angel-face" id="angelFace" style="
        display: inline-block;
        width: 40px;
        height: 40px;
        position: relative;
        vertical-align: middle;
        margin: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffecd1, #ffb88c);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        overflow: visible;
      ">
        <!-- Hair -->
        <div style="
          content: '';
          position: absolute;
          top: -8px;
          left: -2px;
          right: -2px;
          height: 25px;
          background: linear-gradient(145deg, #d4af37, #ffd700);
          border-radius: 50% 50% 45% 45%;
          z-index: 2;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        "></div>
        <!-- Halo -->
        <div style="
          content: '';
          position: absolute;
          top: -15px;
          left: 50%;
          transform: translateX(-50%);
          width: 35px;
          height: 6px;
          border: 2px solid #ffd700;
          border-radius: 50%;
          background: transparent;
          box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
          z-index: 3;
        "></div>
        <!-- Left Eye -->
        <div class="left-eye" style="
          position: absolute;
          width: 8px;
          height: 8px;
          background: #fff;
          border-radius: 50%;
          top: 45%;
          left: 28%;
          border: 1px solid #e0e0e0;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          z-index: 1;
        ">
          <div class="left-pupil" id="leftPupil" style="
            position: absolute;
            width: 4px;
            height: 4px;
            background: #2563eb;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.1s ease;
            z-index: 1;
          ">
            <div style="
              content: '';
              position: absolute;
              width: 1.5px;
              height: 1.5px;
              background: white;
              border-radius: 50%;
              top: 20%;
              left: 30%;
            "></div>
          </div>
        </div>
        <!-- Right Eye -->
        <div class="right-eye" style="
          position: absolute;
          width: 8px;
          height: 8px;
          background: #fff;
          border-radius: 50%;
          top: 45%;
          left: 64%;
          border: 1px solid #e0e0e0;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          z-index: 1;
        ">
          <div class="right-pupil" id="rightPupil" style="
            position: absolute;
            width: 4px;
            height: 4px;
            background: #2563eb;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.1s ease;
            z-index: 1;
          ">
            <div style="
              content: '';
              position: absolute;
              width: 1.5px;
              height: 1.5px;
              background: white;
              border-radius: 50%;
              top: 20%;
              left: 30%;
            "></div>
          </div>
        </div>
        <!-- Nose -->
        <div class="nose" style="
          position: absolute;
          top: 55%;
          left: 50%;
          transform: translateX(-50%);
          width: 2px;
          height: 3px;
          background: #ffb88c;
          border-radius: 0 0 50% 50%;
          z-index: 1;
        "></div>
        <!-- Smile -->
        <div class="smile" style="
          position: absolute;
          top: 65%;
          left: 50%;
          transform: translateX(-50%);
          width: 12px;
          height: 6px;
          border: 1.5px solid #ff6b8a;
          border-top: none;
          border-radius: 0 0 12px 12px;
          background: transparent;
          z-index: 1;
        "></div>
        <!-- Cheeks -->
        <div class="left-cheek" style="
          position: absolute;
          width: 6px;
          height: 4px;
          background: rgba(255, 182, 193, 0.6);
          border-radius: 50%;
          top: 58%;
          left: 15%;
          z-index: 1;
        "></div>
        <div class="right-cheek" style="
          position: absolute;
          width: 6px;
          height: 4px;
          background: rgba(255, 182, 193, 0.6);
          border-radius: 50%;
          top: 58%;
          right: 15%;
          z-index: 1;
        "></div>
      </div>
    </a>

    <canvas id="aquariumCanvas"></canvas>
    <div id="fish-tank">
        <div class="water-surface"></div>
        <div class="light-ray"></div>
        <div class="light-ray"></div>
        <div class="light-ray"></div>
        <div class="bubble-container" id="bubbleContainer"></div>
        <div class="fish fish-orange">
            <div class="fish-body">
                <div class="fish-eye"></div>
                <div class="fish-scale scale-1"></div>
                <div class="fish-scale scale-2"></div>
                <div class="fish-scale scale-3"></div>
                <div class="fish-scale scale-4"></div>
                <div class="fish-scale scale-5"></div>
            </div>
            <div class="top-fin"></div>
            <div class="tail-fin"></div>
            <div class="side-fin"></div>
        </div>
        <div class="fish fish-blue">
            <div class="fish-body">
                <div class="fish-eye"></div>
                <div class="fish-scale scale-1"></div>
                <div class="fish-scale scale-2"></div>
                <div class="fish-scale scale-3"></div>
                <div class="fish-scale scale-4"></div>
                <div class="fish-scale scale-5"></div>
            </div>
            <div class="top-fin"></div>
            <div class="tail-fin"></div>
            <div class="side-fin"></div>
        </div>
        <div class="fish fish-green">
            <div class="fish-body">
                <div class="fish-eye"></div>
                <div class="fish-scale scale-1"></div>
                <div class="fish-scale scale-2"></div>
                <div class="fish-scale scale-3"></div>
                <div class="fish-scale scale-4"></div>
                <div class="fish-scale scale-5"></div>
            </div>
            <div class="top-fin"></div>
            <div class="tail-fin"></div>
            <div class="side-fin"></div>
        </div>
    </div>

    <!-- Left Ad Container with game links and images -->
    <div class="ad-container ad-left" aria-label="Left Game Ads">
      <a href="..\\balloonblast/balloonblast.html" rel="noopener noreferrer">
        <img src="..\\balloonblast/balloonblast.png" alt="Balloon Blast" />
      </a>
      <a href="..\\memorychallenge/memchal.html" rel="noopener noreferrer">
        <img src="..\\memorychallenge/memorychallenge.png" alt="Memory Challenge" />
      </a>
      <a href="..\\mergetiles/mergetiles.html" rel="noopener noreferrer">
        <img src="..\\mergetiles/mergetiles.png" alt="Merge Tiles" />
      </a>
      <a href="..\\multihorn/multihorn.html" rel="noopener noreferrer">
        <img src="..\\multihorn/multihorn.png" alt="Multi Horn" />
      </a>
      <a href="..\\zenbreath/zenbreath.html" rel="noopener noreferrer">
        <img src="..\\zenbreath/zenbreath.png" alt="Zen Breath" />
      </a>
    </div>

    <!-- Right Ad Container with game links and images -->
    <div class="ad-container ad-right" aria-label="Right Game Ads">
      <a href="..\\numberflow/numberflowpro.html" rel="noopener noreferrer">
        <img src="..\\numberflow/numberflowpro.png" alt="NumberFlow Pro" />
      </a>
      <a href="..\\quickmath/quickmath.html" rel="noopener noreferrer">
        <img src="..\\quickmath/quickmath.png" alt="Quick Math" />
      </a>
      <a href="..\\aquarium/aquarium.html" rel="noopener noreferrer">
        <img src="..\\aquarium/aquarium.png" alt="Aquarium" />
      </a>
      <a href="..\\nexusgrid/nexusgrid.html" rel="noopener noreferrer">
        <img src="..\\nexusgrid/nexusgrid.png" alt="Nexus Grid" />
      </a>
      <a href="..\\interactivelights/interactivelights.html" rel="noopener noreferrer">
        <img src="..\\interactivelights/interactivelights.png" alt="Interactive Lights" />
      </a>
    </div>

    <!-- Sound Toggle Button -->
    <button id="sound-toggle" title="Toggle Sound">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
        </svg>
    </button>
    <!-- Audio Element -->
    <audio id="bubble-sound" loop>
        <source src="bubbles.wav" type="audio/wav" />
        Your browser does not support the audio element.
    </audio>

    <script>
        const canvas = document.getElementById('aquariumCanvas');
        const ctx = canvas.getContext('2d');
        
        // Sound Control
        const bubbleSound = document.getElementById('bubble-sound');
        const soundToggle = document.getElementById('sound-toggle');
        let isSoundEnabled = true;

        // Try to autoplay (may be blocked by browser)
        bubbleSound.volume = 0.3;
        bubbleSound.play().catch(e => {
            console.log("Autoplay blocked. Click the speaker to enable sound.");
            isSoundEnabled = false;
            soundToggle.classList.add('muted');
        });

        // Toggle Sound
        soundToggle.addEventListener('click', () => {
            isSoundEnabled = !isSoundEnabled;
            soundToggle.classList.toggle('muted', !isSoundEnabled);
            if (isSoundEnabled) {
                bubbleSound.play();
            } else {
                bubbleSound.pause();
            }
        });
        
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drawAquarium();
        }
        
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        function drawAquarium() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            bgGradient.addColorStop(0, '#1E90FF');
            bgGradient.addColorStop(1, '#87CEEB');
            ctx.fillStyle = bgGradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawSand();
            
            const pebbleCount = Math.floor(canvas.width * canvas.height / 1600);
            for (let i = 0; i < pebbleCount * 0.45; i++) {
                const x = Math.random() * (canvas.width * 0.4);
                const y = canvas.height - 120 + Math.random() * 80;
                drawPebble(x, y, 1.2 + Math.random() * 0.8);
            }
            for (let i = 0; i < pebbleCount * 0.35; i++) {
                const x = canvas.width * 0.3 + Math.random() * (canvas.width * 0.4);
                const y = canvas.height - 120 + Math.random() * 80;
                drawPebble(x, y, 0.8 + Math.random() * 0.6);
            }
            for (let i = 0; i < pebbleCount * 0.2; i++) {
                const x = canvas.width * 0.7 + Math.random() * (canvas.width * 0.3);
                const y = canvas.height - 120 + Math.random() * 80;
                drawPebble(x, y, 0.5 + Math.random() * 0.5);
            }
            
            drawBoulder(canvas.width * 0.85, canvas.height - 60, 3.5);
            drawPlants();
        }
        
        function drawSand() {
            const sandGradient = ctx.createLinearGradient(0, canvas.height - 150, 0, canvas.height);
            sandGradient.addColorStop(0, '#F5DEB3');
            sandGradient.addColorStop(0.7, '#D2B48C');
            sandGradient.addColorStop(1, '#B8860B');
            ctx.fillStyle = sandGradient;
            ctx.beginPath();
            const sandHeight = 100 + Math.random() * 50;
            ctx.moveTo(0, canvas.height);
            const waveCount = 10;
            for (let i = 0; i <= waveCount; i++) {
                const x = (canvas.width / waveCount) * i;
                const y = canvas.height - sandHeight + (Math.random() * 20);
                ctx.lineTo(x, y);
            }
            ctx.lineTo(canvas.width, canvas.height);
            ctx.closePath();
            ctx.fill();
            
            ctx.fillStyle = 'rgba(210, 180, 140, 0.3)';
            for (let i = 0; i < 200; i++) {
                const x = Math.random() * canvas.width;
                const y = canvas.height - sandHeight + Math.random() * sandHeight * 1.5;
                ctx.beginPath();
                ctx.arc(x, y, 1 + Math.random() * 3, 0, Math.PI * 2);
                ctx.fill();
            }
        }
        
        function drawPebble(x, y, sizeMultiplier = 1) {
            const width = (10 + Math.random() * 30) * sizeMultiplier;
            const height = (8 + Math.random() * 20) * sizeMultiplier;
            let color;
            const c = Math.random();
            if (c < 0.6) {
                const b = Math.floor(100 + Math.random() * 100);
                color = `rgb(${b}, ${b - 30}, ${b - 60})`;
            } else if (c < 0.9) {
                const b = Math.floor(50 + Math.random() * 50);
                color = `rgb(${b}, ${b - 10}, ${b - 20})`;
            } else {
                const b = Math.floor(20 + Math.random() * 30);
                color = `rgb(${b}, ${b}, ${b})`;
            }
            
            ctx.fillStyle = color;
            ctx.beginPath();
            drawEllipse(ctx, x, y, width, height);
            ctx.fill();
            
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.beginPath();
            drawEllipse(ctx, x - width / 4, y - height / 4, width / 2, height / 2);
            ctx.fill();
            
            if (Math.random() < 0.2 * sizeMultiplier) {
                drawMoss(x, y, width, height);
            }
            
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.beginPath();
            drawEllipse(ctx, x + 2, y + 2, width, height);
            ctx.fill();
        }
        
        function drawBoulder(x, y, sizeMultiplier) {
            const width = 80 * sizeMultiplier;
            const height = 60 * sizeMultiplier;
            ctx.fillStyle = 'rgb(70, 50, 30)';
            ctx.beginPath();
            drawEllipse(ctx, x, y, width, height);
            ctx.fill();
            
            ctx.fillStyle = 'rgb(90, 70, 50)';
            for (let i = 0; i < 15; i++) {
                const tx = x - width / 2 + Math.random() * width;
                const ty = y - height / 2 + Math.random() * height;
                ctx.beginPath();
                drawEllipse(ctx, tx, ty, 5 + Math.random() * 15, (5 + Math.random() * 15) * 0.7);
                ctx.fill();
            }
            
            ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
            ctx.beginPath();
            drawEllipse(ctx, x - width / 3, y - height / 3, width / 3, height / 3);
            ctx.fill();
            
            drawMoss(x - width / 4, y - height / 6, width / 2, height / 2);
            drawMoss(x + width / 6, y + height / 8, width / 3, height / 3);
            
            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
            ctx.beginPath();
            drawEllipse(ctx, x + 5, y + 5, width, height);
            ctx.fill();
        }
        
        function drawPlants() {
            for (let i = 0; i < 3 + Math.floor(Math.random() * 4); i++) {
                const x = canvas.width * 0.3 + Math.random() * canvas.width * 0.4;
                drawAquaticPlant(x, canvas.height - 40, 150 + Math.random() * 100);
            }
        }
        
        function drawAquaticPlant(x, yBase, height) {
            const segments = 3 + Math.floor(height / 50);
            const segmentHeight = height / segments;
            let currentY = yBase;
            
            ctx.strokeStyle = '#2E8B57';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(x, yBase);
            
            for (let i = 0; i < segments; i++) {
                const segmentTop = currentY - segmentHeight;
                const controlX1 = x + (Math.random() * 40 - 20);
                const controlY1 = currentY - segmentHeight * 0.3;
                const controlX2 = x + (Math.random() * 40 - 20);
                const controlY2 = currentY - segmentHeight * 0.7;
                ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, x, segmentTop);
                currentY = segmentTop;
            }
            ctx.stroke();
            
            ctx.strokeStyle = '#3CB371';
            ctx.lineWidth = 3;
            ctx.stroke();
            
            currentY = yBase;
            for (let i = 0; i < segments; i++) {
                const t = 0.5;
                const leafX = x + (Math.random() * 40 - 20) * t;
                const leafY = currentY - segmentHeight * t;
                drawLeaf(leafX, leafY, 20 + Math.random() * 15, i % 2 === 0 ? 1 : -1, '#228B22', '#32CD32');
                currentY -= segmentHeight;
            }
        }
        
        function drawLeaf(x, y, size, direction, colorDark, colorLight) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate((Math.random() * 30 - 15) * Math.PI / 180);
            
            ctx.fillStyle = colorDark;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.quadraticCurveTo(size * 0.8 * direction, -size * 0.5, size * direction, 0);
            ctx.quadraticCurveTo(size * 0.8 * direction, size * 0.5, 0, 0);
            ctx.fill();
            
            ctx.fillStyle = colorLight;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.quadraticCurveTo(size * 0.5 * direction, -size * 0.3, size * 0.7 * direction, 0);
            ctx.quadraticCurveTo(size * 0.5 * direction, size * 0.3, 0, 0);
            ctx.fill();
            
            ctx.strokeStyle = 'rgba(0, 100, 0, 0.3)';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(size * 0.9 * direction, 0);
            ctx.stroke();
            ctx.restore();
        }
        
        function drawEllipse(ctx, x, y, w, h) {
            ctx.save();
            ctx.translate(x, y);
            ctx.scale(1, h / w);
            ctx.arc(0, 0, w / 2, 0, Math.PI * 2);
            ctx.restore();
        }
        
        function drawMoss(x, y, w, h) {
            ctx.fillStyle = '#3A5F0B';
            ctx.beginPath();
            drawEllipse(ctx, x, y, w * 0.8, h * 0.5);
            ctx.fill();
            
            for (let i = 0; i < 15; i++) {
                const clumpX = x - w / 2 + Math.random() * w;
                const clumpY = y - h / 2 + Math.random() * h / 2;
                ctx.fillStyle = Math.random() < 0.5 ? '#556B2F' : '#6B8E23';
                ctx.beginPath();
                drawEllipse(ctx, clumpX, clumpY, 3 + Math.random() * 5, (3 + Math.random() * 5) / 2);
                ctx.fill();
            }
        }

        function createBubble() {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            const size = Math.random() * 20 + 10;
            bubble.style.width = size + 'px';
            bubble.style.height = size + 'px';
            bubble.style.left = Math.random() * 100 + '%';
            bubble.style.bottom = '0';
            const duration = Math.random() * 8 + 6;
            bubble.style.animationDuration = duration + 's';
            bubble.style.setProperty('--drift', (Math.random() - 0.5) * 100 + 'px');
            bubble.style.animationDelay = Math.random() * 2 + 's';
            document.getElementById('bubbleContainer').appendChild(bubble);
            setTimeout(() => bubble.remove(), (duration + 2) * 1000);
        }
        
        function generateBubbles() {
            for (let i = 0; i < 1 + Math.floor(Math.random() * 3); i++) {
                setTimeout(createBubble, i * 500);
            }
        }
        
        generateBubbles();
        setInterval(generateBubbles, 3000);
        
        function adjustAnimations() {
            const w = window.innerWidth;
            document.querySelectorAll('.fish').forEach(fish => {
                fish.style.animationDuration = (parseFloat(fish.style.animationDuration) || 45) * (w < 768 ? 0.8 : w < 480 ? 0.6 : 1) + 's';
            });
        }
        
        window.addEventListener('load', adjustAnimations);
        window.addEventListener('resize', adjustAnimations);
        document.addEventListener('visibilitychange', () => {
            document.getElementById('fish-tank').style.animationPlayState = document.hidden ? 'paused' : 'running';
            if (!document.hidden && isSoundEnabled) {
                bubbleSound.play().catch(e => console.log("Autoplay blocked."));
            } else {
                bubbleSound.pause();
            }
        });

      // Angel Mascot Eye Tracking Script
      document.addEventListener('DOMContentLoaded', function() {
        const angelFace = document.getElementById('angelFace');
        const leftPupil = document.getElementById('leftPupil');
        const rightPupil = document.getElementById('rightPupil');
        
        if (angelFace && leftPupil && rightPupil) {
          document.addEventListener('mousemove', function(e) {
            const rect = angelFace.getBoundingClientRect();
            const faceCenterX = rect.left + rect.width / 2;
            const faceCenterY = rect.top + rect.height / 2;
            
            const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
            
            const maxMovement = 1.5;
            const pupilX = Math.cos(angle) * maxMovement;
            const pupilY = Math.sin(angle) * maxMovement;
            
            leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
            rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
          });
          
          document.addEventListener('mouseleave', function() {
            leftPupil.style.transform = 'translate(-50%, -50%)';
            rightPupil.style.transform = 'translate(-50%, -50%)';
          });
        }
      });
    </script>
</body>
</html>