Update app.py

app.py

@@ -88,6 +88,12 @@ APP_CSS = """
                 radial-gradient(circle at 90% 0%, #d7f4e3 0, transparent 26%),
                 linear-gradient(140deg, var(--bg-1), var(--bg-2));
     color: var(--ink);
+    --body-text-color: var(--ink);
+    --body-text-color-subdued: #2b303a;
+    --block-title-text-color: var(--ink);
+    --block-label-text-color: var(--ink);
+    --input-text-color: var(--ink);
+    --button-secondary-text-color: var(--ink);
 }
 
 .gradio-container,
@@ -113,11 +119,51 @@ APP_CSS = """
     border: 1px solid #cfd6c6 !important;
 }
 
+.gradio-container select option,
+.gradio-container option {
+    color: #111827 !important;
+    background: #ffffff !important;
+    opacity: 1 !important;
+}
+
 .gradio-container ::placeholder {
     color: #6b7280 !important;
     opacity: 1;
 }
 
+/* Force high contrast for muted/inactive Gradio states */
+.gradio-container .tab-nav button,
+.gradio-container .tab-nav button[aria-selected="false"],
+.gradio-container .tab-nav button[aria-selected="true"],
+.gradio-container .secondary,
+.gradio-container .secondary * ,
+.gradio-container [class*="dropdown"] *,
+.gradio-container [role="listbox"],
+.gradio-container [role="listbox"] *,
+.gradio-container [role="option"],
+.gradio-container [role="option"] *,
+.gradio-container .gr-form .form,
+.gradio-container .gr-markdown,
+.gradio-container .gr-markdown *,
+.gradio-container .message,
+.gradio-container .message *,
+.gradio-container .wrap,
+.gradio-container .wrap * {
+    color: var(--ink) !important;
+    opacity: 1 !important;
+}
+
+.gradio-container .tab-nav button {
+    background: #f2f5ec !important;
+    border: 1px solid #c8d0bf !important;
+}
+
+.gradio-container .tab-nav button[aria-selected="true"] {
+    background: #dcebdc !important;
+    border: 1px solid #7cad93 !important;
+    font-weight: 700 !important;
+}
+
 .hero {
     border: 1px solid var(--line);
     background: linear-gradient(120deg, #fffdf5 0%, #f4fffa 100%);
@@ -415,6 +461,35 @@ def create_room(teacher_pin: str, budget_per_team: int = 20) -> Tuple[str, str]:
     return code, f"Room created: {code}"
 
 
+def start_free_play(team_name: str, budget_per_team: int = 20) -> Tuple[dict, str]:
+    team_name = (team_name or "").strip()
+    if not team_name:
+        return {}, "Provide a team name to start free play."
+
+    code = f"FREE-{random.randint(1000, 9999)}"
+    with rooms_lock:
+        while code in rooms:
+            code = f"FREE-{random.randint(1000, 9999)}"
+        rooms[code] = {
+            "created_at": _now_ms(),
+            "round": 1,
+            "budget_per_team": int(budget_per_team),
+            "active_event": None,
+            "teams": {
+                team_name: {
+                    "joined_at": _now_ms(),
+                    "budget_left": int(budget_per_team),
+                    "unlocked_datasets": set(),
+                    "profit_points": 0,
+                    "customer_points": 0,
+                    "submissions": [],
+                }
+            },
+            "log": [{"t": _now_ms(), "type": "free_play_start", "team": team_name}],
+        }
+    return {"room": code, "team": team_name}, f"Free play started in {code} as {team_name}."
+
+
 def join_room(room_code: str, team_name: str) -> Tuple[dict, str]:
     room_code = room_code.strip().upper()
     team_name = team_name.strip()
@@ -837,6 +912,16 @@ with gr.Blocks(
   <h1>AI Café Challenge</h1>
   <p>Run your campus café like a data team: unlock evidence, test decisions, and iterate with tutor feedback.</p>
 </div>
+"""
+    )
+    gr.Markdown(
+        """
+### How to play
+1. Join an existing room, or click **Start Free Play** to explore solo.
+2. Ask the assistant for hints and request datasets with a clear business question.
+3. Use unlocked files and plots to build evidence.
+4. Submit a decision with model card + decision report.
+5. Use **Tutor Feedback (Step-by-step)** to improve your work each round.
 """
     )
 
@@ -847,6 +932,7 @@ with gr.Blocks(
             room_in = gr.Textbox(label="Room code", placeholder="ROOM-1234")
             team_in = gr.Textbox(label="Team name", placeholder="e.g., Team Orion")
             join_btn = gr.Button("Join")
+            free_play_btn = gr.Button("Start Free Play", variant="primary")
 
         join_status = gr.Markdown("Not joined.", elem_classes=["block-panel"])
         header = gr.Markdown("")
@@ -909,9 +995,15 @@ with gr.Blocks(
             sess, msg = join_room(room_code, team_name)
             return sess, msg
 
+        def _free_play(team_name):
+            return start_free_play(team_name)
+
         join_btn.click(_join, [room_in, team_in], [session, join_status]).then(
             ui_refresh, [session], [header, score_table, event_text]
         )
+        free_play_btn.click(_free_play, [team_in], [session, join_status]).then(
+            ui_refresh, [session], [header, score_table, event_text]
+        )
 
         refresh_btn.click(ui_refresh, [session], [header, score_table, event_text])