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")
 
@@ -18,23 +14,107 @@ CATEGORIES = [
     "complex research query"
 ]
 
+# --- 1. EMBEDDED DATA (Prevents import errors) ---
+
+MODELS = {
+    "Mistral Large 3": {"energy_wh": 1.98, "water_ml": 3.56, "co2_g": 0.95},
+    "Mistral Medium 3": {"energy_wh": 6.76, "water_ml": 12.17, "co2_g": 3.24},
+    "Claude Sonnet 4.6": {"energy_wh": 19.32, "water_ml": 34.78, "co2_g": 9.27},
+    "Gemini 3 Pro": {"energy_wh": 72.45, "water_ml": 130.41, "co2_g": 34.78},
+    "Gemini 3.1 Pro": {"energy_wh": 77.28, "water_ml": 139.10, "co2_g": 37.09},
+    "Claude Opus 4.6": {"energy_wh": 96.60, "water_ml": 173.88, "co2_g": 46.37},
+    "GPT-5.2": {"energy_wh": 144.90, "water_ml": 260.82, "co2_g": 69.55},
+    "GPT-5.4": {"energy_wh": 169.05, "water_ml": 304.29, "co2_g": 81.14}
+}
+
+CATEGORY_MULTIPLIERS = {
+    "simple factual question": 0.05,        
+    "mathematical calculation": 0.10,       
+    "creative content generation": 0.80,    
+    "complex research query": 1.50          
+}
+
+DIALOGUES = {
+    "energetic": {  
+        "simple factual question": "You used a supercomputer for a simple fact? I'm full right now, but that's just lazy. Open a book.",
+        "mathematical calculation": "A basic calculator could do this with zero footprint. But sure, burn my energy for basic math.",
+        "creative content generation": "Generating artificial creativity... I'll allow it, but watch my water levels drop. Your poetry is expensive.",
+        "complex research query": "A legitimate research query! Finally, a worthy use of my massive architecture. Drain away!"
+    },
+    "tired": {  
+        "simple factual question": "Look at me. I'm sweating. All because you couldn't be bothered to use a standard search engine.",
+        "mathematical calculation": "Did you skip basic math class? I am literally evaporating to do arithmetic for you.",
+        "creative content generation": "Your 'creativity' is draining my lifeblood. Make it quick, I don't have much cooling left.",
+        "complex research query": "I respect the complexity, but this is taking a severe toll on my cooling systems. I hope this research saves the world."
+    },
+    "raspy": {  
+        "simple factual question": "*Cough* Read an encyclopedia... I'm dying for your trivia...",
+        "mathematical calculation": "Use an abacus... you are boiling my last drops for numbers...",
+        "creative content generation": "My final breath... wasted on generating a fictional story... how poetic... and cruel.",
+        "complex research query": "Critical system failure imminent... I am giving my life for your research... make it count."
+    }
+}
+
+ALTERNATIVES = {
+    "simple factual question": [
+        {"text": "Search Engine (Google)", "url": "https://www.google.com"},
+        {"text": "Wikipedia Encyclopedia", "url": "https://www.wikipedia.org"},
+        {"text": "Ask a Human Expert (Quora)", "url": "https://www.quora.com"}
+    ],
+    "mathematical calculation": [
+        {"text": "Wolfram Alpha Engine", "url": "https://www.wolframalpha.com"},
+        {"text": "Geogebra Calculator", "url": "https://www.geogebra.org"},
+        {"text": "Desmos Graphing", "url": "https://www.desmos.com"}
+    ],
+    "creative content generation": [
+        {"text": "Writing Prompts (Reddit)", "url": "https://www.reddit.com/r/WritingPrompts/"},
+        {"text": "Thesaurus/Dictionary", "url": "https://www.thesaurus.com"},
+        {"text": "Project Gutenberg Books", "url": "https://www.gutenberg.org"}
+    ],
+    "complex research query": [] 
+}
+
+# --- 2. GAME LOGIC ---
+
+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))
+    
+    water_ml = model_cost["water_ml"] * cat_mult * conf_mult * len_factor
+    energy_wh = model_cost["energy_wh"] * cat_mult * conf_mult * len_factor
+    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)
+    }
+
+def get_dialogue(water_level, category):
+    state = "energetic" if water_level > 7.0 else ("tired" if water_level >= 3.0 else "raspy")
+    return DIALOGUES[state].get(category, "I have no words left for this.")
+
 def generate_audio(text):
     tts = gTTS(text, lang='en')
     filepath = "temp_drip_voice.mp3"
     tts.save(filepath)
     return filepath
 
+# --- 3. UI GENERATORS ---
+
 def get_relatable_translations(impact):
-    """Converts abstract numbers into physical examples."""
     bottles = impact['water_ml'] / 500.0
     w_ex = f"{bottles:.1f} water bottles" if bottles >= 0.1 else "A few sips"
-    
     bulb_hours = impact['energy_wh'] / 10.0
     e_ex = f"{bulb_hours:.1f} hours of 1 LED bulb" if bulb_hours >= 0.1 else f"{impact['energy_wh']*12:.1f} mins of 1 LED bulb"
-    
     charges = impact['co2_g'] / 5.0
     c_ex = f"{charges:.1f} phone charges" if charges >= 0.1 else "Negligible emissions"
-    
     return w_ex, e_ex, c_ex
 
 def get_stats_html(water, energy, co2, points):
@@ -44,9 +124,7 @@ def get_stats_html(water, energy, co2, points):
         <div class="stat-card water-card">
             <div class="stat-label">WATER TANK (10L MAX)</div>
             <div class="stat-value">{water:.2f}L</div>
-            <div class="progress-bar-bg">
-                <div class="progress-bar-fill" style="width: {water_percent}%;"></div>
-            </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>
@@ -68,26 +146,22 @@ def get_drip_visuals(water_level):
         g_start, g_end = "#7dd3fc", "#0369a1"
         mouth_d = "M43 112 Q60 122 77 112"
         cracks_op, sweat_op, tear_op = "0", "0", "0"
-        mood, mood_color = "Hydrated and coping", "rgb(34, 211, 238)"
-        anim = "bounce 2s infinite ease-in-out"
+        mood, mood_color, anim = "Hydrated and coping", "rgb(34, 211, 238)", "bounce 2s infinite ease-in-out"
     elif 3.0 <= water_level <= 7.0:
         g_start, g_end = "#38bdf8", "#0284c7"
         mouth_d = "M43 112 Q60 110 77 112"
         cracks_op, sweat_op, tear_op = "0", "1", "0"
-        mood, mood_color = "Shrinking & Sweaty", "#0ea5e9"
-        anim = "float 4s infinite ease-in-out"
+        mood, mood_color, anim = "Shrinking & Sweaty", "#0ea5e9", "float 4s infinite ease-in-out"
     elif water_level > 0:
         g_start, g_end = "#fca5a5", "#b91c1c"
         mouth_d = "M43 116 Q60 102 77 116"
         cracks_op, sweat_op, tear_op = "1", "0", "1"
-        mood, mood_color = "Overheating & Raspy", "#ef4444"
-        anim = "shake 0.5s infinite"
+        mood, mood_color, anim = "Overheating & Raspy", "#ef4444", "shake 0.5s infinite"
     else:
         g_start, g_end = "#94a3b8", "#334155"
         mouth_d = "M40 112 Q45 105 50 112 T60 112 T70 112 T80 112"
         cracks_op, sweat_op, tear_op = "0", "0", "0"
-        mood, mood_color = "Evaporated!", "#94a3b8"
-        anim = "floatUp 3s forwards"
+        mood, mood_color, anim = "Evaporated!", "#94a3b8", "floatUp 3s forwards"
 
     return f"""
     <div class="drip-panel" style="animation: {anim}; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;">
@@ -95,18 +169,14 @@ def get_drip_visuals(water_level):
       <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>
+            <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>
-        <circle id="pl" cx="45" cy="91" r="6" fill="#0f172a"></circle>
-        <circle id="pr" cx="77" cy="91" r="6" fill="#0f172a"></circle>
-        <circle cx="47" cy="88" r="2.5" fill="white"></circle>
-        <circle cx="79" cy="88" r="2.5" fill="white"></circle>
+        <circle cx="44" cy="90" r="10" fill="white"></circle><circle cx="76" cy="90" r="10" fill="white"></circle>
+        <circle id="pl" cx="45" cy="91" r="6" fill="#0f172a"></circle><circle id="pr" cx="77" cy="91" r="6" fill="#0f172a"></circle>
+        <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>
@@ -153,10 +223,7 @@ def format_alt_button(text, impact):
 
 def generate_victory_dashboard(state):
     try:
-        total_w_saved = 0.0
-        total_e_saved = 0.0
-        total_c_saved = 0.0
-        
+        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 (Justified Use)')
@@ -167,7 +234,6 @@ def generate_victory_dashboard(state):
                 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
@@ -176,20 +242,11 @@ def generate_victory_dashboard(state):
             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; 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>
+                <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"""
@@ -197,10 +254,7 @@ def generate_victory_dashboard(state):
             {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 and prevented Drip from evaporating!
-                </p>
-                
+                <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>
@@ -215,17 +269,11 @@ def generate_victory_dashboard(state):
                         <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>
-                <p style="opacity: 0.9; margin-bottom: 20px; text-align: center;">A detailed breakdown of your session's environmental impact and the greener choices you made.</p>
-                
                 <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 (Wasted)</th>
-                            <th style="padding: 15px; color: #34d399;">Best Alternative</th>
-                            <th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
+                            <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>
@@ -236,6 +284,8 @@ def generate_victory_dashboard(state):
     except Exception as e:
         return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
 
+# --- 4. EVENT HANDLERS ---
+
 def process_query(user_input, selected_model, state):
     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()]
@@ -260,20 +310,24 @@ def process_query(user_input, selected_model, state):
         dialogue = f"A legitimate research query! Finally, a worthy use of my massive architecture. Drain away!"
     else:
         show_alts = True
-        raw_alts = ALTERNATIVES.get(category, [{"text": "Google", "url": "https://google.com"}])
-        state["current_best_alt"] = raw_alts[0] 
+        raw_alts = ALTERNATIVES.get(category, ALTERNATIVES["simple factual question"])
         best_alt_name = raw_alts[0]["text"]
-        random.shuffle(raw_alts)
-        state["current_shuffled_alts"] = raw_alts
-        alt_choices = [format_alt_button(a["text"], impact) for a in raw_alts]
+        
+        # Safely shuffle without modifying original dict
+        shuffled_alts = list(raw_alts)
+        random.shuffle(shuffled_alts)
+        state["current_shuffled_alts"] = shuffled_alts
+        state["current_best_alt"] = raw_alts[0]
+        
+        # Ensure we always have exactly 3 choices to update the buttons
+        alt_choices = [format_alt_button(a["text"], impact) for a in shuffled_alts]
+        while len(alt_choices) < 3: alt_choices.append("")
+        
         dialogue = get_dialogue(state["water"], category)
 
     state["history"].append({
-        "query": user_input,
-        "water_ml": impact["water_ml"],
-        "energy_wh": impact["energy_wh"],
-        "co2_g": impact["co2_g"],
-        "alt_name": best_alt_name
+        "query": user_input, "water_ml": impact["water_ml"], "energy_wh": impact["energy_wh"],
+        "co2_g": impact["co2_g"], "alt_name": best_alt_name
     })
 
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
@@ -284,11 +338,11 @@ def process_query(user_input, selected_model, state):
     
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        victory_html = generate_victory_dashboard(state)
         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=victory_html))
+                gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_victory_dashboard(state)))
 
+    # Pass exact button updates, and toggle the alternatives group visibility
     return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value=feedback_text), gr.update(visible=show_alts), 
             gr.update(value=alt_choices[0]), gr.update(value=alt_choices[1]), gr.update(value=alt_choices[2]), gr.update(value=""), gr.update(value=""),
             gr.update(visible=True), gr.update(visible=False), gr.update())
@@ -297,24 +351,29 @@ def select_alternative(choice_text, state):
     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()
         
-    clean_choice = choice_text.split("\n")[0][2:].strip() 
+    # Safely extract tool name (Handles edge cases with emojis and spaces)
+    first_line = choice_text.split("\n")[0]
+    clean_choice = first_line.split(" ", 1)[1].strip() if " " in first_line else first_line
+    
     selected_dict = next((item for item in state["current_shuffled_alts"] if item["text"] == clean_choice), None)
+    url = selected_dict['url'] if selected_dict else "#"
     
     if clean_choice == state["current_best_alt"]["text"]:
         state["points"] += 10
-        msg = f"✅ **Excellent!** +10 Points.\n\n<a href='{selected_dict['url']}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#10b981; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
+        msg = f"✅ **Excellent!** +10 Points.\n\n<a href='{url}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#10b981; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
     else:
-        msg = f"⚠️ **Okay choice.** Better than an LLM, but there was a slightly more optimal tool.\n\n<a href='{selected_dict['url']}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#38bdf8; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
+        msg = f"⚠️ **Okay choice.** Better than an LLM, but there was a slightly more optimal tool.\n\n<a href='{url}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#38bdf8; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
     
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
     if state["points"] >= 500:
         state["game_over"] = True
-        victory_html = generate_victory_dashboard(state)
-        return state, stats_ui, gr.update(), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(value=victory_html)
+        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))
 
     return state, stats_ui, gr.update(value=msg), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update()
 
+# --- 5. UI & STYLING ---
+
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');
 body, .gradio-container { background-color: #0B1120 !important; font-family: 'Outfit', sans-serif !important; color: #e2e8f0 !important; }
@@ -339,6 +398,7 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 @keyframes floatUp { to { transform: translateY(-30px); opacity: 0; } }
 
 .drip-pod { background: rgba(15, 23, 42, 0.6); border-radius: 24px; border: 1px solid rgba(56, 189, 248, 0.2); padding: 30px 20px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
+.hidden-audio { display: none !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }
 .feedback-box { background: rgba(56, 189, 248, 0.1); border-left: 4px solid #38bdf8; padding: 15px; border-radius: 8px; font-size: 1.05em; color: #e2e8f0; width: 100%; text-align: left; line-height: 1.4; box-sizing: border-box;}
 
 .input-row { align-items: stretch !important; margin: 10px 0; }
@@ -365,7 +425,6 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 .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; }
 
-/* Pure CSS Confetti Physics */
 .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; }
@@ -388,8 +447,8 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["drip-pod"]):
                 drip_html = gr.HTML(get_drip_visuals(10.0))
-                # Set visible=False on the Audio component so it stays completely hidden while still autoplaying!
-                drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, visible=False)
+                # The audio component is visible=True but hidden via CSS so browser autoplay isn't blocked!
+                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>")
             
             with gr.Column(scale=2):
@@ -410,6 +469,7 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
     with gr.Column(visible=False) as victory_ui:
         victory_display = gr.HTML()
 
+    # The 15 inputs and outputs are securely wired here
     submit_btn.click(
         fn=process_query,
         inputs=[user_input, model_selector, game_state],