Widen layout, more title padding, verbose image gen logging

- max-width 420px → 680px so footer fits on one line
- step title (h3) padding increased
- generate_image() now logs animals/places/prompt/result/errors with traceback
- image_generator._generate() returns error string instead of "" on failure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -171,16 +171,22 @@ def generate_image(state: dict):
         places  = state.get("selected_places",  [random.choice(PLACE_EMOJIS)])
         streak  = state.get("streak", 0)
 
-        result, _ = generate_reward_image(streak, animals, places)
+        print(f"[generate_image] calling generate_reward_image | streak={streak} | animals={animals} | places={places}")
+        result, prompt = generate_reward_image(streak, animals, places)
+        print(f"[generate_image] result={result} | prompt={prompt!r}")
 
         if result is None:
+            print("[generate_image] ⚠️  result is None — generation failed silently inside image_generator")
             return (gr.update(visible=False), None,
                     "⚠️ Could not generate image — try again later!")
 
+        print("[generate_image] ✅ image generated successfully")
         return gr.update(visible=False), result, ""
 
     except Exception as e:
-        print(f"generate_image error: {e}")
+        import traceback
+        print(f"[generate_image] ❌ exception: {e}")
+        print(traceback.format_exc())
         return gr.update(visible=False), None, f"⚠️ Error: {e}"
 
 # ---------------------------------------------------------------------------
@@ -196,8 +202,10 @@ def restart(state: dict):
 # ---------------------------------------------------------------------------
 
 CSS = """
-.gradio-container { max-width: 420px !important; margin: 0 auto !important; }
-.gradio-group > .form { padding: 12px 16px !important; }
+.gradio-container { max-width: 680px !important; margin: 0 auto !important; }
+.gradio-group > .form { padding: 16px 20px !important; }
+.gradio-group > .form > .gap > .prose h3,
+.gradio-group > .form > .gap > p { padding-top: 8px !important; padding-bottom: 4px !important; }
 #title        { text-align: center; font-size: 2.2em; margin-bottom: 0.1em; }
 #subtitle     { text-align: center; color: #888; margin-bottom: 1em; font-style: italic; }
 #question-box { text-align: center; font-size: 2.6em; font-weight: bold; padding: 0.5em; }

image_generator.py

@@ -134,8 +134,10 @@ def _generate(streak: int, animals: list[str], places: list[str]):
         return result.images[0], prompt
 
     except Exception as e:
-        print(f"Image generation failed: {e}")
-        return None, ""
+        import traceback
+        print(f"[image_generator] ❌ generation failed: {e}")
+        print(traceback.format_exc())
+        return None, str(e)
 
 
 # ---------------------------------------------------------------------------