Add updated files

app.py

@@ -4,10 +4,6 @@ import random
 from gtts import gTTS
 import os
 
-from game_data import calculate_impact, MODELS
-from dialogues import get_dialogue
-from alternatives import ALTERNATIVES
-
 print("Loading classification model...", flush=True)
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
@@ -85,7 +81,6 @@ ALTERNATIVES = {
 def calculate_impact(category, confidence_score, query_text, model_name):
     model_cost = MODELS.get(model_name, MODELS["Mistral Large 3"])
     cat_mult = CATEGORY_MULTIPLIERS.get(category, 0.05)
-    
     conf_mult = 1.0 if confidence_score > 0.8 else (1.2 if confidence_score > 0.5 else 1.5)
     word_count = len(query_text.split())
     len_factor = max(0.5, 1.0 + ((word_count - 15) * 0.015))
@@ -95,15 +90,11 @@ def calculate_impact(category, confidence_score, query_text, model_name):
     co2_g = model_cost["co2_g"] * cat_mult * conf_mult * len_factor
     
     return {
-        "water_l": water_ml / 1000.0, 
-        "energy_kwh": energy_wh / 1000.0, 
-        "water_ml": round(water_ml, 1), 
-        "energy_wh": round(energy_wh, 2),
-        "co2_g": round(co2_g, 2)
+        "water_l": water_ml / 1000.0, "energy_kwh": energy_wh / 1000.0, 
+        "water_ml": round(water_ml, 1), "energy_wh": round(energy_wh, 2), "co2_g": round(co2_g, 2)
     }
 
 def get_dialogue(water_level, category):
-    # Adjusted dialogue thresholds for 1L max
     state = "energetic" if water_level > 0.7 else ("tired" if water_level >= 0.3 else "raspy")
     return DIALOGUES[state].get(category, "I have no words left for this.")
 
@@ -113,7 +104,7 @@ def generate_audio(text):
     tts.save(filepath)
     return filepath
 
-# --- 2. UI GENERATORS ---
+# --- 2. UI GENERATORS & DASHBOARDS ---
 
 def get_relatable_translations(impact):
     bottles = impact['water_ml'] / 500.0
@@ -125,32 +116,17 @@ def get_relatable_translations(impact):
     return w_ex, e_ex, c_ex
 
 def get_stats_html(water, energy, co2, points):
-    # Updated progress bar logic for a 1.0L maximum
     water_percent = max(0, min(100, (water / 1.0) * 100))
     return f"""
     <div class="stats-container">
-        <div class="stat-card water-card">
-            <div class="stat-label">WATER TANK (1L MAX)</div>
-            <div class="stat-value">{water:.3f}L</div>
-            <div class="progress-bar-bg"><div class="progress-bar-fill" style="width: {water_percent}%;"></div></div>
-        </div>
-        <div class="stat-card energy-card">
-            <div class="stat-label">ENERGY WASTED</div>
-            <div class="stat-value">{energy:.4f} <span style="font-size: 0.5em;">kWh</span></div>
-        </div>
-        <div class="stat-card co2-card">
-            <div class="stat-label">CARBON (CO₂e)</div>
-            <div class="stat-value">{co2:.2f}g</div>
-        </div>
-        <div class="stat-card points-card">
-            <div class="stat-label">SCORE</div>
-            <div class="stat-value">{points}</div>
-        </div>
+        <div class="stat-card water-card"><div class="stat-label">WATER TANK (1L MAX)</div><div class="stat-value">{water:.3f}L</div><div class="progress-bar-bg"><div class="progress-bar-fill" style="width: {water_percent}%;"></div></div></div>
+        <div class="stat-card energy-card"><div class="stat-label">ENERGY WASTED</div><div class="stat-value">{energy:.4f} <span style="font-size: 0.5em;">kWh</span></div></div>
+        <div class="stat-card co2-card"><div class="stat-label">CARBON (CO₂e)</div><div class="stat-value">{co2:.2f}g</div></div>
+        <div class="stat-card points-card"><div class="stat-label">SCORE</div><div class="stat-value">{points}</div></div>
     </div>
     """
 
 def get_drip_visuals(water_level):
-    # Adjusted visual state thresholds for 1.0L maximum
     if water_level > 0.7:
         g_start, g_end = "#7dd3fc", "#0369a1"
         mouth_d = "M43 112 Q60 122 77 112"
@@ -176,11 +152,7 @@ def get_drip_visuals(water_level):
     <div class="drip-panel" style="animation: {anim}; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;">
       <div class="drip-lbl" style="font-weight: 800; color: #94a3b8; letter-spacing: 3px; font-size: 14px; margin-bottom: 5px;">DRIP</div>
       <svg id="drip-svg" viewBox="0 0 120 148" style="width: 140px; height: 160px; overflow: visible;" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <radialGradient id="dg" cx="38%" cy="32%">
-            <stop id="dg1" offset="0%" stop-color="{g_start}"></stop><stop id="dg2" offset="100%" stop-color="{g_end}"></stop>
-          </radialGradient>
-        </defs>
+        <defs><radialGradient id="dg" cx="38%" cy="32%"><stop id="dg1" offset="0%" stop-color="{g_start}"></stop><stop id="dg2" offset="100%" stop-color="{g_end}"></stop></radialGradient></defs>
         <path id="dbody" d="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z" fill="url(#dg)" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>
         <ellipse cx="42" cy="70" rx="9" ry="13" fill="rgba(255,255,255,0.22)" transform="rotate(-18,42,70)"></ellipse>
         <circle cx="44" cy="90" r="10" fill="white"></circle><circle cx="76" cy="90" r="10" fill="white"></circle>
@@ -188,17 +160,13 @@ def get_drip_visuals(water_level):
         <circle cx="47" cy="88" r="2.5" fill="white"></circle><circle cx="79" cy="88" r="2.5" fill="white"></circle>
         <path id="dm" d="{mouth_d}" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none"></path>
         <g id="cracks" opacity="{cracks_op}" style="transition: opacity 0.5s;">
-          <path d="M80 46 L86 58 L79 65 L85 77" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
-          <path d="M37 82 L31 93 L39 99" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
+          <path d="M80 46 L86 58 L79 65 L85 77" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path><path d="M37 82 L31 93 L39 99" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
         </g>
         <path id="sweat" d="M108 76 C110 70,116 70,116 78 C116 84,110 88,108 82Z" fill="#7dd3fc" opacity="{sweat_op}" style="transition: opacity 0.5s;"></path>
         <path id="tear" d="M38 104 C37 108,33 108,33 112 C33 115,36 117,38 114 C40 117,43 115,43 112 C43 108,39 108,38 104Z" fill="#93c5fd" opacity="{tear_op}" style="transition: opacity 0.5s;"></path>
       </svg>
       <div class="drip-mood" id="drip-mood" style="color: {mood_color}; font-weight: 500; font-size: 1.1rem; margin-top: 15px;">{mood}</div>
-      <div style="text-align:center; margin-top:10px;">
-        <div style="font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1px;">Water Left</div>
-        <div style="font-size:26px; font-weight:700; color:{mood_color};" id="d-water">{water_level:.3f}L</div>
-      </div>
+      <div style="text-align:center; margin-top:10px;"><div style="font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1px;">Water Left</div><div style="font-size:26px; font-weight:700; color:{mood_color};" id="d-water">{water_level:.3f}L</div></div>
     </div>
     """
 
@@ -232,131 +200,108 @@ def format_alt_button(text, impact):
     return f"{icon} {text}\n\n🏆 Score: +10 Pts\n💧 Save: {impact['water_ml']} mL\n⚡ Save: {impact['energy_wh']} Wh\n☁️ Save: {impact['co2_g']} g"
 
 def generate_victory_dashboard(state):
-    try:
-        total_w_saved, total_e_saved, total_c_saved = 0.0, 0.0, 0.0
-        rows = ""
-        for item in state.get("history", []):
-            alt_name = item.get('alt_name', 'None')
-            saved_w = item.get('water_ml', 0.0)
-            saved_e = max(0.0, item.get('energy_wh', 0.0) - 0.001)
-            saved_c = max(0.0, item.get('co2_g', 0.0) - 0.01)
-            
-            total_w_saved += saved_w
-            total_e_saved += saved_e
-            total_c_saved += saved_c
-            alt_display = f"<span style='color: #34d399; font-weight: bold;'>{alt_name}</span>"
-
-            rows += f"""
-            <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
-                <td style="padding: 15px; font-style: italic;">"{item.get('query', '')}"</td>
-                <td style="padding: 15px; color: #fca5a5; line-height: 1.5;">💧 {item.get('water_ml', 0):.1f} mL<br>⚡ {item.get('energy_wh', 0):.2f} Wh<br>☁️ {item.get('co2_g', 0):.2f} g</td>
-                <td style="padding: 15px;">{alt_display}</td>
-                <td style="padding: 15px; color: #60a5fa; font-weight: bold; line-height: 1.5;">💧 {saved_w:.1f} mL<br>⚡ {saved_e:.2f} Wh<br>☁️ {saved_c:.2f} g</td>
-            </tr>
-            """
-        confetti_elements = "".join([f'<div class="confetti-piece" style="left: {random.randint(0, 100)}%; background-color: hsl({random.randint(0, 360)}, 100%, 60%); animation-duration: {random.uniform(2.5, 5)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
+    total_w_saved, total_e_saved, total_c_saved = 0.0, 0.0, 0.0
+    rows = ""
+    for item in state.get("history", []):
+        alt_name = item.get('alt_name', 'None')
+        saved_w = item.get('water_ml', 0.0)
+        saved_e = max(0.0, item.get('energy_wh', 0.0) - 0.001)
+        saved_c = max(0.0, item.get('co2_g', 0.0) - 0.01)
+        total_w_saved += saved_w
+        total_e_saved += saved_e
+        total_c_saved += saved_c
         
-        # Updated "Total Wasted" formula from 10.0 to 1.0 to reflect the 1L tank
-        return f"""
-        <div class="victory-wrapper">
-            {confetti_elements}
-            <div class="victory-dashboard">
-                <h1 class="victory-title">🎉 PLANET SAVED! 🎉</h1>
-                <p style="text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px;">Congratulations! You reached {state.get('points', 0)} points!</p>
-                <div class="victory-stats-row">
-                    <div class="v-stat-box" style="border-top: 4px solid #34d399;">
-                        <h4 style="color: #34d399;">Planetary Savings</h4>
-                        <p style="color: #34d399; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 {total_w_saved:.1f} mL Saved</p>
-                        <p style="color: #facc15; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {total_e_saved:.2f} Wh Saved</p>
-                        <p style="color: #a8a29e; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {total_c_saved:.2f} g Saved</p>
-                    </div>
-                    <div class="v-stat-box" style="border-top: 4px solid #fca5a5;">
-                        <h4 style="color: #fca5a5;">Total Wasted</h4>
-                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">💧 {1.0 - state.get('water', 1.0):.3f} L</p>
-                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
-                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
-                    </div>
+        rows += f"""
+        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
+            <td style="padding: 15px; font-style: italic;">"{item.get('query', '')}"</td>
+            <td style="padding: 15px; color: #fca5a5; line-height: 1.5;">💧 {item.get('water_ml', 0):.1f} mL<br>⚡ {item.get('energy_wh', 0):.2f} Wh<br>☁️ {item.get('co2_g', 0):.2f} g</td>
+            <td style="padding: 15px;"><span style='color: #34d399; font-weight: bold;'>{alt_name}</span></td>
+            <td style="padding: 15px; color: #60a5fa; font-weight: bold; line-height: 1.5;">💧 {saved_w:.1f} mL<br>⚡ {saved_e:.2f} Wh<br>☁️ {saved_c:.2f} g</td>
+        </tr>
+        """
+    confetti_elements = "".join([f'<div class="confetti-piece" style="left: {random.randint(0, 100)}%; background-color: hsl({random.randint(0, 360)}, 100%, 60%); animation-duration: {random.uniform(2.5, 5)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
+    
+    return f"""
+    <div class="endgame-wrapper">
+        {confetti_elements}
+        <div class="victory-dashboard">
+            <h1 class="victory-title">🎉 PLANET SAVED! 🎉</h1>
+            <p style="text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px;">Congratulations! You reached {state.get('points', 0)} points!</p>
+            <div class="victory-stats-row">
+                <div class="v-stat-box" style="border-top: 4px solid #34d399;">
+                    <h4 style="color: #34d399;">Planetary Savings</h4>
+                    <p style="color: #34d399; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 {total_w_saved:.1f} mL Saved</p>
+                    <p style="color: #facc15; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {total_e_saved:.2f} Wh Saved</p>
+                    <p style="color: #a8a29e; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {total_c_saved:.2f} g Saved</p>
                 </div>
-                <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em; text-align: center;">📊 AI Usage Audit Log</h3>
-                <div style="max-height: 500px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); padding: 10px;">
-                    <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
-                        <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
-                            <th style="padding: 15px; color: #e2e8f0;">User Query</th><th style="padding: 15px; color: #fca5a5;">LLM Cost</th><th style="padding: 15px; color: #34d399;">Alternative</th><th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
-                        </tr>
-                        {rows}
-                    </table>
+                <div class="v-stat-box" style="border-top: 4px solid #fca5a5;">
+                    <h4 style="color: #fca5a5;">Total Wasted</h4>
+                    <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">💧 {1.0 - state.get('water', 1.0):.3f} L</p>
+                    <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
+                    <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
                 </div>
             </div>
+            <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em; text-align: center;">📊 AI Usage Audit Log</h3>
+            <div style="max-height: 500px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); padding: 10px;">
+                <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
+                    <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
+                        <th style="padding: 15px; color: #e2e8f0;">User Query</th><th style="padding: 15px; color: #fca5a5;">LLM Cost</th><th style="padding: 15px; color: #34d399;">Alternative Selected</th><th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
+                    </tr>
+                    {rows}
+                </table>
+            </div>
         </div>
-        """
-    except Exception as e:
-        return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
+    </div>
+    """
 
 def generate_defeat_dashboard(state):
-    """Generates a dark, Game Over report when Drip evaporates."""
-    try:
-        rows = ""
-        for item in state.get("history", []):
-            rows += f"""
-            <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
-                <td style="padding: 15px; font-style: italic; color: #e2e8f0;">"{item.get('query', '')}"</td>
-                <td style="padding: 15px; color: #fca5a5; font-weight: bold; line-height: 1.5;">
-                    💧 {item.get('water_ml', 0):.1f} mL<br>
-                    ⚡ {item.get('energy_wh', 0):.2f} Wh<br>
-                    ☁️ {item.get('co2_g', 0):.2f} g
-                </td>
-            </tr>
-            """
-            
-        # Dynamically generate rising "ash/steam" particles
-        ash_elements = "".join([f'<div class="ash-piece" style="left: {random.randint(0, 100)}%; animation-duration: {random.uniform(3, 6)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
-        
-        return f"""
-        <div class="victory-wrapper">
-            {ash_elements}
-            <div class="defeat-dashboard">
-                <h1 class="defeat-title">💀 DRIP EVAPORATED! 💀</h1>
-                <p style="text-align: center; font-size: 1.3em; color: #fca5a5; margin-bottom: 30px;">
-                    You ran out of water before reaching 500 points. The planet's resources have been drained!
-                </p>
-                
-                <div class="victory-stats-row">
-                    <div class="v-stat-box" style="border-top: 4px solid #ef4444; background: rgba(239, 68, 68, 0.1);">
-                        <h4 style="color: #ef4444;">Total Resources Wasted</h4>
-                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 1.0 L (Tank Empty)</p>
-                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
-                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
-                    </div>
-                    <div class="v-stat-box" style="border-top: 4px solid #94a3b8;">
-                        <h4 style="color: #94a3b8;">Final Score</h4>
-                        <p style="color: white; font-size: 3.5em; font-weight: bold; margin: 10px 0;">{state.get('points', 0)}</p>
-                    </div>
+    rows = ""
+    for item in state.get("history", []):
+        rows += f"""
+        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
+            <td style="padding: 15px; font-style: italic;">"{item.get('query', '')}"</td>
+            <td style="padding: 15px; color: #fca5a5; line-height: 1.5;">💧 {item.get('water_ml', 0):.1f} mL<br>⚡ {item.get('energy_wh', 0):.2f} Wh<br>☁️ {item.get('co2_g', 0):.2f} g</td>
+        </tr>
+        """
+    ash_elements = "".join([f'<div class="ash-piece" style="left: {random.randint(0, 100)}%; animation-duration: {random.uniform(3, 6)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
+    
+    return f"""
+    <div class="endgame-wrapper">
+        {ash_elements}
+        <div class="defeat-dashboard">
+            <h1 class="defeat-title">💀 DRIP EVAPORATED! 💀</h1>
+            <p style="text-align: center; font-size: 1.3em; color: #fca5a5; margin-bottom: 30px;">You ran out of water before reaching 500 points.</p>
+            <div class="victory-stats-row">
+                <div class="v-stat-box" style="border-top: 4px solid #ef4444; background: rgba(239, 68, 68, 0.1);">
+                    <h4 style="color: #ef4444;">Total Resources Wasted</h4>
+                    <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 1.0 L (Tank Empty)</p>
+                    <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
+                    <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
                 </div>
-
-                <h3 style="margin-top: 40px; color: #fca5a5; font-size: 1.8em; text-align: center;">🔥 Wasted Resources Log</h3>
-                <p style="opacity: 0.9; margin-bottom: 20px; text-align: center; color: #e2e8f0;">See exactly where your massive LLM compute drained Drip's tank.</p>
-                
-                <div style="max-height: 400px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.3); padding: 10px;">
-                    <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
-                        <tr style="background: rgba(239, 68, 68, 0.15); border-bottom: 2px solid #ef4444;">
-                            <th style="padding: 15px; color: #fca5a5;">User Query</th>
-                            <th style="padding: 15px; color: #fca5a5;">Resources Drained</th>
-                        </tr>
-                        {rows}
-                    </table>
+                <div class="v-stat-box" style="border-top: 4px solid #94a3b8;">
+                    <h4 style="color: #94a3b8;">Final Score</h4>
+                    <p style="color: white; font-size: 3.5em; font-weight: bold; margin: 10px 0;">{state.get('points', 0)}</p>
                 </div>
             </div>
+            <h3 style="margin-top: 40px; color: #fca5a5; font-size: 1.8em; text-align: center;">🔥 Wasted Resources Log</h3>
+            <div style="max-height: 400px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.3); padding: 10px;">
+                <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
+                    <tr style="background: rgba(239, 68, 68, 0.15); border-bottom: 2px solid #ef4444;">
+                        <th style="padding: 15px; color: #fca5a5;">User Query</th><th style="padding: 15px; color: #fca5a5;">Resources Drained</th>
+                    </tr>
+                    {rows}
+                </table>
+            </div>
         </div>
-        """
-    except Exception as e:
-        return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
-    
+    </div>
+    """
 
 # --- 3. EVENT HANDLERS ---
 
 def process_query(user_input, selected_model, state):
+    # CRITICAL FIX: If game is already over, return empty gr.updates so we don't accidentally hide the endgame screen
     if state["game_over"] or not user_input.strip():
-        return [state, gr.update()] + [gr.update()]*10 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
+        return [state] + [gr.update()]*14
 
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
@@ -396,27 +341,29 @@ def process_query(user_input, selected_model, state):
     audio_path = generate_audio(dialogue)
     feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected!<br><br><em>\"{dialogue}\"</em></div>"
     
-    # Check for WIN condition
+    # WIN CONDITION
     if state["points"] >= 500:
         state["game_over"] = True
         return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(visible=False), 
                 gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
                 gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_victory_dashboard(state)))
     
-    # Check for LOSS condition
-    elif state["water"] <= 0:
+    # LOSS CONDITION
+    elif state["water"] <= 0.001:  # Using 0.001 to prevent floating point math errors
         state["game_over"] = True
         return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(visible=False), 
                 gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
                 gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_defeat_dashboard(state)))
 
+    # REGULAR GAMEPLAY RETURN
     return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value=feedback_text), gr.update(visible=True), 
             gr.update(value=alt_choices[0], visible=True), gr.update(value=alt_choices[1], visible=True), gr.update(value=alt_choices[2], visible=True), gr.update(value=""), gr.update(value=""),
             gr.update(visible=True), gr.update(visible=False), gr.update())
 
 def select_alternative(choice_text, state):
+    # CRITICAL FIX: Empty gr.updates to prevent UI reset if accidentally clicked after game over
     if state["game_over"] or not state.get("current_best_alt"):
-        return state, gr.update(), gr.update(), gr.update(), gr.update(visible=True), gr.update(visible=False), gr.update()
+        return [state] + [gr.update()]*6
         
     first_line = choice_text.split("\n")[0]
     clean_choice = first_line.split(" ", 1)[1].strip() if " " in first_line else first_line
@@ -432,6 +379,7 @@ def select_alternative(choice_text, state):
     
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
+    # WIN CONDITION FROM ALTERNATIVE CLICK
     if state["points"] >= 500:
         state["game_over"] = True
         return state, stats_ui, gr.update(), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_victory_dashboard(state))
@@ -482,35 +430,26 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 .alt-card:hover { background: linear-gradient(145deg, #064e3b, #065f46) !important; transform: translateY(-8px) !important; box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3) !important; color: white !important; border-color: #34d399 !important;}
 .custom-dropdown { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; border-radius: 12px !important; }
 
-/* Victory Dashboard & Celebration */
-@keyframes pulseGlow { 0% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); } 50% { box-shadow: 0 0 50px rgba(52, 211, 153, 0.8); } 100% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); } }
-.victory-wrapper { position: relative; width: 100%; min-height: 600px; overflow: hidden; border-radius: 24px; padding-top: 10px; }
+/* End Game Dashboards & Animations */
+.endgame-wrapper { position: relative; width: 100%; min-height: 600px; overflow: hidden; border-radius: 24px; padding-top: 10px; }
 .victory-dashboard { background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: 24px; border: 2px solid #34d399; animation: pulseGlow 2s infinite; color: white; position: relative; z-index: 5; margin-top: 20px;}
 .victory-title { text-align: center; color: #34d399; font-size: 3.5em !important; text-shadow: 0 0 20px rgba(52, 211, 153, 0.6); margin-bottom: 5px; }
 .victory-stats-row { display: flex; gap: 20px; margin-top: 30px; }
 .v-stat-box { flex: 1; background: rgba(0,0,0,0.4); padding: 25px; border-radius: 16px; text-align: center; border: 1px solid rgba(52, 211, 153, 0.3); }
 .v-stat-box h4 { color: #94a3b8; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px 0; }
 
+@keyframes pulseGlow { 0% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); } 50% { box-shadow: 0 0 50px rgba(52, 211, 153, 0.8); } 100% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); } }
 .confetti-piece { position: absolute; width: 10px; height: 15px; top: -20px; opacity: 0; animation: fall linear forwards infinite; z-index: 10; border-radius: 2px;}
-@keyframes fall {
-    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
-    100% { transform: translateY(1000px) rotate(720deg); opacity: 1; }
-}
+@keyframes fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(1000px) rotate(720deg); opacity: 1; } }
 
-/* Defeat Dashboard & Animations */
-@keyframes pulseRed { 0% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.8); } 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } }
 .defeat-dashboard { background: linear-gradient(135deg, #2b1010, #450a0a); padding: 40px; border-radius: 24px; border: 2px solid #ef4444; animation: pulseRed 2s infinite; color: white; position: relative; z-index: 5; margin-top: 20px; }
 .defeat-title { text-align: center; color: #ef4444; font-size: 3.5em !important; text-shadow: 0 0 20px rgba(239, 68, 68, 0.8); margin-bottom: 5px; }
+@keyframes pulseRed { 0% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.8); } 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } }
 .ash-piece { position: absolute; width: 8px; height: 8px; background-color: rgba(156, 163, 175, 0.6); border-radius: 50%; opacity: 0; animation: floatAsh linear forwards infinite; z-index: 10; filter: blur(1px); }
-@keyframes floatAsh {
-    0% { transform: translateY(600px) scale(1); opacity: 0; }
-    20% { opacity: 0.8; }
-    100% { transform: translateY(-100px) scale(2); opacity: 0; }
-}
+@keyframes floatAsh { 0% { transform: translateY(600px) scale(1); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-100px) scale(2); opacity: 0; } }
 """
 
 with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
-    # UPDATED to start with 1.0 Liters
     game_state = gr.State({
         "water": 1.0, "energy": 0.0, "co2": 0.0, "points": 0, "queries": 0, 
         "history": [], "game_over": False, "current_best_alt": None, "current_shuffled_alts": []
@@ -519,13 +458,11 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
     gr.Markdown("<h1>🌍 EcoQueryQuest</h1>")
     gr.Markdown("<div class='subtitle'>Select a model, type a query, and watch Drip react. Reach 500 points to win!</div>")
 
-    # UPDATED to start UI with 1.0 Liters
     stats_html = gr.HTML(get_stats_html(1.0, 0.0, 0.0, 0))
 
     with gr.Column(visible=True) as main_game_ui:
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["drip-pod"]):
-                # UPDATED to start Drip visual with 1.0 Liters
                 drip_html = gr.HTML(get_drip_visuals(1.0))
                 drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["hidden-audio"])
                 drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
@@ -548,6 +485,13 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
     with gr.Column(visible=False) as victory_ui:
         victory_display = gr.HTML()
 
+    # Pressing Enter in the Textbox triggers the same function
+    user_input.submit(
+        fn=process_query,
+        inputs=[user_input, model_selector, game_state],
+        outputs=[game_state, stats_html, drip_html, drip_audio, impact_display, drip_feedback, alternatives_group, alt_btn_1, alt_btn_2, alt_btn_3, alt_feedback, user_input, main_game_ui, victory_ui, victory_display]
+    )
+
     submit_btn.click(
         fn=process_query,
         inputs=[user_input, model_selector, game_state],