Spaces:

kimhyunwoo
/

thronglets

Running

App Files Files Community

kimhyunwoo commited on 14 days ago

Commit

6f10b35

verified ·

1 Parent(s): d03241e

Update index.html

Browse files

Files changed (1) hide show

index.html +469 -462

index.html CHANGED Viewed

@@ -3,41 +3,40 @@
 <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;
             overflow: hidden;
-            background: #111;
-            color: limegreen;
             font-family: 'Courier New', monospace;
             display: flex;
-            flex-direction: column;
             align-items: center;
-            justify-content: center;
             min-height: 100vh;
             position: relative;
         }
         .game-container {
             position: relative;
-            width: 90vmin;
-            height: 60vmin;
-            max-width: 800px;
-            max-height: 500px;
-            background: #3A4A2F; /* Grass background */
-            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 {
@@ -46,41 +45,47 @@
             left: 0;
             width: 100%;
             height: 100%;
-            pointer-events: none; /* Allow clicks to pass through */
         }
         .game-elements .emoji, .game-elements .text {
              position: absolute;
-             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;
-            transform: translate(-50%, -150%); /* Above thronglet */
             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;
@@ -91,7 +96,7 @@
             filter: grayscale(100%);
             opacity: 0.5;
             pointer-events: none;
-            z-index: 1; /* Sink slightly when dead */
         }
         .blood {
@@ -101,288 +106,205 @@
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.5s ease-out;
-            z-index: 0; /* Behind everything */
-        }
-        .blood.splatter { opacity: 1; }
-        .skull { font-size: 1.5em; pointer-events: none; }
-        .console {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 90%;
-            max-width: 600px;
-            background: rgba(0, 0, 0, 0.8);
-            border: 2px groove limegreen;
             padding: 10px;
             box-sizing: border-box;
-            white-space: pre-wrap;
-            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 {
-            display: block;
-            margin-bottom: 5px;
-            color: limegreen;
-            white-space: pre-wrap;
         }
-        .scanline-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 101;
-            background: repeating-linear-gradient(
-                0deg,
-                rgba(0, 0, 0, 0.1) 0,
-                rgba(0, 0, 0, 0.1) 1px,
-                transparent 1px,
-                transparent 2px
-            );
-             transition: opacity 1s ease-out; /* Added for fade out */
-        }
-        .glitch-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
             pointer-events: none;
-            z-index: 102;
-            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 {
-             animation: glitch 0.3s infinite alternate steps(5), color-shift 1s infinite linear;
-             opacity: 0.5;
-        }
-        @keyframes hatch-pulse {
             from { transform: translate(-50%, -50%) scale(1); }
             to { transform: translate(-50%, -50%) scale(1.05); }
         }
-        @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 {
-            0% { filter: hue-rotate(0deg); }
-            100% { filter: hue-rotate(360deg); }
         }
-        /* Basic representation of later elements */
-        .ominous-elements {
-            position: absolute;
-            top: 10%;
-            right: 10%;
-            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;
-             word-break: break-word;
-             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 {
-             position: absolute;
-             top: 10px;
-             left: 10px;
-             font-size: 0.8em;
-             color: white;
-             font-weight: bold;
-             text-shadow: 1px 1px 0 black;
-             z-index: 10; /* Above game container border */
-         }
-         .netflix-logo {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            font-size: 1.2em; /* Use the 'N' emoji? */
-            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;
-             align-items: center;
-             justify-content: center;
-             color: white;
-             font-size: 1.5em;
-             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;
-             font-size: 0.8em;
-         }
-         .app-stores img {
-             height: 40px;
-             margin: 0 10px;
-             cursor: pointer; /* Indicate clickable */
-         }
-         .full-black {
-            position: fixed;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background: black;
-            z-index: 301;
-            opacity: 0;
-            transition: opacity 1s ease-in-out;
-            pointer-events: none;
-         }
-         .full-black.visible { opacity: 1; }
-         .netflix-games-logo {
-             position: fixed;
-             top: 50%;
-             left: 50%;
-             transform: translate(-50%, -50%);
-             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>
-             <!-- Ominous elements for later -->
-             <div class="ominous-elements" id="ominousElements">
-                 💀💀💀💀<br>🦴🦴🦴🦴<br>🌌📦
-             </div>
-            <!-- Info Panel -->
             <div class="info-panel" id="infoPanel"></div>
-             <!-- 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');
@@ -391,24 +313,158 @@
         const finalScreen = document.getElementById('finalScreen');
         const fullBlack = document.getElementById('fullBlack');
         const netflixGamesLogo = document.getElementById('netflixGamesLogo');
         let thronglets = [];
         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 logToConsole(message) {
             const msgElement = document.createElement('span');
             msgElement.classList.add('message');
-            msgElement.textContent = `> ${message}`;
             consoleDiv.appendChild(msgElement);
             consoleDiv.scrollTop = consoleDiv.scrollHeight; // Auto-scroll
         }
         function triggerGlitch(duration = 1000) {
             if (!gameActive) return;
             glitchOverlay.classList.add('active');
@@ -417,112 +473,96 @@
             }, 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") {
@@ -530,264 +570,231 @@
             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;
             bloodSplatter.style.left = thronglet.element.style.left;
             bloodSplatter.classList.add('splatter');
-            setTimeout(() => { bloodSplatter.classList.remove('splatter'); }, 1000);
             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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thronglets Simulation</title>
     <style>
         body {
             margin: 0;
             overflow: hidden;
+            background: #222; /* Slightly lighter background */
+            color: #eee; /* Default text color */
             font-family: 'Courier New', monospace;
             display: flex;
+            flex-direction: column; /* Arrange game area and UI panel vertically */
             align-items: center;
+            justify-content: center; /* Center vertically */
             min-height: 100vh;
             position: relative;
         }
         .game-container {
             position: relative;
+            width: 90vmin; /* Responsive width */
+            height: 60vmin; /* Responsive height */
+            max-width: 900px;
+            max-height: 540px;
+            background: #3A4A2F; /* Grass */
+            border: 12px solid #6F4E37; /* Darker Wood frame */
+            box-shadow: inset 0 0 15px rgba(0,0,0,0.5); /* Inner shadow for depth */
             box-sizing: border-box;
+            overflow: hidden;
+            display: flex;
             justify-content: center;
             align-items: center;
+            font-size: 2.2em; /* Slightly larger emojis */
+            position: relative;
+            transition: opacity 1s ease-out;
+            cursor: default; /* Default cursor for game area */
         }
         .game-elements {
             left: 0;
             width: 100%;
             height: 100%;
+            pointer-events: none;
         }
         .game-elements .emoji, .game-elements .text {
              position: absolute;
+             pointer-events: auto;
+             transform: translate(-50%, -50%);
              user-select: none;
+             z-index: 1;
+             transition: opacity 0.5s ease-out; /* Fade out */
         }
+        /* Static elements */
         .rock { top: 15%; left: 15%; z-index: 0;}
         .rock.right { left: 85%; z-index: 0;}
+        .tree { top: 80%; left: 20%; font-size: 1.2em; z-index: 0;} /* Made trees slightly bigger */
+        .tree.right { left: 80%; font-size: 1.2em; z-index: 0;}
+        /* Dynamic elements */
+        .egg { top: 50%; left: 50%; cursor: pointer; transition: transform 0.5s ease, opacity 0.5s ease-out; z-index: 2;}
         .egg.hatching { animation: hatch-pulse 0.5s infinite alternate; }
         .thronglet {
+            cursor: default; /* No direct clicking needed */
+            transition: top 0.5s ease-out, left 0.5s ease-out, transform 0.2s ease, opacity 0.5s ease-out, filter 0.3s ease-out;
+            z-index: 3;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Subtle shadow */
         }
+        /* Items are now buttons in UI panel */
+        /* .apple, .bath removed from here */
         .feedback {
             position: absolute;
+            transform: translate(-50%, -150%);
             font-size: 0.8em;
             opacity: 0;
             transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+            pointer-events: none;
+            z-index: 5;
+            text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
         }
         .feedback.active {
             opacity: 1;
             filter: grayscale(100%);
             opacity: 0.5;
             pointer-events: none;
+            z-index: 1;
         }
         .blood {
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.5s ease-out;
+            z-index: 0;
+            color: darkred;
+        }
+        .blood.splatter { opacity: 0.8; } /* Slightly less opaque blood */
+        /* UI Panel Styling */
+        .ui-panel {
+            width: 90vmin; /* Match game container width */
+            max-width: 900px;
+            margin-top: 10px; /* Space between game and UI */
+            background: #4a3c2a; /* Darker wood panel */
+            border: 4px solid #2f251a;
+            border-radius: 5px;
             padding: 10px;
             box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch; /* Make items fill height */
+            color: #e0cda9; /* Light parchment color */
+            transition: opacity 1s ease-out;
+            height: 120px; /* Fixed height for UI */
         }
+        .ui-stats, .ui-actions, .ui-console-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around; /* Space out items vertically */
+            padding: 0 10px;
         }
+        .ui-stats { flex-basis: 25%; text-align: left; }
+        .ui-actions { flex-basis: 20%; align-items: center; }
+        .ui-console-container { flex-basis: 55%; background: rgba(0,0,0,0.3); border-radius: 3px;}
+        .ui-stats span, #gameTime { display: block; margin-bottom: 5px; font-size: 0.9em; }
+        #gameTime { font-weight: bold; }
+        .ui-actions button {
+            font-family: 'Courier New', monospace;
+            font-size: 1.5em; /* Larger emoji buttons */
+            background: #8B4513; /* SaddleBrown */
+            border: 2px solid #5C3317; /* Darker brown */
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            margin: 5px 0;
+        }
+        .ui-actions button:hover { background-color: #A0522D; /* Peru */ }
+        .ui-actions button:active { transform: translateY(1px); }
+        .console {
             width: 100%;
+            height: 100%; /* Fill container */
+            background: transparent; /* Container provides background */
+            border: none; /* Container provides border */
+            padding: 5px;
+            box-sizing: border-box;
+            white-space: pre-wrap;
+            word-break: break-word;
             pointer-events: none;
+            overflow-y: scroll;
+            color: limegreen; /* Keep console text green */
+            font-size: 0.8em;
         }
+        /* Simple scrollbar styling */
+        .console::-webkit-scrollbar { width: 5px; }
+        .console::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
+        .console::-webkit-scrollbar-thumb { background: limegreen; border-radius: 3px;}
+        .message { display: block; margin-bottom: 3px; }
+        .message.error { color: #ff6666; } /* Style for error messages */
+        .message.system { color: #87CEEB; } /* Style for system messages */
+        .message.event { color: #FFD700; } /* Style for game events */
+        /* Overlays and Final Screens (remain mostly the same) */
+        .scanline-overlay, .glitch-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            pointer-events: none; z-index: 101; transition: opacity 1s ease-out;
+        }
+        .scanline-overlay { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px); }
+        .glitch-overlay { animation: glitch 5s infinite alternate steps(5); opacity: 0; filter: hue-rotate(0deg); }
+        .glitch-overlay.active { animation: glitch 0.3s infinite alternate steps(5), color-shift 1s infinite linear; opacity: 0.5; }
+        .ominous-elements {
+            position: absolute; top: 10%; right: 10%; font-size: 3em; opacity: 0;
+            transition: opacity 2s ease-in-out; z-index: 0; pointer-events: none;
+        }
+        .ominous-elements.visible { opacity: 1; }
+        .info-panel {
+             position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+             background: rgba(40, 20, 10, 0.85); /* Darker semi-transparent panel */
+             border: 2px solid #FF8C00; /* DarkOrange border */
+             padding: 15px; color: #FFD700; /* Gold text */
+             font-family: 'Courier New', monospace; font-size: 0.8em; text-align: center;
+             white-space: pre-wrap; word-break: break-word; opacity: 0;
+             transition: opacity 0.5s ease-in-out; pointer-events: none; z-index: 10;
+             max-width: 80%; border-radius: 4px; box-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
+        }
+        .info-panel.visible { opacity: 1; }
+        .final-screen, .full-black, .netflix-games-logo { /* Keep final screens hidden */
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            display: flex; align-items: center; justify-content: center;
+            opacity: 0; transition: opacity 2s ease-in-out; pointer-events: none;
+        }
+        .final-screen { /* Style as before */
+            background: linear-gradient(to bottom, #744FAA, #D470A3); z-index: 300;
+            flex-direction: column; color: white; font-size: 1.5em; text-align: center;
+        }
+        .final-screen.visible { opacity: 1; pointer-events: auto; }
+        .app-stores { margin-top: 20px; font-size: 0.8em; }
+        .app-stores img { height: 40px; margin: 0 10px; cursor: pointer; }
+        .full-black { background: black; z-index: 301; }
+        .full-black.visible { opacity: 1; }
+        .netflix-games-logo { z-index: 302; }
+        .netflix-games-logo.visible { opacity: 1; }
+        .netflix-games-logo .emoji { font-size: 8em; color: red; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
+        @keyframes hatch-pulse { /* Unchanged */
             from { transform: translate(-50%, -50%) scale(1); }
             to { transform: translate(-50%, -50%) scale(1.05); }
         }
+        @keyframes glitch { /* Unchanged */
+          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 { /* Unchanged */
+            0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); }
         }
     </style>
 </head>
 <body>
     <div class="game-container" id="gameContainer">
         <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>
+            <!-- Ominous elements for later -->
+            <div class="ominous-elements" id="ominousElements">💀💀💀<br>🦴🦴🦴<br>🌌📦</div>
+            <!-- Info Panel (content set by JS) -->
             <div class="info-panel" id="infoPanel"></div>
+            <!-- Blood splatter area -->
+            <span class="emoji blood" id="bloodSplatter">🩸</span>
+            <!-- Thronglets will be added here by JS -->
         </div>
+    </div>
+    <div class="ui-panel" id="uiPanel">
+        <div class="ui-stats">
+            <span>Time: <span id="gameTime">00:00</span></span>
+            <span>Thronglets: <span id="throngletCount">0</span></span>
+            <span>Deaths: <span id="deathCount">0</span></span>
+        </div>
+        <div class="ui-actions">
+            <button id="feedButton">🍎</button>
+            <button id="cleanButton">🛀</button>
+        </div>
+        <div class="ui-console-container">
+            <div class="console" id="console"></div>
+        </div>
     </div>
+     <!-- Overlays (remain outside main structure) -->
      <div class="scanline-overlay" id="scanlineOverlay"></div>
      <div class="glitch-overlay" id="glitchOverlay"></div>
+     <!-- Final Screens (remain outside main structure) -->
      <div class="final-screen" id="finalScreen">
          PLAY NOW<br>ON THE NETFLIX<br>MOBILE APP
          <div class="app-stores">
              <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>
+        // --- DOM Elements ---
         const egg = document.getElementById('egg');
         const gameContainer = document.getElementById('gameContainer');
+        const gameElements = document.getElementById('gameElements');
+        const uiPanel = document.getElementById('uiPanel');
         const consoleDiv = document.getElementById('console');
+        const feedButton = document.getElementById('feedButton');
+        const cleanButton = document.getElementById('cleanButton');
         const glitchOverlay = document.getElementById('glitchOverlay');
         const scanlineOverlay = document.getElementById('scanlineOverlay');
         const ominousElements = document.getElementById('ominousElements');
         const finalScreen = document.getElementById('finalScreen');
         const fullBlack = document.getElementById('fullBlack');
         const netflixGamesLogo = document.getElementById('netflixGamesLogo');
+        const gameTimeDisplay = document.getElementById('gameTime');
+        const throngletCountDisplay = document.getElementById('throngletCount');
+        const deathCountDisplay = document.getElementById('deathCount');
+        // --- Game State ---
         let thronglets = [];
         let nextThrongletId = 0;
         let deathCount = 0;
+        const MAX_THRONGLETS = 25; // Increased cap slightly
         let gameInterval;
+        let timeInterval;
+        let gameActive = true;
+        let gameStartTime = Date.now();
+        // --- Web Audio API Setup ---
+        let audioContext;
+        let isAudioContextResumed = false;
+        function initAudio() {
+            if (!audioContext) {
+                try {
+                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
+                    audioContext = new AudioContext();
+                    isAudioContextResumed = (audioContext.state === 'running');
+                    // Attempt to resume if suspended, maybe on first interaction
+                    if (!isAudioContextResumed) {
+                         // Add a one-time listener to resume on first click/tap
+                        const resumeAudio = () => {
+                            if (audioContext && audioContext.state === 'suspended') {
+                                audioContext.resume().then(() => {
+                                    isAudioContextResumed = true;
+                                    console.log("AudioContext Resumed");
+                                    logToConsole("Audio Initialized.", "system");
+                                    // Remove the listener after success
+                                    document.body.removeEventListener('click', resumeAudio);
+                                    document.body.removeEventListener('touchend', resumeAudio);
+                                });
+                            } else if (audioContext && audioContext.state === 'running') {
+                                isAudioContextResumed = true;
+                                document.body.removeEventListener('click', resumeAudio);
+                                document.body.removeEventListener('touchend', resumeAudio);
+                            }
+                        };
+                        document.body.addEventListener('click', resumeAudio, { once: true });
+                        document.body.addEventListener('touchend', resumeAudio, { once: true });
+                    }
+                } catch (e) {
+                    console.error("Web Audio API is not supported in this browser", e);
+                    logToConsole("! Audio Not Supported !", "error");
+                }
+            }
+        }
+        function playSound(type) {
+            if (!audioContext || !isAudioContextResumed) {
+                // Try to resume if not already done
+                if (audioContext && audioContext.state === 'suspended') {
+                    audioContext.resume().then(() => { isAudioContextResumed = true; playSound(type); }); // Try again after resume
+                }
+                return; // Don't play if context not ready
+            }
+            const osc = audioContext.createOscillator();
+            const gain = audioContext.createGain();
+            osc.connect(gain);
+            gain.connect(audioContext.destination);
+            const now = audioContext.currentTime;
+            let freq = 440;
+            let duration = 0.1;
+            let vol = 0.2;
+            osc.type = 'sine';
+            switch (type) {
+                case 'hatch':
+                    freq = 660; duration = 0.3; vol = 0.3; osc.type = 'triangle';
+                    gain.gain.setValueAtTime(0, now);
+                    gain.gain.linearRampToValueAtTime(vol, now + 0.05);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                case 'feed':
+                    freq = 880; duration = 0.08; vol = 0.15;
+                    gain.gain.setValueAtTime(vol, now);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                case 'clean':
+                    freq = 1100; duration = 0.1; vol = 0.1; osc.type = 'square';
+                    gain.gain.setValueAtTime(vol, now);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                case 'death':
+                    freq = 110; duration = 0.8; vol = 0.4; osc.type = 'sawtooth';
+                    gain.gain.setValueAtTime(vol, now);
+                    gain.gain.exponentialRampToValueAtTime(0.01, now + duration); // Decay
+                    osc.frequency.setValueAtTime(freq, now);
+                    osc.frequency.exponentialRampToValueAtTime(55, now + duration); // Pitch down
+                    break;
+                case 'duplicate':
+                    freq = 523; duration = 0.4; vol = 0.25; osc.type = 'triangle'; // C5
+                    gain.gain.setValueAtTime(0, now);
+                    gain.gain.linearRampToValueAtTime(vol, now + 0.05);
+                    osc.frequency.setValueAtTime(freq, now);
+                    osc.frequency.linearRampToValueAtTime(freq * 1.5, now + duration * 0.8); // Pitch up slightly
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                 case 'feedback':
+                    freq = 1320; duration = 0.05; vol = 0.08;
+                    gain.gain.setValueAtTime(vol, now);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                 case 'error':
+                    freq = 220; duration = 0.2; vol = 0.2; osc.type = 'square';
+                    gain.gain.setValueAtTime(vol, now);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+                    break;
+                default: // Generic click/interaction
+                    freq = 900; duration = 0.05; vol = 0.1;
+                     gain.gain.setValueAtTime(vol, now);
+                    gain.gain.linearRampToValueAtTime(0, now + duration);
+            }
+            osc.frequency.setValueAtTime(freq, now);
+            osc.start(now);
+            osc.stop(now + duration);
+        }
+        // --- Game Logic ---
+        function logToConsole(message, type = "info") {
             const msgElement = document.createElement('span');
             msgElement.classList.add('message');
+            if (type === "error") msgElement.classList.add('error');
+            else if (type === "system") msgElement.classList.add('system');
+            else if (type === "event") msgElement.classList.add('event');
+            msgElement.textContent = `${type !== 'info' ? type.toUpperCase()+':' : '>'} ${message}`;
             consoleDiv.appendChild(msgElement);
             consoleDiv.scrollTop = consoleDiv.scrollHeight; // Auto-scroll
         }
+        function updateUI() {
+            throngletCountDisplay.textContent = thronglets.filter(t => !t.isDead).length;
+            deathCountDisplay.textContent = deathCount;
+        }
+        function updateTimeDisplay() {
+            const elapsedSeconds = Math.floor((Date.now() - gameStartTime) / 1000);
+            const minutes = Math.floor(elapsedSeconds / 60).toString().padStart(2, '0');
+            const seconds = (elapsedSeconds % 60).toString().padStart(2, '0');
+            gameTimeDisplay.textContent = `${minutes}:${seconds}`;
+        }
         function triggerGlitch(duration = 1000) {
             if (!gameActive) return;
             glitchOverlay.classList.add('active');
             }, duration);
         }
+        function showInfoPanel(text, duration = 3000) {
             if (!gameActive) return;
             infoPanel.textContent = text;
             infoPanel.classList.add('visible');
+            clearTimeout(infoPanel.timeout);
             infoPanel.timeout = setTimeout(() => {
                 infoPanel.classList.remove('visible');
             }, duration);
         }
         function createThronglet(xPercent, yPercent) {
+            if (!gameActive || thronglets.filter(t => !t.isDead).length >= MAX_THRONGLETS) {
+                if (thronglets.filter(t => !t.isDead).length >= MAX_THRONGLETS) {
+                    logToConsole("Population limit reached.", "system");
+                     playSound('error');
                 }
                 return;
             }
             const throngletElement = document.createElement('span');
             throngletElement.classList.add('emoji', 'thronglet');
+            throngletElement.textContent = '🐕';
             const currentId = nextThrongletId++;
             throngletElement.dataset.id = currentId;
             throngletElement.style.top = `${yPercent}%`;
             throngletElement.style.left = `${xPercent}%`;
+            throngletElement.dataset.bornTime = Date.now();
+            gameElements.appendChild(throngletElement);
             const newThronglet = {
                 id: currentId,
                 element: throngletElement,
+                hunger: 20, // Start less hungry
+                cleanliness: 15, // Start cleaner
+                happiness: 75, // Start happier
                 lastInteraction: Date.now(),
+                lastDuplication: 0, // Track last duplication time
                 isDead: false,
+                memory: [],
+                feedbackElement: null
             };
             thronglets.push(newThronglet);
             const feedbackElement = document.createElement('span');
             feedbackElement.classList.add('emoji', 'feedback');
             feedbackElement.style.top = throngletElement.style.top;
             feedbackElement.style.left = throngletElement.style.left;
+            gameElements.appendChild(feedbackElement);
             newThronglet.feedbackElement = feedbackElement;
+            logToConsole(`Thronglet #${newThronglet.id} gestation complete.`, "event");
+            updateUI();
+            setTimeout(() => { if (!newThronglet.isDead) wander(newThronglet); }, 50);
         }
         function feedThronglet(thronglet) {
              if (!gameActive || thronglet.isDead) return;
+             thronglet.hunger = Math.max(0, thronglet.hunger - 50); // More filling
+             thronglet.happiness = Math.min(100, thronglet.happiness + 10); // Eating is ok
              thronglet.lastInteraction = Date.now();
+             showFeedback(thronglet, '😋'); // Yum emoji
+             playSound('feed');
+             // logToConsole(`Fed Thronglet #${thronglet.id}. H:${thronglet.hunger.toFixed(0)}`);
+             thronglet.memory.push('Fed');
         }
          function cleanThronglet(thronglet) {
              if (!gameActive || thronglet.isDead) return;
+             thronglet.cleanliness = Math.max(0, thronglet.cleanliness - 60); // More cleaning
+             thronglet.happiness = Math.min(100, thronglet.happiness + 5); // Tolerates cleaning
              thronglet.lastInteraction = Date.now();
+             showFeedback(thronglet, '✨'); // Sparkles
+             playSound('clean');
+             // logToConsole(`Cleaned Thronglet #${thronglet.id}. C:${thronglet.cleanliness.toFixed(0)}`);
              thronglet.memory.push('Cleaned');
         }
         function showFeedback(thronglet, emoji) {
             if (!gameActive || !thronglet.feedbackElement || thronglet.isDead) return;
             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');
+            playSound('feedback'); // Play feedback sound
+            clearTimeout(thronglet.feedbackElement.timeout);
             thronglet.feedbackElement.timeout = setTimeout(() => {
+                if (thronglet.feedbackElement) {
                     thronglet.feedbackElement.classList.remove('active');
                 }
+            }, 800);
         }
         function killThronglet(thronglet, reason = "the void") {
             thronglet.isDead = true;
             thronglet.element.classList.add('dead');
+            thronglet.element.textContent = '💀';
             if (thronglet.feedbackElement) {
                 thronglet.feedbackElement.remove();
+                thronglet.feedbackElement = null;
             }
             bloodSplatter.style.top = thronglet.element.style.top;
             bloodSplatter.style.left = thronglet.element.style.left;
             bloodSplatter.classList.add('splatter');
+            setTimeout(() => { bloodSplatter.classList.remove('splatter'); }, 1200);
             deathCount++;
+            updateUI();
+            logToConsole(`Thronglet #${thronglet.id} experienced ${reason}.`, "error");
+            playSound('death');
+            thronglet.memory.push(`Died (${reason})`);
             if (deathCount === 1) {
                 showInfoPanel("The first Thronglet to experience the void...");
                 triggerGlitch(500);
+                logToConsole(`Learned individuals are wholly disposable.`, "system");
             } else if (deathCount > 2 && deathCount % 3 === 0) {
+                 logToConsole(`They'll remember your carelessness...`, "system");
+                 showInfoPanel("They remember...");
                  triggerGlitch(500);
             } else if (deathCount > 4) {
+                 triggerGlitch(200);
             }
+            if (deathCount >= 7 && gameActive) { // Increased threshold for final phase
                  triggerFinalPhase();
             } else {
                  setTimeout(() => {
                     if (thronglet.element) {
+                        thronglet.element.style.opacity = 0;
+                        setTimeout(() => { if(thronglet.element) thronglet.element.remove(); }, 500);
                     }
+                 }, 4000); // Skull remains for 4 seconds
             }
         }
         function wander(thronglet) {
              if (!gameActive || thronglet.isDead) return;
+             const moveDist = 1.8; // Max movement percentage
              const currentX = parseFloat(thronglet.element.style.left);
              const currentY = parseFloat(thronglet.element.style.top);
+             const newX = Math.max(5, Math.min(95, currentX + (Math.random() - 0.5) * moveDist * 2));
              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}%`;
              if (thronglet.feedbackElement) {
                  thronglet.feedbackElement.style.left = `${newX}%`;
                  thronglet.feedbackElement.style.top = `${newY}%`;
              }
         }
         function updateThronglets() {
             if (!gameActive) return;
             const now = Date.now();
+            const livingThronglets = thronglets.filter(t => !t.isDead);
+            livingThronglets.forEach(thronglet => {
                 const timeSinceLast = now - thronglet.lastInteraction;
+                const baseNeedRate = 0.12; // Slightly faster decay
+                const neglectMultiplier = 1 + Math.min(6, timeSinceLast / 15000); // Faster neglect penalty
+                thronglet.hunger = Math.min(100, thronglet.hunger + baseNeedRate * neglectMultiplier * 1.1);
+                thronglet.cleanliness = Math.min(100, thronglet.cleanliness + baseNeedRate * neglectMultiplier * 0.9);
+                thronglet.happiness = Math.max(0, thronglet.happiness - baseNeedRate * neglectMultiplier * 1.2);
                 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; }
+                // --- Duplication Logic ---
+                const canDuplicate = thronglet.happiness > 95 &&
+                                     thronglet.hunger < 5 &&
+                                     thronglet.cleanliness < 5 &&
+                                     timeSinceLast < 10000 && // Must have recent interaction
+                                     (now - thronglet.lastDuplication > 30000); // 30 sec cooldown per thronglet
+                if (canDuplicate && Math.random() < 0.01) { // Increased chance slightly
+                     logToConsole(`Thronglet #${thronglet.id} is undergoing mitosis!`, "event");
                      showFeedback(thronglet, '💞');
                      showInfoPanel("Oh, Look!");
+                     playSound('duplicate');
+                     thronglet.lastDuplication = now; // Set cooldown timer
+                     thronglet.lastInteraction = now; // Reset interaction timer to prevent immediate chain reactions
                      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) * 15)), // Spawn slightly further
+                                        Math.max(5, Math.min(95, parentY + (Math.random() - 0.5) * 15)));
+                     }, 800);
                  }
+                if (Math.random() < 0.7) { wander(thronglet); }
             });
+            // Update UI counters periodically too, in case no thronglet was created/killed
+             if (Math.random() < 0.1) updateUI();
         }
          function triggerFinalPhase() {
+            if (!gameActive) return;
+            gameActive = false;
+            clearInterval(gameInterval);
+            clearInterval(timeInterval);
+            logToConsole("...", "system");
+            logToConsole("SYSTEM: Anomaly detected. High termination rate.", "error");
             showInfoPanel("Thronglets remember...");
             triggerGlitch(1500);
              setTimeout(() => {
+                 logToConsole("SYSTEM: Analyzing interaction patterns... Neglect detected.", "system");
                  showInfoPanel("Thronglets adapt...");
                  triggerGlitch(1000);
              }, 2000);
+            setTimeout(() => { logToConsole("> Did you...", "info"); triggerGlitch(500); }, 4000);
             setTimeout(() => {
+                logToConsole("> do this??_", "info");
+                ominousElements.classList.add('visible');
+                triggerGlitch(1500);
+            }, 5000);
             setTimeout(() => {
+                logToConsole("> we understand,,", "info");
+                showInfoPanel("Thronglets don't like to be ignored.");
+                triggerGlitch(800);
+            }, 7000);
              setTimeout(() => {
+                 logToConsole("> we know what we must do 🤔", "info");
                  triggerGlitch(2500);
+                 playSound('death'); // Play death sound again, lower pitch?
                  thronglets.forEach(t => {
                      if (!t.isDead && t.element) {
+                         t.element.textContent = '😈';
+                         t.element.style.filter = 'brightness(1.8) saturate(3) hue-rotate(330deg)';
                      }
                  });
              }, 8500);
+             setTimeout(showFinalScreen, 11000);
         }
         function showFinalScreen() {
              gameContainer.style.opacity = 0;
+             uiPanel.style.opacity = 0;
              scanlineOverlay.style.opacity = 0;
              glitchOverlay.style.opacity = 0;
+             glitchOverlay.classList.remove('active');
              gameElements.style.opacity = 0;
+             setTimeout(() => { fullBlack.classList.add('visible'); }, 1000);
+             setTimeout(() => { netflixGamesLogo.classList.add('visible'); }, 2500);
              setTimeout(() => {
+                 netflixGamesLogo.style.opacity = 0;
+                 fullBlack.classList.remove('visible');
+                 finalScreen.classList.add('visible');
+             }, 4500);
         }
         // --- Event Handlers ---
         egg.addEventListener('click', () => {
+            if (!gameActive || egg.classList.contains('hatching') || !document.contains(egg)) return;
+            initAudio(); // Ensure audio context is ready or trying to resume
             egg.classList.add('hatching');
+            logToConsole("Egg incubation sequence initiated.", "event");
+            playSound('hatch');
+            triggerGlitch(200);
             setTimeout(() => {
+                if(document.contains(egg)) egg.remove();
+                createThronglet(50, 50);
+            }, 1100); // Slightly longer hatch time
         });
+        feedButton.addEventListener('click', () => {
              if (!gameActive) return;
+             initAudio(); // Ensure audio
+             const livingThronglets = thronglets.filter(t => !t.isDead);
+             if (livingThronglets.length > 0) {
+                 // Target the hungriest one
+                 const target = livingThronglets.reduce((p, c) => (p.hunger > c.hunger) ? p : c);
+                 feedThronglet(target);
              } else {
+                 logToConsole("No living Thronglets to feed!", "error");
+                 playSound('error');
              }
         });
+        cleanButton.addEventListener('click', () => {
             if (!gameActive) return;
+             initAudio(); // Ensure audio
+             const livingThronglets = thronglets.filter(t => !t.isDead);
+             if (livingThronglets.length > 0) {
+                  // Target the dirtiest one
+                 const target = livingThronglets.reduce((p, c) => (p.cleanliness > c.cleanliness) ? p : c);
+                 cleanThronglet(target);
              } else {
+                 logToConsole("No living Thronglets to clean!", "error");
+                 playSound('error');
              }
         });
         // --- Initial Setup ---
         function initGame() {
             finalScreen.style.opacity = 0;
             fullBlack.style.opacity = 0;
             netflixGamesLogo.style.opacity = 0;
+            ominousElements.style.opacity = 0;
             gameActive = true;
+            gameStartTime = Date.now();
+            logToConsole("Thronglet Environment Initialized.", "system");
+            logToConsole("Tap the pulsating egg to begin gestation.", "info");
+            updateUI(); // Initial UI state
+            gameInterval = setInterval(updateThronglets, 500); // Main game logic loop
+            timeInterval = setInterval(updateTimeDisplay, 1000); // Time update loop
+            // Try initializing audio context early, but it might need interaction
+            initAudio();
         }
+        // Start the game automatically
         initGame();
     </script>