style(ui): remove the dark box around the hint clue input

Render the hint input as a clean underline (transparent fill, no border
box) so it stops clashing with the card surface.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -1785,7 +1785,8 @@ with gr.Blocks(title="CityQuest · AI") as demo:
 
                     with gr.Row(elem_classes=["hints-input-row"]):
                         d_ask_q = gr.Textbox(show_label=False, scale=1,
-                                             placeholder="Ask for a clue, or tell me where you're stuck…")
+                                             placeholder="Ask for a clue, or tell me where you're stuck…",
+                                             elem_classes=["hint-input"])
                         d_ask_btn = gr.Button(f"Get a hint  −{HINT_PENALTY} pts", scale=0,
                                               min_width=220,
                                               elem_id="td-ask", elem_classes=["btn-hint"])

app/ui/theme.py

@@ -786,6 +786,31 @@ ul.options[role="listbox"] li {
     align-items: center !important;
     gap: 8px !important;
 }
+/* Strip the dark filled box from the hint input — clean underline instead. */
+.hint-input input,
+.hint-input textarea {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding-left: 4px !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+}
+.hint-input input:focus,
+.hint-input textarea:focus {
+    border-bottom: 1.5px solid #f5a623 !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.hint-input .block,
+.hint-input > div {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
 .hints-input-row input {
     height: 44px !important;
 }