```html
<!html>
<html>
<head>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .bounce {
            animation: bounce 2s infinite;
        }
        .rotate {
            animation: rotate 10s linear infinite;
        }
        .fadeIn {
            animation: fadeIn 2s forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div id="container" style="width:400px; height:400px; position:relative; overflow:hidden; background: linear-gradient(to top, #87CEEB, #f0f8ff); border:2px solid #000; border-radius:10px;">
        <canvas id="map" width="400" height="400" style="position:absolute; top:0; left:0;"></canvas>
        <div id="sun" style="position:absolute; width:50px; height:50px; top:50px; left:175px; font-size:50px; cursor:pointer;" onclick="animateEmoji(this)">☀️</div>
        <div id="moon" style="position:absolute; width:50px; height:50px; top:300px; left:175px; font-size:50px; cursor:pointer;" onclick="animateEmoji(this)">🌙</div>
        <div id="info" style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); text-align:center; background: rgba(255,255,255,0.8); padding:10px; border-radius:10px;">
            <div style="font-size:20px;">📍Location: <span id="location">--</span></div>
            <div style="font-size:20px;">🌅 Sunrise: <span id="sunrise">--:--</span></div>
            <div style="font-size:20px;">🌇 Sunset: <span id="sunset">--:--</span></div>
        </div>
        <div id="emojiParty" style="position:absolute; top:0; left:0; width:400px; height:400px; pointer-events:none;"></div>
    </div>
    <script>
        function animateEmoji(element) {
            element.classList.add('bounce');
            setTimeout(() => {
                element.classList.remove('bounce');
            }, 2000);
        }

        function addPartyEmoji() {
            const emojis = ["🎉","🎈","✨","🕺","💃","🍀","🌟","🎊"];
            const party = document.getElementById('emojiParty');
            for(let i=0; i<20; i++) {
                let emoji = document.createElement('div');
                emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                emoji.style.position = 'absolute';
                emoji.style.fontSize = '24px';
                emoji.style.top = Math.random() * 400 + 'px';
                emoji.style.left = Math.random() * 400 + 'px';
                emoji.style.animation = `bounce ${Math.random()*2 +1}s infinite`;
                party.appendChild(emoji);
            }
        }

        function drawMap(latitude, longitude) {
            const canvas = document.getElementById('map');
            const ctx = canvas.getContext('2d');
            // Simple representation: draw a circle for the location
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#228B22';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#FFA500';
            const x = (longitude + 180) * (canvas.width / 360);
            const y = (90 - latitude) * (canvas.height / 180);
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.font = '16px Arial';
            ctx.fillStyle = '#000';
            ctx.fillText('📍', x-10, y+5);
        }

        function getSunTimes(year, month, day, latitude, longitude, zenith=90.8333) {
            // Step 1: Day of the year
            const N1 = Math.floor(275 * month / 9);
            const N2 = Math.floor((month + 9) / 12);
            const N3 = 1 + Math.floor((year - 4 * Math.floor(year /4) +2)/3);
            const N = N1 - (N2 * N3) + day -30;

            // Step 2: Longitude to hour value
            const lngHour = longitude /15;

            // Step 3: Sun's mean anomaly
            const M = (0.9856 * N) -3.289;

            // Step 4: Sun's true longitude
            let L = M + (1.916 * Math.sin(degToRad(M))) + (0.020 * Math.sin(degToRad(2*M))) + 282.634;
            L = adjustTo360(L);

            // Step 5a: Sun's right ascension
            let RA = radToDeg(Math.atan(0.91764 * Math.tan(degToRad(L))));
            RA = adjustTo360(RA);

            // Step 5b: RA quadrant
            const Lquadrant = Math.floor(L/90)*90;
            const RAquadrant = Math.floor(RA/90)*90;
            RA = RA + (Lquadrant - RAquadrant);

            // Step 5c: RA to hours
            RA /=15;

            // Step 6: Sun's declination
            const sinDec = 0.39782 * Math.sin(degToRad(L));
            const cosDec = Math.cos(Math.asin(sinDec));

            // Step 7a: Sun's local hour angle
            const cosH = (Math.cos(degToRad(zenith)) - (sinDec * Math.sin(degToRad(latitude)))) / (cosDec * Math.cos(degToRad(latitude)));

            if(cosH >1){
                return { sunrise: null, sunset: null };
            }
            if(cosH < -1){
                return { sunrise: null, sunset: null };
            }

            // Step 7b: Calculate H
            let Hr = radToDeg(Math.acos(cosH));
            let Hs = 360 - Hr;

            Hr /=15;
            Hs /=15;

            // Step 8: Local mean time
            let T_rise = Hr + RA - (0.06571 * N) - 6.622;
            let T_set = Hs + RA - (0.06571 * N) - 6.622;

            // Step 9: UT
            let UT_rise = T_rise - lngHour;
            let UT_set = T_set - lngHour;

            UT_rise = adjustTo24(UT_rise);
            UT_set = adjustTo24(UT_set);

            // Step 10: Local time
            const localOffset = new Date().getTimezoneOffset() / -60;
            let localRise = UT_rise + localOffset;
            let localSet = UT_set + localOffset;

            localRise = adjustTo24(localRise);
            localSet = adjustTo24(localSet);

            return { sunrise: formatTime(localRise), sunset: formatTime(localSet) };
        }

        function degToRad(deg){
            return deg * Math.PI /180;
        }

        function radToDeg(rad){
            return rad * 180 / Math.PI;
        }

        function adjustTo360(deg){
            while(deg <0) deg +=360;
            while(deg >=360) deg -=360;
            return deg;
        }

        function adjustTo24(time){
            while(time <0) time +=24;
            while(time >=24) time -=24;
            return time;
        }

        function formatTime(time){
            const hours = Math.floor(time);
            const minutes = Math.floor((time - hours)*60);
            return `${padZero(hours)}:${padZero(minutes)}`;
        }

        function padZero(num){
            return num <10 ? '0' + num : num;
        }

        function displayInfo(latitude, longitude, sunrise, sunset) {
            document.getElementById('location').textContent = `${latitude.toFixed(2)}°, ${longitude.toFixed(2)}°`;
            document.getElementById('sunrise').textContent = sunrise ? sunrise : "N/A";
            document.getElementById('sunset').textContent = sunset ? sunset : "N/A";
        }

        function init() {
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(position => {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;
                    const today = new Date();
                    const year = today.getFullYear();
                    const month = today.getMonth()+1;
                    const day = today.getDate();
                    const sunTimes = getSunTimes(year, month, day, latitude, longitude);
                    drawMap(latitude, longitude);
                    displayInfo(latitude, longitude, sunTimes.sunrise, sunTimes.sunset);
                    addPartyEmoji();
                }, error => {
                    document.getElementById('info').innerHTML = "❌ Unable to retrieve location.";
                });
            } else {
                document.getElementById('info').innerHTML = "❌ Geolocation not supported.";
            }
        }

        window.onload = init;
    </script>
</body>
</html>
```