Restore icons in status bar and enforce consistent panel width

- Status bar: restored 👤 🎮 📚 ✅ icons alongside new Level: X format
- CSS: added width:100% + box-sizing:border-box to .gradio-group and its .form
so all steps (welcome / picker / game) render at identical width

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

app.py

@@ -36,8 +36,8 @@ def _status_text(state: dict) -> str:
     diff    = MATH_LEVEL_NAMES.get(_math_level(state), "")
     correct = state.get("correct_this_level", 0)
     level   = state.get("level", 1)
-    return (f"{state['name']}  |  Level: {level}  |  "
-            f"{diff}  |  {correct} / {ANSWERS_PER_LEVEL}")
+    return (f"👤 {state['name']}  |  🎮 Level: {level}  |  "
+            f"📚 {diff}  |  ✅ {correct} / {ANSWERS_PER_LEVEL}")
 
 def _safe_question(state: dict) -> str:
     return f"## {state.get('question', '')} = ?"
@@ -433,7 +433,9 @@ BANNER_HTML = f"""
 
 CSS = """
 .gradio-container { max-width: 560px !important; margin: 0 auto !important; }
-.gradio-group > .form { padding: 20px 24px !important; }
+/* All top-level panels fill the container identically */
+.gradio-group { width: 100% !important; box-sizing: border-box !important; }
+.gradio-group > .form { padding: 20px 24px !important; box-sizing: border-box !important; width: 100% !important; }
 .prose h3 { margin-top: 14px !important; margin-bottom: 8px !important; padding-left: 4px !important; }
 #question-box { text-align: center; font-size: 2.6em; font-weight: bold; padding: 0.5em; }
 #feedback-box { text-align: center; font-size: 1.3em; min-height: 2em; }