Add updated files

app.py

@@ -190,7 +190,6 @@ def generate_victory_dashboard(state):
             </tr>
             """
             
-        # Dynamically generate 50 confetti divs
         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"""
@@ -286,7 +285,7 @@ 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(), 
+        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))
 
@@ -312,11 +311,10 @@ def select_alternative(choice_text, state):
     if state["points"] >= 500:
         state["game_over"] = True
         victory_html = generate_victory_dashboard(state)
-        return state, stats_ui, gr.update(), gr.update(), 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=victory_html)
 
     return state, stats_ui, gr.update(value=msg), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update()
 
-
 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; }
@@ -341,7 +339,6 @@ 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); }
-.drip-audio { background: transparent !important; border: none !important; box-shadow: none !important; width: 100%; max-width: 300px; filter: invert(1) hue-rotate(180deg) brightness(1.5); margin-bottom: 15px;}
 .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; }
@@ -391,7 +388,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))
-                drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["drip-audio"])
+                # 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)
                 drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
             
             with gr.Column(scale=2):
@@ -425,6 +423,5 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
             outputs=[game_state, stats_html, alt_feedback, alternatives_group, main_game_ui, victory_ui, victory_display]
         )
 
-# Launch with CSS parameter mapping directly to demo launch block
 if __name__ == "__main__":
     demo.launch(css=custom_css)