Space: force light theme (dark-mode text was white on parchment), remove per-page brand text, picker as sidebar + framed canvas stage

app.py

@@ -51,9 +51,20 @@ THEME = ('<style>'
          'body,gradio-app,.gradio-container{background:#f3ebdc !important;color:#141821;'
          "font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;}"
          ".gradio-container h1{font-family:'Fraunces',Georgia,serif !important;color:#141821;}"
+         # Sprite tab: picker = unframed sidebar, canvas = the framed pixi stage.
+         '#sprite-stage .movement-picker{border-right:0;}'
+         '#sprite-stage .movement-stage{border:2px solid #141821;}'
          '</style>')
+# Force Gradio's LIGHT theme. Gradio honours the OS dark mode, where its text goes
+# white (#f3f4f6) — unreadable on our parchment background. Redirecting to
+# `?__theme=light` makes it use light component backgrounds + dark text everywhere.
+# The session guard prevents a redirect loop if the query were ever stripped.
+FORCE_LIGHT = ('<script>(function(){try{var u=new URL(location.href);'
+               "if(u.searchParams.get('__theme')!=='light'&&!sessionStorage.getItem('ta_themed')){"
+               "sessionStorage.setItem('ta_themed','1');u.searchParams.set('__theme','light');"
+               'location.replace(u.href);}}catch(e){}})();</script>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
-        + HIDE_TABS + FONTS + THEME +
+        + FORCE_LIGHT + HIDE_TABS + FONTS + THEME +
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
         '<script type="module" src="/web/tiny.js"></script>'
@@ -108,16 +119,15 @@ def diary(unit: str, traits: str) -> str:
 
 with gr.Blocks(title="Tiny Army") as demo:
     gr.HTML(SIDEBAR_HTML)
-    gr.Markdown("# ⚔️ Tiny Army\n*Every fighter writes its own legend — and the "
-                "legend is true.* Built on Gradio; sprites + engine reused from "
-                "auto-battler, rendered with Pixi.")
     with gr.Tabs():
         with gr.Tab("Battle") as battle_tab:
             gr.HTML(f'<div id="battle-stage" style="{STAGE}"></div>')
         with gr.Tab("Sprite Animations") as sprite_tab:
             # The shared playground (web/playground.js) builds the whole page —
-            # team picker, canvas, instructions, compass, extras — into this div.
-            gr.HTML(f'<div id="sprite-stage" style="{STAGE.replace("56vh", "62vh")}"></div>')
+            # team picker (a sidebar) + the framed canvas stage + chrome — into this
+            # div. No dark box here: the picker is the sidebar, the canvas is the
+            # stage (framed by CSS), so it mirrors auto-battler's layout.
+            gr.HTML('<div id="sprite-stage" style="height:64vh;overflow:hidden"></div>')
         # Pixi canvases start hidden (0×0); re-measure them when a tab is shown.
         battle_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")
         sprite_tab.select(None, None, None, js="()=>window.tinyResize&&window.tinyResize()")