Add updated files

app.py

@@ -8,76 +8,208 @@ from game_data import calculate_impact, MODELS
 from dialogues import get_dialogue
 from alternatives import ALTERNATIVES
 
+# Added flush=True so we can always see this in the Hugging Face logs
+print("Loading classification model...", flush=True)
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
+CATEGORIES = [
+    "simple factual question",
+    "mathematical calculation",
+    "creative content generation",
+    "complex research query"
+]
+
+def generate_audio(text):
+    tts = gTTS(text, lang='en')
+    filepath = "temp_drip_voice.mp3"
+    tts.save(filepath)
+    return filepath
+
 def get_relatable_translations(impact):
     """Converts abstract numbers into physical examples."""
-    # Water: 1 bottle = 500mL
     bottles = impact['water_ml'] / 500.0
     w_ex = f"{bottles:.1f} water bottles" if bottles >= 0.1 else "A few sips"
     
-    # Energy: 10 LED bulbs (10W each) for 1 hour = 100Wh
-    # Let's use 1 LED bulb for X hours
     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"
     
-    # CO2: 1 phone charge = ~5g
     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):
+    water_percent = max(0, min(100, (water / 10.0) * 100))
+    return f"""
+    <div class="stats-container">
+        <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>
+        <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):
+    if water_level > 7.0:
+        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"
+    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"
+    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"
+    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"
+
+    return f"""
+    <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>
+        <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>
+        <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>
+        </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:.2f}L</div>
+      </div>
+    </div>
+    """
+
 def get_impact_cards(impact, category):
     w_ex, e_ex, c_ex = get_relatable_translations(impact)
     return f"""
     <div class="impact-container">
         <div class="impact-card bad-impact">
             <h3 style="margin: 0 0 10px 0; color: #fca5a5;">🔥 LLM Impact</h3>
-            <p>💧 <strong>{impact['water_ml']} mL</strong> ({w_ex})</p>
-            <p>⚡ <strong>{impact['energy_wh']} Wh</strong> ({e_ex})</p>
-            <p>☁️ <strong>{impact['co2_g']} g</strong> ({c_ex})</p>
+            <p style="margin:4px 0; font-size:1.1em;">💧 <strong>{impact['water_ml']} mL</strong><br><small>({w_ex})</small></p>
+            <p style="margin:4px 0; font-size:1.1em;">⚡ <strong>{impact['energy_wh']} Wh</strong><br><small>({e_ex})</small></p>
+            <p style="margin:4px 0; font-size:1.1em;">☁️ <strong>{impact['co2_g']} g</strong><br><small>({c_ex})</small></p>
         </div>
         <div class="impact-card good-impact">
             <h3 style="margin: 0 0 10px 0; color: #86efac;">🌿 Eco-Alternative</h3>
-            <p><strong>~0.0 mL</strong> Water | <strong>~0.001 Wh</strong> Energy</p>
-            <p style="font-size:0.85em; opacity: 0.8;">Zero bottles wasted. Planet saved.</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.0 mL</strong> Water</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.001 Wh</strong> Energy</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.01 g</strong> CO₂e</p>
         </div>
     </div>
     """
 
+def format_alt_button(text, impact):
+    icon = "💡"
+    if "Search" in text or "Google" in text: icon = "🔍"
+    elif "Wikipedia" in text or "Encyclopedia" in text: icon = "📚"
+    elif "Expert" in text or "Quora" in text: icon = "👤"
+    elif "Wolfram" in text or "Geogebra" in text or "Desmos" in text: icon = "🧮"
+    elif "Reddit" in text or "Gutenberg" in text or "Thesaurus" in text: icon = "📝"
+    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):
-    """Victory screen with celebrations and detailed audit[cite: 14, 41]."""
-    total_w_saved = sum(item['water_ml'] for item in state["history"] if item['alt_name'] != "None")
-    total_e_saved = sum(item['energy_wh'] for item in state["history"] if item['alt_name'] != "None")
+    total_w_saved = sum(item['water_ml'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
+    total_e_saved = sum(item['energy_wh'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
+    total_c_saved = sum(item['co2_g'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
     
     rows = ""
     for item in state["history"]:
-        savings = f"{item['water_ml']:.1f}mL saved" if item['alt_name'] != "None" else "Justified"
+        if item['alt_name'] == "None (Justified Use)":
+            saved_w, saved_e, saved_c = 0.0, 0.0, 0.0
+            alt_display = "<span style='color: #94a3b8;'>Justified Use</span>"
+        else:
+            saved_w = item['water_ml']
+            saved_e = max(0, item['energy_wh'] - 0.001)
+            saved_c = max(0, item['co2_g'] - 0.01)
+            alt_display = f"<span style='color: #34d399;'>{item['alt_name']}</span>"
+
         rows += f"""
-        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
-            <td style="padding: 10px;">{item['query']}</td>
-            <td style="padding: 10px; color: #fca5a5;">{item['water_ml']}mL / {item['co2_g']}g</td>
-            <td style="padding: 10px; color: #34d399;">{item['alt_name']}</td>
-            <td style="padding: 10px; color: #60a5fa;">{savings}</td>
+        <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['query']}"</td>
+            <td style="padding: 15px; color: #fca5a5;">{item['water_ml']:.1f}mL / {item['energy_wh']:.2f}Wh / {item['co2_g']:.2f}g</td>
+            <td style="padding: 15px;">{alt_display}</td>
+            <td style="padding: 15px; color: #60a5fa; font-weight: bold;">{saved_w:.1f}mL / {saved_e:.2f}Wh / {saved_c:.2f}g</td>
         </tr>
         """
         
     return f"""
-    <div class="victory-screen">
-        <div class="pyro"><div class="before"></div><div class="after"></div></div>
-        <h1 style="color: #34d399; text-align: center; font-size: 3em;">🏆 MISSION ACCOMPLISHED!</h1>
-        <p style="text-align: center; font-size: 1.2em;">You reached {state['points']} points and protected the environment!</p>
+    <div class="victory-dashboard">
+        <div class="confetti"></div>
+        <h1 class="victory-title">🏆 PLANET SAVED! 🏆</h1>
+        <p style="text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px;">You reached {state['points']} points and kept Drip alive!</p>
         
-        <div class="final-stats">
-            <div class="v-box"><h4>Total Water Saved</h4><h2>{total_w_saved:.1f} mL</h2><p>({total_w_saved/500:.1f} bottles)</p></div>
-            <div class="v-box"><h4>Total Energy Saved</h4><h2>{total_e_saved:.2f} Wh</h2><p>({total_e_saved/10:.1f} bulb hours)</p></div>
+        <div class="victory-stats-row">
+            <div class="v-stat-box">
+                <h4>Final Water</h4>
+                <h2>{state['water']:.2f} L</h2>
+            </div>
+            <div class="v-stat-box" style="border-color: #34d399;">
+                <h4 style="color: #34d399;">Planetary Savings</h4>
+                <p style="color: #34d399; margin: 5px 0;">💧 {total_w_saved:.1f} mL Saved</p>
+                <p style="color: #facc15; margin: 5px 0;">⚡ {total_e_saved:.2f} Wh Saved</p>
+                <p style="color: #a8a29e; margin: 5px 0;">☁️ {total_c_saved:.2f} g Saved</p>
+            </div>
+            <div class="v-stat-box" style="border-color: #fca5a5;">
+                <h4 style="color: #fca5a5;">Total Usage</h4>
+                <p style="color: #fca5a5; margin: 5px 0;">💧 {10.0 - state['water']:.2f} L</p>
+                <p style="color: #fca5a5; margin: 5px 0;">⚡ {state['energy']:.4f} kWh</p>
+                <p style="color: #fca5a5; margin: 5px 0;">☁️ {state['co2']:.2f} g</p>
+            </div>
         </div>
 
-        <h3 style="margin-top: 30px; color: #38bdf8;">📊 Your Eco-Audit Log</h3>
-        <div style="overflow-x:auto;">
-            <table style="width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.3); border-radius: 10px;">
-                <tr style="background: rgba(255,255,255,0.1); text-align: left;">
-                    <th style="padding: 10px;">Query</th><th style="padding: 10px;">LLM Cost</th><th style="padding: 10px;">Greener Tool</th><th style="padding: 10px;">Savings</th>
+        <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em;">📊 AI Usage Audit Log</h3>
+        <div style="max-height: 400px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
+            <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1em;">
+                <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
+                    <th style="padding: 15px;">User Query</th>
+                    <th style="padding: 15px;">LLM Cost (Wasted)</th>
+                    <th style="padding: 15px;">Best Alternative</th>
+                    <th style="padding: 15px;">Potential Savings</th>
                 </tr>
                 {rows}
             </table>
@@ -85,44 +217,192 @@ def generate_victory_dashboard(state):
     </div>
     """
 
-# ... [The custom_css should include .pyro animations for the 'blast' effect] ...
-
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
-        return [state] + [gr.update()]*13 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
+        return [state, gr.update()] + [gr.update()]*10 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
 
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
     confidence = result['scores'][0]
+    
     impact = calculate_impact(category, confidence, user_input, selected_model)
     
-    # Update State [cite: 12, 37]
     state["queries"] += 1
     state["water"] = max(0, state["water"] - impact["water_l"])
     state["energy"] += impact["energy_kwh"]
     state["co2"] += impact["co2_g"]
     
-    # Handle Dialogue and Alternatives [cite: 6, 16]
-    show_alts = category != "complex research query"
-    if not show_alts: state["points"] += 50
-    
-    dialogue = get_dialogue(state["water"], category)
+    show_alts = False
+    alt_choices = ["", "", ""]
+    best_alt_name = "None (Justified Use)"
     
+    if category == "complex research query":
+        state["points"] += 50
+        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] 
+        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]
+        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": ALTERNATIVES[category][0]['text'] if show_alts else "None"
+        "query": user_input,
+        "water_ml": impact["water_ml"],
+        "energy_wh": impact["energy_wh"],
+        "co2_g": impact["co2_g"],
+        "alt_name": best_alt_name
     })
 
-    # Return elements and clear user_input [cite: 40]
+    stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
+    drip_ui = get_drip_visuals(state["water"])
+    impact_ui = get_impact_cards(impact, category)
+    audio_path = generate_audio(dialogue)
+    feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected!<br><br><em>\"{dialogue}\"</em></div>"
+    
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        return (state, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), 
-                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""), 
-                gr.update(visible=False), gr.update(visible=True), generate_victory_dashboard(state))
-
-    # General return with input field reset
-    return (state, get_stats_html(state["water"], state["energy"], state["co2"], state["points"]), 
-            get_drip_visuals(state["water"]), generate_audio(dialogue), get_impact_cards(impact, category), 
-            f"### {category.upper()}\n{dialogue}", gr.update(visible=show_alts), 
-            gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""), 
-            gr.update(visible=True), gr.update(visible=False), gr.update())
+        victory_html = generate_victory_dashboard(state)
+        return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(), 
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
+                gr.update(visible=False), gr.update(visible=True), gr.update(value=victory_html))
+
+    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())
+
+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() 
+    selected_dict = next((item for item in state["current_shuffled_alts"] if item["text"] == clean_choice), None)
+    
+    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>"
+    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>"
+    
+    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(), 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; }
+.gradio-container { max-width: 950px !important; margin: auto; padding-top: 20px; }
+h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248, 0.5); font-size: 2.5em !important; margin-bottom: 5px !important;}
+.subtitle { text-align: center; color: #94a3b8; margin-bottom: 30px; font-weight: 300; }
+
+.stats-container { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 20px; }
+.stat-card { flex: 1; padding: 15px 10px; border-radius: 12px; text-align: center; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255,255,255,0.1); }
+.water-card { box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15); border-top: 2px solid #38bdf8; }
+.energy-card { box-shadow: 0 4px 20px rgba(250, 204, 21, 0.15); border-top: 2px solid #facc15; }
+.co2-card { box-shadow: 0 4px 20px rgba(168, 162, 158, 0.15); border-top: 2px solid #a8a29e; }
+.points-card { box-shadow: 0 4px 20px rgba(52, 211, 153, 0.15); border-top: 2px solid #34d399; }
+.stat-label { font-size: 0.75em; letter-spacing: 1px; opacity: 0.8; margin-bottom: 5px; }
+.stat-value { font-size: 1.8em; font-weight: 700; color: white; }
+.progress-bar-bg { background: #1e293b; height: 8px; border-radius: 4px; margin-top: 10px; overflow: hidden; }
+.progress-bar-fill { background: linear-gradient(90deg, #0284c7, #38bdf8); height: 100%; transition: width 0.5s ease; }
+
+@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
+@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+@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; }
+.custom-textbox textarea { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; color: white !important; font-size: 1.1em !important; border-radius: 12px !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.3) !important; padding: 15px !important; resize: none !important; }
+.custom-btn { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; border: none !important; color: white !important; font-weight: bold !important; font-size: 1.1em !important; border-radius: 12px !important; transition: all 0.3s !important; height: 100%; min-height: 85px; }
+.custom-btn:hover { box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important; transform: scale(1.02); }
+
+.impact-container { display: flex; gap: 20px; width: 100%; }
+.impact-card { flex: 1; padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); }
+.bad-impact { background: linear-gradient(180deg, rgba(127, 29, 29, 0.3), rgba(69, 10, 10, 0.5)); border-top: 3px solid #ef4444; }
+.good-impact { background: linear-gradient(180deg, rgba(20, 83, 45, 0.3), rgba(6, 78, 59, 0.5)); border-top: 3px solid #10b981; }
+
+.alt-group { padding: 25px; background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(6, 95, 70, 0.1)); border-radius: 20px; border: 1px solid rgba(16, 185, 129, 0.3); margin-top: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
+.alt-card { background: linear-gradient(145deg, #1e293b, #0f172a) !important; border: 1px solid #10b981 !important; color: #a7f3d0 !important; height: auto !important; min-height: 180px !important; border-radius: 16px !important; font-size: 1.05em !important; font-weight: 500 !important; white-space: pre-wrap !important; line-height: 1.5 !important; padding: 15px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;}
+.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-dashboard { background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: 24px; border: 2px solid #34d399; animation: pulseGlow 2s infinite; color: white; position: relative; overflow: hidden; }
+.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; }
+.v-stat-box h2 { color: #38bdf8; font-size: 2.5em; margin: 0; }
+
+/* Confetti Animation */
+.confetti { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
+.pyro > .before, .pyro > .after { position: absolute; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }
+.pyro > .after { animation-delay: 1.25s, 1.25s, 1.25s; animation-duration: 1.25s, 1.25s, 6.25s; }
+@keyframes bang { to { box-shadow: -70px -115.67px #47ff00, -28px -99.67px #00ff2b, 15px -106.67px #00ffdd, -20px -54.67px #ff0073, 5px -144.67px #ff0055, 60px -95.67px #0015ff, 80px -82.67px #ffeb00, 10px -100.67px #ff0022; } }
+@keyframes gravity { to { transform: translateY(200px); opacity: 0; } }
+@keyframes position { 0%, 19.9% { margin-top: 10%; margin-left: 40%; } 20%, 39.9% { margin-top: 40%; margin-left: 30%; } 40%, 59.9% { margin-top: 20%; margin-left: 70%; } 60%, 79.9% { margin-top: 30%; margin-left: 20%; } 80%, 99.9% { margin-top: 30%; margin-left: 80%; } }
+"""
+
+with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
+    game_state = gr.State({
+        "water": 10.0, "energy": 0.0, "co2": 0.0, "points": 0, "queries": 0, 
+        "history": [], "game_over": False, "current_best_alt": None, "current_shuffled_alts": []
+    })
+
+    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>")
+
+    stats_html = gr.HTML(get_stats_html(10.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"]):
+                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"])
+                drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
+            
+            with gr.Column(scale=2):
+                model_selector = gr.Dropdown(choices=list(MODELS.keys()), value="GPT-5.4", label="Select Target LLM Backend", elem_classes=["custom-dropdown"])
+                with gr.Row(elem_classes=["input-row"]):
+                    user_input = gr.Textbox(show_label=False, placeholder="Type your query here...", elem_classes=["custom-textbox"], scale=4, lines=3)
+                    submit_btn = gr.Button("Send Query", elem_classes=["custom-btn"], scale=1)
+                impact_display = gr.HTML()
+
+        with gr.Group(visible=False, elem_classes=["alt-group"]) as alternatives_group:
+            gr.Markdown("<h3 style='text-align:center; color:#34d399; margin-bottom: 20px;'>🌱 Drip says: 'Quick! Pick a greener tool to earn points!'</h3>")
+            with gr.Row():
+                alt_btn_1 = gr.Button("", elem_classes=["alt-card"])
+                alt_btn_2 = gr.Button("", elem_classes=["alt-card"])
+                alt_btn_3 = gr.Button("", elem_classes=["alt-card"])
+            alt_feedback = gr.Markdown()
+
+    with gr.Column(visible=False) as victory_ui:
+        victory_display = gr.HTML()
+
+    submit_btn.click(
+        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]
+    )
+
+    for btn in [alt_btn_1, alt_btn_2, alt_btn_3]:
+        btn.click(
+            fn=select_alternative,
+            inputs=[btn, game_state],
+            outputs=[game_state, stats_html, alt_feedback, alternatives_group, main_game_ui, victory_ui, victory_display]
+        )
+
+demo.launch()