Spaces:

kimhyunwoo
/

thronglets

Running

App Files Files Community

kimhyunwoo commited on 15 days ago

Commit

d03241e

verified ·

1 Parent(s): f86f670

Update index.html

Browse files

Files changed (1) hide show

index.html +300 -250

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thronglets Imitation</title>
     <style>
         body {
             margin: 0;
@@ -29,14 +29,15 @@
             border: 10px solid #8B4513; /* Wooden frame */
             box-sizing: border-box;
             overflow: hidden; /* Keep everything inside the frame */
-            display: flex;
             justify-content: center;
             align-items: center;
-            flex-wrap: wrap; /* Allow thronglets to wrap if many */
             padding: 20px; /* Padding inside the frame */
             image-rendering: pixelated; /* Attempt pixelation */
             font-size: 2em; /* Emojis larger */
-            position: relative;
         }
         .game-elements {
@@ -53,25 +54,24 @@
              pointer-events: auto; /* Allow clicks on interactable elements */
              transform: translate(-50%, -50%); /* Center element */
              user-select: none;
         }
-        .rock { top: 15%; left: 15%; }
-        .rock.right { left: 85%; }
-        .tree { top: 75%; left: 20%; }
-        .tree.right { left: 80%; }
-        .egg { top: 50%; left: 50%; cursor: pointer; transition: transform 0.5s ease;}
         .egg.hatching { animation: hatch-pulse 0.5s infinite alternate; }
         .thronglet {
-            top: 50%;
-            left: 50%;
             cursor: pointer;
-            transition: top 0.5s, left 0.5s, transform 0.2s ease;
-            z-index: 1; /* Ensure thronglets are above background elements */
         }
-        .apple { top: 60%; left: 40%; cursor: pointer; }
-        .bath { top: 60%; left: 60%; cursor: pointer; }
         .feedback {
             position: absolute;
@@ -79,6 +79,8 @@
             font-size: 0.8em;
             opacity: 0;
             transition: opacity 0.5s ease-out, transform 0.5s ease-out;
         }
         .feedback.active {
             opacity: 1;
@@ -89,6 +91,7 @@
             filter: grayscale(100%);
             opacity: 0.5;
             pointer-events: none;
         }
         .blood {
@@ -98,7 +101,7 @@
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.5s ease-out;
-            z-index: 0;
         }
         .blood.splatter { opacity: 1; }
@@ -119,6 +122,9 @@
             word-break: break-word;
             pointer-events: none; /* Don't block clicks */
             z-index: 100;
         }
         .message {
@@ -143,6 +149,7 @@
                 transparent 1px,
                 transparent 2px
             );
         }
         .glitch-overlay {
@@ -156,6 +163,7 @@
             animation: glitch 5s infinite alternate steps(5);
             opacity: 0;
             filter: hue-rotate(0deg);
         }
         .glitch-overlay.active {
@@ -170,24 +178,12 @@
         }
         @keyframes glitch {
-          0% {
-            transform: translate(0);
-          }
-          20% {
-            transform: translate(-5px, 5px);
-          }
-          40% {
-            transform: translate(-5px, -5px);
-          }
-          60% {
-            transform: translate(5px, 5px);
-          }
-          80% {
-            transform: translate(5px, -5px);
-          }
-          to {
-            transform: translate(0);
-          }
         }
         @keyframes color-shift {
@@ -203,22 +199,23 @@
             font-size: 3em;
             opacity: 0;
             transition: opacity 2s ease-in-out;
-            z-index: 0;
         }
          .ominous-elements.visible {
              opacity: 1;
          }
          .info-panel {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
-             background: #8B4513;
              border: 2px solid black;
              padding: 15px;
              color: white;
              font-size: 0.7em;
              text-align: center;
              white-space: pre-wrap;
@@ -226,11 +223,12 @@
              opacity: 0;
              transition: opacity 1s ease-in-out;
              pointer-events: none;
-             z-index: 5;
          }
          .info-panel.visible {
              opacity: 1;
-             pointer-events: auto;
          }
          .black-mirror-title {
@@ -241,7 +239,7 @@
              color: white;
              font-weight: bold;
              text-shadow: 1px 1px 0 black;
-             z-index: 10;
          }
          .netflix-logo {
@@ -252,49 +250,18 @@
             color: red; /* Or maybe style text */
             font-weight: bold;
             text-shadow: 1px 1px 0 black;
-            z-index: 10;
-         }
-         .thronglets-title-screen {
-             position: fixed;
-             top: 0;
-             left: 0;
-             width: 100%;
-             height: 100%;
-             background: linear-gradient(to bottom, #FFD700, #FFA500); /* Golden/Orange sky */
-             color: #8B4513; /* Brown text */
-             font-size: 3em;
-             font-weight: bold;
-             text-align: center;
-             padding-top: 15vh;
-             box-sizing: border-box;
-             z-index: 200;
-             transition: opacity 2s ease-out;
-             display: flex;
-             flex-direction: column;
-             align-items: center;
-         }
-         .thronglets-title-screen .copyright {
-             font-size: 0.4em;
-             margin-top: 10px;
-         }
-         .thronglets-title-screen .creatures {
-             margin-top: 5vh;
-         }
-         .thronglets-title-screen .creatures .emoji {
-             font-size: 2em;
-             margin: 0 20px;
          }
          .final-screen {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
-             background: radial-gradient(circle, rgba(148,187,233,1) 0%, rgba(238,174,202,1) 100%); /* Colorful background */
              z-index: 300;
              display: flex;
              flex-direction: column;
@@ -305,8 +272,12 @@
              text-align: center;
              opacity: 0;
              transition: opacity 2s ease-in-out;
          }
-         .final-screen.visible { opacity: 1; }
          .app-stores {
              margin-top: 20px;
@@ -315,6 +286,7 @@
          .app-stores img {
              height: 40px;
              margin: 0 10px;
          }
          .full-black {
@@ -336,43 +308,34 @@
              z-index: 302;
              opacity: 0;
              transition: opacity 1s ease-in-out;
          }
          .netflix-games-logo.visible { opacity: 1; }
     </style>
 </head>
 <body>
-    <div class="thronglets-title-screen" id="titleScreen">
-        THRONGLETS
-        <div class="copyright">(C) 1994 TUCKERSOFT LTD</div>
-         <div class="creatures">
-             <span class="emoji">🥚</span>
-              <!-- Using a placeholder emoji that *could* look like a Thronglet -->
-             <span class="emoji">🐻</span>
-             <span class="emoji">🐻</span>
-             <span class="emoji tree">🌳</span>
-         </div>
-         <div class="copyright" style="font-size: 0.3em; margin-top: 50px;">
-             Tuckersoft is not responsible for strange noises, missing files, or dreams featuring Thronglets whispering your name.
-         </div>
-    </div>
     <div class="game-container" id="gameContainer">
         <div class="black-mirror-title">BLACK MIRROR:<br>THRONGLETS</div>
         <div class="netflix-logo">N<br>GAMES</div> <!-- Simulate Netflix Games logo -->
-        <div class="game-elements">
             <span class="emoji rock">🪨</span>
             <span class="emoji rock right">🪨</span>
             <span class="emoji tree">🌳</span>
             <span class="emoji tree right">🌳</span>
             <span class="emoji egg" id="egg">🥚</span>
-            <!-- Initial items -->
             <span class="emoji apple" id="apple">🍎</span>
             <span class="emoji bath" id="bath">🛀</span>
@@ -386,41 +349,45 @@
              <!-- Blood splatter area -->
              <span class="emoji blood" id="bloodSplatter">🩸</span>
         </div>
     </div>
      <div class="console" id="console"></div>
-     <div class="scanline-overlay"></div>
      <div class="glitch-overlay" id="glitchOverlay"></div>
      <div class="final-screen" id="finalScreen">
          PLAY NOW<br>ON THE NETFLIX<br>MOBILE APP
          <div class="app-stores">
              <!-- Placeholder images or text for store buttons -->
-             <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="Google Play Placeholder">
-             <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="App Store Placeholder">
-             (Store Buttons Go Here)
          </div>
      </div>
      <div class="full-black" id="fullBlack"></div>
      <div class="netflix-games-logo" id="netflixGamesLogo">
-         <span class="emoji" style="font-size: 5em; color: red;">N</span>
      </div>
     <script>
         const egg = document.getElementById('egg');
         const gameContainer = document.getElementById('gameContainer');
         const consoleDiv = document.getElementById('console');
         const apple = document.getElementById('apple');
         const bath = document.getElementById('bath');
         const glitchOverlay = document.getElementById('glitchOverlay');
         const ominousElements = document.getElementById('ominousElements');
         const infoPanel = document.getElementById('infoPanel');
         const bloodSplatter = document.getElementById('bloodSplatter');
-        const titleScreen = document.getElementById('titleScreen');
         const finalScreen = document.getElementById('finalScreen');
         const fullBlack = document.getElementById('fullBlack');
         const netflixGamesLogo = document.getElementById('netflixGamesLogo');
@@ -429,6 +396,8 @@
         let nextThrongletId = 0;
         let deathCount = 0;
         const MAX_THRONGLETS = 20; // Cap the number for performance
         // --- Game State & Logic ---
@@ -441,123 +410,133 @@
         }
         function triggerGlitch(duration = 1000) {
             glitchOverlay.classList.add('active');
             setTimeout(() => {
                 glitchOverlay.classList.remove('active');
             }, duration);
         }
-        function showInfoPanel(text, duration = 2000) {
             infoPanel.textContent = text;
             infoPanel.classList.add('visible');
-            clearTimeout(infoPanel.timeout);
             infoPanel.timeout = setTimeout(() => {
                 infoPanel.classList.remove('visible');
             }, duration);
         }
-        function createThronglet(x, y) {
-            if (thronglets.length >= MAX_THRONGLETS) {
-                logToConsole("Too many Thronglets.");
                 return;
             }
             const throngletElement = document.createElement('span');
             throngletElement.classList.add('emoji', 'thronglet');
-             // Use a default emoji that could resemble the character
-            throngletElement.textContent = '🐕'; // Changed from 🐻 - maybe more ears?
-            throngletElement.dataset.id = nextThrongletId++;
-            throngletElement.style.top = `${y}%`;
-            throngletElement.style.left = `${x}%`;
-            gameContainer.querySelector('.game-elements').appendChild(throngletElement);
             const newThronglet = {
-                id: throngletElement.dataset.id,
                 element: throngletElement,
-                hunger: 50, // 0-100, 100 is very hungry
-                cleanliness: 50, // 0-100, 100 is very dirty
-                happiness: 50, // 0-100, 0 is very unhappy
                 lastInteraction: Date.now(),
                 isDead: false,
                 memory: [], // To store events
             };
             thronglets.push(newThronglet);
-            // Add click listener for interaction
-            throngletElement.addEventListener('click', () => interactThronglet(newThronglet));
             logToConsole(`A new Thronglet #${newThronglet.id} appeared!`);
-            // Add feedback element
             const feedbackElement = document.createElement('span');
             feedbackElement.classList.add('emoji', 'feedback');
-            feedbackElement.style.top = `${y}%`;
-            feedbackElement.style.left = `${x}%`;
-            gameContainer.querySelector('.game-elements').appendChild(feedbackElement);
             newThronglet.feedbackElement = feedbackElement;
         }
         function interactThronglet(thronglet) {
-            if (thronglet.isDead) return;
-            const now = Date.now();
-            const timeSinceLast = now - thronglet.lastInteraction;
-            thronglet.lastInteraction = now;
-            // Simple interaction feedback
-            thronglet.happiness = Math.max(0, thronglet.happiness - 10); // Interacting makes them slightly happy
-            showFeedback(thronglet, '👋'); // Wave emoji
-             logToConsole(`Interacted with Thronglet #${thronglet.id}`);
-            // Check for "tricks" (not implemented, but could be a mechanic)
-            // If they have high stats, maybe they "learn" something?
-             if (thronglet.hunger < 20 && thronglet.cleanliness < 20 && thronglet.happiness > 80 && timeSinceLast < 5000) {
-                 // This is a placeholder for a learning/trick mechanic
-                 logToConsole(`Thronglet #${thronglet.id} seems responsive...`);
-                 thronglet.memory.push('PositiveInteraction'); // Store positive memory
-                 showFeedback(thronglet, '✨');
-             }
         }
         function feedThronglet(thronglet) {
-             if (thronglet.isDead) return;
-             thronglet.hunger = Math.max(0, thronglet.hunger - 30);
              thronglet.happiness = Math.min(100, thronglet.happiness + 15);
              showFeedback(thronglet, '🍎');
-             logToConsole(`Fed Thronglet #${thronglet.id}. Hunger: ${thronglet.hunger}`);
               thronglet.memory.push('Fed');
         }
          function cleanThronglet(thronglet) {
-             if (thronglet.isDead) return;
-             thronglet.cleanliness = Math.max(0, thronglet.cleanliness - 40);
-             thronglet.happiness = Math.min(100, thronglet.happiness + 20);
              showFeedback(thronglet, '🛁');
-             logToConsole(`Cleaned Thronglet #${thronglet.id}. Cleanliness: ${thronglet.cleanliness}`);
              thronglet.memory.push('Cleaned');
         }
         function showFeedback(thronglet, emoji) {
-            if (thronglet.feedbackElement) {
-                thronglet.feedbackElement.textContent = emoji;
-                thronglet.feedbackElement.classList.add('active');
-                clearTimeout(thronglet.feedbackElement.timeout);
-                thronglet.feedbackElement.timeout = setTimeout(() => {
                     thronglet.feedbackElement.classList.remove('active');
-                }, 500);
-            }
         }
-        function killThronglet(thronglet) {
-            if (thronglet.isDead) return;
             thronglet.isDead = true;
             thronglet.element.classList.add('dead');
             thronglet.element.textContent = '💀'; // Replace with skull
-            thronglet.feedbackElement.remove(); // Remove feedback icon
             // Add blood splatter effect briefly
             bloodSplatter.style.top = thronglet.element.style.top;
@@ -567,179 +546,250 @@
             deathCount++;
-            logToConsole(`Thronglet #${thronglet.id} experienced the void.`);
-            logToConsole(`Learned individuals are wholly disposable`); // From trailer
-            thronglet.memory.push('Died'); // Remember death
-            // Trigger events based on death count
             if (deathCount === 1) {
                 showInfoPanel("The first Thronglet to experience the void...");
-                triggerGlitch();
-            } else if (deathCount > 3 && deathCount % 3 === 0) {
                  logToConsole(`They'll remember your carelessness...`);
                  triggerGlitch(500);
             }
-             // Maybe respawn faster after death? Or spawn more?
-             setTimeout(() => {
-                // Simple respawn logic - replace the skull with a new egg/thronglet
-                thronglet.element.remove(); // Remove the skull
-                thronglets = thronglets.filter(t => t.id !== thronglet.id); // Remove from array
-                const { top, left } = thronglet.element.style;
-                 createThronglet(parseFloat(left), parseFloat(top)); // Spawn a new one near where it died
-             }, 5000); // Respawn after 5 seconds
         }
         function updateThronglets() {
             const now = Date.now();
             thronglets.forEach(thronglet => {
                 if (thronglet.isDead) return;
-                const timeAlive = now - thronglet.element.dataset.bornTime; // Track time alive
                 const timeSinceLast = now - thronglet.lastInteraction;
-                // Increase needs over time (faster if neglected)
-                const needIncreaseRate = timeSinceLast / 10000; // Faster increase if ignored for 10s
-                thronglet.hunger = Math.min(100, thronglet.hunger + needIncreaseRate);
-                thronglet.cleanliness = Math.min(100, thronglet.cleanliness + needIncreaseRate * 0.8); // Cleaning slightly less critical
-                thronglet.happiness = Math.max(0, thronglet.happiness - needIncreaseRate * 1.2); // Happiness decays faster
                 // Check conditions for death
-                if (thronglet.hunger >= 90 || thronglet.cleanliness >= 90 || thronglet.happiness <= 10) {
-                    killThronglet(thronglet);
                 }
                  // Check for reproduction (if very happy and well-cared for)
-                 if (thronglet.happiness > 85 && thronglet.hunger < 20 && thronglet.cleanliness < 20 && timeSinceLast < 30000 && Math.random() < 0.001) { // Small random chance
-                     logToConsole(`Thronglet #${thronglet.id} feels loved. Oh, Look!`); // From trailer
-                     showFeedback(thronglet, '❤️');
                      // Spawn a new one nearby
                      setTimeout(() => {
-                        createThronglet(parseFloat(thronglet.element.style.left) + (Math.random() - 0.5) * 10,
-                                        parseFloat(thronglet.element.style.top) + (Math.random() - 0.5) * 10);
-                     }, 500); // Short delay to show feedback
                  }
                 // Simple movement (random walk)
-                 const currentX = parseFloat(thronglet.element.style.left);
-                 const currentY = parseFloat(thronglet.element.style.top);
-                 const moveDist = 2; // Max movement percentage
-                 const newX = Math.max(5, Math.min(95, currentX + (Math.random() - 0.5) * moveDist)); // Keep within bounds
-                 const newY = Math.max(5, Math.min(95, currentY + (Math.random() - 0.5) * moveDist));
-                 thronglet.element.style.left = `${newX}%`;
-                 thronglet.element.style.top = `${newY}%`;
-                 // Periodically show a status hint (optional, can clutter console)
-                 // if (Math.random() < 0.005) {
-                 //    logToConsole(`#${thronglet.id}: H:${thronglet.hunger.toFixed(0)} C:${thronglet.cleanliness.toFixed(0)} P:${thronglet.happiness.toFixed(0)}`);
-                 // }
             });
-            // Trigger final phase after significant events (e.g., high death count, many Thronglets)
-            if (deathCount >= 5 && ! ominousElements.classList.contains('visible')) {
-                 logToConsole("Did you...");
-                 setTimeout(() => { logToConsole("do this??_"); triggerGlitch(1000); }, 1000);
-                 setTimeout(() => { ominousElements.classList.add('visible'); }, 2000);
-                 setTimeout(() => { logToConsole("we understand,,"); }, 3000);
-                 setTimeout(() => { logToConsole("we know what we must do 🤔"); triggerGlitch(2000); }, 4000);
-                 // Transition to final screen after console messages
-                 setTimeout(showFinalScreen, 8000);
-            }
         }
         function showFinalScreen() {
              gameContainer.style.opacity = 0;
              consoleDiv.style.opacity = 0;
              scanlineOverlay.style.opacity = 0;
              glitchOverlay.style.opacity = 0;
-             fullBlack.classList.add('visible');
              setTimeout(() => {
                  netflixGamesLogo.classList.add('visible');
-                 fullBlack.classList.remove('visible'); // Fade out black
-             }, 2000); // Show N logo after black screen
             setTimeout(() => {
                  netflixGamesLogo.style.opacity = 0; // Fade out N
                  finalScreen.classList.add('visible'); // Show final screen with app store links
-             }, 4000); // Show final screen
         }
         // --- Event Handlers ---
         egg.addEventListener('click', () => {
-            if (egg.classList.contains('hatching')) return;
             egg.classList.add('hatching');
             logToConsole("Egg is hatching...");
             setTimeout(() => {
-                egg.remove(); // Remove the egg element
                 createThronglet(50, 50); // Spawn first Thronglet in the center
             }, 1000); // Hatch after 1 second
         });
         apple.addEventListener('click', () => {
              const activeThronglets = thronglets.filter(t => !t.isDead);
              if (activeThronglets.length > 0) {
-                 // Find the hungriest or a random one
-                 const targetThronglet = activeThronglets.reduce((prev, current) => (prev.hunger > current.hunger) ? prev : current, activeThronglets[0]);
                  feedThronglet(targetThronglet);
              } else {
-                 logToConsole("No Thronglets to feed!");
              }
         });
         bath.addEventListener('click', () => {
              const activeThronglets = thronglets.filter(t => !t.isDead);
              if (activeThronglets.length > 0) {
-                 // Find the dirtiest or a random one
-                 const targetThronglet = activeThronglets.reduce((prev, current) => (prev.cleanliness > current.cleanliness) ? prev : current, activeThronglets[0]);
                  cleanThronglet(targetThronglet);
              } else {
-                 logToConsole("No Thronglets to clean!");
              }
         });
         // --- Game Loop ---
-        let gameInterval;
         function startGameLoop() {
             gameInterval = setInterval(updateThronglets, 500); // Update every 0.5 seconds
         }
         // --- Initial Setup ---
         function initGame() {
-            // Hide game elements until title screen is gone
-             gameContainer.style.opacity = 0;
-             consoleDiv.style.opacity = 0;
-             ominousElements.style.opacity = 0;
-             finalScreen.style.opacity = 0;
-             fullBlack.style.opacity = 0;
-             netflixGamesLogo.style.opacity = 0;
-            // Listen for title screen click to start
-            titleScreen.addEventListener('click', () => {
-                 titleScreen.style.opacity = 0;
-                 setTimeout(() => {
-                     titleScreen.style.display = 'none';
-                     gameContainer.style.opacity = 1;
-                     consoleDiv.style.opacity = 1;
-                     logToConsole("Welcome to Thronglets!");
-                     logToConsole("Tap the egg to hatch your first Thronglet.");
-                     startGameLoop();
-                 }, 2000); // Fade out title screen
-            });
-             logToConsole("Click anywhere on the screen to start."); // Initial console message behind title
         }
-        // Start the game
         initGame();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thronglets Imitation (Gameplay Only)</title>
     <style>
         body {
             margin: 0;
             border: 10px solid #8B4513; /* Wooden frame */
             box-sizing: border-box;
             overflow: hidden; /* Keep everything inside the frame */
+            display: flex; /* Changed from flex to allow absolute positioning of elements */
             justify-content: center;
             align-items: center;
+            /* flex-wrap: wrap; Removed as elements are absolutely positioned now */
             padding: 20px; /* Padding inside the frame */
             image-rendering: pixelated; /* Attempt pixelation */
             font-size: 2em; /* Emojis larger */
+            position: relative; /* Needed for absolute positioning of children */
+            transition: opacity 1s ease-out; /* Added for fade out */
         }
         .game-elements {
              pointer-events: auto; /* Allow clicks on interactable elements */
              transform: translate(-50%, -50%); /* Center element */
              user-select: none;
+             z-index: 1; /* Ensure elements are above background but below UI */
         }
+        .rock { top: 15%; left: 15%; z-index: 0;}
+        .rock.right { left: 85%; z-index: 0;}
+        .tree { top: 75%; left: 20%; z-index: 0;}
+        .tree.right { left: 80%; z-index: 0;}
+        .egg { top: 50%; left: 50%; cursor: pointer; transition: transform 0.5s ease; z-index: 2;}
         .egg.hatching { animation: hatch-pulse 0.5s infinite alternate; }
         .thronglet {
+            /* Position set dynamically by JS */
             cursor: pointer;
+            transition: top 0.5s, left 0.5s, transform 0.2s ease, opacity 0.5s ease-out;
+            z-index: 3; /* Thronglets above items */
         }
+        .apple { top: 60%; left: 40%; cursor: pointer; z-index: 2;}
+        .bath { top: 60%; left: 60%; cursor: pointer; z-index: 2;}
         .feedback {
             position: absolute;
             font-size: 0.8em;
             opacity: 0;
             transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+            pointer-events: none; /* Don't interfere with clicks */
+            z-index: 5; /* Above everything else in game area */
         }
         .feedback.active {
             opacity: 1;
             filter: grayscale(100%);
             opacity: 0.5;
             pointer-events: none;
+            z-index: 1; /* Sink slightly when dead */
         }
         .blood {
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.5s ease-out;
+            z-index: 0; /* Behind everything */
         }
         .blood.splatter { opacity: 1; }
             word-break: break-word;
             pointer-events: none; /* Don't block clicks */
             z-index: 100;
+            max-height: 150px; /* Limit console height */
+            overflow-y: scroll; /* Add scrollbar if needed */
+            transition: opacity 1s ease-out; /* Added for fade out */
         }
         .message {
                 transparent 1px,
                 transparent 2px
             );
+             transition: opacity 1s ease-out; /* Added for fade out */
         }
         .glitch-overlay {
             animation: glitch 5s infinite alternate steps(5);
             opacity: 0;
             filter: hue-rotate(0deg);
+             transition: opacity 1s ease-out; /* Added for fade out */
         }
         .glitch-overlay.active {
         }
         @keyframes glitch {
+          0% { transform: translate(0); }
+          20% { transform: translate(-5px, 5px); }
+          40% { transform: translate(-5px, -5px); }
+          60% { transform: translate(5px, 5px); }
+          80% { transform: translate(5px, -5px); }
+          to { transform: translate(0); }
         }
         @keyframes color-shift {
             font-size: 3em;
             opacity: 0;
             transition: opacity 2s ease-in-out;
+            z-index: 0; /* Behind most things */
+            pointer-events: none;
         }
          .ominous-elements.visible {
              opacity: 1;
          }
          .info-panel {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
+             background: #8B4513; /* Brown panel */
              border: 2px solid black;
              padding: 15px;
              color: white;
+             font-family: 'Courier New', monospace; /* Match console font */
              font-size: 0.7em;
              text-align: center;
              white-space: pre-wrap;
              opacity: 0;
              transition: opacity 1s ease-in-out;
              pointer-events: none;
+             z-index: 5; /* Above game elements */
+             max-width: 80%; /* Prevent panel from being too wide */
          }
          .info-panel.visible {
              opacity: 1;
+             /* pointer-events: auto; Keep as none unless interaction needed */
          }
          .black-mirror-title {
              color: white;
              font-weight: bold;
              text-shadow: 1px 1px 0 black;
+             z-index: 10; /* Above game container border */
          }
          .netflix-logo {
             color: red; /* Or maybe style text */
             font-weight: bold;
             text-shadow: 1px 1px 0 black;
+            z-index: 10; /* Above game container border */
          }
+         /* Final screen styling */
          .final-screen {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
+             /* Updated background to match video more closely */
+             background: linear-gradient(to bottom, #744FAA, #D470A3); /* Purple to Pink/Purple gradient */
              z-index: 300;
              display: flex;
              flex-direction: column;
              text-align: center;
              opacity: 0;
              transition: opacity 2s ease-in-out;
+             pointer-events: none; /* Initially not interactive */
+         }
+         .final-screen.visible {
+             opacity: 1;
+             pointer-events: auto; /* Make interactive when visible */
          }
          .app-stores {
              margin-top: 20px;
          .app-stores img {
              height: 40px;
              margin: 0 10px;
+             cursor: pointer; /* Indicate clickable */
          }
          .full-black {
              z-index: 302;
              opacity: 0;
              transition: opacity 1s ease-in-out;
+             pointer-events: none;
          }
          .netflix-games-logo.visible { opacity: 1; }
+         .netflix-games-logo .emoji {
+              font-size: 8em; /* Larger N */
+              color: red;
+              text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
+         }
     </style>
 </head>
 <body>
+    <!-- Game container now starts visible -->
     <div class="game-container" id="gameContainer">
         <div class="black-mirror-title">BLACK MIRROR:<br>THRONGLETS</div>
         <div class="netflix-logo">N<br>GAMES</div> <!-- Simulate Netflix Games logo -->
+        <div class="game-elements" id="gameElements">
+            <!-- Static elements -->
             <span class="emoji rock">🪨</span>
             <span class="emoji rock right">🪨</span>
             <span class="emoji tree">🌳</span>
             <span class="emoji tree right">🌳</span>
+            <!-- Initial dynamic elements -->
             <span class="emoji egg" id="egg">🥚</span>
             <span class="emoji apple" id="apple">🍎</span>
             <span class="emoji bath" id="bath">🛀</span>
              <!-- Blood splatter area -->
              <span class="emoji blood" id="bloodSplatter">🩸</span>
+             <!-- Thronglets will be added here by JS -->
         </div>
     </div>
      <div class="console" id="console"></div>
+     <div class="scanline-overlay" id="scanlineOverlay"></div>
      <div class="glitch-overlay" id="glitchOverlay"></div>
+     <!-- Final Screens (initially hidden) -->
      <div class="final-screen" id="finalScreen">
          PLAY NOW<br>ON THE NETFLIX<br>MOBILE APP
          <div class="app-stores">
              <!-- Placeholder images or text for store buttons -->
+             <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIxMyAyIDMgMTQgNyAxNCAxNSAyIj48L3BvbHlnb24+PHBvbHlnb24gcG9pbnRzPSIxNiAxMCAyMCAxMCAyMyAxNyAxNiAxNSI+PC9wb2x5Z29uPjxjaXJjbGUgY3g9IjUuNSIgY3k9IjE3LjUiIHI9IjIuNSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTguNSIgY3k9IjE3LjUiIHI9IjIuNSI+PC9jaXJjbGU+PC9zdmc+" alt="Google Play Placeholder">
+             <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE1LjkgNi4zQTEwIDkuNyAwIDAgMCAyIDZjMCA3IDEzIDggMTMgOGEyIDIgMCAwIDAgMS03LjZsLS43LTFsLTMuNS01LjV6Ij48L3BhdGg+PHBhdGggZD0iTTExIDE0YTYgNiAwIDAgMCA2IDBjMCAuNDQtLjEgLjktLjYgMWExMCA5LjcgMCAwIDEgLTkuNCAwYy0uNS0uMS0uNi0uNi0uNi0xYTYgNiAwIDAgMCA0LTZ6Ij48L3BhdGg+PC9zdmc+" alt="App Store Placeholder">
+             <!-- (Store Buttons Go Here) -->
          </div>
      </div>
      <div class="full-black" id="fullBlack"></div>
      <div class="netflix-games-logo" id="netflixGamesLogo">
+         <span class="emoji">N</span>
      </div>
     <script>
         const egg = document.getElementById('egg');
         const gameContainer = document.getElementById('gameContainer');
+        const gameElements = document.getElementById('gameElements'); // Reference to the container for dynamic elements
         const consoleDiv = document.getElementById('console');
         const apple = document.getElementById('apple');
         const bath = document.getElementById('bath');
         const glitchOverlay = document.getElementById('glitchOverlay');
+        const scanlineOverlay = document.getElementById('scanlineOverlay');
         const ominousElements = document.getElementById('ominousElements');
         const infoPanel = document.getElementById('infoPanel');
         const bloodSplatter = document.getElementById('bloodSplatter');
         const finalScreen = document.getElementById('finalScreen');
         const fullBlack = document.getElementById('fullBlack');
         const netflixGamesLogo = document.getElementById('netflixGamesLogo');
         let nextThrongletId = 0;
         let deathCount = 0;
         const MAX_THRONGLETS = 20; // Cap the number for performance
+        let gameInterval;
+        let gameActive = true; // Flag to control game loop
         // --- Game State & Logic ---
         }
         function triggerGlitch(duration = 1000) {
+            if (!gameActive) return;
             glitchOverlay.classList.add('active');
             setTimeout(() => {
                 glitchOverlay.classList.remove('active');
             }, duration);
         }
+        function showInfoPanel(text, duration = 3000) { // Increased default duration
+            if (!gameActive) return;
             infoPanel.textContent = text;
             infoPanel.classList.add('visible');
+            clearTimeout(infoPanel.timeout); // Clear previous timeout if any
             infoPanel.timeout = setTimeout(() => {
                 infoPanel.classList.remove('visible');
             }, duration);
         }
+        function createThronglet(xPercent, yPercent) {
+            if (!gameActive || thronglets.length >= MAX_THRONGLETS) {
+                if (thronglets.length >= MAX_THRONGLETS) {
+                    logToConsole("! Population limit reached.");
+                }
                 return;
             }
             const throngletElement = document.createElement('span');
             throngletElement.classList.add('emoji', 'thronglet');
+            throngletElement.textContent = '🐕'; // Using dog emoji as placeholder
+            const currentId = nextThrongletId++;
+            throngletElement.dataset.id = currentId;
+            throngletElement.style.top = `${yPercent}%`;
+            throngletElement.style.left = `${xPercent}%`;
+            throngletElement.dataset.bornTime = Date.now(); // Track birth time
+            gameElements.appendChild(throngletElement); // Append to gameElements div
             const newThronglet = {
+                id: currentId,
                 element: throngletElement,
+                hunger: 30, // Start less hungry
+                cleanliness: 30, // Start less dirty
+                happiness: 70, // Start happier
                 lastInteraction: Date.now(),
                 isDead: false,
                 memory: [], // To store events
+                feedbackElement: null // Initialize feedback element later
             };
             thronglets.push(newThronglet);
+            // Add click listener for interaction (maybe remove this? Trailer implies interaction via items)
+            // throngletElement.addEventListener('click', () => interactThronglet(newThronglet));
             logToConsole(`A new Thronglet #${newThronglet.id} appeared!`);
+            // Add feedback element (needs to be created after thronglet is added to DOM)
             const feedbackElement = document.createElement('span');
             feedbackElement.classList.add('emoji', 'feedback');
+            // Position feedback relative to the thronglet initially
+            feedbackElement.style.top = throngletElement.style.top;
+            feedbackElement.style.left = throngletElement.style.left;
+            gameElements.appendChild(feedbackElement); // Append to gameElements div
             newThronglet.feedbackElement = feedbackElement;
+            // Initial random wander
+            setTimeout(() => {
+                 if (!newThronglet.isDead) wander(newThronglet);
+             }, 50); // Slight delay before first move
         }
+        // Function to interact (currently not directly clickable, but could be triggered)
         function interactThronglet(thronglet) {
+            if (!gameActive || thronglet.isDead) return;
+            thronglet.lastInteraction = Date.now();
+            thronglet.happiness = Math.min(100, thronglet.happiness + 5); // Small happiness boost
+            showFeedback(thronglet, '👋');
+            logToConsole(`Acknowledged Thronglet #${thronglet.id}`);
+            thronglet.memory.push('Acknowledged');
         }
         function feedThronglet(thronglet) {
+             if (!gameActive || thronglet.isDead) return;
+             thronglet.hunger = Math.max(0, thronglet.hunger - 40); // More filling
              thronglet.happiness = Math.min(100, thronglet.happiness + 15);
+             thronglet.lastInteraction = Date.now();
              showFeedback(thronglet, '🍎');
+             logToConsole(`Fed Thronglet #${thronglet.id}. Hunger: ${thronglet.hunger.toFixed(0)}`);
               thronglet.memory.push('Fed');
         }
          function cleanThronglet(thronglet) {
+             if (!gameActive || thronglet.isDead) return;
+             thronglet.cleanliness = Math.max(0, thronglet.cleanliness - 50); // More cleaning power
+             thronglet.happiness = Math.min(100, thronglet.happiness + 10); // Cleaning is okay, not great
+             thronglet.lastInteraction = Date.now();
              showFeedback(thronglet, '🛁');
+             logToConsole(`Cleaned Thronglet #${thronglet.id}. Cleanliness: ${thronglet.cleanliness.toFixed(0)}`);
              thronglet.memory.push('Cleaned');
         }
         function showFeedback(thronglet, emoji) {
+            if (!gameActive || !thronglet.feedbackElement || thronglet.isDead) return;
+            // Update feedback position to match current thronglet position
+            thronglet.feedbackElement.style.top = thronglet.element.style.top;
+            thronglet.feedbackElement.style.left = thronglet.element.style.left;
+            thronglet.feedbackElement.textContent = emoji;
+            thronglet.feedbackElement.classList.add('active');
+            clearTimeout(thronglet.feedbackElement.timeout); // Clear previous timeout
+            thronglet.feedbackElement.timeout = setTimeout(() => {
+                if (thronglet.feedbackElement) { // Check if element still exists
                     thronglet.feedbackElement.classList.remove('active');
+                }
+            }, 800); // Feedback duration
         }
+        function killThronglet(thronglet, reason = "the void") {
+            if (!gameActive || thronglet.isDead) return;
             thronglet.isDead = true;
             thronglet.element.classList.add('dead');
             thronglet.element.textContent = '💀'; // Replace with skull
+            // Remove feedback element associated with this thronglet
+            if (thronglet.feedbackElement) {
+                thronglet.feedbackElement.remove();
+                thronglet.feedbackElement = null; // Clear reference
+            }
             // Add blood splatter effect briefly
             bloodSplatter.style.top = thronglet.element.style.top;
             deathCount++;
+            logToConsole(`! Thronglet #${thronglet.id} experienced ${reason}.`);
+             // Store the reason for death in memory
+             thronglet.memory.push(`Died (${reason})`);
+            // Trigger events based on death count and reason
             if (deathCount === 1) {
                 showInfoPanel("The first Thronglet to experience the void...");
+                triggerGlitch(500);
+                 logToConsole(`Learned individuals are wholly disposable.`);
+            } else if (deathCount > 2 && deathCount % 3 === 0) {
                  logToConsole(`They'll remember your carelessness...`);
+                 showInfoPanel("They'll remember your carelessness...");
                  triggerGlitch(500);
+            } else if (deathCount > 4) {
+                 triggerGlitch(200); // Frequent small glitches
             }
+            // Check for transition to final phase
+            if (deathCount >= 5 && gameActive) { // Only trigger final phase once
+                 triggerFinalPhase();
+            } else {
+                // Optional: Respawn faster after death? Or spawn more?
+                 // Remove the skull after a delay, but don't automatically respawn.
+                 setTimeout(() => {
+                    if (thronglet.element) {
+                        thronglet.element.style.opacity = 0; // Fade out skull
+                        setTimeout(() => {
+                             if(thronglet.element) thronglet.element.remove(); // Remove after fade
+                         }, 500);
+                    }
+                    // Keep dead thronglet data in array for potential memory analysis later?
+                    // Or remove it: thronglets = thronglets.filter(t => t.id !== thronglet.id);
+                 }, 5000); // Skull remains for 5 seconds
+            }
+        }
+        function wander(thronglet) {
+             if (!gameActive || thronglet.isDead) return;
+             const currentX = parseFloat(thronglet.element.style.left);
+             const currentY = parseFloat(thronglet.element.style.top);
+             const moveDist = 1.5; // Max movement percentage per step
+             const newX = Math.max(5, Math.min(95, currentX + (Math.random() - 0.5) * moveDist * 2)); // Keep within bounds
+             const newY = Math.max(5, Math.min(95, currentY + (Math.random() - 0.5) * moveDist * 2));
+             thronglet.element.style.left = `${newX}%`;
+             thronglet.element.style.top = `${newY}%`;
+             // Update feedback position if it exists
+             if (thronglet.feedbackElement) {
+                 thronglet.feedbackElement.style.left = `${newX}%`;
+                 thronglet.feedbackElement.style.top = `${newY}%`;
+             }
         }
         function updateThronglets() {
+            if (!gameActive) return;
             const now = Date.now();
             thronglets.forEach(thronglet => {
                 if (thronglet.isDead) return;
                 const timeSinceLast = now - thronglet.lastInteraction;
+                // Increase needs over time (rate increases with neglect)
+                const baseNeedRate = 0.1; // Base rate per update cycle (0.5s)
+                const neglectMultiplier = 1 + Math.min(5, timeSinceLast / 20000); // Multiplier increases up to 6x if ignored for ~100s
+                thronglet.hunger = Math.min(100, thronglet.hunger + baseNeedRate * neglectMultiplier * 1.1); // Hunger increases slightly faster
+                thronglet.cleanliness = Math.min(100, thronglet.cleanliness + baseNeedRate * neglectMultiplier * 0.9); // Cleanliness slightly slower
+                thronglet.happiness = Math.max(0, thronglet.happiness - baseNeedRate * neglectMultiplier * 1.2); // Happiness decays faster
                 // Check conditions for death
+                let deathReason = null;
+                if (thronglet.hunger >= 100) deathReason = "starvation";
+                else if (thronglet.cleanliness >= 100) deathReason = "filth";
+                else if (thronglet.happiness <= 0) deathReason = "despair";
+                if (deathReason) {
+                    killThronglet(thronglet, deathReason);
+                    return; // Skip rest of update for this dead thronglet
                 }
                  // Check for reproduction (if very happy and well-cared for)
+                 if (thronglet.happiness > 90 && thronglet.hunger < 15 && thronglet.cleanliness < 15 && timeSinceLast < 20000 && Math.random() < 0.002) { // Lower chance
+                     logToConsole(`Oh, Look! Thronglet #${thronglet.id} is duplicating...`);
+                     showFeedback(thronglet, '💞');
+                     showInfoPanel("Oh, Look!");
                      // Spawn a new one nearby
                      setTimeout(() => {
+                        const parentX = parseFloat(thronglet.element.style.left);
+                        const parentY = parseFloat(thronglet.element.style.top);
+                        createThronglet(Math.max(5, Math.min(95, parentX + (Math.random() - 0.5) * 10)),
+                                        Math.max(5, Math.min(95, parentY + (Math.random() - 0.5) * 10)));
+                     }, 800); // Short delay to show feedback
                  }
                 // Simple movement (random walk)
+                if (Math.random() < 0.8) { // Move most ticks
+                    wander(thronglet);
+                }
             });
+        }
+         function triggerFinalPhase() {
+            if (!gameActive) return; // Prevent multiple triggers
+            gameActive = false; // Stop the main game loop updates
+            clearInterval(gameInterval); // Stop the interval
+            logToConsole("...");
+            logToConsole("SYSTEM: Detecting repeated termination events.");
+            showInfoPanel("Thronglets remember...");
+            triggerGlitch(1500);
+             setTimeout(() => {
+                 logToConsole("SYSTEM: Analyzing player interaction patterns.");
+                 showInfoPanel("Thronglets adapt...");
+                 triggerGlitch(1000);
+             }, 2000);
+            setTimeout(() => {
+                 logToConsole("> Did you...");
+                 triggerGlitch(500);
+             }, 4000);
+            setTimeout(() => {
+                 logToConsole("> do this??_");
+                 ominousElements.classList.add('visible');
+                 triggerGlitch(1500);
+             }, 5000);
+            setTimeout(() => {
+                 logToConsole("> we understand,,");
+                  showInfoPanel("Thronglets don't like to be ignored.");
+                  triggerGlitch(800);
+             }, 7000);
+             setTimeout(() => {
+                 logToConsole("> we know what we must do 🤔");
+                 triggerGlitch(2500);
+                 // Make remaining thronglets glow menacingly? (Simple version: change emoji)
+                 thronglets.forEach(t => {
+                     if (!t.isDead && t.element) {
+                         t.element.textContent = '😈'; // Change to devil emoji
+                         t.element.style.filter = 'brightness(1.5) saturate(2)';
+                     }
+                 });
+             }, 8500);
+             // Transition to final screen after console messages
+             setTimeout(showFinalScreen, 11000); // Start final screen transition
         }
         function showFinalScreen() {
+             // Fade out game elements
              gameContainer.style.opacity = 0;
              consoleDiv.style.opacity = 0;
              scanlineOverlay.style.opacity = 0;
              glitchOverlay.style.opacity = 0;
+             glitchOverlay.classList.remove('active'); // Ensure glitch stops
+             // Hide individual game items cleanly
+             gameElements.style.opacity = 0;
              setTimeout(() => {
+                 // Show black screen
+                 fullBlack.classList.add('visible');
+             }, 1000); // Wait for fade out
+             setTimeout(() => {
+                 // Show N logo over black
                  netflixGamesLogo.classList.add('visible');
+             }, 2500); // Show N logo after black screen delay
             setTimeout(() => {
+                 // Fade out N logo, fade out black, fade in final colourful screen
                  netflixGamesLogo.style.opacity = 0; // Fade out N
+                 fullBlack.classList.remove('visible'); // Fade out black
                  finalScreen.classList.add('visible'); // Show final screen with app store links
+             }, 4500); // Show final screen
         }
         // --- Event Handlers ---
         egg.addEventListener('click', () => {
+            if (!gameActive || egg.classList.contains('hatching') || !document.contains(egg)) return; // Check if egg still exists
             egg.classList.add('hatching');
             logToConsole("Egg is hatching...");
+            triggerGlitch(200); // Small glitch on hatch
             setTimeout(() => {
+                if(document.contains(egg)) egg.remove(); // Remove the egg element if it hasn't been removed elsewhere
                 createThronglet(50, 50); // Spawn first Thronglet in the center
             }, 1000); // Hatch after 1 second
         });
         apple.addEventListener('click', () => {
+             if (!gameActive) return;
              const activeThronglets = thronglets.filter(t => !t.isDead);
              if (activeThronglets.length > 0) {
+                 // Find the hungriest
+                 const targetThronglet = activeThronglets.reduce((prev, current) => (prev.hunger > current.hunger) ? prev : current);
                  feedThronglet(targetThronglet);
              } else {
+                 logToConsole("! No living Thronglets to feed!");
              }
         });
         bath.addEventListener('click', () => {
+            if (!gameActive) return;
              const activeThronglets = thronglets.filter(t => !t.isDead);
              if (activeThronglets.length > 0) {
+                 // Find the dirtiest
+                 const targetThronglet = activeThronglets.reduce((prev, current) => (prev.cleanliness > current.cleanliness) ? prev : current);
                  cleanThronglet(targetThronglet);
              } else {
+                 logToConsole("! No living Thronglets to clean!");
              }
         });
         // --- Game Loop ---
         function startGameLoop() {
+            if (gameInterval) clearInterval(gameInterval); // Clear existing interval if any
             gameInterval = setInterval(updateThronglets, 500); // Update every 0.5 seconds
         }
         // --- Initial Setup ---
         function initGame() {
+            // Ensure final screens are hidden initially
+            finalScreen.style.opacity = 0;
+            fullBlack.style.opacity = 0;
+            netflixGamesLogo.style.opacity = 0;
+            ominousElements.style.opacity = 0; // Ensure ominous elements are hidden
+            // Start game immediately
+            gameActive = true;
+            logToConsole("Initiating Thronglet Environment...");
+            logToConsole("Tap the egg to begin gestation.");
+            startGameLoop();
         }
+        // Start the game automatically when the script loads
         initGame();
     </script>
 </body>
 </html>